Laravel Livewire Crud with Bootstrap Modal Example

10-Apr-2023

.

Admin

Laravel Livewire Crud with Bootstrap Modal Example

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 App


In 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 blog

Step 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_Password

Step 3 : Install Livewire

In this step, You will simply install livewire to our laravel application using bellow command:

composer require livewire/livewire

Step 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.php

Route::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 - NiceSnippets.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..

Preview

List Data

Create Data

edit Data

Destroy Data

#Laravel 7

#Laravel

#Laravel 6