Sepanjang tutorial quick laravel livewire click events ini, Anda akan memastikan bagaimana cara menambahkan click event di aplikasi laravel menggunakan paket livewire.
Kami akan menginstal paket livewire, mengaturnya di aplikasi laravel, membuat komponen livewire, membuat dua tombol, dan mengimplementasikan event klik di aplikasi livewire laravel.
Daftar Isi
Siapkan Proyek Laravel
Pertama, pastikan untuk menginstal dan mengkonfigurasi alat Komposer di sistem Anda; ini adalah manajemen ketergantungan yang berguna yang dibuat khusus untuk PHP. Setelah itu, buat proyek laravel menggunakan perintah di bawah ini.
composer create-project --prefer-dist laravel/laravel laravel_demoTambahkan Kredensial Basis Data di ENV
Anda harus kemudian menambahkan nama database, nama pengguna database dan kata sandi database di file konfigurasi utama. Jadi, buka dan perbarui kode berikut di file .env.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_passwordInstal dan Siapkan Paket Livewire
Selanjutnya, gunakan perintah yang disebutkan di bawah ini untuk menginstal paket Laravel Livewire di aplikasi laravel. Paket ini meningkatkan proses pembuatan antarmuka yang modern, reaktif, dan dinamis menggunakan Laravel Blade.
composer require livewire/livewireHasilkan dan Konfigurasikan Component Event Klick
Untuk menangani event klik di laravel livewire, akibatnya, kita perlu membuat komponen event klik. Buka command prompt dan jalankan perintah berikut dan buat komponen livewire.
php artisan make:livewire clickPerintah artisan php livewire telah menghasilkan dua file baru; berikut adalah jalur file komponen Livewire.
app/Http/Livewire/Click.php
resources/views/livewire/click.blade.phpMari kita buka file app/Http/Livewire/Click.php dan perbarui kode yang disarankan di dalam file.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Click extends Component
{
public $msg = '';
public $studentId = 55;
public function render()
{
return view('livewire.click')->extends('app');
}
public function clickEvt()
{
$this->msg = "Button has been clicked.";
}
public function trackClickEvt($studentId)
{
$this->msg = $studentId;
}
}Selanjutnya, Anda harus menyiapkan tampilan livewire, buka file resources/views/livewire/click.blade.php dan buat dua tombol untuk melihat event click beraksi. Jadi, pastikan untuk menambahkan kode yang direkomendasikan di dalam file.
<div class="container mt-5 text-center">
<button type="button" wire:click="clickEvt" class="btn btn-primary">Click Here</button>
<button type="button" wire:click="trackClickEvt({{$studentId}})" class="btn btn-success">Click Here</button>
<p class="mt-4">{{ $msg }}</p>
</div>Buat Route
Langkah ini melibatkan pengaturan route untuk memeriksa acara klik, maka buka file route/web.php dan tambahkan kode di bawah ini di dalamnya.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Click;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('check-click-event', Click::class);Build Tampilan Blade
Selanjutnya, Anda perlu menambahkan Bootstrap CSS dan JavaScript di file tampilan blade. Buka folder resources/views dan buat file app.blade.php .
Pastikan Anda telah menambahkan kode berikut di dalam file resources/views/app.blade.php.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Livewire Click Event Demo</title>
@livewireStyles
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
@livewire('click')
</div>
</body>
@livewireScripts
</html>
Mulai Aplikasi Laravel
Mulai aplikasi laravel livewire melalui command prompt untuk memverifikasi bagaimana event klik bekerja di aplikasi laravel.
Jalankan perintah yang diberikan di bawah ini:
php artisan serveGunakan url berikut untuk menguji aplikasi:
http://127.0.0.1:8000/check-click-event
Kesimpulan
Laravel memberikan kemudahan dalam hal pengembangan yang lebih cepat dan fleksibel.
Selain perjalanan pengembangan, kami telah mempelajari cara menyiapkan peristiwa klik di aplikasi laravel melalui metode mendasar namun gesit. Kami menganggap ini akan membantu Anda dalam memahami ekosistem laravel dengan lebih baik.
laravel livewire tutorial
Indrawan10