Laravel 8 Project Home Services - Create Service Categories
In this video, we will learn about creating service categories.
Let's see how we can create service categories.
First of all, let's create a model for service categories.
So, switch to the command prompt and type the command:
php artisan make:model ServiceCategory –m
Now, switch to the project and let's open the migration. Go inside the database directory, then migration, and from here, let's open the service_category migration.
Add some columns here:
public function up()
{
Schema::create('service_categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('slug')->index();
$table->string('image');
$table->timestamps();
});
}
And now, let's migrate this migration. So, switch to the command prompt and type the command:
php artisan migrate
Alright, now let's create a seeder for inserting some records into the service_categories table.
So, in the command prompt, execute the command:
Php artisan make:seeder ServiceCategorySeeder
Now, switch to the project and let's open the ServiceCategorySeeder. And in this file, inside the run method, just write here:
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class ServiceCategorySeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table('service_categories')->insert([
[
"name" => "AC",
"slug" => 'ac',
"image" => "1521969345.png"
],
[
"name"=>"Beauty",
"slug"=>"beauty",
"image"=>"1521969358.png"
],
[
"name"=>"Plumbing",
"slug"=>"plumbing",
"image"=>"1521969409.png"
],
[
"name"=>"Electrical",
"slug"=>"electrical",
"image"=>"1521969419.png"
],
[
"name"=>"Shower Filter",
"slug"=>"shower-filter",
"image"=>"1521969430.png"
],
[
"name"=>"Home Cleaning",
"slug"=>"home-cleaning",
"image"=>"1521969446.png"
],
[
"name"=>"Carpentry",
"slug"=>"carpentry",
"image"=>"1521969454.png"
],
[
"name"=>"Pest Control",
"slug"=>"pest-control",
"image"=>"1521969464.png"
],
[
"name"=>"Chimney Hob",
"slug"=>"chimney-hob",
"image"=>"1521969490.png"
],
[
"name"=>"Water Purifier",
"slug"=>"water-purifier",
"image"=>"1521972593.png"
],
[
"name"=>"Computer Repair",
"slug"=>"computer-repair",
"image"=>"1521969512.png"
],
[
"name"=>"TV",
"slug"=>"tv",
"image"=>"1521969522.png"
],
[
"name"=>"Refrigerator",
"slug"=>"refrigerator",
"image"=>"1521969536.png"
],
[
"name"=>"Geyser",
"slug"=>"geyser",
"image"=>"1521969558.png"
],
[
"name"=>"Car",
"slug"=>"car",
"image"=>"1521969576.png"
],
[
"name"=>"Document",
"slug"=>"document",
"image"=>"1521974355.png"
],
[
"name"=>"Movers & Packers",
"slug"=>"movers-packers",
"image"=>"1521969599.png"
],
[
"name"=>"Home Automation",
"slug"=>"home-automation",
"image"=>"1521969622.png"
],
[
"name"=>"Laundry",
"slug"=>"laundry",
"image"=>"1521972624.png"
],
[
"name"=>"Painting",
"slug"=>"painting",
"image"=>"1521972643.png"
]
]);
}
}
For getting categories images, go to Google search and search for Surfside Media GitHub. Now, let's open this repository and from here, download this file. And unzip it, then copy this directory.
And go to the project directory, then open the public folder, now open the images directory, and paste the categories images directory here.
Now, let's open the DatabaseSeeder.php file and inside the run method, let's call the service category seeder:
Public function run()
{
$this->call([
ServiceCategorySeeder::class
]);
}
Now, let's run this seeder. Before executing the seeder, regenerate Composer's autoload. So, just go to the command prompt and type:
composer dump-autoload
Now, execute the db:seed artisan command in the command prompt:
php artisan db:seed
Alright, now let's create a new Livewire component. So, for creating a new Livewire component, just type the command:
php artisan make:livewire ServiceCategoriesComponent
Now, run the application and go to the project. And let's create a route for this component. So, go to the routes directory, then open the web.php file. Now, here, let's create the route:
Route::get('/service-categories',ServiceCategories::class)->name('home.services_categories');
Now, let's open the ServiceCategories Class file and the layout, and fetch all the service categories like the following:
<?php
namespace App\Http\Livewire;
use App\Models\ServiceCategory;
use Livewire\Component;
class ServiceCategoriesComponent extends Component
{
public function render()
{
$scategories = ServiceCategory::all();
return view('livewire.service-categories-component',['scategories'=>$scategories])->layout('layouts.base');
}
}
Now, let's open the ServiceCategory view file and here, add the code from the template file. So, go to the template directory and open service-categories.html in a text editor. Now, let's copy the code and paste it inside the view file. And paste it inside the ServiceCategoryComponent view file and make some changes in the code like the following:
<div>
<div class="section-title-01 honmob">
<div class="bg_parallax image_01_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>Service Categories</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Service Categories</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="container">
<div class="row" style="margin-top: -30px;">
<div class="titles">
<h2>Service <span>Categories</span></h2>
<i class="fa fa-plane"></i>
<hr class="tall">
</div>
</div>
</div>
<div class="content_info" style="margin-top: -70px;">
<div class="row">
<div class="col-md-12">
<ul class="services-lines full-services">
@foreach($scategories as $scategory)
<li>
<div class="item-service-line">
<i class="fa"><a href="{{route('home.services_by_category',['category_slug'=>$scategory->slug])}}"><img class="icon-img"
src="{{asset('images/categories')}}/{{$scategory->image}}" alt="{{$scategory->name}}"></a></i>
<h5>{{$scategory->name}}</h5>
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="content_info content_resalt">
<div class="container">
<div class="row">
<div class="titles">
</div>
</div>
</div>
</div>
</section>
</div>
Now, let's open the base layout file and inside this file, add the link for Service Categories:
<li> <a href="{{route('home.service_categories')}}">Service Categories</a></li>
Now, all done. So, let's check. Switch to the browser and refresh the page. And here, you can see the link for Service Categories. Now, click on this link. And here, you can see the Service Categories page. Here are all the service categories.
So, in this way, you can create service categories.
