Ajax, jQuery, PHP

برنامه نویسی سیستم ساده ثبت نظرات با PHP/MySQL و jQuery به صورت AJAX

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

سلام دوستان

در این مقال می خواهیم با هم یک سیستم ساده ارسال نظرات با php و ajax بنویسیم.این سیستم به صورت یکپارچه با gravatar (سیستم مدیریت آواتار) هماهنگ خواهد شد و به صورت موثر ،نحوه ارتباط بین jQuery با PHP/MySQL را به کمک JSON نمایش خواهد داد.

قدم ۱ – XHTML

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

دیو avatar شامل یک لینک (اگر کاربر هنگام نظر دادن ، لینکی وارد کرده باشد) استو یک تصویر آواتار که از سایت gravatar.com گرفته شده است.در بخش های بعدی و قسمت php به این گزینه می رسیم.در انتها نیز دیو هایی برای اسم ، زمان و متن نظر داریم.

یک بخش مهم دیگر هم در قیمت HTML،همین فرم ثبت نظر است.این فرم به طریق POST ارسال می شود و تکمیل تمام فیلد های آن غیر از آدرس سایت ، ضروری است.

فرم به وسیله آژاکس ارسال می شود . رویه اعتبار سنجی فیلدها نیز در کاملا در پشت خط توسط فایل submit.php انجام میشود که در ادامه و در بخش jQuery به آن می رسیم.هر فیلد نیز یک عنصر label مشابه دارد که به وسیله خصیصه for مشخص میشود.

قدم ۲ – PHP

کار php هندل کردن داده ها بوسیل دیتابیس mysql و نیز ایجاد کدهای مربوط به نمایش نظرات است.همچنین با کمک درخواست های آژاکس می تواند اطلاعات نظر جدید را در جدول comments دیتابیس ذخیره کند.می توانید کدی را که موجب چاپ نظرات می شود را در ذیل مشاهده کنید

پرس و جوی mysql، تمام داده های موجود در دیتابیس را انتخاب کرده و سپس متغیر comments$ توسط آرایه ای از اشیا که از روی کلاس comment ساخته شده اند ، پر می شود.این آرایه بعدا چاپ خواهد شد.

هر نظر یک متد ()markup دارد که کارش تولید کدهای HTML استاندارد و حاضر برای نمایش در صفحه است.شما می توانید نحوه تعریف ساختار این متد و کلاس را در پایین مشاهده کنید.

کلاس یک ردیف را از دیتابیس می گیرد(به وسیله تابع ()mysql_fetch_assoc) و آن را در خاصیت (همان متغیر که چون داخل کلاس است ، خاصیت نامیده میشود) خصوصی data$ ذخیره می کند.استفاده از خاصیت خصوصی باعث میشود که این متغیر فقط در داخل کلاس و توسط متدهای آن قابل دسترسی باشد و از بیرون نتوان به آن دست یافت.

این اسکریپت از gravatar برای نمایش آواتار نظردهندگان استفاده می کند.این سرویس برای همه حتی کسانی که از آن استفاده نمی کنند ، کاملا کاربردی است .زیرا شما را قادر می سازد تا به هر ایمیل تان یک آواتار قرار دهید و اگر همان ایمیل را در هنگام نظر دادن وارد کنید ، آواتار مربوط به آن توسط این سایت برای ارسال میشود.این عکس آواتار را به راحتی و با ارسال یک هش ()md5 از ایمیل به سایت gravatar.com استخراج کرد.دقیقا همان کاری که در خط ۴۸ از کد انجام شده است.

در بالای آن و در خط ۳۹ ، اسکریپت سعی می کند آدرس ثابت برای آواتار پیش فرض (default_avatar.gif) را تعیین کند.این تصویر gif به سایت gravatar به صورت هش md5 پاس داده میشود تا اگر برای ایمیل وارد شده ، آواتاری تعریف نشده بود، این تصویر پیش فرض به جای آن نمایش داده شود.

همانطور که مشاهده می کنید ، متد ()validate کلاس به صورت static تعریف شده است.این به این معنی است که می توان آن را به صورت مستقیم ()Comment::validate فراخوانی کرد و نیازی به ایجاد شی از روی کلاس و سپس فراخوانی متد نیست.کار این متد چیست ؟ جواب : اعتبارسنجی ورودی های فرم که با ajax ارسال شده اند.

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

