آموزش کامل ایجاد سیستم like مطالب با PHP و AJAX (قسمت پنجم)

دسته بندی: جاوا اسکریپت
زمان مطالعه: 4 دقیقه
۱۰ مرداد ۱۳۹۲

سلام دوستان،قول داده بودیم اون قسمت هایی که توی کد HTML و JS تغییر داده بودیم رو کاملا توضیح بدیم بعدشم یه نمونه نحوه استفاده توی سایت رو توضیح بدیم،البته قسمت بعدیشم داریم که کد هارو از PHP منتقل میکنیم به سمت ASP.NET (بالاخره یه عده ای از کاربران ما asp کار هستن)،خوب برای شروع اول از همه از قسمت کد‌های HTML شروع می‌کنیم.

مرحله به مرحله

ما توی قسمت مطلب (تگ div با کلاس post) که تگ‌های اصلی HTML رو داشتیم،به دکمه هامون یه خاصیت جدید اضافه کرده بودیم:

<div class="post">
<div class="post-top"></div>
<div class="likes">
<div class="like">
<img data="1" class="like-btn" src="img/likebtn.png">
<span class="l_count"></span>
</div>
<div class="clearfix"></div>
<div class="like">
<img data="1" class="dislike-btn" src="img/dislikebtn.png">
<span class="d_count"></span>
</div>
</div>
</div>

اگه نگاه کنید توی قسمت like و dislike ویژگی جدیدی به اسم data اضافه شده که مقدارش برا هر دوتا اینجا یک هست،خوب این برا چیه؟ما باید id هر مطلب رو برای بروز رسانی لایک‌های اون مطلب داشته باشیم پس ما اومدیم id هر مطلب رو توی یه خاصیت جدید به اسم data قرار دادیم،البته شما می‌تونید از یه اسم دیگه  استفاده کنید(شما باید توی حلقه مطالب خودتون حتما id رو دریافت و اینجا بذارید مثلا توی وردپرس با the_ID دریافت میشه).

خوب اکثر تغییرات ما توی  قسمت جاوا اسکریپت بوده.اول از همه قسمت کلیک برای دکمه سبز رنگ .

$('.like-btn').on("click",function()
{

$('.l_count').html('<img src="img/loader.gif" style="width:16px;height:16px;">');
var id=$(this).attr("data");
updatelike(id);

});

اینجا ما بعد نمایش اون عکس loading مقدار همون خاصیت data رو بوسیله متد attr دریافت کردیم و گذاشتیم توی متغییر id و بعدشم اونو برای تابع ای جکسی updatelike ارسال کردیم.

خوب برا قسمت کلیک رو دکمه قرمز هم همین کارو کردیم.

$('.dislike-btn').on("click",function(){

$('.d_count').html('<img src="img/loader.gif" style="width:16px;height:16px;">');
var id=$(this).attr("data");
updatedislike(id);

});

حالا کد رفتن موس روی دکمه سبز رنگ  رو بررسی میکنیم .

$('.like-btn').hover(function() {
var id=$(this).attr("data");
showlike(this,id);
$(this).next().stop().fadeIn(500);

}, function() {

$(this).next().stop().fadeOut(500);

});

اول از همه دوبار همون مقدار data رو دریافت کردیم و بعدش این مقدار id رو همراه با خود همین شی که روش hover میشه رو فرستادیم تابع showlike بعدشم گفتیم همین شی که داره موس روش hover میشه عنصر بعدیش رو با افکت fade نمایش بده (ما توی قسمت قبل برای راحتی با کلاس کار می‌کردیم،اما خوب وقتی ما ماوس رو این کلاس ببریم تمامی عناصری که دارای این کلاس هستن همشون با هم fade میشن پس ما فقط همون شی که موس روش hover میشه رو میخوایم نشون بدیم نه همه رو).

برای hover دکمه قرمز هم همین حالته با این تفاوت که مقادیر رو فرستادم تابع showdislike.

$('.dislike-btn').hover(function() {

var id=$(this).attr("data");
showdislike(this,id);
$(this).next().stop().fadeIn(500);

}, function() {

$(this).next().stop().fadeOut(500);

});

خوب دوستان تابع درخواست ای جکس updatelike.

function updatelike(id) {
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

if(xhr.readyState==4 && xhr.status==200)
{

alert(xhr.responseText);

}
}
xhr.open("GET","ajx.php?func=updatelike&id="+id,true);
xhr.send();
}

تقریبا همون تابع قبلیه فقط اون id رو که دریافت کرده بودیم اینجا به کوئری استرینگ مون اضافه کردیم و اونو میفرستیم فایل php.

برای تابع updatedislike هم دقیقا همین طوریه .

function updatedislike(id) {
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

if(xhr.readyState==4 && xhr.status==200)
{
alert(xhr.responseText);

}
}
xhr.open("GET","ajx.php?func=updatedislike&id="+id,true);
xhr.send();
}

خوب حالا برای توابع showlike تغییرات رو بررسی میکنیم.

unction showlike(el,id){
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

if(xhr.readyState==4 && xhr.status==200)
{
$(el).next().html(xhr.responseText);

}
}
xhr.open("GET","ajx.php?func=showlike&id="+id,true);
xhr.send();
}

ما اون بالا خود شی و id رو فرستادیم به این تابع،خوب ما هم به عنوان el و id دریافتش کردیم،id رو برای همون کوئری استرینگ خودمون لازم داشتیم حالا el یا همون شی hover شده به چه دردی میخوره؟اگه نگاه کنید ما موقع برگشت اطلاعات توسط همین el عنصر بعدی رو شناسایی و اطلاعات رو توی اون قرار دادیم(شی ما همون دکمه سبز و قرمر هستن پس عنصر بعدی این‌ها همون تگ‌های span هستن که قراره تعداد لایک‌های جاری رو نشون بدن).

برای تابع showdislike هم دقیقا از همین روش استفاده کردیم.

function showdislike(el,id){
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

if(xhr.readyState==4 && xhr.status==200)
{
$(el).next().html(xhr.responseText);

}
}
xhr.open("GET","ajx.php?func=showdislike&id="+id,true);
xhr.send();
}

خوب اینم از توضیحات برای تغییرات کدها،توی قسمت قبلی هم برای کد‌های php توضیح داده بودیم.

حالا میتونید یه باکس طراحی کنید و مثلا از این تابع برای نمایش 10 پستی که بیشترین لایک رو داشتن توی صفحه اول وب سایتتون استفاده کنید.

function MostLiked(){

$db=new DB();
$db->connect();
$result=$db->query("SELECT * FROM posts ORDER BY up DESC LIMIT 10");
$row=$db->fetch_array($result);
echo '<div class="mostliked">';
echo '<ul>';
while($row){

echo '<li><a href="show.php?id='.$row['id'].'">'.$row['p_title'].'</a></li>';
}
echo '</ul>';
echo '</div>';
$db->disconnect();
unset($db);
}

قسمت بعدی  که آخرین هم هست،کد هارو به ASP.NET تبدیل میکنیم.

موفق و پیروز باشید.

 

چه امتیازی به این مقاله می دید؟
نویسنده کیوان علی محمدی
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

S Hakimi

اولین وبسایت فارسی درزمینه برنامه نویسی که ارزش تشکر داشت قطعا همین وبسایت.واقعا خسته نباشید.

azita

سلام.
اگر بخواهیم کلا نتایج نشون داده بشن و از خاصیت hover استفاده نکنیم و همون موقع که روی دکمه لایک کلیک کردیم امتیاز جدید نشون داده بشه، تابع ()showlike رو کجا باید فراخوانی کنیم؟
در ضمن من از table برای نمایش اطلاعات استفاده کردم و به این صورته ک دکمه like، نتیجه و dislike تو ستون های جدا هستند.
خواهشا راهنمایی کنید

کیوان علی محمدی

سلام خوب قسمت های hover رو حذف کنید و اونو span هار رو از حالت display:none خارج کنید،بعدشم تابع showlike رو بعداز تابع updatelike توی تابع کلیک دکمه ها بنویسید.برای قسمت dislike هم همین کارو انجام بدید.

lili

خیلی خیلی ممنون واقعا عالی بود

وحید صالحی

فوق العادس کیوان جان ممنون…

کیوان علی محمدی

لطف داری داداش.

محمد امین واحدی نیا

آقا کیوان، فقط تحت وب می نویسی یا تحت سیستم عامل هم کار می کنی ؟
اگه تحت سیستم عاملی از کدوم زبون استفاده می کنی من با سی شارپم

کیوان علی محمدی

سلام من Windows Application هم کار کردم،هم ASP و هم Win App رو با #C کار کردم ،البته سلیقه ایه که کدوم رو انتخاب کنی و من خودم خانواده C رو بیشتر دوست دارم،ولی خوب VB هم راحتی خودش رو داره مخصوصا تو بحث رویداد گرا بودن برنامه.

BMR

سلام حالا چیکار کنیم که هر کاربر فقط یک رای دهد؟

کیوان علی محمدی

سلام توی قسمت قبلی ما تابع ثبت IP کاربر رو برای جلوگیری از رای مجدد نوشتیم.کدش هم توی فایل پروژه قسمت چهارم موجوده.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.