Laravel Home Services Project - Show Selected Service Categories on Homepage

In this video, we will learn about displaying selected service categories on the homepage of our Laravel project.

Let's see how we can show selected service categories on the homepage.

First, we need to add a new column to the service_categories table.

To do this, we will create a new migration to add the new column.

Switch to the command prompt and run the following command:


php artisan make:migration add_featured_to_service_categories_table --table= service_categories

Now, switch to the project and open the newly created migration file.

Add the following code to this migration file:


<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddFeaturedToServiceCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('service_categories', function (Blueprint $table) {
            $table->boolean('featured')->default(false);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('service_categories', function (Blueprint $table) {
            $table->dropColumn('featured');
        });
    }
}

Next, migrate the migration by running the following command:


php artisan migrate

Alright, now run the application by running the following command:


php artisan serve

Now, switch to the project and open the admin-edit-service-category-component.blade.php view file.

Inside this file, add a select control for featured services:


<div class="form-group">
	<label for="featured" class="control-label col-sm-3">Featured: </label>
	<div class="col-sm-9">
		<select class="form-control" name="featured" wire:model="featured">
			<option value="0">No</option>
			<option value="1">Yes</option>
		</select>                                                
	</div>
</div>

Next, go to the AdminEditServiceCategoryComponent.php class file and add a property:


public $featured;

Inside the mount method, add the following code:


$this->featured = $ scategory >featured;

Inside the updateServiceCategory method, write the following code:


$scategory->featured = $this->featured;

Now, open the admin-service-category-component.blade.php view file and display the featured column by adding the following code inside the table:


//in table head section
<th>Featured</th>

//in table body seciton 
<td>
	@if($scategory->featured)
		Yes
	@else
		No
	@endif
</td>

Let's check the result.

Switch to the browser and go to the all services page.

You will see the featured column.

Now, let's make some service categories featured.

Edit a service category and set featured to yes, then update.

Next, open the HomeComponent.php class file and inside the render method, write the following code:


$fscecategories = ServiceCategory::where('featured',1)->inRandomOrder()->take(8)->get();

Return the featured service categories to the component view.

Now, open the home-component.blade.php view file and add the following code:


<div class="content_info">
	<div class="bg-dark color-white border-top">
		<div class="container">
			<div class="row">
				<div class="col-md-4 ">
					<div class="services-lines-info">
						<h2>WELCOME TO SurfsideMedia</h2>
						<p class="lead">
							Book best services at one place.
							<span class="line"></span>
						</p>

						<p>Find a wide variety of home services.</p>
					</div>
				</div>
				<div class="col-md-8">
					<ul class="services-lines">   
						@foreach($fscategories as $fscategory)                             
						<li>
							<a href="{{route('home.services_by_category',['category_slug'=>$fscategory->slug])}}">
								<div class="item-service-line">
									<i class="fa"><img class="icon-img"
											src="{{ asset('images/categories') }}/{{$fscategory->image}}"></i>
									<h5>{{$fscategory->name}}</h5>
								</div>
							</a>
						</li>
						@endforeach                                
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>