Setelah berhasil menyelesaikan semua fitur di dalam Account, seperti menampilkan My Orders, Update Profile dan Update Password, maka sekarang kita akan lanjutkan belajar menampilkan data-data pada halaman web-nya.

Pada materi ini kita semua akan belajar membuat component Home, dimana nantinya pada component ini akan menampilkan beberapa data, seperti data slider, category, product populer dan product terbaru.

Langkah 1 - Membuat Component Home

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/Home/Index

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

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

Langkah 2 - Membuat Route Home

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');

Dari perubahan kode di atas, kita menambahkan route baru untuk halaman homepage atau home dengan memberikan path URL /.

Langkah 3 - Membuat Component Search Bar

Nantinya pada halaman home kita akan menampilkan sebuah search pada bagian atas, oleh sebab itu kita akan membuat component-nya terlebih dahulu.

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

        
go
        

            
        
     
php artisan make:component utils.search-bar --view

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file baru di dalam folder resources/views/components/utils/search-bar.blade.php.

Silahkan teman-teman buka file tersebut, kemudian masukkan kode berikut ini di dalamnya.

        
xml
        

            
        
     
<div class="row justify-content-center mt-4">
    <div class="col-md-6">
        <div class="row">
            <div class="col-10 col-md-10">
                <div class="text-center">
                    <form action="/products" method="GET">
                        <div class="input-group mb-3 rounded">
                            <input type="text" name="search" class="form-control form-control-lg rounded shadow-sm border-0" placeholder="cari yang kamu inginkan..." aria-label="Example text with button addon" aria-describedby="button-addon1" />
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-2 col-md-2">
                <div class="text-end">
                    <a href="/login" wire:navigate>
                        @php
                            $image = auth()->guard('customer')->check() && auth()->guard('customer')->user()->image 
                                ? asset('/storage/avatars/' . auth()->guard('customer')->user()->image) 
                                : 'https://cdn.jsdelivr.net/gh/SantriKoding-com/assets-food-store/images/user.png';
                        @endphp
                        <img src="{{ $image }}" class="object-fit-cover rounded-circle" height="45" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Dari penambahan kode di atas, kita membuat form dengan method GET dan untuk action-nya kita arahkan ke URL /products.

Langkah 4 - Menampilkan Component Search Bar di Home

Setelah berhasil membuat component search bar, mak akita tinggal memanggilnya di dalam view component milik home.

Silahkan buka file resources/views/livewire/web/home/index.blade.php, kemudian ubah semua 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 -->

        <!-- Categories -->

        <!-- Products Popular -->

        <!-- Products Latest -->

    </div>
</div>

Di atas, kita telah memanggil component search-bar, sehingga component tersebut akan dirender dan ditampilkan pada halaman home.

        
xml
        

            
        
     
<x-utils.search-bar />

Langkah 5 - Uji Coba Menampilkan Halaman Home

Sekarang silahkan teman-teman buka project-nya pada halaman awal atau homepage, jika berhasil maka kurang lebih hasilnya seperti berikut ini.