Стилизуем формы, используя CSS3

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги:

• веб-дизайн
• css3
• html5

Итак, есть задача — сделать регистрацию в системе и возможность авторизации. Как это делать? Начнем по порядку.

Регистрация на php

Тут все просто. Делается хранилище данных для пользователей. Обычно это таблица БД. В нее входят такие поля как id, username и password. Остальные поля опциональны. Вы можете собирать e-mail пользователей, их адреса, возможные ip, время выхода в сеть, кодовые слова от банковских карт, секретные вопросы...

В общем, главное — это пара логин-пароль.

Первый важный момент — нельзя хранить пароли пользователей в открытом виде. То есть, как текст. Нельзя потому что если к БД получит доступ кто-то посторонний — он получит базу логин-паролей пользователей, что вряд ли им понравится. А если учесть что логин-пароль у многих пользователей на разных сервисах одни и те же — это ставит под угрозу и личные данные и финансы и личную переписку и все что угодно.

Пароли надо хранить в виде хэша. Хэширование — это операция, которая превращает исходные данные в какой-то слепок известной длины. Это хорошо тем, что слепок уникален. То есть, если мы изменим в исходных данных хотя бы один символ — слепок на выходе операции хэширования получится совершенно, до неузнаваемости другим. Операция хэширования необратима, то есть, из этого слепка не получится развернуть исходные данные. Этим оно и отличается от шифрования.

В MySQL и php есть одна и та же распространенная и безопасная функция хэширования — md5. Этот алгоритм принимает данные и отдает отпечаток.

Итак, мы получаем данные от пользователя, проверяем не пустые ли они, не содержат ли всяких ненужных нам символов (не ограничивайте пользователей слишком сильно). И теперь делаем запрос вроде этого:

INSERT INTO `users` (`id`,`username`,`password`) VALUES("",$quoted_username,MD5($quoted_password));

Обратите внимание — я специально обозвал переменные $quoted_ потому что перед запихиванием их в запрос их обязательно надо отэскейпить функцией mysql_real_escape_string(). Так как эта функция очень часто используется, а пишется очень длинно (люблю архитекторов пхп) — я рекомендую запихать ее в свою оболочку. Например, так:

Function quote($var) { return mysql_real_escape_string($var); }

Авторизация на php

Мы добавили нового пользователя и теперь он авторизуется. Мы рисуем ему форму логина-пароля и ловим его данные. Что дальше? Ведь пароль нам пришел в открытом виде, а в базе — хэш пароля. Придется конвертировать пароль в хэш, потом сравнивать их? Не, можно сделать проще — в один запрос.

SELECT * FROM `users` WHERE `login`=$qoted_login AND `password`=MD5($quoted_password);

Если запрос вернет строку — это будет строка с данными пользователя. Если нет — такого пользователя в таблице нет. Данные пользователя очень нам пригодятся — стоит их получить в ассоциативный массив.

Запомнить пользователя

Теперь нам надо запомнить что пользователь авторизован и точно знать кто это. Первое что приходит в голову — использовать для этого куки. Действительно — запихать в куки логин и id пользователя и всегда знать кто запрашивает страницу в данный момент.

Но это порочная практика. Почему? Потому что куки — это файл, который хранится у пользователя в браузере и данные из этого файла передаются серверу в каждом запросе. Во-первых, они передаются как текст, а это значит — их легко перехватить. Во-вторых, это простой текст, посылаемый пользователем. Поэтому его можно буквально переписать. Например, если мы решили хранить в куках логин пользователя "Вася" он может открыть управление куками в своем браузере, найти нужную куку и исправить ее на, скажем, "Admin". И все. Теперь при каждом запросе мы будем получать куку, которая нам будет сообщять юзернейм пользователя — "Admin".

Поэтому безопаснее хранить все данные на сервере в недоступном из веба месте. В какой-то папке, к которой нельзя получить доступ из браузера. В эту папку нужно писать все данные о пользователе и читать их оттуда каждый раз, когда он запрашивает документ. Чтобы узнать какому пользователю принадлежит какой файл данных — надо обзывать файл уникальным именем и вот это имя кидать уже пользователю в куки. Таким образом, пользователь не сможет узнать как называется файл для пользователя Admin — этот файл генерирует система на сервере. И это позволяет таскать от документа к документу хоть пароли в открытом виде.

