Tag Archives: laravel livewire

Laravel 9 Livewire Crud Example

In this Laravel 9 Livewire Crud Example tutorial I will show you how to create simple CRUD Application using livewire in laravel 9. In this tutorial, you will learn to create a simple CRUD (Create, Read, Update and Delete) application with livewire in Laravel 9. In this Laravel 9 CRUD example tutorial I’ll show you how to create a simple crud application using livewire in laravel 9. In this example we will learn how to create a simple crud operation application in laravel 9. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) application using livewire in laravel 9.

Laravel 9 Livewire Crud Example

In this step by step tutorial I will demonstrate you with example to create livewire crud in laravel 9 application. Please follow the instruction given below:

Install Laravel 9
Configuring Database
Create Post Model & Migration
Create Routes
Installing Livewire Package
Build Livewire Components
Create Blade Views
Start Development Server
Run This App On Browser

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

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

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

Configuring Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

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

Create Post Model & Migration

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

php artisan make:model Post -m

1	php artisan make:model Post -m

Now, open create_posts_table.php file inside database/migrations/ directory. Then put the function up() with following code:

public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Then add the fillable property in Post.php, which is placed on app/models direcotry:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 'description'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description'

];

}

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

php artisan migrate

1	php artisan migrate

Create Routes

After this, we need to define routes for crud operations in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Livewire\Posts;
Route::get('posts', Posts::class);

1 2	use App\Http\Livewire\Posts; Route::get('posts', Posts::class);

Install Livewire Package

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

composer require livewire/livewire

1	composer require livewire/livewire

Install Npm Packages

npm install

1	npm install

Then type the following command on cmd to run npm:

npm run dev

1	npm run dev

Run following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Build Livewire Components

In this step we will create a component using following command:

php artisan make:livewire posts

1	php artisan make:livewire posts

The above command will create the following component files on the following 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

Now, go to app/Http/Livewire folder and open Posts.php file. Then add the following code into your Posts.php file:

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\Post;
  
class Posts extends Component
{
    public $posts, $title, $description, $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->description = '';
        $this->post_id = '';
    }
     
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
   
        Post::updateOrCreate(['id' => $this->post_id], [
            'title' => $this->title,
            'description' => $this->description
        ]);
  
        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->description = $post->description;
    
        $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

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Post;

class Posts extends Component

{

public $posts, $title, $description, $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->description = '';

$this->post_id = '';

}

