Laravel 8 Livewire CRUD with Jetstream Tailwind CSS

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

In this Laravel 8 Livewire CRUD with Jetstream Tailwind CSS tutorial I will show you how to create simple crud application with using livewire with jetstream and tailwind css In laravel. In this tutorial you will learn what is Laravel 8 Livewire CRUD with Jetstream & Tailwind CSS. In this tutorial you will learn to create basic CRUD application using JetStream with livewire package in laravel. In this article you will also learn how to validate laravel livewire forms, how to update livewire form data, and how to edit livewire form data in laravel.

Table Of Contents−

Laravel 8 Livewire CRUD with Jetstream Tailwind CSS

In this step by step guide, we will be creating a simple crud operation application with validation using JetStream with livewire package in laravel 8. In this example you will learn how to insert, read, update and delete data from database using JetStream with livewire package in laravel 8.

Step 1: Install Laravel 8

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 blog

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

Step 2: Create Auth with Jetstream Livewire

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

composer require laravel/jetstream

1	composer require laravel/jetstream

now,Create authentication using bellow command.

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

install node js package:

npm install

1	npm install

Run the package:

npm run dev

1	npm run dev

Run the migration command to create database table:

php artisan migrate

1	php artisan migrate

Step 3: Create Migration and Model

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

php artisan make:migration create_posts_table

1	php artisan make:migration create_posts_table

Migration:

<?php  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;  
class CreatePostsTable 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

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatePostsTable 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

1	php artisan migrate

Now lets Create a Post model.

php artisan make:model Post

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

<?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 3: Create Post Component

Now in this step we will create a livewire component using following command:

php artisan make:livewire posts

1	php artisan make:livewire posts

that will create files on both path:

app/Http/Livewire/Posts.php
resources/views/livewire/posts.blade.php

1 2	app/Http/Livewire/Posts.php resources/views/livewire/posts.blade.php

Step 4: Update Component File

Here create following methods render(), create(), openModal(), closeModal(), resetInputFields(), store(), edit() and delete() method for our crud app.

app/Http/Livewire/Post.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.');
    }
}

100

<?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 5: Update Blade Files

Now we will update blade file as following:

resources/views/livewire/posts.blade.php

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Manage Posts (Laravel 8 Livewire CRUD with Jetstream & Tailwind CSS)
    </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 Post</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">Body</th>
                        <th class="px-4 py-2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($posts as $post)
                    <tr>
                        <td class="border px-4 py-2">{{ $post->id }}</td>
                        <td class="border px-4 py-2">{{ $post->title }}</td>
                        <td class="border px-4 py-2">{{ $post->body }}</td>
                        <td class="border px-4 py-2">
                        <button wire:click="edit({{ $post->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
                            <button wire:click="delete({{ $post->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 Posts (Laravel 8 Livewire CRUD with Jetstream & Tailwind CSS)

</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 New Post</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($posts as $post)

<tr>

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

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

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

resources/views/livewire/create.blade.php

<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">Body:</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="body" placeholder="Enter Body"></textarea>
                  @error('body') <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>
        </form>
      </div>
        
    </div>
  </div>
</div>

</div>

<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>

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

</div>

Save

</button>

</span>

Cancel

</button>

</span>

</form>

</div>

Step 6: Add Route

Now, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

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('post', Posts::class);

<?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('post', Posts::class);

Run 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 –

//localhost:8000/post

1	//localhost:8000/post

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Livewire CRUD with Jetstream Tailwind CSS