Quảng cáo

Code hệ thống Like & Unlike bằng PHP, MySQL và jQuery

Hướng dẫn cách tạo hệ thống Like và Unlike giống Youtube bằng PHP, MySQL và jQuery (Full code Like & Unlike)

Để tạo được hệ thống đánh giá của người dùng bằng các nút Like và Unlike giống như hệ thống Like & Dislike của Youtube, chúng ta sẽ kết hợp giữa PHP, MySQL và jQuery.
Kịch bản của script này sẽ như sau: Một trang hiển thị các bài viết có nút Like, Unlike cùng với các số liệu Like & Unlike. Khi người dùng nhấp vào các nút Like/Unlike thì hệ thống sẽ kiểm tra xem người dùng đã thực hiện hành động như Like/Unlike trước đó chưa? Nếu đã có thì sẽ cập nhật thông tin dữ liệu (Trước đó mà Like, sau đó nhấp vào Unlike thì sẽ trừ số lượt Like và cộng số lượt Unlike. Tương tự với chiều ngược lại). Nếu chưa thực hiện hành động bao giờ thì sẽ ghi mới dữ liệu. Vì hệ thống này chúng ta sẽ không tạo bảng cơ sở dữ liệu do đó chúng ta sẽ sử dụng

Cơ sở dữ liệu lưu trữ lượt Like & Unlike

Đầu tiền chúng ta cần tạo một cơ sở dữ liệu để lưu trữ thông tin về Like và Unlike. Chi tiết cơ sở dữ liệu như sau:

Tên cơ sở dữ liệu => demophp
Tên bảng => posts
Tên bảng => likes

Mã tạo cơ sở dữ liệu trong phpMyAdmin

Tệp cơ sở dữ liệu sẽ có nội dung như bên dưới:

Ví dụ

--
-- Cơ sở dữ liệu: `demophp`
--

-- --------------------------------------------------------

--
-- Cấu trúc bảng cho bảng `likes`
--

