202006/18

Laravel Livewire Form Example

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 artisan migrate

now we will create Contact model by using following command:

php artisan make:model Contact

App/Contact.php

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.phpresources/views/livewire/contact-form.blade.php

Now both file we will update as bellow for our contact us 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.

Now you can run using bellow command: