Laravel 8 Tutorial - Livewire CRUD

In this tutorial, we are going to learn about Livewire CRUD. So, let's see how we can perform CRUD operations in Livewire.

First of all, let's create a model. Switch to the command prompt and run the following command:


php artisan make:model Student –m

Now, switch to the project and go inside the database directory, then migration. Now, just open the create_student_table migration and add columns as follows:


<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
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 write the following code:


<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Student extends Model
{
    use HasFactory;
    protected $table = `students`;
    protected $fillable = [`firstname`,`lastname`,`email`,`phone`];
}

Now, let's migrate the migration. In the command prompt, just run the command:


php artisan migrate

Now, let's insert some dummy records. For that, just create the Factory. So, in the command prompt, run the command:


php artisan make:factory StudentFactory

Now, open the StudentFactory.php file. For that, just go inside the database directory, then factories. Now, from here, let's open the StudentFactory.php file and write the following code:


<?php
namespace DatabaseFactories;
use AppModelsStudent;
use IlluminateDatabaseEloquentFactoriesFactory;
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:


AppModelsStudent::factory(10)->create();

Now, run the seeder. So, in the command prompt, just run the command:


php artisan db:seed

Seeding complete, you can see the records. Alright, now let's create a Livewire component:


php artisan make:livewire Students

Now, switch to the project and let's create the route for the Students Component. So, just go inside the routes directory, then web.php. And here, just create a route:


Route::get('/students',Students::class);

Now, just go inside the Students component class file and let's 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 the 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, let's create a layout file, so go inside the resources directory, then views. Then, open the layouts directory. Inside the layouts directory, let's 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, let's create a component view for creating a new student. So, inside the livewire directory, just create a new view file, which name is create.blade.php. Now, inside 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 and write the following code. First, create properties, then create two functions, one for resetting 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, let's create a new Livewire component view file. Inside the livewire directory, just create a new file, let's say the file name is update.blade.php. Inside this file, let's 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, let's create two functions in the 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 deleting 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 a new student, then click on the `Add new Student` button, then enter the student details. Now, you can see the new student has been added. You can edit any student record by clicking on the `Edit` button. And for deleting the record, click on the `Delete` button. So, in this way, we can perform CRUD operations in Livewire.