آموزش ساخت صفحه لاگین و ثبت نام با php و mysql

اکثر ما وقتی وارد سایت مورد علاقه‌مان می‌شویم تصمیم به ثبت نام می‌کنیم تا بخشی از خانواده‌ی سایت مورد علاقه‌مان باشیم، اما تا به حال به این دقت کرده‌اید که ما دقیقا چگونه در سایت‌ها login یا ورود می‌کنیم و وارد پنل کاربری خود می‌شویم؟ و حتی اینکه چگونه در یک سایت عضو می‌شویم؟ اگر شما هم این سوال‌ها در ذهنتان هست پس در مقاله‌ی آموزش ساخت صفحه لاگین و ثبت نام با php و mysql با ما همراه باشید.

لاگین کردن در PHP - ساخت صفحه لاگین و ثبت نام با php و mysql

آمادی سازی محیط کار

برای شروع به کار در سیستم عامل خود یک ویرایشگر کد یا IDE داشته باشید تا بتوانید به راحتی نرم‌افزار خود را توسعه دهید. برای اینکه بتوانیم کدهای PHP خود را اجرا کنیم حتما WAMP یا XAMPP را نصب داشته باشید که ما به شما XAMPP را توصیه می‌کنیم.

در ادامه ما نیاز به چهار فایل داریم به نام‌های login.php، register.php، process.php، config.php. فایل login.php کدهای html ما که مربوط به فرم ورود (لاگین) است را در بر دارد و فایل register.php سورس کد فرم ثبت نام html را در بر دارد.

در فایل process.php ما کدهای مربوط به php را می‌نویسیم و در اصل عمل ثبت نام و ورود کاربر در آن قرار می‌گیرد و در آخر نیز در فایل config.php ما کدهای مربوط به اتصال به پایگاه داده را وارد می‌کنیم.

ساخت صفحه لاگین و ثبت نام با php

ابتدا برای اینکه بتوانیم مشخصات کاربر را دریافت کنیم باید صفحه‌ی لاگین (login) و ثبت‌ نام را درست کنیم، برای اینکه در وقت‌مان صرفه جویی کنیم از فرم‌های ما که قبلا کد آن‌ها را نوشته‌ایم استفاده کنید.

ساخت صفحه لاگین با php

سورس صفحه لاگین php در پایین همین متن قرار دارد و می‌توانید استفاده کنید، نام فایل را به دلخواه می‌توانید هر چیزی بگذارید اما برای اینکه با ما قدم به قدم جلو بیایید نام فایل را login.php قرار دهید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7Learn</title>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            background: #007bec;
            color: #fff;
            font-size: 1.5em;
            font-weight: 400;
            text-align: right;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .main {
            position: relative;
            background: #ffffff;
            color: #0e5698;
            display: inline-block;
            padding: 15px 30px;
            margin: 0 auto;
            border-radius: 7px;
            box-shadow: 0 50px 50px rgba(0, 0, 0, 0.2);
            min-height: 250px;
            min-width: 400px;
        }
        h1 {
            font: 30px sans-serif;
            text-align: center;
            margin: 25px 10px;
            font-weight: bold;
            color: #4a96db;
        }
        input,
        button,
        select,
        textarea {
            display: block;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-top: 10px;
            line-height: 28px;
            height: 30px;
            padding: 0 10px;
            width: 100%;
            box-sizing: border-box;
            font-family: sans-serif;
            font-size: 15px;
        }
        button {
            background: #007bec;
            color: #fff;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            border: 0;
        }
        button:hover {
            opacity: 0.7;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class='main'>
        <h1>7Learn</h1>
        <form action="process.php" method="post">
            <input type="text" name="username" placeholder="username">
            <input type="password" name="password" placeholder="password">
            <button type="submit" name=login"">Login</button>
        </form>
    </div>
</body>
</html>

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

سورس (source) صفحه ثبت نام را هم می‌توانید از همین جا بردارید، همان‌طور که گفته شد قرار دادن نام فایل دلخواه است اما برای اینکه با ما قدم به قدم جلو بیایید نام فایل را register.php قرار دهید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7Learn</title>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            background: #007bec;
            color: #fff;
            font-size: 1.5em;
            font-weight: 400;
            text-align: right;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .main {
            position: relative;
            background: #ffffff;
            color: #0e5698;
            display: inline-block;
            padding: 15px 30px;
            margin: 0 auto;
            border-radius: 7px;
            box-shadow: 0 50px 50px rgba(0, 0, 0, 0.2);
            min-height: 250px;
            min-width: 400px;
        }
        h1 {
            font: 30px sans-serif;
            text-align: center;
            margin: 25px 10px;
            font-weight: bold;
            color: #4a96db;
        }
        input,
        button,
        select,
        textarea {
            display: block;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-top: 10px;
            line-height: 28px;
            height: 30px;
            padding: 0 10px;
            width: 100%;
            box-sizing: border-box;
            font-family: sans-serif;
            font-size: 15px;
        }
        button {
            background: #007bec;
            color: #fff;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            border: 0;
        }
        button:hover {
            opacity: 0.7;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class='main'>
        <h1>7Learn</h1>
        <form action="process.php" method="post">
            <input type="text" name="username" placeholder="username">
            <input type="password" name="password" placeholder="password">
            <button type="submit" name="register">register</button>
        </form>
    </div>
</body>
</html>

سیستم ثبت نام کاربر در PHP - ساخت صفحه لاگین و ثبت نام با php و mysql

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

در mysql یک دیتابیس به اسم my_site بسازید و درون دیتابیس ساخته شده یک جدول به اسم users با ستون‌های username، password ایجاد کنید تا بتوانیم کاربران خود را بسازیم و عمل ثبت نام و ورود کاربران را انجام بدهیم.

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

<?php
$database_config = (object) [
    'host'    => 'localhost',
    'user'    => 'root',
    'pass'    => '',
    'dbname'  => 'my_site'
]

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

try {
    $pdo = new PDO("mysql:host={$database_config->host};dbname={$database_config->dbname}", $database_config->user, $database_config->pass);
    $pdo->exec('set names utf8');
} catch (Exception $e) {
    die("There is something wrong with connection, error: " . $e->getMessage());
}

در کد بالا و قسمت اتصال به پایگاه داده را درون بلاک try قرار داده‌ایم. درون کلاس PDO ما تمامی مشخصات لازم برای اتصال به پایگاه داده را نوشته‌ایم، بلاک catch هم زمانی اجرا می‌شود که خطایی در اتصال به پایگاه داده رخ بدهد.

حال اتصال به پایگاه داده‌ی ما آماده است و درون متغیر pdo قرار دارد و می‌توانیم به راحتی فایل config.php را هر جا که خواستیم include کنیم و از آن استفاده کنیم.

سورس کدهای ساخت صفحه لاگین و ثبت نام با php

کدهای مربوط به ثبت نام و لاگین (login) کاربر را ما درون فایل process.php می‌نویسیم، ابتدا ما می‌خواهیم از ثبت نام کاربر شروع کنیم پس با ما همراه باشید.

ثبت نام کاربر در php و mysql

به خاطر داشته باشید که action فرم ما به فایل process.php که ما اکنون درون آن کار می‌کنیم است و متد (method) فرم‌مان نیز POST می‌باشد.

وقتی که اطلاعات درون فرم موجود در فایل register.php ارسال می‌شود ما تمامی مقادیر وارد شده در فرم را درون آرایه‌ی سوپر گلوبال (super global variables) POST داریم و می‌توانیم از آن‌ها به درستی استفاده کنیم.

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

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['username']) and isset($_POST['password'])) {
        if (!empty($_POST['username']) and !empty($_POST['password'])) {
            if (isset($_POST['register'])) {
                # Register User
            } elseif (isset($_POST['login'])) {
                # Login User
            }
        }
    }
}

در کد بالا در اولین شرط بررسی کرده‌ایم آیا فرم ارسال شده است؟ که بررسی این شرط با REQUEST_METHOD انجام شده است که اگر مقدار POST را درون خودش داشت به این معناست که فرم ارسال شده است.

در شرط بعدی بررسی کرده‌ایم که مقادیر ارسال شده‌اند یا خیر؟ که از isset استفاده کرده‌ایم. درون شرط بعدی بررسی کرده‌ایم که مقادیر ارسال شده خالی نباشند.

بعد از این سه تا شرط ما شرطی را آورده‌ایم که تشخیص دهد داده‌های ارسال شده از فرم ورود (login) است یا ثبت نام (register).

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

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

ابتدا کار ما باید یک تابع بنویسیم که بررسی کند که آیا کاربر قبلا با این نام کاربری وجود دارد یا خیر. توجه داشته باشید ما باید با پایگاه داده کار کنیم پس به اتصال آن نیاز داریم و ما این اتصال را در فایل config.php داریم و باید این فایل را include کنیم. کد پایین را بعد از تگ php درون فایل process.php قرار دهید.

include 'config.php';

ابتدا تابعی می‌نویسیم تا بررسی که آیا کاربری با این نام کاربری وجود دارد یا خیر؟

function isUserExists($username)
{
    global $pdo;
    $sql = "SELECT * FROM users WHERE username = :username";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':username' => $username]);
    return $stmt->rowCount();
}

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

function register($name, $username, $password)
{
    global $pdo;
    if (isUserExists($username)) {
        return false;
    }
    $sql = "INSERT INTO users (username, password) VALUES (:username, :password)";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':username' => $username, ':password' => $password]);
    return $stmt->rowCount();
}

در تابع register ما یک شرط آورده‌ایم و اگر کاربر موجود بود false را به عنوان خروجی تابع برمی‌گردانیم تا بتوانیم به او اطلاع بدهیم تا عمل لاگین را انجام دهد. اگر هم کاربر موجود نبود و از قبل ثبت نام نکرده بود ادامه‌ی کد اجرا می‌شود و کاربر در سیستم ما ثبت نام می‌شود.

در بخش شرط‌هایمان که تابع register را صدا زده‌ایم به راحتی می‌توانیم خروجی تابع register را دریافت کنیم و با توجه به آن خروجی واکنش مناسبی می‌دهیم. تابع register اگر به درستی کاربر را ثبت کند خروجی 1 را به عنوان خروجی می‌دهد و اگر عملیات با موفقیت انجام نشد خروجی 0 خواهد بود که 1 و 0 معادل true و false هستند.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['username']) and isset($_POST['password'])) {
        if (!empty($_POST['username']) and !empty($_POST['password'])) {
            if (isset($_POST['register'])) {
                if (register($_POST['username'], $_POST['password'])) {
                    header("location: register.php?s=1");
                    exit;
                }else{
                    header("location: register.php?s=0");
                    exit;
                }
            } elseif (isset($_POST['login'])) {
               # 
            }
        }
    }
}

در بلاک شرط register ما بررسی کرده‌ایم که اگر خروجی تابع register درست یا true بود به صفحه‌ی register.php برگشت داده شود و در URL برگشت داده شده ما یک مقدار s=1 را نیز قرار داده‌ایم تا بتوانیم در صفحه‌ی مقصد پیام مرتبط را چاپ کنیم. در بخش else هم زمانی اجرا می‌شود که درون تابع register تابع isUserExists اجرا شده است و تابع به این نتیجه رسیده است که کاربر موجود است و نیازی به ثبت نام دوباره ندارد پس مقدار بازگشتی تابع 0 خواهد بود و ما می‌توانیم پیام مرتبط با آن را نیز نمایش بدهیم.

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

کدهای لاگین کاربر در php

در این بخش از مقاله‌ی آموزش ساخت صفحه لاگین و ثبت نام با php و mysql ، به آموزش ساخت صفحه لاگین با php می‌پردازیم.

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

برای اینکه بتوانیم از SESSIONها استفاده کنیم باید SESSION را start کنیم، برای این کار کافی است در بالاترین قسمت صفحه‌ای که قرار است از SESSION استفاده کنیم تابع ()session_start را استفاده کنیم.

بعد از ()session_start حال نوبت به نوشتن تابع login است.

