Insert Or Create Record Using Livewire | Crud Livewire
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...
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.