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
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
And now lets migrate this migration so switch to the command prompt
And type the command
Alright now lets create the seeder for inserting some records into the service_categories table
So in command prompt execute the command
No switch to the project and lets open the ServiceCategorySeeder
And in this file inside the run method
Just write here
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
Now Lets Run this Seeders
Before executing seeders regenerate Composer's autoload
So just goto the command prompt and here type
Now ,execute db:seed artisan command in command prompt
Alright, Now lets create a new livewire component
So for creating new livewire component just type the command
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
Now lets open the ServiceCategories Class file and the layout and fetch all the service categories like following
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
Now lets open the base layout file
and inside this file add the link for Service Categories
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
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