Laravel 9 livewire form example; In this tutorial, we will learn how to create and submit form data using livewire package in laravel 9 apps.
Laravel 9 Livewire Submit Form Example Tutorial
Follow the following steps to create and submit form using livewire in laravel 9 apps:
- Step 1: Install Laravel
- Step 2: Add Database Detail
- Step 3: Generate Migration and Model by Command
- Step 4: Install Livewire
- Step 5: Create Component
- Step 6: Create Route
- Step 7: Create View File
- Step 8: Run Development Server
Step 1: Install Laravel
First of all, Open terminal OR command prompt and run the following command for installing a fresh laravel setup:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Add Database Detail
Next, Add database credentials in the .env file. So open project with any text editor and find .env file then add database detail here:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Step 3: Generate Model and Migration By Command
In this step, generate model and migration file using the following command:
php artisan make:model Contact-m
This command will create one model name Contact and also create one migration file for Contact table. After successfully run the command go to database/migrations file and put the below here :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
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');
}
}
Next, Open a command prompt and run the following command to create the table into database:
php artisan migrate
Next, Open the App/Models/Contact.php file and add the fillable properties:
<?php
namespace App/Models;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'body',
];
}
Step 4: Install Livewire
In this step, install livewire to our laravel web application using the following command:
composer require livewire/livewire
Step 5: Create Component
In this step, create the livewire components using the following command. So Open cmd and run the following command:
php artisan make:livewire contact-form
We can see a created file on the following path:
app/Http/Livewire/ContactForm.php resources/views/livewire/contact-form.blade.php
Next, update the following code into files, so follow the given path and update the code:
app/Http/Livewire/ContactForm.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Contact;
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 class="form-group">
<label for="exampleInputName">Name</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputEmail">Email</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputbody">Body</label>
<textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
@error('body') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<button type="submit" class="btn btn-primary">Save Contact</button>
</form>
Step 6: Create Route
In this step, open routes file and update the following routes into routes.web.php file:
routes/web.php
Route::get('/form', function () {
return view('form');
});
Step 7: Create View File
Note that, we need to uses @livewireStyles, @livewireScripts, and @livewire(‘contact-form’) for adding HTML, CSS, and script code into liveware files.
In this step, create one blade view files that name form.blade.php file inside resources/views/ folder and update the following code into file:
resources/views/form.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire Contact Form Tutorial From Scratch - tutsmake.com</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success">
<h2 class="text-white">Laravel Livewire Form Tutorial From Scratch - tutsmake.com</h2>
</div>
<div class="card-body">
@livewire('contact-form')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
Step 8: Run Development Server
Finally, we need to run the following PHP artisan serve command to start laravel livewire form submit example app:
php artisan serve If want to run the project diffrent port so use this below command php artisan serve --port=8080
Now, we are ready to run laravel livewire form submit example app. So open browser and hit the following URL into browser:
http://localhost:8000/form
