
Для написания этой системы мы будем использовать язык серверного программирования PHP и систему управления базами данных MySQL для хранения информации о пользователях. Этот урок написан на абсолютных новичков в PHP-программировании. Возможно более опытным читателям будет скучно.
Создаём нашу базу данных.
Дадим нашей новой базе данных какое-нибудь название и установим кодировку UTF-8.
И нажимаем кнопку создать.
Следующим шагом идёт создание таблицы в базе данных, которая будет содержать информацию о пользователях. В данном уроке мы будем использовать простую таблицу с несколькими полями, но никто не мешает вам добавить в неё новые поля для своих нужд. Итак, какие поля в таблице нам потребуются:
- UserID (Первичный ключ) — Уникальный идентификатор пользователя
- Username – имя пользователя
- Password – пароль пользователя
- EmailAddress – почта пользователя
Как видите, всего четыре поля, которые будут характеризовать наших зарегистрированных пользователей.
Итак выбираем нашу базу данных.
И переходим на вкладку SQL. Для создания таблицы в базе данных мы будем использовать следующий SQL-запрос:
1 2 3 4 5 6 |
CREATE TABLE `users` ( `UserID` INT(25) NOT NULL AUTO_INCREMENT PRIMARY KEY , `Username` VARCHAR(65) NOT NULL , `Password` VARCHAR(32) NOT NULL , `EmailAddress` VARCHAR(255) NOT NULL ); |
С базой пока всё. Теперь откроем текстовый редактор. Первым файлом нашего проекта, который мы создадим, будет файл с конфигурационной информацией, который будет подключается к каждому другому файлу.
Назовём его base.php. Он будет содержать следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
<?php session_start(); $dbhost = "localhost"; // Адрес сервера MySQL. На локальном сервере этот параметр всегда будет 'localhost', но на хостинге он соответствует адресу хостера. $dbname = "database"; // Имя базы данных $dbuser = "username"; // Пользователь базы данных $dbpass = "password"; // Пароль пользователя базы данных mysql_connect($dbhost, $dbuser, $dbpass) or die("Ошибка MySQL: " . mysql_error()); mysql_select_db($dbname) or die("Ошибка MySQL: " . mysql_error()); ?> |
Давайте поближе взглянем на этот код.
- session_start() – функция, которая начинает новую сессию для каждого пользователя. Чуть позже мы будем хранить в ней информацию о пользователях, чтобы определять, кто уже авторизован.
- mysql_connect – функция, обеспечивающая подключение нашего скрипта к базе данных, используя информацию, которую мы вынесли в отдельные переменные выше.
- mysql_select_db – после успешного подключения нужно выбрать базу данных. Эта функция как раз это и производит.
- Если же хотя бы одна из функций не смогла отработать по какой-либо причине, то работа нашего скрипты прекращается и выводится ошибка. За это ответственна функция die. А за вывод самой ошибки отвечает функция mysql_error().
Отлично, файл с настройками создан (вы же не забыли изменить значения переменных на свои?) и теперь подошла очередь создать главный файл – index.php. Самой первой строчкой в нём должно быть подключение нашего конфигурационного файла.
1 |
<?php include "base.php"; ?> |
Далее нам нужно создать базовую разметку HTML. У нас будет один главный контейнер, в который сложим заголовок и все поля для ввода данных. Ах ну да, ещё и кнопку. Пока все элементы будут некрасивыми, но это ОК. Позже преукрасим их с помощью CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Регистрация пользователей на PHP</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="main"> </div> </body> </html> |
Прежде чем выводить содержимое страницы, у нас есть пара вопросов, на которые нужно ответить:
- Пользователь уже зарегистрирован?
- ДА – показываем ему страницу с опциями для зарегистрированных пользователей
- НЕТ – переходим к следующему вопросу
- Пользователь зарегистрировался и отправил свои данные?
- ДА – Проверяем данные, регистрируем пользователя и производим авторизацию
- НЕТ – переходим к следующему вопросу
- Если на оба вопроса ответ НЕТ, то выводим форму для авторизации.
Теперь давайте реализуем эти условия на языке PHP. Внутри нашего главного блока в HTML, напишем несколько конструкций If
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Username'])) { // даём доступ пользователю к главной странице } elseif(!empty($_POST['username']) && !empty($_POST['password'])) { // позволим пользователю войти на сайт } else { // выводим форму для авторизации } ?> |
Теперь, когда мы понимаем логику работы, давайте добавим в наши условия код для выполнения, если они соблюдены.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div id="main"> <?php if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Username'])) { // даём доступ пользователю к главной странице ?> <h1>Закрытый раздел!</h1> <p>Привет, <b><?=$_SESSION['Username']?></b>. Твоя почта - <b><?=$_SESSION['EmailAddress']?></b>.</p> <?php } elseif(!empty($_POST['username']) && !empty($_POST['password'])) { // позволим пользователю войти на сайт $username = mysql_real_escape_string($_POST['username']); $password = md5(mysql_real_escape_string($_POST['password'])); $checklogin = mysql_query("SELECT * FROM users WHERE Username = '".$username."' AND Password = '".$password."'"); if(mysql_num_rows($checklogin) == 1) { $row = mysql_fetch_array($checklogin); $email = $row['EmailAddress']; $_SESSION['Username'] = $username; $_SESSION['EmailAddress'] = $email; $_SESSION['LoggedIn'] = 1; echo "<h1>Успех!</h1>"; echo "<p>Сейчас вы будете перенаправлены в закрытый раздел.</p>"; echo "<meta http-equiv='refresh' content='2;index.php'>"; } else { echo "<h1>Ошибка</h1>"; echo "<p>Прости, но мы не нашли такого аккаунта. Можешь <a href=\"index.php\">попробовать ещё раз</a>.</p>"; } } else { // выводим форму для авторизации ?> <h1>Авторизация</h1> <p>Спасибо за то, что пришли! Войдите или <a href="register.php">зарегистрируйтесь</a>.</p> <form method="post" action="index.php" name="loginform" id="loginform"> <fieldset> <label for="username">Логин:</label><input type="text" name="username" id="username"><br> <label for="password">Пароль:</label><input type="password" name="password" id="password"><br> <input type="submit" name="login" id="login" value="Войти"> </fieldset> </form> <?php } ?> </div> |
Идём далее.
1 2 3 4 5 6 7 8 9 10 |
$checklogin = mysql_query("SELECT * FROM users WHERE Username = '".$username."' AND Password = '".$password."'"); if(mysql_num_rows($checklogin) == 1) { $row = mysql_fetch_array($checklogin); $email = $row['EmailAddress']; $_SESSION['Username'] = $username; $_SESSION['EmailAddress'] = $email; $_SESSION['LoggedIn'] = 1; |
После всего этого нам нужно сообщить пользователю об успешности авторизации и обновить страницу. Это достигается с помощью мета-тега HTML c атрибутом refresh.
1 |
echo "<meta http-equiv='refresh' content='2;index.php'>"; |
Давайте взглянем на нашу страницу в браузере
Великолепно! Самое время двигаться дальше. А именно – к регистрации пользователей!
Авторизация работает, но как это проверить? Правильно, нужно создать страницу, которая будет регистрировать пользователей. Открываем текстовый редактор и создаём новый файл – register.php.
Как вы уже догадались, первой его строчкой будет подключение нашего файла конфигурации.
1 |
<?php include "base.php"; ?> |
Затем скопируем всё содержимое файла index.php в файл register.php и удалим всё, что находится в нашем главном блоке с id=”main”.
В этом файле не будет ничего принципиального нового, почти тот же код PHP.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?php include "base.php"; ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Регистрация пользователей на PHP</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="main"> <?php if(!empty($_POST['username']) && !empty($_POST['password'])) { // позволим пользователю зарегистрироваться $username = mysql_real_escape_string($_POST['username']); $password = md5(mysql_real_escape_string($_POST['password'])); $email = mysql_real_escape_string($_POST['email']); $checkusername = mysql_query("SELECT * FROM users WHERE Username = '".$username."'"); if(mysql_num_rows($checkusername) == 1) { echo "<h1>Ошибка</h1>"; echo "<p>Извините, такое имя пользователя уже используется. Вернитесь назад и попробуйте снова.</p>"; } else { $registerquery = mysql_query("INSERT INTO users (Username, Password, EmailAddress) VALUES('".$username."', '".$password."', '".$email."')"); if($registerquery) { echo "<h1>Успех!</h1>"; echo "<p>Ваша учётная запись создана. <a href=\"index.php\">Авторизуйтесь</a>.</p>"; } else { echo "<h1>Ошибка</h1>"; echo "<p>Мы не смогли вас зарегистрировать. Вернитесь назад и попробуйте снова.</p>"; } } } else { ?> <h1>Регистрация</h1> <p>Пожалуйста заполните несколько полей ниже.</p> <form method="post" action="register.php" name="registerform" id="registerform"> <fieldset> <label for="username">Логин:</label><input type="text" name="username" id="username"><br> <label for="password">Пароль:</label><input type="password" name="password" id="password"><br> <label for="email">Email:</label><input type="text" name="email" id="email"><br> <input type="submit" name="register" id="register" value="Зарегистрироваться"> </fieldset> </form> <?php } ?> </div> </body> </html> |
Давайте попробуем. Зарегистрируем пользователя с логином test, а затем авторизуемся под ним.
Классно, но есть один момент. Авторизовались мы успешно, но теперь я хочу выйти из своего аккаунта…А нельзя =) Откроем текстовый редактор и создадим новый файл под именем logout.php. В этом файле будет уничтожаться наша сессия и обновляться страница.
1 2 3 4 5 6 |
<?php include "base.php"; $_SESSION = array(); session_destroy(); ?> <meta http-equiv="refresh" content="0;index.php"> |
Осталось только добавить в файл index.php ссылку на этот файл.
1 2 3 |
<h1>Закрытый раздел!</h1> <p>Привет, <b><?=$_SESSION['Username']?></b>. Твоя почта - <b><?=$_SESSION['EmailAddress']?></b>.</p> <p><a href="logout.php">Выход</a></p> |
Вот теперь всё супер.
Мы почти закончили и теперь нам нужно придать красивый внешний вид нашей форме, чтобы было по-веселее. Открываем текстовый редактор, создаём файл style.css и в нём напишем несколько простых стилей для используемых нами элементов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
body { margin: 0; padding: 0; font-family: Trebuchet MS; background: #fff5e1; } a { color: #000; } a:hover, a:visited, a:active { text-decoration: none; } #main { width: 780px; margin: 250px auto 0 auto; padding: 10px; border: 1px solid #ccc; background: #ececec; } form fieldset { border: none; } form fieldset br { clear: left; } label { margin-top: 5px; display: block; width: 80px; padding: 0; float: left; } input { border: 1px solid #ccc; margin-bottom: 5px; padding: 3px; background: #fff; } input:hover { border: 1px solid #222; background: #eee; } |
Вот и всё! Мы сделали это! Очень простая и лёгкая система. При желании можно нарастить ей сколько угодно функционала.
Я не преследовал цели сделать полноценную систему регистрации пользователей, со всеми защитами от роботов, хакеров и прочих неприятностей. Никто не запрещает взять этот метод за основу и усовершенствовать его, дописать и доработать, добавить jQuery проверки без перезагрузок страниц и т.д. Всё в ваших руках!.