Ajax, CSS, JavaScript, jQuery, PHP

فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

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

سلام :)

در این مبحث اگر موافق باشید می خواهیم روی یک فرم با شمایل فیبر کربن ! کار کنیم که دارای ارتقاهای اساسی می باشد.یعنی بتواند بدون جاوااسکریپت و css (مخصوصا در خانواده محبوب IE) کار کند و نیز مجهز به نمایی زیبا و دلفریب که حاصل ضرب jQuery و CSS به علاوه Ajax است.

از خصوصیات مهم آن اعتبار سنجی ورودی های فرم به صورت tooltip (آژاکسی) و نیز بقای اسکریپت در زمان غیر فعال بودن جاوااسکریپت هست.

 

قدم ۱ – XHTML

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

دیو carbonForm نگهدارنده اصلی فرم است.این عنصر توسط خصیصه margin در css ، درست رد وسط صفحه قرار می گیرد و نیز با استفاده از جی کوئری به صورت عمودی نیز در مرکز قرار می گیرد.

در داخل آن ما یک تگ heading ویک فرم با fieldContainer داخلش داریم.در داخل آن نیز ۳ دیو formRow خواهیم داشت با کدهایی شبیه زیر :

همینطور که می بینید ،هر label و input در داخل دیو نگهدارنده خودش قرار دارد که در سمت راست ، شناور(float) شده اند.نکته مهم این است که در ورودی های متن، خصیصه name باید با id مساوی باشد زیرا برای نمایش tooltip خطای رخ داده از این روش استفاده خواهیم کرد که در ادامه می بینید

قدم ۲ – CSS

فرم ما برای اینکه حالت فیبر کربنی پیدا کند شدیدا نیازمند css است.در کد پایین از تعدادی عنصر css3 نیز استفاده شده است که موجب گردیده افکت های خوبی را ایجاد کنیم که قبل از این فقط در نرم افزارهای گرافیکی مثل فتوشاپ امکان ایجادشان بود.در اینجا فقط تعدادی از سبک های جالب css را می آوریم و فایل کامل styles.css را در سورس آموزش می توانید پیدا کنید

قدم ۳ -jQuery

بعد از الحاق کتابخانه jQuery و فایل script.js می توانیم برویم سراغ کد نویسی جاوااسکریپت و جان تازه ای در کالبد فرم بدمیم :)

با این کد کلیک کردن دکمه ثبت نام یا فشار دادن دکمه enter موجب ارسال فرم می شود.همچنین برای اینکه فمر به صورت معمولی ارسال نشود یک تابع به نام ()e.preventDefault داریم که از اینکار جلوگیری می کند و یه جایش یک درخواست Ajax به submit.php می فرستد.

پاسخی که برگشت داده میشود به صورت JSON(یک شی جاوااسکریپت) خواهد بود که شامل یک خصیصه مهم وضعیت است.در واقع بوسیله این مقدار است که اسکریپت خطای مربوط به هر کدام از فیلد ها را برایش نمایش می دهد یا به آدرس تعیین شده در آن ریدایرکت میشود.

یک نمونه از پاسخ برگشتی خطا

خطاهای فرم که به صورت tooltip هستند ،به وسیله اسکریپت ایجاد می شوند به این صورت که یک حلقه بین تمام فیلد های فرم ایجاد می کند و هربار چک می کند که آیا id فیلد ها به عنوان خصیصه در جواب برگشتی موجود است یا نه .اگر این طور باید یک tooltip بوسیله تابع ()showTooltip ایجاد میشود.

همچنین دقت کنید که چطور در خط ۱۸ از تابع ()serialize برای ارسال یکجای فیلدها استفاده کرده ایم.نیز در همان خط ۱=fromAjax را ست کردیم تا php پاسخ را به صورت JSON برگشت دهد.

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

 

قدم ۴ – PHP

یکی از قابلیت های خوب این فرم این است که بدون جاوا اسکریپت نیز کار می کند.این کار کردن ، به خاطر خصیصه action فرم است که روی submit.php تنظیم شده است.این به این معنی است که ما تنها نیاز به پیاده کردن اعتبار سنجی داریم و مهم نیست فمر چطور ارسال میشود

حالا تمام خطاهای رخ داده به آرایه errors$ اضافه خواهند شد.همچنین تعیین اینکه خطاها به صورت json بازگشت داده شوند و یا مستقیما نمایش داده شوند بوسیله fromAjax تعیین می شود که قبلا گفتیم.

خوب دیگه فرم کربنی ما تمام شد !

منبع