CREATE TABLE `likes` (
  `id` int(5) NOT NULL,
  `pid` int(10) NOT NULL,
  `like` int(10) NOT NULL DEFAULT 0,
  `unlike` int(10) NOT NULL DEFAULT 0,
  `uid` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Cấu trúc bảng cho bảng `posts`
--

CREATE TABLE `posts` (
  `id` int(11) NOT NULL,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `status` int(2) NOT NULL DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Đang đổ dữ liệu cho bảng `posts`
--

INSERT INTO `posts` (`id`, `title`, `image`, `status`) VALUES
(1, '10 ngôn ngữ lập trình nên học trong năm 2022', 'https://vzn.vn/uploads/blog/2021/12/10-ngon-ngu-lap-trinh-cho-nam-2022.jpg', 1),
(2, 'Cách SEO WordPress hiệu quả qua 8 plugin SEO Wordpress', 'https://vzn.vn/uploads/blog/2021/12/top-8-plugin-ho-tro-seo-wordpress-tot-nhat.jpg', 1),
(3, '5 cách để khôi phục mật khẩu WordPress', 'https://vzn.vn/uploads/blog/2021/12/5-cach-lay-lai-mat-khau-wordpress.jpg', 1);

--
-- Chỉ mục cho các bảng đã đổ
--

--
-- Chỉ mục cho bảng `likes`
--
ALTER TABLE `likes`
  ADD PRIMARY KEY (`id`);

--
-- Chỉ mục cho bảng `posts`
--
ALTER TABLE `posts`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT cho các bảng đã đổ
--

--
-- AUTO_INCREMENT cho bảng `likes`
--
ALTER TABLE `likes`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT cho bảng `posts`
--
ALTER TABLE `posts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

Tệp PHP để kết nối với Cơ sở dữ liệu

Nội dung tệp php (db.php) để kết nối dữ liệu như bên dưới.

db.php

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Mẹo: Bạn có thể tham khảo thêm: Kết nối với Máy chủ MySQL bằng PHP

Tập tin hiển thị dữ liệu và thực hiện hành động Like/Unlike

index.php

<?php
session_start();
include "db.php";
if (!isset($_SESSION['user'])) {
	$_SESSION['user'] = session_id();
}
$uid = $_SESSION['user']; // thiết lập id của thành viên
if ($_POST) // Yêu cầu AJAX
{
	$pid = mysqli_real_escape_string($connection, $_POST['pid']); // id bài viết
	$op = mysqli_real_escape_string($connection, $_POST['op']); // hành động like hoặc unlike

	if ($op == "like") {
		$gofor = "like";
	} elseif ($op == "unlike") {
		$gofor = "unlike";
	} else {
		exit;
	}
	// kiểm tra xem đã like hay chưa
	$query = mysqli_query($connection, "SELECT * from `likes` WHERE pid='" . $pid . "' and uid='" . $uid . "'");
	$num_rows = mysqli_num_rows($query);

	if ($num_rows > 0) // kiểm tra xem đã like hay chưa
	{
		$likeORunlike = mysqli_fetch_array($query);

		if ($likeORunlike['like'] == 1) // Nếu đã like thì cập nhật unlike
		{
			mysqli_query($connection, "update `likes` set `unlike`=1,`like`=0 where id='" . $likeORunlike['id'] . "' and uid='" . $uid . "'");
			echo 2;
		} elseif ($likeORunlike['unlike'] == 1) // Nếu đã unlike thì cập nhật like
		{
			mysqli_query($connection, "update `likes` set `like`=1,`unlike`=0 where id='" . $likeORunlike['id'] . "' and uid='" . $uid . "'");
			echo 2;
		}
	} else // like mới
	{
		mysqli_query($connection, "INSERT INTO `likes` (`pid`,`uid`, `$gofor`) VALUES ('$pid','$uid','1')");
		echo 1;
	}
	exit;
}

$query = "SELECT * FROM  `posts`"; // danh sách bài viết
$res = mysqli_query($connection, $query);
$HTML = "";
while ($row = mysqli_fetch_array($res)) {
	// lấy thích và không thích của bài viết
	$query = mysqli_query($connection, "select sum(`like`) as `like`,sum(`unlike`) as `unlike` from `likes` where pid = " . $row['id']);
	$rowCount = mysqli_fetch_array($query);
	if ($rowCount['like'] == "") {
		$rowCount['like'] = 0;
	}

	if ($rowCount['unlike'] == "") {
		$rowCount['unlike'] = 0;
	}

	if ($uid == "") // nếu thành viên chưa đăng nhập thì hiển thị nút đăng nhập
	{
		$like = '
            <input onclick="location.href = \'login.php\';" type="button" value="' . $rowCount['like'] . '" rel="' . $row['id'] . '" data-toggle="tooltip"  data-placement="top" title="Đăng nhập để Thích bài viết" class="button_like" />
            <input onclick="location.href = \'login.php\';" type="button" value="' . $rowCount['unlike'] . '" rel="' . $row['id'] . '" data-toggle="tooltip" data-placement="top" title="Đăng nhập để Không thích bài viết" class="button_unlike" />';
	} else {
		$query = mysqli_query($connection, "SELECT * from `likes` WHERE pid='" . $row['id'] . "' and uid='" . $uid . "'");
		if (mysqli_num_rows($query) > 0) {
			//nếu đã thích hoặc không thích bài viết
			$likeORunlike = mysqli_fetch_array($query);
			// xóa giá trị của các biến
			$liked = '';
			$unliked = '';
			$disable_like = '';
			$disable_unlike = '';

			if ($likeORunlike['like'] == 1) // nếu đã like thì vô hiệu hóa nút like
			{
				$liked = 'disabled="disabled"';
				$disable_unlike = "button_disable";
			} elseif ($likeORunlike['unlike'] == 1) // nếu đã unlike thì vô hiệu hóa nút unlike
			{
				$unliked = 'disabled="disabled"';
				$disable_like = "button_disable";
			}

			$like = '
            <input ' . $liked . ' type="button" value="' . $rowCount['like'] . '" rel="' . $row['id'] . '" data-toggle="tooltip"  data-placement="top" title="Like" class="button_like ' . $disable_like . '" id="linkeBtn_' . $row['id'] . '" />
            <input ' . $unliked . ' type="button" value="' . $rowCount['unlike'] . '" rel="' . $row['id'] . '" data-toggle="tooltip" data-placement="top" title="Un-Like" class="button_unlike ' . $disable_unlike . '" id="unlinkeBtn_' . $row['id'] . '" />
            ';
		} else {
			//chưa thích hoặc không thích
			$like = '
            <input  type="button" value="' . $rowCount['like'] . '" rel="' . $row['id'] . '" data-toggle="tooltip"  data-placement="top" title="Like" class="button_like" id="linkeBtn_' . $row['id'] . '" />
            <input  type="button" value="' . $rowCount['unlike'] . '" rel="' . $row['id'] . '" data-toggle="tooltip" data-placement="top" title="Un-Like" class="button_unlike" id="unlinkeBtn_' . $row['id'] . '" />
            ';
		}
	}

	$HTML .= '
        <li> <img src="' . $row['image'] . '" class="">
            <h4 class="">' . $row['title'] . '</h4>
            <div class="grid">
                ' . $like . '
            </div>
        </li>';
}

?>
<!doctype html>
<head>
    <title>Hệ thống Like & Unlike bằng PHP, MySQL và jQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
		.button_like {
		    background-image: url(like.png);
		    background-color: #fff;
		    background-repeat: no-repeat;
		    background-position: 2px 0;
		    border: none;
		    cursor: pointer;
		    height: 32px;
		    padding-left: 40px;
		    vertical-align: middle;
		    color: hsl(0, 0%, 33%);


		}
		.button_unlike {
		    background-image: url(like.png);
		    background-color: #FFF;
		    background-repeat: no-repeat;
		    background-position: 2px -31px;
		    border: none;
		    cursor: pointer;
		    height: 32px;
		    padding-left: 40px;
		    vertical-align: middle;
		    color: hsl(0, 0%, 33%);


		}
		.button_disable{
		    background-image: url("likebw.png");
		}
		.grid
		{
		    width: 450px;
		    margin: 0 auto;
		    text-align:middle;
		    display: flex;
		}
		.thumbnail-list {
		  list-style:none;
		  margin:0;
		  padding:0;
		  font-size:0;
		}
		.thumbnail-list li {
		  display:inline-block;
		  vertical-align:top;
		  width:50%;
		  padding:2%;
		  font-size:12px;
		}
		.thumbnail-list img {
		  display:block;
		  width:100%;
		}
		.item { background:green; }
		.cut-price {
		  text-decoration:line-through;
		  color:#ccc;
		}
		.product-price {
		  float:left;
		  width:100%;
		  color:#999;
		}
		.btn-slide { display:none; }

		@media (min-width:640px) {
		  .thumbnail-list li { width:33.33333%; }
		}
		@media (max-width:767px) {
		  .btn-slide {
		    text-align:center;
		    width:100%;
		    padding:10px;
		    margin:0 auto;
		    display:block;
		    font:bold 120%/100% Arial,Helvetica,sans-serif;
		    color:#000;
		    text-decoration:none;
		    border:1px solid #ccc;
		  }
		  #panel { display:none; }
		  .thumbnail-list li { text-align:center; }
		}
		@media (max-width:320px) {
		  .thumbnail-list li { width: 100%}
		}
    </style>
  </head>
  <body>
  <h2><a href="https://vzn.vn/code-he-thong-like-unlike-bang-php-mysql-va-jquery/">Hệ thống Like & Unlike bằng PHP, MySQL và jQuery</a></h2><br><br>
  <div class="container">
    <div class="row">
    <h1>Danh sách bài viết</h1>
        <div class="col-sm-12 col-md-12">
            <ul class="thumbnail-list">
            <?php echo $HTML; ?>
            </ul>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $('.button_like').click(function(e)
	    {
	        var postID = $(this).attr('rel');
	        var likeval = parseInt($("#linkeBtn_"+postID).val(), 10);
	        var unlikeval = parseInt($("#unlinkeBtn_"+postID).val(), 10);
	        $.post("index.php", {op:"like",pid: postID},function(data)
	        {
	            if(data == 1)
	            {
	                likeval = likeval+1;
	                $("#linkeBtn_"+postID).val(likeval);
	                $("#linkeBtn_"+postID).attr("disabled", "disabled");
	                $("#unlinkeBtn_"+postID).css("background-image","url(likebw.png)");
	            }
	            else if(data == 2)
	            {
	                unlikeval = unlikeval-1;
	                $("#unlinkeBtn_"+postID).val(unlikeval);
	                $("#unlinkeBtn_"+postID).prop("disabled", false);
	                $("#unlinkeBtn_"+postID).css("background-image","url(likebw.png)");

	                likeval = likeval+1;

	                $("#linkeBtn_"+postID).val(likeval);
	                $("#linkeBtn_"+postID).attr("disabled", "disabled");
	                $("#linkeBtn_"+postID).css("background-image","url(like.png)");
	            }
	        })
	    });
	    $('.button_unlike').click(function(e)
	    {
	        var postID = $(this).attr('rel');
	        var likeval = parseInt($("#linkeBtn_"+postID).val(), 10);
	    var unlikeval = parseInt($("#unlinkeBtn_"+postID).val(), 10);
	        $.post("index.php", {op:"unlike",pid: postID},function(data)
	        {
	            if(data == 1)
	            {
	                unlikeval = unlikeval+1;
	                $("#unlinkeBtn_"+postID).val(unlikeval);
	                $("#unlinkeBtn_"+postID).attr("disabled", "disabled");
	                $("#linkeBtn_"+postID).css("background-image","url(likebw.png)");
	            }
	            else if(data == 2)
	            {
	                likeval = likeval-1;
	                $("#linkeBtn_"+postID).val(likeval);
	                $("#linkeBtn_"+postID).prop("disabled", false);
	                $("#linkeBtn_"+postID).css("background-image","url(likebw.png)");

	                unlikeval = unlikeval+1;
	                $("#unlinkeBtn_"+postID).val(unlikeval);
	                $("#unlinkeBtn_"+postID).attr("disabled", "disabled");
	                $("#unlinkeBtn_"+postID).css("background-image","url(like.png)");
	            }
	        })
	    });
	});
</script>
  </body>
</html>

Tải về file ảnh like và unlike

Hy vọng với gợi ý từ script này các bạn sẽ có thể tạo được hệ thống like và unlike cho các dự án php của mình.

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Bài trước Bài tiếp