فرادرس
فرم لاگین بوت‌استرپ با اعتبارسنجی PHP – به زبان ساده
در این نوشته به بررسی فرایند ایجاد یک فرم لاگین بوت‌استرپ با استفاده از بوت‌استرپ توییتر خواهیم پرداخت. همچنین نحوه پیاده‌سازی اعتبارسنجی سمت سرور با استفاده از PHP را توضیح خواهیم داد. صفحه لاگین با استفاده از html ساده و کتابخانه بوت‌استرپ طراحی می‌شود و اعتبار سنجی از طریق اسکریپت لاگین PHP انجام می‌یابد.
طراحی صفحه لاگین با بوت‌استرپ
صفحه لاگین را می‌توان از طریق html ساده نیز طراحی کرد. اما در مورد خاص این نوشته ما از بوت‌استرپ توییتر استفاده خواهیم کرد که یک کتابخانه CSS و جاوا اسکریپت اوپن‌سورس است. دلیل اینکه چرا از بوت‌استرپ استفاده می‌کنیم کاملاً مشخص است. نخست اینکه می‌خواهیم حس و ظاهر صفحه وب ما بهتر باشد و در بوت‌استرپ این حالت را با نوشتن چند خط کد می‌توان به دست آورد. دلیل دوم این است که می‌خواهیم صفحه لاگین ما واکنش گرا (responsive) باشد. در این خصوص نیز در بوت‌استرپ کلاس‌هایی وجود دارد که به ساخت طرح‌های آماده واکنش گرا کمک می‌کند. به قطعه کد زیر توجه کنید. نام صفحه وب ما «Index.php» است.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP/Bootstrap Login Form</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
</html>
از بخش header کد، کار خود را آغاز می‌کنیم. در این بخش مقداری اطلاعات متا و پیوندهایی به استایل‌شیت بوت‌استرپ و همچنین استایل‌شیت سفارشی یعنی Style.Css وجود دارد. بخش body شامل یک div با کلاس «container.» است. این یک کلاس بوت‌استرپ است و فاصله‌های راست و چپ را اضافه می‌کند و همچنین div را در مرکز صفحه قرار می‌دهد.
درون این div یک فرم با کلاس «form-signin» ایجاد شده است. این هم یک کلاس بوت‌استرپ است که برای استایل دهی به فرم استفاده می‌شود. این فرم دو ورودی دارد. یکی از آن‌ها به شکل متن و دیگری به شکل رمز عبور است. هردوی این اجزا الزامی هستند و نمی‌توان آن‌ها را خالی گذاشت. در این قسمت ما عامدانه فیلد ایمیل را به‌صورت متن (text) تنظیم کرده‌ایم، چون اگر آن را ایمیل قرار می‌دادیم بوت‌استرپ روش اعتبار سنجی خاص خود را برای ایمیل استفاده می‌کرد، در حالی که می‌خواهیم به شما نشان دهیم که PHP چگونه اعتبار سنجی ایمیل را انجام می‌دهد.
فایل CSS
در فایل Style.Css کلاس “container” را اصلاح کرده‌ایم و خصوصیت عرض بیشینه (max-width) را به مقدار ۶۰۰ پیکسل تغییر داده‌ایم. همچنین یک تصویر پس‌زمینه تصادفی را به تگ body اضافه کرده‌ایم. محتویات فایل Style.Css از این قرار است.
.container{
max-width: 600px;
}
body{
background-image: url(../images/contact_form_background.jpg);
}
تا اینجای کار صفحه لاگین چیزی شبیه زیر خواهد بود.
تا این لحظه فرم ما هیچ اعتبار سنجی ندارد به‌جز بررسی خالی نبودن فیلد که به‌صورت خودکار از سوی بوت‌استرپ اجرا می‌شود. در حال حاضر می‌توان هر چیزی را داخل فیلد متنی وارد کرد و با کلیک بر روی دکمه لاگین هیچ اتفاقی نخواهد افتاد.
اعتبار سنجی فرم از طریق PHP
در این بخش نحوه اجرای اعتبارسنجی از طریق PHP را نشان می‌دهیم. ابتدا بررسی می‌کنیم که آیا ایمیل وارد شده از سوی کاربر فرمت صحیح دارد و رمز عبور دست‌کم هشت کاراکتر طول دارد یا نه. بخش body کد html را که قبلاً ایجاد کرده‌ایم، طوری تغییر می‌دهیم که دقیقاً همانند قطعه کد زیر باشد. در ادامه این کد را توضیح می‌دهیم.
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
اگر به تگ ابتدایی «form» نگاهی بکنیم می‌بینیم که حاوی خصوصیت متد با مقدار «post» و خصوصیت اکشن با مقدار «index.php» است. خصوصیت متد در واقع روش مورد استفاده برای ارسال داده‌های فرم را معین می‌کند. خصوصیات اکشن صفحه‌ای را که داده‌ها به آن ارسال خواهند شد، تعیین می‌کند. در این مورد وقتی کاربر فرم را ارسال می‌کند، داده‌ها به خود صفحه تحویل داده می‌شوند یعنی «index.php».
اطمینان از خالی نبود مقادیر
توجه کنید که درون اجزای فرم در قسمت بالا این خط را اضافه کرده‌ایم.
<?Php if (isset($loginMessage)) echo $loginMessage;?>
این خط کد تعیین می‌کند که آیا مقدار “$loginMessage” در php تعیین شده است یا نه و مقدار متغیر را باز می‌گرداند. به‌طور مشابه زیر فیلد مربوط به ورودی ایمیل و رمز عبور نیز مقادیر متغیرهای “$errEmailMessage” و “$errPassMessage” را به ترتیب باز می‌گرداند. متغیر تعیین‌شده در زبان PHP به معنی متغیری است که خالی نباشد و حاوی مقداری باشد. زمانی که صفحه برای نخستین بار، بارگذاری می‌شود همه متغیرهایی که در بالا ذکر شدند، خالی خواهند بود و بنابراین مقادیرشان نمایش داده نخواهد شد.
اینک وقتی کاربر ایمیل و رمز عبور خود را در فیلدها وارد می‌کند و بر روی دکمه ارسال کلیک می‌کند، اطلاعات فرم به صفحه “Index.php” (که خود همین صفحه است) ارسال می‌شود. مقادیر فیلدهای فرم در آرایه‌ی متناظر $_POST ذخیره می‌شود و می‌توان با ارسال نام فیلد به این آرایه به آن‌ها دسترسی یافت. برای نمونه اگر بخواهید بررسی کنید که کاربر فرم را با کلیک بر روی دکمه ارسال تحویل داده است یا نه، می‌توانید از تابع “isset($_POST[“submit”])” استفاده کنید. این تابع درصورتی که آرایه‌ی مربوطه حاوی مقدار “submit” از فیلد فرم باشد مقدار صحیح باز می‌گرداند.
اعتبارسنجی ایمیل
برای اعتبار سنجی ایمیل متد “filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL))” استفاده می‌شود. این متد متن وارد شده از سوی کاربر در فیلد ایمیل را به‌عنوان پارامتر نخست و فلگ “FILTER_VALIDATE_EMAIL” را به‌عنوان پارامتر دوم می‌گیرد. اگر ایمیل معتبر باشد این تابع مقدار صحیح بازمی‌گرداند. اگر ایمیل معتبر نباشد، مقدار نادرست بازمی‌گرداند و یک پیغام خطا به متغیر “$errEmailMessage” انتساب می‌دهد.
اعتبار سنجی طول رمز عبور
برای اعتبارسنجی طول رمز عبور، از تابع “strlen” استفاده کرده‌ایم و آن را در مورد متن وارد شده در فیلد رمز عبور به کار می‌گیریم. درصورتی‌که تعداد کاراکترهای رمز عبور کمتر از ۸ باشد پیغام خطایی را به “$errPassMessage” انتساب می‌دهیم.
چنانچه هرکدام از آزمون‌های اعتبار سنجی فیلدهای ایمیل و رمز عبور موفق نباشند، مقدار متغیر “$LoginMessage” را به‌صورت «danger alert box» بوت‌استرپ تنظیم می‌کنیم و پیغام خطایی را به آن انتساب می‌دهیم. اما اگر اعتبار سنجی هر دو فیلد ایمیل و رمز عبور موفقیت‌آمیز باشد مقدار «success alert box» را به متغیر «“$LoginMessage”» انتساب می‌دهیم.
کد نهایی html اعتبار سنجی PHP در ادامه قابل مشاهده است.
<?php
$LoginE;
if (isset($_POST["submit"]))
{
$email = $_POST['email'];
$name = $_POST['password'];
$errEmail = false;
$errPassword = false;
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmailMessage = "Please Enter a Valid Email.";
}
if (!$_POST['password'] || strlen($_POST['password']) < 8 ) {
$errPassMessage = "Password should be minimum 8 characters.";
}
if (isset($errEmailMessage) || isset($errPassMessage) )
{
$loginMessage= '<div class="container"><div class="alert alert-danger">Sorry there were errors loging into your account.Please try again later.</div></div>';
}
else
{
$loginMessage= '<div class="alert alert-success">You have successfully logged into your account.</div>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP/Bootstrap Login Form</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
</html>
اینک اگر ایمیل نامعتبر یا رمز عبوری با کمتر از ۸ کاراکتر وارد کنید، مقادیر متغیرهای “$LoginMessage”، “$errEmailMessage” و/یا “$errPassMessage” تعیین می‌شوند و مقادیر آن‌ها (پیام‌های خطا) در فیلدهای مربوطه نمایش می‌یابد.
در تصویر زیر نحوه نمایش پیام‌های خطا را نشان داده‌ایم. یک جعبه هشدار بوت‌استرپ در بالا مشاهده می‌شود که حاوی مقداری برای متغیر“$LoginMessage” است. همچنین در زیر فیلدهای ایمیل و رمز عبور می‌توانید پیام‌های خطای متناظر را ببینید.
هر گونه سوال یا پیشنهاد خود را در خصوص روش فوق می توانید در بخش نظرات مطرح کنید.
