In this article, we will learn how to create a Laravel 8 Jetstream Livewire CRUD example. Laravel Jetstream Livewire is a library and we can easily create modern, functional, and dynamic connections.

Laravel Jetstream is designed for Tailwind CSS. Jetstream offers login, registration, email verification, dual authentication, session management, API support with Laravel Sanctum, and optional team management.

Now, we follow the steps below to build a laravel 8 Jetstream Livewire CRUD (example Laravel 8 Jetstream Livewire CRUD). to see our laravel 8 study.


Step 1: Install Laravel 8

We will install laravel 8, so first open command Prompt or terminal and go to xampp htdocs directory directory using command Prompt. then apply the instructions below for the installation of laravel 8.

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

Step 2: Setting Database Configuration

After complete installation of laravel. we have to make the data suspension. we will now open the .env file and change the data name, username, password in the .env file. See the changes below in the .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)

Step 3: Create Jetstream Auth with Livewire

We will install the Jetstream package using the php artisan command below.

composer require laravel/jetstream

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

php artisan jetstream:install livewire

After installing Jetstream With Livewire, We will have to build and rebuild your NPM trust and move our database using the command below.

npm install && npm run dev
php artisan migrate

Step 4: Create Migration and Model

Now, We need to create a migration. therefore we will add the command we use to create a migration of the student table.

php artisan make:migration create_students_table --create=students

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

database/migrations/create_students_table 

<?php

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

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 command below. after changes above the file.

php artisan migrate

Here below command help to create the model.

php artisan make:model Student

Student.php

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

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 the command below. so that you can follow the command below.

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

Step 6: Update Component File

In this step, we will update another option in this file. to see our next file.

app/Http/Livewire/Students.php

<?php

namespace AppHttpLivewire;

use LivewireComponent;
use AppModelsStudent;

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 next blade file. to 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
    </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>

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>

Step 8: Add Route

We have to need put below student resource route in routes/web.php.

routes/web.php

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

Step 9: Run Our Laravel Application

We can start the server and run this example using the command below.

php artisan serve