آخرین بازبینی: ۱۴۰۲/۱۱/۱۶

آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL

فرم عضویت و لاگین به سایت از جمله زیرساخت‌های مورد نیاز در طراحی سایت و نرم‌افزارهای تحت وب به شمار می‌رود.

در ادامه روش ساخت فرم ورود و ثبت نام را با استفاده از زبان php و پایگاه داده MySQL بررسی خواهیم نمود. در این مقاله برای ارتباط با پایگاه داده از رابط PDO استفاده خواهیم کرد.

همچنین آخرین نکات امنیتی برای حفظ حریم خصوصی کاربران را به کار خواهیم گرفت تا امنیت سیستم تا بالاترین حد ممکن در دسترس قرار گیرد.

طراحی فرم ثبت نام

ابتدا لازم است تا جدول پایگاه داده که فهرست کاربران را در آن ذخیره می‌کنیم، ساخته شود. برای این منظور، جدولی با نام users و شامل سه فیلد id، username و password ایجاد خواهیم کرد:

همان گونه که در تصویر فوق مشخص است، ستون id از نوع AUTO_INCREMENT تعریف شده و کلید اصلی یا PRIMARY نیز مشخص گردیده است.

ستون username نیز کلیدگذاری شده است تا هنگام ورود امکان جستجوی سریع این ستون فراهم شود. بهتر است این ستون کلید Unique یا یکتا داشته باشد تا از ساخته شدن کاربرانی با نام یکسان جلوگیری شود.

ساخت کدهای html فرم ثبت نام

فایلی با نام signup.php ایجاد کنید و کدهای زیر را که تنها یک فرم ثبت نام است، در آن قرار دهید.

<!doctype html>

<head>

<style>

body {

direction: rtl;

font: 12px tahoma;

}

input {

border: 1px solid #008;

}

form {

padding: 2em;

margin: 2em;

background-color: #eee;

}

</style>

</head>

<body>

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

</tr>

</table>

</form>

</body>

</html>

اگر فایل بالا را در مرورگر مشاهده کنید، تصویری شبیه به تصویر زیر برای شما نمایش داده می‌شود:

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

روش اسال اطلاعات یا method

در فرم بالا روش ارسال اطلاعات به فرم با مقدار POST پر شده است. در این روش، اطلاعات ارسالی کاربر در نوار آدرس سایت قابل مشاهده نخواهند بود. انجام این کار برای فرم‌های ثبت نام و ورود به سایت ضروری است زیرا مانع از ذخیره‌سازی اطلاعات وارد شده کاربر در cache مرورگر و Log‌های سرور می‌شود. در نتیجه یک نکته‌ی امنیتی در مورد فرم‌های فوق استفاده از این روش است.

عدم تعیین action برای فرم

در تعریف فرم بالا، از مقداردهی action خودداری کردیم. با انجام این کار، اطلاعات به جای ارسال به فایلی دیگر، مجددا به همین فایل ارسال خواهند شد.

کدهای php برای فرم ثبت نام

در گام اول فرض می‌کنیم تمامی اطلاعات وارد شده توسط کاربر صحیح هستند و تنها کدهای مربوط به ثبت نام را در ابتدای فایل signup.php اضافه می‌نماییم. کدهای زیر را در ابتدای فایل فوق بیفزایید و مجددا آن را ذخیره کنید:

<?php

