ایجاد فرم ورود (Login) با PHP — از صفر تا صد

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

ایجاد فرم ورود و ثبت نام

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

فیلم آموزش پروژه محور PHP و MySQL – پیاده سازی انواع لاگین و ثبت نام در فرادرس

کلیک کنید

کدنویسی فرم ثبت نام

در ادامه کد HTML فرم ثبت نام را می‌بینید. شما باید آن را در فایلی به نام register.php ذخیره کنید:

1<form method="post" action="" name="signup-form">
2    <div class="form-element">
3        <label>Username</label>
4        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
5    </div>
6    <div class="form-element">
7        <label>Email</label>
8        <input type="email" name="email" required />
9    </div>
10    <div class="form-element">
11        <label>Password</label>
12        <input type="password" name="password" required />
13    </div>
14    <button type="submit" name="register" value="register">Register</button>
15</form>

این فرم کاملاً ابتدایی است، اما در آن از HTML5 استفاده کرده‌ایم تا برخی اعتبارسنجی‌های بسیار مقدماتی ورودی را اجرا کنیم. برای نمونه استفاده از "type="email به کاربران هشدار می‌دهد که آدرس ایمیلی که وارد کرده‌اند دارای قالب‌بندی صحیح نیست. به طور مشابه، استفاده از خصوصیت pattern روی نام کاربری موجب می‌شود مطمئن شویم در نام کاربری تنها کاراکترهای حرف و رقم وجود دارند.

کدنویسی فرم ورود

در ادامه کد HTML فرم ورود را مشاهده می‌کنید. این کدها را در فایلی به نام login.php قرار دهید:

1<form method="post" action="" name="signin-form">
2    <div class="form-element">
3        <label>Username</label>
4        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
5    </div>
6    <div class="form-element">
7        <label>Password</label>
8        <input type="password" name="password" required />
9    </div>
10    <button type="submit" name="login" value="login">Log In</button>
11</form>

استایل‌دهی فرم‌ها با CSS

در ادامه برخی کدهای CSS را می‌بینید که روی این فرم‌ها اعمال می‌شوند:

1* {
2    padding: 0;
3    margin: 0;
4    box-sizing: border-box;
5}
6 
7body {
8    margin: 50px auto;
9    text-align: center;
10    width: 800px;
11}
12 
13h1 {
14    font-family: 'Passion One';
15    font-size: 2rem;
16    text-transform: uppercase;
17}
18 
19label {
20    width: 150px;
21    display: inline-block;
22    text-align: left;
23    font-size: 1.5rem;
24    font-family: 'Lato';
25}
26 
27input {
28    border: 2px solid #ccc;
29    font-size: 1.5rem;
30    font-weight: 100;
31    font-family: 'Lato';
32    padding: 10px;
33}
34 
35form {
36    margin: 25px auto;
37    padding: 20px;
38    border: 5px solid #ccc;
39    width: 500px;
40    background: #eee;
41}
42 
43div.form-element {
44    margin: 20px 0;
45}
46 
47button {
48    padding: 10px;
49    font-size: 1.5rem;
50    font-family: 'Lato';
51    font-weight: 100;
52    background: yellowgreen;
53    color: white;
54    border: none;
55}
56 
57p.success,
58p.error {
59    color: white;
60    font-family: lato;
61    background: yellowgreen;
62    display: inline-block;
63    padding: 2px 10px;
64}
65 
66p.error {
67    background: orangered;
68}

این فایل شامل برخی قواعد استایل‌دهی برای نمایش پیام‌های خطا و عناوین است. کدهای HTML و CSS که در این بخش ارائه شدند می‌توانند به عنوان مبنایی برای پروژه شما جهت ایجاد فرم‌های اختصاصی استفاده شوند و ممکن است استایل‌دهی و فیلدهای ورودی متفاوتی داشته باشند.

ایجاد جدول کاربر و اتصال به پایگاه داده

گام بعدی ایجاد یک جدول کاربر است که همه اطلاعات را در مورد کاربران ثبت نام کرده ذخیره می‌کند. در این مورد جدول صرفاً شامل چهار ستون به این صورت خواهد بود: یک ستون برای شناسه با افزایش خودکار، یک نام کاربری یکتا، یک ایمیل و یک رمز عبور

فیلم آموزش پایگاه داده MySQL مای اس کیو ال در فرادرس

کلیک کنید

می‌توان از گزاره‌های SQL زیر برای ایجاد سریع جدول استفاده کرد:

1CREATE TABLE `users` (
2  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
3  `username` varchar(25) NOT NULL,
4  `password` varchar(255) NOT NULL,
5  `email` varchar(100) NOT NULL,
6  PRIMARY KEY (`id`),
7  UNIQUE KEY `username` (`username`)
8) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

سپس یک فایل به نام config.php ایجاد کرده و کدهای زیر را در آن می‌نویسیم تا به پایگاه داده وصل شویم:

1<?php
2define('USER', 'root');
3define('PASSWORD', '');
4define('HOST', 'localhost');
5define('DATABASE', 'test');
6 
7try {
8    $connection = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASSWORD);
9} catch (PDOException $e) {
10    exit("Error: " . $e->getMessage());
11}
12?>

نام پایگاه داده را در کد فوق به نام پایگاه داده‌ای که استفاده می‌کنید تغییر دهید. از این فایل برای برقراری یک اتصال به پایگاه داده استفاده می‌شود.

کد ثبت نام کاربر

در نهایت زمان آن فرا می‌رسد که کارکرد ثبت نام را بنویسیم. تابع اصلی این کد به بررسی سوابق ثبت نام قبلی ایمیل ارائه شده می‌پردازد. اگر چنین نباشد، نام کاربری، ایمیل و رمز عبور را در پایگاه داده وارد می‌کنیم.

کد زیر را در فایل registration.php قرار دهید:

1<?php
2 
3include('config.php');
4session_start();
5 
6if (isset($_POST['register'])) {
7 
8    $username = $_POST['username'];
9    $email = $_POST['email'];
10    $password = $_POST['password'];
11    $password_hash = password_hash($password, PASSWORD_BCRYPT);
12 
13    $query = $connection->prepare("SELECT * FROM users WHERE EMAIL=:email");
14    $query->bindParam("email", $email, PDO::PARAM_STR);
15    $query->execute();
16 
17    if ($query->rowCount() > 0) {
18        echo '<p class="error">The email address is already registered!</p>';
19    }
20 
21    if ($query->rowCount() == 0) {
22        $query = $connection->prepare("INSERT INTO users(USERNAME,PASSWORD,EMAIL) VALUES (:username,:password_hash,:email)");
23        $query->bindParam("username", $username, PDO::PARAM_STR);
24        $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
25        $query->bindParam("email", $email, PDO::PARAM_STR);
26        $result = $query->execute();
27 
28        if ($result) {
29            echo '<p class="success">Your registration was successful!</p>';
30        } else {
31            echo '<p class="error">Something went wrong!</p>';
32        }
33    }
34}
35 
36?>

گام نخست این است که فایل config.php را بگنجانیم و یک «نشست» (Session) را آغاز کنیم. این فرایند به ما کمک می‌کند هر اطلاعاتی را که می‌خواهیم روی صفحه‌های مختلف به آن دسترسی داشته باشیم ذخیره کنیم.

