Ajax, PHP

ایجاد آسان فرم ثبت نام با PHP/MySQL به صورت Ajax

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

در این آموزش خواهیم دید که چگونه می توانیم یک فرم ثبت نام به وسیله PHP/MySQL به صورت Ajax (ایجکس) طراحی کنیم. مزیت استفاده از تکنیک ایجکس این است که بعد از زدن دکمه ثبت نام نیازی نیست کل صفحه Refresh شده و دوباره بارگذاری شود و فقط عملیات ثبت نام در پشت صحنه انجام می شود. در طراحی ظاهر فرم از فریم ورک محبوب BootStrap نیز استفاده شده است .

 

شروع

برای انجام این پروژه ما به فایل هایی نیاز داریم که در زیر آمده اند . فقط کافیست کدهایی ادامه آموزش را در فایل های مربوطه خود قرار دهید و داخل یک پوشه در دایرکتوری اصلی سرور (در XAMPP پوشه htdocs – در WAMP پوشه www و در روی هاست پوشه public_html مد نظر است) کپی کنید. توضیحات هر بخش نیز در ادامه مطلب آمده است .فایل های مورد نیاز به شرح زیر است:

 

  1. Index.php
  2. Dbconfig.php
  3. Register.php
  4. Script.js
  5. Style.css

بعد از اتمام کار نتیجه کار باید فرم تمیزی به شکل زیر از آب درآید:

Ajax-Registration-Script-Using-JQuery-with-PHP-and-MySQL

 

شکل دیتابیس

یک دیتابیس برای ذخیره اطلاعات ایجاد کنید . اسمی که من برای آن در نظر دارم “dbreg” است ولی شما هر اسمی دوست داشتید می توانید برای آن بگذارید.

بعد از ایجاد دیتابیس باید جدول زیر را به آن اضافه کنید (با اسم tbl_users) . می توانید کدهای زیر را با استفاده از برنامه phpmyadmin به جدول تبدیل کنید.

 

Index.php

در این فایل ما کدهای HTML داریم که کار نمایش فرم ثبت نام را انجام می دهند تا کاربران بتوانند ثبت نام کنند. بعد از اینکه کاربر فرم را تکمیل و روی دکمه ثبت نام کلیک کرد آنگاه اطلاعاتش به JavaScript فرستاده می شوند تا اعتبارسنجی (Validation) شده و سپس به وسیله یک درخواست POST با ایجکس به Backend فرستاده شوند.

 

Dbconfig.php

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

 

Register.php

این فایل حاوی کدهایی است که می تواند درخواست فرستاده شده توسط ایجکس (به صورت POST) را دریافت کرده و در دیتابیس ذخیره کند.

 

در خط ۱ : فایل تنظیمات که در بالا توضیح دادیم به این صفحه الحاق شده است

در خط ۶ تا ۸ : اطلاعات ارسالی ایجکس که فعلا در متغیر سراسری $_POST قرار دارند, در متغیر های جداگانه ذخیره می شود

در خط ۱۲ : رمز کاربر هش (Hash) می شود تا قابل برگشت پذیری نباشد(در این صورت حتی اگر کسی به دیتابیس ما دسترسی پیدا کرد نمی تواند رمز های کاربران را بدست آورد)

در خط ۱۴ تا ۳۶ : یک ساختار Try - Catch ایجاد شده است . اگر در کدهای بین خط ۱۴ و ۳۶ خطایی مربوط به دیتایس رخ دهد آنگاه کدهای خط ۴۴ اجرا می شود

در خط ۱۶ تا ۴۰ : کارهای مربوط به اجرای کوئری SQL و نمایش پیام های متناسب با آن انجام می شود

 

Script.js

فایل جاوا اسکریپت حاوی کدهایی برای اعتبارسنجی (Validation) داده هایی است که کاربر وارد کرده است(مثلا نام کاربری حتما وارد شده باشد و نیز بیشتر از ۳ کاراکتر داشته باشد) .برای انجام این کار از ابزار داخلی jQuery استفاده کردیم. اگر اعتبارسنجی درست بود خط ۳۸ اجرا شده و تابع مربوطه که کارش ارسال درخواست ایجکس است اجرا خواهد شد.

 

Style.css

کمی هم کد CSS برای اینکه ظاهر فرم بهتر از قبل شود :

 

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

منبع

One Comment

پاسخ دهید

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

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

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