То что я описал — это механизм сессии . В Perl, например, для использования сессий нужно загружать модули. А в php сессии поддерживаются из коробки. Фактически, все что вам нужно знать — это функция session_start() и массив $_SESSION. Это все. Сейчас расскажу.

В каждом скрипте, где вы будете писать в сессию или читать из нее, вам надо до того, как вы выведете какую-то информацию вызвать функцию session_start(). Это запустит сессию. Эта функция создаст файл сессии если его нет или прочитает его если скрипту была передана специальная кука.

Чтобы записать в сессию данные нужно просто записать их в массив $_SESSION. Сейчас нам надо помнить id юзера.

$_SESSION["userid"] = $userinfo["id"];

Все. Теперь каждый раз когда пользователь будет запрашивать скрипт, который использует сессии — вам будет доступно значение элемента $_SESSION["userid"].

Поэтому когда пользователь ввел логин и пароль, мы получили его данные из БД, что подтверждает что такой пользователь есть в нашей базе данных, мы запоминаем его в сессии.

Узнать авторизован ли пользователь

Ну это уж проще простого! Теперь, когда вы знаете как работают сессии — узнать авторизован ли пользователь — дело одной строки. Вот она:

If(isset($_SESSION["userid"])) { print "пользователь авторизован"; }

Если в сессии определен id пользователя, значит он уже прошел авторизацию. Но как узнать какой именно это пользователь? Какой его логин? Дата рождения? Кодовое слово для банковской карты? Девичья фамилия матери?

Ну очевидно — сделать один запрос к таблице users. У нас же есть id этого пользователя.

SELECT * FROM `users` WHERE `id`=$quoted_userid

Как разлогинить пользователя, сделать выход

Ну это уж совсем просто. Если мы определяем авторизован ли пользователь по наличию userid в сессии, то чтобы его разлогинить нужно удалить его оттуда. Делается так:

Unset($_SESSION["userid"]);

Еще можно убить сессию для верности. Это очистит куку у пользователя и уничтожит файл сессии на сервере. При этом из нее пропадут все данные. Делается так:

Session_destroy();

На этом все. Если остались какие-то вопросы — не стесняйтесь обращаться. Более того, вы можете обратиться ко мне по icq или почте и попросить помочь с чем-нибудь. Я обычно не отказываю. Если помощь потребуется серьезная — я могу попросить небольшую оплату. Кроме того, я могу дистанционно учить вас делать сайты! Вот такой я коуч и гуру:) А если вы хотите получать уроки и трюки просто так, бесплатно — подпишитесь на RSS моего блога .

Спонсор этого поста — ibooknet.ru, который предлагает ремонт ноутбуков по приятным ценам. Лично мой ноут в порядке и надеюсь, мне не придется его чинить. Чего и вам желаю.

Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии 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() переадресовываем его к форме авторизации.

Вы успешно зарегистрировались в системе. Сейчас вы будете переадресованы к странице авторизации. Если это не произошло, перейдите на неё по прямой ссылке.

В скрипте вы должны были заметить еще одну новую функцию — 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__ . "

Если всё нормально, ваш пользователь будет зарегистрирован. Можете потестировать форму. Попробуйте зарегистрировать пользователей с одинаковыми логинами. После успешной регистрации пользователь будет перееадресован к форме авторизации. Ранее мы просто создали разметку для отображения этой формы. Так как в её атрибуте 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__ . "

Когда пользователь попадает на защищенную страницу, следует проверить корректность данных о его авторизации. Для этого нам потребуется еще одна пользовательская функция. Назовем её 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__ . "

Теперь, когда пользователь попал на защищенную страницу, мы должны вызвать функцию проверки данных авторизации. Сценарий вызова и проверки мы поместим в отдельный файл 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. Я в курсе, что лучше писать объектно-ориентированный код, знаю, что передавать и хранить пароль в открытом виде не стоит, что информацию, заносимую в базу данных, необходимо предварительно проверять. Знаю. Об этом я здесь не буду говорить.

HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.

Окончательный результат:

Пишем разметку

Давайте создадим следующую разметку

Section class="loginform cf">