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

Membuat Layout Web

Setelah berhasil menginstall Livewire, maka kita akan lanjutkan membuat layout yang nanti digunakan sebagai induk template-nya.

Langkah 1 - Menambahkan Custom CSS

Secara default Laravel menggunakan Tailwind CSS, oleh sebab itu kita harus mengubahnya dengan CSS milik kita sendiri.

Silahkan buka file resources/css/app.css, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
css

        

            
        

     
@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap);body{background-color:#e9e9f5!important;font-family:Quicksand,sans-serif!important}.rounded-menu{border-radius:50px!important}.rounded-bottom-custom,.rounded-start{border-bottom-left-radius:24px!important}.rounded-start,.rounded-top-custom{border-top-left-radius:24px!important}.rounded-bottom-custom,.rounded-end{border-bottom-right-radius:24px!important}.rounded-end,.rounded-top-custom{border-top-right-radius:24px!important}.h-150{height:150px!important}.btn-back,.btn-orange{width:40px;height:40px}.h-min-100{margin-top:-100px!important}.rounded,.vue3-snackbar-message{border-radius:24px!important}.small{font-size:.75rem!important}.scroll-container{display:flex;overflow-x:auto;scrollbar-width:thin}.scroll-custom::-webkit-scrollbar{height:6px}.scroll-custom::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.scroll-custom::-webkit-scrollbar-thumb:hover{background:#555}.menu-active,.router-link-active,.router-link-exact-active,.text-orange{color:#e94e15!important}.btn-orange,.btn-orange-2{background-color:#e94e15!important;color:#fff!important}.btn-orange{border-radius:50%!important;display:flex;align-items:center;justify-content:center}.btn-back,.btn-cart-delete,.btn-rating{position:relative;border-radius:50%!important;display:flex;align-items:center}.btn-back,.btn-orange-light{background-color:#e9e9f5!important;color:#e94e15!important}.btn-back{justify-content:center}.btn-cart-delete,.btn-rating{background-color:#e92715!important;color:#e9e9f5!important;width:30px;height:30px;justify-content:center}.sticky-top{position:sticky;top:0;z-index:100}.fixed-total{position:fixed;bottom:100px;left:0;right:0;z-index:1030}.centered{position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px}.mt-80{margin-top:80px}.mt-100{margin-top:100px}.mt-150{margin-top:150px}.icon-shape{display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle}.icon-sm{width:2rem;height:2rem}.group-btn-qty,.group-btn-qty-2{padding:5px;border-radius:24px;width:120px}.group-btn-qty{background-color:#efefef}.group-btn-qty-2{background-color:#e94e1547}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}

Langkah 2 - Membuat Layout App

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


        
undefined

        

            
        

     
php artisan livewire:layout

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file layout baru di dalam folder resources/views/components/layouts/app.blade.php.

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


        
xml

        

            
        

     
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://raw.githubusercontent.com/SantriKoding-com/assets-food-store/refs/heads/main/images/logo.png" type="image/x-icon">
    <meta name="description" content="@yield('description')">
    <meta name="keywords" content="@yield('keywords')">
    <meta name="author" content="Food Store">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta content="@yield('title')" property="og:title">
    <meta content="@yield('description')" property="og:description">
    <meta content="@yield('image')" property="og:image">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    @livewireStyles
    @vite(['resources/css/app.css'])
</head>
<body>

    <!-- render content -->
    {{ $slot }}
    <!-- end render content -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    @livewireScripts
    <script>
        @if(session()->has('success'))
            toastr.success('{{ session('success') }}', 'BERHASIL!'); 
        @elseif(session()->has('info'))
            toastr.info('{{ session('info') }}', 'INFO!');
        @elseif(session()->has('warning'))
            toastr.warning('{{ session('warning') }}', 'PERINGATAN!');
        @elseif(session()->has('error'))
            toastr.error('{{ session('error') }}', 'GAGAL!'); 
        @endif
    </script>
</body>
</html>

Dari perubahan kode di atas, pertama kita load CSS Bootstrap secara online atau CDN.


        
perl

        

            
        

     
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


        
xml

        

            
        

     
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

Kemudian kita juga load library Toastr, yang mana nanti akan kita gunakan untuk menampilkan notifikasi / alert di dalam project.


        
bash

        

            
        

     
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">


        
xml

        

            
        

     
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>


        
kotlin

        

            
        

     
<script>
    @if(session()->has('success'))
        toastr.success('{{ session('success') }}', 'BERHASIL!'); 
    @elseif(session()->has('info'))
        toastr.info('{{ session('info') }}', 'INFO!');
    @elseif(session()->has('warning'))
        toastr.warning('{{ session('warning') }}', 'PERINGATAN!');
    @elseif(session()->has('error'))
        toastr.error('{{ session('error') }}', 'GAGAL!'); 
    @endif
</script>

Jika teman-teman perhatikan, ada kode {{ $slot }}, kode tersebut yang nanti akan me-render setiap view atau component yang menggunakan layout ini.


        
xml

        

            
        

     
<!-- render content -->
{{ $slot }}
<!-- end render content -->

Langkah 3 - Compile Assets

Silahkan jalankan perintah berikut ini untuk menginstall dependencies yang dibutuhkan.


        
undefined

        

            
        

     
npm install

Silahkan tunggu proses installasinya sampai selesai.

Kemudian ketika proses development, pastikan teman-teman selalu menjalankan perintah berikut ini dan tidak boleh di close.


        
undefined

        

            
        

     
npm run dev

Karena perintah di atas akan berjalankan secara otomatis (compiling) ketika ada perubahan.

SELESAI & LANJUTKAN