Blog - Queen Bee

Beranda
Coding

Cara Membuat Komponen Livewire Laravel dan Tailwind CSS

Cara Membuat Komponen Livewire Laravel dan Tailwind CSS Pemula yang sering Error dan gagal menjalankannya.
Cara Membuat Komponen Livewire Laravel dan Tailwind CSS Pemula yang sering Error dan gagal menjalankan programnya

Untuk membuat komponen Livewire Navigasi Atas, ikuti langkah-langkah berikut ini:

Tulisan ini berdasarkan pengalaman saya dalam menjalankan program Frontend agar bisa Bekerja sama dengan Backend yang sering error dan tidak tampil, simak dan pahami , jika ada kesalahan membuat atau error, silahkan mencoba konsultasi kepada ahli atau melihat dokumentasi.

Dokumentasi:
  1. Laravel
  2. Livewire
  3. Tailwind CSS

1. Membuat Komponen Livewire:

Gunakan perintah Artisan untuk membuat komponen Livewire bernama navigasi-atas:

php artisan make:livewire navigasi-atas
Perintah ini akan membuat dua file:

  1. app/Http/Livewire/NavigasiAtas.php (komponen backend)
  2. resources/views/livewire/navigasi-atas.blade.php (template frontend)

2. Edit Komponen Livewire:

Buka file app/Http/Livewire/NavigasiAtas.php dan tambahkan logika yang Anda butuhkan (jika ada). Misalnya:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class NavigasiAtas extends Component
{
    public function render()
    {
        return view('livewire.navigasi-atas');
    }
}

3. Edit Template Blade Komponen:

Buka file resources/views/livewire/navigasi-atas.blade.php (template frontend) dan tambahkan HTML dan kelas Tailwind CSS untuk mendesain navbar Anda. Misalnya:

<nav class="bg-gray-800 p-4">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <div class="text-white text-lg font-semibold">
                MyWebsite
            </div>
            <div class="space-x-4">
                <a href="/" class="text-gray-300 hover:text-white">Home</a>
                <a href="/about" class="text-gray-300 hover:text-white">About</a>
                <a href="/contact" class="text-gray-300 hover:text-white">Contact</a>
            </div>
        </div>
    </div>
</nav>

4. Gunakan Komponen Livewire di Template Blade:

Buka file welcome.blade.php atau template Blade lain di mana Anda ingin menampilkan navbar, dan tambahkan komponen Livewire Navbar:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire</title>
    @livewireStyles
    @vite('resources/css/app.css')
</head>
<body>
    @livewire('navigasi-atas')

    @livewireScripts
    @vite('resources/js/app.js')
</body>
</html>

5. Jalankan Server Laravel:

Pastikan Anda menjalankan server Laravel dengan perintah:

php artisan serve

Buka browser dan akses proyek Anda (biasanya di http://127.0.0.1:8000). Anda seharusnya bisa melihat navbar yang dibuat menggunakan komponen Livewire dan Tailwind CSS seperti pada gambar berikut ini :

image_title
Contoh Source Code Github