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

Langkah 1 - Get Data Sliders di Class Component

Pertama, kita akan melakukan get data sliders pada class component home, 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;

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

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

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

        
perl
        

            
        
     
use App\Models\Slider;

Kemudian di dalam method render, kita get dan mengirimkan data slider ke view component.

        
php
        

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

Langkah 2 - Menampilkan Data Sliders

Sekarang kita lanjutkan untuk menampilkan data sliders 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 -->

        <!-- Products Popular -->

        <!-- Products Latest -->

    </div>
</div>

Dari perubahan koe di atas, kita melakukan perulangan data sliders yang dikirimkan oleh class component, disini kita menggunakan directive @foreach.

        
less
        

            
        
     
@foreach ($sliders as $key => $slider)

	//...
	
@endforeach

Langkah 3 - Uji Coba Menampilkan Sliders

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