Desain Dashboard Customer
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 -rKemudian 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 servekemudian 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>
@endsectionSekarang 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>
@endsectionSekarang 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.
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
