Kali ini kita akan belajar bagaimana menggunakan laravel livewire untuk membuat aplikasi web. Kita menggunakan Laravel Livewire karena teknologi ini mampu menangani server side rendering, dimana segala komponen dan isi halan web semuanya ditangani pada sisi server dan bukan klien. Bagaimana itu penjelasan lengkapnya. Kalian bisa membaca postingan ini lebih lengkap
Langkah Langkah
Buat project laravel
composer create-project laravel/laravel nama-project
Instal Laravel Livewire
composer require laravel/livewire
Buat folder bernama layout
Buat folder bernama layout di resources/views. Ini akan berisi file app.blade.php, footer.blade.app, nav.blade.php. Kita akan menuliskan kode pada masing masing file ini
app.blade.php
<html lang="en">
<head>
<meta
charset="UTF-8"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
/>
<title>
{{ $title ?? 'Hostinger Livewire' }}
</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link
href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-800">
<div class="relative h-full isolate overflow-hidden px-6 lg:px-8">
<header>
@include('layouts.nav')
</header>
<div class="relative isolate">
<div class="mx-auto px-2 sm:px-4 py-2.5">
@yield('content')
@isset($slot)
{{ $slot }}
@endisset
</div>
</div>
<footer class="absolute bottom-0 w-full align-center">
@include('layouts.footer')
</footer>
</div>
</body>
</html>
footer.blade.php
<div class="text-center pt-20 sm:pt-10">
<p class="font-bold text-gray-200">
This template has been created by
<a
href="https://www.youtube.com/@yasyaindra"
class="text-pink-400 transition-all hover:text-pink-500"
target="_blank">
@yasyaindra
</a>
</p>
<ul class="py-4">
<li class="inline pr-4 text-xl text-white transition-all hover:text-green-400">
<a href="https://www.youtube.com/@yasyaindra">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
<li class="inline pr-4 text-xl text-white transition-all hover:text-green-400">
<a href="https://www.instagram.com/yasyaindra/">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>
nav.blade.php
<nav class="bg-transparent border-gray-200 px-2 sm:px-4 py-2.5 rounded">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent">
<li>
<a
href="https://www.youtube.com/@yasyaindra"
class="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4" aria-current="page">
YouTube
</a>
</li>
</ul>
</div>
</div>
</nav>
Buat file index.blade.php di resources/views
Tuliskan kode berikut
@extends('layouts.app')
@section('content')
<h1 class="font-bold tracking-tight text-white sm:text-6xl">
Home
</h1>
@endsection
Buat component livewire dengan perintah berikut
php artisan make:livewire task-index
perintah ini akan secara otomatis membuatkan kita dua file. tast-index.blade.php di folder livewire dan TaskIndex di app/Livewire
Kita akan menuliskan kode di TaskIndex ini sehingga component ini bisa memanfaatkan layout yang sudah kita buat barusan.
<?php
namespace App\Livewire;
use App\Models\Task;
use Livewire\Component;
class TaskIndex extends Component
{
public $name;
public function add() {
dd($this->name);
}
public function render()
{
return view('livewire.task-index')->layout('layouts.app')->title('Home For Task')->with([
'button' => 'New Task'
]);
}
}
Kalo kalian mengalami error saat menuliskan kode layout atau title. Kalian bisa menanganinya dengan cara berikut
Baca Juga: Cara Install Laravel 10 Di Laragon
Jangan lupa, buat juga component button di dalam folder components.
Buat file button.blade.php di folder resources/views/components
Lalu tulis kode berikut
<button
type="submit" wire:click='add'
class="rounded-md bg-pink-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-pink-500">
{{ $button }}
</button>
dan buat input.blade.php
Arahkan route /tasks ke dalam halaman task-index
Buka file web.php dan tambahkan kode berikut
Route::get('/tasks', TaskIndex::class);
Hasil
 |
| halaman home (index.blade.php) |
 |
| /tasks |