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

اکثر ما وقتی وارد سایت مورد علاقه مان می شویم تصمیم به ثبت نام می کنیم تا بخشی از خانواده ی سایت مورد علاقه مان باشیم، اما تا به حال به این دقت کرده اید که ما دقیقا چگونه در سایت ها login یا ورود می کنیم و وارد پنل کاربری خود می شویم؟ و حتی اینکه چگونه در یک سایت عضو می شویم؟ اگر شما هم این سوال ها در ذهنتان هست پس در مقاله ی آموزش ساخت صفحه لاگین و ثبت نام با 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

در 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 تبدیل می شوی که آماده ی استخدام، دریافت پروژه، کسب درآمد و یادگیری مباحثی مثل لاراول هستی.