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

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

دوستان سلام،در دو قسمت قبلی ما کد‌های مربوط به ظاهر سیستم لایک خودمون رو نوشتیم و تست کردیم،تو این قسمت دستورات و متدهای ای جکس رو در بخش کدهای جاوا اسکریپت تکمیل میکنیم و بعدش هم اگه مطلب طولانی نشه که بعید میدونم، کد‌های PHP  هم چنین کد‌های ارتباط با بانک mysql رو برای ثبت لایک‌ها می‌نویسیم.

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

خوب دوستان ما می‌خوایم وقتی علامت موس رو دکمه‌های سبز و قرمز قرار گفت اون تگ‌های span کنارشون به نمایش در بیاد و تعداد لایک‌ها رو نشون بدن، جلسه قبل فقط کد نمایش اونو نوشتیم اما حالا یه تابع می‌نویسیم که این تابع دستورات ای جکس مارو تو خودش نگه میداره و کار این تابع هم اینه که با ارسال در خواست ای جکس به یه فایل PHP و دریافت اطلاعات از همین فایل اطلاعات مورد نظر رو بدون رفرش شدن صفحه برای ما توی همون تگ span به نمایش در میاره،این نکته رو هم بگم چون نمی‌خواستیم که کد‌ها خیلی شلوغ و درهم بشن  برا هر حالت از یه تابع استفاده کردیم،البته اینم کمی خودش زیاده ولی فعلا برا فهم بهتر کد‌ها این کارو کردیم.

خوب تابع اول برای دریافت و نمایش تعداد لایک دکمه سبز رنگ :

function showlike(){
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

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

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

اسم تابع رو گذاشتیم showlike و هر جا لازم شد از همین تابع برای فراخوانیش استفاده میکنیم،توی خط اول ما یه متغیر XmlHttpRequest با نام xhr بوسیله همون تابعی که در آخر قسمت قبل معرفی کردیم،ایجاد میکنیم،توی خط بعدی ما event شی xhr خودمون رو با یه تابع دلخواه مقدار دهی کردیم (مثل همون کلیک کردن که بگیم هر وقت کلیک شد این تابع رو اجرا کن)،خوب حالا این onreadystatechange چیکار میکنه؟خوب از اسمش هم تقریبا معلومه که تغییر وضعیت شی ما رو چک میکنه و با هر تغییری در وضعیت درخواستی که فرستادیم این رویداد (event) اجرا میشه و به محض اجرا شدن این رویداد اون تابعی که جلوش گذاشتیم فراخوانی میشه،توی خط بعدی که در واقع دستورات توی تابع هست ما یه شرط گذاشتیم،با این شرط خواستیم که وضعیت مطلوب رو بررسی کنیم،حالا وضعیت مطلوب ما چیه؟اینه که خاصیت‌های readystate و status شی xhr ما به ترتیب برابر 4 و 200 باشه،چرا؟چون خاصیت readyState دارای مقادیر دیگه ای هم هست و ما باید چک کنیم که فقط مقدارش 4 باشه (مقدار 4 یعنی درخواست ما کامل انجام شده) و هم چنین مقدار status که ممکنه 404 هم باشه (404 یعنی نتونسته منبع رو پیدا کنه،یعنی نتونسته همون صفحه PHP رو پیدا کنه) باید 200 باشه،در این حالت درخواست ما به درستی انجام شده و ما می‌تونیم مقدار برگشتی رو که با responseText معرفی میشه دریافت کرده و نمایش بدیم،ما این جا گفتیم اگه شرایط برقرار بود مقدار برگشتی رو بذار توی عنصری که کلاس l_count رو داره (اگه یادتون باشه این کلاس همون تگ span کنار دکمه سبز رنگ ماست).

خوب توی خط بعدی ما با متد open نوع درخواست و آدرس فایل منبع که قصد ارسال اطلاعات رو داریم و هم چنین آیا اینکه درخواست به صورت اسنکرون  ارسال بشه یا نه رو تنظیم میکنیم و در آخر هم با متد send درخواست رو ارسال میکنیم.خوب تموم شد همش همین بود.

ما متد ارسال رو روی GET تنظیم کردیم و آدرس فایل رو هم گذاشتیم ajx.php و اونی هم که جلوشه یه کوئری استرینگه اطلاعات رو باهاش میفرستیم فایل ajx.php (همون فایل منبع)، متغییر کوئری استرینگ ما اینجا اسمش func هست و جلوش هم نوشتیم showlike،در واقع توضیح این باید توی قسمت کد PHP بدم. پس این رو یادتون باشه.

خوب بچه‌ها یادتونه ما تو قسمت قبلی برای حالت hover دکمه سبز یه کد نوشتیم،خوب این تابع بالا رو توی اون قسمت به این صورت فراخوانی میکنیم :

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

showlike();

$('.l_count').stop().fadeIn(500);

}, function() {

$('.l_count').stop().fadeOut(500);

});

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

