امتیازدهی ایموجی با php و ajax

  • آپدیت شده در تاریخ

امتیازدهی ایموجی با php و ajax

امتیازدهی ایموجی (emoji) همانند فیسبوک یکی از قابلیت های موردعلاقه من است که در صفحه وب بسیار جالب است. مخصوصا برای جمع کردن حالات (emotion) کاربران زمانی که یک امتیاز یا لایک را اضافه می کنند.

در این آموزش php , قصد داریم یک حالت از شبیه سازی این قابلیت امتیازدهی ایموجی با php و ajax را پیاده سازی کنیم.

در این مثال, یک لیست رکوردها را از دیتابیس نمایش می دهیم. هر رکورد شامل یک گزینه برای اضافه کردن لایک توسط کاربر است. با بردن ماوس روی گزینه like آیکون های ایموجی برای افزودن حالات یا همان احساسات کاربر ظاهر می شود.

در آموزش قبلی نحوه ساخت امتیازدهی ۵ ستاره توسط php را دیدیم. اگر آموزش قبلی را خواندید پس پیاده سازی این مثال برای شما آسانتر خواهد بود.

 

گزینه های افزودن یا ویرایش لایک های کاربر با ajax انجام می شود. با کلیک روی آیکون ها, داده های آیکون به سمت کد php برای آپدیت دیتابیس ارسال می شود.

تعداد لایک ها و حالات یکتا در دیتابیس ذخیره و در هر سطر نمایش داده می شوند. بعد از عملیات add/update توسط ajax صفحه بدون رفرش شدن آپدیت می شود.

 

صفحه HTML برای نمایش داینامیک امتیازدهی ایموجی

در مثال امتیازدهی ایموجی با php و ajax از داده های جدول tbl_tutorial بری نمایش داینامیک صفحه استفاده کردیم. این جدول شامل ۳ رکورد به همراه نام و توضیحات هر سطر است. برای هر سطر, یک گزینه like نمایش داده می شود.

با هاور (hover) روی این گزینه ها, آیکون های ایموجی نمایش داده می شود. با کلیک روی آیکون دلخواه, داده مورد نظر به سمت php با ajax ارسال می شود.

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

نمایش ایموجی ها و add/update امتیاز توسط ajax

این اسکریپت به شما توابع jQuery ساخته شده برای نمایش/مخفی کردن آیکون ها با حرکت ماوس روی المنت likeرا نشان می دهد.همچنین شامل توابع انجام عملیات افزودن/بروزرسانی امتیازدهی ایموجی با ajax هستند.

توابع showEmojiPanel و hideEmojiPanel با رویداد mouse-over و mouse-out فراخوانی می شوند.

با کلیک روی آیکون های ایموجی, تابع addUpdateRating() اجرا می شود. این تابع, درخواست ajax را به سمت PHP ارسال می کند.

متد ایجکس فایل addUpdateRating.php را برای پست کردن داده های بصورت پارامتر صدا می زند. بعد از انجام موفقیت آمیز عملیات ajax , تابع بازگشتی یک پاسخ را از سمت سرور برای آپدیت ui دریافت می کند.

در این مثال تعداد لایک ها و آیکون ایموجی را در فرمت HTML نمایش می دهد.

کد PHP برای پردازش عملیات امتیازدهی ایموجی

در این اسکریپت PHP , درخواست ajax توسط پارمترهای tutorial_id و emoji_rating دریافت می شود.اینجا فایل Rate.php برای برای خواندن و آپدیت امتیاز ها در دیتابیس include می کنیم.

در این کد, تابع getRartingByTutorialForMember نتایج دیتابیس برای برای چک کردن اینکه آیا کاربر قبلا برای این آموزش لایکی را ثبت کرده است یا خیر, بررسی می کند اگر خیر, یک رکورد جدید به جدول tbl_member_rating با تابع addRating اضافه می شود.

اگر از قبل موردی توسط این کاربر برای این رکورد در دیتابیس وجود داشت, پس سطر موردنظر بروزرسانی می شود.

بعد از انجام عملیات افزودن و بروزرسانی امتیازها, داده های در فرمت HTML به سمت AJAX برای بروزرسانی UI برگشت داده می شوند.

کلاس PHP برای دسترسی و بروزرسانی دیتابیس

ما دو کلاس برای دسترسی و انجام عملیات insert یا update برای امتیازدهی ایموجی با php ایجاد کردیم.

کلاس Rate.php شامل توابع ساخت کویری دیتابیس و فرم نوع پارامترهای کویری و آرایه مقادیر است. کلاس DBController.php هم وظیفه اتصال به دیتابیس و ساخت کویری های مرتبط به دیتابیس را دارد.

Rate.php

این فایل شامل توابع دریافت همه رکوردهای دیتابیس به همراه داده های امتیازدهی است. از تابع getAllPosts برای join زدن داده های بخش tutorial و rating استفاده کردیم. تابع group_concat نیز برای دریافت دسته جمعی امتیازها از دیتابیس استفاده شده است.

همچنین توابع addRating.php و updateDating.php داده های دریافتی را در فرمت آرایه ای می چینند. این آرایه برای bind کردن در کویری دیتابیس کلاس DBController استفاده می شود.

DBController.php

اسکریپت دیتابیس

کد SQL زیر برای ساخت جداول و قرار دادن داده های مورد نیاز امتیازدهی ایموجی با php و ajax در جدول دیتابیس استفاده شده است.

خروجی – امتیازدهی ایموجی با php و ajax

اسکرین شات زیر به شما خروجی مثال شبیه سازی امتیازدهی ایموجی با php و ajax همانند فیسبوک را نشان می دهد.

امتیازدهی ایموجی با php و ajax

امیدوارم از آموزش ساخت امتیازدهی ایموجی با php و ajax استفاده مفید را برده باشید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

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

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. نوید فلاح ۱۶ آذر ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۱۶ آذر ۱۳۹۷

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

      پاسخ
دوره های آموزشی