My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Component Products Index

setelah berhasil menampilkan data product pada halaman home, maka sekarang kita akan lanjutkan belajar membuat component untuk product index.

Langkah 1 - Membuat Component Products Index

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:livewire Web/Products/Index

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:

  1. Class Component: app/Livewire/Web/Product/Index.php
  2. View Component: resources/views/livewire/web/products/index.blade.php

Langkah 2 - Membuat Route Products Index

Silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Route;

//route register
Route::get('/register', Auth\Register::class)->name('register');

//route login
Route::get('/login', Auth\Login::class)->name('login');

//route group account
Route::middleware('auth:customer')->group(function () {
    
    Route::group(['prefix' => 'account'], function () {
        
        //route my order
        Route::get('/my-orders', Account\MyOrders\Index::class)->name('account.my-orders.index');
  
        //route my order show
        Route::get('/my-orders/{snap_token}', Account\MyOrders\Show::class)->name('account.my-orders.show');

        //route my profile
        Route::get('/my-profile', Account\MyProfile\Index::class)->name('account.my-profile');

        //route password
        Route::get('/password', Account\Password\Index::class)->name('account.password');

    });

});

//route home
Route::get('/', Web\Home\Index::class)->name('home');

//route products index
Route::get('/products', Web\Products\Index::class)->name('web.product.index');

Dari perubahan kode di atas, kita menambahkan route baru untuk halaman products index dengan memberikan path URL /products.

Langkah 3 - Get Data Product di Class Component

Sekarang kita akan melakukan get data products pada class component, kemudian nanti akan kita kirimkan ke view component untuk ditampilkan.

Silahkan teman-teman buke file app/Livewire/Web/Products/Index.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire\Web\Products;

use App\Models\Product;
use Livewire\Component;

class Index extends Component
{
    public function render()
    {
        //get products
        $products = Product::query()
            ->with('category', 'ratings.customer')
            ->withAvg('ratings', 'rating')
            ->when(request()->has('search'), function ($query) {
                $query->where('title', 'like', '%' . request()->search . '%');
            })
            ->simplePaginate(5);

        return view('livewire.web.products.index', compact('products'));
    }
}

Dari perubahan kode di atas, pertama kita import Model Product.


        
perl

        

            
        

     
use App\Models\Product;

Kemudian di dalam method render kita melakukan get data products ke dalam database menggunakan Model.

Dimana di dalamnya kita juga membuat kondisi untuk proses pencarian data menggunakan method when. Jadi ketika ada request dengan nama search, maka kita akan mencari data product berdasarkan title dengan isi dari request search yang dikirimkan.


        
php

        

            
        

     
//get products
$products = Product::query()
    ->with('category', 'ratings.customer')
    ->withAvg('ratings', 'rating')
    ->when(request()->has('search'), function ($query) {
        $query->where('title', 'like', '%' . request()->search . '%');
    })
    ->simplePaginate(5);

Langkah 4 - Menampilkan Data Products

Sekarang kita akan belajar menampilkan data-nya menggunakan perulangan @foreach. Silahkan teman-teman buka file resources/views/livewire/web/products/index.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
typescript

        

            
        

     
@section('title')
Products - Eat Your Favorite Foods
@stop

@section('keywords')
Food Store, Eat Your Favorite Foods
@stop

@section('description')
Food Store - Eat Your Favorite Foods
@stop

@section('image')
{{ asset('images/logo.png') }}
@stop


<div class="container" style="margin-bottom: 150px">
    <div class="row justify-content-center">
        <div class="col-md-6">

            <div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-4">
                <div class="d-flex justify-content-start">
                    <x-buttons.back />
                </div>
            </div>

            <div class="d-flex justify-content-between">
                <div>
                    <span class="fs-6 fw-bold">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag mb-1" viewBox="0 0 16 16">
                            <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                        </svg>
                        PRODUCTS
                    </span>
                </div>
            </div>
            <hr />

            <div class="row">
                <div class="col-12 col-md-12 mb-2">
                    @foreach ($products as $product)
                        <x-cards.product :product="$product" />
                    @endforeach
                </div>
            </div>

            <!-- Navigasi Pagination -->
            {{ $products->links('vendor.pagination.simple-default') }}

        </div>
    </div>
</div>

Dari penambahan kode di atas, kita menampilkan data-nya dengan cara me-looping (perulangan) menggunakan directive @foreach.


        
less

        

            
        

     
@foreach ($products as $product)

	//...
	
@endoreach

Kemudian isinya kita panggil component card product dan kita tambahkan props :product yang mana berisi object data product hasil perulangan.


        
bash

        

            
        

     
<x-cards.product :product="$product" />

Dan untuk pagination, kita tampilkan seperti berikut ini.


        
php

        

            
        

     
{{ $products->links('vendor.pagination.simple-default') }}

Langkah 5 - Uji Coba Menampilkan Products Index

Silahkan teman-teman buka link berikut ini http://localhost:8000/products, jika berhasil maka kurang lebih hasilnya seperti berikut ini.

SELESAI & LANJUTKAN