Пошаговая регистрация средствами jQuery. Делаем отличную систему регистрации с использованием PHP, MySQL и jQuery Пошаговая форма регистрации с использованием jQuery

В этой статье мы рассмотрим пошаговую регистрацию с использованием 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 название таблицы.

Структура таблицы: bez_reg -- -- Структура таблицы `bez_reg` -- CREATE TABLE IF NOT EXISTS `bez_reg` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` varchar(200) NOT NULL, `pass` varchar(32) NOT NULL, `salt` varchar(32) NOT NULL, `active_hex` varchar(32) NOT NULL, `status` int(1) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; Теперь создадим основные скрипты для дальнейшей работы. Файл INDEX.PHP

Файл CONFIG.PHP

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

Этот файл dbconnect.php нужно будет подключить к обработчикам форм.

Обратите внимание на переменную $address_site , здесь я указал название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.

Структура сайта

Теперь давайте разберёмся с HTML структурой нашего сайта.

Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php . Их будем подключать на всех страницах. А именно на главной (файл index.php ), на страницу с формой регистрации (файл form_register.php ) и на страницу с формой авторизации (файл form_auth.php ).

Блок с нашими ссылками, регистрация и авторизация , добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php ) а другая на страницу с формой авторизации (файл form_auth.php ).

Содержимое файла header.php:

Название нашего сайта

В итоге, главная страница, у нас выглядит так:

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

Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php .

Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.

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

Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.

И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера адрес_сайта/form_register.php , то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.

В общем, код файла form_register.php у нас получился таким:

Вы уже зарегистрированы

В браузере, страница с формой регистрации выглядит так:

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

Обратите внимание на код формы регистрации где выводится капча :

Мы в значение атрибута src для изображения, указали путь к файлу captcha.php , который генерирует данную капчу.

Посмотрим на код файла captcha.php :

Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.

Внутри функции imageTtfText() , указан путь к шрифту verdana.ttf . Так вот для корректной работы капчи, мы должны создать папку fonts , и поместить туда файл шрифта verdana.ttf . Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи .

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

Проверка email на валидность с помощью jQuery

Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента (с помощью JavaScript, jQuery), так и на стороне сервера.

Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.

Для данного поля input, мы задали тип email (type="email"), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text , и всё, наша проверка будет уже недействительна.

И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.

Для подключения библиотеки jQuery, в файле header.php между тегами , перед закрывающего тега , добавляем эту строчку:

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

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

И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.

Регистрация пользователя

Форму мы отправляем на обработку файлу register.php , через метод POST. Название данного файла обработчика, указано в значение атрибута action . А метод отправки указано в значение атрибута method .

Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages , будем записывать радостные сообщения.

Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма . Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php

Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.

Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле dbconnect.php .

Значение капчи в сессии было добавлено при её генерации, в файле captcha.php . Для напоминания покажу ещё раз этот кусок кода из файла captcha.php , где добавляется значение капчи в сессию:

Теперь приступим к самой проверке. В файле register.php , внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий " // (1) Место для следующего куска кода " пишем:

//Проверяем полученную капчу //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "

Ошибка! Вы ввели неправильную капчу

"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (2) Место для следующего куска кода }else{ //Если капча не передана либо оно является пустой exit("

Ошибка! Отсутствует проверечный код, то есть код капчи. Вы можете перейти на главную страницу .

"); }

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

Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.

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

Этот код вставляем в указанное место "// (2) Место для следующего куска кода ".

/* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/ if(isset($_POST["first_name"])){ //Обрезаем пробелы с начала и с конца строки $first_name = trim($_POST["first_name"]); //Проверяем переменную на пустоту if(!empty($first_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $first_name = htmlspecialchars($first_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваше имя

Отсутствует поле с именем

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["last_name"])){ //Обрезаем пробелы с начала и с конца строки $last_name = trim($_POST["last_name"]); if(!empty($last_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $last_name = htmlspecialchars($last_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Вашу фамилию

Отсутствует поле с фамилией

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["email"])){ //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); // (3) Место кода для проверки формата почтового адреса и его уникальности }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем папроль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш пароль

Особенную важность имеет поле email . Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.

В указанном месте "// (3) Место кода для проверки формата почтового адреса и его уникальности " добавляем следующий код:

//Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Вы ввели неправельный email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } //Проверяем нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ //Если полученный результат не равен false if(($row = $result_query->fetch_assoc()) != false){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Пользователь с таким почтовым адресом уже зарегистрирован

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка в запросе к БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); } /* закрытие выборки */ $result_query->close(); //Останавливаем скрипт exit(); } /* закрытие выборки */ $result_query->close();

И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " // (4) Место для кода добавления пользователя в БД " добавляем следующий код:

//Запрос на добавления пользователя в БД $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name."", "".$email."", "".$password."")"); if(!$result_query_insert){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка запроса на добавления пользователя в БД

Регистрация прошла успешно!!!
Теперь Вы можете авторизоваться используя Ваш логин и пароль.

"; //Отправляем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); } /* Завершение запроса */ $result_query_insert->close(); //Закрываем подключение к БД $mysqli->close();

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

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

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

Запуск сессии также происходит в файле header.php , поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.

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

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

Авторизация пользователя

В значение атрибута action у форы авторизации указан файл auth.php , это значит, что форма будет обрабатываться именно в этом файле.

И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.

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

Код файла logout.php:

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

Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery) так и на стороне сервера (с помощью языка PHP). Также мы научились реализовать процедуру выхода с сайта .

Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке .

В будущем я напишу статью где опишу . И ещё планирую написать статью где объясню, (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.

При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.

План урока (Часть 5):

Создаем HTML структуру для формы авторизации

Обрабатываем полученные данные

Выводим приветствие пользователя в шапку сайта

Понравилась статья?

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

Упрощаем формы регистрации

Итак, несколько приемов:

не нужно дублировать ввод пароля;

Чтобы облегчить пользователю жизнь (зачем это делать хорошо показано в этом от Google) лучше сделать одно поле и чекбокс, который будет снимать "маску" - всё это осуществляется с помощью небольшого javascript-кода.

// // //

1. Библиотека jQuery.

2-7. инициализация на элементе.

Б. HTML-код формы следующий:

Логин: Пароль:

5-6. видимость этих полей переключается скриптом по чекбоксу.

B. init.js

$(document).ready(function(){ $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", { text: "Настраиваемый чекбокс", name: "showmypass" }); });

Г. styles.css

Body { font-family: Arial, Helvetica, serif, sans-serif; } form { margin: 15px 0; padding: 15px; background: #ccc; color: #000; border: 1px solid #aaa; width: 500px; } form label.form { float: left; width: 120px; display: block; } form input#testpassword1, form input#testpassword { float: left; display: block; } .clear { clear: both; } div.checker { clear: both; display: block; border: 1px dotted #2d2d2d; color: #2d2d2d; background: transparent; width: 230px; font-size: 0.8em; margin: 20px 0 0 0; }

лучше сделать автозаполнение полей на основе введённых данных;

Чем меньше пользователю нужно вводить — тем лучше. Некоторые поля можно заполнить отталкиваясь от предыдущих, уже введённых, данных. Например, можно заполнять поле "город", считывая и обрабатывая значение из поля "индекс". Простой ajax-запрос и дело в шляпе. Использование AJAX для получения данных о городе и области из почтового индекса.

А. Подключаем библиотеки в ‹header›:

1. Библиотека jQuery.
2. Основной скрипт.

Б. HTML-код формы следующий:

Индекс Город Страна

1.Поле, в которое следует внести почтовый индекс.

В. zip_city.js:

Function fillcitystate(controlname){ var zipcode = trim(controlname.value); //обрезаем пробелы if(zipcode.length!=5){ //проверяем длину return false; } var zipstring = ""; xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); //отправляем запрос в php xmlhttp.onreadystatechange=function(){ //при получении результата if (xmlhttp.readyState==4){ var zipstring = xmlhttp.responseText; if (zipstring!="Error"){ var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; //устанавливаем значения для поля города document.getElementById("txtCountry").value = ziparray; //устанавливаем значения для поля страны } } } xmlhttp.send(null); } //функция обрезки пробелов function trim(s) { var l=0; var r=s.length -1; while(l < s.length && s[l] == " ") { l++; } while(r > l && s[r] == " ") { r-=1; } return s.substring(l, r+1); }

Г. zip_city.php: обработчик ajax-запроса.

Require_once("db.php"); $db_table = "zip_city"; //установка по умолчанию для возвращаемого значения $returnval = "Error"; //получения GET-параметра $zipcode = $_GET["zip"]; //предобработка if (strlen($zipcode)>5){ $zipcode = substr($zipcode, 0, 5); } if (strlen($zipcode)!=5){ die ($returnval); } //получение значений из БД $query = "SELECT * FROM {$db_table} WHERE zip="{$zipcode}""; $resultval = mysql_query($query) or die("Cannot run query:Query: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($resultval); if ($rowcount==1){ $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|".$row["country"]; //собственно, формирование успешного ответа } echo $returnval;

Д. db.php: конфигурация подключения к БД.

//настройки подключения к базе $dbhost = "localhost"; $dbusername = "root"; $dbpass = ""; $db_name = "blog_login"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("Cannot connect to MySQL database server:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Cannot open database:".mysql_error($conn));

Е. Создание таблицы БД:

CREATE TABLE IF NOT EXISTS `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NOT NULL, `city` varchar(255) NOT NULL, `country` varchar(255) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

можно сделать автоподстановку в поле ввода;

Некоторые поля предполагают ограниченный набор вводимых значений. Например, пользователь может ввести два символа, увидеть список стран, которые начинаются на эти буквы и легко выбрать нужную. К тому же, он уж точно не совершит ошибок в названии родины. AJAX Auto-Complete под jQuery .

А. Подключаем в ‹header›:

1. Библиотека jQuery.
2. Скрипт автозаполнения для jQuery .
3. Основной скрипт.

Б. HTML-код формы следующий:

Страна

1. Поле, в которое нужно начинать вводить название страны.

В. init.js:

Var options, a; jQuery(function(){ options = { serviceUrl:"./php/autocomplete.php" }; /*указываем адрес файла-обработчика*/ a = $("#query").autocomplete(options); /*назначаем автозаполнение объекту с id="query"*/ });

Г. autocomplete.php: обработчик ajax-запроса

If(isset($_GET["query"]) && (!empty($_GET["query"]))){ require_once("db.php"); $db_table = "system_countries"; //название таблицы БД $query = $_GET["query"]; //запрос из поля формы $variants = ""; $q = "SELECT `name_en` FROM `{$db_table}` WHERE `name_en` REGEXP "^{$query}(.*)" GROUP BY `name_en`"; /*ищем по первым введённым символам*/ $res = mysql_query($q) or die("Cannot run query:Query: ".$q."".mysql_error($conn)); /*получаем результат запроса*/ if(mysql_num_rows($res)>0){ while($row = mysql_fetch_row($res)){ $variants = """.$row."""; /*заполняем массив вариантов*/ } $variants = implode(",",$variants); /*набиваем все варианты через запятую в строку*/ /*формируем ответ*/ $request = "{ query:"".$query."", suggestions:[".$variants."] }"; echo $request; } }

Д. Создание таблицы БД:

DROP TABLE IF EXISTS `system_countries`; CREATE TABLE `system_countries` (`id` int(11) NOT NULL auto_increment, `name_en` char(128) NOT NULL, `name_ru` char(128) default NULL, `code` char(2) NOT NULL, `_order` int(3) default "0", `independent` tinyint(1) default "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Ж. styles.css:

Autocomplete-w1 { background:url(/autocomplete/img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; } .autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; } .autocomplete .selected { background:#F0F0F0; } .autocomplete div { padding:2px 5px; white-space:nowrap; } .autocomplete strong { font-weight:normal; color:#3399FF; }

зачем вводить данные дважды?

Во многих интернет-магазинах используют многошаговые формы заказа с полями адресов оплаты и доставки. Зачастую их значения совпадают. Почему бы не предложить пользователю в один клик продублировать значения уже введённых полей? Программно приём прост и вы можете применять его в разных случаях, где подразумевается вероятность повторения значений.

А. Подключаем в ‹header›:

1.Библиотека jQuery.

2. jQuery Select Plugin.

3. основной скрипт.

Б. HTML-код форм следующий:

Имя: Фамилия: Email: Страна: Выбор США Канада Копировать Данные доставки Имя: Фамилия: Email: Страна: Выбор США Канада

Данные оплаты.

14. Чекбокс копирования.

В. init.js:

//при загрузке страницы $(document).ready(function() { //когда чекбокс активирован или деактивирован $("#copyaddress").click(function() { // если активирован if ($("#copyaddress").is(":checked")) { //для каждого поля ввода $("#shipping_fields input", ":visible", document.body).each(function(i) { //копирование значений из полей оплаты //в соответствующие поля доставки $(this).val($("#billing_fields input").eq(i).val()); }); //не работает с выпадающими меню, поэтому применем функции плагина var bcountry = $("#bcountry").val(); $("#scountry").selectOptions(bcountry); } else { //если деактивирован чекбокс //для каждого поля ввода $("#shipping_fields input", ":visible", document.body).each(function(i) { //очищаем поля данных о доставке $(this).val(""); }); $("#scountry").selectOptions(""); } }); });

Кажется, люди устали читать капчу:)

Вам ведь и самим, наверное, надоело читать неразборчивые символы с капчи и потом их вводить. Давайте помилуем пользователей, но при этом не пропустим ботов. Для этого можно прибегнуть к нескольким приёмам, рассмотрим один из них. Подход Honeypot Captcha — создаём поле на форме, невидимое пользователю, но видимое боту. Проверив это значение, мы сможем поймать нерадивых спамеров, при этом не создавая сложностей Настоящим Людям. Влияние капчи на уровень конверсии .

А. HTML-код формы следующий:

Имя Фамилия E-Mail Скрытое поле. Если заполнили его, то вы - бот

Б. добавить следующий js:

Function check() { if(document.form_find.body.value){ console.log("CAUTION!!! BOT ON PAGE!!!"); } }

Упрощаем формы авторизации

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

Оставляем пользователя на странице, где он авторизовался;

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

А. Подключаем библиотеки в ‹header›:

3. Основной скрипт.

Б. HTML-код формы следующий:

Логин Пароль Запомни меня Для авторизации введите логин: login и пароль: password

4. Кнопка открытия формы.

7-22. Сама форма.

19. Чекбокс, который заставляет устанавливать куки на очень долго.

23. Место для сообщения.

В. jqeasy.dropdown.js:

$(document).ready(function() { /*основная функция*/ $(".btnsignin").click(function(e) { /*при нажатии на кнопку "Войти"*/ e.preventDefault(); $("#frmsignin").toggle("fast",function() { /*переключает видимость формы*/ $("#username").focus(); /*переводит курсор ввода в поле логина*/ }); $(this).toggleClass("btnsigninon"); /*переключает класс на кнопке для изменения вида*/ $("#msg").empty(); }); $(".btnsignin").mouseup(function() { return false; }); $(document).mouseup(function(e) { /*при отжатии мыши*/ if($(e.target).parents("#frmsignin").length==0) { /*не на одном из объектов формы*/ $(".btnsignin").removeClass("btnsigninon"); /*убираем форму и возвращаем как было*/ $("#frmsignin").hide("fast"); }; }); $("#signin").ajaxForm({ beforeSubmit: validate, /*сначала проверка*/ success: function(data) { /*при получении ответа от обработчика*/ if (data=="OK") { /*если пришло ОК*/ $("#frmsignin").text("Signed in!"); /*отправляем текстовое уведомление*/ $("#frmsignin").delay(800).fadeOut(400); $("#signbtn").html("Выйти"); /*изменяем кнопку для выхода*/ } else { $("#msg").html(data); $("#username").focus(); } } }); }); function validate(formData, jqForm, options) { /*процедура валидации введённых данных, содержит обработку вывода ошибки*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim(form.password.value); var unReg = /^{3,20}$/; var pwReg = /^{6,20}$/; var hasError = false; var errmsg = ""; if (!un) { errmsg = " Введите логин:

"; hasError = true; } else if(!unReg.test(un)) { errmsg = " Логин должен быть длиной 3 - 20 символов (a-z, 0-9, _). "; hasError = true; } if (!pw) { errmsg += " Введите пароль "; hasError = true; } else if(!pwReg.test(pw)) { errmsg += " Пароль должен быть длиной 6 - 20 символов (a-z, 0-9, !, @, #, $, %, &, *, (,), _). "; hasError = true; } if (!hasError) { $("#msg").html(" запрос... "); } else { $("#msg").html(errmsg); return false; } }

Г. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="password")){ echo "OK"; }else{ echo "Неверный логин или пароль"; }

Д. style.css:

Body{ padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; } #container { width:700px; /*margin:0 auto;*/ padding:13px 10px; border:1px solid #999; } a.btnsignin, a.btnsignout { background:#999; padding:5px 8px; color:#fff; text-decoration:none; font-weight:bold; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } a.btnsignin:hover, a.btnsignout:hover { background:#666; } a.btnsigninon { background:#ccc!important; color:#666!important; outline:none; } #frmsignin { display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; *margin-top: 5px; font-size:11px; -moz-border-radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; -webkit-border-top-left-radius:0; border-radius:5px; border-top-left-radius:0; z-index:100; } #frmsignin input, #frmsignin input { display:block; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #666; margin:0 0 5px; padding:5px; width:203px; } #frmsignin p { margin:0; } #frmsignin label { font-weight:normal; } #submitbtn { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#333; border:1px solid #fff; color:#fff; padding:5px 8px; margin:0 5px 0 0; font-weight:bold; } #submitbtn:hover, #submitbtn:focus { border:1px solid #000; cursor:pointer; } .submit { padding-top:5px; } #msg { color:#F00; } #msg img { margin-bottom:-3px; } #msg p { margin:5px 0; } #msg p:last-child { margin-bottom:0px; } h1{ margin:0 auto; }

Модальное окно концентрирует всё внимание на себе и при этом позволяет поместить на форму дополнительную информацию или описание.

А. Подключаем библиотеки в ‹header›:

4. Основной скрипт.

6. Основные стили.

7. Базовые стили для модального окна.

Б. HTML-код формы следующий:

Войти | Личный кабинет Войти E-Mail Пароль Обработка...

2. Кнопка открытия формы.

6-27. Модальное окно.

8-11. Заголовок модального окна.

В. init.js:

// Предзагрузка img1 = new Image(16, 16); img1.src="./img/spinner.gif"; img2 = new Image(220, 19); img2.src="./img/ajax-loader.gif"; // Когда DOM готов $(document).ready(function(){ // Запускаем MODAL BOX если нажата ссылка входа $("#login_link").click(function(){ $("#login_form").modal(); }); // Когда форма отправлена $("#status > form").submit(function(){ // Прячем кнопку "Submit" $("#submit").hide(); // Показываем крутящийся gif $("#ajax_loading").show(); // "this" ссылается на подтверждённую форму var str = $(this).serialize(); // -- Начало вызова AJAX -- $.ajax({ type: "POST", url: "php/do-login.php", // Информация авторизации отправляется сюда data: str, success: function(msg){ $("#status").ajaxComplete(function(event, request, settings){ // Показать кнопку "Submit" $("#submit").show(); // Спрятать крутящийся gif $("#ajax_loading").hide(); if(msg == "OK") // LOGIN OK? { var login_response = " " + " " + " " + "" + " " + " "+ "Вы успешно авторизовались! Пожалуйста, подождите перенаправления... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container").css("height","120px"); $(this).html(login_response); // Ссылается на "status" // После 3 секунд редирект setTimeout("go_to_private_page()", 3000); } else // ошибка? { var login_response = msg; $("#login_response").html(login_response); } }); } }); // -- Конец вызова AJAX -- return false; }); }); function go_to_private_page() { window.location = "php/private.php"; // Личная страница пользователя }

Г. do-login.php: обработчик ajax-запроса

$config = array(); $config["email"] = "[email protected]"; $config["password"] = "demo123"; error_reporting(E_ALL ^ E_NOTICE); //отобразить все ошибки, кроме notice // Инициализация сессии session_id(); session_start(); header("Cache-control: private"); // IE 6 FIX if($_POST["action"] == "user_login") { $post_email = $_POST["email"]; $post_password = $_POST["password"]; // проверяем логин и пароль if($post_email == $config["email"] && $post_password == $config["password"]) { // Всё правильно? регистрируем сессию и перенаправляем пользователя к его "Личному кабинету" $username = $post_email; $_SESSION["username"] = $username; if($_POST["remember_me"]) { // устанавливаем cookies на месяц setcookie ("remember_me", true, (time() + TIME_DIFF) + (3600 * 24 * 30)); setcookie ("info", $user_id.",".md5($password), (time() + TIME_DIFF) + (3600 * 24 * 30)); } echo "OK"; // отсылаем ответ успеха для "init.js" } else { $auth_error = " Данные авторизации неверные. "; echo $auth_error; } }

Г. private.php: страница, к которой доступ только после авторизации.

Include "config.php";//если есть соотвествующие куки, то устанавливается сессия, что пользователь авторизован // Проверка, авторизован ли пользователь if(!isSet($_SESSION["username"])) { header("Location: /modal.html"); exit; } echo " Личная страница Приветствую, "; echo $_SESSION["username"]." | Выйти Это ваша личная страница ";

Д. config.php:

Error_reporting(E_ALL ^ E_NOTICE); session_start(); // Старт сессии header("Cache-control: private"); // IE 6 FIX // always modified header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // HTTP/1.0 header("Pragma: no-cache"); // ---------- LOGIN INFO ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 дней if(!$_SESSION["username"]) { include_once "autologin.php"; }

E. autologin.php:

If(isSet($cookie_name)) { // Check if the cookie exists if(isSet($_COOKIE[$cookie_name])) { parse_str($_COOKIE[$cookie_name]); // Make a verification if(($usr == $config_username) && ($hash == md5($config_password))) { // Register the session $_SESSION["username"] = $config_username; } } }

З. logout.php:

Include "config.php"; if(isSet($_SESSION["username"])) { unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) { // remove "site_auth" cookie setcookie ($cookie_name, "", time() - $cookie_time); } header("Location: modal.html"); exit; }

К. stylesheet.css:

Html, body { padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; } /* Label */ label { width: 80px; padding-left: 20px; margin: 5px; float: left; text-align: left; } /* Input text */ input { margin: 5px; padding: 0px; float: left; border: 1px solid #cdcdcd; background-color: white; -moz-border-radius: 2px; } br { clear: left; } .textbox { border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 90% Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } h1 { font-size: 17px; } div { font-family: Verdana; font-size: 11px; } /* "Login" Button */ #submit { margin: 5px; padding: 0px; float: left; width: 50px; background-color: white; } #notification_error { color: red; height: auto; padding: 4px; text-align: center; } #login_response { overflow: auto; } #ajax_loading { display: none; font-size: 12px; font-family: Tahoma; } #logged_in { padding: 5px; margin: 23px 0 100px 43px; padding: 5px; text-align: center; width: 400px; } #status { margin-top: 20px; width: 310px; }

Л. basic.css:

/* Overlay */ #simplemodal-overlay {background-color:#aaaaaa; cursor:wait;} /* Container */ #simplemodal-container {height:180px; width:300px; background-color:#fff; border:1px solid #000000; -moz-border-radius: 5px; } #simplemodal-container a.modalCloseImg {background:url("img/x.png") no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; left:-18px; cursor:pointer;} #simplemodal-container #basicModalContent {padding:8px;}

Ставим курсор в первое поле формы.

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

А. HTML-код формы следующий:

Второе поле Первое поле Третее поле

4. в это поле будет установлен фокус Б. добавить следующий js:

Function setFocus() { /*устанавливаем фокус на нужное поле*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); }

Заключение

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