Ở đây thư viện giao diện mình sử dụng là bootstrap nhé.
Bước 1: Tạo bảng dữ liệu “like_web”
CREATE TABLE `lieke_web` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`details` text COLLATE utf8_unicode_ci NOT NULL,
`image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`like_num` bigint(10) NOT NULL,
`dislike_num` bigint(10) NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci
Nhập dữ liệu mẫu vào bảng “like_web”
d1
Bước 2: Tạo class like với file like.php
Trong bước này mình tạo class like với các hàm xử lý như như kết nối CSDL, insert, update dữ liệu lấy dữ liệu này như sau:
<?php
class Like{
function __construct(){
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'dbtest';
$con = mysql_connect($db_host, $db_user, $db_pass);
mysql_select_db($db_name, $con);
}
function get_rows($id = ''){
if($id != ''){
$query = mysql_query("SELECT * FROM like_web WHERE id = $id");
$data = mysql_fetch_assoc($query);
}else{
$query = mysql_query("SELECT * FROM like_web");
while($row = mysql_fetch_assoc($query)){
$data[] = $row;
}
}
return $data;
}
function insert($data = array()){
$data_array_num = count($data);
$columns = "";
$values = "";
$i=0;
foreach($data as $key=>$val){
$i++;
$sep = ($i == $data_array_num)?"":", ";
$columns .= $key.$sep;
$values .= $val.$sep;
}
$insert = mysql_query("INSERT INTO like_web ($columns) VALUES ($values)");
return $insert?TRUE:FALSE;
}
function update($data = array(), $conditions = array()){
$data_array_num = count($data);
$cols_vals = "";
$condition_str = "";
$i=0;
foreach($data as $key=>$val){
$i++;
$sep = ($i == $data_array_num)?'':', ';
$cols_vals .= $key."='".$val."'".$sep;
}
foreach($conditions as $key=>$val){
$i++;
$sep = ($i == $data_array_num)?"":" AND ";
$condition_str .= $key."='".$val."'";
}
$update = mysql_query("UPDATE like_web SET $cols_vals WHERE $condition_str");
return $update?TRUE:FALSE;
}
}
?>
Bướ 3: Trình bày file “index.php” với nội dung sau
<?php
include_once("like.php");
$liek_web = new Like();
$trows = $liek_web->get_rows();
?>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Like và Dislike sử dung jQuery, Ajax và PHP</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.row{ margin:20px 20px 20px 20px;}
.ratings{ font-size:25px !important;}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
.glyphicon-thumbs-up:hover{ color:#008000; cursor:pointer;}
.glyphicon-thumbs-down:hover{ color: #E10000; cursor:pointer;}
.counter{ color:#333333;}
.thumbnail img{height:200px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function cwRating(id,type,target){
$.ajax({
type:'POST',
url:'rating.php',
data:'id='+id+'&type='+type,
success:function(msg){
if(msg == 'err'){
alert('Một số vấn đề xảy ra, xin vui lòng thử lại.');
}else{
$('#'+target).html(msg);
}
}
});
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<?php foreach($trows as $trow){ ?>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="<?php echo 'images/'.$trow['image']; ?>" alt="" />
<div class="caption">
<h4><a href="javascript:void(0);"><?php echo $trow['title']; ?></a></h4>
</div>
<div class="ratings">
<p class="pull-right"></p>
<p>
<!-- Like Icon HTML -->
<span class="glyphicon glyphicon-thumbs-up" onClick="cwRating(<?php echo $trow['id']; ?>,1,'like_count<?php echo $trow['id']; ?>')"></span>
<!-- Like Counter -->
<span class="counter" id="like_count<?php echo $trow['id']; ?>"><?php echo $trow['like_num']; ?></span>
<!-- Dislike Icon HTML -->
<span class="glyphicon glyphicon-thumbs-down" onClick="cwRating(<?php echo $trow['id']; ?>,0,'dislike_count<?php echo $trow['id']; ?>')"></span>
<!-- Dislike Counter -->
<span class="counter" id="dislike_count<?php echo $trow['id']; ?>"><?php echo $trow['dislike_num']; ?></span>
</p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
Bước 4: tạo file rating.php với nội dung
<?php
include_once("like.php");
$liek_web = new Like();
if($_POST['id']){
//lấy dữ liệu trong CSDL ra theo ID
$prev_record = $liek_web->get_rows($_POST['id']);
//Tổng thích
$prev_like = $prev_record['like_num'];
//Tổng ko thích
$prev_dislike = $prev_record['dislike_num'];
//tính toán số lượng như thích với không thích
if($_POST['type'] == 1){
$like = ($prev_like + 1);
$dislike = $prev_dislike;
$return_count = $like;
}else{
$like = $prev_like;
$dislike = ($prev_dislike + 1);
$return_count = $dislike;
}
$data = array('like_num'=>$like,'dislike_num'=>$dislike,'modified'=>date("Y-m-d H:i:s"));
$condition = array('id'=>$_POST['id']);
//update dữ liệu
$update = $liek_web->update($data,$condition);
//trả lại dữ liệu
echo $update?$return_count:'err';
}
?>
Trên đây là hướng dẫn về xây dựng ứng dụng like và Unlike với PHP và MySQL.
0 nhận xét: