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

- visibility ۱۰ mode_comment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

comment دیدگاه کاربران
BMR

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

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

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

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

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

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

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

وحید صالحی

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

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

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

lili

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

azita

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

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

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

S Hakimi

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

نیاز به لاگین

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