• May 31, 2021
• 0 comments
• CRUD , Education , IT , Laravel , PHP

This tutorial is for basic CRUD operation in Livewire with Laravel 8.

Follow few steps to achive this :

Step 1 : Laravel project setup and run in your web browser

First create a laravel application in your server. So open your terminal(For linux based OS) or cmd(For windows based OS).

composer create-project laravel/laravel livewireTutorial

A new laravel project will create in your server.

Now go inside the directory

cd livewireTutorial

And run your application using

php artisan serve

It will generate a link "127.0.0.1:8000" - open broswer and go this url to see your application.

Step 2 : Create Livewire Component

Now lets create a livewire component. I want to create a component which name is Forms.

php artisan make:livewire Forms

Now two files will create one is Class file and another is view file

app/Http/Livewire/Forms.php
resources/views/livewire/forms.blade.php

Step 3 : Database configuration

Now go to .env file. Here my DB name is "livewireTutorial". So set this three things in this way. Use properdatabase name in DB_DATABASE, provide your database username and password in DB_USERNAME and DB_PASSWORD section. If you have no database password leave it blank.

DB_DATABASE=livewireTutorial
DB_USERNAME=root
DB_PASSWORD=root

Now open your database, for my case I am using phpmyadmin. Create a database with same name which are provided in .env file.

Step 4 : Model and migration creation

Now create a model and you will need database table also. So create it along with model cretaion. Here we will use migration to create database table.

run this command :

php artisan make:model Register -m

Here using -m we can create migration file and newly generated model name is Register.

Yo will get miration file here :

database/migrations/2021_01_29_144134_create_registers_table.php

Just open that file and modify the table structure.

	$table->id();
	$table->string('name');
	$table->string('email');
	$table->timestamps();

Now run the migration :

php artisan migrate

A new table 'registers' will add to your database.

Step 5 : Register component in route and create URL

Go to laravel route. Open web.php

use App\Http\Livewire\Forms;

Route::get('/forms', Forms::class);

Now your component is registered any you will see all changes in "127.0.0.1:8000/forms" link

Step 6 : Listing, Add, Edit, Delete Functionality

app/Models/Register.php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Register extends Model
{
    use HasFactory;
    protected $table = 'registers';
    protected $fillable = ['name','email'];
}

resources/views/livewire/forms.blade.php

app/Http/Livewire/Forms.php

namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Register;
use Livewire\WithPagination;
use DB;

class Forms extends Component
{
    use WithPagination;
    public $name;
    public $email;
    public $hiddenId;
    //public $allData = [];
    protected $rules = [
        'name' =>'required|min:3|max:20',
        'email' =>'required|email'
    ];
    public function submit()
    {
        $validateData = $this->validate();
        $updateId = $this->hiddenId;
        if ($updateId>0) {
            $updateArray = array(
                'name'=>$validateData['name'],
                'email'=>$validateData['email']
            );
            DB::table('registers')->where('id', $updateId)->update($updateArray);
        } else {
            Register::create($validateData);
        }
        
        session()->flash('success', 'Form is submitted');
    }
    public function addForm()
    {
        $this->name= '';
        $this->email = '';
        $this->hiddenId ='';
    }
    public function editForm($id)
    {
        $singleData = Register::find($id);
        $this->name= $singleData->name;
        $this->email = $singleData->email;
        $this->hiddenId = $singleData->id;
    }
    public function deleteForm($id)
    {
        DB::table('registers')->where('id', $id)->delete();
        session()->flash('success', 'Records Deleted');
    }
    public function render()
    {
        $allData = Register::paginate(5);
        return view('livewire.forms', ['allData'=>$allData]);
    }
}

resources/views/layouts/app.blade.php

In the head section add :

@livewireStyles

Inside the body section. Just add this two line :

{{$slot}}
@livewireScripts

--------------------------------------------------------------------------------------------------------------------------------------

So all are done. Now check your browser and enjoy the first crud application using Livewire.

For more reference, Please see the above full video and do comments your queries on that video.

Thanks.