آموزش ساخت فرم ثبت نام با php و ajax
در ادامه سری آموزش php و آموزش ajax از سایت پروژه های برنامه نویسی php میخواهیم ، ساخت فرم ثبت نام با php و ajax را خدمت شما آموزش بدهیم .
مختصر توضیح در مورد AJAX :
اگر تا به حال به طرز کار صفحات وب توجه کرده باشید متوجه می‌شوید که برای نمایش هر صفحه یا هر واکنشی که در سایت رخ میده ، صفحات وب مجدداً بارگذاری (refresh) می‌شوند تا محتوای جدید را نمایش دهند.
تکنولوژی AJAX ایجاد شده تا بدون نیاز به refresh کل صفحه، قسمتی از اطلاعات صفحه بارگذاری شود. در واقع این تکنولوژی به کاربر اجازه میدهد بدون بارگذاری مجدد صفحه، داده‌هایی را به سرور ارسال کند تا در آنجا پردازش شوند. سپس اطلاعات را دریافت و در صفحه وب به نمایش در آورد.
برای ساخت فرم ثبت نام با php و ajax مراحل 1 تا 5 را با هم پیش میریم :
1 : یک جدول برای نگهداری و ذخیره اطلاعات کاربران نیاز داریم تا بتوانیم عملیات ثبت نام را انجام بدیم ، جدول users را به این صورت که میبینید ایجاد میکنیم
CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `firstName` varchar(100) NOT NULL, `lastName` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `mobile` varchar(100) NOT NULL, `jensiyat` int(1) NOT NULL, `country` varchar(30) NOT NULL, PRIMARY KEY (`id`) );
2 : در مرحله دوم یک فرم html به نام index.html میسازیم و عناصر داخل فرم را مقدار دهی میکنیم :
در این فرم یک سری فایل css و js فراخوانی شده که همشون تو فایل دانلود هستند
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Colorlib Templates">
<meta name="author" content="Colorlib">
<meta name="keywords" content="Colorlib Templates">
<!-- Title Page-->
<title>Au Register Forms by Colorlib</title>
<!-- Icons font CSS-->
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- Font special for pages-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
rel="stylesheet">
<!-- Vendor CSS-->
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="css/main.css" rel="stylesheet" media="all">
</head>
<body>
<div class="page-wrapper bg-gra-03 p-t-45 p-b-50">
<div class="wrapper wrapper--w790">
<div class="card card-5">
<div class="card-heading">
<h2 class="title">آموزش ثبت نام با PHP و AJAX</h2>
<p>php-programming.ir</p>
</div>
<div class="card-body">
<form id="registerForm" method="POST">
<div class="form-row m-b-55">
<div class="name">نام شما :</div>
<div class="value">
<div class="row row-space">
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="firstName" id="firstName">
<label class="label--desc">نام : </label>
</div>
</div>
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="lastName" id="lastName">
<label class="label--desc">نام خانوادگی :</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">شماره موبایل :</div>
<div class="value">
<div class="input-group">
<input class="input--style-5" type="text" name="phoneNumber" id="phoneNumber">
</div>
</div>
</div>
<div class="form-row">
<div class="name">ایمیل :</div>
<div class="value">
<div class="input-group">
<input class="input--style-5" type="email" name="email" id="email">
</div>
</div>
</div>
<div class="form-row">
<div class="name">کشور :</div>
<div class="value">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="country" id="country">
<option value="ایران">ایران</option>
<option value="آمریکا">آمریکا</option>
<option value="انگلیس">انگلیس</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
<div class="form-row p-t-20">
<label class="label label--block">ایا شما متاهل هستید ؟</label>
<div class="p-t-15" style="margin-right: 120px; margin-top: -35px">
<label class="radio-container m-r-55">بله
<input type="radio" checked="checked" value="1" name="jensiyat">
<span class="checkmark"></span>
</label>
<label class="radio-container">نه
<input type="radio" value="0" name="jensiyat">
<span class="checkmark"></span>
</label>
</div>
</div>
<div>
<button class="btn btn--radius-2 btn--red" id="btnRegister" type="submit">ثبت نام</button>
</div>
<div class="result">
<p></p>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Vendor JS-->
<script src="vendor/select2/select2.min.js"></script>
<script src="vendor/datepicker/moment.min.js"></script>
<script src="vendor/datepicker/daterangepicker.js"></script>
<!-- Main JS-->
<script src="js/global.js"></script>
<script src="register.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
<!-- end document-->
3 : در این مرحله می خواهیم کدهایی را در فایل connect.php بنویسیم که وظیفه ارتباط با پایگاه داده را بر عهده دارند ، هر جا نیاز باشد که عملیاتی را بر روی پایگاه داده انجام بدیم مانند اضافه کردن کاربر،حذف کاربر و … این فایل را فراخوانی میکنیم .
چرا که پیش نیاز تمام عملیات پایگاه داده ، برقراری ارتباط با پایگاه داده مور نظر هست .
<?php
try {
$connect = new PDO("mysql:host=localhost;dbname=register", "root", "");
$connect->query("Set character set utf8");
} catch (Exception $error) {
echo $error;
}
?>
4: در این مرحله یک فایل جاواسکریپت به نام register.js میسازیم و کدهای زیر را به فایل اضافه میکنیم .
این فایل در صورتی که کاربر بر روی دکمه ورود کلیک کند، فراخوانی و اجرا می شود ، و مقادیر فیلدهای نام ، شماره موبایل ، ایمیل ، کشور و وضعیت تاهل را از کاربر گرفته و به صفحه ای process.php فرستاده و بعد از پردازش اطلاعات نتیجه را بدون اینکه صفحه دوباره بارگذاری شود ( refresh ) به کاربر نمایش میدهد .
$(document).ready(function (e) {
$("#registerForm").on('submit', (function (e) {
e.preventDefault();
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> صبر کنید در حال پردازش اطلاعات هستیم");
$.ajax({
url: "process.php",
type: "POST",
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData: false,
success: function (data) {
for (i = 0; i < data.length; i++) {
if (data == "Fields_empty") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> لطفا فیلدهای خالی را پر کنید");
} else if (data == "User_Created") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> اطلاعات شما با موفقیت ثبت شد");
function explode() {
location.reload();
}
setTimeout(explode, 3000);
} else if (data == "User_notCreated") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> اطلاعات شما ثبت نشد ، لطفا فراید ثبت نام را تکرار کنید");
} else {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> لطفا با پشتیبان تماس بگیرید");
}
}
},
error: function () {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> لطفا با پشتیبان تماس بگیرید");
}
});
}));
});
5 : برای بررسی صحت اطلاعات وارد شده از طرف کاربر یک فایل php با نام process.php ایجاد میکنیم .
در این صفحه ابتدا فایل connect.php را فراخوانی میکنیم تا با برقراری ارتباط با پایگاه داده ، عملیات ثبت ناک کاربر را انجام بدیم .
ابتدا بررسی میکنیم که کاربر تمام فیلدها را پر کرده باشد و در صورتی که فیلدی خالی باشد به کاربر پیغام ” لطفا فیلدهای خالی را پر کنید ” نمایش داده می شود .
بعد از اینکه فیلدها را بررسی کردیم و فیلدی خالی نبود ، عملیات ثبت نام را انجام میدیم و اطلاعات کاربر را پایگاه داده ذخیره میکنیم و پیغام متناسب را به کاربر نمایش میدیم .
<?php
session_start();
$data=array();
include("connect.php");
if (!empty($_POST['firstName']) && !empty($_POST['lastName']) && !empty($_POST['phoneNumber']) && !empty($_POST['email']) && !empty($_POST['country']) && !empty($_POST['jensiyat'])) {
$query_insert_user = "INSERT INTO users (`lastName`, `email`, `mobile`, `firstName`,`jensiyat`, `country`) VALUES
('" . $_POST['lastName'] . "','" . $_POST['email'] . "','" . $_POST['phoneNumber'] . "','" . $_POST['firstName'] . "','" . $_POST['jensiyat'] . "','" . $_POST['country'] . "');";
$result_insert_user = $connect->prepare($query_insert_user);
$insert_user = $result_insert_user->execute();
if ($insert_user) {
array_push($data,'User_Created');
} else {
array_push($data,'User_notCreated');
}
} else {
array_push($data,'Fields_empty');
}
echo json_encode($data);
خوشحال میشیم هر سوالی داشته باشید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما خواهیم بود .
موفق و پیروز باشید.
