برنامه نویسی 9112 بازدید

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

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

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

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

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

<form method="post" action="" name="signup-form">
    <div class="form-element">
        <label>Username</label>
        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
    </div>
    <div class="form-element">
        <label>Email</label>
        <input type="email" name="email" required />
    </div>
    <div class="form-element">
        <label>Password</label>
        <input type="password" name="password" required />
    </div>
    <button type="submit" name="register" value="register">Register</button>
</form>

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

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

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

<form method="post" action="" name="signin-form">
    <div class="form-element">
        <label>Username</label>
        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
    </div>
    <div class="form-element">
        <label>Password</label>
        <input type="password" name="password" required />
    </div>
    <button type="submit" name="login" value="login">Log In</button>
</form>

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

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

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    margin: 50px auto;
    text-align: center;
    width: 800px;
}
 
h1 {
    font-family: 'Passion One';
    font-size: 2rem;
    text-transform: uppercase;
}
 
label {
    width: 150px;
    display: inline-block;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'Lato';
}
 
input {
    border: 2px solid #ccc;
    font-size: 1.5rem;
    font-weight: 100;
    font-family: 'Lato';
    padding: 10px;
}
 
form {
    margin: 25px auto;
    padding: 20px;
    border: 5px solid #ccc;
    width: 500px;
    background: #eee;
}
 
div.form-element {
    margin: 20px 0;
}
 
button {
    padding: 10px;
    font-size: 1.5rem;
    font-family: 'Lato';
    font-weight: 100;
    background: yellowgreen;
    color: white;
    border: none;
}
 
p.success,
p.error {
    color: white;
    font-family: lato;
    background: yellowgreen;
    display: inline-block;
    padding: 2px 10px;
}
 
p.error {
    background: orangered;
}

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

فرم ورود

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

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

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

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

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

<?php
define('USER', 'root');
define('PASSWORD', '');
define('HOST', 'localhost');
define('DATABASE', 'test');
 
try {
    $connection = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASSWORD);
} catch (PDOException $e) {
    exit("Error: " . $e->getMessage());
}
?>

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

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

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

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

<?php
 
include('config.php');
session_start();
 
if (isset($_POST['register'])) {
 
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    $password_hash = password_hash($password, PASSWORD_BCRYPT);
 
    $query = $connection->prepare("SELECT * FROM users WHERE EMAIL=:email");
    $query->bindParam("email", $email, PDO::PARAM_STR);
    $query->execute();
 
    if ($query->rowCount() > 0) {
        echo '<p class="error">The email address is already registered!</p>';
    }
 
    if ($query->rowCount() == 0) {
        $query = $connection->prepare("INSERT INTO users(USERNAME,PASSWORD,EMAIL) VALUES (:username,:password_hash,:email)");
        $query->bindParam("username", $username, PDO::PARAM_STR);
        $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $result = $query->execute();
 
        if ($result) {
            echo '<p class="success">Your registration was successful!</p>';
        } else {
            echo '<p class="error">Something went wrong!</p>';
        }
    }
}
 
?>

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

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

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

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

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

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

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

<?php
 
include('config.php');
session_start();
 
if (isset($_POST['login'])) {
 
    $username = $_POST['username'];
    $password = $_POST['password'];
 
    $query = $connection->prepare("SELECT * FROM users WHERE USERNAME=:username");
    $query->bindParam("username", $username, PDO::PARAM_STR);
    $query->execute();
 
    $result = $query->fetch(PDO::FETCH_ASSOC);
 
    if (!$result) {
        echo '<p class="error">Username password combination is wrong!</p>';
    } else {
        if (password_verify($password, $result['PASSWORD'])) {
            $_SESSION['user_id'] = $result['ID'];
            echo '<p class="success">Congratulations, you are logged in!</p>';
        } else {
            echo '<p class="error">Username password combination is wrong!</p>';
        }
    }
}
 
?>

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

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

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

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

<?php
session_start();
 
if(!isset($_SESSION['user_id'])){
    header('Location: login.php');
    exit;
} else {
    // Show users the page!
}
?>

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

سخن پایانی

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

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

==

بر اساس رای 27 نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

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

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

  • سلام ممنون از آموزشتون!
    من تمام کدها رو مو به مو وارد فایل ها کردم اسم ها یکی بود دیتابیس هم دقیقا مثل مثال شما ساختم‌،کار میکنه ثبت نام میشه و از ثبت داده تکراری هم جلوگیری میکنه ولی منوی لوگین هرچقدر هم دقیقا یوزرنیم و پسوورد رو دقیق وارد میکنم مینویسه اشتباهه
    بنظرتون مشکل از کجاست؟
    خودم احساس میکنم تو قسمت
    Password_verifyمقدار false میاد ولی اگ میشه پاسخ بدین تا مشکلم حل بشه؟

  • سلام . اگر بخواهیم همین ثبت نام هم از طریق سایت وهم از طریق اپلیکیشن انجام شود کد php, آن چگونه هست ؟‌ چون ثابت های POST هنگام ارسال جیسون کار نمیکنه . منظورم این هست که یک‌لینک‌ هم برای اپلیکیشن و هم برای سایت استفاده شود. آیا اصلا این کار درست هست یا این صفحات رو جداگانه مینویسند؟

  • سلام. ممنون از آموزشتون. فقط شما که اچ تی ام ال فایو نوشتید یک مشکل داشتید، اچ تی ام ال فایو برای برچسب هایی که برچسب بسته ندارن نیازی نیست علامت / رو در انتهای برچسب درج کنید. مثل تگ input و meta و… .
    با تشکر.

  • اقا من توی قسمت ورود مشکل دارم دیتابیس رو درست وصل کردم و ثبت نام کار میکنه ولی قسمت ورود ارور میده. قضیه هش چیه چطوری میشه هش رو واکشی کرد؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *