Dashboard customer selesai kita buat, sekarang kita akan membuat halaman dashboard transaksi. Dashboard transaksi adalah halaman yang menampilkan daftar penjualan. Sama seperti sebelumnya, kita akan membuat 1 buah controller dan 3 buah views. Dan juga mengedit file routes/web.php untuk mengarahkan ke halaman dashboard transaksi.
# Buat Transaksi Controller
Buka terminal dan jalankan perintah di bawah ini.
php artisan make:controller TransaksiController -r
Kemudian pencet enter. Setelah itu, buka file TransaksiController.php dan isi dengan kode berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TransaksiController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = array('title' => 'Data Transaksi');
return view('transaksi.index', $data);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$data = array('title' => 'Detail Transaksi');
return view('transaksi.show', $data);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$data = array('title' => 'Form Edit Transaksi');
return view('transaksi.edit', $data);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
# Edit routes/web.php
Untuk mengarahkan ke halaman dashboard transaksi, buka file routes/web.php dan tambahkan route transaksi.
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');
Route::get('/kategori', '[email protected]');
Route::get('/kategori/{slug}', '[email protected]');
Route::get('/produk', '[email protected]');
Route::get('/produk/{slug}', '[email protected]');
Route::group(['prefix' => 'admin'], function() {
Route::get('/', '[email protected]');
// route kategori
Route::resource('kategori', 'KategoriController');
// route produk
Route::resource('produk', 'ProdukController');
// route customer
Route::resource('customer', 'CustomerController');
// route transaksi
Route::resource('transaksi', 'TransaksiController');
});
Kembali ke terminal dan jalankan perintah
php artisan serve
untuk menjalankan aplikasi.
Sekarang coba akses halaman http://localhost:8000/admin/transaksi sampai disini masih ada error. Kita akan memperbaikinya dengan membuat file viewsnya.
# Buat halaman index.blade.php
Buat 1 buah folder dengan nama transaksi di dalam folder views. Kemudian di dalam folder transaksi buat 1 buah file dengan nama index.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Data Transaksi
</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Invoice</th>
<th>Sub Total</th>
<th>Diskon</th>
<th>Ongkir</th>
<th>Total</th>
<th>Status Pembayaran</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Inv-01
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 1) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
<a href="{{ route('transaksi.edit', 1) }}" class="btn btn-sm btn-primary mb-2">
Edit
</a>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Inv-02
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 2) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
<a href="{{ route('transaksi.edit', 2) }}" class="btn btn-sm btn-primary mb-2">
Edit
</a>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Inv-03
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 3) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
<a href="{{ route('transaksi.edit', 3) }}" class="btn btn-sm btn-primary mb-2">
Edit
</a>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Inv-04
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 4) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
<a href="{{ route('transaksi.edit', 4) }}" class="btn btn-sm btn-primary mb-2">
Edit
</a>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Inv-05
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 5) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
<a href="{{ route('transaksi.edit', 5) }}" class="btn btn-sm btn-primary mb-2">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Sekarang akses kembali http://localhost:8000/admin/transaksi
Kalau tidak ada error, maka akan tampil seperti gambar di bawah ini.
# Buat halaman show.blade.php
Masih di dalam folder yang sama yaitu transaksi, buat 1 buah file lagi dengan nama show.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-8 col-md-8 mb-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">Item</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
No
</th>
<th>
Kode
</th>
<th>
Nama
</th>
<th>
Harga
</th>
<th>
Qty
</th>
<th>
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>KATE-1</td>
<td>Baju Anak</td>
<td class="text-right">15.000</td>
<td class="text-right">2</td>
<td class="text-right">30.000</td>
</tr>
<tr>
<td>2</td>
<td>KATE-2</td>
<td>Baju Anak</td>
<td class="text-right">25.000</td>
<td class="text-right">2</td>
<td class="text-right">50.000</td>
</tr>
<tr>
<td>3</td>
<td>KATE-3</td>
<td>Baju Anak</td>
<td class="text-right">35.000</td>
<td class="text-right">2</td>
<td class="text-right">70.000</td>
</tr>
<tr>
<td colspan="5">
<b>Total</b>
</td>
<td class="text-right">
<b>150.000</b>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<a href="{{ route('transaksi.index') }}" class="btn btn-sm btn-danger">Tutup</a>
</div>
</div>
</div>
<div class="col col-lg-4 col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Ringkasan</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
Total
</td>
<td>
127.000
</td>
</tr>
<tr>
<td>
Subtotal
</td>
<td>
150.000
</td>
</tr>
<tr>
<td>
Diskon
</td>
<td>
0
</td>
</tr>
<tr>
<td>
Ongkir
</td>
<td>
27.000
</td>
</tr>
<tr>
<td>
Ekspedisi
</td>
<td>
JNE
</td>
</tr>
<tr>
<td>
No. Resi
</td>
<td>
123123123123123
</td>
</tr>
<tr>
<td>
Status Pembayaran
</td>
<td>
Sudah dibayar
</td>
</tr>
<tr>
<td>
Status
</td>
<td>
Dikirim
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Halaman ini digunakan untuk menampilkan detail transaksi. Untuk mengaksesnya buka halaman http://localhost:8000/admin/transaksi/1 hasilnya akan tampil seperti berikut.
# Halaman edit transaksi
Masih di folder transaksi, buat 1 buah file lagi dengan nama edit.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-8 col-md-8 mb-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">Item</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
No
</th>
<th>
Kode
</th>
<th>
Nama
</th>
<th>
Harga
</th>
<th>
Qty
</th>
<th>
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>KATE-1</td>
<td>Baju Anak</td>
<td class="text-right">15.000</td>
<td class="text-right">2</td>
<td class="text-right">30.000</td>
</tr>
<tr>
<td>2</td>
<td>KATE-2</td>
<td>Baju Anak</td>
<td class="text-right">25.000</td>
<td class="text-right">2</td>
<td class="text-right">50.000</td>
</tr>
<tr>
<td>3</td>
<td>KATE-3</td>
<td>Baju Anak</td>
<td class="text-right">35.000</td>
<td class="text-right">2</td>
<td class="text-right">70.000</td>
</tr>
<tr>
<td colspan="5">
<b>Total</b>
</td>
<td class="text-right">
<b>150.000</b>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<a href="{{ route('transaksi.index') }}" class="btn btn-sm btn-danger">Tutup</a>
</div>
</div>
</div>
<div class="col col-lg-4 col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Ringkasan</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<form action="">
<tbody>
<tr>
<td>
Total
</td>
<td>
<input type="text" name="total" id="total" class="form-control" value="150.000">
</td>
</tr>
<tr>
<td>
Subtotal
</td>
<td>
<input type="text" name="subtotal" id="subtotal" class="form-control" value="150.000">
</td>
</tr>
<tr>
<td>
Diskon
</td>
<td>
<input type="text" name="diskon" id="diskon" class="form-control" value="0">
</td>
</tr>
<tr>
<td>
Ongkir
</td>
<td>
<input type="text" name="ongkir" id="ongkir" class="form-control" value="27.000">
</td>
</tr>
<tr>
<td>
Ekspedisi
</td>
<td>
<input type="text" name="ekspedisi" id="ekspedisi" class="form-control" value="jne">
</td>
</tr>
<tr>
<td>
No. Resi
</td>
<td>
<input type="text" name="no_resi" id="no_resi" class="form-control" value="123123123123">
</td>
</tr>
<tr>
<td>
Status Pembayaran
</td>
<td>
<select name="status_pembayaran" id="status_pembayaran" class="form-control">
<option value="sudah">Sudah Dibayar</option>
<option value="belum">Belum Dibayar</option>
</select>
</td>
</tr>
<tr>
<td>
Status
</td>
<td>
<select name="status" id="status" class="form-control">
<option value="checkout">Checkout</option>
<option value="diproses">Diproses</option>
<option value="dikirim">Dikirim</option>
<option value="diterima">Diterima</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button type="submit" class="btn btn-primary">Update</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Sesuai namanya, halaman edit ini digunakan untuk mengedit data transaksi. Untuk mengaksesnya buka halaman http://localhost:8000/admin/transaksi/1/edit tampilannya akan tampak seperti gambar berikut.
# Ubah menu dashboard
Ubah menu dashboard seperti yang pada tutorial dashboard customer tadi. Buka file menudashboard.blade.php dan ubah pada bagian menu transaksi dengan menambahkan link ke halaman dashboard transaksi.
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-folder-open"></i>
<p>
Produk
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('produk.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Produk</p>
</a>
</li>
<li class="nav-item">
<a href="{{ route('kategori.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Kategori</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-shopping-cart"></i>
<p>
Transaksi
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('transaksi.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Data Transaksi</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-folder"></i>
<p>
Data
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('customer.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Customer</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-list"></i>
<p>
Laporan
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Penjualan</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>
Sign Out
</p>
</a>
</li>
</ul>
</nav>
Refresh halaman dashboard, sekarang coba akses menggunakan menu dashboard yang barusan kita ubah.