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

تبلیغات
کانال تلگرام فتولیا

در این آموزش خواهیم دید که چگونه می توانیم یک فرم ثبت نام به وسیله 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 به جدول تبدیل کنید.

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`)
)

 

در همین رابطه :   چگونه : محتویات صفحه را درجا با HTML5,jQuery و PHP ویرایش کنیم ؟

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==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> &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

کمی هم کد 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;
}

 

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

منبع

3 Comments

  1. با سلام. ضمن تشکر از آموزش بسیار خوبتون

    خواستم بگم چون من با نسخه ۷ php دنبال کردم این آموزش رو یه جا به مشکل خوردم. شما که از روش اتصال pdo استفاده کردید میدونید که دیگه روش های اتصال mysql دیگه در نسخه های بالا دچار مشکل میشه. لطفا راه حل تبدیل کدهای
    $user_name = mysql_real_escape_string($_POST[‘user_name’]);
    رو بفرمایید. چون با ارور مواجه میشه . به صورت mysqli هم نوشتم اما مشکل حل نشد. چکار باید کرد.
    ممنون از شما

پاسخ دهید

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

More in عكاسی
اینستاگرام چیست و چگونه آن را به فیس بوک مرتبط کنیم ؟

حتما شما نیز در خبرها درباره خرید نرم‌افزار Instagram توسط Facebook چیزهایی شنیده‌اید. این برنامه که تا مدتی پیش تنها...

Close