23 Comments

  1. سلام
    یه سوال دارم من دارم یه فرم ثبت سفارش درست میکنم و به جای فیلد textاز select استفاده کردم ولی پیقامی نمایش داده نمیشود. لطفا راهنمایی کنید:
    این هم کدی که در قسمت demo.html قرار دادم

    ۰/۵ لیتری
    ۱/۵ لیتری

    این هم کدی که درقسمت submit.php قرار دادم
    if(!$_POST[‘name’])
    {
    $errors[‘name’]=’لطفا فرمت مورد نظر را انتخاب کنید!’;
    }
    }

  2. سلام
    کسی هست مطلب یا توضیحاتی واسه پروژه ساخت یک فرم ثبت نام که وقتی کاربر فرم رو پر کرد با زدن دکمه تایید یه ایمیل واسه مدیر سایت بیاد و پس از تایید کردن وارد سایت بشه
    ahmad.reza360@yahoo.com
    اگه فایلی pdfیا هر چی در این مورد داشتین ممنون دارتون میشم واسم ایمیل کنین

  3. سلام.
    ممنون با بابا این مطلب زیبا.
    من می خوام این فرم رو توی یه برگه ی جدا در قالبم ( از وردپرس استفاده می کنم)
    قرار بدم.
    من چطور کد های php وردپرس رو وارد کنم یا چه طور بتونم همچین فرم عضویت یا ورود بسازم( بدون استفاده از پلاگین)
    هر چی سرچ می کنم آموزشی برای ساخت فرم عضویت پیدا نمی کنم.
    ممنون میشم کمکم کنید تا بتونم یه فرم عضویت و ورود کاربران رو خودم بسازم.
    البته php بلد نیستم.ولی اگه آموزشی هست بفرمایید.
    بازم ممنون

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

    1. سلام
      تا جایی که می دونم باید یه افزونه بنویسید تا با وردپرس مچ بشه گرچه افزونه های مثل contact form 7 هم تقریبا همین کارو می کنن

    1. سلام نیما جان
      نه ایمیل که نمیشه .اگه تو خط ۴۹ و ۶۵ کد php دقت کنی اگه خطایی نبود سعی می کنه به یه آدرسی redirect کنه ، حالا می تونی بالای اون خط ها کدهای مربوط به ریختن تو دیتابیس رو بزاری

    1. سلام
      نفرمودید کجاش مشکل دارید ولی احتمالا می خواهید تو دیتابیس ذخیره کنید ولی اینکه کجا رو باید تغییر داد رو دقیق نمی دونید اگه اینطوره یه توضیح کوچیک می دم شاید کمکتون کرد
      این اسکریپت دو نوع کارکرد داره .یکی وقتی به صورت ajax کار می کنه ویکی وقتی به صورت معمولی(جاوااسکریپت غیرفعال)
      در مورد اول کدهای خط ۳۲ تا ۵۲ کار می کنه.اگر خطایی بود کدهای ۳۴ تا ۶۴ اجرا میشن وگرنه کدهای ۴۹ تا ۵۱٫پس اگه می خواید ورودی ها رو تو دیتابیس ذخیره کنید ، می تونید اونجا قرار بدید
      در مورد دوم که بدون آژاکس هست کدهای خط ۵۷ تا ۶۵ اجرا میشن و اگر خطایی نبود در خط ۶۵ نتیجه برگشت داده میشه که باز می تونید اونجا کار ذخیره تو دیتابیس رو انجام بدید.
      البته برای حجیم نشدن برنامه می تونید یک تابع بنویسید و اون رو در این دو محل فراخوانی کنید.
      اگه مشکل از جای دیگه ای بود باز بفرمایین

      موفقیت

  4. سلام
    خوبین ؟
    میشه ترتیب قرار دادن این ها رو هم بگید ؟
    من دارم یه پروژه برا واحد دانشگاهیم با php می نویسم
    و چیزی سر در نمیارم ، خیلی .
    لطفا تو قرار دادن این فرم در طراحی وب سایت کمکم کنید

    ممنون

    :)

    1. سلام
      ممنونم ، خوب لازم نیست کدها رو از تو پست کپی کنید ، می تونید فایل zip رو که شامل همه کدهای پروژه هست رو از آخر بحث دانلود کنید.
      هر کجاش هم مشکل دارید بفرمایید بتونم راهنمایی می کنم حتما
      موفقیت :)

  5. سلام علی جون این تیکه رو خوب اومدی ( خانواده محبوب IE ) پدرمونو در آورده
    یه سایت خبری دارم می نویسم واسه همین سرم شلوغه

پاسخ دهید

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

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

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