با در این آموزش خواهیم دید که چگونه می توانیم یک فرم ثبت نام به وسیله PHP/MySQL به صورت Ajax (ایجکس) طراحی کنیم. مزیت استفاده از تکنیک ایجکس این است که بعد از زدن دکمه ثبت نام نیازی نیست کل صفحه Refresh شده و دوباره بارگذاری شود و فقط عملیات ثبت نام در پشت صحنه انجام می شود. در طراحی ظاهر فرم از فریم ورک محبوب BootStrap نیز استفاده شده است .
شروع
برای انجام این پروژه ما به فایل هایی نیاز داریم که در زیر آمده اند . فقط کافیست کدهایی ادامه آموزش را در فایل های مربوطه خود قرار دهید و داخل یک پوشه در دایرکتوری اصلی سرور (در XAMPP پوشه htdocs – در WAMP پوشه www و در روی هاست پوشه public_html مد نظر است) کپی کنید. توضیحات هر بخش نیز در ادامه مطلب آمده است .فایل های مورد نیاز به شرح زیر است:
- Index.php
- Dbconfig.php
- Register.php
- Script.js
- Style.css
بعد از اتمام کار نتیجه کار باید فرم تمیزی به شکل زیر از آب درآید:
شکل دیتابیس
یک دیتابیس برای ذخیره اطلاعات ایجاد کنید . اسمی که من برای آن در نظر دارم “dbreg” است ولی شما هر اسمی دوست داشتید می توانید برای آن بگذارید.
بعد از ایجاد دیتابیس باید جدول زیر را به آن اضافه کنید (با اسم tbl_users) . می توانید کدهای زیر را با استفاده از برنامه phpmyadmin به جدول تبدیل کنید.
CREATE TABLE IF NOT EXISTS `tbl_users` ( `user_id` int(11) NOT NULL AUTO_INCREMENT, `user_name` varchar(25) NOT NULL, `user_email` varchar(60) NOT NULL, `user_password` varchar(255) NOT NULL, `joining_date` datetime NOT NULL, PRIMARY KEY (`user_id`) )
Index.php
در این فایل ما کدهای HTML داریم که کار نمایش فرم ثبت نام را انجام می دهند تا کاربران بتوانند ثبت نام کنند. بعد از اینکه کاربر فرم را تکمیل و روی دکمه ثبت نام کلیک کرد آنگاه اطلاعاتش به JavaScript فرستاده می شوند تا اعتبارسنجی (Validation) شده و سپس به وسیله یک درخواست POST با ایجکس به Backend فرستاده شوند.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial-22</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="signin-form">
<div class="container">
<form class="form-signin" method="post" id="register-form">
<h2 class="form-signin-heading">Sign Up</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
<span class="glyphicon glyphicon-log-in"></span> Create Account
</button>
</div>
</form>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Dbconfig.php
این فایل حاوی تمام اطلاعاتی است که ما برای اتصال درست به سرور MySQL نیاز داریم . زیرا برای اینکه بتوانیم اطلاعات را به دیتابیس بفرستیم تا ذخیره شوند نیاز است اول به MySQL در PHP وصل شویم.
<?php
$db_host = "localhost";
$db_name = "dbreg";
$db_user = "root";
$db_pass = "";
try{
$db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
$db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
echo $e->getMessage();
}
?>
Register.php
این فایل حاوی کدهایی است که می تواند درخواست فرستاده شده توسط ایجکس (به صورت POST) را دریافت کرده و در دیتابیس ذخیره کند.
<?php
require_once 'dbconfig.php';
if($_POST)
{
$user_name = mysql_real_escape_string($_POST['user_name']);
$user_email = mysql_real_escape_string($_POST['user_email']);
$user_password = mysql_real_escape_string($_POST['password']);
$joining_date = date('Y-m-d H:i:s');
//password_hash see : http://www.php.net/manual/en/function.password-hash.php
$password = password_hash( $user_password, PASSWORD_BCRYPT, array('cost' => 11));
try
{
$stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_email=:email");
$stmt->execute(array(":email"=>$user_email));
$count = $stmt->rowCount();
if($count==0){
$stmt = $db_con->prepare("INSERT INTO tbl_users(user_name,user_email,user_password,joining_date) VALUES(:uname, :email, :pass, :jdate)");
$stmt->bindParam(":uname",$user_name);
$stmt->bindParam(":email",$user_email);
$stmt->bindParam(":pass",$password);
$stmt->bindParam(":jdate",$joining_date);
if($stmt->execute())
{
echo "registered";
}
else
{
echo "Query could not execute !";
}
}
else{
echo "1"; // not available
}
}
catch(PDOException $e){
echo $e->getMessage();
}
}
?>
در خط ۱ : فایل تنظیمات که در بالا توضیح دادیم به این صفحه الحاق شده است
در خط ۶ تا ۸ : اطلاعات ارسالی ایجکس که فعلا در متغیر سراسری $_POST قرار دارند, در متغیر های جداگانه ذخیره می شود
در خط ۱۲ : رمز کاربر هش (Hash) می شود تا قابل برگشت پذیری نباشد(در این صورت حتی اگر کسی به دیتابیس ما دسترسی پیدا کرد نمی تواند رمز های کاربران را بدست آورد)
در خط ۱۴ تا ۳۶ : یک ساختار Try - Catch ایجاد شده است . اگر در کدهای بین خط ۱۴ و ۳۶ خطایی مربوط به دیتایس رخ دهد آنگاه کدهای خط ۴۴ اجرا می شود
در خط ۱۶ تا ۴۰ : کارهای مربوط به اجرای کوئری SQL و نمایش پیام های متناسب با آن انجام می شود
Script.js
فایل جاوا اسکریپت حاوی کدهایی برای اعتبارسنجی (Validation) داده هایی است که کاربر وارد کرده است(مثلا نام کاربری حتما وارد شده باشد و نیز بیشتر از ۳ کاراکتر داشته باشد) .برای انجام این کار از ابزار داخلی jQuery استفاده کردیم. اگر اعتبارسنجی درست بود خط ۳۸ اجرا شده و تابع مربوطه که کارش ارسال درخواست ایجکس است اجرا خواهد شد.
$('document').ready(function()
{
/* validation */
$("#register-form").validate({
rules:
{
user_name: {
required: true,
minlength: 3
},
password: {
required: true,
minlength: 8,
maxlength: 15
},
cpassword: {
required: true,
equalTo: '#password'
},
user_email: {
required: true,
email: true
},
},
messages:
{
user_name: "Enter a Valid Username",
password:{
required: "Provide a Password",
minlength: "Password Needs To Be Minimum of 8 Characters"
},
user_email: "Enter a Valid Email",
cpassword:{
required: "Retype Your Password",
equalTo: "Password Mismatch! Retype"
}
},
submitHandler: submitForm
});
/* validation */
/* form submit */
function submitForm()
{
var data = $("#register-form").serialize();
$.ajax({
type : 'POST',
url : 'register.php',
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(data)
{
if(data==1){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Sorry email already taken !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
else if(data=="registered")
{
$("#btn-submit").html('Signing Up');
setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000);
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> '+data+' !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
}
});
return false;
}
/* form submit */
});
Style.css
کمی هم کد CSS برای اینکه ظاهر فرم بهتر از قبل شود :
@charset "utf-8";
/* CSS Document */
body{
background:#f1f9f9;
}
.form-signin {
max-width: 500px;
padding: 19px 29px 29px;
margin: 0 auto;
//margin-top:90px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
font-family:Tahoma, Geneva, sans-serif;
color:#990000;
font-weight:lighter;
}
.form-signin .form-signin-heading{
color:#00A2D1;
}
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
font-size: 16px;
height: auto;
padding: 7px 9px;
}
.signin-form
{
//border:solid red 1px;
margin-top:80px;
}
.navbar-brand{
font-family:"Lucida Handwriting";
}
#btn-submit{
height:45px;
}
امیدوارم این مطلب برای شما مفید باشه و ازش استفاده کنید. هر سوالی بود حتما در قسمت نظرات بپرسید ما مشتاق شنیدن نظرات شما هستیم .
با سلام خدمت شما دوست گرامی ممنون از آموزش خوب شما فق می خواستم جهت کمی مشکل به شما عرض کنم در فایل pdoبه علت اینکه ورودی های کاربران با متدprepare امن سازی می شود دیگر احتیاج به تابعmysql_real_escape_string نیست ودر pdoدچار مشکل می شود در نهایت به علت منسوخ شدن این تابع در pdo
وmisqliباید فایل رجیستر شما دوباره نویسی شودتا کاربرانی مثل بنده که مبتدی هستند دچار مشکل نشوند ولی در کل بنده از این آموزش استفاده کاربردی کردم واز شما ممنونم
با سلام. ضمن تشکر از آموزش بسیار خوبتون
خواستم بگم چون من با نسخه ۷ php دنبال کردم این آموزش رو یه جا به مشکل خوردم. شما که از روش اتصال pdo استفاده کردید میدونید که دیگه روش های اتصال mysql دیگه در نسخه های بالا دچار مشکل میشه. لطفا راه حل تبدیل کدهای
$user_name = mysql_real_escape_string($_POST[‘user_name’]);
رو بفرمایید. چون با ارور مواجه میشه . به صورت mysqli هم نوشتم اما مشکل حل نشد. چکار باید کرد.
ممنون از شما
سلام . ممنونم. می تونید به این شکل استفاده کنید:
https://www.w3schools.com/php/func_mysqli_real_escape_string.asp
با سلام خیلی عالی بود فقط یک , کاما در فرم Script.php زیاد هستش
با تشکر