50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت امتیازدهی ستاره ای با 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 به سه نوع مختلف نهایت استفاده را برده باشید.

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

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

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

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

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

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

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

  1. amir ۵ اردیبهشت ۱۳۹۹

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

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

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

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

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link