Home Laravel How To Submit From By Using Laravel 9 Livewire ?

How To Submit From By Using Laravel 9 Livewire ?

by Shahriar Sagor

Hello Dev, Today now in this simple article demonstrates of laravel 9 livewire form the submit example. Now in this article, i will implement a create form with laravel 9 livewire. So here i will use the laravel 9 livewire tutorial. Then in this article i will give i simple example of install livewire to laravel 9. Here i will show you How To Submit From By Using Laravel 9 Livewire ?

Let’s start the example.

Step 1: Install Laravel

At first of all we have to get the fresh Laravel version application by using the bellow command. So open your terminal OR command prompt and then run the bellow command:

composer create-project laravel/laravel example-app
Step 2: Create Migration and Model

Here, i have to create database migration for contacts table and also i will create the model for contacts table.

php artisan make:migration create_contacts_table
Migration:
<?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');
    }
};
php artisan migrate

now i will create the Contact model by using the following command:

php artisan make:model Contact
App/Models/Contact.php
<?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'
    ];
}
Step 3: Install Livewire

Now in this step, i will simply install the livewire to our laravel application by using the bellow command:

composer require livewire/livewire
Step 4: Create Component

Now here i will create the livewire component by using their command. So run the bellow command to create contact us form component.

php artisan make:livewire contact-form

Now it created files on the both path:

app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php

Now both file i will update as like as bellow for our contact us form.

app/Http/Livewire/ContactForm.php

<?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('/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 5: Create Route

now i will create one route for calling our example, So let’s add the new route to web.php file as like as bellow:

routes/web.php

Route::get('/form', function () {
    return view('form');
});
Step 6: Create View File

here, i will create blade file for call form route. Now in this file i will use the @livewireStyles, @livewireScripts and @livewire(‘contact-form’). so start and 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 class="container">
  
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example - CodingsPoint.com
      </div>
      <div class="card-body">
        @livewire('contact-form')
      </div>
    </div>
      
</div>
  
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like