Now, let's see an article of laravel 9 livewire crud example. you will learn laravel 9 livewire crud with jetstream & tailwind css. I explained simply step by step laravel 9 livewire crud with a modal tailwind. I explained simply step by step laravel 9 jetstream livewire crud application example. Let's get started with insert update delete with laravel 9 livewire.
Laravel 9 jetstreams are designed by Tailwind CSS and they provide auth using livewire and Inertia. I will show you how to create a module with livewire on default jetstream auth in laravel 9.
In this example, we will install jetstream and create auth scaffolding using livewire, Then we will create a posts table with title and body fields. we will create a simple crud operation with that. so let's follow step by step and create a crud application with livewire. you can see the preview:
Preview:
List View:
Create View:
Update View:
Step 1: Install Laravel 9
This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:
Now, in this step, we need to use composer command to install jetstream, so let's run bellow command and install bellow library.
composer require laravel/jetstream
now, we need to create authentication using the bellow command. you can create basic login, register, and email verification. if you want to create team management then you have to pass the addition parameter. you can see bellow commands:
php artisan jetstream:install livewire
Now, let's node js package:
npm install
let's run package:
npm run dev
now, we need to run migration command to create database table:
Here, we need create database migration for posts table and also we will create model for posts table.
php artisan make:migration create_posts_table
Migration:
<?php use Illuminate\Database\Migrations\Migration;use Illuminate\Database\Schema\Blueprint;use Illuminate\Support\Facades\Schema; return new class extends Migration{ /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('body'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); }};
php artisan migrate
now we will create Post model by using following command:
php artisan make:model Post
App/Models/Post.php
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory;use Illuminate\Database\Eloquent\Model; class Post extends Model{ use HasFactory; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'title', 'body' ];}
Step 4: Create Post Component
Now here we will create livewire component using their command. so run bellow command to create post crud application component.
Here, we will write render(), create(), openModal(), closeModal(), resetInputFields(), store(), edit() and delete() method for our crud app.
So, let, update following file.
app/Http/Livewire/Posts.php
<?php namespace App\Http\Livewire; use Livewire\Component;use App\Models\Post; class Posts extends Component{ public $posts, $title, $body, $post_id; public $isOpen = 0; /** * The attributes that are mass assignable. * * @var array */ public function render() { $this->posts = Post::all(); return view('livewire.posts'); } /** * 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->body = ''; $this->post_id = ''; } /** * The attributes that are mass assignable. * * @var array */ public function store() { $this->validate([ 'title' => 'required', 'body' => 'required', ]); Post::updateOrCreate(['id' => $this->post_id], [ 'title' => $this->title, 'body' => $this->body ]); session()->flash('message', $this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.'); $this->closeModal(); $this->resetInputFields(); } /** * The attributes that are mass assignable. * * @var array */ public function edit($id) { $post = Post::findOrFail($id); $this->post_id = $id; $this->title = $post->title; $this->body = $post->body; $this->openModal(); } /** * The attributes that are mass assignable. * * @var array */ public function delete($id) { Post::find($id)->delete(); session()->flash('message', 'Post Deleted Successfully.'); }}
Step 6: Update Blade Files
Here, we will update following list of files for our listing page, create page.
In third step, we will create routes for multiple file upload. so create two route with GET and POST route example.
routes/web.php
<?php use Illuminate\Support\Facades\Route; use App\Http\Livewire\Posts; /*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/ Route::get('posts', Posts::class)->middleware('auth');
Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