سپس با وارسی تعیین شدن متغیر ['POST['register_$، بررسی می‌کنیم که آیا کاربر روی دکمه Register کلیک کرده و فرم را تحویل داده است یا نه. همواره به یاد داشته باشید که ذخیره‌سازی رمزهای عبور به صورت متن ساده ‌ایده بدی است. به همین دلیل از تابع ()password_hash استفاده می‌کنیم. سپس هش محاسبه شده را در پایگاه داده خود ذخیره می‌کنیم. این تابع خاص یک هش 60 کاراکتری را با استفاده از salt محاسبه شده به صورت تصادفی ایجاد می‌کند.

در نهایت کوئری را اجرا می‌کنیم و بررسی می‌کنیم آیا هیچ ردیف غیر صفر برای آن آدرس ایمیل وجود دارد یا نه. اگر وجود داشته باشد پیامی به کاربر نمایش خواهیم داد که این آدرس ایمیل قبلاً در این وب‌سایت ثبت نام کرده است.

اگر هیچ ردیفی با مشخصه آدرس ایمیل ارائه شده موجود نباشد، اطلاعات عرضه شده را در پایگاه داده وارد می‌کنیم و به کاربر اطلاع می‌دهیم که ثبت نام موفق بوده است.

پیاده‌سازی کارکرد ورود کاربر

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

در ادامه کد این بخش را ملاحظه می‌کنید که باید در فایلی به نام login.php قرار گیرد.

1<?php
2 
3include('config.php');
4session_start();
5 
6if (isset($_POST['login'])) {
7 
8    $username = $_POST['username'];
9    $password = $_POST['password'];
10 
11    $query = $connection->prepare("SELECT * FROM users WHERE USERNAME=:username");
12    $query->bindParam("username", $username, PDO::PARAM_STR);
13    $query->execute();
14 
15    $result = $query->fetch(PDO::FETCH_ASSOC);
16 
17    if (!$result) {
18        echo '<p class="error">Username password combination is wrong!</p>';
19    } else {
20        if (password_verify($password, $result['PASSWORD'])) {
21            $_SESSION['user_id'] = $result['ID'];
22            echo '<p class="success">Congratulations, you are logged in!</p>';
23        } else {
24            echo '<p class="error">Username password combination is wrong!</p>';
25        }
26    }
27}
28 
29?>

یک نکته مهم که باید توجه داشته باشید این است که ما نام‌های کاربری و رمز عبور را در همزمان مقایسه نمی‌کنیم، چون رمز عبور عملاً به شکل هش شده ذخیره شده است. ابتدا باید هش را به کمک نام کاربری ارائه شده واکشی کنیم. زمانی که هش را به دست آوردیم، می‌توانیم با استفاده از تابع اقدام به مقایسه رمز عبور و هش بکنیم.

زمانی که رمز عبور با موفقیت تأیید شود، متغیر ['SESSION['user_id_$ را برابر با ID آن کاربر در پایگاه داده تعیین می‌کنیم. همچنین می‌توانید مقدار متغیرهای دیگر را نیز بسته به نیاز تعیین کنید.

محدودسازی دسترسی به صفحات

اغلب وب‌سایت‌ها که از کاربر تقاضای ثبت نام می‌کنند، صفحه‌های دیگری نیز دارند که کاربران در آن اقدام به دسترسی و ذخیره‌سازی داده‌های خصوصی خود می‌کنند. می‌توان از متغیرهای نشست برای حفاظت این صفحه‌ها استفاده کرد. اگر متغیر نشست تعیین نشده باشد، می‌توانید کاربر را به صفحه ورود هدایت کنید و در غیر این صورت کاربر می‌تواند به محتوای صفحات خود دسترسی داشته باشد.

1<?php
2session_start();
3 
4if(!isset($_SESSION['user_id'])){
5    header('Location: login.php');
6    exit;
7} else {
8    // Show users the page!
9}
10?>

تنها کاری که در این مرحله باید انجام دهید، این است که مطمئن شوید اسکریپت شامل ()session_start در ابتدای خود است.

سخن پایانی

در این راهنما آموختیم که یک سیستم ثبت نام و ورود کاربر را با استفاده از PHP بسازیم. زمانی که با مبانی سیستم‌های ورود و ثبت نام آشنا شوید، می‌توانید منطق‌های پیچیده‌تری را نیز پیاده‌سازی کنید و به کاربر امکان ریست کردن رمز عبور، تأیید کردن آدرس ایمیل و کارهایی از این دست را بدهید. همچنین می‌توانید اعتبارسنجی فرانت‌اند بیشتری را با استفاده از خصوصیت‌های HTML5 و JQuery اجرا کنید تا فرم کاربرپسندتری داشته باشید.

فیلم مجموعه آموزش‌ برنامه نویسی پی اچ پی PHP – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی PHP
• گنجینه برنامه نویسی PHP
• مجموعه آموزش‌های برنامه‌‌نویسی
• ساخت یک فرم تماس با PHP — از صفر تا صد
• برنامه‌نویسی PHP و هر آنچه برای شروع باید بدانید — آموزش جامع
• آموزش کامل MVC در PHP — از صفر تا صد و به زبان ساده

==