This article's lesson on Laravel 9's Work with Livewire form submission idea will be covered. Information regarding submitting a livewire form in Laravel 9 is classified in this article. This idea of submitting a form will be examined from scratch.
This article will be of great assistance to you if you're looking for information on how to submit a Livewire form using Laravel 9.
We'll create a form with a few inputs, such as Name, Email, and Body, submit it, and save the form's data to the database.
Laravel Installation
To create a Laravel project, use Terminal and enter the following line.
composer create-project laravel/laravel myblogIt will build a project folder inside of your local system called "myblog."
Laravel's development server can be launched here.
php artisan serve
URL: http://127.0.0.1:8000
assuming your system already has Laravel installed.
Create Database & Connect
Either the Manual tool in PhpMyAdmin or a mysql command can be used to create a database.
CREATE DATABASE laravel_app;
Open the .env file from the application root to establish a connection with the database. Find DB_ and update your information.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_app DB_USERNAME=root DB_PASSWORD=root
Create Model & Migration
Enter project's terminal address.
Let's use a single command to construct the model and migration.
Model construction and migration
php artisan make:model Contact -mThe command above will produce two files:
- Contact.php is a model file located in the /app/Models folder.
- /database/migrations folder contains a migration file with the name 2022_08_13_04051_create contacts table.php.
Write the following line of code in the migration file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
};
Write this code into the Contact.php model file.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
use HasFactory;
/**
* Write code on Method
*
* @return response()
*/
protected $fillable = [
'name', 'email', 'body'
];
}
Run Migration
Execute this command to run the migration file in the terminal once more.
php artisan migrateIt will carry out all of your application's pending migrations. a table for contacts will be made.
Install Livewire ? A Composer Package
Run this command to install livewire inside of this Laravel application. Return to the project terminal.
composer require livewire/livewireWe can now utilize Livewire's features and capabilities.
Generate Livewire Scaffolding
To create the livewire folder and files, return to the console and execute this command.
php artisan make:livewire contact-formThis command will produce the following files:
- /app/Http/Livewire folder contains the ContactForm.php file.
- contact-form.blade.php /resources/views/livewire file
Enter the following code into ContactForm.php after opening it.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\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('/contact-form');
}
public function render()
{
return view('livewire.contact-form');
}
}
Write the following code into contact-form.blade.php after opening it.
<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>
<br/>
<div class="form-group">
<label for="exampleInputEmail">Email</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email" wire:model="email">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<br/>
<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>
<br/>
<button type="submit" class="btn btn-primary">Save Contact</button>
</form>
Create Blade Template File
Create the form.blade.php blade template file in the resources/views folder.
Then, enter the following code into form.blade.php.
<html>
<head>
<title>Laravel 9 Work With Livewire Form Submit Tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@livewireStyles
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-header text-center text-white bg-primary">
<h4 class="text-center">Laravel 9 Work With Livewire Form Submit Tutorial</h4>
</div>
<div class="card-body">
@livewire('contact-form')
</div>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</body>
</html>
Add Route
From the /routes folder, open the web.php file. Then incorporate this route.
//...
Route::get('contact-form', function () {
return view('form');
});
//...
Application Testing
php artisan serve http://127.0.0.1:8000/contact-form
We sincerely hope that this post has assisted you in fully understanding the Laravel 9 Work With Livewire Form Submit Tutorial.
