In this video we are going to learn about Create Service Categories
So let see how can we Create Service Categories
First of all lets create 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 lets open the migration
So go inside the database directory then migration
And from here lets open this service_category migration
Add some column 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 lets migrate this migration so switch to the command prompt
And type the command

php artisan migrate

Alright now lets create the seeder for inserting some records into the service_categories table
So in command prompt execute the command

Php artisan make:seeder ServiceCategorySeeder

No switch to the project and lets 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 image
Go to the google search Surfside Media github
Now lets open this repository and from here download this file
And unzip this after this copy this directory
And go to the project directory then open public folder now open this images directory and paste here the categories images directory

Now lets open the DatabaseSeeder.php file
And inside the run method lets call the service category seeder

Public function run()
{
	$this->call([
		ServiceCategorySeeder::class
	]);
}

Now Lets Run this Seeders
Before executing seeders regenerate Composer's autoload
So just goto the command prompt and here type

composer dump-autoload

Now ,execute db:seed artisan command in command prompt

php artisan db:seed

Alright, Now lets create a new livewire component
So for creating new livewire component just type the command

php artisan make:livewire ServiceCategoriesComponent

Now run the application and go to the project
And lets create the route for this component
So go to the routes directory then open web.php file
Now here lets create the route

Route::get(‘/service-categories’,ServiceCategories::class)->name(‘home.services_categories’);

Now lets open the ServiceCategories Class file and the layout and fetch all the service categories like 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 lets open the ServiceCategory view file and here add the code from template file
so go to the template directory and open service-categories.html in text editor
Now lets copy the code and pate inside the view file
And paste inside the ServiceCategoryComponent view file and make some changes in code like 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 lets 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 lets check so 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 service categories
So in this way you can create the service categories