آموزش ساخت فرم ورود و فرم ثبت نام با 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>

<!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=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;
	}
?>

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

<!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=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;
		}
	}
?>

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

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

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

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

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

جت آموز
۱۳۹۷/۰۹/۰۳
طراحی سایت
login form, mysql, php, آموزش ساخت فرم ورود و فرم ثبت نام با php و MySQL
0
Share

جت آموز(63 Posts)

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

وبلاگ جت اموز

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

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

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

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

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

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

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

ورود به سایت

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

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

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

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

جت آموز(63 Posts)

Leave a Reply Cancel reply