
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.