Laravel 8 Project Home Services - Admin Create Services Page
In this video, we will learn about creating an Admin Services Page in our Laravel 8 project.
Let's see how we can create a services page for the Admin.
First of all, let's log in with the admin credentials.
Click on the login link and enter the admin email ID, which is admin@surfsidemedia.in, and the password, which is 12345678. Now, click on login.
Now, let's create a new Livewire component.
Switch to the command prompt and execute the following command to create the Livewire component:
php artisan make:livewire admin/AdminServicesComponent
Press enter, and the component will be created.
Now, switch to the project and let's create a route for this component.
Go inside the routes directory and open the web.php file. Inside the admin middleware group, let's create the route:
Route::get('/admin/all-services',AdminServicesComponent::class)->name('admin.all_services');
Now, open the base layout file.
Go inside the resources directory, then views, and layouts. From here, open the base.blade.php file.
Inside this layout file, let's find the admin menu.
Here is the admin menu. Before the logout link, let's create a link for the All Services:
<li><a href="{{route('admin.all_services')}}">All Services</a></li>
Now, let's open the AdminServiceComponent Class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Service;
use Livewire\Component;
use Livewire\WithPagination;
class AdminServicesComponent extends Component
{
use WithPagination;
public function render()
{
$services = Service::paginate(10);
return view('livewire.admin.admin-services-component',['services'=>$services])->layout('layouts.base');
}
}
Alright, now open the admin-category-component.blade.php view file and write the following code:
<div>
<style>
nav svg{
height: 20px;
}
nav .hidden{
display: block !important;
}
</style>
<div class="section-title-01 honmob">
<div class="bg_parallax image_02_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>All Services</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>All Services</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row portfolioContainer">
<div class="col-md-12 profile1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
All Service
</div>
<div class="col-md-6">
<a href="#" class="btn btn-info pull-right">Add New</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Status</th>
<th>Category</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($services as $service)
<tr>
<td>{{$service->id}}</td>
<td><img src="{{asset('images/services/thumbnails')}}/{{$service->thumbnail}}" height="60" /> </td>
<td>{{$service->name}}</td>
<td>{{$service->price}}</td>
<td>
@if($service->status)
Active
@else
Inactive
@endif
</td>
<td>{{$service->category->name}}</td>
<td>{{$service->created_at}}</td>
<td>
<a href="#"><i class="fa fa-edit fa-2x text-info"></i></a>
<a href="#" style="margin-left:10px;"><i class="fa fa-times fa-2x text-danger"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$services->links()}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now it's done. Let's check it.
First, run the application. Switch to the command prompt and type the following command:
Php artisan serve
Now, switch to the browser and refresh the page.
Inside the admin menu, you can see the category link. Now, click on it.
Now, you can see the categories.
So, in this way, you can create an Admin Services Page.
