Laravel 8 Livewire CRUD with Jetstream Tutorial

Laravel 8 Jetstream Livewire CRUD example. In this tutorial, you will learn how to make simple crud operation app in laravel 8 using jetstream with livewire. And how to validate add & update form data on server-side in laravel 8 crud app.

Laravel 8 Jetstream and Livewire package have made it very simple to create crud (create, read, update, delete) applications.

In this tutorial, we will implement a simple crud app in laravel 8 using jetstream with livewire and validation.

Using this simple example of laravel 8 jetstream livewire crud app example, you can learn how to insert, read, update and delete data from the database in laravel 8.

Laravel 8 Jetstream Livewire CRUD App Example Tutorial

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, download or install laravel 8 new setup. So, open the terminal and type the following command to install the new laravel 8 app into your machine:

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

Step 2 – Connect Laravel 8 App To Database

Setup database with your downloaded/installed laravel 8 app. So, you need to find .env file and setup database details as following:

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

Open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Todo -m

After that, open create_todos_table.php file inside Laravel8CRUD/database/migrations/ directory. And the update 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();
    });
}

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',
    ];
}

Step 4 – Install Jetstream Auth with Livewire

In this step, execute the following command on terminal to install jetstream auth in laravel 8 app:

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

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

npm install

To run npm:

npm run dev

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

php artisan migrate

Step 5 – Build Todos Livewire Component

In this step, create todos livewire components by executing the following command on terminal:

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

Step 6 – Create Routes

In this step, create routes for laravel crud app. So, open web.php file from the routes directory of laravel CRUD app. And update the following routes into the web.php file:

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.');
    }
}

Step 8 – Create And Update Blade Files

In this step, 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 - Tutsmake.com)
</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>

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>

Step 9 – Start Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/todos

resources by:  tutsmake . com

22 February, 2021

Laravel 8 Livewire CRUD with Jetstream Tutorial