تابع ای جکس ما :

function showdislike(){
xhr= getXMLHttpRequest();
xhr.onreadystatechange=function()
{

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

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

خوب اسم تابع هست showdislike،بعدشم قراره توی d_count اطلاعات به نمایش در بیاد و بعدشم توی متد open توی قسمت کوئری استرینگ گفتیم func برابر showdislike باشه،حالا این تابع توی کد hover دکمه قرمز فراخوانی میکنیم:

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

showdislike();

$('.d_count').stop().fadeIn(500);

}, function() {

$('.d_count').stop().fadeOut(500);

});

خسته که نشدین؟؟ 🙂 خوب پس خوبه،این صفحه هم کم کم داره زیاد میشه بریم صفحه بعد برا ادامه،اونجا می‌بینمتون بچه‌ها ... 😉

خوب بچه‌های گل سون لرنی، ما باید دو تا تابع دیگه برای آپدیت کردن مقدار لایک هامون بنویسیم که دقیق شبیه تابع‌های بالا هستن.

تابع ای جکس ثبت لایک‌ها :

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

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

alert(xhr.responseText);

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

می بینید که دقیقا شبیه تابع‌های بالاست،فقط ما کوئری استرینگ رو گذاشتیم updatelike که اینم مشخص میکنه توی فایل php باید کد‌های مربوط به افزایش لایک انجام بشه،اما ما اینجا برای قسمت شرط از دستور alert استفاده کردیم و مقدار responseText رو به عنوان پارامتر براش فرستادیم،خوب چرا؟چون توی پردازش php ما یه مقداری رو برمی گردونیم،می خوایم که اون مقدار رو به کاربر نشون بدیم،مثل چی؟مثل اینکه ثبت امتیاز موفق بوده یا نبوده.

خوب حالا این تابع بالا رو توی کد کلیک کردن دکمه سبز (که قسمت قبل خالی گذاشتیم ) فراخوانی می‌کنیم:

$('.like-btn').on("click",function()
{
$('.l_count').html('<img src="img/loader.gif" style="width:16px;height:16px;">');
updatelike();

});

خوب updatelike که معلومه؟حالا اون کد بالاش چیه؟خوب باید بگم که درخواست ما تا بره و برگرده ممکنه طول بکشه ما هم به رسم ادب، به کاربر محترم نشون میدیم که درخواست در حال پردازشه،پس اومدیم زمانی که کاربر کلیک میکنه توی همون تگ span یه عکس loading گذاشتیم و تا وقتی نتیجه برمیگرده این عکس همین جوری می‌چرخه :).

خوب بچه‌ها تابع ای جکس لازم برای کلیک دکمه قرمز شبیه همون دکمه سبز رنگ ماست :

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

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

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

اسم تابع و مقداری که با کوئری استرینگ میفرستیم  updatedislike هست و گرنه دقیقا شبیه همون تابع updatelike هستش.

خوب اینم از فراخوانی این تابع در کد کلیک  دکمه قرمز رنگ :

$('.dislike-btn').on("click",function(){
$('.d_count').html('<img src="img/loader.gif" style="width:16px;height:16px;">');
updatedislike();

});

اینجا هم دقیقا مثل دکمه سبز رنگ اون تصویر loading رو گذاشتیم و بعدش فراخوانی تابع ای جکس مورد نظرمون.

خوب فکر نمیکردم این قسمت اینقد طولانی بشه اما مجبور شدم توضیحات بیشتری بدم تا خوب مسئله براتون روشن بشه،چون قسمت کد‌های php هم توضیحات خودشو داره پس میمونه برا قسمت بعدی.

خدا قوت و خسته نباشید.

دانلود فایل پروژه (قسمت سوم)

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

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

ناصر

دوست عزیزم یک چیز برای من خیلی جالبه.
من از طریق این آدرس
http://whatismyipaddress.com/ip-lookup?gclid=COzy46CLsLwCFTCWtAodkDMAjg
IP آدرس هر 3 دستگاهی که به یک wifi كانكت بودن رو چک کردم و هر 3 رو دقیقا یک IP آدرس نشون داد.
با منطق جور در نمیاد. شما میدونید مسعله چیه؟

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

راستش نمیدونم اینو.

ناصر

