Laravel 8 Livewire CRUD with Jetstream Example

In this tutorial you will learn about the Laravel 8 Livewire CRUD with Jetstream Example and its application with practical example.

In this Laravel 8 Livewire CRUD with Jetstream Example tutorial I will show you how to create simple CRUD Application using jetstream auth with livewire in laravel 8. In this tutorial, you will learn to create a simple CRUD (Create, Read, Update and Delete) application with jetstream auth and livewire in Laravel 8. In this Laravel 8 CRUD operation example tutorial I’ll show you how to create a simple crud application with jetstream auth and livewire in laravel 8. In this example we will learn how to create a simple crud operation application in laravel 8. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) application with jetstream auth and livewire in laravel 8.

Table Of Contents−

Laravel 8 Livewire CRUD with Jetstream Example

In this tutorial, you will learn step by step how to build simple crud operation app in laravel 8. You will also learn to create a simple CRUD application with jetstream auth and livewire in Laravel 8.

Step 1 – Download Laravel 8 App
Step 2 – Connect Laravel 8 App To Database
Step 3 – Make Model & Migration

Step 4 – Install Jetstream Auth with Livewire
Step 5 – Build Todos Livewire Components
Step 6 – Create Routes

Step 7 – Update Todo Component File
Step 8 – Create And Update Blade Files
Step 9 – Start Development Server

Step 1 – Download Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2 – Connect Laravel 8 App To Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Step 3 – Make Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Todo -m

1	php artisan make:model Todo -m

Now, open create_todos_table.php file inside Laravel8CRUD/database/migrations/ directory. Then put the function up() with following code:

    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

public function up()

{

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

$table->id();

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Then add the fillable property in Todo.php, which is placed on app/models direcotry:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Todo extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'title', 'description',
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description',

];

}

Step 4 – Install Jetstream Auth with Livewire

In this step, we will install Jetstream Package via the composer dependency manager. Use the following command to install Jetstream.

composer require laravel/jetstream

1	composer require laravel/jetstream

After that, execute the following command on terminal to install livewire package in laravel 8 app:

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

Then, execute the “npm install && npm run dev” command to build your assets:

npm install

1	npm install

To run npm:

npm run dev

1	npm run dev

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Step 5 – Build Todos Livewire Component

Now, we will create a livewire compoent using following command:

php artisan make:livewire todos

1	php artisan make:livewire todos

This command will create two files, which is located on following path:

app/Http/Livewire/Todos.php
resources/views/livewire/todos.blade.php

1 2	app/Http/Livewire/Todos.php resources/views/livewire/todos.blade.php

Step 6 – Create Routes

After this, we need to define routes for crud operations in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Livewire\Todos;
 
Route::get('todos', Todos::class);

use App\Http\Livewire\Todos;

Route::get('todos', Todos::class);

Step 7 – Update Todo Component File

Now, update the Todo.php component file with the following code, which is placed on app/Http/Livewire directory:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use App\Models\Todo;
 
class Todos extends Component
{
   public $todos, $title, $description, $todo_id;
    public $isOpen = 0;
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
    {
        $this->todos = Todo::all();
        return view('livewire.todos');
    }
   
    /**
     * 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->title = '';
        $this->description = '';
        $this->todo_id = '';
    }
      
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
    
        Todo::updateOrCreate(['id' => $this->todo_id], [
            'title' => $this->title,
            'description' => $this->description
        ]);
   
        session()->flash('message', 
            $this->todo_id ? 'Todo Updated Successfully.' : 'Todo Created Successfully.');
   
        $this->closeModal();
        $this->resetInputFields();
    }
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
    {
        $Todo = Todo::findOrFail($id);
        $this->todo_id = $id;
        $this->title = $Todo->title;
        $this->description = $Todo->description;
     
        $this->openModal();
    }
      
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
    {
        Todo::find($id)->delete();
        session()->flash('message', 'Todo Deleted Successfully.');
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Todo;

class Todos extends Component

{

public $todos, $title, $description, $todo_id;

public $isOpen = 0;

/**

* The attributes that are mass assignable.

* @var array

public function render()

{

$this->todos = Todo::all();

return view('livewire.todos');

}

/**

* 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->title = '';

$this->description = '';

$this->todo_id = '';

}

/**

* The attributes that are mass assignable.

* @var array

public function store()

{

$this->validate([

'title' => 'required',

'description' => 'required',

]);

Todo::updateOrCreate(['id' => $this->todo_id], [

'title' => $this->title,

'description' => $this->description

]);

session()->flash('message',

$this->todo_id ? 'Todo Updated Successfully.' : 'Todo Created Successfully.');

$this->closeModal();

$this->resetInputFields();

}

/**

* The attributes that are mass assignable.

* @var array

public function edit($id)

{

$Todo = Todo::findOrFail($id);

$this->todo_id = $id;

$this->title = $Todo->title;

$this->description = $Todo->description;

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function delete($id)

{

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

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

}

Step 8 – Create And Update Blade Files

In this step we will create blade view files for crud operations. Lets open todos.blade.php file and update the following code into it, which is placed on resources/views/livewire directory:

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Manage todos (Laravel 8 Jetstream Livewire CRUD Example</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 Todo</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">Title</th>
<th class="px-4 py-2">Desc</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@foreach($todos as $todo)
<tr>
<td class="border px-4 py-2">{{ $todo->id }}</td>
<td class="border px-4 py-2">{{ $todo->title }}</td>
<td class="border px-4 py-2">{{ $todo->description}}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $todo->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $todo->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">

Manage todos (Laravel 8 Jetstream Livewire CRUD Example</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 Todo</button>

@if($isOpen)

@include('livewire.create')

@endif

<thead>

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

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

</tr>

</thead>

<tbody>

@foreach($todos as $todo)

<tr>

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

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

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

<button wire:click="delete({{ $todo->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>

Then create one new blade view file name create.blade.php inside resources/views/livewire directory. And update the following code into it::

<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
<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>
<!-- This element is to trick the browser into centering the modal contents. -->
<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">Title:</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 Title" wire:model="title">
@error('title') <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">Description:</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="exampleFormControlInput2" wire:model="description" placeholder="Enter Description"></textarea>
@error('description') <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">Title:</label>

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

</div>

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

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

</div>

Save

</button>

</span>

Cancel

</button>

</span>

</div>

</form>

</div>

Step 9 – Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/todos

1	http://127.0.0.1:8000/todos

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Livewire CRUD with Jetstream Example