Пишем регистрацию на сайте на PHP
Ну вот мы с вами и закончили изучение основных возможностей объектно-ориентированного программирования. Теперь мы будем учиться применять все эти возможности в деле. А именно – напишем движок для блога на чистом PHP. И в сегодняшнем уроке мы узнаем как сделать регистрацию на сайте. Благодаря ей новые пользователи смогут регистрироваться на нашем сайте. Поехали.
Продолжение урока будет доступно вам
после покупки ООП в PHP
Создание форм регистрации и авторизации на PHP
Система регистрации и авторизации необходима для любого сайта, который хранит информацию о своих пользователях. Такие системы используются на сайтах самой разнообразной тематики – от образовательных платформ, которые хранят сведения о прохождении обучающих курсов и оценках, до онлайн-магазинов, которые сохраняют историю покупок и адреса пользователей. В этом руководстве мы научим вас создавать формы регистрации и авторизации с нуля.
Обновлено: 2024-02-29 00:47:13 Наталья Кайда автор материала
Разработка форм регистрации и авторизации
Мы рассмотрим процесс создания простых форм для регистрации и авторизации пользователей. Регистрационная форма будет содержать поля для ввода имени, пароля и адреса электронной почты. Имя пользователя и адрес электронной почты при этом должны быть уникальными для каждого конкретного пользователя. В случае попытки регистрации второй учетной записи с таким же именем пользователя (или электронной почтой) будет выводиться сообщение об ошибке с пояснением о том, что такие данные уже используются в системе.
Код регистрационной формы
Ниже приведен HTML-код необходимый для создания формы регистрации. Сохраните его вфайле register.php.
Несмотря на простоту данной формы, для проведения простейшей валидации данных в ней используется HTML5. К примеру, использование type=»email» обеспечит уведомление пользователя о том, что он неправильно ввел адрес электронной почты. Кроме того, применение pattern позволит провести проверку имени пользователя – логин может состоять только из латинских букв и цифр.
Наиболее продвинутый способ валидации данных подразумевает использование jQuery – в этом случае разработчик получает полный контроль над показом, расположением и внешним видом сообщений об ошибках ввода. Подробнее о валидации на стороне клиента с использованием jQuery рассказывается в этой статье.
Авторизация — это процесс проверки прав пользователя на доступ к определенным ресурсам.
Исходный код страницы авторизации
HTML-код страницы входа в систему приведен ниже. Сохраните его в файле login.php .
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
В коде, приведенном выше, предусмотрено оформление заголовков и сообщений об ошибках валидации. Фрагменты HTML и CSS кода, рассмотренные выше, могут использоваться в качестве основы, поскольку ваш собственный проект может нуждаться в другом стиле оформления, а также в дополнительных полях ввода.
Создание таблицы с учетными данными и подключение к базе данных
Следующий шаг – создание таблицы базы данных, содержащей учетные данные пользователей. В нашем случае таблица состоит всего из четырех столбцов:
- Порядковый номер ID, который для каждого нового пользователя увеличивается автоматически.
- Уникальное имя пользователя.
- Адрес электронной почты.
- Пароль.
Хеширование паролей повышает безопасность хранения пользовательских данных.
Для быстрого создания таблицы базы данных можно использовать следующий 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 и сохраните в нем приведенный далее код для подключения к базе данных:
catch (PDOException $e) < exit("Error: " . $e->getMessage()); > ?>
В приведенном выше коде замените название базы данных на то, которое вы используете для своего собственного сайта.
Исходный код для регистрации пользователей
Теперь пришла очередь написать код для регистрации пользователей. Главная функция этого кода – проверить, не зарегистрирован ли уже аналогичный адрес электронной почты в базе данных. Если нет, новое имя пользователя вместе с адресом его электронной почты и паролем передаются для сохранения в базе данных.
Сохраните приведенный далее код в начале файла registration.php :
prepare("SELECT * FROM users WHERE email=:email"); $query->bindParam("email", $email, PDO::PARAM_STR); $query->execute(); if ($query->rowCount() > 0) < echo 'Этот адрес уже зарегистрирован!
'; > 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 'Регистрация прошла успешно!
'; > else < echo 'Неверные данные!
'; > > > ?>
На первом этапе выполнения кода включается config.php, начинается сессия. Так мы получаем возможность сохранить любую информацию для дальнейшего использования на всех страницах сайта.
Далее, с помощью $_POST[‘register’] мы проверяем, нажал ли пользователь кнопку «Регистрация». Следует помнить, что пароли нельзя сохранять в виде незашифрованного текста. Поэтому наш код использует функцию password_hash() и сохраняет пароль в хэшированном виде. Эта функция записывает пароль в базу данных в виде хэш-строки, состоящей из 60 случайных символов.
После этого мы проверяем, существует ли предоставленный пользователем адрес электронной почты в базе данных. Если это так, пользователь получит соответствующее сообщение. Если же такого email-адреса в базе данных, используемой сайтом, нет, вся введенная информация сохраняется в базе данных и пользователь видит сообщение об успешной регистрации.
В PHP переход на другую страницу реализуется с помощью функции header.
Функция авторизации
На предыдущем этапе мы уже сохранили код для формы авторизации пользователей в системе. На этом этапе мы будем проверять, соответствуют ли введенные пользователем данные учетной записи, сохраненной в базе.
Приведенный далее код должен располагаться в начале файла login.php:
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 'Неверные пароль или имя пользователя!
'; > else < if (password_verify($password, $result['password'])) < $_SESSION['user_id'] = $result['id']; echo 'Поздравляем, вы прошли авторизацию!
'; > else < echo 'Неверные пароль или имя пользователя!
'; > > > ?>
Важно отметить, что мы не проверяем правильность имени и пароля одновременно. Поскольку пароль сохранен в хэшированном виде, сначала необходимо запросить хэш с помощью предоставленного имени пользователя. Когда мы получим хэш, можно будет проверить предоставленный пользователем пароль на соответствие хэшированному – с помощью функции password_verify().
Как только мы получаем подтверждение правильности пароля, мы назначаем переменную $_SESSION[‘user_id’] для ID пользователя из базы данных. При необходимости на этом этапе передаются и значения для других переменных.
Ограничение доступа к страницам
На большинстве сайтов, запрашивающих учетные данные посетителей, есть страницы, на которых зарегистрированные пользователи хранят свою личную информацию. Для защиты подобных страниц от несанкционированного доступа можно использовать переменные сессии. Если переменная сессии не создана, пользователь перенаправляется на страницу авторизации. Если переменная сессии создана, пользователь видит содержимое страницы:
else < // Покажите пользователю страницу >?>
Все, что нужно сделать для ограничения или предоставления доступа – это использовать в начале приведенного выше скрипта строку session_start().
Типичные ошибки и способы их решения
При использовании скрипта для ограничения доступа неавторизованных пользователей обычно возникают три типа ошибок.
Некорректное имя переменной
Чаще всего ошибки в работе скрипта связаны с неверными именами переменных – как правило, с использованием букв в неправильном регистре. Именно поэтому крайне важно придерживаться одного и того же шаблона при выборе имен. К примеру, ключи в функции $_POST основаны на значениях, полученных из полей ввода в формах. Это означает, что $_POST[‘USERNAME’] и $_POST[‘username’] получат разные значения.
«Заголовки уже отправлены»
Некоторые функции, например session_start() и header(), изменяют HTTP-заголовки. Поскольку PHP сбрасывает все заголовки перед выводом любых данных, важно вызывать все подобные функции до того, как вы начнете что-либо выводить – включая фрагменты сырого HTML или случайные пробелы перед открывающим тегом
Переменные сессии не сохраняются при переходах между страницами
Вы можете использовать переменные сессии только в том случае, если на странице осуществлен вызов функции session_start() . Если значения суперглобальной переменной $_SESSION вам не доступны, причина этого заключается в том, что вы забыли вызвать session_start() . Помните о том, что функцию надо вызывать перед выводом чего-либо на страницу сайта. В противном случае вы получите ошибку «Заголовки уже отправлены», рассмотренную выше.
Регистрация и авторизация
Функция регистрации и авторизации пользователей на сайте реализуется так: когда пользователь регистрируется на сайте, он заполняет форму регистрации, в которой указывает различные данные, в том числе, логин и пароль. Форма отправляет эти данные на сервер, и они записываются в базу данных.
Авторизация и дальнейшее пребывание пользователя на сайте происходит по следующей схеме:
- Пользователь вводит логин и пароль в форму авторизации и отправляет на сервер.
- На сервере проверяется, есть ли в базе данных пользователь с таким логином и паролем.
- Если пользователь найден, то информация об этом записывается в сессию или куки.
- На страницах сайта происходит проверка — есть ли в сессии данные о том, что пользователь авторизован и в зависимости от этого страница выводится в том или ином виде.
В сессии можно не просто указать факт авторизации, но и записать какие-то данные пользователя для вывода их на страницу, например имя или ник. Решение о том, использовать сессии или куки принимается для каждого сайта отдельно. Если на сайте содержится важная информация, то лучше применять сессии, потому что узнать чужие регистрационные данные при этом намного сложнее.
Формы авторизации и регистрации
Форма авторизации обычно располагается на главной странице, либо она может быть на всех страницах сайта. Для формы регистрации, в основном, создаётся отдельная страница. Мы создадим всего одну страницу, на которой будут обе формы, и на неё же будут выводиться данные пользователя. Пока на ней будет только HTML код, но мы сразу сделаем PHP файл, потому что в дальнейшем это будет скрипт. Назовём его formreg.php. Код страницы будет такой:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Авторизация:
Регистрация:
Регистрация
Регистрационные данные пользователей мы будем записывать в таблицу users . Если у Вас ещё нет такой таблицы, то создайте её. В ней должны быть поля id , login и pas . Другие поля мы не будем использовать. Если они есть в таблице, то они будут оставаться пустыми.
Форма авторизации отправляет данные в файл registration.php. Расположим его в той же папке, где находится страница. Код скрипта будет такой:
$login=$_POST['login']; $pas=$_POST['password']; $db=mysqli_connect('localhost', 'root', '', 'mybase'); $query="INSERT INTO users (login, pas) VALUES ('$login', '$pas')"; $result=mysqli_query($db, $query); if ($result) header("Location: formreg.php"); mysqli_close($db);
В строке 9 мы устанавливаем возврат к странице с формами. Так как на локальном сервере выполнение скрипта и повторная загрузка страницы происходит очень быстро, то визуально это будет выглядеть так, как будто при нажатии кнопки «Зарегистрироваться», ничего не происходит. На реальных сайтах обычно делают переход на специальную страницу с информацией о том, что пользователь зарегистрирован и регисрационными данными. Попробуйте выполнить регистрацию и посмотрите, появляются ли в базе данных новые записи.
Авторизация
Форма авторизации запускает на сервере файл authorization.php. Этот скрипт принимает логин и прароль и проверяет, есть ли такой пользователь. Если есть, то логин будет записываться в сессию. Если такой пользователь не найден, то в сессию будет записываться информация об этом. Это нужно для того, чтобы страница, которая будет открыта после выполнения скрипта, получила эту информацию и вывела сообщение, что введён неправильный логин или пароль. Код скрипта такой:
3
4
5
6
7
8
9
10
11
12
13
14
session_start(); $login=$_POST['login']; $pas=$_POST['password']; $db=mysqli_connect('localhost', 'root', '', 'mybase'); $query="SELECT * FROM users WHERE login='$login' AND BINARY pas='$pas'"; $result=mysqli_query($db, $query); if (mysqli_num_rows($result)) $_SESSION['login']=$login; else $_SESSION['login']='er login'; header("Location: formreg.php"); mysqli_close($db);
В строке 7 формируется запрос на выборку строки с логином и паролем, полученными из формы. Перед полем pas написано ключевое слово BINARY. Оно нужно для того, чтобы при сравнении по этому полю учитывался регистр символов. Если нужно, чтобы регистр учитывался и при сравнении логина, то BINARY нужно написать перед ним. В примере делается запрос на выборку всех полей. На практике можно делать выборку только тех полей, данные из которых нужно будет выводить на страницу.
После получения результата, проверяется, найдена ли указанная запись. Если запись есть, то логин записывается в сессию. Если пользователь не найден, то вместо логина пишется строка «er login». Можно написать другой текст, но нужно быть уверенным, что он не совпадёт с каким-то логином. Затем происходит возврат на страницу с формами.
На страницах сайта должен быть код, в котором происходит проверка — есть ли в сессии логин. И в зависимости от этого определяется, как должна выглядеть страница. В нашем примере есть только одна страница. На ней и сделаем проверку. Только код будет разделён на две части. Открытие сессии должно производиться до вывода каких-либо данных, то есть, до HTML кода. Поэтому эта часть располагается в самом начале страницы. А остальной код находится внутри тэга , потому что он добавляет на страницу контнет. Добавим в начало страницы такую строку:
Остальной скрипт расположим в теге , в его начале:
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Введён неправильный логин или пароль'; $_SESSION['login']=''; > else echo "Здравствуйте, $login
"; > else echo 'Здравствуйте, гость
'; ?>
Если в сессии есть логин, но в нём содержится строка «er login», то выводится сообщение, что логин или пароль неправильный. После вывода сообщения логин становится пустым. Это сделано для того, чтобы сообщение выводилось только один раз и при переходе на другие страницы не появлялось. Если логин другой, значит пользователь авторизован и страница формируется как для зарегистрированных. Если логина нет, значит авторизации ещё не было и страница выводится для не зарегистрированных пользователей.
Мы рассмотрели только общий принцип создания функции регистрации и авторизации. На реальных сайтах она сложнее. Формы должны выводиться только для не авторизованных пользователей. Кроме того, нужно добавить кнопку «Выход», которая отменяет авторизацию. При регистрации нужно делать проверку формы, проверять уникальность логина и добавить подтверждение пароля.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2024 © basecourse.ru Все права защищены
Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей
Безопасная система авторизации и регистрации является одним из важнейших элементов при создании проекта с нуля. Один из возможных способов — это создание системы регистрации с помощью PHP и MySQL .
Хотя в Интернете есть много пособий на эту тему, большинство из них предназначено для продвинутых пользователей.
Эта статья расскажет о том, как создать простую версию системы авторизации и регистрации пользователей с использованием PHP и MySQL для начинающих. Давайте начнем!
Обновлено: 2022-10-30 15:09:03 Вадим Дворников автор материала
Ресурсы, необходимые для работы с этим руководством:
- Xampp ( PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней );
- Базовые знания по PHP , HTML и CSS ;
- Время и терпение.
Что мы создаем
Настройка сервера
Вы можете использовать любой хостинг с поддержкой PHP и MySQL ( только убедитесь, что он поддерживает PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней ).
Но в этой статье в качестве сервера будет использоваться Xampp . Если до этого не работали с Xampp , эта статья может помочь вам разобраться, как его должным образом установить на вашем компьютере.
Шаг 1 – MySQL
Во-первых, создайте базу данных и таблицу, которая будет содержать все регистрационные данные. Вы можете сделать это вручную с помощью графического интерфейса пользователя PhpMyAdmin или использовать для вставки этой информации SQL .
Взгляните на приведенный ниже код SQL :
/* Создание базы данных */ CREATE DATABASE userlistdb; /* Создание таблицы */ CREATE TABLE `usertbl` ( `id` int(11) NOT NULL auto_increment, `full_name` varchar(32) collate utf8_unicode_ci NOT NULL default '', `email` varchar(32) collate utf8_unicode_ci NOT NULL default '', `username` varchar(20) collate utf8_unicode_ci NOT NULL default '', `password` varchar(32) collate utf8_unicode_ci NOT NULL default '', PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Обратите внимание, что все данные представляют собой varchar , и даже пароль позже будет преобразован в символ md5 , чтобы обеспечить его безопасность.
Кроме того, используйте auto_increment для автоматического назначения идентификаторов или номеров пользователям, которые будут регистрироваться в системе.
Теперь, когда таблица создана, нужно задать разметку и стили CSS , а затем PHP -код.
Окно регистрации помогает в создании пользовательского аккаунта.
Шаг 2 — Разметка
Для разметки, нам нужно включить три файла, и все они должны быть сохранены в формате » .php «, так как мы создаем программу сценариев на стороне сервера.
Сначала создайте файл login.php . Скопируйте в него приведенный ниже код:
Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей Вход
С помощью этого кода вы получите результат, который показан на рисунке ниже:
Далее, создаем файл register.php . Скопируйте и вставьте в него приведенный ниже код:
Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей Регистрация
С помощью этого кода вы получите следующий результат:
PHP session используется для сохранения данных пользователя между разными страницами сайта.
Далее, создаем файл intropage.php . Он будет служить в качестве страницы приветствия после того, как пользователь успешно авторизовался в системе:
Добро пожаловать, USER
!Выйти из системы
Этот код даст нам следующий результат:
Шаг 3 — CSS
Теперь, когда разметка готова, нужно добавить CSS -код. В основном, он будет содержать стили для класса страниц container, а также для кнопок и некоторых других элементов, таких как текстовые поля и лайки:
/*= ОБЩИЕ СТИЛИ ———————————————————*/ body < background: #efefef; font-family: 'Open Sans', sans-serif; color: #777; >a < color: #f58220; font-weight: 400; >span < font-weight: 300; color: #f58220; >.mlogin < margin: 170px auto 0; >.mregister < margin: 80px auto 0; >.error < margin: 40px auto 0; border: 1px solid #777; padding: 3px; color: #fff; text-align: center; width: 650px; background: #f58220; >.regtext < font-size: 13px; margin-top: 26px; color: #777; >/*= КОНТЕЙНЕРЫ ———————————————————*/ .container < padding: 25px 16px 25px 10px; font-weight: 400; overflow: hidden; width: 350px; height: auto; background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); >#welcome < width: 500px; padding: 30px; background: #fff; margin: 160px auto 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); >.container h1 < color: #777; text-align: center; font-weight: 300; border: 1px dashed #777; margin-top: 13px; >.container label < color: #777; font-size: 14px; >#login < width: 320px; margin: auto; padding-bottom: 15px; >.container form .input,.container input[type=text],.container input[type=password],.container input[type=e] < background: #fbfbfb; font-size: 24px; line-height: 1; width: 100%; padding: 3px; margin: 0 6px 5px 0; outline: none; border: 1px solid #d9d9d9; >.container form .input:focus < border: 1px solid #f58220; -webkit-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); -moz-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); >/*= КНОПКИ ———————————————————*/ .button < border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, leftbottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); color: #fff; padding: 7px 12px; -webkit-border-radius:4px; moz-border-radius:4px; border-radius:4px; float: right; cursor: pointer; >.button:hover < background: #f47c20; background: -webkit-gradient(linear, left top, leftbottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); >/*= ПОДВАЛ ———————————————————*/ footer
К этому времени, вы уже должны получить тот же результат, что и на изображении, приведенном в начале статьи.
Шаг 4 — Многоразово используемые элементы
Теперь, когда у вас готовы разметка и стили CSS , попробуйте задействовать такие многоразово используемые элементы, как раздел заголовка и раздел подвала. В корневой папке создайте новую папку и назовите ее “ includes “.
В ней будут содержаться все включаемые файлы. Затем в папке includes создайте новый файл и назовите его header.php . Скопируйте часть раздела заголовка в каждый из трех PHP -файлов, созданных нами ранее. Таким образом, у вас получится:
Страница регистрации — это веб-страница, позволяющая пользователям создавать учетную запись на сайте.
Следующее, что вам нужно сделать, это удалить разметку, скопированную из файла header.php во всех трех PHP -файлах и заменить ее следующим PHP -кодом:
Теперь, сделайте то же самое с подвалом. Скопируйте приведенный ниже код и вставьте его в новый файл footer.php . Он будет включать в себя раздел подвала: