Php логин и пароль. Форма входа и регистрации с помощью HTML5 и CSS3

Если вы работали с HTML-формами раньше, этот код вам покажется знакомым. Но есть также и некоторые особенности. Поля имеют заполнители и некоторые атрибуты, которые являются новыми.

Заполнители полей (placeholder)

Атрибут placeholder позволяет включить текст по умолчанию в поле, который исчезнет, когда элемент получит фокус или когда поле заполнено. Раньше мы делали это при помощи JavaScript, но теперь все стало намного проще благодаря новым атрибутам.

Атрибут «required»

Атрибут required не позволяет оставлять пустые поля до отправки формы. Если пользователь не заполнил поле, появляется следующая ошибка.

Новый селектор также включен в CSS3 (:required). Вот пример:

Input { border : 1px solid red ; }

Типы полей

Наше первое поле имеет тип email (типы инпутов — это еще одно нововведение HTML5). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;

Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@» .

Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;

Атрибут placeholder поддерживают только современные браузеры - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+ . Если вы хотите это исправить, используйте этот костыль в сочетании с Modernizr .

То же с атрибутом required . Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться: «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.

Label { display : block ; color : #999 ; } .cf :before , .cf :after { content : "" ; display : table; } .cf :after { clear : both ; } .cf { *zoom: 1 ; } :focus { outline : 0 ; }

Все поля, кроме поля для «submit», будут иметь следующие стили:

Loginform input:not ([ type=submit] ) { padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ; }

А вот стили для кнопки для отправки формы.

Loginform input[ type=submit] { border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 .3 ) ; }

Вот и все! Надеемся, этот урок вам пригодился.

Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.

Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.

Результат в браузере:

Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password :

Результат:

Кнопка отправки формы

Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега с типом submit .

Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value . Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.

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

В итоге код нашей формы получится следующим:

Результат в браузере:

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей , я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации .

В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно элегантно. Глядя на подобную красоту, у меня всегда возникает мысль о том, как же здорово быть дизайнером и уметь вытворять такие вещи.

Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код.

Примеры

Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle , либо скачать код архивом по следующей ссылки:

Особенности

• В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
• Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
• Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow . В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

На специализированном сайте представлены материалы по css html для чайников . Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.

От автора: рано или поздно каждый веб-разработчик сталкивается с задачей по ограничению доступа к некоей странице/страницам или каталогу. Это может быть просто секретная страница на сайте, административная часть сайта или любой другой раздел, доступ к которому мы хотим ограничить и предоставлять только по паролю. Для этого можно, конечно же, воспользоваться средствами сервера. Думаю, на любом современном хостинге есть функция паролирования директории, где можно создать пользователя, назначить ему пароль и, после паролирования директории, доступ к закрытому каталогу будет предоставлен только после правильного ввода логина и пароля. Но иногда хочется написать что-то самому, что-то быстрое, простое, но вместе с тем — надежное…

В этом уроке мы попробуем написать свою простую систему авторизации. У нас будет секретная страница — допустим, это будет страница администратора, доступ к которой мы будем предоставлять только для авторизованного пользователя. Наша система авторизации будет основана на работе механизма сессий. Перед продолжением этого урока я рекомендую Вам ознакомиться с одним из предыдущих своих уроков, в котором мы, в частности, рассматриваем работу сессий — .

Вкратце всю работу с сессиями можно разделить на 3 этапа:

Открытие сессии. На всех страницах, где подразумевается работа с сессиями, обязательно должен быть осуществлен старт сессии функцией session_start().

Регистрация сессионных переменных.

Разрегистрирование сессионных переменных при помощи функции unset() и закрытие сессии функцией session_destroy().

Шаг 1

Итак, для нашей работы создадим 3 файла — Главная страница (index.php), Контакты (contact.php) и Админка (admin.php). Обращаю внимание на то, что расширение файла, к которому мы будем ограничивать доступ должно быть.php. Как Вы догадались, ограничивать доступ мы будем к файлу admin.php. Код всех файлов самый простой — это своеобразное меню в строку со ссылками на другие страницы, и под ним индивидуальный текст каждой страницы, чтобы мы могли отличать их друг от друга. Вот, к примеру, код индексной страницы:

Главная | Контакты | Админка

Остальные страницы, как я сказал, отличаются от нее только текстом после тега линии. Я не стал делать полноценные страницы с мета-тегами, поскольку наша задача состоит только в ограничении доступа к некоей странице.

Шаг 2

