پنجشنبه ۲۴ اردیبهشت ۱۴۰۵

Thursday, May 14, 2026 GMT +3:30

آموزش ساخت فرم عضویت در سایت با PHP و MySQL

mysql-php-user-sign-up

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

ایجاد دیتابیس اطلاعات عضویت کاربران


اولین گامی که برای ساخت فرم عضویت کاربران در سایت مورد نیاز است وجود یا ایجاد دیتابیس در سیستم مدیریت پایگاه داده MySQL جهت نگهداری اطلاعات عضویت به فرض شامل نام، نام کاربری، کلمه عبور، شماره تماس و... است که بدین منظور دو حالت متصور می باشد:
اگر از قبل دیتابیسی در سایت خود به طور مثال برای نگهداری مطالب ساخته باشیم معمولا نیازی به ساخت دیتابیس جدید نیست و می توانیم وارد گام بعدی یعنی ساخت جدول و ستون ها شویم.
اما اگر از قبل چنین دیتابیسی در سیستم مدیریت پایگاه داده نساخته باشیم قاعدتا باید یک دیتابیس جدید ایجاد کنیم، بدین منظور در سرور مجازی (Localhost) با استفاده از برنامه phpMyAdmin در آدرس:
http://localhost/phpmyadmin
و منوی Databases یک دیتابیس با نام دلخواه و Collation مناسب زبان فارسی (ترجیحا utf8_persian_ci) می سازیم، در سرور آنلاین ممکن است مجوز انجام این کار در برنامه phpMyAdmin فراهم نباشد و باید از امکانات سیستم مدیریت هاست به فرض برنامه cPanel، DirectAdmin و... استفاده کنیم، به طور مثال در برنامه cPanle می توانیم از منوی Databases وارد قسمت MySQL Databases شویم و از امکانات آن برای ایجاد کاربر و پایگاه داده جدید استفاده کنیم.
نکته: برای برقراری ارتباط با دیتابیس لازم است که یک نام کاربری و کلمه عبور در اختیار داشته باشیم، در لوکال هاست به صورت پیش فرض معمولا نام کاربری root بدون کلمه عبور کاربرد دارد اما در سرور آنلاین باید از قسمت ساخت دیتابیس یک نام کاربری و کلمه عبور نیز ایجاد و به دیتابیس مورد نظرمان مرتبط کنیم.

ایجاد فولدری با نام php-mysql-signup


برای تجمیع و مدیریت ساده تر فایل های سیستم ثبت نام و عضویت کاربران در سایت بهتر است یک دایرکتوری مجزا در نظر بگیریم، در این آموزش فولدری با نام دلخواه php-mysql-signup ساخته ایم که در مجموع چند فایل و فولدر زیر را شامل می شود:
- فایل config.php، حاوی اطاعات اتصال به دیتابیس.
- فایل create.php، جهت ایجاد جدول و ستون ها.
- فایل index.html، فرم HTML ثبت نام و عضویت.
- فایل users.php، بررسی و ذخیره اطلاعات ارسالی کاربران.
- فولدر lib، شامل فایلی با نام password_compat.php جهت استفاده از قابلیت های توابع جدید کلمه عبور در نسخه 5.5 و قدیمی تر PHP.
در ادامه با جزئیات این فایل ها را بررسی می کنیم.

تنظیم اطلاعات اتصال به دیتابیس در فایل config.php


در آموزش های مقدماتی MySQL دیدیم که برای اتصال به دیتابیس نیاز به تنظیم چند پارامتر در تابع mysqli_connect است که شامل نام سرور، نام کاربری دیتابیس، کلمه عبور دیتابیس و در نهایت عنوان دیتابیس است، برای تجمیع این موارد و استفاده چندباره از تنظیمات پیکربندی در صفحات مختلف معمولا از فایل Configuration استفاده می شود که در این آموزش نیز بر همین اساس اطلاعات را در فایلی با نام دلخواه config.php به صورت نمونه زیر قرار داده ایم:
<?php
//تنظیمات اتصال به دیتابیس
$config = array(
    'host' => 'localhost',
    'db_user' => 'نام کاربری دیتابیس',
    'db_pass' => 'کلمه عبور دیتابیس',
    'db_name' => 'نام دیتابیس'
);
?>
این فایل جهت نمونه است و باید مطابق با اطلاعات دیتابیسمان تکمیل شود.

ایجاد جدول و ستون ها با دستور CREATE در فایل create.php


در گام سوم و بعد از ساخت دیتابیس و تنظیم اطلاعات اتصال باید جدولی در پایگاه داده خود با نامی دلخواه بسازیم و ستون هایی را در آن برای نگهداری نام کاربری، کلمه عبور و سایر اطلاعات مورد نیاز ایجاد کنیم، بدین منظور از دستور CREATE TABLE در MySQL استفاده می کنیم، در نمونه کد زیر سه ستون id، username و password را در جدول فرضی users ساخته ایم:
<?php
//فایل تنظیمات اتصال به دیتابیس
include_once('config.php');

//اتصال به دیتابیس
$conn = mysqli_connect($config['host'], $config['db_user'], $config['db_pass'], $config['db_name']);

if(!$conn) {
    echo "PHP & MySQL Connection: Error! " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
    exit;
} else {
    echo "PHP & MySQL Connection: Ok!<br>";

    //نام جدول
    $tbl_name = "users";

    //ساخت جدول و ستون ها
    $sql = "CREATE TABLE $tbl_name(
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255),
    password VARCHAR(255))
    ENGINE=MyISAM DEFAULT CHARACTER SET=utf8 COLLATE=utf8_persian_ci"
;
    $query = mysqli_query($conn, $sql);
    if(!$query) {
        echo "Creating Table $tbl_name: Error! " . mysqli_error($conn);
    } else {
        echo "Creating Table $tbl_name: OK!";
    }
}

