Laravel Favorite System Example

Today now in this example, I will show you that how to apply favorite system in our laravel 8 application. Now here we will do this by using laravel-follow package to apply favorite system in our laravel 8 application. Here we will see Laravel Favorite System Example .

Here we will create a post table with dummy record, to insert dummy record we will create post seeder.

Just need to follow below step to perform favorite system in your laravel 8 application:

Step 1: Install Laravel 8

Now we will create laravel 8 fresh application.

composer create-project --prefer-dist laravel/laravel Favorite

Step 2: Install Package

Now we need to install laravel-follow package for our Favorite system, that way we can use it’s method. So now Open your terminal and run bellow command.

composer require overtrue/laravel-follow -vvv

So now open config/app.php file and add service provider.

config/app.php

'providers' => [
    ....
    Overtrue\LaravelFollow\FollowServiceProvider::class,
]

Publish Assets

After that we need to run migration configure file that we it will automatic generate migrations. So let’s run it.

php artisan vendor:publish --provider="Overtrue\LaravelFollow\FollowServiceProvider" --tag="migrations"

Now just need to migrate it by using following command:

php artisan migrate

Step 3: Create Posts Table

php artisan make:migration create_posts_table

So now add ‘title’ field on posts table:

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
             $table->string('title');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Now after this we need to create model for posts table by following path

App/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Overtrue\LaravelFollow\Traits\CanBeFavorited;

class Post extends Model
{
    use CanBeFavorited;

    protected $fillable = ['title'];
}

Step 4: Create Dummy Posts Seeder

Now we require to create some dummy posts data on database table for testing. So create laravel seed by using bellow command:

php artisan make:seeder CreateDummyPost

Now let’s update CreateDummyPost seeds like as bellow:

database/seeds/CreateDummyPost.php

<?php

use Illuminate\Database\Seeder;
use App\Post;

class CreateDummyPost extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $posts = ['ItSolutionStuff.com', 'Webprofile.me', 'HDTuto.com', 'Nicesnippets.com'];

        foreach ($posts as $key => $value) {
        	Post::create(['title'=>$value]);
        }
    }
}

Now here we need to update our User model. So we need to use CanFavorite facade in User model. So let’s update as bellow code.

App/User.php

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Overtrue\LaravelFollow\Traits\CanFavorite;

class User extends Authenticatable
{
    use Notifiable;
    use CanFavorite;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Step 5: Create Routes

routes/web.php

Add below two routes in your web.php file like :

Route::get('posts', 'HomeController@posts')->name('posts');
Route::post('ajaxRequest', 'HomeController@ajaxRequest')->name('ajaxRequest');

Now in your HomeController, we will add two new method posts() and ajaxRequest(). so let’s see HomeController look like as bellow:

app/Http/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use App\User;

class HomeController extends Controller
{
	/**
	* Create a new controller instance.
	*
	* @return void
	*/
	public function __construct()
	{
		$this->middleware('auth');
	}

	/**
	* Show the application dashboard.
	*
	* @return \Illuminate\Contracts\Support\Renderable
	*/
	public function index()
	{
		return view('home');
	}

	/**
	* Show the application dashboard.
	*
	* @return \Illuminate\Http\Response
	*/
	public function posts()
	{
		$posts = Post::get();
		return view('posts', compact('posts'));
	}

	/**
	* Show the application dashboard.
	*
	* @return \Illuminate\Http\Response
	*/
	public function ajaxRequest(Request $request){

		$post = Post::find($request->id);
		$response = auth()->user()->toggleFavorite($post);

		return response()->json(['success'=>$response]);
	}
}

Step 6: Create Blade files and CSS File

Now in this step i will create posts.blade.php file and custom.css file. So let’s create both files.

resources/views/posts.blade.php

@extends('layouts.app')


@section('content')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<meta name="csrf-token" content="{{ csrf_token() }}" />


<link href="{{ asset('css/custom.css') }}" rel="stylesheet">
<div class="container" style="background-color: pink">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="text-center" style="color: red;"><h3>Laravel Favorite System Example</h3></div>
                <div class="card-body">
                    @if($posts->count())
                        @foreach($posts as $post)
                            <article class="col-xs-12 col-sm-6 col-md-3">
                                <div class="panel panel-info" data-id="{{ $post->id }}">
                                    <div class="panel-body">
                                        <a href="https://itsolutionstuff.com/upload/itsolutionstuff.png" title="Nature Portfolio" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox">
                                            <img src="https://itsolutionstuff.com/upload/itsolutionstuff.png" alt="Nature Portfolio" />
                                            <span class="overlay"><i class="fa fa-search"></i></span>
                                        </a>
                                    </div>  
                                    <div class="panel-footer">
                                        <h4><a href="#" title="Nature Portfolio">{{ $post->title }}</a></h4>
                                        <span class="pull-right">
                                            <span class="like-btn">
                                                <i id="like{{$post->id}}" class="glyphicon glyphicon-heart {{ $post->favoriters()->count() > 0  ? 'like-post' : '' }}"></i>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {     


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $('i.glyphicon-heart, i.glyphicon-heart-empty').click(function(){    
            var id = $(this).parents(".panel").data('id');
            var cObjId = this.id;
            var cObj = $(this);

            $.ajax({
               type:'POST',
               url:'/ajaxRequest',
               data:{id:id},
               success:function(data){
                  if(jQuery.isEmptyObject(data.success.attached)){
                    $(cObj).removeClass("like-post");
                  }else{
                    $(cObj).addClass("like-post");
                  }
               }
            });


        });      


        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });                                        
    }); 
</script>
@endsection

publis/css/custom.css

.panel {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 0 !important;
}
.panel-body {
	width: 100%;
	height: 100%;
	padding: 15px 8px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.panel-body .overlay {
	position: absolute;
	overflow: hidden;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #FFF;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	-ms-transform: scale(0,1);
	transform: scale(0,1);
}
.panel-body .overlay i{
	opacity: 0;
}
.panel-body a:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.panel-body a:hover img {
	filter: brightness(0.6);
	-webkit-filter: brightness(0.6);
}
.like-btn{
	background: #3399ff none repeat scroll 0 0;
	border-radius: 3px;
	color: white;
	padding: 7px 3px 3px 7px;
	margin-right: 5px;
	margin-top: -5px;
}
.like-btn i,.dislike-btn i{
	color: white;
}
.dislike-btn{
	background: #FA4E69 none repeat scroll 0 0;
	border-radius: 3px;
	color: white;
	padding: 7px 5px 3px 3px;
	margin-top: -5px;
}
h2 {
	padding: 15px;
	font-family: calibri;
	display: inline-block;
}
.panel .panel-body a {
	overflow: hidden;
}
.panel .panel-body a img {
	display: block;
	margin: 0;
	width: 100%;
	height: auto;
}
.panel .panel-body a:hover span.overlay {
	display: block;
	visibility: visible;
	opacity: 0.55;
	-moz-opacity: 0.55;
	-webkit-opacity: 0.55;
}
.panel .panel-body a:hover span.overlay i {
	position: absolute;
	top: 45%;
	left: 0%;
	width: 100%;
	font-size: 2.25em;
	color: #fff !important;
	text-align: center;
	opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
}
.panel .panel-footer {
	padding: 8px !important;
	background-color: #f9f9f9 !important;
	border:0px;
}
.panel .panel-footer h4 {
	display: inline;
	font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif;
	color: #34495e margin: 0 !important;
	padding: 0 !important;
	font-size: 12px;
}
.panel .panel-footer h4 a{
	padding: 4px 7px;
	text-decoration: none;
}
.panel .panel-footer h4 a:hover{
	background-color: #69a8d4;
	color: white;
	border-radius: 2px;
	transition: all 0.4s;
}
.panel .panel-footer i.glyphicon {
	display: inline;
	font-size: 1.125em;
	cursor: pointer;
	padding-right: 7px;
}
.panel .panel-footer i.glyphicon-thumbs-down {
	color: #e74c3c;
	padding-left: 5px;
	padding-right: 5px;
}
.panel .panel-footer div {
	width: 15px;
	display: inline;
	font: 300 normal 1.125em "Roboto",Arial,Verdana,sans-serif;
	color: white !important;
	text-align: center;
	background-color: transparent !important;
	border: none !important;
}
.like-post{
	color: #e21309 !important;
}

Read Also : Laravel 8 Get Request Parameters in Controller

Thanks for read. I hope it help you. For more you can follow us on facebook.