Пока что мы свободно можем ходить по всем страницам, включая страницу админки. Как же мы ограничим к ней доступ? Каков вообще будет алгоритм? Мы будем делать следующее: в самом начале страницы мы будем проверять, есть ли нужная нам метка в сессии или, проще говоря, существует ли определенная сессионная переменная (также можно проверять равно ли значение сессионной переменной определенному значению). Если такой переменной нет, значит пользователь, запрашивающий эту страницу, не авторизован, а значит мы осуществим его редирект на страницу авторизации, где ему будет предложено заполнить форму с именем и паролем. Алгоритм предельно прост — реализуем его. Переходим к файлу admin.php, открываем в самом верху конструкцию PHP и напишем такой код:

Давайте теперь прочитаем это код. Во-первых, мы открыли сессию, как Вы помните — это обязательное условие при работе с сессиями. Далее, мы создали простое условие, которое можно прочитать так: «если в массиве $_SESSION не существует элемента admin — будем выполнять блок действий, заключенный в операторные скобки». А в блоке кода мы при помощи функции header() производим редирект пользователя на страницу enter.php (это страница авторизации). После функции header() обязательно завершаем выполнение скрипта при помощи функции exit(). Если же условие не выполнится, т.е., в массиве $_SESSION будет элемент admin — это значит, что пользователь уже успешно авторизован, и мы пропустим блок действия в операторных скобках, т.е., никакого редиректа происходить не будет, и мы покажем запрошенную страницу.

Шаг 3

Теперь нам нужно создать страницу авторизации — enter.php. Для этого скопируем код, к примеру, страницы contact.php, создадим новый файл и вставим в него скопированный код. Файл сохраняем под именем enter.php. Теперь на этой странице напишем простенькую форму для ввода логина и пароля:

Главная | Контакты | Админка

Здесь все просто. В форме 2 поля: поле для ввода логина (ему мы дали имя «user») и поле для пароля (с именем «pass»). Также мы создали кнопку (имя «submit»), по нажатию на которую будут отосланы данные из формы. Данные отсылаются методом post — это мы указали в атрибуте method тега form — и будут обработаны на этой же странице. Теперь мы можем попробовать зайти на страницу админки. Если все сделано без ошибок — мы туда попасть не сможем, а неизменно будем оказываться на странице авторизации.

Замечательно!

Шаг 4

Далее нам нужно написать на странице с формой ее обработчик, который будет принимать данные из формы и сравнивать, совпадают ли логин и пароль из формы с теми, которые есть у нас. Для этого откроем вверху страницы авторизации конструкцию PHP и начнем писать код. Для начала мы должны открыть сессию — ведь именно здесь мы будем создавать метку в сессии, если получены верные логин и пароль. На этой же странице мы будем хранить логин и пароль администратора. Обычно эти данные хранятся в базе данных (БД), но у нас будет только 1 пользователь (администратор), а потому хранить его данные для входа в БД не совсем рационально. Если же пользователей будет не один, т.е., мы, к примеру, пишем проект, в котором имеется регистрация, то, конечно же, без БД в таком случае обойтись будет сложно.

Итак, наш логин будет «admin» и хранить мы его будем в переменной $admin. Пароль будет «mypass» и он будет храниться в переменной $pass. Но хранить пароли в открытом виде не принято — это противоречит принципам безопасности. Хранить пароль мы будем в зашифрованном виде, а зашифровать его нам поможет функция md5(). Эта функция шифрует строку по специальному алгоритму, и на выходе мы получаем строку из 32 символов (ее называют хеш). Если мы зашифруем строку «mypass» (это можно сделать, например, в файле contact.php):

то на выходе получим строку «a029d0df84eb5549c641e04a9ef389e5″ — это и будет наш зашифрованный пароль. Пока что код страницы авторизации будет таким:

Главная | Контакты | Админка

Шаг 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 "

Логин или пароль неверны!

Условие по проверке логина и пароля мы сделали как бы двойным. Сделано это при помощи логического оператора 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; }

Теперь если авторизованный пользователь попробует ввести в адресную строку имя страницы авторизации — он будет переведен на страницу админки. Не авторизованный пользователь же сможет свободно попасть на страницу авторизации.

Шаг 7

Следующий момент, который нам нужно предусмотреть — это реализация выхода авторизованного пользователя, т.е., допустим, администратор закончил свою работу и ему нужно выйти, чтобы никто посторонний не смог работать под его учетной записью. Для этого добавим на странице admin.php ссылку «Выход». Ссылка будет вести на эту же страницу, только к ней будет добавлен нужный нам параметр. Параметр добавляется при помощи вопросительного знака:

Выход

Эту ссылку можно поставить в том месте, в котором нам нужно — я поставлю ее после текста страницы. Относительно параметра — он будет передан методом GET (вспоминаем, что из формы мы передавали данные вторым параметром — POST). При использовании этого метода данные присоединяются к адресу в адресной строке и отделены от адреса как раз вопросительным знаком. Мы передаем один параметр — do — и при этом присвоили ему значение «logout». Как теперь мы можем разавторизовать пользователя? Очень просто — здесь нам помогут второй и третий этапы при работе с сессиями. При загрузке страницы мы можем проверить значение элемента do из массива $_GET. Если оно будет равно строке «logout» — мы просто разрегистрируем сессионную переменную $_SESSION["admin"] и разрушим сессию. Соответственно, метки в сессии после этого не будет и в следующем блоке, где мы проверяем наличие метки, пользователь будет перенаправлен на страницу авторизации. Все просто.

Все кто разрабатывает web сайты, рано или поздно сталкивается с такой задачей как авторизация и аутентификация пользователей , реализованная именно с помощью языка программирования, а не с помощью стандарта протокола http. Сегодня мы рассмотрим пример создания простой авторизации с использованием языка программирования PHP, а данные о пользователях будем хранить в базе MySQL.

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

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

Создание объектов в базе данных

Переходим к практике. Для начала создадим таблицу хранения данных о пользователях в базе MySQL . Я предлагаю использовать простую структуру таблицы (Вы ее, конечно, можете дополнить чем-нибудь, у меня база называется test, а таблица users ):

CREATE TABLE test.users(user_id INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, user_login VARCHAR(30) NOT NULL, user_password VARCHAR(32) NOT NULL, PRIMARY KEY (user_id)) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;

И давайте сразу же добавим одну запись в эту таблицу:

Insert into test.users (user_login, user_password) values ("mylogin","202cb962ac59075b964b07152d234b70")

Итого у нас получилось:

• Логин – mylogin;
• Пароль -;

Мы пароль, конечно же, будем хранить в хешированном виде, так как хранить пароль в открытом виде, мягко сказать, не безопасно. У нас Выше хеш пароля 123, поэтому, когда будем вводить пароль в форму, мы будем забивать именно 123, а не.

Создание формы регистрации

Для того чтобы пользователь мог сам зарегистрироваться, сделайте форму, данные с которой будут посылаться на файл обработки регистрации, т.е. записываться в базу данных. Например, вот самый простой способ:

0) { $error = "Пользователь с таким логином уже есть"; } // Если нет, то добавляем нового пользователя if(!isset($error)) { $login = mysql_real_escape_string(trim(htmlspecialchars($_POST["login"]))); // Убираем пробелы и хешируем пароль $password = md5(trim($_POST["password"])); mysql_query("INSERT INTO users SET user_login="".$login."", user_password="".$password."""); echo "Вы успешно зарегистрировались с логином - ".$login; exit(); } else { // если есть такой логин, то говорим об этом echo $error; } } //по умолчанию данные будут отправляться на этот же файл print <<< html

Кстати, при таком способе лучше всего для логина использовать латинские буквы (т.е. английские ), если хотите писать логин на русском, то придется немного корректировать код. Файл можете назвать как угодно (для теста я использовал reg.html ).

Примечание! Для тестирования я использую всего один файл, я его назвал mylogin.html (код файла ниже). Вы можете использовать в своих файлах и называть их как угодно, я здесь описываю сам процесс авторизации, поэтому применить его можно везде. Кстати, во всех файлах придется использовать функцию session_start(); для того чтобы Вы могли проверять авторизован пользователь или нет. И еще один момент, конечно же, пропишите свои настройки подключения к базе данных.

Создание формы авторизации

"."Вы авторизованы
Т.е. мы проверили сессию и можем открыть доступ к определенным данным"; } else { $login = ""; //проверяем куку, может он уже заходил сюда if (isset($_COOKIE["CookieMy"])){ $login = htmlspecialchars($_COOKIE["CookieMy"]); } //простая формочка print <<< html

Примечание! Если вдруг у Вас отказывает работать парсер php, т.е. на экран Вам выводится сам код php, то у Вас просто на всего не включена обработка php в файлах html. Настройки делаются в файле конфигурации web сервера httpd.conf (если apache):

AddType application/x-httpd-php .php .html

В IIS в окне «Добавление сопоставления модуля» (Add Module Mapping) добавьте к *.php еще и *.html через запятую. Это если Вы делаете у себя дома на своем web сервере, а если Вы все это делаете у хостера, то Вам придется писать им и просить внести необходимые изменения, у некоторых хостеров они уже сделаны.

Код я прокомментировал, поэтому я думаю, что все должно быть понятно. Еще раз напоминаю во всех файлах, содержимое которых Вы не хотите показывать не авторизованным пользователям, необходимо писать session_start, ну и, наверное, на этом все. Если есть вопросы, задавайте в комментариях. Удачи!