Skip to content

All topics  /  Laravel

Laravel Favorite System Example

Laravel ·

Teams applying “Laravel Favorite System Example” in a production project can use this practical overview to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

hii guys,

In this example,I will show you that how to apply favorite system in laravel 6 application.

Here we will use laravel-follow package to apply favorite system in our laravel 6 application.

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

Follow below step to perform favorite system in your laravel 6 application :

Step 1: Install Laravel 6


you will create laravel 6 fresh application. 

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

Step 2: Install Package

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

composer require overtrue/laravel-follow -vvv

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. 

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

Then just migrate it by using following command: 

php artisan migrate

Step 3: Create Posts Table 

php artisan make:migration create_posts_table

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');
    }
}

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 so create laravel seed 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]);
        }
    }
}

here we need to update User model. 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 HomeController, we will add two new method posts() and ajaxRequest(). so let's see HomeController 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 we 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;
}

It will help you....

More on this topic