Setelah berhasil menampilkan data sliders, maka kita akan lanjutkan belajar menampilkan data categories pada halaman home.

Langkah 1 - Get Data Sliders 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 Livewire\Component;
use App\Models\Category;

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

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

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

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

        
perl
        

            
        
     
use App\Models\Category;

Kemudian di dalam method render, kita melakukan get dan mengirimkan data categories dari Model ke dalam view component home.

        
php
        

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

Langkah 2 - Membuat Component Category Card

Sebelum kita menampilkan data categories, kita akan membuat sebuah compnent yang nanti dirender untuk data card, sehingga kita bisa menggunakan component card ini secara berulang-ulang pada halaman lain (resusable).

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

        
go
        

            
        
     
php artisan make:component cards.category --view

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

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

        
javascript
        

            
        
     
<div class="col-6 col-md-4 mb-4">
    <a href="/category/{{ $category->slug }}" wire:navigate class="text-decoration-none">
        <div class="card border-0 rounded shadow-sm">
            <div class="card-body text-center">
                <img src="{{ asset('/storage/' . $category->image) }}" class="img-fluid" width="50">
                <label class="text-center">{{ $category->name }}</label>
            </div>
        </div>
    </a>
</div>

Di atas, kita membuat sebuah card yang nanti digunakan untuk menampilkan data category, yaitu:

        
php
        

            
        
     
$category->slug

        
php
        

            
        
     
$category->image

        
php
        

            
        
     
$category->name

jika teman-teman bingung dari mana asal variable $category, itu nanti akan dikirimkan oleh parent component yang memanggil component card ini.

Langkah 3 - Menampilkan Data Categories

Setelah berhasil membuat component card category, maka kita akan lanjutkan menampilkan data-nya pada halaman home.

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 -->

        <!-- Products Latest -->

    </div>
</div>

Dari perubahan kode di atas, kita melakukan perulangan data $categories yang dikirimkan oleh class component menggunakan directive @foreach.

        
less
        

            
        
     
@foreach ($categories as $category)

	//...
	
@endforeach

Dimana di dalam perulangan tersebut kita memanggil component card category yang sudah kita buat sebelumnya dan di dalamnya kita tambahkan props :category yang berisi object data category dari hasil perulangan.

        
bash
        

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

Langkah 4 - Uji Coba Menampilkan Data Categories

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