Cara Memulai Project Dengan Laravel Livewire 3

November 19, 2023

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

Yasya Indra Blog