In this video we are going to learn about Create Contact Page.
So let see how can we create contact page.
First of all lets create two new livewire component.
So switch to the command prompt and for creating new livewire component just type the command.
Now create a model.
For creating model run the command
Now lets open the create_contacts_table migration and add the following code.
Now create the route. So go to the web.php file and here lets create new route.
Now inside the Admin middleware route group create the route for AdminContactComponent.
Now go to the ContactComponent.php class file and here lets add the following code.
Now lets open the contact-component.blade.php view file and write the following code.
Now open the AdminContactCoomponent.php Class file and write the following code.
Now open the admin-contact-component.blade.php view file and here lets add the following code.
Now lets add the conatct-us link in base.blade.php layout file.
Also add the AdminContactComponent link inside the amdmin menu.
Now lets check it.
So switch to the browser and go to the coantact-us page.
Now enter the name, email phone and comments
Now click on submit
And here you see message sent successfully.
Now lets check the submitted contacts.
So go to the admin menu and you can see her link contact us message.
Now click on it.
And here you can see the messages.
So in this way you can Create Contact Page.
So let see how can we create contact page.
First of all lets create two new livewire component.
So switch to the command prompt and for creating new livewire component just type the command.
php artisan make:livewire ContactComponent
Php artisan make:livewire AdminContactComponent
Now create a model.
For creating model run the command
php artisan make:model Contact -m
Now lets open the create_contacts_table migration 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');
}
}
Now create the route. So go to the web.php file and here lets create new route.
Route::get('/contact-us',ContactComponent::class)->name('contact');
Now inside the Admin middleware route group create the route for AdminContactComponent.
Route::get(‘/admin/contact’,AdminContactComponent::class)->name(‘admin.contact’);
Now go to the ContactComponent.php class file and here lets 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');
}
}
Now lets 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>
Now open the AdminContactCoomponent.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');
}
}
Now open the admin-contact-component.blade.php view file and here lets 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>
Now lets add the conatct-us link in 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 the AdminContactComponent link inside the amdmin menu.
<li class=\"menu-item\">
<a title=\"Contact Us Messages\" href=\"{{route('admin.contacts')}}\">Contact Us Messages</a>
</li>
Now lets check it.
So switch to the browser and go to the coantact-us page.
Now enter the name, email phone and comments
Now click on submit
And here you see message sent successfully.
Now lets check the submitted contacts.
So go to the admin menu and you can see her link contact us message.
Now click on it.
And here you can see the messages.
So in this way you can Create Contact Page.
