آموزش برنامه نویسی در مشهد
ثبت نام کاربر برای ورود به سیستم یکی از مهم ترین اجزا در هر سایت می باشد. در مطلب آموزش ساخت فرم ثبت نام با PHP و MySQL به شما یاد خواهیم داد که چطور در PHP با پشتیبانی MYSQL فرآیند ثبت نام به ساده ترین شکل انجام شود. از مهم ترین ویژگی های کامپوننت های ارائه شده در این مطلب، سادگی و سبک بودن آن نسبت به سایر نمونه های مشابه می باشد. در ادامه با آکادمی برنامه نویسان؛ برگزار کننده دوره های آموزش طراحی سایت در مشهد همراه باشید.
نمونه کد آموزش ساخت فرم ثبت نام با PHP و MySQL
در این مثال، ما فرم ثبت نام را با اسکریپ لاگین و ورود ایجاد کرده ایم. پس از پیاده سازی این قابلیت، در صفحه اصلی سایت این فرم با لینک ثبت نام (sign up) نمایش داده میشود و کاربر می تواند با ورود اطلاعات ثبت نام نموده و سپس وارد شود. کاربرانی که از قبل ثبت نام کرده اند نیز با ورود اطلاعات ابتدا احراز هویت شده و سپس امکان ورود را پیدا می کنند.
در این فرم اطلاعاتی از قبیل نام کاربری، ایمیل و همچنین رمز ورود درخواست میشود. پس از ارسال اطلاعات، کد php اجازه ثبت نام را در صورتیکه ایمیل تکراری نباشد ارائه می دهد.
نحوه ایجاد فرم ثبت نام برای ورود به سایت با PHP
برای انجام این کار ابتد سه فرم ایجاد می کنیم برای ورود، ثبت نام و داشبورد برای این کد ها.
در ادامه کد HTML برای نمایش فرم ورود کاربر وجود ارائه شده است. در این فرم دو ورودی در نظر گرفته شده است که به کاربر اجازه می دهد تا با ورود نام کاربری و رمز عبور وارد شود. بدون این اطلاعات امکان، کد اعتبارسنجی امکان ورود را به کاربر نخواهد داد.
تابع loginValidation() شامل اسکریپ اعتبار سنجی می باشد. با ارسال فرم ورود، کد PHP اعتبار کاربر را تایید می کند. در شرایطی که کاربر تلاش کند تا با اطلاعات اشتباه وارد سایت شود، کد پیغام خطای ورود به سیستم نمایش داده خواهد شد. همچنین در این فرم امکان انتخاب فراموشی رمز عبور برای کاربر در نظر گرفته شده است تا در صورت لزوم از آن استفاده نماید.
login.php
<?php
use Phppot\Member;
if (! empty($_POST["login-btn"])) {
require_once __DIR__ . '/Model/Member.php';
$member = new Member();
$loginResult = $member->loginMember();
}
?>
<HTML>
<HEAD>
<TITLE>Login</TITLE>
<link href="assets/css/phppot-style.css" type="text/css"
rel="stylesheet" />
<link href="assets/css/user-registration.css" type="text/css"
rel="stylesheet" />
<script src="vendor/jquery/jquery-3.3.1.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div class="phppot-container">
<div class="sign-up-container">
<div class="login-signup">
<a href="user-registration.php">Sign up</a>
</div>
<div class="signup-align">
<form name="login" action="" method="post"
onsubmit="return loginValidation()">
<div class="signup-heading">Login</div>
<?php if(!empty($loginResult)){?>
<div class="error-msg"><?php echo $loginResult;?></div>
<?php }?>
<div class="row">
<div class="inline-block">
<div class="form-label">
Username<span class="required error" id="username-info"></span>
</div>
<input class="input-box-330" type="text" name="username"
id="username">
</div>
</div>
<div class="row">
<div class="inline-block">
<div class="form-label">
Password<span class="required error" id="login-password-info"></span>
</div>
<input class="input-box-330" type="password"
name="login-password" id="login-password">
</div>
</div>
<div class="row">
<input class="btn" type="submit" name="login-btn"
id="login-btn" value="Login">
</div>
</form>
</div>
</div>
</div>
<script>
function loginValidation() {
var valid = true;
$("#username").removeClass("error-field");
$("#password").removeClass("error-field");
var UserName = $("#username").val();
var Password = $('#login-password').val();
$("#username-info").html("").hide();
if (UserName.trim() == "") {
$("#username-info").html("required.").css("color", "#ee0000").show();
$("#username").addClass("error-field");
valid = false;
}
if (Password.trim() == "") {
$("#login-password-info").html("required.").css("color", "#ee0000").show();
$("#login-password").addClass("error-field");
valid = false;
}
if (valid == false) {
$('.error-field').first().focus();
valid = false;
}
return valid;
}
</script>
</BODY>
</HTML>
در ادامه کد برای مشخص کردن اطلاعات اجباری و ورود حداقل اطلاعات توسط کاربر ارائه شده است. قبل از پردازش ثبت نام کاربر در PHP ، ابتدا از اعتبارسنجی جاوا اسکریپ عبور خواهد کرد.
با ارسال فیلدهای فرم ثبت نام، signupValidation() در جاوا اسکریپ فراخوانی میشود. در نهایت در شرایطی که فرمت ایمیل درست باشد و رمزهای عبور نیز با هم تناسب داشته و فیلدهای همگی پر شده باشند، تایید شده و وارد گام بعد خواهد شد.
پس از تایید اعتبار اطلاعات ، ثبت نام در PHP با داده های فرم ارسال شده صورت خواهد گرفت.
user-registration.php
<?php
use Phppot\Member;
if (! empty($_POST["signup-btn"])) {
require_once './Model/Member.php';
$member = new Member();
$registrationResponse = $member->registerMember();
}
?>
<HTML>
<HEAD>
<TITLE>User Registration</TITLE>
<link href="assets/css/phppot-style.css" type="text/css"
rel="stylesheet" />
<link href="assets/css/user-registration.css" type="text/css"
rel="stylesheet" />
<script src="vendor/jquery/jquery-3.3.1.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div class="phppot-container">
<div class="sign-up-container">
<div class="login-signup">
<a href="index.php">Login</a>
</div>
<div class="">
<form name="sign-up" action="" method="post"
onsubmit="return signupValidation()">
<div class="signup-heading">Registration</div>
<?php
if (! empty($registrationResponse["status"])) {
?>
<?php
if ($registrationResponse["status"] == "error") {
?>
<div class="server-response error-msg"><?php echo $registrationResponse["message"]; ?></div>
<?php
} else if ($registrationResponse["status"] == "success") {
?>
<div class="server-response success-msg"><?php echo $registrationResponse["message"]; ?></div>
<?php
}
?>
<?php
}
?>
<div class="error-msg" id="error-msg"></div>
<div class="row">
<div class="inline-block">
<div class="form-label">
Username<span class="required error" id="username-info"></span>
</div>
<input class="input-box-330" type="text" name="username"
id="username">
</div>
</div>
<div class="row">
<div class="inline-block">
<div class="form-label">
Email<span class="required error" id="email-info"></span>
</div>
<input class="input-box-330" type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="inline-block">
<div class="form-label">
Password<span class="required error" id="signup-password-info"></span>
</div>
<input class="input-box-330" type="password"
name="signup-password" id="signup-password">
</div>
</div>
<div class="row">
<div class="inline-block">
<div class="form-label">
Confirm Password<span class="required error"
id="confirm-password-info"></span>
</div>
<input class="input-box-330" type="password"
name="confirm-password" id="confirm-password">
</div>
</div>
<div class="row">
<input class="btn" type="submit" name="signup-btn"
id="signup-btn" value="Sign up">
</div>
</form>
</div>
</div>
</div>
<script>
function signupValidation() {
var valid = true;
$("#username").removeClass("error-field");
$("#email").removeClass("error-field");
$("#password").removeClass("error-field");
$("#confirm-password").removeClass("error-field");
var UserName = $("#username").val();
var email = $("#email").val();
var Password = $('#signup-password').val();
var ConfirmPassword = $('#confirm-password').val();
var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
$("#username-info").html("").hide();
$("#email-info").html("").hide();
if (UserName.trim() == "") {
$("#username-info").html("required.").css("color", "#ee0000").show();
$("#username").addClass("error-field");
valid = false;
}
if (email == "") {
$("#email-info").html("required").css("color", "#ee0000").show();
$("#email").addClass("error-field");
valid = false;
} else if (email.trim() == "") {
$("#email-info").html("Invalid email address.").css("color", "#ee0000").show();
$("#email").addClass("error-field");
valid = false;
} else if (!emailRegex.test(email)) {
$("#email-info").html("Invalid email address.").css("color", "#ee0000")
.show();
$("#email").addClass("error-field");
valid = false;
}
if (Password.trim() == "") {
$("#signup-password-info").html("required.").css("color", "#ee0000").show();
$("#signup-password").addClass("error-field");
valid = false;
}
if (ConfirmPassword.trim() == "") {
$("#confirm-password-info").html("required.").css("color", "#ee0000").show();
$("#confirm-password").addClass("error-field");
valid = false;
}
if(Password != ConfirmPassword){
$("#error-msg").html("Both passwords must be same.").show();
valid=false;
}
if (valid == false) {
$('.error-field').first().focus();
valid = false;
}
return valid;
}
</script>
</BODY>
</HTML>
در صفحه اصلی فرم ورود و لاگین بارگزاری میشود.
<?php require_once __DIR__ . "/login.php";
سپس CSS برای پردازش نمونه کد ثبت نام کاربر در نظر گرفته میشود.
user-registration.css
.sign-up-container {
border: 1px solid;
border-color: #9a9a9a;
background: #fff;
border-radius: 4px;
padding: 10px;
width: 350px;
margin: 50px auto;
}
.page-header {
float: right;
}
.login-signup {
margin: 10px;
text-decoration: none;
float: right;
}
.login-signup a {
text-decoration: none;
font-weight: 700;
}
.signup-heading {
font-size: 2em;
font-weight: bold;
padding-top: 60px;
text-align: center;
}
.inline-block {
display: inline-block;
}
.row {
margin: 15px 0px;
text-align: center;
}
.form-label {
margin-bottom: 5px;
text-align: left;
}
input.input-box-330 {
width: 250px;
}
.sign-up-container .error {
color: #ee0000;
padding: 0px;
background: none;
border: #ee0000;
}
.sign-up-container .error-field {
border: 1px solid #d96557;
}
.sign-up-container .error:before {
content: '*';
padding: 0 3px;
color: #D8000C;
}
.error-msg {
padding-top: 10px;
color: #D8000C;
text-align: center;
}
.success-msg {
padding-top: 10px;
color: #176701;
text-align: center;
}
input.btn {
width: 250px
}
.signup-align {
margin: 0 auto;
}
.page-content {
font-weight: bold;
padding-top: 60px;
text-align: center;
}
تایید اعتبار فرم ورود و ثبت نام
برای اعتبارسنجی فرم قبل از ارسال فرم به PHP از از جاوا اسکریپ استفاده کرده ایم. در صورت نامعتبر بودن اطلاعات، کد نادرست بولین برگردانده میشود و بخش هایی که نیاز به اصلاح یا ورود اطلاعات دارند را برای کاربر برجسته و مشخص می کند.
پردازش ثبت نام کاربر در PHP
پس از ارسال جزئیات فرم، ثبت نام کاربر در PHP پردازش میشود.
کد زیر در ابتدای فرم ثبت نام PHP اضافه شده و بررسی می کند که آیا کاربر فرم را ارسال کرده است یا خیر؟ سپس متد registerMember() در مدل MEMBER فراخوانی میشود.
همان طور که در قطعه کد زیر مشاهده می کنید، کد member در زیر کلاس آن نمایش داده شده است. این شامل تمام توابع مربوط به ثبت نام و ورود به سیستم می باشد.
تابع registerMember() بررسی می کند که آیا ایمیل ارسال شده از قبل وجود داشته است یا خیر؟ در صورت وجود ایمیل از قبل، کد خطا برگردانده میشود و در غیر این صورت، رکورد جدید در MySQL اضافه خواهد شد.
تابع loginMember() بررسی می کند که آیا اطلاعات وارد شده در فرم با آنچه در پایگاه داده ثبت شده است تطابق دارد یا خیر؟
Model/Member.php
<?php
namespace Phppot;
class Member
{
private $ds;
function __construct()
{
require_once __DIR__ . '/../lib/DataSource.php';
$this->ds = new DataSource();
}
/**
* to check if the username already exists
*
* @param string $username
* @return boolean
*/
public function isUsernameExists($username)
{
$query = 'SELECT * FROM tbl_member where username = ?';
$paramType = 's';
$paramValue = array(
$username
);
$resultArray = $this->ds->select($query, $paramType, $paramValue);
$count = 0;
if (is_array($resultArray)) {
$count = count($resultArray);
}
if ($count > 0) {
$result = true;
} else {
$result = false;
}
return $result;
}
/**
* to check if the email already exists
*
* @param string $email
* @return boolean
*/
public function isEmailExists($email)
{
$query = 'SELECT * FROM tbl_member where email = ?';
$paramType = 's';
$paramValue = array(
$email
);
$resultArray = $this->ds->select($query, $paramType, $paramValue);
$count = 0;
if (is_array($resultArray)) {
$count = count($resultArray);
}
if ($count > 0) {
$result = true;
} else {
$result = false;
}
return $result;
}
/**
* to signup / register a user
*
* @return string[] registration status message
*/
public function registerMember()
{
$isUsernameExists = $this->isUsernameExists($_POST["username"]);
$isEmailExists = $this->isEmailExists($_POST["email"]);
if ($isUsernameExists) {
$response = array(
"status" => "error",
"message" => "Username already exists."
);
} else if ($isEmailExists) {
$response = array(
"status" => "error",
"message" => "Email already exists."
);
} else {
if (! empty($_POST["signup-password"])) {
// PHP's password_hash is the best choice to use to store passwords
// do not attempt to do your own encryption, it is not safe
$hashedPassword = password_hash($_POST["signup-password"], PASSWORD_DEFAULT);
}
$query = 'INSERT INTO tbl_member (username, password, email) VALUES (?, ?, ?)';
$paramType = 'sss';
$paramValue = array(
$_POST["username"],
$hashedPassword,
$_POST["email"]
);
$memberId = $this->ds->insert($query, $paramType, $paramValue);
if (! empty($memberId)) {
$response = array(
"status" => "success",
"message" => "You have registered successfully."
);
}
}
return $response;
}
public function getMember($username)
{
$query = 'SELECT * FROM tbl_member where username = ?';
$paramType = 's';
$paramValue = array(
$username
);
$memberRecord = $this->ds->select($query, $paramType, $paramValue);
return $memberRecord;
}
/**
* to login a user
*
* @return string
*/
public function loginMember()
{
$memberRecord = $this->getMember($_POST["username"]);
$loginPassword = 0;
if (! empty($memberRecord)) {
if (! empty($_POST["login-password"])) {
$password = $_POST["login-password"];
}
$hashedPassword = $memberRecord[0]["password"];
$loginPassword = 0;
if (password_verify($password, $hashedPassword)) {
$loginPassword = 1;
}
} else {
$loginPassword = 0;
}
if ($loginPassword == 1) {
// login sucess so store the member's username in
// the session
session_start();
$_SESSION["username"] = $memberRecord[0]["username"];
session_write_close();
$url = "./home.php";
header("Location: $url");
} else if ($loginPassword == 0) {
$loginStatus = "Invalid username or password.";
return $loginStatus;
}
}
}
کد احراز هویت ورود در PHP
کد موجود در فایل login-form.php در بالا، بعد از ورود کاربر تابع احراز هوایت را فراخوانی می کند.
داشبورد کاربر
کد زیر داشبورد کاربر می باشد. این کد وظیفه نمایش پیام خوش آمدگویی به کاربر را برعهده دارد.
در بالای فایل home.php ، بررسی اعتبارسنجی بر اساس جلسه یا Session صورت میگیرد. این کد برای اطمینان از این است که نشان دهد کاربران به این صفحه دسترسی ندارند و به صفحه ورود سیستم هدایت میشوند.
اگر کاربر به سیستم وارد نشده باشد، به این صفحه دسترسی پیدا می کند و وارد صفحه ورود خواهد شد.
<?php
session_start();
if (isset($_SESSION["username"])) {
$username = $_SESSION["username"];
session_write_close();
} else {
// since the username is not set in session, the user is not-logged-in
// he is trying to access this page unauthorized
// so let's clear all session variables and redirect him to index
session_unset();
session_write_close();
$url = "./index.php";
header("Location: $url");
}
?>
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
<link href="assets/css/phppot-style.css" type="text/css"
rel="stylesheet" />
<link href="assets/css/user-registration.css" type="text/css"
rel="stylesheet" />
</HEAD>
<BODY>
<div class="phppot-container">
<div class="page-header">
<span class="login-signup"><a href="logout.php">Logout</a></span>
</div>
<div class="page-content">Welcome <?php echo $username;?></div>
</div>
</BODY>
</HTML>
Log out
قطعه کد زیر برای خروج کاربر استفاده میشود. با استفاده از این کد، Session فعلی پاک شده و کاربر به صفحه اصلی و لاگین هدایت خواهد شد.
<?php
// clear all the session variables and redirect to index
session_start();
session_unset();
session_write_close();
$url = "./index.php";
header("Location: $url");
Datasource.php
قطعه کد زیر پایگاه داده MYSQL/mysqli را نمایش می دهد. تنها در پروژه های MYSQL و PHP می توانید از آن استفاده نمایید.
<?php
/**
* Copyright (C) Phppot
*
* Distributed under 'The MIT License (MIT)'
* In essense, you can do commercial use, modify, distribute and private use.
* Though not mandatory, you are requested to attribute Phppot URL in your code or website.
*/
namespace Phppot;
/**
* Generic datasource class for handling DB operations.
* Uses MySqli and PreparedStatements.
*
* @version 2.6 - recordCount function added
*/
class DataSource
{
const HOST = 'localhost';
const USERNAME = 'root';
const PASSWORD = 'test';
const DATABASENAME = 'db_rating';
private $conn;
/**
* PHP implicitly takes care of cleanup for default connection types.
* So no need to worry about closing the connection.
*
* Singletons not required in PHP as there is no
* concept of shared memory.
* Every object lives only for a request.
*
* Keeping things simple and that works!
*/
function __construct()
{
$this->conn = $this->getConnection();
}
/**
* If connection object is needed use this method and get access to it.
* Otherwise, use the below methods for insert / update / etc.
*
* @return \mysqli
*/
public function getConnection()
{
$conn = new \mysqli(self::HOST, self::USERNAME, self::PASSWORD, self::DATABASENAME);
if (mysqli_connect_errno()) {
trigger_error("Problem with connecting to database.");
}
$conn->set_charset("utf8");
return $conn;
}
/**
* To get database results
*
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return array
*/
public function select($query, $paramType = "", $paramArray = array())
{
$stmt = $this->conn->prepare($query);
if (! empty($paramType) && ! empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType, $paramArray);
}
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$resultset[] = $row;
}
}
if (! empty($resultset)) {
return $resultset;
}
}
/**
* To insert
*
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return int
*/
public function insert($query, $paramType, $paramArray)
{
$stmt = $this->conn->prepare($query);
$this->bindQueryParams($stmt, $paramType, $paramArray);
$stmt->execute();
$insertId = $stmt->insert_id;
return $insertId;
}
/**
* To execute query
*
* @param string $query
* @param string $paramType
* @param array $paramArray
*/
public function execute($query, $paramType = "", $paramArray = array())
{
$stmt = $this->conn->prepare($query);
if (! empty($paramType) && ! empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType, $paramArray);
}
$stmt->execute();
}
/**
* ۱٫
* Prepares parameter binding
* ۲٫ Bind prameters to the sql statement
*
* @param string $stmt
* @param string $paramType
* @param array $paramArray
*/
public function bindQueryParams($stmt, $paramType, $paramArray = array())
{
$paramValueReference[] = & $paramType;
for ($i = 0; $i < count($paramArray); $i ++) {
$paramValueReference[] = & $paramArray[$i];
}
call_user_func_array(array(
$stmt,
'bind_param'
), $paramValueReference);
}
/**
* To get database results
*
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return array
*/
public function getRecordCount($query, $paramType = "", $paramArray = array())
{
$stmt = $this->conn->prepare($query);
if (! empty($paramType) && ! empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType, $paramArray);
}
$stmt->execute();
$stmt->store_result();
$recordCount = $stmt->num_rows;
return $recordCount;
}
}
اسکریپ پایگاده داده MYSQL
اسکریپ SQL زیر ساختار ایجاد جدول در دیتابیس MYSQL را نمایش می دهد.
اسکریپ زیر را در ریشه و روت PHP اضافه کنید تا اجرا شود:
sql/user-registration.sql -- -- Database: `user-registration` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_member` -- CREATE TABLE `tbl_member` ( `id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `password` varchar(200) NOT NULL, `email` varchar(255) NOT NULL, `create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_member` -- ALTER TABLE `tbl_member` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_member` -- ALTER TABLE `tbl_member` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
در تصویر زیر خروجی و نتیجه اجرای کدهای فوق را مشاهده می کنید. با ساده ترین شکل و با سبک ترین کدها موفق به پیاده سازی فرم ثبت نام و ورود کاربر در PHP شدید.
من محمد آذرنیوا، نویسنده و مدرس دوره های برنامه نویسی ، طراحی وب و تحلیل گر پایگاه داده هستم و قصد دارم در این وبسایت مطالب کاربردی در این زمینه را با شما به اشتراک بگذارم …
