Cara Membuat Sistem Like sederhana dengan JQuery, PHP, Bootstrap dan MySQL - Salam sejahtera buat teman-teman sekalian. Pada kesempatan ini, saya akan share tutorial cara membuat sistem like seperti facebook. Tutorial ini sangatlah sederhana, dan di tutorial ini menggunakan jQuery, PDO, Bootstrap, dan MySQL. Sebelum langsung ke koding, ada beberapa tutorial yang mungkin bermanfaat bagi anda.
Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap
Cara Membuat Register, Login dan Logout dengan PDO dan MySQLOke langsung saja. Pertama, kita melakukan koneksi ke database terlebih dahulu dengan script dibawah ini.
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "demo";
try {
$conn = new PDO("mysql:host=$host;dbname=$db", $user, $pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "Konek Gagal : ".$e->getMessage();
}
?>
Penjelasan :
$host nama host server yang anda miliki
$user username host server yang anda miliki
$password password host server yang anda miliki
$db nama database yang anda miliki.
Jadi, disesuain terlebih dahulu dengan yang anda miliki.
Selanjutnya, buat file index.php yang berfungsi untuk menampilkan postingan atau konten yang dimiliki. Buat file index.php lalu terapkan script dibawah ini :
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Content</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.like', function() {
var id = $(this).attr("id");
$('a#'+id).removeClass('like');
$.ajax({
type: 'POST',
url: "processsystem.php",
data: {
id: +id,
user_id: $("#ref").val(),
action: "like"
},
cache: false,
success: function(data) {
$('a#'+id).addClass('unlike');
$('a#'+id).attr('Title', 'Unlike');
$("#result").html(" You and "+data+" Others");
$("#like_result").hide();
}
});
});
$(document).on('click', '.unlike', function() {
var id = $(this).attr("id");
$('a#'+id).removeClass('unlike');
$.ajax({
type: 'POST',
url: "processsystem.php",
data: {
id: +id,
user_id: $("#ref").val(),
action: "unlike"
},
cache: false,
success: function(data) {
$('a#'+id).addClass('like');
$('a#'+id).attr('Title', 'Like');
$("#result").html(data);
$("#unlike_result").hide();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<?php
include 'connect.php';
if (!isset($_SESSION['user_id']) AND empty($_SESSION['user_id'])) {
$user_id = 0;
echo "<input type=\"hidden\" name=\"ref\" value=\"test\" id=\"ref\">";
} else {
$user_id = $_SESSION['user_id'];
echo "<input type=\"hidden\" name=\"ref\" value=\"".$_SESSION['user_id']."\" id=\"ref\">";
}
$query = $conn->prepare("SELECT * FROM tbl_post");
$query->execute();
$result = $query->fetchAll();
foreach($result as $key => $value) {
?>
<div class="row">
<div class="col-md-8" style="border: 1px solid #999; margin-top: 40px;">
<h3><u><?php echo $value['post_title']; ?></u></h3>
<p>
<?php echo $value['post_content']; ?>
</p>
<div class="row">
<?php
//mengecek apakah user sudah login atau tidak. Jika tidak, maka melakukan login terlebih dahulu
if(!isset($_SESSION['username']) || empty($_SESSION['username'])) {
$query = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id
ORDER BY u.user_id ASC";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll();
$count = $stmt->rowCount();
?>
<div class="col-md-12">
<a href="login.php"><i class="glyphicon glyphicon-thumbs-up"></i></a>
<?php
if ($count > 0 and $count <= 2) {
foreach ($result as $value) {
echo ",".$value['username'];
}
} elseif ($count > 2) {
$counts = $count - 1;
echo $result[0]['username']." and ".$counts." Others";
}
?>
</div>
<?php
//atau jika sudah login, maka dapat melakukan like atau unlike
} else {
$query = "SELECT * FROM tbl_like WHERE post_id = :post_id AND user_id = :user_id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':post_id', $value['post_id']);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
$chechk = $stmt->rowCount();
if ($chechk == 0) {
?>
<div class="col-md-12">
<a href="#" id="<?php echo $value['post_id']; ?>" title="Like" class="like"><i class="glyphicon glyphicon-thumbs-up"></i></a><span id="result"></span>
<?php
$query = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll();
$count = $stmt->rowCount();
if ($count > 0 and $count < 2) {
echo "<span id=\"like_result\">";
foreach ($result as $value) {
echo ",".$value['username'];
}
echo "</span>";
} elseif ($count > 2) {
$counts = $count - 2;
echo "<span id=\"like_result\">";
echo " ".$result[0]['username']." , ".$result[1]['username']." and ".$counts." Others";
echo "</span>";
}
?>
</div>
<?php
} else {
$data = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id
ORDER BY u.user_id ASC";
$data = $conn->prepare($data);
$data->execute();
$data_count = $data->rowCount();
$query = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id
WHERE l.user_id = :user_id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':user_id', $_SESSION['user_id']);
$stmt->execute();
$result = $stmt->fetch();
$count = $stmt->rowCount();
?>
<div class="col-md-12">
<a href="#" id="<?php echo $value['post_id']; ?>" title="Unlike" class="unlike"><i class="glyphicon glyphicon-thumbs-up"></i></a><span id="result"></span>
<?php
if ($count == 0) {
echo "<span id=\"unlike_result\">";
foreach ($data_count as $value) {
echo $value['username'];
}
echo "</span>";
} else {
$data_counts = $data_count - 1;
echo "<span id=\"unlike_result\">";
echo "You and ".$data_counts." Others";
echo "</span>";
}
?>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
Discript tersebut anda dapat melihat script yang berulan-ulang. Anda memodifikasinya dengan menggunakan fungsi atau oop. Disini saya tidak menggunakan fungsi, agar lebih mudah dipahami.
Oke lanjut gan. Pada tutorial ini saya membuat sistem register dan login, jadi buat file baru dengan register.php lalu terapkan script dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
</head>
<body>
<?php
include "connect.php";
//Jika user mengklik button register
if(isset($_POST['btn_register'])) {
$username = $_POST['username'];
$email = $_POST['email'];
$password = md5($_POST['password']);
$repassword = md5($_POST['repassword']);
if (isset($username, $email, $password, $repassword)) {
if(strstr($email, '@')) {
if($password == $repassword) {
$query = $conn->prepare("SELECT * FROM tbl_users WHERE username = :username OR email = :email");
$query->bindParam(':username', $username);
$query->bindParam(':email', $email);
$query->execute();
$check = $query->rowCount();
if ($check == 0) {
$query = $conn->prepare("INSERT INTO tbl_users(user_id, username, email, password) VALUES (null, :username, :email, :password)");
$query->bindParam(':username', $username);
$query->bindParam(':email', $email);
$query->bindParam(':password', $password);
//$query->execute();
if($query->execute()) {
header('Location: login.php');
}
} else {
echo "Username atau Email sudah digunakan";
}
} else {
echo "Password Tidak sama";
}
} else {
echo "Email Invalid";
}
}
//atau tidak diklik button, maka tampilkan form register
} else {
?>
<div class="container">
<div class="row">
<div class="col-md-5">
<form method="post" style="margin-top: 40px;">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" placeholder="Username" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<label>Ulangi Password</label>
<input type="password" name="repassword" placeholder="Ulangi Password" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="btn_register">Register</button>
</div>
</form>
</div>
</div>
Saya sudah punya akun.! <a href="login.php"><strong>Login</strong></a>
</div>
<?php
}
?>
</body>
</html>
Setelah membuat register, jangan lupa untuk membuat loginnya. Oke, buat nama file baru dengan nama login.php lalu anda terapkan script dibawah ini :
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
</head>
<body>
<?php
include 'connect.php';
//jika user mengklik button login, maka akan diproses
if(isset($_POST['btn_login'])) {
$username = $_POST['username'];
$password = md5($_POST['password']);
if(isset($username, $password)) {
$query = $conn->prepare("SELECT user_id, username, password FROM tbl_users WHERE username = :username AND password = :password");
$query->bindParam(':username', $username);
$query->bindParam(':password', $password);
$query->execute();
$result = $query->fetchAll();
$check = $query->rowCount();
if($check == 1) {
$_SESSION['user_id'] = $result[0]['user_id'];
$_SESSION['username'] = $result[0]['username'];
header('Location: index.php');
} else {
echo "Username atau password anda salah. Silahkan ulangi lagi.!";
header('Location: login.php');
}
}
//jika tidak, maka tampilkan form saja
} else {
?>
<div class="container">
<div class="row">
<div class="col-md-5">
<form method="post" style="margin-top: 40px;">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" placeholder="Username" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="btn_login">Login</button>
</div>
</form>
</div>
</div>
Saya belum punya akun.! <a href="register.php"><strong>Register</strong></a>
</div>
<?php
}
?>
</body>
</html>
Dan untuk script php terakhir, disini merupakan proses sistemnya. Oke, langsung saja buat file baru dengan processsytem.php :
<?php
include "connect.php";
if (isset($_POST['id']) AND isset($_POST['user_id']) AND isset($_POST['action'])) {
$post_id = $_POST['id'];
$user_id = $_POST['user_id'];
$querys = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id";
$stmt2 = $conn->prepare($querys);
$stmt2->execute();
$jlh_join = $stmt2->rowCount();
if ($_POST['action'] == "like") {
$query = "SELECT * FROM tbl_like WHERE post_id = :post_id AND user_id = :user_id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
$chechk = $stmt->rowCount();
if ($chechk == 0) {
//masukkan like ke dalam tabel
$query = "INSERT INTO tbl_like(like_id, post_id, user_id) VALUES (null, :post_id, :user_id)";
$stmt = $conn->prepare($query);
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
}
echo $jlh_join;
} elseif ($_POST['action'] == "unlike") {
$query = "SELECT * FROM tbl_like WHERE post_id = :post_id AND user_id = :user_id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
$chechk = $stmt->rowCount();
if ($chechk != 0) {
$query = "DELETE FROM tbl_like WHERE post_id = :post_id AND user_id = :user_id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
$query = "SELECT u.user_id, u.username FROM tbl_users u
INNER JOIN tbl_like l ON u.user_id = l.user_id";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll();
$count = $stmt->rowCount();
if ($count > 0 and $count < 2) {
foreach ($result as $value) {
echo ",".$value['username'];
}
} elseif ($count > 2) {
$counts = $count - 2;
echo " ".$result[0]['username']." , ".$result[1]['username']." and ".$counts." Others";
}
}
}
}
?>
Oke, sampai disini script phpnya dulu, ada beberapa script boostrap dan jquery yang harus dimasukkan. Sekali lagi, discript yang saya berikan banyak script yang berulang-ulang, jadi saya rekomendasikan menggunakan fungsi. Oke, sampai disini tutorial Cara Membuat Sistem Like sederhana dengan JQuery, PHP, Bootstrap dan MySQl semoga dapat bermanfaat bagi anda. Ditutorial ini memiliki banyak kesalahan, sehingga kritik dan saran anda sangat saya perlukan untuk membangun blog ini. Jika ada pertanyaan, silahkan berbincang-bincang di kolom komentar. Sekian dan terima kasih.
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
Related Post
Cara Membuat CRUD dengan MySQLI dan PHP
CRUD...?? Mungkin masih ada yang ingin bertanya apa itu CRUD.? CRUD ialah merupakan kepanjan
Tutorial PHP : Pengenalan Singkat PHP
Sebelum belajar Bahasa Pemrograman PHP, adakalanya anda harus mengenal Apa itu PHP.? PHP itu memil
Cara Membuat Dropdown Menu dengan Bootstrap
Cara Membuat Dropdown Menu dengan Bootstrap - Salam sejahtera buat teman-teman sekalian, pada t
Cara Membuat Form Responsive menggunakan Bootstrap
Cara Membuat Form Responsive Menggunakan Bootstrap – Salam sejahtera, pada postingan kali ini s
2 comments
Click here for commentserror gan
ReplyError dimananya ya bg.? Mn tau saya bisa bantuinnya.
ReplyConversionConversion EmoticonEmoticon