Blog - Queen Bee

Beranda

Catatan Laravel - Livewire - Tailwind

Install Laravel Tanpa Valet Windows
Syntax

GitBash / Powershell

composer create-project laravel/laravel project-name

Install Laravel dengan Valet Windows Gitbash / Powershell
Syntax

GitBash / Powershell

composer global require laravel/installer

Buat Proyek Baru
Syntax

Gantilah nama-project dengan nama proyek yang diinginkan.

laravel new nama-project

Contoh Setting web.php
Syntax

berada di web.php Route Ganti dengan nama proyek yang diinginkan.

<?php

use Illuminate\Support\Facades\Route;
use App\Livewire\Web\WebGaleri;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
Route::get('/login', function () {
    return view('welcome');
});

Route::get('/form_galeri', WebGaleri::class);

Contoh Setting welcome.blade.php dengan Laravel-Livewire
Syntax

berada di welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire</title>
    @livewireStyles
</head>
<body>
    <div>
        <a href="/form_galeri">Form Galeri</a>
    </div>
    @livewire('test.u-test')

    @livewireScripts
</body>
</html>

Tailwind CSS di dalam template Blade seperti
welcome.blade.php

berada di welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Livewire</title>
    @livewireStyles
    @vite('resources/css/app.css')
</head>
<body>
    <div class="bg-blue-500 text-white p-4">
        Selamat datang di Laravel dengan Tailwind CSS!
    </div>

    @livewire('content-1')
    @livewireScripts
    @vite('resources/js/app.js')
</body>
</html>

Buat Komponen Livewire
navbar.blade.php

Gunakan perintah Artisan untuk membuat komponen Livewire bernama 'Navbar':

php artisan make:livewire Navbar
Perintah ini akan membuat dua file:
  1. app/Http/Livewire/Navbar.php (komponen backend)
  2. resources/views/livewire/navbar.blade.php (template frontend)