In this guide, we will explore how to build a CRUD application using Livewire in Laravel with Bootstrap Modals (POP UP Boxes).
Laravel 11 Livewire CRUD with Bootstrap Modal Tutorial included inserting data with validation, fetching data with pagination, editing and updating data, and finally, confirming and deleting data in a Laravel 11 Livewire application.
Let’s start to create a fundamental CRUD (Create, Read, Update, Delete) application using Livewire components, Bootstrap modals, routes, and Blade views within a Laravel 11 application.
Step 1: Configure the Database
Edit the .env file to set up your database connection details:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Your_Database_Name
DB_USERNAME=Your_Database_Username
DB_PASSWORD=Your_Database_PasswordStep 2: Install Livewire
Install the Livewire package by running the following command:
composer require livewire/livewire
Step 3: Create the CRUD Component
Generate a new Livewire component for CRUD operations with:
php artisan make:livewire users
Step 4: Implement CRUD Functionality in the Component
Update the app/Http/Livewire/Users.php file to include CRUD functionality:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class Users extends Component
{
public $users, $name, $email, $user_id;
public $updateMode = false;
public function render()
{
$this->users = User::all();
return view('livewire.users');
}
private function resetInputFields()
{
$this->name = '';
$this->email = '';
}
public function store()
{
$validatedData = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
User::create($validatedData);
session()->flash('message', 'User Created Successfully.');
$this->resetInputFields();
$this->emit('userStore'); // Close modal using jQuery
}
public function edit($id)
{
$this->updateMode = true;
$user = User::findOrFail($id);
$this->user_id = $id;
$this->name = $user->name;
$this->email = $user->email;
}
public function cancel()
{
$this->updateMode = false;
$this->resetInputFields();
}
public function update()
{
$validatedData = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
if ($this->user_id) {
$user = User::find($this->user_id);
$user->update([
'name' => $this->name,
'email' => $this->email,
]);
$this->updateMode = false;
session()->flash('message', 'User Updated Successfully.');
$this->resetInputFields();
}
}
public function delete($id)
{
if ($id) {
User::find($id)->delete();
session()->flash('message', 'User Deleted Successfully.');
}
}
}
Step 5: Create Bootstrap Modal Components
Create a view named create.blade.php in the resources/views/livewire/ directory for the add form:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open Form
</button>
<!-- Modal -->
<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" wire:model="name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" wire:model="email" placeholder="Enter Email">
@error('email') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" wire:click.prevent="store()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Create a view named update.blade.php in the resources/views/livewire/ directory for the update form:
<!-- Modal -->
<div wire:ignore.self class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" wire:model="user_id">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" wire:model="name" id="name" placeholder="Enter Name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" wire:model="email" id="email" placeholder="Enter Email">
@error('email') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" wire:click.prevent="cancel()" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" wire:click.prevent="update()" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
Step 6: Include Livewire Component in the View
Edit the resources/views/welcome.blade.php file to include the Livewire component:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Livewire Bootstrap Modal CRUD Example - ItcodStuff.com</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel 11 Livewire Bootstrap Modal CRUD - ItcodStuff.com</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('users')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
<script type="text/javascript">
window.livewire.on('userStore', () => {
$('#exampleModal').modal('hide');
});
</script>
</body>
</html>
Step 7: Run and Test the Application
Start the application server with:
php artisan serveThen, navigate to the following URL to test the application: