Template dashboard selesai kita buat, selanjutnya kita buat halaman dashboard kategori produk terlebih dahulu.
# Buat Kategori Controller
Buka terminal dan jalankan perintah
php artisan make:controller KategoriController -r
kemudian tekan enter. Setelah berhasil dibuat, edit file KategoriController.php dengan kode berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class KategoriController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = array('title' => 'Kategori Produk');
return view('kategori.index', $data);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$data = array('title' => 'Form Kategori');
return view('kategori.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)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$data = array('title' => 'Form Edit Kategori');
return view('kategori.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 Route
Pada file routes/web.php edit 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');
});
Kemudian pada terminal, jalankan perintah php artisan serve dan akses halaman http://localhost:8000/admin/kategori untuk saat ini masih ada error karena belum ada file view-nya. Sekarang buat file view dengan mengikuti langkah di bawah ini.
# Halaman index kategori
Pada folder views buatlah 1 buah folder baru dengan nama kategori, 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 kategori -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h4 class="card-title">Kategori Produk</h4>
<div class="card-tools">
<a href="{{ route('kategori.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="kategori 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('kategori.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="kategori 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('kategori.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="kategori 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('kategori.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>
@endsection
Akses kembali di halaman http://localhost:8000/admin/kategori
Kalau tidak ada error, tampilannya akan seperti berikut (beda gambarnya saja).
# Halaman Form Kategori Baru
Masih di dalam folder yang sama yaitu kategori, buatlah 1 buah file lagi dengan nama create.blade.php kemudian 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 Kategori</h3>
<div class="card-tools">
<a href="{{ route('kategori.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<form action="#">
<div class="form-group">
<label for="nama_kategori">Nama Kategori</label>
<input type="text" name="nama_kategori" id="nama_kategori" class="form-control">
</div>
<div class="form-group">
<label for="slug_kategori">Slug Kategori</label>
<input type="text" name="slug_kategori" id="slug_kategori" 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>
@endsection
Untuk form kategori, akses di halaman http://localhost:8000/kategori/create atau pada halaman index tadi klik tombol "baru" di samping kanan atas
# Form Edit Kategori
Terakhir buatlah 1 buah file lagi di folder kategori 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 Kategori</h3>
<div class="card-tools">
<a href="{{ route('kategori.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<form action="#">
<div class="form-group">
<label for="nama_kategori">Nama Kategori</label>
<input type="text" name="nama_kategori" id="nama_kategori" class="form-control">
</div>
<div class="form-group">
<label for="slug_kategori">Slug Kategori</label>
<input type="text" name="slug_kategori" id="slug_kategori" 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>
@endsection
Untuk mengetesnya akses dengan alamat http://localhost:8000/admin/kategori/2/edit
Kalau tidak ada error, maka akan tampil seperti berikut.