illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش کامل ساخت سیستم نظرسنجی با PHP و AJAX (قسمت دوم)

14555 ۱۰ مهر ۹۲

دوستان سلام،توی قسمت قبل کارهای لازم برای بانک اطلاعات و همچنی قسمت HTML و CSS انجام دادیم،توی این قسمت کد های JQuery و AJAX لازم رو مینویسیم،ما اینجا از AJAX خود جی کوئری هم استفاده کردیم که کار باهاش راحتتره،توی قسمت نهایی هم کد های سمت سرور رو می نویسیم.پس با ما همراه باشید.

خوب برای شروع تابع ready جی کوئری رو می نویسیم.

بعدشم سه تا متغییر تعریف میکنیم.

خوب حالا این متغییر ها چی هست؟متغییر اول برای ما مقدار گزینه انتخاب شده رو نگهداری میکنه،متغییر دوم برای ما شناسه سوال (یا همون شناسه نظر سنجی) رو نگهداری میکنه و متغییر سوم هم مشخص میکنه که ما برای صفحه PHP که درخواست ای جکس رو پردازش میکنه چه نوع درخواستی رو میفرستیم (منظور درخواست ثبت نظر جدید یا اینکه نمایش نتایج نظر سنجی).

خوب ما با این تیکه کد مشخص میکنیم که هر وقت کاربر روی یکی از گزینه ها (دکمه هایی radio) کلیک کرد مقدارش توی متغییر answer ذخیره بشه.

دکمه ثبت نظر

برای دکمه ثبت نظر ما اول از همه چک میکنیم ببینیم مقدار answer ست شده یا نه اگه ست نشده بود که پیغام نشون میدیم اگه ست شده بود مقدار متغییر action رو برابر vote قرار میدیم و  مقدار input مخفی که توی فرم گذاشته بودیم و حاوی شناسه سوال (شناسه نظر سنجی) بود رو دریافت میکنیم و داخل متغییر question_id قرار میدیم و بعدشم تابع call_ajax رو فراخوانی میکنیم (تایع call_ajax رو خودمون نوشتیم برای جلوگیری تکرار کد ها).

خوب اینم از کد دکمه نمایش نتایج،اولش مقدار action رو برابر result قرار دادیم،بعدشم مقدار question_id رو مثل دکمه قبلی ست کردیم و در نهایت هم تابع call_ajax رو با پاس دادن متغییر های مناسب فراخوانی کردیم.

تابع call_ajax

خوب بچه ها این تابع هم قیافش کمی غلط اندازه و گرنه چیزی نیست،همین که تابع فراخوانی شد اون صفحه سیاه با پیغام لطفا صبر کنید رو نشون میدیم (می تویند از تصاویر loading استفاده کنید) بعدشم در خواست ایجکس رو ست میکنیم،url مقدار آدرس صفحه سمت سرور هست که درخواست مارو پردازش میکنه وبرمیگردنه،قسمت data هم اطلاعاتی رو که میخوایم بفرستیم مشخص میکنیم (ما اینجا همون متغییر های که مقدار دهی کرده بودیم رو این جا می نویسیم)،type هم نوع درخواست رو مشخص میکنه ما اینجا post گذاشتیم،قسمت success هم با یه تابع مشخص میکنه که اگه درخواست موفق بود و اطلاعات برگشت چه کاری انجام بدیم،اون تابع جلوش هم یه پارامتر به نام data میگیره که این data همون اطلاعات برگشتی از صفحه سمت سرور هست،خوب حالا کار اصلی برمیگرده به تابعی که برای success نوشتیم،خوب اول دو تا دکمه مون رو مخفی میکنیم بعدش اون صفحه سیاه صبر کنید رو محو میکنیم و بعد قسمت عنوان سوال نظر سنجی رو با متن نتایج نظر سنجی عوض کردیم،حالا توی فرمی که داشتیم یه تگ div داشتیم با آیدی options که گزینه ها رو توی خودش نگهداری میکرد حالا ما محتویات این قسمت رو با اطلاعات برگشتی از صفحه سمت سرور تعویض میکنیم اونم با کمی افکت،وقتی این افکت تموم بشه ما افکت حرکت گزینه ها رو انجام میدیم،شما الان تیو فرم خودتون گزینه های مثلا s_result یا data-width رو ندارید چون این قسمت ها توی صفحه سمت سرور تولید میشه و به این قسمت برمیگرده (من فقط این توضیح رو بگم که ما اونجا تگهای p ایجاد میکنیم و داخل هر تگ p یه تگ span قرار میدیم که این تگ های span درصد هر گزینه رو توی خودشون نگهداری میکنن،ما اولش توی قسمت استایل خاصیت width این تگ های span رو برابر صف قرار میدیم،برای هر تگ span ما یه خاصیت جدید به اسم data-width تعریف کردیم و مقدار این خاصیت رو با درصد گزینه، مقدار دهی کردیم،حالا وقتی اطلاعات برمیگرده ما مقدرای که توی خاصیت data-width داریم رو به راحتی با جی کوئری دریافت میکنیم و با متد animate جی کوئری نشون میدیم) خوب احتمالا تیو قسمت بعدی خودتون کامل اینو درک میکنید.

کد های کامل قسمت جی کوئری و ای جکس

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

دانلود کد های پروژه - قسمت دوم

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    بسیار عالی دستتون دردنکنه

  • ‏‏

    سلام من یه سوال داشتم و ببخشین که به این بخش ربطی نداره در هر صورت ممنون میشم حواب بدین.
    بنده بعضی وقتا کامپیوترو برا دانلود تا صبح میزارم روشن بمونه و میخواستم ببینم راهی هست که از نظر امنیت خیالمو راحت کنه یه وقت هک نشه چون یه درایوم عکس شخصی هست !ویندوزم 8 هست .میشه با پسورد گذاشتن رو درایو مورد نظر امنیتشو از نظر هک کردن بالا برد؟

    • ‏‏
      کیوان علی محمدی(۱۲ مهر ۱۳۹۲)

      سلام زیاد نگران این مسئله نباشید چون برای هکر های کار کشته و حرفه ای اطاعات یه رایانه شخصی زیاد مهم نیست،یه Internet Security خوب مثل Kasper یا Avast یا Smart Security شرکت ESET نصب کنید وخیالتون راحت باشه.پسوورد هم برای سیستمتون بذارید و Sharing های که روی پوشه ها انجام دادید رو غیر فعال کنید.

  • ‏‏

    سلام می خواستم بدون چه طوری میشه پرسشنامه روانسنجی ساخت . یعنی فرد بعد پاسخ ، پروفایلش رو ببینه
    یه چیزی مثل این پرسشنامه
    http://www.ravansanj.ir/mmpi70/Questions/

    ممنون میشم توضیح بدید

    • ‏‏
      کیوان علی محمدی(۱۷ مهر ۱۳۹۲)

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

  • ‏‏

    عالی بود آقا
    یه دنیا ممنون

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram