Laravel Livewire Form Example
In this post we will give you information about Laravel Livewire Form Example. Hear we will give you detail about Laravel Livewire Form ExampleAnd how to use it also give you demo for it if it is necessary.
This tutorial shows you laravel livewire form example. I’m going to show you about create form with laravel livewire. let’s discuss about laravel livewire tutorial. you will learn how to install livewire to laravel.
In this tutorial, we will create simple form using laravel livewire. you can use laravel livewire with laravel 6 and laravel 7 version.
Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. if you are using livewire with laravel then you don’t worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using php. without page refresh laravel validation will works, form will submit etc.
Here, i will give you very simple example to creating contact form with name and email and i will store that data to database without refresh page and too many lines of code in blade file. we will use only livewire/livewire package.
So, let’s follow bellow step and you will get bellow layout:
Step 1 : Install Laravel 7
first of all we need to get fresh Laravel 7 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2 : 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_contacts_table
Migration:
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
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 artisan migrate
now we will create Contact model by using following command:
php artisan make:model Contact
App/Contact.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Contact extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'body',
];
}
Step 3: Install Livewire
now in this step, we will simply install livewire to our laravel 7 application using bellow command:
composer require livewire/livewire
Step 4: Create Component
Now here we will create livewire component using their command. so run bellow command to create contact us form component.
php artisan make:livewire contact-form
Now they created fies on both path:
app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php
Now both file we will update as bellow for our contact us form.
app/Http/Livewire/ContactForm.php
<?php
namespace AppHttpLivewire;
use LivewireComponent;
use AppContact;
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 >
<label for="exampleInputName">Name</label>
<input type="text" id="exampleInputName" placeholder="Enter name" wire:model="name">
@error('name') <span >{{ $message }}</span> @enderror
</div>
<div >
<label for="exampleInputEmail">Email</label>
<input type="text" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
@error('email') <span >{{ $message }}</span> @enderror
</div>
<div >
<label for="exampleInputbody">Body</label>
<textarea id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
@error('body') <span >{{ $message }}</span> @enderror
</div>
<button type="submit" >Save Contact</button>
</form>
Step 5: Create Route
now we will create one route for calling our example, so let’s add new route to web.php file as bellow:
routes/web.php
Route::get('/form', function () {
return view('form');
});
Step 6: Create View File
here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire(‘contact-form’). so let’s add it.
resources/views/form.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
@livewireStyles
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div >
<div >
<div >
Laravel Livewire Example - ItSolutionStuff.com
</div>
<div >
@livewire('contact-form')
</div>
</div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>
Now you can run using bellow command:
php artisan serve
Open bellow URL:
http://localhost:8000/form
I hope it can help you…
Hope this code and post will helped you for implement Laravel Livewire Form Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs