Jquery формы регистрации и авторизации. Делаем отличную систему регистрации с использованием PHP, MySQL и jQuery. Вы уже зарегистрированы

Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии PHP .

Вероятно, вы хотели бы увидеть более современный способ создания такой формы. Полное его современное и актуальное представление у меня пока что еще в планах, но зато вы можете увидеть, что форму обратной связи можно построить с помощью объектно-ориентированных приемов в 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; }

Если всё сделано верно, у вас в броузере должно быть следующее:

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

Регистрация пользователей Укажите ваш логин: Регистрация пользователей Укажите ваш логин:

В первой строке включается библиотека jQuery из CDN Google. Затем следует заплатка для IE6 PNG для элементов прозрачности. Затем включается скрипт панели

Переменная $script показывает панель на странице загрузки при необходимости.

В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery .

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

Альтернативный вариант - разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов - ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.

Так же логично разбивать регистрацию на логические блоки - контактная информация, адрес, личные данные и так далее.

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

По мимо логики стоит учитывать, что вначале видна только ссылка "Вперед" /"Следующий шаг" , а на последнем шаге её не видно, но видно "Назад" и "Регистрация" .

Рассмотрим сам пример:

Страница

Шаг 1

Логин:

E-mail:

Пароль:

Шаг 2

Имя:

Фамилия:

Возраст:

Шаг 3

Страна:

Город:

Улица:

Назад Следующий шаг

body { margin:0; } /* Общие стили закончилась */ form { width:30%; margin:0 auto; } form div.step { display:none; } form div.step p.step{ text-align:center; font-size:28px; } form div.step p{ } form div.step p input{ float:right; } a.back { display:none; } form input { display:none; } a { color:#006600; text-decoration:none; } form p.talign{ text-align:center; }

Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js , не забываем так же подключить библиотеку jQuery :

$(document).ready(function() { // Ждём загрузки страницы var steps = $("form").children(".step"); // находим все шаги формы $(steps).show(); // показываем первый шаг var current_step = 0; // задаем текущий шаг $("a.next").click(function(){ // Событие клика на ссылку "Следующий шаг" if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним $(this).hide(); // скрываем ссылку "Следующий шаг" $("form input").show(); // показываем кнопку "Регистрация" } $("a.back").show(); // показываем ссылку "Назад" current_step++; // увеличиваем счетчик текущего слайда changeStep(current_step); // меняем шаг }); $("a.back").click(function(){ // Событие клика на маленькое изображение if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым $(this).hide(); // скрываем ссылку "Назад" } $("form input").hide(); // скрываем кнопку "Регистрация" $("a.next").show(); // показываем ссылку "Следующий шаг" current_step--; // уменьшаем счетчик текущего слайда changeStep(current_step);// меняем шаг }); function changeStep(i) { // функция смены шага $(steps).hide(); // скрываем все шаги $(steps[i]).show(); // показываем текущий } });

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

Доброго времени суток друзья! Давай с Вами рассмотрим регистрацию пользователей на PHP. Для начала давайте определим условия для нашей регистрации пользователей:

• Пароль шифруем при помощи алгоритма MD5
• Пароль будем "солить"
• Проверка на занятость Логина
• Активация пользователя письмом.
• Запись и хранение данных в СУБД MySQL

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

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

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

Рассмотрим структуру каталогов скриптов для реализации нашей регистрации с авторизацией. Нам нужно разбить скрипты на логические составляющие. Модули регистрации и авторизации мы поместив в отдельный каталог. Так же в отдельные каталоги мы поместим подключение к базе данных MySQL , файл с пользовательскими функциями, файл стилей CSS и наш шаблон HTML . Данная структура позволяет быстро ориентироваться в скриптах. Представьте себе, что у Вас большой сайт с кучей модулями и т.д. и если не будет порядка, то будет очень сложно что-то отыскать в таком бардаке.

Так как мы будем хранить все данные в СУБД MySQL , то давайте создадим не большую таблицу в которой будем хранить данные о регистрации.

Для начала нужно создать таблицу в базе данных. Таблицу назовем bez_reg где bez - это префикс таблицы, а reg название таблицы.

less/reg/?mode=auth">Войти