Laravel Livewire Crud with Bootstrap Modal Example
Mar 30, 2021 . Admin
Hello Friends,
In this blog, I would like to share with you how perform crud opeartion with bootstrap modal livewire in laravel application.I will show you a complete step by step Laravel Livewire CRUD operation with modal.
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.
Here I will give full example for crud opertaion livewire bootstrap modal in laravel,So Lets follow the bellow step.
Step 1 : Install Laravel AppIn First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.
composer create-project --prefer-dist laravel/laravel blogStep 2 : Setup Database Configuration
After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_PasswordStep 3 : Install Livewire
In this step, You will simply install livewire to our laravel application using bellow command:
composer require livewire/livewireStep 4 : Create Component
Now, You can create livewire component using bellow command, So Let's run bellow command to create user form component:
php artisan make:livewire users
Now they created fies on both path:
app/Http/Livewire/Users.php resources/views/livewire/users.blade.php
Now first file we will update as bellow for Users.php file.
app/Http/Livewire/Users.php<?php namespace App\Http\Livewire; use Livewire\Component; use App\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() { $validatedDate = $this->validate([ 'name' => 'required', 'email' => 'required|email', ]); User::create($validatedDate); session()->flash('message', 'Users Created Successfully.'); $this->resetInputFields(); $this->emit('userStore'); // Close model to using to jquery } public function edit($id) { $this->updateMode = true; $user = User::where('id',$id)->first(); $this->user_id = $id; $this->name = $user->name; $this->email = $user->email; } public function cancel() { $this->updateMode = false; $this->resetInputFields(); } public function update() { $validatedDate = $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', 'Users Updated Successfully.'); $this->resetInputFields(); } } public function delete($id) { if($id){ User::where('id',$id)->delete(); session()->flash('message', 'Users Deleted Successfully.'); } } }Step 5 : Add Route
now, we need to add route for image form in laravel application. so open your "routes/web.php" file and add following route.
routes/web.phpRoute::view('users','livewire.home');Step 6 : Create View
Here, we will create blade file for call crud opertaion route. in this file we will use @livewireStyles, @livewireScripts and @livewire('users'). so let's add it.
resources/views/livewire/users.blade.php<div> @include('livewire.create') @include('livewire.update') @if (session()->has('message')) <div class="alert alert-success" style="margin-top:30px;">x {{ session('message') }} </div> @endif <table class="table table-bordered mt-5"> <thead> <tr> <th>No.</th> <th>Name</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> @foreach($users as $value) <tr> <td>{{ $value->id }}</td> <td>{{ $value->name }}</td> <td>{{ $value->email }}</td> <td> <button data-toggle="modal" data-target="#updateModal" wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button> <button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button> </td> </tr> @endforeach </tbody> </table> </div>resources/views/livewire/home.blade.php
<!DOCTYPE html> <html> <head> <title></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 Livewire Crud - mywebtuts.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>resources/views/livewire/create.blade.php
<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">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true close-btn">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Name</label> <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="name"> @error('name') <span class="text-danger error">{{ $message }}</span>@enderror </div> <div class="form-group"> <label for="exampleFormControlInput2">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput2" wire:model="email" placeholder="Enter Email"> @error('email') <span class="text-danger error">{{ $message }}</span>@enderror </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button> <button type="button" wire:click.prevent="store()" class="btn btn-primary close-modal">Save changes</button> </div> </div> </div> </div>resources/views/livewire/update.blade.php
<!-- Modal --> <div wire:ignore.self class="modal fade" id="updateModal" 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">Modal title</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"> <input type="hidden" wire:model="user_id"> <label for="exampleFormControlInput1">Name</label> <input type="text" class="form-control" wire:model="name" id="exampleFormControlInput1" placeholder="Enter Name"> @error('name') <span class="text-danger">{{ $message }}</span>@enderror </div> <div class="form-group"> <label for="exampleFormControlInput2">Email address</label> <input type="email" class="form-control" wire:model="email" id="exampleFormControlInput2" 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>
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/users
It will help you..