بسيارخوب پس چك ميكنم، فقط توي جدول posts كه ميخوام دستي field هارو اضاف كنم تو قسمت فانكشن چي بايد انتخاب كنم؟ و توي p_title و p_body چيزي بايد بزارم يا خالي باشن؟
من فقط value , ID رو ١ و ٢و ٣ گزاشته بودم.
الباقي خالي سيو كردم.

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

کدوم فانکشن؟یه چیز الکی بزنید مثلا عنوان مطلب اول و متن مطلب اول الی آخر،

ناصر

ممنون، پس به لطف كمك شما من درست پيش رفتم، فقط ١ مشكل، اگه چند دستگاه به يك دستگاه wifi وصل باشه و همگي وارد اين پيج بشن براي همه دستگاها يك ip مشترك در نظر ميگيره، يعني اگه شما با يك سيستم لايك كردين و خواستين با سيستم ديگه كه به همون wifi وصل هست لايك كنيد پيام قبلا لايك شده نشون ميده،
چكار بايد كرد كه در اينجور شرايط براي هر دستگاه يك ip جداگانه در نظر بگيره؟

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

تا اونجایی که من میدونم برای هر دستگاه یه آی پی ست میشه.

ناصر

يعني ممكنه اين هم يك ايراد از جدولهاي من باشه؟
چون من سه id ساختم و هر كدوم رو با يك دستگاه لايك كردم و وقتي جدول likes رو چك كردم هر ٣ لايك با يك ip آدرس زخيره شده بود.

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

آی پی در شبکه حکم شماره اختصاصی رو برای دستگاه داره که پکت های ارسالی و دریافتی به شبکه از طریق همین شماره و شماره مک چک میشن،حالا نمیشه دو دستگاه در یک سیستم دارای یک آی پی مشترک باشن،ما در PHP هم فقط میتونیم چک کنیم آی پی کاربر جعلی نباشه و اونو دریافت کنیم،به احتمال خیلی زیاد بازم در ساختار مطالبتون مشکل هست.

ناصر

يعني ممكنه اين هم يك ايراد از جدولهاي من باشه؟

ناصر

من ٢ تا آيدي ساختم با اعداد ١ و ٤، در جدول posts اومدم دستي اومدم field ١ و ٤ رو وارد كردم و field up و down هم عدد دادم، اگه صفحه رو چك كنيد به خوبي نشون ميده،
درواقع من بايد جدول posts رو براي اولين بار دستي وارد كنم؟

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

آیدی های شما در جدول posts باید از 1 تا 3 باشه،تا برای هر سه تا مطلب داخل صفحه به درستی کار کنه،در غیر این صورت باید به صورت دستی آیدی داخل مطالب رو با آیدی های داخل جدول posts تنظیم کنید.بله برای بار اول باید مطالب رو به صورت دستی وارد کنید.

ناصر

درواقع هرچیزی که برای جدول اول ثبت میشه برای 2 تای دیگه هم ثبت و دقیقا همون رو نشون میده.

ناصر

ازاف کردم و نشون میده اگه چک کنید و همونطور که گفتم فقط برای جدول اولی نشون میده و در صورتی که جدول 2 و 3 رو بخایم لایک کنیم پیغام میده که قبلا لایک شده.

ناصر

دوست عزیز, من فکر میکنم هنوز مشکل از جدول هست. چون هیچ دیتایی در جدول posts ثبت نشده, در صورتی که در جدول likes چند بار لایک ثبت شده.
برای این حل این مشکل چکار باید کرد؟

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

خوب شما چند تا رکورد در جدول posts خودتون با استفاده از تب insert در phpmyadmin اضافه کنید.

ناصر

این پیج من
http://www.naseralipour.com/like2/index.php
دقیقا همون آخرین فایل zip است که در آخر صفحه آموزش قسمت چهار قرار دادین.
و آیدیهاشون از 1 تا 3 هست.

ناصر

یک مسعله دیگه اینه که نمونه نمایشی که شما گزاشتین برای هر کدام از این 3 پیج جداگانه میتونید رای بدین اما در صفحه من اگه به یکی از این 3 صفحا رای دادین برای همه ثبت میشه و دیگه نمیشه رای داد به 2 صفحه دیگه.

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

خوب شما برای جدول مطالب چند تا پست ایجاد کردین؟البته ما اینجا خیلی مبتدی ایجاد کردیم ان قسمت مطالبش رو.باید برای هر مطلب در این جا یه مطلب وجود داشته باشه که آید هاشون به ترتیب از 1 تا 3 باشه.

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

بعید میدونم مشکل از این باشه

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

راستش من خطایی ندیدمو البته فقط یکبار رای ثبت میشه چون برای هر کاربر اینطوری تعریف شده،تابع user_validation کارش همینه،شما بهتره توابع show_like و show_dislike رو چک کنید.

نیاز به لاگین

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