شرح : برمجة زر اعجبني او لايك بطريقة جدا سهلة بأستخدام How to make like button using PHP/mysql/jQuery/Ajax
بسم الله الرحمن الرحيم
لمطوري الويب .. برمجة زر اعجبني او لايك (like) شبيه بما هو في فيسبوك
او اي موقع اخربه هذا الزر.. اقرا الشرح جيدا وتستطيع تحميل السورس كود كامل او تنسخ الاكواد في اخر الموضوع
*ملاحظة هامة للافادة :
لاتنسخ وتلصق الاكواد فقط .. افهم طريقة برمجته وتعلم منه ثم قم انت بكتابته لتزيد من خبرتك .. الموضوع سهلل للغاية وليس بالامر الصعب فقط يحتاج مبرمج ويب يتقن اللغات التالية :
لمطوري الويب .. برمجة زر اعجبني او لايك (like) شبيه بما هو في فيسبوك
او اي موقع اخربه هذا الزر.. اقرا الشرح جيدا وتستطيع تحميل السورس كود كامل او تنسخ الاكواد في اخر الموضوع
*ملاحظة هامة للافادة :
لاتنسخ وتلصق الاكواد فقط .. افهم طريقة برمجته وتعلم منه ثم قم انت بكتابته لتزيد من خبرتك .. الموضوع سهلل للغاية وليس بالامر الصعب فقط يحتاج مبرمج ويب يتقن اللغات التالية :
php , mysql(not language,It's type of databases) , ajax ,jQuery
الشرح :
اولا
ملف الاندكس او الصفحة الرئيسية "index.php" وكود php لاستقبال البيانات من قاعدة البيانات .. والمقصود بالبيانات هنا هو كم عدد الاعجابات بالمنشور "العداد"
ثانيا
دالة addLikes باستخدام ajax / jQuery لتنفيذ كود ال php الخاصة بصفحة add_likes.php التي سننشأها في الخطوة الثالة ... فائدة هذه الدالة تنفيذ الكود الخاص بالصفحة التي ذكرناها من دون عمل refresh للصفحة وبكل سهولة وبساطة
الكود كما في الصورة :
هذا الكود تضعه في نفس الصفحة والتي هي الصفحة الرئيسية "index.php"
ثالثا
ننشا صفحة باسم "add_likes.php" هذه الصفحة وضيفتها هي تنفيذ امر الاعجاب او "like" فترسل قيمته الى قاعدة البيانات لحفظ اللايك وليتم عرضه في الصفحة الرئيسية في الموضوع الخاص به
هذه الصفحة هي نفسها التي استدعيناها في الخطوة الثالنية اعلاه حيث استخدمناها في كود ajax لكي لايعمل refresh او اعادة تحميل للصفحة عند النقر على اعجبني ولكي يعرض عدد اللايكات بعد الضغط على لايك
كود الصفحة :
الاكواد :
index.php
اولا
ملف الاندكس او الصفحة الرئيسية "index.php" وكود php لاستقبال البيانات من قاعدة البيانات .. والمقصود بالبيانات هنا هو كم عدد الاعجابات بالمنشور "العداد"
ثانيا
دالة addLikes باستخدام ajax / jQuery لتنفيذ كود ال php الخاصة بصفحة add_likes.php التي سننشأها في الخطوة الثالة ... فائدة هذه الدالة تنفيذ الكود الخاص بالصفحة التي ذكرناها من دون عمل refresh للصفحة وبكل سهولة وبساطة
الكود كما في الصورة :
هذا الكود تضعه في نفس الصفحة والتي هي الصفحة الرئيسية "index.php"
ثالثا
ننشا صفحة باسم "add_likes.php" هذه الصفحة وضيفتها هي تنفيذ امر الاعجاب او "like" فترسل قيمته الى قاعدة البيانات لحفظ اللايك وليتم عرضه في الصفحة الرئيسية في الموضوع الخاص به
هذه الصفحة هي نفسها التي استدعيناها في الخطوة الثالنية اعلاه حيث استخدمناها في كود ajax لكي لايعمل refresh او اعادة تحميل للصفحة عند النقر على اعجبني ولكي يعرض عدد اللايكات بعد الضغط على لايك
كود الصفحة :
الاكواد :
index.php
<!DOCTYPE html>
<html>
<head>
<title>Munaf Aqeel Mahdi</title>
</head>
<body>
<table class="demo-table">
<tbody>
<tr>
<th><strong>Tutorials</strong></th>
</tr>
<?php
if(!empty($result)) {
$ip_address = $_SERVER['REMOTE_ADDR'];
foreach ($result as $tutorial) {
?>
<tr>
<td valign="top">
<div class="feed_title"><?php echo $tutorial["title"]; ?></div>
<div id="tutorial-<?php echo $tutorial["id"]; ?>">
<input type="hidden" id="likes-<?php echo $tutorial["id"]; ?>" value="<?php echo $tutorial["likes"]; ?>">
<?php
$query ="SELECT * FROM ipaddress_likes_map WHERE tutorial_id = '" . $tutorial["id"] . "' and ip_address = '" . $ip_address . "'";
$count = $db_handle->numRows($query);
$str_like = "like";
if(!empty($count)) {
$str_like = "unlike";
}
?>
<div class="btn-likes"><input type="button" title="<?php echo ucwords($str_like); ?>" class="<?php echo $str_like; ?>" onClick="addLikes(<?php echo $tutorial["id"]; ?>,'<?php echo $str_like; ?>')" /></div>
<div class="label-likes"><?php if(!empty($tutorial["likes"])) { echo $tutorial["likes"] . " Like(s)"; } ?></div>
</div>
<div class="desc"><?php echo $tutorial["description"]; ?></div>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<script type="text/javascript">
function addLikes(id,action) {
$('.demo-table #tutorial-'+id+' li').each(function(index) {
$(this).addClass('selected');
$('#tutorial-'+id+' #rating').val((index+1));
if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
return false;
}
});
$.ajax({
url: "add_likes.php",
data:'id='+id+'&action='+action,
type: "POST",
beforeSend: function(){
$('#tutorial-'+id+' .btn-likes').html("<img src='LoaderIcon.gif' />");
},
success: function(data){
var likes = parseInt($('#likes-'+id).val());
switch(action) {
case "like":
$('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+id+',\'unlike\')" />');
likes = likes+1;
break;
case "unlike":
$('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Like" class="like" onClick="addLikes('+id+',\'like\')" />')
likes = likes-1;
break;
}
$('#likes-'+id).val(likes);
if(likes>0) {
$('#tutorial-'+id+' .label-likes').html(likes+" Like(s)");
} else {
$('#tutorial-'+id+' .label-likes').html('');
}
}
});
}
</script>
</body>
</html>
<\pre>
add_likes.php
لاتنسوا مشاركة الموضوع مع الاخرين للافادة وللمساعدة في نشر العلم اخواني الكرام وايضا لايك لصفحتي على الفيسبوك للمزيد وليصلكم كل جديد ..
<?php
if(!empty($_POST["id"])) {
require_once("dbcontroller.php");
$db_handle = new DBController();
switch($_POST["action"]){
case "like":
$query = "INSERT INTO ipaddress_likes_map (ip_address,tutorial_id) VALUES ('" . $_SERVER['REMOTE_ADDR'] . "','" . $_POST["id"] . "')";
$result = $db_handle->insertQuery($query);
if(!empty($result)) {
$query ="UPDATE tutorial SET likes = likes + 1 WHERE id='" . $_POST["id"] . "'";
$result = $db_handle->updateQuery($query);
}
break;
case "unlike":
$query = "DELETE FROM ipaddress_likes_map WHERE ip_address = '" . $_SERVER['REMOTE_ADDR'] . "' and tutorial_id = '" . $_POST["id"] . "'";
$result = $db_handle->deleteQuery($query);
if(!empty($result)) {
$query ="UPDATE tutorial SET likes = likes - 1 WHERE id='" . $_POST["id"] . "' and likes > 0";
$result = $db_handle->updateQuery($query);
}
break;
}
}
<\pre>
?>
او في حال وجود اي خطأ في نسخ الاكواد تستطيعون تحميل السورس كامل من هنالاتنسوا مشاركة الموضوع مع الاخرين للافادة وللمساعدة في نشر العلم اخواني الكرام وايضا لايك لصفحتي على الفيسبوك للمزيد وليصلكم كل جديد ..
شرح : برمجة زر اعجبني او لايك بطريقة جدا سهلة بأستخدام How to make like button using PHP/mysql/jQuery/Ajax
Reviewed by Munaf Aqeel Mahdi
on
9:39 AM
Rating:
Reviewed by Munaf Aqeel Mahdi
on
9:39 AM
Rating:
Nice Article :D
ReplyDeleteThank You!
you are welcome Tahar.. thanks for you too
ReplyDeleteالسلام عليكم
ReplyDeleteبارك الله فيك اخي مناف على الشرح الرائع وعلى الطريقة
تستاهل كل الخير
وعليكم السلام .. وفيك يالغالي شكرا على مرورك وكلامك الجميل
Delete