SERI 13 BELAJAR LARAVEL 10 DARI NOL || MENAMPILKAN PRODUK DALAM ADMIN PANEL

 

List Produk di Panel Admin

Mari buat bagian manajemen produk admin. Untuk saat ini, kita akan membuat halaman indeks yang mencantumkan semua produk.

Memodifikasi Routes

Mari masukkan Routes baru ke halaman indeks produk admin. Di routes/web.php, lakukan perubahan berikut dalam teks tebal.

Route::get('/admin', 'App\Http\Controllers\Admin\AdminHomeController@index')->name("admin.home.index");

Route::get('/admin/products', 'App\Http\Controllers\Admin\AdminProductController@index')->name("admin.product.index");

Routes baru ("/admin/products") akan menjadi titik masuk untuk mengelola produk Kita.

AdminProductController

Di app/Http/Controllers/Admin, buat file baru AdminProductController.php dan isi dengan kode berikut.

<?php

namespace App\Http\Controllers\Admin;

use App\Models\Product;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

class AdminProductController extends Controller

{

public function index()

{

$viewData = [];

$viewData["title"] = "Halaman Admin - Produk - Toko Online";

$viewData["products"] = Product::all();

return view('admin.product.index')->with("viewData", $viewData);

}

}

Kita memiliki metode index yang mengumpulkan data produk dan menampilkan view admin.products.index.

Tampilan indeks produk admin

Di resources/views/admin, buat subfolder product. Selanjutnya, di resources/views/admin/product, buat file baru index.blade.php dan isi dengan kode berikut.

@extends('layouts.admin')

@section('title', $viewData["title"])

@section('content')

<div class="card">

<div class="card-header">

Kelola Produk

</div>

<div class="card-body">

<table class="table table-bordered table-striped">

<thead>

<tr>

<th scope="col">ID</th>

<th scope="col">Nama</th>

<th scope="col">Edit</th>

<th scope="col">Hapus</th>

</tr>

</thead>

<tbody>

@foreach ($viewData["products"] as $product)

<tr>

<td>{{ $product->getId() }}</td>

<td>{{ $product->getName() }}</td>

<td>Edit</td>

<td>Hapus</td>

</tr>

@endforeach

</tbody>

</table></div>

</div>

@endsection

Kita memiliki tabel yang menampilkan id dan nama produk. Tabel ini didesain berdasarkan Bootstrap Tables (https://getbootstrap.com/docs/5.1/content/tables/). Nanti, kita akan menyertakan tautan untuk mengedit dan menghapus produk tertentu.

Memperbarui tautan di Layout Admin

Sekarang bahwa kita memiliki Routes produk admin yang sesuai, mari masukkan itu ke dalam layout admin. Di resources/views/layouts/admin.blade.php, lakukan perubahan berikut dalam teks tebal.

<!-- sidebar -->

...

<ul class="nav flex-column">

<li><a href="{{ route('admin.home.index') }}" class="nav-link text-white">- Admin - Home</a></li> <li><a href="{{ route('admin.product.index') }}" class="nav-link text-white">- Admin - Products</a></li> <li>

<a href="{{ route('home.index') }}" class="mt-2 btn bg-primary text-white">Kembali ke halaman utama</a> </li>

</ul>

</div>

<!-- sidebar -->

Menjalankan aplikasi

Di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut dalam teks tebal.

php artisan serve

Sekarang buka Routes ("/admin/products") dan Anda akan melihat halaman Produk Admin baru (lihat gambar ). Ingat bahwa Anda perlu menjalankan MySQL. Jika tidak, Anda akan mendapatkan kesalahan koneksi database.