Insert Or Create Record Using Livewire | Crud Livewire

by

Today we are going to see how we can use livewire to create a record, A simple livewire creates action.

We gonna use the livewire I have created a dummy project. Let’s go together.

Install laravel and Livewire and set the basic layout

First, we need to install Laravel composer create-project laravel/laravel create-livewire and then we can install Livewire composer require livewire/livewire because now we are using Livewire I’m gonna create an unstyled form just gonna use name,email,password and submit button.

Create Livewire Component

Now we have to create a livewire component to make sure that we are able to save data into db. But first of all we need to run php artisan migrate command which will create laravel predefined tables into your db that you have mentioned in .env file. If not please first make sure you have added credentials to the .env file.

php artisan make:livewire CreateUser

//This will create two files
//first  one in app/Livewire/CreateUser.php
//second one in resources/views/livewire/create-user.php

Btw you can modify these default directory from livewire config file that you can find in config directory

CreateUser.php

<?php

namespace App\Livewire;

use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Livewire\Component;

class CreateUser extends Component
{
    public $name;
    public $email;
    public $password;
    public function save()
    {
        User::query()->create(['name' => $this->name, 'email' => $this->email, 'password' => Hash::make($this->password)]);
        return back()->with('success', 'created');
    }
    public function render()
    {
        return view('livewire.create-user');
    }
}

I have created public properties that represent the form wire:model property. This way you can get the elements data direct into your class, livewire handles this all under the hood.

create-user.blade.php

<div>
    <form wire:submit='save'>
        <input type="text" placeholder="name" wire:model='name'>
        <input type="email" placeholder="email" wire:model='email'>
        <input type="password" placeholder="password" wire:model='password'>
        <button type="submit">Save</button>
    </form>
</div>

We have seen wire:model above but now the wire:submit handles the form submit action which is the calling save() method. It’s straightforward to use. I hope it will help you.

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Create Livewire</title>
    @livewireStyles
</head>
<body>
    @livewire('create-user')
    @livewireScripts
</body>
</html>

Make sure you include @livewireStyles and @livewireScripts tags accordingly it will load inbuilt styles and scripts for livewire. This way you can achieve the final output and endup saving records in db.

You can modify this according to your need. I hope this will help you.

Leave a Comment