ساخت امتیازدهی ستاره ای با PHP و Ajax

ساخت امتیازدهی ستاره ای با PHP و Ajax

از کجا می دانید که خواننده مقالات یا مشتریان چه نظری بر روی محتوای وبسایت شما دارند؟ چطور قابلیت امتیازدهی ستاره ای به شما در جمع کردن نظرات مشتریان کمک می کند؟

در این آموزش قصد داریم به شما نحوه ساخت امتیازدهی ستاره ای با PHP و Ajax را بصورت حرفه ای یاد بدیم.

در مقالات قبلی منتشر شده نحوه پیاده سازی این سیستم را یاد گرفتیم :

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

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

وبسایت ها از روش های مختلفی به کاربران اجازه امتیازدهی مطلب را می دهند. برای مثال امتیازدهی ستاره ای (بسیار محبوب)، امتیازدهی انگشتی (بالا-پایین) همانند فیسبوک، ایموجی و غیره…

ساخت امتیازدهی ستاره ای با PHP و Ajax

قطعا مثال های زیادی از سیستم های امتیازدهی را قبلا دیدید و ما در این مثال همه آن ها را یکجا جمع کردیم.

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

  • امتیازدهی ۵ ستاره ای
  • امتیازدهی لایک
  • امتیازدهی ایموجی

 

پلاگین ها آماده برای داینامیک سازی امتیازدهی ستاره ای

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

برای مثال، Reteit یک افزونه امتیازدهی براساس jQuery اس که به شما اجازه افزودن امتیازدهی ستاره ای به یک لیست، بخش انتخابی و دیگر بخش های HTML را می دهد.

همچنین از Font-Awesome, Material-icons برای نمایش آیکون های امتیازدهی پشتیبانی می کند.

UpvoteJS نیز یک پکیج جاواسکریپت است که برای رندر ویجت های امتیازدهی همانند سایت StackExchange است.

اگر وبسایت وردپرسی دارید, یک پلاگین رایگان و معروف به نام Wp-PostRatings برای پیاده سازی قابلیت امتیازدهی وجود دارد.

 

مزایای ساخت اسکریپت سفارشی امتیازدهی

با ساخت امتیازدهی ستاره ای با PHP و Ajax بصورت سفارشی، منطق کدها به منظور ایجاد سفارش سازی های دلخواه و توسعه و رفع مشکلات بسیار آسان خواهد بود

همچنین اضافه بار ناشی از امکانات اضافه و غیر نیاز ما کاهش پیدا می کند. همچنین انرژی و زمان ما برای مدیریت هزاران خط کد برای این قابلیت با یک UI ساده هدر نمی رود.

 

 ساخت امتیازدهی ستاره ای با PHP و Ajax

من یک اسکریپت امتیازدهی ستاره ای براساس AJAX و با PHP  و jQuery را ایجاد کردم.

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

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

برای ثبت امتیازها، درخواست توسط Ajax به سمت کد PHP ارسال می شود و آنجا امتیاز دوره در دیتابیس MySQL ذخیره می شود.

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

تصویر زیر ساختار فایل های استفاده شده در این مثال را نشان می دهد :

ساخت امتیازدهی ستاره ای با PHP و Ajax

دیتابیس امتیاز دهی

ما دو جدول tbl_courses و tbl_course_rating را ایجاد کردیم.جدول tbl_courses شامل دوره هایی است که کاربر امکان ثبت امتیاز برای آنها را دارد.

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

اسکریپت زیر برای ایجاد جداول و دامپ کردن داده های آن استفاده شده است که به راحتی می توانید برای ساخت جداول در محیط اجرای خود بهره ببرید.

sql/db_rating.sql

 

بخش UI نمایش گزینه امتیازدهی

در صفحه لندینگ, لیست دوره ها از دیتابیس خوانده ونمایش داده می شوند. کد HTML مورد نظر در اینجا قرار داده شده.

عناصر امتیازدهی بر اساس ثابت PHP تعریف شده در فایل پیکربندی لود می شوند که می تواند امتیازدهی ۵ ستاره ای یا ایموجی یا لایک باشد.

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

