Throughout this quick laravel livewire click events tutorial, you will ascertain how to add click events in the laravel application using the livewire package.
We will install the livewire package, set it up in the laravel app, create livewire components, create two buttons, and implement the click events in the laravel livewire app.
How to Integrate Click Event in Laravel 10 Livewire
- Step 1: Set Up Laravel Project
- Step 2: Add Database Credentials in ENV
- Step 3: Install and Set Up Livewire Package
- Step 4: Generate and Configure Click Event Component
- Step 5: Create Route
- Step 6: Construct Blade View
- Step 7: Start Laravel App
Set Up Laravel Project
Firstly, make sure to install and configure the Composer tool on your system; its a handy dependency management exclusively built for PHP. After that, create the laravel project using the below command.
composer create-project --prefer-dist laravel/laravel laravel_demo
Next, get inside the project’s root:
cd laravel_demo
Add Database Credentials in ENV
You have to subsequently add the database name, database username and database password in the main configuration file. So, open and update the following code in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in .env file.
UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
Install and Set Up Livewire Package
Next, use the mentioned below command to install the Laravel Livewire package in the laravel app. This package supercharges the process of creating modern, reactive, dynamic interfaces using Laravel Blade.
composer require livewire/livewire
Generate and Configure Click Event Component
To handle click events in laravel livewire, consequently, we need to generate the click event component. Head over to the command prompt and execute the following command and create the livewire component.
php artisan make:livewire click
The livewire php artisan command has generated two new files; here are the Livewire component files’ paths.
app/Http/Livewire/Click.php
resources/views/livewire/click.blade.php
Let us open the app/Http/Livewire/Click.php file and update the suggested code inside the 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;
}
}
Next, you have to prepare the livewire view, open resources/views/livewire/click.blade.php file and create two buttons for seeing the click event in action. So, make sure to add the recommended code within the 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>
Create Route
This step involves setting up routes for checking the click event, hence open routes/web.php file and add the below code inside of it.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Click;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('check-click-event', Click::class);
Construct Blade View
Next, you require to add the Bootstrap CSS and JavaScript in the blade view file. Head over to resources/views folder and create the app.blade.php file.
Ensure that you have added the following code inside the resources/views/app.blade.php file.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Livewire Click Event Demo</title>
@livewireStyles
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
@livewire('click')
</div>
</body>
@livewireScripts
</html>
Start Laravel App
Last but not least, start the laravel livewire application through the command prompt to verify how the click events are working in laravel application.
Execute the given below command:
php artisan serve
Use the following url to test the app:
http://127.0.0.1:8000/check-click-event
Conclusion
Laravel gives easiness when it comes to faster and flexible development.
In addition to the development journey, we have learned how to set up click events in the laravel app through a fundamental yet agile method. We consider it will assist you in understanding the laravel ecosystem better.