function login($username, $password)
{
    global $pdo;
    if (!isUserExists($username)) {
        return false;
    }
    $sql = "SELECT * FROM users WHERE username = :username AND password = :password";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':username' => $username, ':password' => $password]);
    $result = $stmt->fetch(PDO::FETCH_OBJ);
    $_SESSION['login'] = $result->id;
    return true;
}

درون تابع لاگین ما اول بررسی کرده‌ایم که آیا کاربر از قبل وجود دارد؟ اگر کاربر از قبل ثبت نام کرده بود ما در ادامه‌ی کد با یک کوئری بررسی می‌کنیم ببینیم آیا نام کاربری و رمز عبورش درست است. اگر درست بود یک SESSION برای کاربر با id خودش ثبت می‌کنیم.

تمامی کدهای صفحه‌ی process.php در یک نگاه

<?php
session_start();
include 'config.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['username']) and isset($_POST['password'])) {
        if (!empty($_POST['username']) and !empty($_POST['password'])) {
            if (isset($_POST['register'])) {
                if (register($_POST['username'], $_POST['password'])) {
                    header("location: register.php?s=1");
                    exit;
                } else {
                    header("location: register.php?s=0");
                    exit;
                }
            } elseif (isset($_POST['login'])) {
                if (login($_POST['username'], $_POST['password'])) {
                    header("location: login.php?s=1");
                    exit;
                } else {
                    header("location: login.php?s=0");
                    exit;
                }
            }
        }
    }
}
function isUserExists($username)
{
    global $pdo;
    $sql = "SELECT * FROM users WHERE username = :username";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':username' => $username]);
    return $stmt->rowCount();
}
function register($username, $password)
{
    global $pdo;
    if (isUserExists($username)) {
        return false;
    }
    $sql = "INSERT INTO users (username, password) VALUES (:username, :password)";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([ ':username' => $username, ':password' => $password]);
    return $stmt->rowCount();
}
function login($username, $password)
{
    global $pdo;
    if (!isUserExists($username)) {
        return false;
    }
    $sql = "SELECT * FROM users WHERE username = :username AND password = :password";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':username' => $username, ':password' => $password]);
    $result = $stmt->fetch(PDO::FETCH_OBJ);
    $_SESSION['login'] = $result->id;
    return true;
}

بررسی لاگین بودن کاربر در صفحه‌ی لاگین

در صفحه login.php می‌خواهیم لاگین بودن کاربر را با SESSION که در تابع login ثبت کردیم بررسی کنیم، برای این کار ابتدا در بالاترین نقطه‌ی صفحه‌ی login.php سشن (SESSION) را start کنید.

<?php session_start() ?>

حال می‌خواهیم بررسی کنیم اگر کاربر لاگین بود فرم ورود را نشان ندهد و یک پیام "You are logged in" را می‌دهیم و اگر لاگین نبود فرم ورود را به کاربر نشان می‌دهیم تا لاگین کند.

    <?php if (isset($_SESSION['login'])) : ?>
        <?= "You are login" ?>
    <?php else : ?>
        <div class='main'>
            <h1>7Learn</h1>
            <form action="process.php" method="post">
                <input type="text" name="username" placeholder="username">
                <input type="password" name="password" placeholder="password">
                <button type="submit" name="login">Login</button>
            </form>
        </div>
    <?php endif; ?>

در کد بالا با یک if ساده این کار را انجام داده‌ایم دقت کنید که ما این کدها را درون فایل login.php نوشته‌ایم و از شرط‌هایی که درون بلاک‌های مختلف php آمده‌اند استفاده کرده‌ایم.

جمع‌بندی

در این مقاله ما یاد گرفتیم که چگونه کاربر را درون سیستم خود ثبت نام و ورود یا به اصطلاح لاگین کنیم و توانستیم با کمک توابعی که نوشته‌ بودیم این کار را به راحتی انجام دهیم، کار دیگری که می‌توانید با این پروژه کوچک انجام بدهید این است که بعد از دریافت s=1 و s=0 از header به کاربر یک پیام مناسب نشان دهید. اگر در مورد آموزش ساخت صفحه لاگین و ثبت نام با php و mysql سوال یا نظری داشتید خوشحال می‌شویم که در بخش نظرات با ما و کاربران سون لرن به اشتراک بگذارید.

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