Laravel 8 Livewire CRUD with

Jetstream & Tailwind CSS

By Hardik Savani September 20, 2020 Category : Laravel

Powered By
Pause
Unmute
Loaded: 4.02%
Fullscreen
Now, let's see article of laravel 8 livewire crud example. This tutorial will give you
simple example of laravel 8 livewire crud with jetstream & tailwind css. i would like to
show you laravel 8 livewire crud with modal. We will look at example of laravel 8
jetstream livewire crud application example.

In this example i will show you step by step laravel 8 livewire crud app with
modal tailwind css.

Laravel 8 jetstream designed by Tailwind CSS and they provide auth using
livewire and Inertia. i will show you how to create module with livewire on
default jetstream auth in laravel 8.

Here, bellow i written step by step, so you can easily start simple post master
with your existing step up of laravel 8 jetstream auth with tailwind css. you
just need to follow few bellow step and you will get layout as like bellow:

Preview:
List View:

Create View:

Update View:
 Step 1: Install Laravel 8

here, we need to install laravel 8 application using composer command.

composer create-project --prefer-dist

laravel/laravel blog

Step 2: Create Auth with Jetstream Livewire

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 bellow command. you can create
basic login, register and email verification. if you want to create team
management then you have to pass 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:

php artisan migrate

Read Also: Laravel 8 CRUD Application Tutorial for Beginners

Step 3: Create Migration and Model

Here, we need create database migration for files table and also we will create
model for files 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;

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

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'

];

}
Read Also: Laravel 8 CRUD Application Tutorial for Beginners

Step 3: Create Post Component

Now here we will create livewire component using their command. so run
bellow command to create post crud application component.

php artisan make:livewire posts

Now they created fies on both path:

app/Http/Livewire/Posts.php

resources/views/livewire/posts.blade.php

Step 4: Update Component File

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

Step 5: Update Blade Files

Here, we will update following list of files for our listing page, create page.

So, let's update all the files as bellow:

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

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>

Step 6: Add Route

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

Now you can run your application by bellow command:

php artisan serve

now you can run app and login as user, then you can open bellow url:
Read Also: Laravel 8 Send Mail using Gmail SMTP Server

//localhost:8000/post

now it's works...

I hope it can help you...