//پایان اتصال
mysqli_close($conn);
?>
توضیح:
- ابتدا در تابع mysqli_connect اطلاعات لازم جهت اتصال به پایگاه داده را تعریف می کنیم، نام کاربری و کلمه عبور اتصال به پایگاه داده در این تابع مورد نیاز است که در لوکال معمولا با نام کاربری root بدون کلمه عبور می توانیم ارتباط با دیتابیس را برقرار کنیم اما در سرور باید از محیط پنل مدیریت هاست یک کاربر برای دیتابیس خود تعریف کنیم.
- در پارامتر چهارم تابع mysqli_connect عنوان دیتابیس خود را درج می کنیم، گفتیم که این دیتابیس را باید در گام اول ایجاد کرده باشیم.
- در متغیر tbl_name عنوان جدول مد نظرمان را درج می کنیم که در اینجا از عبارت users استفاده کرده ایم.
- دستور CREATE TABLE سه ستون id با خاصیت افزایش خودکار (AUTO_INCREMENT)، ستون username و password از نوع VARCHAR می سازد و در نهایت موتور پیش فرض جدول را بر روی MyISAM تنظیم می کند.
- برای سازگاری با زبان فارسی از COLLATE utf8_persian_ci استفاده کرده ایم.
- در نهایت هم اتصال PHP و پایگاه داده با تابع mysqli_close به پایان می رسد.
نکته 1: با درج این نمونه کد در یک فایل PHP با نام فرضی create.php و اجرای آن در مرورگر ستون های مد نظر در دیتابیس ایجاد می شوند.
نکته 2: در این آموزش از اکستنشن MySQLi در حالت رویه ای (Procedural) استفاده شده است، در صورت تمایل می توانیم کدها را به حالت شی گرا (Object-oriente) یا با اکستشن PDO نیز بنویسیم.

فرم HTML جهت عضویت و ثبت نام کاربر در فایل index.html


پس از ساختن دیتابیس، جدول و ستون ها نوبت به ساختن فرم HTML برای ایجاد امکان دریافت اطلاعات از کاربران و ثبت نام آنها است، در این گام با طراحی یک صفحه HTML و قرار دادن چند فیلد input یا textarea در آن به فرض برای درج نام کاربری و کلمه عبور می توانیم اطلاعات کاربران را به سرور ارسال و در جدول و ستون های تعیین شده ذخیره کنیم که در نمونه فرم ساده زیر این کار صورت گرفته است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فرم HTML ثبت نام کاربر در سایت</title>
<!-- Webgoo.ir -->
<style>
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
line-height: 22px;
}
</style>
</head>
<body>
<form action="users.php" method="post">
<label for="user">نام کاربری:</label>
<input name="username" id="user" type="text" maxlength="255" dir="ltr">
<label for="pass">کلمه عبور:</label>
<input name="password" id="pass" type="password" maxlength="255" dir="ltr">
<label for="rep">تکرار کلمه عبور:</label>
<input name="repeat" id="rep" type="password" maxlength="255" dir="ltr">
<input type="submit" value="عضویت">
</form>
<hr>
- قبل از عضویت کاربر جدید ابتدا باید اطلاعات اتصال به دیتابیس را در فایل config.php در آرایه config تعریف کرده باشیم، نام کاربری در لوکال هاست معمولا root و بدون کلمه عبور است.<br>
- در گام دوم باید جدول و ستون ها در دیتابیس ایجاد شوند، برای این کار آدرس فعلی مرورگر را کپی کرده و با افزودن عبارت create.php در انتهای آدرس، در پنجره جدید این فایل را یک بار فراخوانی می کنیم، به طور مثال:<br> http://localhost/php-mysql-signup/create.php<br>
- دقت کنیم برای رمزنگاری کلمه عبور از تابع password_hash استفاده کرده ایم، این تابع از نسخه PHP 5.5 در دسترس است، برای سازگاری نسخه های قدیمی تر کتابخه password_compat به کدها اضافه شده است.<br>
</body>
</html>
توضیح:
- کدهای بالا را می توانیم در فایلی با نام فرضی index.html در دایرکتوری مربوط به ثبت نام کاربر درج کنیم.
- این فرم HTML سه فیلد input جهت درج نام کاربری، کلمه عبور و تکرار کلمه عبور ایجاد می کند.
- در قسمت action آدرس فایل users.php را قرار می دهیم (اطلاعات فرم به این فایل ارسال می شود).
- برای ارسال اطلاعات از متد POST استفاده کرده ایم، به همین دلیل در سمت سرور و فایل users.php نیز باید از متد POST برای دریافت اطلاعات استفاده کنیم.
- آنچه به عنوان مقدار یا value به فایل users.php ارسال می شود از قسمت مربوط به name در تگ input قابل شناسایی و دریافت است (در ادامه خواهیم دید).
- با قرار دادن خاصیت maxlength حداکثر تعداد کاراکترهای مجاز و قابل درج در فیلد متنی را تعیین می کنیم.
- قسمت مربوط به label جهت تعریف عناوین متنی (برچسب) برای تگ های فرم استفاده می شود.
- در نهایت اطلاعات با دکمه submit به فایل users.php ارسال می شود.
نکته: برای جلوگیری از پیچیده شدن مبحث و تمرکز بر روی کدنویسی سمت سرور ظاهر کار به صورت ساده ارائه شده است، با کمی آشنایی با CSS می توانیم جلوه ظاهری فرم را به نحو دلخواه سفارشی سازی کنیم.

بررسی و ذخیره اطلاعات با فایل users.php


پس از اینکه کاربر اطلاعات خود را در فیلدهای input فرم بالا وارد می کند با زدن دکمه submit مقادیر با متد POST به فایل users.php ارسال و پارامترها در سرور قابل دریافت هستند، مثال زیر روشن است:
<?php
//دریافت و تعریف متغیرها
@$username = $_POST['username'];
@$password = $_POST['password'];
@$repeat = $_POST['repeat'];
?>
توضیح:
- با روش بالا نام کاربری از فیلد username دریافت و در متغیر username ذخیره می شود، همچنین کلمه عبور از فیلد password دریافت و در متغیر password ذخیره می شود، تکرار کلمه عبور نیز از فیلد repeat دریافت و در متغیری با همین نام نگهداری می شود، به این صورت اطلاعات ارسالی کاربر در هنگام اجرای برنامه PHP در دسترس است و می توانیم پردازش های مورد نظرمان را روی آنها اعمال کنیم.
- دقت کنیم معمولا آنچه برای PHP در کار با فرم HTML اهمیت دارد متد استفاده شده (POST یا GET) و پارامتر name فیلدها است، سایر موارد مانند ID تگ ها صرفا جنبه سمت کاربر دارند و به سرور ارسال نمی شوند.

بررسی معتبر بودن اطلاعات ارسال شده از فرم HTML


در ادامه و پس از اینکه اطلاعات فیلدها را از فرم HTML در متغیرهای PHP دریافت کردیم باید معتبر بودن مقادیر ارسال شده را بررسی کنیم، به طور مثال مقادیر فیلد نباید خالی باشد یا ممکن است کلمه عبور را محدود به کاراکترهای خاصی کنیم، برای اعتبارسنجی این موارد به کدنویسی فایل users.php دستورات زیر را اضافه می کنیم:
<?php
//دریافت و تعریف متغیرها
@$username = $_POST['username'];
@$password = $_POST['password'];
@$repeat = $_POST['repeat'];

//پیش فرض
$error = 0;

/* بررسی معتبر بودن اطلاعات ارسالی کاربر */
//نام کاربری
if(!isset($username) || empty($username)) {
    echo "فیلد نام کاربری نباید خالی باشد!";
    $error = 1;
} //کلمه عبور
elseif(!isset($password) || empty($password)) {
    echo "فیلد کلمه عبور نباید خالی باشد!";
    $error = 1;
} elseif($password !== $repeat) {
    echo "کلمه عبور با تکرار آن همخوانی ندارد!";
    $error = 1;
} //مجاز بودن انتخاب حروف انگلیسی به عنوان نام کاربری
elseif(preg_match('/^[a-z0-9_-]+$/i', $username) === 0) {
    echo "نام کاربری دارای کاراکترهای غیر مجاز است!";
    $error = 1;
}
?>
کدنویسی این فایل برای استفاده ناقص است و در گام های بعدی در ادامه آموزش حاضر کامل می شود.
توضیح:
- علامت @ استفاده شده در ابتدای متغیرها برای جلوگیری از چاپ خطای Notice: Undefined index در صورت فراخوانی فایل users.php بدون تنظیم شدن پارامترهای فرم است.
- در دستور شرطی if تنظیم شدن و خالی نبودن نام کاربری را با توابع isset و empty بررسی می کنیم، اگر نام کاربری خالی باشد پیامی به کاربر نشان داده و متغیری به نام error (نام دلخواه است) را برابر 1 قرار می دهیم تا در ادامه وضعیت آن را بررسی کنیم.
- در دستور elseif اول بررسی های بالا را روی کلمه عبور انجام می دهیم تا از خالی نبودن آن یا ارسال اشتباه فرم توسط کاربر اطمینان حاصل کنیم، در elseif دوم نیز کلمه عبور را با تکرار آن تطبیق می دهیم، با توجه به اهمیت کلمه عبور و لزوم به خاطر داشتن آن توسط کاربر معمولا این تطبیق جهت اطمینان از درج صحیح کاراکترهای مد نظر انجام می شود.
- در قسمت elseif آخر نیز با تابع preg_match بررسی می کنیم تا ببینیم آیا کاراکترهای وارد شده توسط کاربر صرفا شامل حروف و اعداد انگلیسی می شود یا خیر، همچنین دو کاراکتر- و _ را هم جزء کاراکترهای مجاز قرار داده ایم، اگر کاراکتری خارج از این موارد ارسال شود بررسی preg_match نادرست یا false شده (وضعیت با عدد 0 برگردانده می شود) و پیام خطا برای کاربر نمایش داده خواهد شد.
نکته: بررسی اعتبار اطلاعات فرم بسته به اینکه هدف و خواسته ما چه چیزی باشد متفاوت و سلیقه ای است، لذا مثال های عنوان شده صرفا جهت نمونه است و هیچ محدودیتی در این خصوص وجود ندارد.
در ادامه کدنویسی فایل users.php را با موارد دیگری تکمیل می کنیم.

حفظ امنیت اطلاعات و دیتابیس


اگر همه چیز درست باشد و کاربر فیلدها را به طور کامل تکمیل و ارسال نماید نوبت به مرحله ذخیره اطلاعات در دیتابیس است، اما قبل از اینکه به این گام بپردازیم یک امر مهم را نباید فراموش کنیم:
حفظ امنیت اطلاعات و پایگاه داده!
در برنامه نویسی PHP و هنگام ارتباط با MySQL رعایت مسائل امنیتی کار با پایگاه داده ضروری است، اگرچه عمده کاربران هیچ سوء نیتی نداشته و صرفا به دنبال استفاده های متداول هستند اما ممکن است هکرهایی پیدا شوند که مترصد کوچکترین فرصتی برای نفوذ و آسیب زدن به برنامه ما باشند، از طرفی ذخیره اطلاعات حساس و به فرض کلمه عبور کاربران باید به صورت رمزنگاری شده باشد تا امکان هر نوع سوء استفاده احتمالی را از بین ببرد و ضریب امنیت را افزایش دهد، در مقوله امنیت باید همواره زمانی را فرض کنیم که بخشی از اطلاعات پایگاه داده به هر دلیل در اختیار هکرها قرار گرفته است، در این حالت اگر اطلاعات به صورت یک طرفه و بدون امکان بازگشت رمزی شده باشد قاعدتا استفاده چندانی برای مهاجم نخواهد داشت و حداقل اگر نگوئیم ناممکن ولی احتمال بازیابی بسیار بعید خواهد بود، در این چارچوب در برنامه نویسی رویه ای PHP با اکستنشن MySQLi بدین منظور از توابع mysqli_real_escape_string و password_hash استفاده کرده ایم که روش توصیه شده و جایگزین روش های قدیمی مانند تابع md5 است، در ادامه کدنویسی فایل users.php را به شکل زیر توسعه می دهیم:
<?php
//فایل تنظیمات اتصال به دیتابیس
include_once('config.php');

//تعریف توابع کلمه عبور در نسخه های پائین تر از PHP 5.5
if(!function_exists('password_hash')){
    include_once('lib/password_compat.php');
}

//دریافت و تعریف متغیرها
@$username = $_POST['username'];
@$password = $_POST['password'];
@$repeat = $_POST['repeat'];

//پیش فرض
$error = 0;

/* بررسی معتبر بودن اطلاعات ارسالی کاربر */
//نام کاربری
if(!isset($username) || empty($username)) {
    echo "فیلد نام کاربری نباید خالی باشد!";
    $error = 1;
} //کلمه عبور
elseif(!isset($password) || empty($password)) {
    echo "فیلد کلمه عبور نباید خالی باشد!";
    $error = 1;
} elseif($password !== $repeat) {
    echo "کلمه عبور با تکرار آن همخوانی ندارد!";
    $error = 1;
} //مجاز بودن انتخاب حروف انگلیسی به عنوان نام کاربری
elseif(preg_match('/^[a-z0-9_-]+$/i', $username) === 0) {
    echo "نام کاربری دارای کاراکترهای غیر مجاز است!";
    $error = 1;
}

//بررسی خطا
if($error === 0) {
    //اتصال به دیتابیس
    $conn = mysqli_connect($config['host'], $config['db_user'], $config['db_pass'], $config['db_name']);

    if(!$conn) {
        echo "PHP & MySQL Connection: Error! " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
        exit;
    } else {
        echo "PHP & MySQL Connection: Ok!<br>";

        //ایمن سازی پارامترها
        $username = mysqli_real_escape_string($conn, $username);
        $password = password_hash($password, PASSWORD_BCRYPT, ['cost' => 12]);
    }

    //پایان اتصال
    mysqli_close($conn);
}
?>
همچنان کدنویسی این فایل برای استفاده ناقص است و در گام های بعدی کامل می شود.
توضیح:
- تابع mysqli_real_escape_string نیاز به آبجکت اتصال به پایگاه داده (متغیر conn) دارد در غیر اینصورت با خطا مواجه خواهیم شد، از این تابع برای جلوگیری از حملات موسوم به MySQL Injection یا نفوذ به دیتابیس استفاده می کنیم.
- از تابع password_hash برای رمزی کردن یک طرفه رشته ها استفاده می کنیم، اگرچه هیچ الگوریتمی به طور کامل ایمن نیست اما با استفاده از تابع password_hash و الگوریتم استفاده شده در پارامتر PASSWORD_BCRYPT تا حدود بسیار زیادی امنیت کلمه های عبور کاربران حفظ می شود و روش های متداول هکرها (Dictionary attack، Brute force attack و Rainbow table attack) برای بازیابی کلمه عبور عملا خنثی و یا بسیار زمانبر خواهد شد.
نکته 1: کلمه های عبور رمزنگاری شده با تابع password_hash در عمل به هیچ وجه قابل بازیابی به حالت اولیه نیستند و برای کاربرانی که کلمه عبور خود را فراموش کرده اند باید سیستم بازیابی کلمه عبور جدید در نظر گرفته شود.
نکته 2: هرچند الگوریتم های رمزنگاری کلمه عبور از جمله الگوریتمی که در PASSWORD_BCRYPT استفاده می شود به عنوان روش بدون بازگشت شناخته شده و بسیار قوی هستند، با این حال در مقوله امنیت هیچ غیرممکنی وجود ندارد و در صورتی که به هر دلیل اطلاعات دیتابیس در اختیار افراد غیر قرار گیرد باید در اولین فرصت نسبت به تغییر کلمات عبور کاربران اقدام شود و بهتر است چنین سیستمی از قبل در برنامه طراحی شده باشد.
نکته 3: برای تطبیق کلمه عبور به طور مثال در هنگام ورود کاربر به سایت باید اطلاعات ارسالی از فیلتر تابع password_verify به صورت نمونه زیر عبور کند:
//روش تطبیق برای ورود کاربران
$password = @$_POST['password'];
if(password_verify($password, $db_hashed_password)) {
    //کاربر مجاز به ورود است!
}
در این شیوه متغیر password مقادیر خام ارسال شده کلمه عبور از فرم HTML و متغیر db_hashed_password مقادیر رمزی شده کلمه عبور موجود در دیتابیس است.
در بحث امنیت کلمه عبور، شیوه رمزنگاری و تطبیق آن توابع دیگری مانند crypt و hash_equals نیز کاربرد دارند، مثال:
//رمزنگاری کلمه عبور
$password = crypt($password);

//روش تطبیق برای ورود کاربران
$password = crypt($password, $db_hashed_password);
if(hash_equals($db_hashed_password, $password)) {
    //کاربر مجاز به ورود است!
}
در صورت استفاده از این روش مهم است که مشابه نمونه بالا مقدار رمزی شده کلمه عبور موجود در دیتابیس به عنوان Salt در آرگیومنت دوم تابع crypt تنظیم شود در غیر اینصورت قاعدتا نتیجه تطبیق اطلاعات همواره false خواهد بود و در عین صحیح وارد کردن کاراکترها با پیام "نام کاربری یا کلمه عبور اشتباه است" مواجه خواهیم شد، همچنین از تابع hash_equals برای جلوگیری از حملات Timing استفاده کرده ایم این تابع از نسخه 5.6 PHP در دسترس است اما در نسخه های قدیمی می توانیم از تابع جایگزین زیر استفاده کنیم:
<?php
if(!function_exists('hash_equals')) {
    function hash_equals($str1, $str2) {
        if(strlen($str1) != strlen($str2)) {
            return false;
        } else {
            $res = $str1 ^ $str2;
            $ret = 0;
            for($i = strlen($res) - 1; $i >= 0; $i--) {
                $ret |= ord($res[$i]);
            }
            return !$ret;
        }
    }
}
?>
نکته 3: توجه داشته باشیم تابع md5 نیز در تئوری روش رمزنگاری بدون بازگشت است، در واقع برگردان پسوردهای قوی رمزنگاری شده با این تابع در سیستم های متداول بسیار زمانبر و دشوار است، با این حال با توجه به قدرت سخت افزاری سیستم های جدید و امکان وقوع حملات Dictionary، Brute force و Rainbow table استفاده از این تابع برای رمزنگاری کلمه عبور دیگر توصیه نمی شود و بهتر است از روش های جایگزین مانند تابع password_hash و crypt استفاده شود (password_hash و password_verify توصیه می شوند).

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


علاوه بر اعتبارسنجی مقادیری که برای ثبت نام کاربر در سایت به سرور ارسال می شوند باید از قابل ثبت و آزاد بودن نام کاربری انتخاب شده نیز اطمینان حاصل کنیم، منظور از قابل ثبت و آزاد بودن این است که بررسی کنیم نام کاربری درخواستی از قبل در دیتابیس وجود نداشته و توسط کاربر دیگری ثبت نشده باشد، دلیل این کار روشن است و مشخص است که دو یا چند نام کاربری مشابه در یک سیستم باعث ایجاد مشکل در شناسایی کاربران مختلف از هم خواهد شد، بدین منظور فایل users.php را توسعه داده و پرس و جوی SELECT را به صورت نمونه زیر به کدهای برنامه اضافه می کنیم:
<?php
//فایل تنظیمات اتصال به دیتابیس
include_once('config.php');

//تعریف توابع کلمه عبور در نسخه های پائین تر از PHP 5.5
if(!function_exists('password_hash')){
    include_once('lib/password_compat.php');
}

//دریافت و تعریف متغیرها
@$username = $_POST['username'];
@$password = $_POST['password'];
@$repeat = $_POST['repeat'];

//پیش فرض
$error = 0;

/* بررسی معتبر بودن اطلاعات ارسالی کاربر */
//نام کاربری
if(!isset($username) || empty($username)) {
    echo "فیلد نام کاربری نباید خالی باشد!";
    $error = 1;
} //کلمه عبور
elseif(!isset($password) || empty($password)) {
    echo "فیلد کلمه عبور نباید خالی باشد!";
    $error = 1;
} elseif($password !== $repeat) {
    echo "کلمه عبور با تکرار آن همخوانی ندارد!";
    $error = 1;
} //مجاز بودن انتخاب حروف انگلیسی به عنوان نام کاربری
elseif(preg_match('/^[a-z0-9_-]+$/i', $username) === 0) {
    echo "نام کاربری دارای کاراکترهای غیر مجاز است!";
    $error = 1;
}

//بررسی خطا
if($error === 0) {
    //اتصال به دیتابیس
    $conn = mysqli_connect($config['host'], $config['db_user'], $config['db_pass'], $config['db_name']);

    if(!$conn) {
        echo "PHP & MySQL Connection: Error! " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
        exit;
    } else {
        echo "PHP & MySQL Connection: Ok!<br>";

        //ایمن سازی پارامترها
        $username = mysqli_real_escape_string($conn, $username);
        $password = password_hash($password, PASSWORD_BCRYPT, ['cost' => 12]);

        //نام جدول
        $tbl_name = "users";

        //اانتخاب اطلاعات از جدول و ستون
        $sql = "SELECT username FROM $tbl_name WHERE `username` = '$username' LIMIT 1";
        $query = mysqli_query($conn, $sql);

        if(!$query) {
            echo "Selecting From Table $tbl_name: Error! " . mysqli_error($conn) . '<br>';
        } else {
            //تعداد ردیف های انتخاب شده
            $count = mysqli_num_rows($query);

            if($count === 0) {

            } else {
                echo "این نام کاربری قبلا ثبت نام کرده است!";
            }
        }
    }

    //پایان اتصال
    mysqli_close($conn);
}
?>
همچنان کدنویسی این فایل برای استفاده ناقص است و در گام نهایی بعدی کامل می شود.
منطق این روش ساده است:
با اجرای پرس و جوی SELECT وجود نام کاربری درخواستی را در دیتابیس بررسی می کنیم، اگر این نام کاربری از قبل وجود داشته باشد تابع mysqli_num_rows مقادیر 1 را برمی گرداند و در نتیجه امکان ثبت کاربر جدید با نام مشابه میسر نیست، اما اگر تابع mysqli_num_rows مقادیر 0 را برگرداند یعنی چنین نام کاربری قبلا در سیستم ثبت نشده و به عبارتی آزاد است در نتیجه ادامه کدها اجرا می شود.
نکته: برای اینکه مطمئن شویم تابع mysqli_num_rows واقعا مقدار 0 برمی گرداند و به فرض با false اشتباه نشود از عملگر === به جای == استفاده می کنیم (در PHP اگر از عملگر == استفاده کنیم 0 و false برابر هستند!).

ذخیره اطلاعات با دستور INSERT در MySQL


در نهایت نوبت به گام آخر است، در این مرحله اطلاعات کاربر با دستور INSERT در دیتابیس و جدول users (ستون های username و password) ذخیره می شود تا بعدا بتوانیم در برنامه خود از این اطلاعات استفاده کنیم، با این هدف کدنویسی فایل users.php به صورت زیر تکمیل می گردد:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | بررسی و ثبت اطلاعات کاربر در سایت</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
</style>
</head>
<body>
<?php
//فایل تنظیمات اتصال به دیتابیس
include_once('config.php');

//تعریف توابع کلمه عبور در نسخه های پائین تر از PHP 5.5
if(!function_exists('password_hash')){
    include_once('lib/password_compat.php');
}