index.php

 

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

star-rating-view.php    ,    favorite-rating-view.php     ,    emoji_rating_view.php

این فایل ها با رویداد onClick روی المان مشخص نمایش داده می شوند.

star-rating-view.php

favourite-rating-view.php

در قالب امتیازدهی ایموجی, محدوده ای از ۵ آیکون احساسات از خیلی غمگین به خیلی خوشحال نشان داده می شود.

توصیه می شود از این قالب برای بخش پشتیبانی / تیکت استفاده کنید تا مشتریان بتوانند احساس خود از پشتیبانی شما را ثبت کنند.

emoji-rating-view.php

 

استایل های CSS

assets/css/star-rating-style.php

 

توابع jQuery برای مدیریت عملیات امتیازدهی

این فایل شامل توابع جی کوئری برای آماده سازی درخواست های AJAX برای ذخیره امتیازهای کاربران است.

همچنین رویدادهای ماوس را برای هایلایت کردن عناصر  امتیازدهی مدیریت می کند.

تابع mouseOverRating() ستاره یا دیگر عناصر امتیازدهی را هایلایت می کند. مشابه آن, mouseOutRating() با برداشتن ماوس از روی عناصر آن را به حالت UI قبلی برمی گرداند.

کد Ajax در addRating() نیز درخواست را به همراه آدرس PHP و داده ها آماده می کند. در صورت موفقیت آمیز بودن درخواست AJAX , ظاهر را بروزرسانی می کند.

assets/js/rating.js

 

ذخیره سازی امتیازهای کاربر در دیتابیس MySQL

وقتی اسکریپت AJAX صدا زده می شود, یک درخواست را به سمت PHP ارسال می کند. در PHP نیز داده های دریافتی در دیتابیس ذخیره می شوند.

براساس نمایش قالب متفاوت از امتیازدهی, محدوده مقدار امتیاز از ۱ تا ۵ تغییر می کند.

پیکربندی زیر برای ست کردن ظاهر عناصر امتیازدهی ست شده است. مقادیر قابل قبول بصورت کامنت در کد ظاهر شده اند.

Common/Config.php

کد PHP زیر توسط AJAX صدا زده می شود که امتیاز کاربران را در دیتابیس ذخیره می کند.

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

ajax-end-point/insertRating.php

این کد نیز دوره ها و امتیاز آنها را از دیتابیس خوانده و در کد HTML نمایش می دهد.

getRatingData.php

 

در دو فایل PHP بالا, بدلیل استفاده نکردن از سیستم لاگین و ریجستر, آیدی کاربر را  در متغییر $userid قرار دادم که شما می توانید آیدی  را از کاربر لاگین شده در سیشن ها بخوانید.

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

getUserRating() و getTotalRating()توابعی برای برگشت دادن داده های مربوط به نمایش آمار امتیاز ها هستند.

isUserRatingExist() بررسی می کند که امتیاز هر کاربر برای هر دوره یکبار ثبت شده باشد.

من از دستورات از پیش ساخته شده MySQLi برای اجرای کوئری های دیتابیس استفاده کردم.

Model/Rating.php

 

خروجی اسکریپت ساخت امتیازدهی ستاره ای با PHP و Ajax

ساخت امتیازدهی ستاره ای با PHP و Ajax

ساخت امتیازدهی ستاره ای با PHP و Ajax

در اسکرین شات زیر, یک متن قرمز رنگ را می بینید که یک خطا برای کاربری است که قصد ثبت امتیاز دوباره را دارد.

ساخت امتیازدهی ستاره ای با PHP و Ajax