if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {

$dsn = 'mysql:dbname=roka;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 باشد به این معنی است که کاربر اطلاعات ثبت نام را پر کرده است و قصد ثبت نام در سایت را دارد.

ابتدا به پایگاه داده( roka ) متصل می‌شود. سپس یک ردیف در جدول users درج می‌کند.

نکته‌ی امنیتی مهم در کد بالا، استفاده از دستور password_hash برای رمزگزاری گذرواژه‌ی دریافتی از کاربر است. این دستور امکان مشاهده‌ی رمزهای ذخیره شده در پایگاه داده را ناممکن می‌کند و اگر به هر دلیل،‌ کسی بتواند به پایگاه داده نفوذ کند، نخواهد توانست به گذرواژه‌ی کاربران دسترسی پیدا کند.

ثبت نخستین کاربر

از نام کاربری roka و گذرواژه‌ی roka برای ثبت نام نخستین کاربر استفاده می‌کنیم و روی دکمه‌ی ثبت نام کلیک می‌نماییم. اطلاعات درج شده در جدول users به شکل زیر خواهند بود:

همان گونه که مشاهده می‌کنید، نام کاربر به صورت عادی قابل مشاهده است ولی رمز وارد شده، قابل مشاهده نیست و امنیت آن تضمین شده است.

ورود به سایت

اکنون بخش ورود به سایت را ایجاد خواهیم کرد. تکمیل فرم ثبت نام و بررسی خطاهای ممکن را در قدم بعدی انجام خواهیم داد.

ایجاد کدهای html ورود به سایت

ساخت فرم ورود را نیز همانند فرم ثبت نام به شکل زیر انجام خواهیم داد. قطعه کد زیر را در فایلی به نام signin.php ذخیره کنید:

<!doctype html>

<head>

<style>

body {

direction: rtl;

font: 12px tahoma;

}

input {

border: 1px solid #008;

}

form {

padding: 2em;

margin: 2em;

background-color: #eee;

}

</style>

</head>

<body>

<table>

<tr>

<td>نام کاربری:</td><td><input type="text" name="username"></td>

</tr>

<tr>

<td>گذرواژه:</td><td><input type="password" name="password"></td>

</tr>

<tr>

</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=roka;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=roka;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>

100

<?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=roka;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>

<head>

<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>";

}

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

</tr>

</table>

</form>

<?php else: ?>

با تشکر !

ثبت نام شما در سایت انجام شد

<hr>

<?php endif; ?>

</body>

</html>

تکمیل فرم ورود به سایت

در این مرحله فرم ورود به سایت را هم تکمیل می‌کنیم و امکان خروج از سایت را به آن می‌افزاییم:

