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

- visibility ١٩ mode_comment

دوستان سلام،در قسمت قبل طراحی HTML و CSS  این آموزش رو تموم کردیم،تو این قسمت میخوایم کد نویسی جاوا اسکریپت ( Jquery , AJAX ) رو انجام بدیم و افکت ها و دستورات لازم رو اضافه کنیم،خوب پس شروع میکنیم.

آموزش مرحله به مرحله

اگه کد های قسمت قبل رو آماده داشته باشین ما توی قسمت CSS خودمون برای دوتا تگ span که وظیفه نمایش تعداد like و dislike رو بر عهده دارن یک استایل تعریف کردیم،حالا به همون قسمت یعنی like span. باید این کد رو اضافه کنیم.

فعلا با این کد ما اینارو مخفی نگه می داریم تا بعدا با جی کوئری اونارو تو موقع مناسب نمایش بدیم.

خوب میریم سر وقت کد های جاوا اسکریپت،اول از همه تابع ready جی کوئری رو می نویسیم :

خوب حالا می خوایم با بردن ماوس روی دکمه های (تصاویر) سبز و قرمز رنگی که داریم اون تگ های span با یه افکت fade نمایش داده بشن و با رفتن ماوس دوباره محو بشن،برای این کار از متد hover جی کوئری استفاده میکنیم،خوب این کد برای دکمه سبز رنگ ما که دارای کلاس like-btn. هستش می نویسیم.

همون طور که می بینید متد hover دو تا تابع به عنوان پارامتر براش قرار دادیم،چرا دو تا؟برای اینکه تابع اول زمانی که موس روی شی قرار میگیره اجرا میشه و تابع دوم  هم وقتی موس از روی شی میره کنار اجرا میشه،توی تابع اول هم نوشتیم که شی ای با کلاس l_count (که همون span کنار دکمه سبز رنگه) به صورت fade و با زمان 500 میلی ثانیه نمایش داده بشه و توی تابع دوم هم گفتیم که همون span تابع بالایی با افکت fade و با زمان 500 میلی ثانبه محو بشه (fadeIn برای ظاهر شدن،fadeOut برای محو شدن).

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

خوب ما همین کد رو برای دقیقا برای دکمه قرمز رنگ هم می نویسیم فقط باید like-btn رو به dislike-btn و  کلاس span رو به d_count تغییر بدیم،یعنی اینطوری :

 

 

خوب حالا برای  ادامه کد لازم برای زمان کلیک کردن روی دکمه های سبز و قرمز رو  می نویسیم،این کد برای دکمه سبز رنگ:

 

توضیح این کد هم اینه برای این کار از متد on استفاده کردیم که دو تا پارامتر داره،اولی نام رویدادی هست که میخوایم اجرا بشه و دوم هم تابعی هست که با اون رویداد باید اجرا بشه (این جا یعنی با کلیک کردن روی like-btn کد هایی که توی تابع هست اجرا میشه).

حالا حتما میخواین بپرسین چرا خالیه؟ تاآخر بخونید به جوابش می رسید.

برای دکمه قرمز رنگ هم همین تابع رو می نویسیم فقط به جای like-btn باید dislike-btn رو قرار بدیم.

خوب تقریبا کد های لازم جی کوئری رو نوشتیم،چک کنید کد تون چیزی  شبیه به این باشه :

ای جکس

برای به کار بردن ای جکس ما باید شی XmlHttpRequest رو بسازیم و ازش استفاده بکنیم،تعریف این شی در همه مرورگر ها به جز IE نسخه های قدیمی یکسانه،برای همین خاطر ما از یک تابع برای تعریف و ایجاد  شی XmlHttpRequest استفاده می کنیم که شی ما رو طبق چیزی که مرورگر ساپورت میکنه برای ما میسازه،من این تابع رو از سایت رسمی خود مایکرسافت گرفتم و توی توضیحاتی که داده بود،این رو گفته بود که این تابع در مرورگر IE تا نسخه 7 رو هم به خوبی ساپورت میکنه (البته توی IE7 تستش نکردم)

خوب اینم از این،فعلا کد خاصی توی اون دو تا تابع که برای کلیک نوشتیم نمی نویسیم (البته خودتون فعلا مثلا با alert تستش کنید)،چرا؟! چون قراره قسمت بعد اونا رو با دستورات و توابع ای جکس پرکنیم.

دوستان خسته نباشید،جلسه بعد این کد هارو تکمیل می کنیم و قسمت PHP رو هم می نویسیم تا سیستم لایک ما آماده به کار بشه.

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

comment دیدگاه کاربران
mohamadi.manijeh

جناب مهندس من کدها را دستکاری نکردم دیتابیسم هم اسکیوال کردم ولی باز این مشکل را داشت وقتی رفتم توی دیتابیس یک مقداری را دستی وارد کردم تونستم خروجی را ببینم یعنی این با مقدار اولیه مشکل داره … بع د هم که مقدار اولیه بهش دادم وقتی روی + – کلیک میکنم پیغام ثبت شد را میدهد ولی این علامت لودینگ همچنان میچرخد تا اینکه یک بار صفحه را رفرش کنم تا از این حالت خارج شود .. یک مورد دیگه هم اینه که اصلا چک نمیکنه من قبلا رای دادم و اجازه میدهد من هر تعداد که میخواهم لایک کنم .. این حالت ویرایش شده فایل هست که من تست میکنم

شما کدی رو که دارین برای من قرار بدین تا من بررسی کنم.

mohamadi.manijeh

همان که شما چندیدن تایپک بالاتر گداشتین
(۱۵ مرداد ۱۳۹۲ ساعت ۱:۳۳ ب.ظ )
که البته دستکاری در کد hover بود ..فرق انچنانی با کد اصلی نداست….

mohamadi.manijeh

کد جاوااسکریپت این بوده

خوب این کد دقیقا همون کدی هست که تست شده و جواب داده،قبلا یکی از کاربران از ما خواسته بودن کد رو کمی بهینه کنیم و به همین خاطر ما هم این کارو انجام دادیم.من این کد های بهینه تر رو برای شما هم قرار میدیم امیدوارم استفاده کنید.خواهشا برای قرار دادن کد ها حتما توی یه فایل بذارید و اپ کنید،اینجوری کلی فضای نظرات به هم میریزه.ممنون
http://up.persianscript.ir/uploads/137804493289211.zip

کریمی

اگر حس روئیدن در تو باشد، حتی در کویر هم رشد خواهی کرد…
(دکتر شریعتی)
ممنون از انتشار اطلاعات مفیدتون. موفق باشید و سلامت.

برای من هیچ اروری نمیده ولی اصلا هیچ کاری هم نمیکنه

عمل نمیکنه

درست شد 🙂

ممنون

raminn

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

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

$('.like').each(function() {
var el=$(this);
var id = el.data("id");
showlike(el,id);
});

نیاز به لاگین

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