امیدواریم از آموزش ساخت امتیازدهی ستاره ای با PHP و Ajax به سه نوع مختلف نهایت استفاده را برده باشید.

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

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

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

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

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

  1. نیکی ۱۸ اردیبهشت ۱۴۰۰

    سلام وقت بخیر
    من یه دیتابیس دارم مربوط به خواننده ها هستش
    اگه توی تیبل singer_rating هر کابر به چند خواننده امتیاز داده باشه
    و چندین خواننده وجود داشته باشه اگه بخوام سه تا از محبوب ترین خواننده ها رو انتخاب کنم چطوری باید این کارو انجام بدم

    پاسخ
    1. حسن شفیعی ۱۸ اردیبهشت ۱۴۰۰

      سلام.
      ممنون.
      در مورد دستور sql با join جستجو کنید

      پاسخ
      1. نیکی ۱۸ اردیبهشت ۱۴۰۰

        ممنون میشه بگید از کدام روش join استفاده کنم

        پاسخ
  2. محمود رنجبر ۲۲ دی ۱۳۹۹

    سلام حسن جان این ایمیل که میفرستید نمایش دیدگاه که میزنیم توی یه سایت دیگه صاف ما رو میبره رو نظری که ثبت کردیم چطوریه شما طرز کارش رو بلدید آموزش بدید ممنونم

    پاسخ
    1. حسن شفیعی ۲۲ دی ۱۳۹۹

      سلام.
      هر کامنتی که در سایت ثبت می کنید و نمایش میدید یک id در تگ html بدید مثلا

      که در حلقه که کامنت ها رو در سایت لیست می کنید id کامنت داخل دیتابیس رو گرفته و در تگ کپی کنید.
      بعد از آن می تونید اون رو بصورت site.com/mypost#comment_123 ایمیل کنید و مستقیما بعد باز کردن کامنت موردنظر نمایش داده میشه

      پاسخ
  3. محمود رنجبر ۲۲ دی ۱۳۹۹

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

    پاسخ
    1. حسن شفیعی ۲۲ دی ۱۳۹۹

      سلام
      با window.location.href میتونید url فعلی را دریافت و با
      window.location.replace(PageURL);
      ریدایرکت کنید

      پاسخ
  4. محمود رنجبر ۲۲ دی ۱۳۹۹

    سلام حسن جان من کار سیستم امتیاز ددهی رو به پایان رسوندم ولی برای رفرش صفحه با دستور header بهم خطای can not modify header میده خواستم راهنماییم کنید چطوری صفحه index رو رفرش کنم کد ها رو تو crisp براتون میفرستم با دستورات ajax هم زدم نشد با تشکر فراوان از سایت خوبتون

    پاسخ
    1. حسن شفیعی ۲۲ دی ۱۳۹۹

      سلام.
      اول کدهای php بعد از آموزش ریدایرکت با php

      پاسخ
  5. محمود رنجبر ۲۱ دی ۱۳۹۹

    سلام مهندس شفیعی نازنین من یه فیلم آموزشی تو این زمینه دانلود کردم فقط واسه میانگین گرفتن میخوام راهنماییم کنید چطوری توی یک جدول همه سطرهایی که دارای فیلد کلید خارجی یکسان هستند رو select کنم با دستور where فقط یکیشونو میاره ممنونم از راهنمایی ها تون

    پاسخ
    1. حسن شفیعی ۲۱ دی ۱۳۹۹

      سلام.
      در مورد join در mysql جستجو کنید
      https://www.w3schools.com/sql/sql_join.asp

      پاسخ
      1. محمود رنجبر ۲۱ دی ۱۳۹۹

        سلام حسن جان با همون where مشکلم حل شد باید دیتای برگشتی از تابع رو به صورت آرایه بر میگردوندم با تشکر از سایت خوبتون

        پاسخ
  6. amir ۵ اردیبهشت ۱۳۹۹

    سلام
    یک کد select داخل بعضی از سایت ها هست که میتونیم چند تا option از داخلش انتخاب کنیم اما سوال که پیش میاد چه جوری چندتا داده ارسال میکنه؟و اینکه اگر ممکن یک نمونه کد و نحوه دریافت و ارسال داده با php مثال بزنید؟
    http://dl.sibup.ir/dl/uploads/guest/158773101479551.png

    پاسخ
    1. حسن شفیعی ۵ اردیبهشت ۱۳۹۹

      سلام. از این آموزش می توانید استفاده کنید :
      ساخت لیست باکس چند انتخابی با jQuery و PHP
      موفق باشید.

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