FACEBOOK LIKE SYSTEM
In this post we will learn how to create a facebook like system for users . We will assume users are liking a post and we will have a basic design . You can get the design by clicking here . We will use ladda for button spin effect and bootstrap for basic layout design . Download and extract ladda , create a new folder inside public/assets directory named ladda and copy paste dist directory which you will find inside extracted folder . Create new styles.css inside public/assets folder and paste below content .
body
{
padding-top: 20px;
background-color: #F7F7F7;
}
.post
{
background-color: #FFF;
overflow: hidden;
box-shadow: 0 0 1px #CCC;
}
.post img
{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
.post .content
{
padding: 15px;
}
.post .author
{
font-size: 11px;
color: #737373;
padding: 25px 30px 20px;
}
.post .post-img-content
{
height: 196px;
position: relative;
}
.post .post-img-content img
{
position: absolute;
}
.post .post-title
{
display: table-cell;
vertical-align: bottom;
z-index: 2;
position: relative;
}
.post .post-title b
{
background-color: rgba(51, 51, 51, 0.58);
display: inline-block;
margin-bottom: 5px;
color: #FFF;
padding: 10px 15px;
margin-top: 5px;
}
MIGRATIONS
Lets first create our database schema and table using Migrations. Create a migration using below command in command prompt.
php artisan migrate:make create_likes_table
Now go to app/database/migrations and open our newly created migration . In the up method paste below code
xxxx_xx_xx_xxxxxx_create_likes_table.php
Schema::create('likes', function($t) {
$t -> increments('id');
$t -> integer('user_id');
$t -> integer('post_id');
// created_at, updated_at DATETIME
$t -> timestamps();
});
In above code, we are creating Likes table using a create method of Schema Class . We are creating five columns . First column will be auto-increment id, the second column is user_id which will be used to track which user liked which post , third is post_id and last two columns are default laravel timestamps (updated_at , created_at ).
Run Migrations
php artisan migrate
CREATING VIEW
/views/index.blade.php
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="/assets/styles.css" rel="stylesheet"/>
<link rel="stylesheet" href="/assets/ladda/dist/ladda-themeless.min.css">
<script src="/assets/ladda/dist/spin.min.js"></script>
<script src="/assets/ladda/dist/ladda.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="https://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b>
<br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">
January 20th, 2014
</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<a href="#" id="like_1" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="https://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b>
<br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">
January 20th, 2014
</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
<a href="#" id="like_2" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="https://placehold.it/460x250/47A447/ffffff&text=jQuery" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b>
<br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">
January 20th, 2014
</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<a href="#" id="like_3" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('.ajax-like').click(function(e) {
e.preventDefault();
var l = Ladda.create(this);
var id=$(this).attr("id");
l.start();
$.post("/like", {
"post_id" : $(this).attr("id")
}, function(response) {
if(response.result!=null&&response.result=="1"){
if(response.isunlike=="1"){
$("#"+id).removeClass("btn-success");
$("#"+id).addClass("btn-danger");
$("#"+id).html(response.text);
}else{
$("#"+id).removeClass('btn-danger');
$("#"+id).addClass("btn-success");
$("#"+id).html(response.text);
}
}else{
alert("Server Error");
}
}, "json").always(function() {
l.stop();
});
return false;
});
});
</script>
</body>
</html>
In the above code, we replaced read more button with Like Button. We have given a unique id for each like button. Let’s break our javascript code.
$('.ajax-like').click(function(e) {});
It will listen for a click on elements with class ajax-like. We assigned an ajax-like class to all like buttons to track click.
var l = Ladda.create(this);
l.start();
It will start our spinning Ladda effect. We have assigned slide-right effect to all like buttons. I recommend you to check other parameters we can use in Ladda by clicking here.
var id=$(this).attr("id");
It will get id attribute of our clicked element . It’s pattern will be like_* .
$.post("/like", {
"post_id" : $(this).attr("id")
}, function(response) {
if(response.result!=null&&response.result=="1"){
if(response.isunlike=="1"){
$("#"+id).removeClass("btn-success");
$("#"+id).addClass("btn-danger");
$("#"+id).html(response.text);
}else{
$("#"+id).removeClass('btn-danger');
$("#"+id).addClass("btn-success");
$("#"+id).html(response.text);
}
}else{
alert("Server Error");
}
}, "json").always(function() {
l.stop();
});
It will send post request to our server at /like URI with post data (post_id) and set the response type to json . Once we get the response we will check if response.result is not null or not 0 then we get the isunlike field which will tell us which class to set for our like button. If unlike is 1 we assign btn-danger class to our button and set html to response.text . If unlike is 0 then we are assigning btn-success to our like button . Whether our request was successful or not we will stop ladda effect using l.stop .
Our routes file will have only two route’s first is for index page and second is for ajax request
Route::get('/', 'LikeController@index');
Route::post('/like', 'LikeController@like');
Route::post('/unlike', 'LikeController@unlike');
MODELS
We will only have one model which will linked to likes table .
Likes.php
class Likes extends Eloquent {
protected $table = 'likes';
}
}
CONTROLLERS
Create a new Controller named LikeController.php . Its a good practice to name your controllers like xxxxController .
LikeController.php
class LikeController extends BaseController {
public function __construct() {
//We will implement Filters later
//$this -> beforeFilter('csrf', array('on' => 'post'));
//I will not implement login system here since its already covered
//in our secure login system series you can download the code from there
}
public function index(){
return View::make('index');
}
public function like(){
if(Input::has("post_id")){
$post_id=explode("_",Input::get("post_id"));
//Find if user already liked the post
if(Likes::where("post_id",$post_id[1])->where("user_id","1")->count()>0){
Likes::where("post_id",$post_id[1])->where("user_id","1")->delete();
return Response::json(array("result"=>"1","isunlike"=>"0","text"=>"Like"));
}else{
$like=new Likes();
//We are using hardcoded user id for now , in production change
//it to Sentry::getId() if using Sentry for authentication
$like->user_id="1";
$like->post_id=$post_id[1];
$like->save();
return Response::json(array("result"=>"1","isunlike"=>"1","text"=>"unlike"));
}
return Response::json(array("result"=>"1","isunlike"=>"1","text"=>"unlike"));
}else{
//No post id no access sorry
return Response::json(array("result"=>"0"));
}
}
}
Now let’s break down our like method.
$post_id=explode("_",Input::get("post_id"));
Above code will break our string using _ as a delimiter and returns an array of all sub-strings.
if(Likes::where("post_id",$post_id[1])->where("user_id","1")->count()>0)
Our if condition will check user already liked the post or not if the user already liked then delete the like entry or else put the entry in the table.
return Response::json(array("result"=>"1","isunlike"=>"0","text"=>"Like"));
If the user already liked the post then delete the like entry and send JSON as a response using Response::json . Our JSON contains result =”1″ which mean request is successful, isunlike=”0″ which means user didn’t request to, unlike the post.
No Comments
Leave a comment Cancel