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

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

مزیت های استفاده از Ajax

Callback: به‌وسیله Ajax امکان ارسال درخواست به سرور و یا دریافت از سرور به منظور بازیابی یا ذخیره داده بدون ارسال کل صفحه به سرور وجود دارد. عدم ارسال کل اطلاعات فرم به سرور، استفاده از پهنای باند را به حداقل می‌رساند و در نتیجه عملیات سریع‌تر انجام می‌شود. بدیهی است که این کار باعث افزایش کارایی شبکه در سایت‌ها و مناطقی با پهنای باند محدود خواهد شد. هم‌چنین با به‌کارگیریCallback‌ها دیگر نیازی به پردازش تمام عناصر فرم نخواهد بود و ارسال اطلاعات ضروری به جای کل اطلاعات، پردازش‌های سرور را نیز کاهش می‌دهد.

User friendly (کاربر پسند): بدیهی است عدم لود مجدد صفحه و در نتیجه عدم پرش صفحه یا نمایش صفحه سفید در هنگام refresh و افزایش محسوس سرعت نمایش اطلاعات، حس خوب تجربه کاربری (Ux) را افزایش خواهد داد.

Increased Speed (افزایش سرعت): اصلی‌ترین هدف Ajax افزایش سرعت، کارایی و قابلیت استفاده (Usability) وب سایت است. از بارزترین نمونه‌های کاربردی Ajax، می‌توان به رتبه‌دهی کاربران به یک فیلم، برنامه، محصول یا هر سرویس ارائه شده دیگر و ذخیره این اطلاعات در پایگاه داده سایت بدون نیاز به صبر برای لود مجدد صفحه اشاره کرد.

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

Index.php
Dbconfig.php
Register.php
Script.js
Style.css

شکل دیتابیس

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

بعد از ایجاد دیتابیس باید جدول زیر را به آن اضافه کنید (با اسم 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> &nbsp; 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==){
            $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

$('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> &nbsp; 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> &nbsp; Sorry email already taken !</div>');
 
                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; 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> &nbsp; '+data+' !</div>');
 
                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');
 
                    });
 
                }
            }
        });
        return false;
    }
    /* form submit */
 
})

فایل قالب بندی Style.css

body{
    background:#f1f9f9;
}
 
.form-signin {
    max-width: 500px;
    padding: 19px 29px 29px;
    margin:  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:  1px 2px rgba(0,0,0,.05);
       -moz-box-shadow:  1px 2px rgba(0,0,0,.05);
            box-shadow:  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;
}

در این آموزش از فریم ورک محبوب بوت استرپ BootStarp هم استفاده شده است که شما می توانید سورس کامل این آموزش به صورت کامل از فایل ضمیمه دانلود کنید.