In this video we are going to learn about Livewire CRUD.
So let see how can we perform crud operation in livewire.
First of all lets create a model.
So switch to the command prompt and run the command.
Now switch to the project.
And go inside the database directory then migration.
Now just open create_student_table migration add columns as following.
Now go to the Student model and just write the following code.
Now lets migrate the migration
In command prompt just run the command.
Now lets insert insert some dummy records.
For that just create the Factory. So in command prompt run the command.
Now open this StudentFactory.php file. For that just go inside the database directory then factories.
Now from here lets open StudentFactory.php file and write the following code.
Now go to the DatabaseSeeder.php file and add the following code.
Now run the seeder
So in command prompt just run the command.
Seeding complete, you can see the records.
Alright, now lets create a livewire component.
Now switch to the project and
And lets create the route for the Students Component
So just go in side the routes directory then web.php.
And here just create a route.
So just write here.
Now just go inside the students component class file and
Lets fetch the students records
So for that inside this render method add the following code.
Now just open students-component.blade.php view file and add the following code.
Now lets create layout file so go inside the resources directory then views.
Then open the layouts directory.
Inside the layouts directory lets create a new file which is app.blade.php.
Now in this layout file add the following code.
Now lets create a component view for creating the new student.
So inside the livewire directory just create a new view file which name is create.blade.php.
Now inside the this file add the following code.
Now go to the Students.php class file write the following code.
First create properties, then create two functions one for reset input fields and another for storing data.
Now for updating the record lets create new livewire component view file.
Inside the livewire directory just create a new file lets say file name is update.blade.php.
Inside this file lets write the following code.
Now lets create two functions in Students.php class file one for edit and one for update record.
Now for deleting the record go to the Students.php class file and create a function for delete the record.
Now everything is done so switch to the browser and go to the url /students
And you can see all the students inside the table.
If you want to add new student then click on Add new Student button then enter the student details.
Now you can see new student has been added.
You can edit any student record by click on edit button.
And for deleting the record click on delete button.
So in this way we can perform CRUD operation in livewire.
So let see how can we perform crud operation in livewire.
First of all lets create a model.
So switch to the command prompt and run the command.
php artisan make:model Student –m
Now switch to the project.
And go inside the database directory then migration.
Now just open create_student_table migration add columns as following.
<?php
use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;
class CreateStudentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('firstname');
$table->string('lastname');
$table->string('email');
$table->string('phone');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('students');
}
}
Now go to the Student model and just write the following code.
<?php
namespace App\\Models;
use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;
class Student extends Model
{
use HasFactory;
protected $table = \"students\";
protected $fillable = [\"firstname\",\"lastname\",\"email\",\"phone\"];
}
Now lets migrate the migration
In command prompt just run the command.
php artisan migrate
Now lets insert insert some dummy records.
For that just create the Factory. So in command prompt run the command.
php artisan make:factory StudentFactory
Now open this StudentFactory.php file. For that just go inside the database directory then factories.
Now from here lets open StudentFactory.php file and write the following code.
<?php
namespace Database\\Factories;
use App\\Models\\Student;
use Illuminate\\Database\\Eloquent\\Factories\\Factory;
class StudentFactory extends Factory
{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = Student::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition()
{
return [
'firstname' => $this->faker->firstName,
'lastname' => $this->faker->lastName,
'email' => $this->faker->email,
'phone' => $this->faker->phoneNumber
];
}
}
Now go to the DatabaseSeeder.php file and add the following code.
\\App\\Models\\Student::factory(10)->create();
Now run the seeder
So in command prompt just run the command.
php artisan db:seed
Seeding complete, you can see the records.
Alright, now lets create a livewire component.
php artisan make:livewire Students
Now switch to the project and
And lets create the route for the Students Component
So just go in side the routes directory then web.php.
And here just create a route.
So just write here.
Route::get(‘/students’,Students::class);
Now just go inside the students component class file and
Lets fetch the students records
So for that inside this render method add the following code.
public function render()
{
$students = Student::orderBy('id','DESC')->get();
return view('livewire.students',['students'=>$students]);
}
Now just open students-component.blade.php view file and add the following code.
<div>
@include('livewire.create')
@include('livewire.update')
<section>
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"card\">
<div class=\"card-header\">
<div class=\"row\">
<div class=\"col-md-6\">
All Students
</div>
<div class=\"col-md-6\">
<button type=\"button\" class=\"btn btn-primary float-right\" data-toggle=\"modal\" data-target=\"#addStudentModal\">Add New Student</button>
</div>
</div>
</div>
<div class=\"card-body\">
@if(Session::has('message'))
<div class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</div>
@endif
<table class=\"table table-striped\">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Phone</td>
<td>Action</td>
</tr>
</thead>
<tbody>
@foreach($students as $student)
<tr>
<td>{{$student->firstname}}</td>
<td>{{$student->lastname}}</td>
<td>{{$student->email}}</td>
<td>{{$student->phone}}</td>
<td>
<button wire:click=\"edit({{$student->id}})\" class=\"btn btn-warning btn-sm\" data-toggle=\"modal\" data-target=\"#updateStudentModal\">Edit</button>
<button wire:click=\"delete({{$student->id}})\" class=\"btn btn-danger btn-sm\">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now lets create layout file so go inside the resources directory then views.
Then open the layouts directory.
Inside the layouts directory lets create a new file which is app.blade.php.
Now in this layout file add the following code.
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
<title>Livewire Project</title>
<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">
<script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\"></script>
@livewireStyles
</head>
<body>
{{$slot}}
@livewireScripts
<script type=\"text/javascript\">
window.livewire.on('studentAdded',()=>{
$('#addStudentModal').modal('hide');
});
window.livewire.on('studentUpdated',()=>{
$('#updateStudentModal').modal('hide');
});
</script>
</body>
</html>
Now lets create a component view for creating the new student.
So inside the livewire directory just create a new view file which name is create.blade.php.
Now inside the this file add the following code.
<div wire:ignore.self class=\"modal fade\" id=\"addStudentModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
<div class=\"modal-dialog\" role=\"document\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<div class=\"modal-title\">
Add New Student
</div>
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">
<span aria-hidden=\"true close-btn\">x</span>
</button>
</div>
<div class=\"modal-body\">
<form >
<div class=\"form-group\">
<label for=\"firstname\">First Name</label>
<input type=\"text\" name=\"firstname\" class=\"form-control\" wire:model=\"firstname\" />
@error('firstname') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"lastname\">Last Name</label>
<input type=\"text\" name=\"lastname\" class=\"form-control\" wire:model=\"lastname\" />
@error('lastname') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"email\">Email</label>
<input type=\"text\" name=\"email\" class=\"form-control\" wire:model=\"email\" />
@error('email') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"phone\">Phone</label>
<input type=\"text\" name=\"phone\" class=\"form-control\" wire:model=\"phone\" />
@error('phone') <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\">Save Changes</button>
</div>
</div>
</div>
</div>
Now go to the Students.php class file write the following code.
First create properties, then create two functions one for reset input fields and another for storing data.
public $firstname;
public $lastname;
public $email;
public $phone;
public $sid;
public function resetInputFields()
{
$this->firstname = '';
$this->lastname = '';
$this->email = '';
$this->phone = '';
}
public function store()
{
$validatedData = $this->validate([
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required|email',
'phone' => 'required'
]);
Student::create($validatedData);
session()->flash('message','Student created Successfully');
$this->resetInputFields();
$this->emit('studentAdded');
}
Now for updating the record lets create new livewire component view file.
Inside the livewire directory just create a new file lets say file name is update.blade.php.
Inside this file lets write the following code.
<div wire:ignore.self class=\"modal fade\" id=\"updateStudentModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
<div class=\"modal-dialog\" role=\"document\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<div class=\"modal-title\">
Update Student
</div>
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">
<span aria-hidden=\"true close-btn\">x</span>
</button>
</div>
<div class=\"modal-body\">
<form >
<div class=\"form-group\">
<label for=\"firstname\">First Name</label>
<input type=\"text\" name=\"firstname\" class=\"form-control\" wire:model=\"firstname\" />
@error('firstname') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"lastname\">Last Name</label>
<input type=\"text\" name=\"lastname\" class=\"form-control\" wire:model=\"lastname\" />
@error('lastname') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"email\">Email</label>
<input type=\"text\" name=\"email\" class=\"form-control\" wire:model=\"email\" />
@error('email') <span class=\"text-danger error\">{{$message}}</span> @enderror
</div>
<div class=\"form-group\">
<label for=\"phone\">Phone</label>
<input type=\"text\" name=\"phone\" class=\"form-control\" wire:model=\"phone\" />
@error('phone') <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=\"update()\" class=\"btn btn-primary\">Save Changes</button>
</div>
</div>
</div>
</div>
Now lets create two functions in Students.php class file one for edit and one for update record.
public function edit($id)
{
$this->updateMode = true;
$student = Student::find($id);
$this->firstname = $student->firstname;
$this->lastname = $student->lastname;
$this->email = $student->email;
$this->phone = $student->phone;
$this->sid = $student->id;
}
public function update()
{
$this->validate([
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required|email',
'phone' => 'required'
]);
if($this->sid){
$student = Student::find($this->sid);
$student->update([
'firstname' => $this->firstname,
'lastname' => $this->lastname,
'email' => $this->email,
'phone' => $this->phone
]);
$this->updateMode = false;
session()->flash('message','Studnet has been updated successfully!');
$this->resetInputFields();
$this->emit('studentUpdated');
}
}
Now for deleting the record go to the Students.php class file and create a function for delete the record.
public function delete($id)
{
if($id)
{
Student::find($id)->delete();
session()->flash('message','Student has been deleted successfully!');
}
}
Now everything is done so switch to the browser and go to the url /students
And you can see all the students inside the table.
If you want to add new student then click on Add new Student button then enter the student details.
Now you can see new student has been added.
You can edit any student record by click on edit button.
And for deleting the record click on delete button.
So in this way we can perform CRUD operation in livewire.
