Laravel 8 E-Commerce - Create Contact Page
In this video, we will learn about creating a contact page for our e-commerce application.
Let's explore how to create a contact page that allows users to send messages to the administrator.
First, we need to create two new Livewire components.
Switch to the command prompt and run the following command to create a new Livewire component:
php artisan make:livewire ContactComponent
Php artisan make:livewire AdminContactComponent
Next, create a model by running the following command:
php artisan make:model Contact -m
Now, open the create_contacts_table migration file and add the following code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateContactsTable 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->string('phone');
$table->text('comment');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
Create a new route by going to the web.php file and adding the following code:
Route::get('/contact-us',ContactComponent::class)->name('contact');
Inside the Admin middleware route group, create a new route for the AdminContactComponent:
Route::get('/admin/contact',AdminContactComponent::class)->name('admin.contact');
Go to the ContactComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire;
use App\Models\Contact;
use App\Models\Setting;
use Livewire\Component;
class ContactComponent extends Component
{
public $name;
public $email;
public $phone;
public $comment;
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'email' => 'required|email',
'phone' => 'required',
'comment' => 'required'
]);
}
public function sendMessage()
{
$this->validate([
'name' => 'required',
'email' => 'required|email',
'phone' => 'required',
'comment' => 'required'
]);
$contact = new Contact();
$contact->name = $this->name;
$contact->email = $this->email;
$contact->phone = $this->phone;
$contact->comment = $this->comment;
$contact->save();
session()->flash('message','Thanks, Your message has been sent successfully!');
}
public function render()
{
return view('livewire.contact-component')->layout('layouts.base');
}
}
Open the contact-component.blade.php view file and write the following code:
<div>
<main id="main" class="main-site left-sidebar">
<div class="container">
<div class="wrap-breadcrumb">
<ul>
<li class="item-link"><a href="/" class="link">home</a></li>
<li class="item-link"><span>Contact us</span></li>
</ul>
</div>
<div class="row">
<div class=" main-content-area">
<div class="wrap-contacts ">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="contact-box contact-form">
<h2 class="box-title">Leave a Message</h2>
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form name="frm-contact" wire:submit.prevent="sendMessage">
<label for="name">Name<span>*</span></label>
<input type="text" value="" id="name" name="name" wire:model="name" >
@error('name') <p class="text-danger">{{$message}}</p> @enderror
<label for="email">Email<span>*</span></label>
<input type="text" value="" id="email" name="email" wire:model="email" >
@error('email') <p class="text-danger">{{$message}}</p> @enderror
<label for="phone">Number Phone</label>
<input type="text" value="" id="phone" name="phone" wire:model="phone" >
@error('phone') <p class="text-danger">{{$message}}</p> @enderror
<label for="comment">Comment</label>
<textarea name="comment" id="comment" wire:model="comment" ></textarea>
@error('comment') <p class="text-danger">{{$message}}</p> @enderror
<input type="submit" name="ok" value="Submit" >
</form>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="contact-box contact-info">
<div class="wrap-map">
<iframe src="#" width="100%" height="320" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<h2 class="box-title">Contact Detail</h2>
<div class="wrap-icon-box">
<div class="icon-box-item">
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="right-info">
<b>Email</b>
<p>Support1@yourcompany.com</p>
</div>
</div>
<div class="icon-box-item">
<i class="fa fa-phone" aria-hidden="true"></i>
<div class="right-info">
<b>Phone</b>
<p>0123-465-789-111</p>
</div>
</div>
<div class="icon-box-item">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<div class="right-info">
<b>Mail Office</b>
<p>Sed ut perspiciatis unde omnis<br />Street Name, Los Angeles</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--end main products area-->
</div><!--end row-->
</div><!--end container-->
</main>
</div>
Open the AdminContactComponent.php class file and write the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Contact;
use Livewire\Component;
class AdminContactComponent extends Component
{
public function render()
{
$contacts = Contact::paginate(12);
return view('livewire.admin.admin-contact-component',['contacts'=>$contacts])->layout('layouts.base');
}
}
Open the admin-contact-component.blade.php view file and add the following code:
<div>
<div class="container" style="padding: 30px 0">
<style>
nav svg{
height: 20px;
}
nav.hidden{
display: block !important;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Contact Messages
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Comment</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
@php
$i = 1;
@endphp
@foreach($contacts as $contact)
<tr>
<td>{{$i++}}</td>
<td>{{$contact->name}}</td>
<td>{{$contact->email}}</td>
<td>{{$contact->phone}}</td>
<td>{{$contact->comment}}</td>
<td>{{$contact->created_at}}</td>
</tr>
@endforeach
</tbody>
</table>
{{$contacts->links()}}
</div>
</div>
</div>
</div>
</div>
</div>
Add a "Contact Us" link to the base.blade.php layout file:
<li class="menu-item">
<a href="/contact-us" class="link-term mercado-item-title">Contact Us</a>
</li>
Also, add a link to the AdminContactComponent inside the admin menu:
<li class="menu-item">
<a title="Contact Us Messages" href="{{route('admin.contacts')}}">Contact Us Messages</a>
</li>
Let's test the contact page.
Switch to your browser and go to the "Contact Us" page.
Enter your name, email, phone number, and comments:
Click on submit.
You should see a message indicating that your message was sent successfully.
Let's check the submitted contacts.
Go to the admin menu and click on the "Contact Us Messages" link.
You should see the messages that were submitted.
And that's how you can create a contact page for your e-commerce application.
