Desain dashboard customer adalah halaman yang digunakan untuk menampilkan daftar customer yang mempunyai akun di toko kita. Sama seperti dashboard sebelumnya, kita membutuhkan 1 buah file controller dan view. Selain itu juga kita harus mengedit routes/web.php untuk mengarahkan ke halaman dashboard customer.
# Buat Customer Controller
Untuk membuat customer constroller, buka terminal dan jalankan perintah
php artisan make:controller CustomerController -r
Kemudian pencet enter.
Buka file CustomerController.php dan isi dengan kode berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CustomerController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = array('title' => 'Data Customer');
return view('customer.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)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$data = array('title' => 'Form Edit Customer');
return view('customer.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 web.php
Setelah controller selesai kita buat, selanjutnya edit file routes/web.php untuk mengarahkan ke halaman admin/customer. Sekarang buka file routes/web.php dan sesuaikan seperti kode di bawah ini.
<?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');
});
Di terminal jalankan perintah
php artisan serve
kemudian pencet enter untuk menjalankan aplikasi. Akses halaman http://localhost:8000/admin/customer
Untuk saat ini masih error karena belum membuat file views-nya.
# Halaman index customer
Buat 1 buah folder baru di dalam folder views dengan nama customer. Kemudian di dalam folder customer 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 Customer
</h3>
</div>
<div class="card-body">
<form action="#">
<div class="row">
<div class="col">
<input type="text" name="keyword" id="keyword" class="form-control" placeholder="ketik keyword disini">
</div>
<div class="col-auto">
<button class="btn btn-primary">
Cari
</button>
</div>
</div>
</form>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Email</th>
<th>No Tlp</th>
<th>Alamat</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Amin</td>
<td>[email protected]</td>
<td>085852527575</td>
<td>
Jln. Jend Sudirman no.1, Kudus
</td>
<td>
Aktif
</td>
<td>
<a href="{{ route('customer.edit', 1) }}" class="btn btn-sm btn-primary">Edit</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>[email protected]</td>
<td>085852527576</td>
<td>
Jln. Jend Sudirman no.2, Kudus
</td>
<td>
Aktif
</td>
<td>
<a href="{{ route('customer.edit', 2) }}" class="btn btn-sm btn-primary">Edit</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Iwan</td>
<td>[email protected]</td>
<td>085852527577</td>
<td>
Jln. Jend Sudirman no.3, Kudus
</td>
<td>
Aktif
</td>
<td>
<a href="{{ route('customer.edit', 3) }}" class="btn btn-sm btn-primary">Edit</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Lala</td>
<td>[email protected]</td>
<td>085852527578</td>
<td>
Jln. Jend Sudirman no.4, Kudus
</td>
<td>
Aktif
</td>
<td>
<a href="{{ route('customer.edit', 4) }}" class="btn btn-sm btn-primary">Edit</a>
</td>
</tr>
<tr>
<td>5</td>
<td>Didi</td>
<td>[email protected]</td>
<td>085852527579</td>
<td>
Jln. Jend Sudirman no.5, Kudus
</td>
<td>
Aktif
</td>
<td>
<a href="{{ route('customer.edit', 5) }}" class="btn btn-sm btn-primary">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Sekarang akses kembali halaman http://localhost:8000/admin/customer tampilannya akan berubah menjadi seperti gambar di bawah ini.
# Halaman edit customer
Masih di dalam folder customer, tambahkan 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-4 col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Form Edit Customer
</h3>
<div class="card-tools">
<a href="{{ route('customer.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>
Nama
</td>
<td>
Amin
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
[email protected]
</td>
</tr>
<tr>
<td>
No Tlp
</td>
<td>
Alamat
</td>
</tr>
<tr>
<td>
Status
</td>
<td>
<form action="#" class="form-inline">
<div class="form-group mr-2">
<select name="status" id="status" class="form-control">
<option value="aktif">Aktif</option>
<option value="nonaktif">Non Aktif</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
Sekarang buka halaman edit customer dengan mengakses halaman http://localhost:8000/admin/customer/1/edit tampilannya akan seperti gambar di bawah ini.
# Edit menu dashboard
Agar bisa diakses melalui menu di dashboard, sekarang buka file menudashboard.blade.php dan tambahkan link ke dashboard customer dengan mengubah kode berikut ini.
<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="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Transaksi Baru</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>
Sekarang coba buka halaman dashboard customer dengan mengklik menu data -> customer. Sampai sini berarti desain dashboard customer selesai kita buat. Pada tutorial selanjutnya kita akan membuat halaman dashboard transaksi.