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

Menampilkan Products Terbaru

Setelah data products populer berhasil ditampilkan, maka sekarang kita akan lanjutkan belajar menampilkan data product yang terbaru.

Langkah 1 - Get Data Products terbaru di Class Component

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


        
php

        

            
        

     
<?php

namespace App\Livewire\Web\Home;

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

class Index extends Component
{    
    /**
     * getPopularProducts
     *
     * @return void
     */
    protected function getPopularProducts()
    {
        return Product::with('category', 'ratings.customer')
            ->withAvg('ratings', 'rating') // Menghitung rata-rata rating
            ->having('ratings_avg_rating', '>=', 4)
            ->limit(5) // Batas jumlah produk
            ->get();
    }
    
    /**
     * getLatestProducts
     *
     * @return void
     */
    protected function getLatestProducts()
    {
        //get products
        return Product::query()
            ->with('category', 'ratings.customer')
            ->withAvg('ratings', 'rating')
            ->limit(5)
            ->orderBy('created_at', 'desc')
            ->get();
    }

    public function render()
    {
        return view('livewire.web.home.index', [

            //get sliders
            'sliders' => Slider::latest()->get(),

            //get categories
            'categories' => Category::latest()->get(),

            //get popular products
            'popularProducts' => $this->getPopularProducts(),

            //get latest products
            'latestProducts' => $this->getLatestProducts(),
            
        ]);
    }
}

Dari perubahan kode di atas, kita menambahkan method baru dengan nama getLatestProducts.


        
csharp

        

            
        

     
protected function getLatestProducts()
{

	//...
	
}

Di dalamnya, kita melakukan get data products terbaru dengan cara mengurutkan berdasarkan tanggal pembuatannya.


        
php

        

            
        

     
//get products
return Product::query()
    ->with('category', 'ratings.customer')
    ->withAvg('ratings', 'rating')
    ->limit(5)
    ->orderBy('created_at', 'desc')
    ->get();

Kemudian di dalam method render kita akan mengirimkan data di atas ke dalam view component.


        
ini

        

            
        

     
'latestProducts' => $this->getLatestProducts(),

Langkah 2 - Membuat Component Card Product

Component ini berbeda dengan component card product populer sebelumnya, karena untuk design UI-nya dibedakan.

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


        
go

        

            
        

     
php artisan make:component cards.product --view

Jika perintah di atas berhasil dijalankan, maka akan mendapatkan 1 file baru yang ada di dalam folder resources/views/components/cards/product.blade.php.

Silahkan buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
javascript

        

            
        

     
<div class="card rounded border-0 shadow-sm mb-3">
    <div class="row g-0">
        <div class="col-5 col-md-4">
            <a href="/products/{{ $product->slug }}" class="text-decoration-none" wire:navigate>
                <img src="{{ asset('/storage/' . $product->image) }}" class="img-fluid w-100 h-100 object-fit-cover rounded-start" alt="...">
            </a>
        </div>
        <div class="col-7 col-md-8">
            <div class="card-body">
                <a href="/products/{{ $product->slug }}" class="text-decoration-none text-dark" wire:navigate>
                    <h6 class="card-title">{{ $product->title }}</h6>
                </a>
                <p class="fw-bold text-success mt-3">Rp. {{ number_format($product->price) }}</p>
                <div class="d-flex justify-content-between mt-5">
                    <div class="mt-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill text-orange mb-1 me-2" viewBox="0 0 16 16">
                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                        <span class="fw-bold">{{ number_format($product->ratings_avg_rating, 1) }}</span>
                    </div>
                    <div>
                        <!-- button add to cart -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Untuk data yang ditampilkan hampir sama saja dengan yang ada di dalam component card product populer.

Langkah 3 - Menampilkan Data Products Terbaru

Sekarang kita akan menampilkan data products terbaru pada halaman home menggunakan perulangan, yaitu tepatnya menggunakan directive @foreach.

Silahkan teman-teman buka file resources/views/livewire/web/home/index.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
typescript

        

            
        

     
@section('title')
Food Store - 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>
    <div class="container" style="margin-bottom: 120px">

        <!-- Search Bar -->
        <x-utils.search-bar />

        <!-- Sliders -->
        <div class="row justify-content-center mt-4">
            <div class="col-md-6">
                <div id="carouselExample" class="carousel slide w-100">
                    <div class="carousel-inner">

                        @foreach ($sliders as $key => $slider)
                            <div class="carousel-item @if($key == 0) active @endif">
                                <img src="{{ asset('/storage/' . $slider->image) }}" class="d-block w-100 rounded">
                            </div>
                        @endforeach

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Categories -->
        <div class="row justify-content-center mt-4 mb-5">
            <div class="col-md-6">
                <span class="fs-6 fw-bold">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box mb-1" viewBox="0 0 16 16">
                        <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z" />
                    </svg>
                    CATEGORIES
                </span>
                <hr />
                <div class="row flex-nowrap overflow-auto scroll-custom">
                    @foreach ($categories as $category)
                        <x-cards.category :category="$category" />
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Products Popular -->
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <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 class="text-orange">POPULER</span>
                        </span>
                    </div>
                    <div>
                        <a href="/products" wire:navigate class="text-decoration-none text-orange fw-bold">
                            Lihat Lainnya
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                            </svg>
                        </a>
                    </div>
                </div>

                <hr />
                <div class="row flex-nowrap overflow-auto scroll-custom">

                    @foreach ($popularProducts as $product)
                        <x-cards.product-popular :product="$product" />
                    @endforeach

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

        <!-- Products Latest -->
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <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 class="text-orange">TERBARU</span>
                        </span>
                    </div>
                    <div>
                        <a href="/products" wire:navigate class="text-decoration-none text-orange fw-bold">
                            Lihat Lainnya
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                            </svg>
                        </a>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-12 col-md-12 mb-2">
                        @foreach ($latestProducts as $product)
                            <x-cards.product :product="$product" />
                        @endforeach
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

Dari perubahan kode di atas, kita melakukan perulangan data products terbaru menggunakan directive @foreach.


        
less

        

            
        

     
@foreach ($latestProducts as $product)

	//...
	
@endforeach

Di dalam perulangan di atas, kita memanggil component card product yang sudah kita buat sebelumnya dan di dalamnya kita tambahkan props :product yang berisi object data product dari hasil perulangan.


        
bash

        

            
        

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

Langkah 4 - Uji Coba Menampilkan Data Products Terbaru

Sekarang silahkan reload project-nya, kemudian lihat pada halaman home, jika berhasil maka akan menampilkan hasil seperti berikut ini.

SELESAI & LANJUTKAN