Laravel 10 Jetstream Livewire CRUD example; In this tutorial, you find a complete guide on how to make a simple crud operation app in Laravel 10 using jetstream with livewire. And how to validate add & update form data on server-side in Laravel 10 crud app.
Laravel 10 Jetstream and Livewire package have made it very simple to create crud (create, read, update, delete) applications.
This Laravel 10 livewire crud application using jetstream tutorial will implement a simple crud app in Laravel 10 using jetstream with livewire and validation. Using this simple example of Laravel 10 jetstream livewire crud app example, you can learn how to insert, read, update and delete data from the database in Laravel 10.
Create Laravel 10 Livewire CRUD Application using JetStream
- Step 1 – Download Laravel 10 App
- Step 2 – Connect Laravel 10 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 10 App
First of all, start your terminal to download or install Laravel 10 new setup. Execute the following command into it to install new Laravel 10 app into your system:
composer create-project --prefer-dist laravel/laravel Laravel8CRUD
Step 2 – Connect Laravel 10 App To Database
Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:
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 10 app:
composer require laravel/jetstream
After that, execute the following command on terminal to install livewire package in Laravel 10 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 10 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
