Создание авторизации на php mysql. Форма входа и регистрации с помощью HTML5 и CSS3
Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.
Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.
Результат в браузере:
Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password :
Результат:
Кнопка отправки формы
Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега с типом submit .
Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value . Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.
Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.
В итоге код нашей формы получится следующим:
Результат в браузере:
От автора: рано или поздно каждый веб-разработчик сталкивается с задачей по ограничению доступа к некоей странице/страницам или каталогу. Это может быть просто секретная страница на сайте, административная часть сайта или любой другой раздел, доступ к которому мы хотим ограничить и предоставлять только по паролю. Для этого можно, конечно же, воспользоваться средствами сервера. Думаю, на любом современном хостинге есть функция паролирования директории, где можно создать пользователя, назначить ему пароль и, после паролирования директории, доступ к закрытому каталогу будет предоставлен только после правильного ввода логина и пароля. Но иногда хочется написать что-то самому, что-то быстрое, простое, но вместе с тем — надежное…
В этом уроке мы попробуем написать свою простую систему авторизации. У нас будет секретная страница — допустим, это будет страница администратора, доступ к которой мы будем предоставлять только для авторизованного пользователя. Наша система авторизации будет основана на работе механизма сессий. Перед продолжением этого урока я рекомендую Вам ознакомиться с одним из предыдущих своих уроков, в котором мы, в частности, рассматриваем работу сессий — .
Вкратце всю работу с сессиями можно разделить на 3 этапа:
Открытие сессии. На всех страницах, где подразумевается работа с сессиями, обязательно должен быть осуществлен старт сессии функцией session_start().
Регистрация сессионных переменных.
Разрегистрирование сессионных переменных при помощи функции unset() и закрытие сессии функцией session_destroy().
Шаг 1
Итак, для нашей работы создадим 3 файла — Главная страница (index.php), Контакты (contact.php) и Админка (admin.php). Обращаю внимание на то, что расширение файла, к которому мы будем ограничивать доступ должно быть.php. Как Вы догадались, ограничивать доступ мы будем к файлу admin.php. Код всех файлов самый простой — это своеобразное меню в строку со ссылками на другие страницы, и под ним индивидуальный текст каждой страницы, чтобы мы могли отличать их друг от друга. Вот, к примеру, код индексной страницы:
Главная | Контакты | Админка
Это главная страница
Остальные страницы, как я сказал, отличаются от нее только текстом после тега линии. Я не стал делать полноценные страницы с мета-тегами, поскольку наша задача состоит только в ограничении доступа к некоей странице.
Шаг 2
Пока что мы свободно можем ходить по всем страницам, включая страницу админки. Как же мы ограничим к ней доступ? Каков вообще будет алгоритм? Мы будем делать следующее: в самом начале страницы мы будем проверять, есть ли нужная нам метка в сессии или, проще говоря, существует ли определенная сессионная переменная (также можно проверять равно ли значение сессионной переменной определенному значению). Если такой переменной нет, значит пользователь, запрашивающий эту страницу, не авторизован, а значит мы осуществим его редирект на страницу авторизации, где ему будет предложено заполнить форму с именем и паролем. Алгоритм предельно прост — реализуем его. Переходим к файлу admin.php, открываем в самом верху конструкцию PHP и напишем такой код:
session_start () ; if (! $_SESSION [ "admin" ] ) { header ("Location: enter.php" ) ; exit ; |
Давайте теперь прочитаем это код. Во-первых, мы открыли сессию, как Вы помните — это обязательное условие при работе с сессиями. Далее, мы создали простое условие, которое можно прочитать так: «если в массиве $_SESSION не существует элемента admin — будем выполнять блок действий, заключенный в операторные скобки». А в блоке кода мы при помощи функции header() производим редирект пользователя на страницу enter.php (это страница авторизации). После функции header() обязательно завершаем выполнение скрипта при помощи функции exit(). Если же условие не выполнится, т.е., в массиве $_SESSION будет элемент admin — это значит, что пользователь уже успешно авторизован, и мы пропустим блок действия в операторных скобках, т.е., никакого редиректа происходить не будет, и мы покажем запрошенную страницу.
Шаг 3
Теперь нам нужно создать страницу авторизации — enter.php. Для этого скопируем код, к примеру, страницы contact.php, создадим новый файл и вставим в него скопированный код. Файл сохраняем под именем enter.php. Теперь на этой странице напишем простенькую форму для ввода логина и пароля:
Главная | Контакты | Админка
Это страница авторизации.
< p > < a href = "index.php" > Главная< / a > | < a href = "contact.php" > Контакты< / a > | < a href = "admin.php" > Админка< / a > < / p > < hr / > < br / > < form method = "post" > Username : < input type = "text" name = "user" / > < br / > Password : < input type = "password" name = "pass" / > < br / > < input type = "submit" name = "submit" value = "Войти" / > < / form > |
Здесь все просто. В форме 2 поля: поле для ввода логина (ему мы дали имя «user») и поле для пароля (с именем «pass»). Также мы создали кнопку (имя «submit»), по нажатию на которую будут отосланы данные из формы. Данные отсылаются методом post — это мы указали в атрибуте method тега form — и будут обработаны на этой же странице. Теперь мы можем попробовать зайти на страницу админки. Если все сделано без ошибок — мы туда попасть не сможем, а неизменно будем оказываться на странице авторизации.
Замечательно!
Шаг 4
Далее нам нужно написать на странице с формой ее обработчик, который будет принимать данные из формы и сравнивать, совпадают ли логин и пароль из формы с теми, которые есть у нас. Для этого откроем вверху страницы авторизации конструкцию PHP и начнем писать код. Для начала мы должны открыть сессию — ведь именно здесь мы будем создавать метку в сессии, если получены верные логин и пароль. На этой же странице мы будем хранить логин и пароль администратора. Обычно эти данные хранятся в базе данных (БД), но у нас будет только 1 пользователь (администратор), а потому хранить его данные для входа в БД не совсем рационально. Если же пользователей будет не один, т.е., мы, к примеру, пишем проект, в котором имеется регистрация, то, конечно же, без БД в таком случае обойтись будет сложно.
Итак, наш логин будет «admin» и хранить мы его будем в переменной $admin. Пароль будет «mypass» и он будет храниться в переменной $pass. Но хранить пароли в открытом виде не принято — это противоречит принципам безопасности. Хранить пароль мы будем в зашифрованном виде, а зашифровать его нам поможет функция md5(). Эта функция шифрует строку по специальному алгоритму, и на выходе мы получаем строку из 32 символов (ее называют хеш). Если мы зашифруем строку «mypass» (это можно сделать, например, в файле contact.php):
echo md5 ("mypass" ) ; |
то на выходе получим строку «a029d0df84eb5549c641e04a9ef389e5″ — это и будет наш зашифрованный пароль. Пока что код страницы авторизации будет таким:
Главная | Контакты | Админка
Это страница авторизации.
session_start () ; $admin = "admin" ; $pass = "a029d0df84eb5549c641e04a9ef389e5" ; < p > < a href = "index.php" > Главная< / a > | < a href = "contact.php" > Контакты< / a > | < a href = "admin.php" > Админка< / a > < / p > < hr / > < br / > < form method = "post" > Username : < input type = "text" name = "user" / > < br / > Password : < input type = "password" name = "pass" / > < br / > < input type = "submit" name = "submit" value = "Войти" / > < / form > |
Шаг 5
Теперь проверим то, что мы получили из формы с тем, что у нас есть в переменных с логином и паролем. Делать это мы будем по условию — только в том случае, если нажата кнопка формы. Как мы можем это проверить? У кнопки есть имя («submit»), а данные мы передаем методом post. Соответственно, мы можем просто проверить, существует ли элемент submit в массиве $_POST. Если есть — кнопка была нажата, и мы будем выполнять действия по проверке присланных данных, иначе — ничего делать не будем. После объявления логина и пароля пишем условие:
if($_POST["submit"]){ if($admin == $_POST["user"] AND $pass == md5($_POST["pass"])){ $_SESSION["admin"] = $admin; header("Location: admin.php"); exit; }else echo "
Логин или пароль неверны!
"; }if ($ _POST [ "submit" ] ) { if ($ admin == $ _POST [ "user" ] AND $ pass == md5 ($ _POST [ "pass" ] ) ) { $ _SESSION [ "admin" ] = $ admin ; exit ; }
else
echo
" Логин или пароль неверны! |
Условие по проверке логина и пароля мы сделали как бы двойным. Сделано это при помощи логического оператора AND (его также можно записать таким образом — «&&»). Условие можно прочитать так: «если(переменная $admin равна элементу user в массиве $_POST И переменная $pass равна хешу элемента pass в массиве $_POST) то {выполняем блок действий}else выводим на экран текст ‘Логин или пароль неверны!’
Если же пара логин-пароль совпадает, то мы регистрируем сессионную переменную $_SESSION["admin"] и перенаправляем пользователя на страницу админки — admin.php.
Попробуем теперь протестировать то, что мы уже создали. Если мы введем заведомо ложные логин и пароль, то получим предупреждающее сообщение, что «Логин или пароль неверны!». Попробуем теперь ввести правильные данные для входа. Если мы нигде не ошиблись, то после нажатия на кнопку «Войти» мы окажемся на странице админки.
Шаг 6
Теперь осталось дописать некоторые мелочи. К примеру, мы сейчас авторизованы в системе, но если мы введем в адресной строке адрес страницы авторизации, то спокойно попадем на нее и увидим форму авторизации. Такого быть не должно — форму должен видеть только неавторизованный пользователь. Как мы можем исправить это? Помним, что на странице admin.php мы проверяли, есть ли метка в сессии. Если ее нет — мы переводили пользователя на страницу авторизации. Здесь мы можем сделать то же самое, только наоборот. Т.е., мы также проверяем, есть ли метка в сессии. Только теперь мы будем переводить пользователя на страницу админки, если такая метка есть. Это, в принципе, логично. Если есть метка, значит пользователь уже авторизован, и мы его можем перевести на страницу админки. На странице enter.php после старта сессии допишем такой код:
if($_SESSION["admin"]){ header("Location: admin.php"); exit; }
if ($ _SESSION [ "admin" ] ) { header ("Location: admin.php" ) ; exit ; |
Теперь если авторизованный пользователь попробует ввести в адресную строку имя страницы авторизации — он будет переведен на страницу админки. Не авторизованный пользователь же сможет свободно попасть на страницу авторизации.
Шаг 7
Следующий момент, который нам нужно предусмотреть — это реализация выхода авторизованного пользователя, т.е., допустим, администратор закончил свою работу и ему нужно выйти, чтобы никто посторонний не смог работать под его учетной записью. Для этого добавим на странице admin.php ссылку «Выход». Ссылка будет вести на эту же страницу, только к ней будет добавлен нужный нам параметр. Параметр добавляется при помощи вопросительного знака:
Выход
< a href = "admin.php?do=logout" > Выход< / a > |
Эту ссылку можно поставить в том месте, в котором нам нужно — я поставлю ее после текста страницы. Относительно параметра — он будет передан методом GET (вспоминаем, что из формы мы передавали данные вторым параметром — POST). При использовании этого метода данные присоединяются к адресу в адресной строке и отделены от адреса как раз вопросительным знаком. Мы передаем один параметр — do — и при этом присвоили ему значение «logout». Как теперь мы можем разавторизовать пользователя? Очень просто — здесь нам помогут второй и третий этапы при работе с сессиями. При загрузке страницы мы можем проверить значение элемента do из массива $_GET. Если оно будет равно строке «logout» — мы просто разрегистрируем сессионную переменную $_SESSION["admin"] и разрушим сессию. Соответственно, метки в сессии после этого не будет и в следующем блоке, где мы проверяем наличие метки, пользователь будет перенаправлен на страницу авторизации. Все просто.
В формате данного урока создадим форму авторизации на CSS , покажу, как подключать шрифтовые иконки, каким образом задавать прозрачность у элементов, задействуем в форме анимированные эффекты при наведение.
Каркас формы в HTML
Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.
Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина type="text" name="username" placeholder="Введите логин" , второй input type="password" name="password" placeholder="Введите пароль" принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.
Описываем в CSS элементы формы
Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.
Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img
, и поместим в нее свое изображение. Подключаем картинку в style.css
для body
. Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img
, и далее название картинки.
Body{ background-image: url("../img/bg.png"); }
A{ color: #fff; } a:hover{ text-decoration: none; }
Предадим стили контейнеру с формой .container
. Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134
, и отцентрируем ее посередине экрана margin: 250px auto 0 auto;
. Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.
Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; }
Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.
Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; }
Затем отцентруем inpyt
, для этого обернем их в дополнительный блок и присвоим класс .dws-input
. Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img
, и пропишем к ней путь img src="img/men.png"
.
Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.
Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; }
Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .
Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; }
Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.
Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; }
Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .
Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.
Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; }
Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px;
.
Добавление шрифтовых иконок
Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.
Отберем иконки для наших инпутов, для этого переходим на страничку Icons , первый подключим стиль для ввода логина, используем user , копируем его код f007 , и описываем его в стилях при помощи псевдоэлемента.
Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.
Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; }
Немного подвинем текст в input - padding-left: 40px; .
Отберем вторую иконку с названием lock , копируем ее код f023 , и описываем ее стили.
Для этого отбираем второй элемент .dws-input:nth-child(2)::before{}
, и прописываем картинку content: "\f023
";.
Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; }
Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; }
А также, стили наведение для инпутов.
Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); }
Для удобства обернем их в блок с классом .social
и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.
Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; }
Затем опишем стили при наведении. Сделаем белый блок, фон иконки изменим на темный, закруглим углы и при наведение отобразим курсор.
Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; }
Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .
В принцыпе и все, получилась довольно симпатичная форма, которую можно подключить на сайт и использовать для авторизации.
Пробуйте сделать на примере данного урока что нибудь свое оригинальное, тренируйтесь, и не забывайте делится данным материалом.
Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии PHP .
Для начала давайте оговорим все шаги, которые сделаем далее. Что нам вообще нужно? Нам нужен сценарий, который будет регистрировать пользователя, авторизовать пользователя, переадресовывать пользователя куда-либо после авторизации. Также нам нужно будет создать страницу, которая будет защищена от доступа неавторизованных пользователей. Для регистрации и авторизации нам необходимо будет создать HTML -формы. Информацию о зарегистрированных пользователях мы будем хранить в базе данных. Это значит, что нам еще нужен скрипт подключения к СУБД . Всю работу у нас будут выполнять функции, которые мы сами напишем. Эти функции мы сохраним в отдельный файл.
Итак, нам нужны следующие файлы:
- соединение с СУБД;
- пользовательские функции;
- авторизация;
- регистрация;
- защищенная страница;
- сценарий завершения работы пользователя;
- сценарий, проверяющий статус авторизации пользователя;
- таблица стилей для простейшего оформления наших страниц.
Всё это будет бессмысленно, если у вас нет соответствующей таблицы в базе данных. Запустите инструмент управления своим СУБД (PhpMyAdmin или командную строку, как удобнее) и выполните в нем следующий запрос:
CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `password` char(40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Наши файлы со сценариями я назову так (все они будут лежать в одном каталоге):
- database.php;
- functions.php;
- login.php;
- registration.php;
- index.php;
- logout.php;
- checkAuth.php;
- style.css.
Назначение каждого из них, я уверен, вам понятно. Начнем со скрипта соединения с СУБД. Вы его уже видели . Просто сохраните код этого скрипта в файле с именем database.php . Пользовательские функции мы будем объявлять в файле functions.php . Как это всё будет работать? Неавторизованный пользователь пытается получить доступ к защищенному документу index.php , система проверяет авторизован ли пользователь, если пользователь не авторизован, он переадресовывается на страницу авторизации. На странице авторизации пользователь должен видеть форму авторизации. Давайте сделаем её.
зарегистрируйтесь.
Теперь нашей форме нужно придать некий вид. Заодно определим правила для других элементов. Я, забегая вперед, приведу содержимое таблицы стилей полностью.
/* файл style.css */ .row { margin-bottom:10px; width:220px; } .row label { display:block; font-weight:bold; } .row input.text { font-size:1.2em; padding:2px 5px; } .to_reg { font-size:0.9em; } .instruction { font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; } .error { color:red; margin-left:3px; }
Если всё сделано верно, у вас в броузере должно быть следующее:
Конечно же у нас нет пока ни одного зарегистрированного пользователя, и чтобы авторизоваться, нужно зарегистрироваться. Давайте сделаем форму регистрации.
Вы, наверное, обратили внимание на то, что в HTML -коде присутствуют переменные PHP . Они являются содержимым атрибутов текстовых полей форм, содержимом контейнеров, предназначенных для вывода ошибок. Но мы не инициализировали эти переменные. Давайте сделаем это.
В атрибуте action тега form не указан параметр. В этом случае при отправке данных формы обрабатываться они будут в том же сценарии, из которого они и отправлялись. Значит нам нужно написать код, обрабатывающий данные формы. Но давайте сначала оговорим алгоритм их обработки.
Нам нужно, чтобы поля логина и пароля не были пустыми. Затем необходимо проверить логин на соответствие требованиям. Пароль также должен соответствовать описанным требованиям, а повторно указанный пароль должен с ним совпадать и, кроме того, они должны быть идентичны. Если какое-то из этих условий не выполняется, обработка данных формы должна быть прекращена, в массив сообщений об ошибке должно быть записано соответствующее оповещение, и оно должно быть отображено пользвателю. Для удобства пользователя мы сохраним введенный им логин (если он его указал), записав его значение в массив $fields .
Если всё нормально, в окне вашего броузера, обратившись к документу registration.php, вы должны увидеть примерно такую форму:
Теперь, допустим, пользователь нажал на кнопку регистрации, не заполнил поля формы. Согласно нашему алгоритму, логин и пароль не могут быть пустыми. Если это условие не выполняется, регистрация невозможно. Мы помним о том, что обработка данных формы происходит в текущем сценарии. Значит нам нужно изменить его код, добавив соответствующие проверки. Сразу же оговорим и следующие проверки. Если введены и логин, и пароль, нужно проверить их соответствие указанным требованиям. Для проверки логина и пароля мы создадим пользовательские функции в файле functions.php.
/** * functions.php * Файл с пользовательскими функциями */ // Подключаем файл с параметрами подключения к СУБД require_once("database.php"); // Проверка имени пользователя function checkLogin($str) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$str) { $error = "Вы не ввели имя пользователя"; return $error; } /** * Проверяем имя пользователя с помощью регулярных выражений * Логин должен быть не короче 4, не длиннее 16 символов * В нем должны быть символы латинского алфавита, цифры, * в нем могут быть символы "_", "-", "." */ $pattern = "/^[-_.a-z\d]{4,16}$/i"; $result = preg_match($pattern, $str); // Если проверка не прошла, возвращаем сообщение об ошибке if(!$result) { $error = "Недопустимые символы в имени пользователя или имя пользователя слишком короткое (длинное)"; return $error; } // Если же всё нормально, вернем значение true return true; } // Проверка пароля пользователя function checkPassword($str) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$str) { $error = "Вы не ввели пароль"; return $error; } /** * Проверяем пароль пользователя с помощью регулярных выражений * Пароль должен быть не короче 6, не длиннее 16 символов * В нем должны быть символы латинского алфавита, цифры, * в нем могут быть символы "_", "!", "(", ")" */ $pattern = "/^[_!)(.a-z\d]{6,16}$/i"; $result = preg_match($pattern, $str); // Если проверка не прошла, возвращаем сообщение об ошибке if(!$result) { $error = "Недопустимые символы в пароле пользователя или пароль слишком короткий (длинный)"; return $error; } // Если же всё нормально, вернем значение true return true; }
Теперь нам нужно изменить файл registration.php, чтобы задействовать объявленные нами функции. В сценарий мы добавим условие, проверяющее нажатие кнопки регистрации. Внутри этого условия запускается проверка логина и паролей. В случае, если какая-то из проверок завершается неудачей, мы вновь отображаем форму, и выводим сообщение об ошибке. Если ошибок нет, мы регистрируем пользователя, форму регистрации при этом уже не отображаем, сообщаем пользователю об успешной регистрации, и с помощью функции header() переадресовываем его к форме авторизации.
Вы успешно зарегистрировались в системе. Сейчас вы будете переадресованы к странице авторизации. Если это не произошло, перейдите на неё по прямой ссылке.
"; header("Refresh: 5; URL = login.php"); } // Иначе сообщаем пользователю об ошибке else { $errors["full_error"] = $reg; } } } ?>В скрипте вы должны были заметить еще одну новую функцию — registration() . А мы её еще не объявляли. Давайте сделаем это.
// Функция регистрации пользователя function registration($login, $password) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$login) { $error = "Не указан логин"; return $error; } elseif(!$password) { $error = "Не указан пароль"; return $error; } // Проверяем не зарегистрирован ли уже пользователь // Подключаемся к СУБД connect(); // Пишем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="" . $login . """; // Делаем запрос к базе $query = mysql_query($sql) or die(""); // Смотрим на количество пользователей с таким логином, если есть хоть один, // возвращаем сообщение об ошибке if(mysql_num_rows($query) > 0) { $error = "Пользователь с указанным логином уже зарегистрирован"; return $error; } // Если такого пользователя нет, регистрируем его // Пишем строку запроса $sql = "INSERT INTO `users` (`id`,`login`,`password`) VALUES (NULL, "" . $login . "","" . $password . "")"; // Делаем запрос к базе $query = mysql_query($sql) or die("
Невозможно добавить пользователя: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "
"); // Не забываем отключиться от СУБД mysql_close(); // Возвращаем значение true, сообщающее об успешной регистрации пользователя return true; }Если всё нормально, ваш пользователь будет зарегистрирован. Можете потестировать форму. Попробуйте зарегистрировать пользователей с одинаковыми логинами. После успешной регистрации пользователь будет перееадресован к форме авторизации. Ранее мы просто создали разметку для отображения этой формы. Так как в её атрибуте action не указан никакой параметр, данные, отправленные формой, будут обрабатываться в этом же сценарии. Значит нам нужно написать код для обработки, и добавить его в документ login.php.
Если вы не зарегистрированы в системе, зарегистрируйтесь.
Вы, наверное, заметили, что в скрипте авторизации у нас появилась ещё одна незнакомая функция — authorization() . Эта функция должна авторизовать пользователя, предварительно проверив, существует ли в базе данных зарегистрированный пользователь с таким логином и паролем. Если такой пользователь не будет найден, авторизация будет прервана, на экран будет выведено сообщение о неудаче. При успешной проверки функция authorization() запустит сессию, и запишет в неё значения логина и пароля пользователя, сообщит сценарию об успешности авторизации, и сценарий перенаправит пользователя на защищенную страницу ресурса.
/** * Функция авторизации пользователя. * Авторизация пользователей у нас будет осуществляться * с помощью сессий PHP. */ function authorization($login, $password) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$login) { $error = "Не указан логин"; return $error; } elseif(!$password) { $error = "Не указан пароль"; return $error; } // Проверяем не зарегистрирован ли уже пользователь // Подключаемся к СУБД connect(); // Нам нужно проверить, есть ли такой пользователь среди зарегистрированных // Составляем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."""; // Выполняем запрос $query = mysql_query($sql) or die("
Невозможно выполнить запрос: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "
"); // Если пользователя с такими данными нет, возвращаем сообщение об ошибке if(mysql_num_rows($query) == 0) { $error = "Пользователь с указанными данными не зарегистрирован"; return $error; } // Если пользователь существует, запускаем сессию session_start(); // И записываем в неё логин и пароль пользователя // Для этого мы используем суперглобальный массив $_SESSION $_SESSION["login"] = $login; $_SESSION["password"] = $password; // Не забываем закрывать соединение с базой данных mysql_close(); // Возвращаем true для сообщения об успешной авторизации пользователя return true; }Когда пользователь попадает на защищенную страницу, следует проверить корректность данных о его авторизации. Для этого нам потребуется еще одна пользовательская функция. Назовем её checkAuth() . Её задачей будет сверка данных авторизации пользователя с теми, которые хранятся в нашей базе. Если данные не совпадут, пользователь будет перенаправлен на страницу авторизации.
Function checkAuth($login, $password) { // Если нет логина или пароля, возвращаем false if(!$login || !$password) return false; // Проверяем зарегистрирован ли такой пользователь // Подключаемся к СУБД connect(); // Составляем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."""; // Выполняем запрос $query = mysql_query($sql) or die("
Невозможно выполнить запрос: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "
"); // Если пользователя с такими данными нет, возвращаем false; if(mysql_num_rows($query) == 0) { return false; } // Не забываем закрывать соединение с базой данных mysql_close(); // Иначе возвращаем true return true; }Теперь, когда пользователь попал на защищенную страницу, мы должны вызвать функцию проверки данных авторизации. Сценарий вызова и проверки мы поместим в отдельный файл checkAuth.php и будем подключать его к тем страницам, которые будут закрытыми для общего доступа.
/** * Скрипт проверки авторизации пользователей */ // Запускаем сессию, из которой будем извлекать логин и пароль // авторизовавшихся пользователей session_start(); // Подлючаем файл с пользовательскими функциями require_once("functions.php"); /** * Чтобы определить авторизован ли пользователь, нам нужно * проверить существуют ли в базе данных записи для его логина * и пароля. Для этого воспользуемся пользовательской функцией * проверки корректности данных авторизовавшегося пользователя. * Если эта функция вернет false, значит авторизации нет. * При отсутствии авторизации мы просто переадресовываем * пользователя к странице авторизации. */ // Если в сессии присуствуют данные и о логине, и о пароле, // проверяем их if(isset($_SESSION["login"]) && $_SESSION["login"] && isset($_SESSION["password"]) && $_SESSION["password"]) { // Если проверка существующих данных завершается неудачей if(!checkAuth($_SESSION["login"], $_SESSION["password"])) { // Переадресовываем пользователя на страницу авторизации header("location: login.php"); // Прекращаем выполнение скрипта exit; } } // Если данных либо о логине, либо о пароле пользователя нет, // считаем что авторизации нет, переадресовываем пользователя // на страницу авторизации else { header("location: login.php"); // Прекращаем выполнение сценария exit; }
А теперь давайте создадим код нашей защищенной страницы. Он будет довольно-таки прост.
Успешная авторизация.
Вы получили доступ к защищенной странице. Вы можете выйти из системы.
Как видите, в защищенном документе мы подключаем только один файл — checkAuth.php. Все остальные файлы подключаются уже в других сценариях. Поэтому наш код не выглядит громоздким. Регистрацию и авторизацию пользователей мы организовали. Теперь необходимо позволить пользователям выходить из системы. Для этого мы создадим сценарий в файле logout.php.
/** * Скрипт выхода пользователя из системы. Так как пользователи * авторизуются через сессии, их логин и пароль хранятся * в суперглобаном массиве $_SESSION. Чтобы осуществить * выход из системы, достаточно просто уничтожить значения * массива $_SESSION["login"] и $_SESSION["password"], после * чего мы переадресовываем пользователя к странице авторизации */ // Обязательно запускаем сессию session_start(); unset($_SESSION["login"]); unset($_SESSION["password"]); header("location: login.php");
Скрипт регистрации, авторизации и проверки пользователей готов. Вы можете использовать его у себя, дополнять, изменять под ваши нужды. Если у вас будут вопросы, можете задавать их в комментариях. Вы можете скачать себе все файлы, о которых здесь велась речь, упакованные в один архив .
P.S. Я в курсе, что лучше писать объектно-ориентированный код, знаю, что передавать и хранить пароль в открытом виде не стоит, что информацию, заносимую в базу данных, необходимо предварительно проверять. Знаю. Об этом я здесь не буду говорить.
Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей , я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации .
В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно элегантно. Глядя на подобную красоту, у меня всегда возникает мысль о том, как же здорово быть дизайнером и уметь вытворять такие вещи.
Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код.
Примеры
Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle , либо скачать код архивом по следующей ссылки:
Особенности
- В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
- Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
- Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow . В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.
Пользуйтесь на здоровье.
На специализированном сайте представлены материалы по css html для чайников . Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.
