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

Membuat Component Checkout

Setelah berhasil menyelesaikan bab tentang carts, maka kita akan lanjutkan belajar untuk bagian checkout. Pada halaman ini kita nanti akan belajar banyak sekali, seperti menampilkan data provinsi, kota berdasarkan provinsi (dependent select dropdown), ongkos kirim dan lain sebagainya.

Langkah 1 - Membuat Component Checkout 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/Checkout/Index

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

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

Langkah 2 - Membuat Route Checkout

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

//route category show
Route::get('/category/{slug}', Web\Category\Show::class)->name('web.category.show');

//route product show
Route::get('/products/{slug}', Web\Products\Show::class)->name('web.product.show');

//route cart
Route::get('/cart', Web\Cart\Index::class)->name('web.cart.index')->middleware('auth:customer');

//route checkout
Route::get('/checkout', Web\Checkout\Index::class)->name('web.checkout.index')->middleware('auth:customer');

Dari perubahan kode di atas, kita menambahkan route baru untuk halaman checkout dengan memberikan path URL /checkout. Dan kita tambahkan middleware auth:customer, artinya route ini hanya bisa diakses jika customer sudah login.


        
css

        

            
        

     
Route::get('/checkout', Web\Checkout\Index::class)->name('web.checkout.index')->middleware('auth:customer');

Langkah 3 - Uji Coba Menampilkan Checkout

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

SELESAI & LANJUTKAN