0
آموزش ایجاد صفحه ثبت نام با Ajax در PHP
آموزش ایجاد صفحه ثبت نام با Ajax در PHP
در این قسمت برای شما آموزش نحوه ثبت نام کاربر با Jqury و Ajax به زبان php را آماده کرده ایم.
برای اینکه ما بتوانیم از قابلیت های Jquery و Ajax استفاده کنیم ابتدا باید آخرین نسخه Jquery را دانلود کرده و در برنامه خودتان استفاده کنید ما در فایل این برنامه این فایل را قرار داده ایم.
برای ثبت نام کاربر به زبان php ما به صفحات ذیل نیازمندیم که به ترتیب تک تک صفحات را توضیح می دهیم.
قبل از اینکه به سراغ توضیح صفحات برویم ابتدا باید یک پایگاه داده ایجاد کرده و جدولی را با فیلدهای زیر ایجاد نماییم.
ما در این برنامه فیلدهای Id,Username,Email,Password را در نظر گرفته ایم ولی شما بسته به وب سایت خودتان می توانید فیلدهایی را به این جدول اضافه نمایید.
صفحه index.php : کدهای این صفحه به صورت زیر می باشد.
<!DOCTYPE html>
<html>
<head>
<title>ثبت نام ایران گنج</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>ثبت نام</h2>
<hr/>
<div id="error"></div>
<label>نام کاربری :</label>
<input type="text" name="username" id="username">
<label>ایمیل :</label>
<input type="text" name="email" id="email">
<label>پسورد :</label>
<input type="password" name="password" id="password">
<label>تکرار پسورد :</label>
<input type="password" name="rePassword" id="rePassword">
<input type="button" name="register" id="register" value="ثبت نام">
</form>
</div>
</div>
</body>
</html>
کدهای این صفحه شامل یک فرم می باشد که آن را ایجاد کرده ایم. ما در این فرم فیلدهای نام کاربری ، ایمیل ، رمزعبور و تکرار رمز عبور را در نظر گرفته ایم. ولی شما می توانید بسته به فرم ثبت نامی که در سایتتان می خواهید راه اندازی کنید. که می توانید تعداد فیلدها را کم یا زیاد کنید.
ولی نکته ای که باید رعایت کنید باید برای فیلدهایی که در فرم در نظر می گیرید ID و Name مناسب را انتخاب کنید. چون در صفحه Jquery به این ها نیازمندیم.
در این صفحه یک تگ div با آی دی error قرار داده ایم که پیغام های خطا را به کاربر نشان می دهیم.
همچنین در تگ head فایل jquery و فایل Css ای که نوشتیم را لینک کرده ایم.
برای زیبایی فرم از css استفاده کردیم که می توانید کدهای آن را در زیر ببینید.
body {
direction: rtl;
font-family: 'b nazanin', serif;
}
h2 {
text-align: center;
font-size: 24px;
}
hr {
margin-bottom: 30px;
}
div.container {
width: 500px;
height: 610px;
margin: 50px auto;
font-family: 'b nazanin', serif;
position: relative;
}
div.main {
width: 320px;
padding: 10px 55px 40px;
background-color: rgba(187, 255, 184, 0.65);
border: 15px solid white;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
input[type=text], [type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font-size: 16px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#register {
font-size: 20px;
font-family: 'b nazanin', serif;
margin-top: 15px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover {
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}
.error {
border: solid #ff0000;
font-family: 'b nazanin', serif;
font-size: 18px;
padding-right: 10px;
}
صفحه registration.js : کدهای این صفحه به صورت زیر می باشد.
$(document).ready(function () {
$("#register").click(function () {
var username = $("#username").val();
var email = $("#email").val();
var password = $("#password").val();
var rePassword = $("#rePassword").val();
var message = "";
if (username == '' || email == '' || password == '' || rePassword == '') {
message = "فیلدهای زیر را تکمیل کنید" + "<br/>";
if (username == '') {
message += "نام کاربری نمی تواند خالی باشد" + "<br/>";
}
if (email == '') {
message += "ایمیل نمی تواند خالی باشد" + "<br/>";
}
if (password == '') {
message += "پسورد نمی تواند خالی باشد" + "<br/>";
}
if (rePassword == '') {
message += "تکرار پسورد نمی تواند خالی باشد" + "<br/>";
}
$("#error").addClass("error");
$("#error").html(message);
}
else if ((username.length) < 6) {
message = "نام کاربری نمی تواند کمتر از 6 کاراکتر باشد";
$("#error").addClass("error");
$("#error").html(message);
}
else if ((password.length) < 6) {
message = "پسورد نمی تواند کمتر از 6 کاراکتر باشد";
$("#error").addClass("error");
$("#error").html(message);
}
else if (password!=rePassword) {
message = "پسورد و تکرار آن یکسان نیستند";
$("#error").addClass("error");
$("#error").html(message);
}
else {
$("#error").hide();
$.post("register.php", {username1: username, email1: email, password1: password},
function (data) {
if (data == 'ثبت نام شما با موفقیت انجام شد') {
$("form")[0].reset();
}
$("#error").show();
$("#error").addClass("error");
$("#error").html(data);
});
}
});
});
در این صفحه ابتدا چک می کنیم که کاربر بر روی دکمه ثبت نام کلیک کرده یا نه بعد از آن نام کاربری ، ایمیل، پسورد و تکرار پسورد را دریافت کرده و در متغیرهای مربوطه قرار می دهیم.
سپس هر متغیر را چک می کنیم و در صورت خالی بودن هر متغیر پیغام مربوطه را در در متغیر message قرار داده و در درون تگ div ای که در صفحه index.php قرار دادیم نمایش می دهیم و به آن css نیز داده ایم.
به همین ترتیب چک می کنیم که نام کاربری کمتر از 6 کاراکتر ، پسورد کمتر از 6 کاراکتر نباشد و همچنین پسورد و تکرار آن یکسان باشند.
اگر همه این ها درست بود نام کاربری ، ایمیل و پسورد را به صفحه register.php ارسال می کنیم. و منتظر می مانیم تا این صفحه خروجی را فرستاده و در صورت موفقیت آمیز بودن پیغام مورد نظر را به کاربر نشان دهیم.
صفحه register.php : کدهای این صفحه به صورت زیر می باشند.
<?php
include_once "db_connection.php";
//اطلاعات ارسالی را دریافت می کنیم
$username = $_POST['username1'];
$email = $_POST['email1'];
$password = $_POST['password1']; // در اینجا می توانید پسورد را رمزنگاری کنید
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // در اینجا ایمیل را از کراکترهای اضافی پاک می کنیم
$data = 0;
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "ایمیل وارد شد نامعتبر می باشد";
} else {
$query = "SELECT * ";
$query .= "FROM users ";
$query .= "WHERE Username='{$username}' ";
$result = mysqli_query($connection, $query);
if ($result) {
$data = mysqli_num_rows($result);
}
if ($data != 1) {
$data = 0;
$query = "SELECT * ";
$query .= "FROM users ";
$query .= "WHERE Email='{$email}' ";
$result = mysqli_query($connection, $query);
if ($result) {
$data = mysqli_num_rows($result);
}
if ($data != 1) {
$data = 0;
//ثبت نام
$query = "INSERT INTO users (";
$query .= " Id,Username,Email,Password ";
$query .= ") VALUES (";
$query .= " NULL,'{$username}','{$email}','{$password}' ";
$query .= ")";
$result = mysqli_query($connection, $query);
if ($result) {
echo "ثبت نام شما با موفقیت انجام شد";
} else {
echo "مشکلی در سیستم به وجود آمده دوباره تلاش کنید";
}
} else {
echo "این ایمیل قبلا ثبت شده است";
}
} else {
echo "این نام کاربری قبلا در سیستم ثبت شده است";
}
}
//بستن کانکشن
mysqli_close($connection);
?>
در صفحه ای که کدهای Jquery را نوشتیم اطلاعات را با Post فرستادیم در این صفحه نیز با Post دریافت می کنیم. و در متغیرهای مربوطه قرار می دهیم.
ابتدا محتوای ایمیل و اینکه ایمیل وارد شده معتبر می باشد یا نه را چک کردیم که درست باشد یعنی ایمیلی که وارد کرده از لحاظ ساختاری درست باشد.سپس یک کوئری نوشتیم که آیا این نام کاربری قبلا در سیستم ثبت شده نه اگر ثبت شده بود به کاربر پیغام میدهیم، سپس ایمیل را به همین ترتیب چک می کنیم و به کاربر پیغام می دهیم.
در صورتی که همه اینها درست بود با دستور Insert اطلاعات مورد نظر را در پایگاه داده ثبت می کنیم و به کاربر پیغام ثبت نام شما با موفقیت انجتم شد را نمایش می دهیم.
صفحه db_connection.php : کدهای این صفحه به صورت زیر می باشند.
<?php
define("DB_SERVER", "localhost");
define("DB_USER", "root");
define("DB_PASS", "");
define("DB_NAME", "register");
$connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
mysqli_query($connection, "set names 'utf8'");
if (mysqli_connect_errno()) {
die("database connection failed: " .
mysqli_connect_error() .
"(" . mysqli_connect_errno() . ")"
);
}
?>
در این صفحه کدهای ارتباط با پایگاه داده را قرار داده ایم که نیاز به توضیح خاصی ندارد.
توجه : فایل sql پایگاه داده نیز ضمیمه برنامه می باشد.
این مطلب را به اشتراک بگذارید...
نظر / سوال