آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL
آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL
فرم ثبت نام کاربران و ورود به سایت از جمله زیرساخت‌های مورد نیاز در طراحی سایت و نرم‌افزارهای تحت وب به شمار می‌رود.
در ادامه روش ساخت فرم لاگین و ثبت نام را با استفاده از زبان php و پایگاه داده MySQL بررسی خواهیم نمود. در این مقاله برای ارتباط با پایگاه داده از رابط PDO استفاده خواهیم کرد.
همچنین آخرین نکات امنیتی برای حفظ حریم خصوصی کاربران را به کار خواهیم گرفت تا امنیت سیستم تا بالاترین حد ممکن در دسترس قرار گیرد.
طراحی فرم ثبت نام
ابتدا لازم است تا جدول پایگاه داده که فهرست کاربران را در آن ذخیره می‌کنیم، ساخته شود. برای این منظور، جدولی با نام users و شامل سه فیلد id، username و password ایجاد خواهیم کرد:
همان گونه که در تصویر فوق مشخص است، ستون id از نوع AUTO_INCREMENT تعریف شده و کلید اصلی یا PRIMARY نیز مشخص گردیده است.
ستون username نیز کلیدگذاری شده است تا هنگام ورود امکان جستجوی سریع این ستون فراهم شود. بهتر است این ستون کلید Unique یا یکتا داشته باشد تا از ساخته شدن کاربرانی با نام یکسان جلوگیری شود.
ساخت کدهای html فرم ثبت نام
فایلی با نام signup.php ایجاد کنید و کدهای زیر را که تنها یک فرم ثبت نام است، در آن قرار دهید.
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ثبت نام در سایت - جت اموز</title>
<style>
body {
direction: rtl;
font: 12px tahoma;
}
input {
border: 1px solid #008;
}
form {
padding: 2em;
margin: 2em;
background-color: #eee;
}
</style>
</head>
<body>
<form method="POST">
<table>
<tr>
<td>نام کاربری:</td><td><input type="text" name="username"></td>
</tr>
<tr>
<td>گذرواژه:</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td>تکرار گذرواژه:</td><td><input type="password" name="password_confirmation"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ثبت نام در سایت"></td>
</tr>
</table>
</form>
</body>
</html>قطعه کد بالا حاوی اندکی کدهای CSS است تا شکل نمایش فرم کمی بهتر از حالت پیش‌فرض باشد.
روش اسال اطلاعات یا method
در فرم بالا روش ارسال اطلاعات به فرم با مقدار POST پر شده است. در این روش، اطلاعات ارسالی کاربر در نوار آدرس سایت قابل مشاهده نخواهند بود. انجام این کار برای فرم‌های ثبت نام و ورود به سایت ضروری است زیرا مانع از ذخیره‌سازی اطلاعات وارد شده کاربر در cache مرورگر و Logهای سرور می‌شود. در نتیجه یک نکته‌ی امنیتی در مورد فرم‌های فوق استفاده از این روش است.
عدم تعیین action برای فرم
در تعریف فرم بالا، از مقداردهی action خودداری کردیم. با انجام این کار، اطلاعات به جای ارسال به فایلی دیگر، مجددا به همین فایل ارسال خواهند شد.
کدهای php برای فرم ثبت نام
در گام اول فرض می‌کنیم تمامی اطلاعات وارد شده توسط کاربر صحیح هستند و تنها کدهای مربوط به ثبت نام را در ابتدای فایل signup.php اضافه می‌نماییم. کدهای زیر را در ابتدای فایل فوق بیفزایید و مجددا آن را ذخیره کنید:
<?php
if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {
$dsn = 'mysql:dbname=jetamooz;host=localhost;port=3306';
$username = 'root';
$password = '';
try {
$db = new PDO( $dsn, $username, $password );
$db->exec( "SET CHARACTER SET utf8" );
} catch( PDOException $e ) {
die( 'رخداد خطا در هنگام ارتباط با پایگاه داده:<br>' . $e );
}
$stmt = $db->prepare( "INSERT INTO users ( username, password ) VALUES ( ?, ? )" );
$stmt->bindValue( 1, $_POST[ 'username' ] );
$stmt->bindValue( 2, password_hash( $_POST[ 'password' ], PASSWORD_BCRYPT ) );
$stmt->execute();
$signup = true;
} else {
$signup = false;
}
?>در قطعه کد بالا ابتدا بررسی می‌کنیم که آیا شیوه‌ی فراخوانی این فایل، با روش POST بوده است یا خیر. اگر method مساوی POST باشد به این معنی است که کاربر اطلاعات ثبت نام را پر کرده است و قصد ثبت نام در سایت را دارد.
ابتدا به پایگاه داده( jetamooz) متصل می‌شود. سپس یک ردیف در جدول users درج می‌کند.
نکته‌ی امنیتی مهم در کد بالا، استفاده از دستور password_hash برای رمزگزاری گذرواژه‌ی دریافتی از کاربر است. این دستور امکان مشاهده‌ی رمزهای ذخیره شده در پایگاه داده را ناممکن می‌کند و اگر به هر دلیل، کسی بتواند به پایگاه داده نفوذ کند، نخواهد توانست به گذرواژه‌ی کاربران دسترسی پیدا کند.
ثبت نخستین کاربر
از نام کاربری jetamooz و گذرواژه‌ی jetamooz برای ثبت نام نخستین کاربر استفاده می‌کنیم و روی دکمه‌ی ثبت نام کلیک می‌نماییم. اطلاعات درج شده در جدول users به شکل زیر خواهند بود:
همان گونه که مشاهده می‌کنید، نام کاربر به صورت عادی قابل مشاهده است ولی رمز وارد شده، قابل مشاهده نیست و امنیت آن تضمین شده است.
ورود به سایت
اکنون بخش ورود به سایت را ایجاد خواهیم کرد. تکمیل فرم ثبت نام و بررسی خطاهای ممکن را در قدم بعدی انجام خواهیم داد.
ایجاد کدهای html ورود به سایت
ساخت فرم ورود را نیز همانند فرم ثبت نام به شکل زیر انجام خواهیم داد. قطعه کد زیر را در فایلی به نام signin.php ذخیره کنید:
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ورود به سایت - جت اموز</title>
<style>
body {
direction: rtl;
font: 12px tahoma;
}
input {
border: 1px solid #008;
}
form {
padding: 2em;
margin: 2em;
background-color: #eee;
}
</style>
</head>
<body>
<form method="POST">
<table>
<tr>
<td>نام کاربری:</td><td><input type="text" name="username"></td>
</tr>
<tr>
<td>گذرواژه:</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ورود به سایت"></td>
</tr>
</table>
</form>
</body>
</html>
کدهای بالا شباهت زیادی به فرم ثبت نام دارند. تنها تکرار گذرواژه از آن حذف شده است.
ایجاد کدهای php ورود به سایت
قطعه کدهای زیر را در ابتدای فایل signin.php بیفزایید:
<?php
session_start();
$signin = false;
if( isset( $_GET[ 'signout' ] ) ) {
unset( $_SESSION[ 'username' ] );
}
if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {
$dsn = 'mysql:dbname=jetamooz;host=localhost;port=3306';
$username = 'root';
$password = '';
try {
$db = new PDO( $dsn, $username, $password );
$db->exec( "SET CHARACTER SET utf8" );
} catch( PDOException $e ) {
die( 'رخداد خطا در هنگام ارتباط با پایگاه داده:<br>' . $e );
}
$stmt = $db->prepare( "SELECT * FROM users where username = ?" );
$stmt->bindValue( 1, $_POST[ 'username' ] );
$stmt->execute();
$user = $stmt->fetch( PDO::FETCH_OBJ );
if( $user && password_verify( $_POST[ 'password' ], $user->password ) ) {
$signin = true;
$_SESSION[ 'username' ] = $user->username;
}
}
?>کدهای بالا علاوه بر وظیفه‌ی ورود کاربر، امکان خروج کاربر از سیستم را نیز فراهم می‌کنند. ذخیره‌سازی وضعیت ورود کاربر با استفاده از Session به انجام می‌رسد.
کدهای بالا ابتدا بررسی می‌کنند که آیا پارامتر signout در آدرس موجود است یا خیر. اگر موجود باشد، سشن را پاکسازی می‌کند و کاربر از سیستم خارج می‌شود. شیوه‌ی فراخوانی به شکل: «signin.php?signout» خواهد بود.
در ادامه پایگاه داده برای وجود کاربری با نام مورد نظر جستجو می‌شود. سپس اگر ردیفی موجود باشد، با کمک دستور password_verify بررسی می‌شود که آیا گذرواژه‌ی وارد شده با گذرواژه‌ی رمزگزاری شده در پایگاه داده مطابقت دارد یا خیر.
در پایان متغیر signin مساوی true قرار داده می‌شود تا در ادامه برای نمایش پیام مناسب به کاربر قابل استفاده باشد.
تکمیل فرم ثبت نام
اکنون به فرم ثبت نام باز می‌گردیم و کدهای آن را به شکل زیر اصلاح می‌کنیم تا خطاهای متداول را شناسایی کنیم:
<?php
$errors = array();
$signup = false;
if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {
// بررسی صحت اطلاعات وارد شده
if( trim( $_POST[ 'username' ] ) == '' ) {
$errors[] = 'وارد کردن نام کاربری الزامی است';
}
if( trim( $_POST[ 'password' ] ) == '' ) {
$errors[] = 'وارد کردن گذرواژه الزامی است';
}
if( $_POST[ 'password' ] !== $_POST[ 'password_confirmation' ] ) {
$errors[] = 'گذرواژه‌های وارد شده یکسان نیستند';
}
// بررسی عدم وجود خطا در مراحل قبلی
if( count( $errors ) == 0 ) {
$dsn = 'mysql:dbname=jetamooz;host=localhost;port=3306';
$username = 'root';
$password = '';
try {
$db = new PDO( $dsn, $username, $password );
$db->exec( "SET CHARACTER SET utf8" );
} catch( PDOException $e ) {
die( 'رخداد خطا در هنگام ارتباط با پایگاه داده:<br>' . $e );
}
// ثبت کاربر در پایگاه داده
$stmt = $db->prepare( "INSERT INTO users ( username, password ) VALUES ( ?, ? )" );
$stmt->bindValue( 1, $_POST[ 'username' ] );
$stmt->bindValue( 2, password_hash( $_POST[ 'password' ], PASSWORD_BCRYPT ) );
$stmt->execute();
$signup = true;
}
}
?>
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ثبت نام در سایت - جت اموز</title>
<style>
body {
direction: rtl;
font: 12px tahoma;
}
input {
border: 1px solid #008;
}
form {
padding: 2em;
margin: 2em;
background-color: #eee;
}
</style>
</head>
<body>
<?php if( $signup == false ) : ?>
<?php
// نمایش پیام‌های خطا در صورت وجود
foreach( $errors as $error ) {
echo "<p>{$error}</p>";
}
?>
<!-- نمایش فرم ثبت نام -->
<form method="POST">
<table>
<tr>
<td>نام کاربری:</td><td><input type="text" name="username"></td>
</tr>
<tr>
<td>گذرواژه:</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td>تکرار گذرواژه:</td><td><input type="password" name="password_confirmation"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ثبت نام در سایت"></td>
</tr>
</table>
</form>
<?php else: ?>
<!-- نمایش پیام ورود به سایت -->
با تشکر !
ثبت نام شما در سایت انجام شد
<hr>
<a href="signin.php">ورود به سایت</a>
<?php endif; ?>
</body>
</html>تکمیل فرم ورود به سایت
فرم ورود به سایت را نیز می‌توانیم به شکل زیر اصلاح کنیم تا امکان خروج را نیز به آن بیفزاییم و پیام‌های لازم را به کاربر نمایش دهیم:
<?php
session_start();
$signin = false;
// بررسی درخواست خروج از سایت
if( isset( $_GET[ 'signout' ] ) ) {
unset( $_SESSION[ 'username' ] );
}
if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {
$dsn = 'mysql:dbname=jetamooz;host=localhost;port=3306';
$username = 'root';
$password = '';
try {
$db = new PDO( $dsn, $username, $password );
$db->exec( "SET CHARACTER SET utf8" );
} catch( PDOException $e ) {
die( 'رخداد خطا در هنگام ارتباط با پایگاه داده:<br>' . $e );
}
// جستجوی کاربران با نام کاربری وارد شده
$stmt = $db->prepare( "SELECT * FROM users where username = ?" );
$stmt->bindValue( 1, $_POST[ 'username' ] );
$stmt->execute();
$user = $stmt->fetch( PDO::FETCH_OBJ );
// بررسی گذرواژه‌ی وارد شده با گذرواژه‌ی موجود در پایگاه داده
if( $user && password_verify( $_POST[ 'password' ], $user->password ) ) {
$signin = true;
$_SESSION[ 'username' ] = $user->username;
}
}
?>
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ورود به سایت - جت اموز</title>
<style>
body {
direction: rtl;
font: 12px tahoma;
}
input {
border: 1px solid #008;
}
form {
padding: 2em;
margin: 2em;
background-color: #eee;
}
</style>
</head>
<body>
<!-- اگر کاربر قبلا در سایت وارد نشده باشد -->
<?php if( ! isset( $_SESSION[ 'username' ] ) ) : ?>
<form method="POST">
<table>
<tr>
<td>نام کاربری:</td><td><input type="text" name="username"></td>
</tr>
<tr>
<td>گذرواژه:</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ورود به سایت"></td>
</tr>
</table>
</form>
<?php else: ?>
<!-- نمایش نام کاربر اگر در سایت وارد شده باشد -->
<?php echo $_SESSION[ 'username' ]; ?>
خوش آمدید
<hr>
<!-- لینک به صفحه‌ی خروج از سایت -->
<a href="?signout">خروج از سایت</a>
<?php endif; ?>
</body>
</html>
4 thoughts on “آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL”
سلام
چرا زمانی که من به فایل Signup فیلد های مدنظرم رو اضافه میکنم و همچنین در پایگاه داده، وقتی signin میکنم در سایت، نام کاربری و گذرواژه رو درست وارد میکنم، اما صفحه خوش آمدید رو دیگه نشون نمیده؟؟
البته روی سایت واقعی کار انجام میدم.
سلام. حتما خوب کدها را ننوشته اید.لطفا فیلم اموزشی ایجاد فرم ورود را از طریق این لینک مشاهده کنید تا متوجه مشکل خود شوید.
خداد خطا در هنگام ارتباط با پایگاه داده:
exception ‘PDOException’ with message ‘could not find driver’ in C:\xampp\htdocs\log\signup.php:27 Stack trace: #0 C:\xampp\htdocs\log\signup.php(27): PDO->__construct(‘mysql:dbname=lo…’, ‘root’, ”) #1 {main}
من این خطارو میگیرم تروخدا کمکم کنید اصلا هربار بخوام به دیتابیس وصل شم نمیشه خطا میده
سلام.شما افزونه pdo را در وب سرور خود فعال نکرده اید.