برای مثال (filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL به این معنی است که آیا $_POST['url'] حاوی یک url صحیح است یا نه.اگر درست باشد ، تابع مقدار متغیر را بر می گرداند وگرنه مقدار false را می دهد.

این روش کاملا کاربردی و آسان است زیرا تا کنون مجبور بودیم از یک سری عبارات منظم و نیز تعداد زیادی دستو if برای اعتبارسنجی مقادیر استفاده کنیم.

همچنین امکان تعریف یک متد دلخواه برای اعتبارسنجی وجود دارد و بدین ترتیب می توان کنترل بیشتری روی این روند داشت.چیزی که در خط های ۳۱ تا ۳۷ کد بالا می بینید.در این خط ها کار validate به متد Comment::validate_text واگذار شده است که در ادامه این متد را تعریف می کنیم

این متد کاراکترهای خاص را به صورت مقاوم در برابر حملات XSS در می آورد و نیز کاراکترهای خط جدید را با تگ < / br> جایگزین می کند.

submit.php نظرات را بوسیله درخواست های ajax دریافت می کند و بعد از اعتبارسنجی ، یک شی JSON و کدهای html نظراتی را بر می گرداند که با موفقیت ذخیره شده اند در غیر این صورت لیستی از خطاها.jQuery از وضعیت ارسالی تشخیص می دهد که خطاها را نمایش دهد و یا کدهای نظر اضافه شده را به صفحه اضافه کند.
در پایین می توانید دو نوع درخواست ممکن را ببینید :

جواب موفقیت آمیز

خاصیت html در اینجا شامل کدهای نظر خواهد بود .همان طوری که در قدم ۱ دیدیم

جواب ناموفق

در صورت بروز خطا ، جی کوئری خطاها را در یک حلقه قرار داده و هر کدام را کنار ورودی مربوطه نمایش می دهد

قدم ۳ – CSS

حالا که می توانیم نظرات را نمایش دهیم و ذخیره کنیم ، می توانیم برویم سراغ زیباتر کردن کارمان .

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

در بخش دوم از استایل شیت مان ، نظر و عناصر فرم را سبک دهی کردیم.فقط توجه کنید که منظور از [input[type=text ،انتخاب تمام عناصر input ای است که خصیصه type شان برابر با text باشد.یعنی تمام فیلدهای متنی.

قدم ۴ – jQuery

حالا اجازه دهید کارمان را با jquery ادامه دهیم ، آخرین بخش از آموزشمان .بعد از افزودن کتابخانه jquery به آخر صفحه (بهترین مکان از نظر بازدهی) می توانیم کار کدنویسی را شروع کنیم.

سیستم نظردهی آژاکسی ما تکمیل شد !

حرف آخر

اگر بخواهید سیستم را روی سرور اجرا کنید بایستی یک جدول بنام comments ایجاد کنید.برای این کار می توانید فایل table.sql را از پایین دانلود کرده و در phpmyadmin اجرا کنید.بعد از آن نیز اطلاعات تماس با دیتابیس را در فایل connect.php وارد کنید.

منبع

34 Comments

  1. سلام
    آموزش مفیدی بود
    فقط میشه کاری کرد که کاربر بتونه برای خودش عکس انتخاب کنه؟
    سایت بنده طوری هست که فقط اعضا میتونند توش فعالیت داشته باشند
    البته سایت کاملا رایگان هست
    فقط میخواستم اگر بشه، کاری کنم که اعضا از طریق کنترل پنلشون بتونند برای خودشون آواتار بذارن
    چون خیلی ها هستند که هنوز از gravatar استفاده نمیکنند

  2. با سلام
    من میخوام وب سایت خبری طراحی کنم که توی صحفه اول مثلا ۱۰ خبر باشه و هر وقت بیشتر از ۱۰تا شده
    خودش به صفحه بعد بره
    مثل سرچ گوگل که پایین صفحات رو زده

  3. سلام و بسیار بسیار ممنون بابت این آموزش خوب و کاملتون.
    اما میخواستم بدونم که چطوری میشه سیستم مدیریت نظرات رو هم ایجاد کرد. البته نه مدیریت به اون صورت!! منظورم اینه که چطوری میشه کاری کرد که نظر پس از تایید به نمایش دربیاد. و همینطور اینکه بشه نظرات ارسال شده رو حذف کرد.
    یعنی یه سیستم مدیریت برای تایید و حذف نظرات :)

  4. بازتاب: آموزش ساخت سی ام اس نظر دهی برای سایت ها و چتروم ها | مکث پاتوق
  5. سلام در مورد سیستم پرسش و پاسخ ممنون که جواب ما رادادید اقای زمانی
    در کل یه توضیح کاملی بدید چون زیاد اشنایی با این کار ندارم خواهشمندم توضیح که چطور میتوانم این صفحه ها را ایجاد کنم جواب شما به سوال من این بود
    ………………..
    می تونید یه صفحه داشته باشید برای اضافه کردن سوال و تو همون صفحه هم سوالات رو لیست کنید.بعد اگر کاربر روی یک سوال کلیک کرد ،بره به صفحه ی دیگری که اونجا هم لیست جواب ها به اون سوال خاص هست و زیرش هم یه فرم دیگه برای ثبت پاسخ
    …………………

    که زیاد متوجح نشدم ممنون میشم توضیح کاملی بدید .
    یا حق

    1. خواهش می کنم ، خوب توضیح فکر کنم کافی بوده ولی باز کمی راحت تر عرض می کنم
      این فرم رو می تونید برای ثبت سوال استفاده کنید .ولی اگر کسی خواست به یه سوالی جواب بده ،باید بتونه روی اون سوال کلیک کنه و بره به یه صفحه دیگه که کارش لیست کردن جواب هایی است که ممکنه قبلا بهش داده شده باشه.به علاوه اینکه یه فرم هم باید تو این صفحه باشه برای ثبت جواب .یعنی دو صفحه :
      ۱٫صفحه اول : کارش ثبت سوال و لیست کردن سوالات
      ۲٫صفحه دوم : کارش ثبت جواب ها و لیست جواب های یک سوال خاص
      امیدوارم روشن گفته باشم

    1. سلام
      می تونید یه صفحه داشته باشید برای اضافه کردن سوال و تو همون صفحه هم سوالات رو لیست کنید.بعد اگر کاربر روی یک سوال کلیک کرد ،بره به صفحه ی دیگری که اونجا هم لیست جواب ها به اون سوال خاص هست و زیرش هم یه فرم دیگه برای ثبت پاسخ

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

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