Desain Dashboard Kategori
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 -rkemudian 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>
@endsectionAkses 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>
@endsectionUntuk 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>
@endsectionUntuk mengetesnya akses dengan alamat http://localhost:8000/admin/kategori/2/edit
Kalau tidak ada error, maka akan tampil seperti berikut.
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
