
Laravel is one of the most commonly used PHP frameworks, providing us with many packages to use and saving time to build any website. Today in this article we will see how to install livewire in Laravel 10. Livewire is used to build a website frontend and backend. It’s very simple and easy to use. So we will see how to install Livewire and create a component for the contact page by using Livewire.
1: Creating a new Laravel Project
2: Installing Livewire
3: Creating Component
4: Creating a migration
5: Storing data and fetching data
Firstly we need a Laravel fresh project, so run the given command to create a project.
Composer create-project Laravel/Laravel LivewireInstall
For installing livewire run the given command and install livewire.
composer require livewire/livewire
After installation add @livewireStyles in head section after that add @livewireScripts in body section. With out these file you cant access properly livewire.
So here we will create a component for contact form, and create form for contact. Run the given command to create component.
Php artisan make:livewire ContactComponent
Open created component in your favourite code editor, Resources/views/livewire/ContactComponent.
And paste the given code in it.
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="mb-3">
<div class="card">
<div class="card-header">
<h2 class="text-center text-light pt-2 pb-2 bg-info">Contact Messages</h2>
</div>
<div class="card-header">
<table class="table">
<thead>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</thead>
<tbody>
@foreach ($contact as $message)
<tr>
<td>{{$message->name}}</td>
<td>{{$message->email}}</td>
<td>{{$message->message}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="text-center text-light pt-2 pb-2 bg-info">Contact Us</h2>
</div>
<div class="card-body">
@if (Session::has('message'))
<div class="alert alert-success">
<strong>
{{ Session::get('message') }}
</strong>
</div>
@endif
<form wire:submit.prevent="storeMessage">
<div class="form-group mb-3">
<input type="text" name="name" placeholder="name" wire:model="name" id=""
class="form-control">
@error('name')
<p class="text-danger">{{ $message }}</p>
@enderror
</div>
<div class="form-group mb-3">
<input type="email" placeholder="email" name="email" wire:model="email" id=""
class="form-control">
@error('email')
<p class="text-danger">{{ $message }}</p>
@enderror
</div>
<div class="form-group mb-3">
<textarea name="message" class="form-control" wire:model="message" id="" cols="30" rows="10"></textarea>
@error('message')
<p class="text-danger">{{ $message }}</p>
@enderror
</div>
<button type="submit" class="btn btn-info form-control">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
So we need a model and migration to store data into database and fetching to show on view file.
Run the given command to creating migration and model.
Php artisan make:model Contact -m
After creating migration update with given code.
$table->string('name');
$table->string('email');
$table->text('message');
$table->timestamps();
So the last step is to store data and show on view file. Update your ContactComponent with given code. Which is available in App\Http\Livewire\ContactComponent.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Contact;
class ContactComponent extends Component
{
public $name;
public $email;
public $message;
public function updated($fields){
$this->validateOnly($fields,[
'name'=>'required',
'email' =>'required',
'message' => 'required'
]);
}
public function storeMessage(){
$this->validate([
'name'=>'required',
'email' =>'required',
'message' => 'required'
]);
$contact = new Contact;
$contact->name = $this->name;;
$contact->email = $this->email;
$contact->message = $this->message;
$contact->save();
session()->flash('message', 'Your message is sended!');
}
public function render()
{
$contact = Contact::all();
return view('livewire.contact-component',['contact'=>$contact]);
}
}
Run this project and test it.
PHP artisan serve
No Comments Yet.