<?php
	session_start();
	$signin = false;
	
	// بررسی درخواست خروج از سایت
	if( isset( $_GET[ 'signout' ] ) ) {
		unset( $_SESSION[ 'username' ] );
	}
	
	if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {
		$dsn = 'mysql:dbname=roka;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>

<?php

session_start();

$signin = false;

// بررسی درخواست خروج از سایت

if( isset( $_GET[ 'signout' ] ) ) {

unset( $_SESSION[ 'username' ] );

}

if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) {

$dsn = 'mysql:dbname=roka;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>

<head>

<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' ] ) ) : ?>

<table>

<tr>

<td>نام کاربری:</td><td><input type="text" name="username"></td>

</tr>

<tr>

<td>گذرواژه:</td><td><input type="password" name="password"></td>

</tr>

<tr>

</tr>

</table>

</form>

<?php else: ?>

<?php echo $_SESSION[ 'username' ]; ?>

خوش آمدید

<hr>

<?php endif; ?>

</body>

</html>

دانلود کدهای این آموزش

فایل‌های مربوط به این آموزش از روی عمد برای دانلود قرار داده نشده است تا با مطالعه و انجام بخشی از مراحل به صورت دستی، مهارت شما افزایش پیدا کند.

۱۰ نظر در مورد «آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL»

حسین می‌گوید: ۱۳۹۷/۰۲/۲۸ ساعت ۲۲:۲۰

سلام خیلی ممنون بابت آموزش خوبتون
یک مساله ای هست من از طریق آموزش های شما و دیگر سایت ها دارم یک پروژه می سازم اما در مورد اون با چند نفر حرفه ای که صحبت کردم میپرسند برنامت object oriented هست میگم نه میگن mvc هست ر اساس چیزی ک از mvc میدونم میگم نه شایدم من اشتباه میکنم
(البته من فعلا فقط یک فرم ثبت نام درست کردم اما فکر نمیکنم ایم موارد رو داشته باشه می خوام از شما بپرسم این قطعه کد شما کدام یک از این دو موردی که گفتم رو داره ؟؟
میشه کمی راهنماییم کنید؟

پاسخ
- روکا می‌گوید: ۱۳۹۷/۰۲/۲۹ ساعت ۰۳:۱۷
  
  با سلام
  کدهای نوشته شده در این آموزش شیء گرا نیستند. البته از کتابخانه PDO که با اشیا کار می‌کند در آن استفاده شده است.
  جهت آشنایی با برنامه‌نویسی شیءگرا یا Object Oriented و همچنین مدل برنامه‌نویسی MVC این مقاله را بخوانید.
  
  پاسخ
mehdi می‌گوید: ۱۳۹۷/۰۴/۱۹ ساعت ۲۱:۲۲

مرسی ممنون.عزیز واس فرم ثبتنام وفرم سفارش باید چند تا جدول ساخت تو پایگاه داده.
.من یه جدول واس جفتش ساختم .ولی تو ردیف های جداگونه میان..من نمیدونم خب این سفارش واس کدوم کاربر.
چه راه حلی دارید مرسی...خیلی واجب..ممنون میشم کمکم کنید

پاسخ
- روکا می‌گوید: ۱۳۹۷/۰۴/۲۱ ساعت ۰۲:۳۱
  
  با سلام
  یک جدول برای کاربران باید ایجاد کنید و یک جدول هم برای سفارش‌ها
  هر سفارش می‌بایست شناسه کاربری که سفارش ثبت کرده را هم ذخیره کند تا معلوم باشد که صاحب سفارش کیست
  
  پاسخ
محمود می‌گوید: ۱۳۹۷/۰۸/۲۸ ساعت ۱۶:۰۲

سلام
چرا به جای ذخیره شدن نام کاربری و پسوورد فقط صفر نمایش داده میشه داخل مای اس کیو ال؟

پاسخ
- روکا می‌گوید: ۱۳۹۷/۰۸/۲۸ ساعت ۱۹:۱۴
  
  با سلام
  احتمالا نوع فیلدهای مربوط را در MySQL از نوع عددی مشخص کردید نه رشته‌ای
  
  پاسخ
Mahdyie می‌گوید: ۱۳۹۷/۱۰/۱۰ ساعت ۱۸:۱۵

سلام من یک فرم ثبت نام دارم و یک فایل php که اطلاعاتو پردازش میکنه ولی نمیدونم چطوری به پایگاه داده متصل کنم و اطلاعاتمو داخل پایگاه داده بریزم اگه راهنمایی کنید ممنون میشم

پاسخ
- روکا می‌گوید: ۱۳۹۷/۱۰/۱۰ ساعت ۱۹:۰۳
  
  با سلام
  به نظر می‌رسد که شما در ابتدای راه یادگیری برنامه نویسی هستید. این طور مشکلات پاسخ ساده و سریع ندارند. در این مرحله پیش از اینکه بخواهید از دیگران سوال بپرسید، باید زمان صرف کنید و آموزش‌های ابتدایی را مطالعه نمایید.
  
  پاسخ
;lko می‌گوید: ۱۴۰۱/۰۱/۰۴ ساعت ۰۸:۳۷

سلام من وقتی میخوام ثبت نام کنم این خطا رو میده:
رخداد خطا در هنگام ارتباط با پایگاه داده:
PDOException: SQLSTATE[HY000] [2002] Connection timed out

پاسخ
- روکا می‌گوید: ۱۴۰۱/۰۱/۰۴ ساعت ۲۱:۱۸
  
  با سلام
  پیام خطا می‌گوید که در زمان معقول امکان ارتباط با پایگاه داده ممکن نشده است. شاید پایگاه داده به درستی نصب نشده باشد یا شاید به آن اجازه‌ی دسترسی ندارید یا شاید فایروال اجازه نمی‌دهد ارتباط برقرار شود. برای پیدا کردن مشکل، دلایل احتمالی را یک به یک باید بررسی کنید
  
  پاسخ

آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL

طراحی فرم ثبت نام

ساخت کدهای html فرم ثبت نام

روش اسال اطلاعات یا method

عدم تعیین action برای فرم

کدهای php برای فرم ثبت نام

ثبت نخستین کاربر

ورود به سایت

ایجاد کدهای html ورود به سایت

ایجاد کدهای php ورود به سایت

تکمیل فرم ثبت نام

تکمیل فرم ورود به سایت

دانلود کدهای این آموزش

بیشتر بخوانید:

۱۰ نظر در مورد «آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL»

دیدگاهتان را بنویسید لغو پاسخ