/**

* The attributes that are mass assignable.

* @var array

public function store()

{

$this->validate([

'title' => 'required',

'description' => 'required',

]);

Post::updateOrCreate(['id' => $this->post_id], [

'title' => $this->title,

'description' => $this->description

]);

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->description = $post->description;

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function delete($id)

{

Post::find($id)->delete();

session()->flash('message', 'Post Deleted Successfully.');

}

Now, open posts.blade.php, which is located inside resources/views/livewire/ directory and add the following code into it:

<div>
    @if($updateMode)
        @include('livewire.update')
    @else
        @include('livewire.create')
    @endif
    <table class="table table-bordered mt-5">
        <thead>
            <tr>
                <th>No.</th>
                <th>Title</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $value)
            <tr>
                <td>{{ $value->id }}</td>
                <td>{{ $value->title }}</td>
                <td>{{ $value->description }}</td>
                <td>
                <button wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button>
                <button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div>

@if($updateMode)

@include('livewire.update')

@else

@include('livewire.create')

@endif

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th>Action</th>

</tr>

</thead>

<tbody>

@foreach($posts as $value)

<tr>

<td>{{ $value->id }}</td>

<td>{{ $value->title }}</td>

<td>{{ $value->description }}</td>

<td>

<button wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button>

<button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

Create Blade Views

In this step, go to resources/views/livewire folder and create some view files as following:

Create.blade.php

<form>
    <div class="form-group">
        <label for="exampleFormControlInput1">Title</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <div class="form-group">
        <label for="exampleFormControlInput2">Description</label>
        <input type="text" class="form-control" id="exampleFormControlInput2" wire:model="description" placeholder="Enter Description">
        @error('description') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <button wire:click.prevent="store()" class="btn btn-success">Save</button>
</form>

<form>

<label for="exampleFormControlInput1">Title</label>

@error('title') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Description</label>

@error('description') <span class="text-danger">{{ $message }}</span>@enderror

</div>

</form>

Update.blade.php

<form>
    <div class="form-group">
        <input type="hidden" wire:model="post_id">
        <label for="exampleFormControlInput1">Title</label>
        <input type="text" class="form-control" wire:model="title" id="exampleFormControlInput1" placeholder="Enter Title">
        @error('title') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <div class="form-group">
        <label for="exampleFormControlInput2">Description</label>
        <input type="text" class="form-control" wire:model="description" id="exampleFormControlInput2" placeholder="Enter Description">
        @error('description') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <button wire:click.prevent="update()" class="btn btn-dark">Update</button>
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>
</form>

<form>

<label for="exampleFormControlInput1">Title</label>

@error('title') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Description</label>

@error('description') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<button wire:click.prevent="update()" class="btn btn-dark">Update</button>

<button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>

</form>

Home.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 9 Livewire CRUD Operation Tutorial From Scratch</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
            .full-height {
                height: 100vh;
            }
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
            .position-ref {
                position: relative;
            }
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
            .content {
                text-align: center;
            }
            .title {
                font-size: 84px;
            }
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2>Laravel 9 Livewire Crud</h2>
                    </div>
                    <div class="card-body">
                        @livewire('posts')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel 9 Livewire CRUD Operation Tutorial From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2>Laravel 9 Livewire Crud</h2>

</div>

@livewire('posts')

</div>

@livewireScripts

</body>

</html>

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

http://127.0.0.1:8000/posts

1	http://127.0.0.1:8000/posts

Laravel 9 Livewire Submit Form

In this Laravel 9 Livewire Submit Form tutorial, I’ll show you how to install and use laravel livewire form package in your laravel application. In this tutorial you will learn to install, setup and use laravel livewire form. In this article I will guide you through how to submit and store form data using the laravel livewire form package in laravel.

Laravel 9 Livewire Submit Form

In this step by step tutorial I will demonstrate you how to submit laravel form using livewire. Please follow the instruction given below:

Install Laravel 9
Add Database Detail
Generate Migration and Model by Command
Install Livewire
Create Component
Create Route
Create View File
Run Development Server

Install Laravel

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Generate Model and Migration By Command

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

php artisan make:model Contact-m

1	php artisan make:model Contact-m

The above command will create a model name Contact and also create a migration file for Contact table. After successfully run the command go to database/migrations file and put the below here :

<?php
   
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
   
class CreateContactsUsForms extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->text('body');
            $table->timestamps();
        });
    }
   
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateContactsUsForms extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->text('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

now go to app\Providers\AppServiceProvider.php and put the below code here :

 use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Now run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Next, Open App/Contact.php file and add the fillable properties:

<?php
   
namespace App;
   
use Illuminate\Database\Eloquent\Model;
   
class Contact extends Model
{
     /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'body',
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'email', 'body',

];

}

Install Livewire

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

composer require livewire/livewire

1	composer require livewire/livewire

Create Component

In this step we will create a component using following artisan command:

php artisan make:livewire contact-form

1	php artisan make:livewire contact-form

You can see a created file on the following path:

app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php

1 2	app/Http/Livewire/ContactForm.php resources/views/livewire/contact-form.blade.php

Now, put the following code into your files, so follow the given path and update the code:

app/Http/Livewire/ContactForm.php

<?php
   
namespace App\Http\Livewire;
   
use Livewire\Component;
use App\Contact;
   
class ContactForm extends Component
{
    public $name;
    public $email;
    public $body;
   
    public function submit()
    {
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);
   
        Contact::create($validatedData);
   
        return redirect()->to('/form');
    }
   
    public function render()
    {
        return view('livewire.contact-form');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Contact;

class ContactForm extends Component

{

public $name;

public $email;

public $body;

public function submit()

{

$validatedData = $this->validate([

'name' => 'required|min:6',

'email' => 'required|email',

'body' => 'required',

]);

Contact::create($validatedData);

return redirect()->to('/form');

}

public function render()

{

return view('livewire.contact-form');

}

resources/views/livewire/contact-form.blade.php

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="exampleInputName">Name</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <div class="form-group">
        <label for="exampleInputEmail">Email</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <div class="form-group">
        <label for="exampleInputbody">Body</label>
        <textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <button type="submit" class="btn btn-primary">Save Contact</button>
</form>

@error('name') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<label for="exampleInputEmail">Email</label>

@error('email') <span class="text-danger">{{ $message }}</span> @enderror

</div>

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

</div>

<button type="submit" class="btn btn-primary">Save Contact</button>

</form>

Create Route

After this, 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

Route::get('/form', function () {
    return view('form');
});

Route::get('/form', function () {

return view('form');

});

Create View File

In this step, we will create a blade files that name form.blade.php file inside resources/views/ folder and put the following code into your file:

resources/views/form.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Livewire Contact Form Tutorial From Scratch</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
 
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
 
            .full-height {
                height: 100vh;
            }
 
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
 
            .position-ref {
                position: relative;
            }
 
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
 
            .content {
                text-align: center;
            }
 
            .title {
                font-size: 84px;
            }
 
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
 
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-success">
                    <h2 class="text-white">Laravel Livewire Form Tutorial From Scratch</h2>
                  </div>
                  <div class="card-body">
                    @livewire('contact-form')
                  </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire Contact Form Tutorial From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire Form Tutorial From Scratch</h2>

</div>

@livewire('contact-form')

</div>

@livewireScripts

</body>

</html>

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 –

http://localhost:8000/form

1	http://localhost:8000/form

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Tag Archives: laravel livewire

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Crud Example

Install Laravel 9

Configuring Database

Create Post Model & Migration

Create Routes

Install Livewire Package

Build Livewire Components

Create Blade Views

Start Development Server

Laravel 9 Livewire Submit Form

Laravel 9 Livewire Submit Form

Install Laravel

Add Database Detail

Generate Model and Migration By Command

Install Livewire

Create Component

Create Route

Create View File

Run Development Server