Laravel Home Services Project - Show Selected Services on Homepage

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

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

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

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

Switch to the command prompt and type the following command:


php artisan make:migration add_featured_to_services_table --table= services

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

In this migration file, add a column by writing the following code:


<?php

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

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

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

Next, migrate the migration by going to the command prompt and typing the following command:


php artisan migrate

Now, run the application by typing the following command:


php artisan serve

Alright, now run the application and switch to the project.

Open the admin-edit-service-component.blade.php view file and add a select control for featured services:


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

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


public $featured;

Inside the mount method, add the following code:


$this->featured = $service->featured;

Inside the updateService method, add the following code:


$service->featured = $this->featured;

After this, open the admin-service-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($service->featured)
	Yes
	@else
	No
	@endif
</td>

Now, 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 services featured.

Edit a service and set featured to yes.

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


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

Return the featured services to the component view.

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


<div class="content_info">
	<div>
		<div class="container">
			<div class="row">
				<div class="titles">
					<h2>SurfsideMedia <span>Choice</span> of Services</h2>
					<i class="fa fa-plane"></i>
					<hr class="tall">
				</div>
			</div>
			<div class="portfolioContainer" style="margin-top: -50px;">   
				@foreach($fservices as $service)                     
				<div class="col-xs-6 col-sm-4 col-md-3 hsgrids"
					style="padding-right: 5px;padding-left: 5px;">
					<a class="g-list" href="{{route('home.service_details',['service_slug'=>$service->slug])}}">
						<div class="img-hover">
							<img src="{{ asset('images/services/thumbnails') }}/{{$service->thumbnail}}" alt="{{$service->name}}"
								class="img-responsive">
						</div>
						<div class="info-gallery">
							<h3>{{$service->name}}</h3>
							<hr class="separator">
							<p>{{$service->tagline}}</p>
							<div class="content-btn"><a href="{{route('home.service_details',['service_slug'=>$service->slug])}}"
									class="btn btn-primary">Book Now</a></div>
							<div class="price"><span>$</span><b>From</b>${{$service->price}}</div>
						</div>
					</a>
				</div>
				@endforeach                                               
			</div>
		</div>
	</div>
</div>