//دریافت و تعریف متغیرها
@$username = $_POST['username'];
@$password = $_POST['password'];
@$repeat = $_POST['repeat'];

//پیش فرض
$error = 0;

/* بررسی معتبر بودن اطلاعات ارسالی کاربر */
//نام کاربری
if(!isset($username) || empty($username)) {
    echo "فیلد نام کاربری نباید خالی باشد!";
    $error = 1;
} //کلمه عبور
elseif(!isset($password) || empty($password)) {
    echo "فیلد کلمه عبور نباید خالی باشد!";
    $error = 1;
} elseif($password !== $repeat) {
    echo "کلمه عبور با تکرار آن همخوانی ندارد!";
    $error = 1;
} //مجاز بودن انتخاب حروف انگلیسی به عنوان نام کاربری
elseif(preg_match('/^[a-z0-9_-]+$/i', $username) === 0) {
    echo "نام کاربری دارای کاراکترهای غیر مجاز است!";
    $error = 1;
}

//بررسی خطا
if($error === 0) {
    //اتصال به دیتابیس
    $conn = mysqli_connect($config['host'], $config['db_user'], $config['db_pass'], $config['db_name']);

    if(!$conn) {
        echo "PHP & MySQL Connection: Error! " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
        exit;
    } else {
        echo "PHP & MySQL Connection: Ok!<br>";

        //ایمن سازی پارامترها
        $username = mysqli_real_escape_string($conn, $username);
        $password = password_hash($password, PASSWORD_BCRYPT, ['cost' => 12]);

        //سازگاری با حروف فارسی
        $sql = "SET NAMES 'utf8'";
        $query = mysqli_query($conn, $sql);

        //نام جدول
        $tbl_name = "users";

        //اانتخاب اطلاعات از جدول و ستون
        $sql = "SELECT username FROM $tbl_name WHERE `username` = '$username' LIMIT 1";
        $query = mysqli_query($conn, $sql);

        if(!$query) {
            echo "Selecting From Table $tbl_name: Error! " . mysqli_error($conn) . '<br>';
        } else {
            //تعداد ردیف های انتخاب شده
            $count = mysqli_num_rows($query);

            if($count === 0) {
                //ذخیره اطلاعات کاربر در دیتابیس
                $sql = "INSERT INTO $tbl_name(`username`, `password`) VALUES('$username', '$password')";
                $query = mysqli_query($conn, $sql);

                if(!$query) {
                    echo "Inserting Into Table $tbl_name: Error! " . mysqli_error($conn);
                } else {
                    echo "Inserting Into Table $tbl_name: OK!";
                }
            } else {
                echo "این نام کاربری قبلا ثبت نام کرده است!";
            }
        }
    }

    //پایان اتصال
    mysqli_close($conn);
}
?>
</body>
</html>
توضیح:
- ساختار دستور INSERT بسیار ساده است و اطلاعات را در ستون های تعیین شده به شیوه آرایه (کلید و مقدار) ذخیره می کند.
- برای جدا سازی ستون ها و مقادیر آنها از علامت , (Comma) و برای عدم بروز خطا به جهت وجود احتمالی کلمات محفوظ در پرس و جو از علامت ` (Backtick) استفاده می کنیم.
- در کد بالا جهت مثال و آشنایی بیشتر صرفا چند ستون را به عنوان نمونه استفاده کرده ایم، در برنامه های کاربردی می توانیم با توجه به نیاز و ساختار برنامه قابلیت های بیشتری برای ثبت نام و عضویت کاربران در نظر بگیریم و از این لحاظ محدودیتی نیست.
- برای استفاده از اطلاعات ذخیره شده ی اعضای سایت نیاز به تعریف و نوشتن کدهای دیگری است که در این مجال فرصت پرداختن به آنها نیست، این امر را به آموزش های بعدی (سیستم ورود و خروج به پنل سایت) موکول می کنیم.

دانلود نمونه فایل های آموزش


برای جمع بندی کار می توانیم فایل هایی که در این آموزش بررسی کردیم را از لینک زیر دریافت کنیم:
دانلود نمونه فایل های آموزش ساخت فرم عضویت در سایت با PHP و MySQL
دسته بندی: آموزش کاربردی » MySQL
related مطالب بیشتر:
ایجاد لینک دانلود مدت دار با PHP و MySQL
هوشمند سازی پنل ورود و خروج سایت با PHP و MySQL
آموزش حذف گروهی اطلاعات از MySQL با استفاده از چک باکس
تعویض کد امنیتی Captcha با Ajax و MySQL
صفحه بندی مطالب و محتوا با PHP و MySQL
دیدگاه
more ۱۹۱ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
۱۵:۱۴ ۱۳۹۳/۱۰/۱۵
ممنون از شما و سایت خوبتون
۱۵:۲۴ ۱۳۹۳/۱۰/۱۲
سلام من همه کارا رو انجا دادم فقط میخوام
بجایی که اون نوشته هایی که در مورد خطای کاربر بهش
هشدار میده مثل
فیلد نام کاربری نباید خالی باشد!
این نوشته ها بجایی که در یه صفحه ی دیگه نمایش داده بشه تو همون صفحه ای که فیلد ها هست نمایش بده یعنی همون جایی که کاربر داره فیلد ها رو پر میکنه نکه بره به یک صفحه ی دیگه بعد اونجا نمایش بده
ممنون
چند فایل بودن آموزش به دلیل کمک به درک بهتر آن است، هیچ الزامی به این نیست که اطلاعات به فایل دیگری ارسال شوند، اگر به اندازه کافی با PHP آشنا باشید، ترکیب کدها و استفاده در یک فایل چندان سخت نیست!
۱۸:۳۱ ۱۳۹۳/۰۹/۲۹
سلام
واقعا سایت خوبی دارید
و این که به همه ی سوال ها جواب دادید مشخصه کارتون خیلی درسته تشکرررررررر
من توی این کد شما یک خط هست که متوجه نیست برای چی هست
or die(mysql_error());
توی این خط اون or die برای چی هست ؟؟
این قسمت در صورتی اجرا می شود که بخش اول کد به هر دلیل اجرا نشود، به طور مثال اگر دستور query اجرا نشود یا خطا داشته باشد، قسمت or اجرا شده و تابع mysql_error خطا را نمایش می دهد، ضمن اینکه با اجرای دستور die دیگر ادامه کدها نیز پردازش نمی شوند.
نکته: اکستنشن MySQL قدیمی و منسوخ شده، از اکستنشن MySQLi یا PDO استفاده کنید.
Aysan
۲۰:۲۶ ۱۳۹۳/۰۹/۲۸
میتونین نحوه ذخیره و ... هم بذارین واسه تازه کارا که هیچی بلد نیسن ؟؟؟ ممنون میشیم.
و اینکه مراحلو کامل و دقیق بگین که ما گیج نشیم.
دوست گرامی این موارد باید در جای خود (آموزش های مقدماتی) فراگرفته شوند، متاسفانه در آموزش های کاربردی امکان طرح تمام جزئیات نیست!
رائیکا
۱۰:۳۷ ۱۳۹۳/۰۸/۲۹
سلام اون کدی که مربوط به ایجاد جدوله رو باید کجا بنویسم چون اگه تو خود برنامه باشه هر بار که یکی بخواد ثبت نام کنه یه جدول درست میشه. من این مشکل ور داشتم برای همین خودم جدول رو تو دیتابیس درست کردم اما خطا دارم ممنون میشم دقیق بگید کد ساخت جدول کجا باید قرار بگیره
مهم نیست این کد در کجا باشد چون صرفا نیاز به یک بار اجرای آن است که به طور مثال می تواند در فرایند نصب یک برنامه گنجانده شود، اگر از کد حاضر در برنامه خاصی استفاده نمی کنید، کافی است کد نصب را در یک فایل PHP با نام فرضی install.php ذخیره و یک بار اجرا کنید تا جداول ساخته شوند، در دفعات بعدی نیاز به اجرای این کد نیست و حتی می توانید آن را حذف کنید! یک برنامه کاربردی لزوما نباید در یک فایل خلاصه شود، بلکه می تواند (و اغلب باید) ساختار مشخص و متشکل از چندین فایل باشد.
saeed
۰۹:۴۸ ۱۳۹۳/۰۸/۲۶
سلام ببخشید من یک سوال دارم
اول اینکه میخواستم بدونم شما میتونید این کدها را به صورت فایل اماده به ما بدهید یا نه؟ یعنی برای دانلود بذارید چون من هرکاری میکنم کار نمیکنه؟؟
یکی دیگه اینکه چه جوری به این فایل ضمیمه اضافه کنیم؟
مثلا pdf اتچ بشه؟
دوست گرامی هدف از آموزش های سایت ارائه کدها و اسکریپت های آماده نیست، بلکه آموزش نحوه طراحی ساختار و کدنویسی برنامه ها است، آموزش های کاربردی نیز صرفا برای کاربرانی مناسب است که مرحله مقدماتی را گذرانده و در سطحی از آشنایی با PHP باشند، در مورد بخش دوم سوالتان در آموزشی جداگانه به این مسئله به طور کامل پرداخته شده، کافی است عبارت "نحوه آپلود فایل در PHP" را در وب جستجو کنید.
ناشناس
۰۱:۳۹ ۱۳۹۳/۰۸/۲۰
سلام .. خسته نباشید.. واسه صفخه اچ تی ام المون که فرم ثبت نام توشه.. اگه بخوایم مثل سایت خودتون submit را با کد های css به فرم دلخواه دربیاریم چجوری باید نقش submit رو بهش بدیم؟؟
همان طور که خودتان اشاره کرده اید، این کار با تعریف استایل CSS امکانپذیر است، در استالیتان هم می توانید یک کلاس برای تگ input مربوط به دکمه ارسال تعریف کنید، هم اینکه مستقیم از سلکتور submit استفاده کرده و به تمام input ها با نوع submit آن را نسبت دهید.
برای مشاهده نمونه آموزش و کد، لطفا عبارت "زیباسازی فرم های وب با CSS" را در وب جستجو کنید.
مصطفی
۱۲:۳۶ ۱۳۹۳/۰۸/۰۱
سلام.
چرا وقتی میخوام در کد زیر نام متغییر رو تغییر بدم ارور میده.
$user = $_POST['mo'];
$password = $_POST['pass1'];
ارور هم :
Notice: Undefined index: mo in C:\xampp\htdocs\mostafa\test\test.php on line 24
Notice: Undefined index: pass1 in C:\xampp\htdocs\mostafa\test\test.php on line 25
معمولا دو دلیل برای این حالت وجود دارد:
- بدون ارسال شدن فرم، متغیر با متد POST مقداردهی و فراخوانی شود، چون مقادیر متد POST هنوز ارسال نشده این خطا به وجود می آید.
- دلیل دوم می تواند خطای تایپی و ناهمسان بودن مقدار پارامتر name در فرم با آنچه که در قسمت POST به کار رفته شده باشد.
nasrin
۱۰:۳۰ ۱۳۹۳/۰۷/۲۱
سلام
من یک فرم ثبت نام درست کردم برای همه فیلدها اعتبارسنجی های لازم رو نوشتم که به صورت اژاکس هستن حالا مشکل من اینجاست که میخوام وقتی کاربر روی دکمه عضویت کلیک کرد بیاد دوباره تمام فیلدها رو چک کنه و اگه اعتبار سنجی که قرار دادم رعایت نکرده بود به کاربر بگه چه جوری باید این کار رو انجام بدم ممنون
سوالتان پاسخ کوتاهی ندارد!، برای این کار باید یک تابع در رویداد onsubmit برای تگ فرم تنظیم کنید که در نهایت یک مقدار true یا false را برگرداند، آموزش های لازم در این رابطه در وب وجود دارد، عبارت "اعتبارسنجی فرم های وب با جاوا اسکریپت + وبگو" را جستجو کنید.
مرتضی
۱۳:۴۹ ۱۳۹۳/۰۶/۱۸
id INT NOT NULL AUTO_INCREMENT,
PRIMARY KEY(id),
سلام اینجا آیدی فقط اضافه میشه اگه فرم ما گزینه حذف هم داشته باشه با حذف یک رکورد از جدول فیلد آیدی کم نمیشه و به روال خودش ادامه میده ممنون میشم اگه راهنمایی کنین
فیلد ID از نوع AUTO_INCREMENT است، لذا این رفتاری طبیعی محسوب می شود، اگر می خواهید فیلد ID رفتار متفاوتی داشته باشد باید یک ستون از نوع INT برای ID داشته باشید و آن را به صورت دستی (با نوشتن پرس و جوها) و متناسب با رفتار برنامه خود کنترل کنید، به طور مثال با حذف یک رکورد، موارد بزرگتر از آن را یک واحد کاهش داده و به روزرسانی کنید.
mostafa
۲۲:۰۱ ۱۳۹۳/۰۶/۰۷
سلام وقتی دکمه عضویت رو میزنیم این ارور رو میده میشه بگید واسه چیه
 Table 'amir.register' doesn't exist
اون امیر اسم دیتابیسی هست که ساختم
طبق این خطا به هر دلیل جدول register در این دیتابیس ساخته نشده است.
علی
۱۲:۵۶ ۱۳۹۳/۰۵/۲۸
اگر کاربری با نام ali عضو بشه بعد اگه بخوایم با همون نام عضویت بگیرم بازم عضو میشه باید چیکار کنیم که اگه همچین کاربری از قبل وجود داشت ارور بگیره و عضو نشه
پاسخ این سوال قبلا داده شده:
انجام این کار چندان سخت نیست، کافی است قبل از ارسال داده ها به پایگاه داده، ابتدا بررسی کنید که چنین نامی از قبل وجود دارد یا خیر، اگر وجود داشت پیام خطا نشان داده می شود، در غیر این صورت اطلاعات در دیتابیس ذخیره می گردند، به طور مثال:
$check_user=mysql_query("SELECT * FROM register WHERE username='$username'")
or die(mysql_error());
if(mysql_num_rows($check_user) > 0){
echo "این نام کاربری قبلا ثبت شده است!";
$check_error = 1;
}
نکته: آموزش به روزرسانی و اکستنشن MySQLi جایگزین MySQL شده است.
بهزادی
۰۲:۳۱ ۱۳۹۳/۰۵/۲۷
سلام.
مرسی از راهنمایی تون.
دو تا سوال برام پیش اومد.
یک اینکه راه اول برای بررسی دیتابیس که پیشنهاد دادین مربوط به چه مبحثی میشه؟ مباحث پیشرفته از دیتابیسه؟
یعنی برای یادگیری همچین کدی چه مبحثی رو باید یاد گرفت؟
و سوال دوم اینکه من برای بررسی وجود جدول از تابع mysql_list_tables و mysql_list_db استفاده میکردم که جواب همراه error میداد. آیا استفاده نابجایی بود؟
مرسی.
راه حل ارائه شده جزء مباحث فرعی MySQL است، در واقع یک پرس و جو است که از جدول اطلاعات MySQL وضعیت وجود دیتابیس مورد نظر را بررسی می کند و می توانید با mysql_query آن را اجرا و نتیجه را استفاده نمائید.
در مورد توابع استفاده شده توسط شما، اغلب در برنامه نویسی برای رسیدن به یک هدف راههای مختلفی وجود دارد، باید سعی کنید مناسب ترین آن را انتخاب نمائید، mysql_list_tables جزء توابع منسوخ است و بهتر است از آن استفاده نکنید (در کل توصیه می کنیم برای کدنویسی های جدید از اکستنش MySQLi به جای MySQL استفاده شود لطفا در این رابطه در وب جستجو کنید).
بهزادی
۲۰:۳۹ ۱۳۹۳/۰۵/۲۵
سلام.
من دارم برنامه ای مینویسم که 5 تا کاربر بتونن وارد یک پیج بشن و وارد یک صفحه ای بشن و اطلاعاتی رو پر کنن.
برای اینکار نمی خوام یوزر و پسورد 5 کاربر رو صریحا نام ببرم.
میخوام اول بررسی کنم که دیتابیس و جدولی به نام جدول و دیتابیس مورد نظر وجود داره یا نه؟ اگه بود وارد صفحه ارسال اطلاعات بشن اگه نبود ، دیتابیس و جدول رو بسازه. در قسمت بررسی وجود دیتابیس و جدول کاملا دچار نا امیدی شدم میشه لطفا راهنمایی کنید؟
برای بررسی وجود دیتابیس چند راه وجود دارد، می توانید نمونه پرس و جوی زیر را اجرا کنید، اگر نتیجه برگردانده شد، دیتابیس وجود دارد:
SELECT SCHEMA_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME = 'DBName'
نکته: به جای DBName نام دیتابیس را قرار دهید.
راه حل دیگر ایجاد لینک اتصال فرضی با دیتابیس است، اگر اتصال بر قرار بود، دیتابیس وجود دارد:
<?php
$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
if(!$link){
die('Not connected : '.mysql_error());
}
$db_selected = mysql_select_db('db', $link);
if(!$db_selected){
die('Cannot use db : '.mysql_error());
}
?>
در مورد بررسی وجود جدول نیز می توانید از نمونه زیر استفاده کنید:
<?php
if(mysql_num_rows(mysql_query("SHOW TABLES LIKE '".$table."'")) == 1){
echo "Table exists";
}
else{
echo "Table does not exist";
}
?>
نکته 1: به جای متغیر table باید نام جدول جایگزین شود.
نکته 2: توصیه می شود به جای اکستنشن MySQL از MySQLi استفاده کنید.
یاوری
۲۳:۳۶ ۱۳۹۳/۰۴/۲۶
سلام
ممنون. خوب بود
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
8 × 3
20 × 20
=