Desain Dashboard Produk
Kategori produk sudah kita buat, selanjutnya kita membuat halaman dashboard produk.
# Buat Produk Controller
Buka terminal dan jalankan perintah
php artisan make:controller ProdukController -rKemudian buka file ProdukController.php dan isi dengan kode berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ProdukController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = array('title' => 'Produk');
return view('produk.index', $data);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$data = array('title' => 'Form Produk Baru');
return view('produk.create', $data);
}
/**
* 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' => 'Foto Produk');
return view('produk.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 Produk');
return view('produk.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)
{
//
}
}
# Tambahkan Router Produk
Setelah ProdukController.php kita edit, selanjutnya buka file routes/web.php dan tambahkan route produk sehingga menjadi seperti berikut.
<?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');
});Controller dan route sudah kita buat, selanjutnya kembali ke terminal dan jalan perintah
php artisan serveKemudian akses di http://localhost:8000/admin/produk
Akan tampil pesan error seperti pada kategori produk tadi. Sekarang kita tambahkan file view untuk dashboard produknya.
# Halaman index produk
Buat 1 folder lagi di dalam folder views dengan nama produk, kemudian buat 1 buah file dengan nama index.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<!-- table produk -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h4 class="card-title">Produk</h4>
<div class="card-tools">
<a href="{{ route('produk.create') }}" class="btn btn-sm btn-primary">
Baru
</a>
</div>
</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 table-bordered">
<thead>
<tr>
<th width="50px">No</th>
<th>Gambar</th>
<th>Kode</th>
<th>Nama</th>
<th>Jumlah Produk</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="{{ asset('images/slide1.jpg') }}" alt="produk 1" width='150px'>
<div class="row mt-2">
<div class="col">
<input type="file" name="gambar" id="gambar">
</div>
<div class="col-auto">
<button class="btn btn-sm btn-primary">Upload</button>
</div>
</div>
</td>
<td>KATE-1</td>
<td>Baju Anak</td>
<td>12 Produk</td>
<td>
<a href="{{ route('produk.show', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Detail
</a>
<a href="{{ route('produk.edit', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Edit
</a>
<button class="btn btn-sm btn-danger mb-2">
Hapus
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="{{ asset('images/slide1.jpg') }}" alt="produk 1" width='150px'>
<div class="row mt-2">
<div class="col">
<input type="file" name="gambar" id="gambar">
</div>
<div class="col-auto">
<button class="btn btn-sm btn-primary">Upload</button>
</div>
</div>
</td>
<td>KATE-2</td>
<td>Baju Wanita</td>
<td>20 Produk</td>
<td>
<a href="{{ route('produk.show', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Detail
</a>
<a href="{{ route('produk.edit', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Edit
</a>
<button class="btn btn-sm btn-danger mb-2">
Hapus
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="{{ asset('images/slide1.jpg') }}" alt="produk 1" width='150px'>
<div class="row mt-2">
<div class="col">
<input type="file" name="gambar" id="gambar">
</div>
<div class="col-auto">
<button class="btn btn-sm btn-primary">Upload</button>
</div>
</div>
</td>
<td>KATE-3</td>
<td>Baju Wanita</td>
<td>20 Produk</td>
<td>
<a href="{{ route('produk.show', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Detail
</a>
<a href="{{ route('produk.edit', 2) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Edit
</a>
<button class="btn btn-sm btn-danger mb-2">
Hapus
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsectionRefresh halaman http://localhost:8000/admin/produk
Kalau tidak ada error, maka akan tampil seperti gambar di bawah ini.
# Halaman Form Produk Baru
Masih di dalam folder produk, tambahkan 1 buah file lagi dengan nama create.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-6 col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Form Produk</h3>
<div class="card-tools">
<a href="{{ route('produk.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<form action="#">
<div class="form-group">
<label for="nama_produk">Nama Produk</label>
<input type="text" name="nama_produk" id="nama_produk" class="form-control">
</div>
<div class="form-group">
<label for="slug_produk">Slug Produk</label>
<input type="text" name="slug_produk" id="slug_produk" class="form-control">
</div>
<div class="form-group">
<label for="deskripsi">Deskripsi</label>
<textarea name="deskripsi" id="deskripsi" cols="30" rows="5" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Simpan</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionSekarang klik tombol "baru" pada kanan atas halaman produk tadi, atau akses langsung ke halaman http://localhost:8000/admin/produk/create
Kalau tidak ada error, maka akan tampil halaman form produk baru.
# Halaman input gambar produk
Setelah produk dibuat, maka selanjutnya adalah form input gambar produk. Di dalam folder produk tambahkan 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-4 col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Detail Produk</h3>
<div class="card-tools">
<a href="{{ route('produk.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tr>
<td>Kode Produk</td>
<td>
PRO-12
</td>
</tr>
<tr>
<td>Nama Produk</td>
<td>
Baju Anak
</td>
</tr>
<tr>
<td>Qty</td>
<td>
12 pcs
</td>
</tr>
<tr>
<td>Harga</td>
<td>
Rp. 15.0000
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col col-lg-8 col-md-8">
<div class="card">
<div class="card-header">
<h3 class="card-title">Foto Produk</h3>
</div>
<div class="card-body">
<form action="#">
<div class="row">
<div class="col">
<div class="form-group">
<input type="file" name="image" id="image">
</div>
</div>
<div class="col">
<div class="form-group">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</form>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
<div class="col-md-3 mb-2">
<img src="{{ asset('images/slide1.jpg') }}" alt="image" class="img-thumbnail mb-2">
<button class="btn-sm btn-danger btn">
Delete
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsectionSekarang pada halaman data produk, klik tombol detail atau akses halaman http://localhost:8000/admin/produk/1 apabila tidak ada error maka akan tampil halaman seperti gambar di bawah ini.
# Halaman Form edit produk
Terakhir tambahkan 1 buah file lagi di dalam folder produk 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-6 col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Form Edit Produk</h3>
<div class="card-tools">
<a href="{{ route('produk.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<form action="#">
<div class="form-group">
<label for="nama_produk">Nama Produk</label>
<input type="text" name="nama_produk" id="nama_produk" class="form-control">
</div>
<div class="form-group">
<label for="slug_produk">Slug Produk</label>
<input type="text" name="slug_produk" id="slug_produk" class="form-control">
</div>
<div class="form-group">
<label for="deskripsi">Deskripsi</label>
<textarea name="deskripsi" id="deskripsi" cols="30" rows="5" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionSekarang klik tombol edit pada halaman data produk atau akses di halaman http://localhost:8000/produk/2/edit
Kalau tidak ada error, maka akan tampil halaman seperti berikut.
Sampai disini berarti desain dashboard produk selesai kita buat. Selanjutnya kita akan membuat dashboard data customer atau member toko kita.
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
