Dashboard Transaksi
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 -rKemudian 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 serveuntuk 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>
@endsectionSekarang 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>
@endsectionHalaman 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>
@endsectionSesuai 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.
Mau Bikin Aplikasi Web & Aplikasi Android?
Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir
Silahkan kontak link di bawah ini untuk teknis dan harganya
