Laravel 8 Jetstream Livewire CRUD Example Tutorial

November 5, 2020 XpertPhp

In this article, we will learn you how to create a Laravel 8 Jetstream Livewire CRUD Example Tutorial. Laravel Jetstream Livewire is a library and we can easily build modern, reactive, dynamic interfaces.

Laravel Jetstream designed by Tailwind CSS. The Jetstream provides the login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

Now, we follow the below steps for creating the laravel 8 Jetstream Livewire CRUD(Laravel 8 Jetstream Livewire CRUD example). so you can see our laravel 8 tutorial.

Overview

Step 1: Install Laravel 8

Step 2: Setting Database Configuration

Step 3: Create Jetstream Auth with Livewire

Step 4: Create Migration and Model

Step 5: Create Student Component

Step 6: Update Component File

Step 7: Update Blade Files

Step 8: Add Route

Step 9: Run Our Laravel Application

Step 1: Install Laravel 8

We are going to install laravel 8, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command for laravel 8 install.

composer create-project --prefer-dist laravel/laravel laravel8_jl_crud

1	composer create-project --prefer-dist laravel/laravel laravel8_jl_crud

Step 2: Setting Database Configuration

After the complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(laravel8_jl_crud)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name(laravel8_jl_crud)

DB_USERNAME=Enter_Your_Database_Username(root)

DB_PASSWORD=Enter_Your_Database_Password(root)

Step 3: Create Jetstream Auth with Livewire
We will install a Jetstream package using the below php artisan command.

composer require laravel/jetstream

1	composer require laravel/jetstream

Now, We will install a Jetstream With Livewire package using the below php artisan command.

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

After installing Jetstream With Livewire, We have to install and build your NPM dependency and migrate our database using the below command.

npm install && npm run dev
php artisan migrate

1 2	npm install && npm run dev php artisan migrate

Step 4: Create Migration and Model

Now, We need to create a migration. so we will below command using create the students table migration.

php artisan make:migration create_students_table --create=students

1	php artisan make:migration create_students_table --create=students

After complete migration. we need below changes in the database/migrations/create_students_table file.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('first_name');
            $table->string('last_name');
            $table->text('address');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}
?>

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateStudentsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('students', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('first_name');

$table->string('last_name');

$table->text('address');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('students');

}

Run the below command. after the changes above file.

php artisan migrate

1	php artisan migrate

Here below command help to create the model.

php artisan make:model Student

1	php artisan make:model Student

Student.php

<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;



class Student extends Model
{
    use HasFactory;
    protected $fillable = [
        'first_name','last_name', 'address'
    ];
}

?>

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Student extends Model

{

use HasFactory;

protected $fillable = [

'first_name','last_name', 'address'

];

}

Step 5: Create Student Component
We will create the student component using below command. so you can follow below command.

php artisan make:livewire students

1	php artisan make:livewire students

After created component, two files are created so you can see path.

app/Http/Livewire/Students.php

resources/views/livewire/students.blade.php

app/Http/Livewire/Students.php

resources/views/livewire/students.blade.php

Step 6: Update Component File
In this step, we will update the some method in this file. so you can see our following file.
app/Http/Livewire/Students.php

<?php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Student;

class Students extends Component
{
   public $students, $first_name, $last_name, $address, $student_id;
    public $isOpen = 0;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
    {
        $this->students = Student::all();
        return view('livewire.students');
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function openModal()
    {
        $this->isOpen = true;
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function closeModal()
    {
        $this->isOpen = false;
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    private function resetInputFields(){
        $this->first_name = '';
        $this->last_name = '';
        $this->address = '';
        $this->student_id = '';
    }
     
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $this->validate([
            'first_name' => 'required',
            'last_name' => 'required',
            'address' => 'required',
        ]);
   
        Student::updateOrCreate(['id' => $this->student_id], [
            'first_name' => $this->first_name,
            'last_name' => $this->last_name,
            'address' => $this->address
        ]);
  
        session()->flash('message', 
            $this->student_id ? 'Student Updated Successfully.' : 'Student Created Successfully.');
  
        $this->closeModal();
        $this->resetInputFields();
    }
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
    {
        $student = Student::findOrFail($id);
        $this->student_id = $id;
        $this->first_name = $student->first_name;
        $this->last_name = $student->last_name;
        $this->address = $student->address;
    
        $this->openModal();
    }
     
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
    {
        Student::find($id)->delete();
        session()->flash('message', 'Student Deleted Successfully.');
    }
}

?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Student;

class Students extends Component

{

public $students, $first_name, $last_name, $address, $student_id;

public $isOpen = 0;

/**

* The attributes that are mass assignable.

* @var array

public function render()

{

$this->students = Student::all();

return view('livewire.students');

}

/**

* The attributes that are mass assignable.

* @var array

public function create()

{

$this->resetInputFields();

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function openModal()

{

$this->isOpen = true;

}

/**

* The attributes that are mass assignable.

* @var array

public function closeModal()

{

$this->isOpen = false;

}

/**

* The attributes that are mass assignable.

* @var array

private function resetInputFields(){

$this->first_name = '';

$this->last_name = '';

$this->address = '';

$this->student_id = '';

}

/**

* The attributes that are mass assignable.

* @var array

public function store()

{

$this->validate([

'first_name' => 'required',

'last_name' => 'required',

'address' => 'required',

]);

Student::updateOrCreate(['id' => $this->student_id], [

'first_name' => $this->first_name,

'last_name' => $this->last_name,

'address' => $this->address

]);

session()->flash('message',

$this->student_id ? 'Student Updated Successfully.' : 'Student Created Successfully.');

$this->closeModal();

$this->resetInputFields();

}

/**

* The attributes that are mass assignable.

* @var array

public function edit($id)

{

$student = Student::findOrFail($id);

$this->student_id = $id;

$this->first_name = $student->first_name;

$this->last_name = $student->last_name;

$this->address = $student->address;

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function delete($id)

{

Student::find($id)->delete();

session()->flash('message', 'Student Deleted Successfully.');

}

Step 7: Update Blade Files

So finally, first we need to update the following blade file. so you can see our blade files.

resources/views/livewire/students.blade.php

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Laravel 8 Jetstream Livewire CRUD Example Tutorial - XpertPhp
    </h2>
</x-slot>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
            @if (session()->has('message'))
                <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert">
                  <div class="flex">
                    <div>
                      <p class="text-sm">{{ session('message') }}</p>
                    </div>
                  </div>
                </div>
            @endif
            <button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Student</button>
            @if($isOpen)
                @include('livewire.create')
            @endif
            <table class="table-fixed w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-2 w-20">No.</th>
                        <th class="px-4 py-2">First Name</th>
                        <th class="px-4 py-2">Last Name</th>
                        <th class="px-4 py-2">Address</th>
                        <th class="px-4 py-2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($students as $student)
                    <tr>
                        <td class="border px-4 py-2">{{ $student->id }}</td>
                        <td class="border px-4 py-2">{{ $student->first_name }}</td>
                        <td class="border px-4 py-2">{{ $student->last_name }}</td>
                        <td class="border px-4 py-2">{{ $student->address }}</td>
                        <td class="border px-4 py-2">
                        <button wire:click="edit({{ $student->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
                            <button wire:click="delete({{ $student->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<x-slot name="header">

Laravel 8 Jetstream Livewire CRUD Example Tutorial - XpertPhp

</h2>

</x-slot>

@if (session()->has('message'))

<div>

<p class="text-sm">{{ session('message') }}</p>

</div>

@endif

<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Student</button>

@if($isOpen)

@include('livewire.create')

@endif

<thead>

<th class="px-4 py-2">First Name</th>

<th class="px-4 py-2">Address</th>

<th class="px-4 py-2">Action</th>

</tr>

</thead>

<tbody>

@foreach($students as $student)

<tr>

<td class="border px-4 py-2">{{ $student->id }}</td>

<td class="border px-4 py-2">{{ $student->first_name }}</td>

<td class="border px-4 py-2">{{ $student->last_name }}</td>

<td class="border px-4 py-2">{{ $student->address }}</td>

<button wire:click="edit({{ $student->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>

<button wire:click="delete({{ $student->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

resources/views/livewire/create.blade.php

    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
            <form>
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="">
                        <div class="mb-4">
                            <label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">First Name:</label>
                            <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter First Name" wire:model="first_name">
                            @error('first_name') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
						 <div class="mb-4">
                            <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Last Name:</label>
                            <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" placeholder="Enter Last Name" wire:model="last_name">
                            @error('last_name') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput3" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
                            <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput3" wire:model="body" placeholder="Enter Address"></textarea>
                            @error('address') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                        <button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                        Save
                        </button>
                    </span>
                    <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
                        <button wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Cancel
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

</div>

<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?

<form>

<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">First Name:</label>

@error('first_name') <span class="text-red-500">{{ $message }}</span>@enderror

</div>

@error('last_name') <span class="text-red-500">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput3" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>

@error('address') <span class="text-red-500">{{ $message }}</span>@enderror

</div>

Save

</button>

</span>

Cancel

</button>

</span>

</div>

</form>

</div>

Step 8: Add Route
We have to need put below student resource route in routes/web.php.
routes/web.php

use App\Http\Livewire\Students;

Route::get('student', Students::class);

use App\Http\Livewire\Students;

Route::get('student', Students::class);

Step 9: Run Our Laravel Application
We can start the server and run this example using the below command.

php artisan serve

1	php artisan serve

Now we will run our example using the below Url in the browser.

http://127.0.0.1:8000/student

1	http://127.0.0.1:8000/student

Laravel 8 Pagination Example Tutorial