Покрокова реєстрація засобами jQuery. Робимо відмінну систему реєстрації з використанням PHP, MySQL та jQuery Jquery форми реєстрації та авторизації

Все відбувається під керуванням PHP, а дані зберігаються у базі даних MySQL.

У системі використовується відмінна панель, що вислизає, розроблена Web-kreation.

Крок 1 - MySQL

Спочатку нам треба створити таблицю, яка міститиме всі дані про зареєстрованих користувачів. Код запиту доступний у файлі table.sqlв архіві із вихідними джерелами.

table.sql

--
- Структура таблиці `tz_members`
--
CREATE TABLE `tz_members` (
`id` int(11) NOT NULL auto_increment,
`usr` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`pass` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`email` varchar(255) collate utf8_unicode_ci NOT NULL default "",
`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default "",
`dt` datetime NOT NULL default "0000-00-00 00:00:00",
PRIMARY KEY (`id`),
UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Ми визначаємо id як integer з опцією auto_increment- він автоматично призначатиметься для кожного нового зареєстрованого користувача. Також usrвизначається як unique key- У таблиці не допускається існування двох записів з однаковим ім'ям користувача.

Пізніше ми будемо використовувати ці властивості в процесі реєстрації, коли вводиться ім'я користувача.

Після створення таблиці потрібно заповнити змінні для з'єднання з вашою базою даних у файлі connect.php, щоб можна було запустити код на сервері.

Крок 2 - XHTML

Спочатку нам потрібно вбудувати форму Web-creation в нашу сторінку.

demo.php

Панель, що вислизає, jQuery

Рішення щодо реєстрації/входу користувачів на сайт

if(!$_SESSION["id"]):
// Якщо Ви ще не зареєстровані
?>

else:
// Якщо ви увійшли до системи
?>

Для зареєстрованих користувачів

Демонстраційні дані

Перейти на сторінку користувача

Вийти з системи

endif;
// Закриваємо конструкцію IF-ELSE
?>

У кількох місцях у коді зустрічаються оператори PHP, які перевіряють чи визначено $_SESSION["usr"]або $_SESSION["id"]. Вони мають значення true тільки якщо відвідувач сторінки зареєстрований користувач, що дозволяє нам показувати прихований контент для зареєстрованих відвідувачів.

Після форми ми розміщуємо решту вмісту сторінки.

Панель, що вислизає, jQuery

Просте управління реєстрацією з використанням PHP та jQuery

Якийсь текст...

У коді немає нічого особливого.

Крок 3 - PHP

Тепер конвертуватимемо форму в завершену систему реєстрації та входу. Для того, щоб вирішити поставлене завдання, потрібно буде дещо, крім звичайного коду PHP. Весь код поділено на дві частини.

Якщо Ви плануєте щось додати, то найкраще розділити все на кілька окремих файлів і включати їх у міру потреби. Такий підхід допомагає розробляти великі проектиі при цьому повторно використовувати код у різних частинах сайту.

Ось як це реалізовано тут.

demo.php

define("INCLUDE_CHECK", true);
require "connect.php";
require "functions.php";
// Дані два файли можуть бути включені лише якщо визначено INCLUDE_CHECK
session_name("tzLogin");
// Запуск сесії
session_set_cookie_params(2*7*24*60*60);
// Визначає період життя кукі на два тижні
session_start();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Якщо ви увійшли до системи, але у вас немає куки tzRemember (рестарт браузера)
// і ви не відзначили чекбокс Запам'ятай мене:
$_SESSION = array();
session_destroy();
// Видаляємо сесію
}
if(isset($_GET["logoff"]))
{
$_SESSION = array();
session_destroy();
header("Location: demo.php");
exit;
}
if($_POST["submit"]=="Login")
{
// Перевіряємо, що запит надійшов із форми Входу
$err = array();
// Зберігаємо помилку
if(!$_POST["username"] || !$_POST["password"])
$err = "Всі поля мають бути заповнені!";
if(!count($err))
{

$_POST["password"] = mysql_real_escape_string($_POST["password"]);
$_POST["rememberMe"] = (int)$_POST["rememberMe"];
// Готуємо всі дані
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="($_POST["username"])" AND pass="".md5($_POST["password"]).""")) ;
if($row["usr"])
{
// Якщо все гаразд, то входимо до системи
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $row["id"];
$_SESSION["rememberMe"] = $_POST["rememberMe"];
// Зберігаємо деякі дані у сесії
setcookie("tzRemember", $_POST["rememberMe"]);
// Створюємо куки tzRemember
}
else $err="Помилкове ім'я користувача або пароль!";
}
if($err)
$_SESSION["msg"]["login-err"] = implode("
", $ err);
// Зберігаємо повідомлення про помилку у сесії
header("Location: demo.php");
exit;
}

Тут кукі tzRememberпостає як контрольний елемент визначення, що треба забезпечити вихід із системи користувачеві, який відзначив чекбокс “Запам'ятати мене”. Якщо кукі відсутня (внаслідок рестарту браузера) і відвідувач не відзначив опцію "запам'ятати мене", ми видаляємо сесію.

Сесія сама по собі залишатиметься активною протягом двох тижнів (так встановлено у параметрі session_set_cookie_params).

А ось і друга частина demo.php.

Else if($_POST["submit"]=="Register")
{
// Якщо запит надіслано з форми Реєстрації
$err = array();
if(strlen($_POST["username"]))<4 || strlen($_POST["username"])>32)
{
$err="Ім'я користувача має бути довжиною від 3 до 32 символів!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["username"]))
{
$err="Ім'я користувача містить неприпустимі символи!";
}
if(!checkEmail($_POST["email"]))
{
$err="Ваша email адреса неправильна!";
}
if(!count($err))
{
// Якщо немає помилок
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Згенеруємо випадковий пароль
$_POST["email"] = mysql_real_escape_string($_POST["email"]);
$_POST["username"] = mysql_real_escape_string($_POST["username"]);
// готуємо дані
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VALUES(
"".$_POST["username"]."",
"".md5($pass)."",
"".$_POST["email"]."",
"".$_SERVER["REMOTE_ADDR"]."",
NOW()
)");
if(mysql_affected_rows($link)==1)
{
send_mail(" [email protected]сайт",
$_POST["email"],
"Демонстрація системи реєстрації - генерація пароля",
"Ваш пароль: ".$pass);
$_SESSION["msg"]["reg-success"]="Ми надіслали вам email з вашим новим паролем!";
}
else $err="Це ім'я користувача вже використовується!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
", $ err);
}
header("Location: demo.php");
exit;
}
$script = "";
if($_SESSION["msg"])
{
// Скрипт показує вислизну панель на сторінці завантаження
$script = "
";
}

Зберігаємо всі певні помилки в масиві $err, який пізніше присвоюється змінною $_SESSION. Таким чином зберігається доступ до нього після перенаправлення браузера.

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

Ми використовуємо функцію header, щоб запобігти помилці за допомогою перенаправлення браузера на ту саму сторінку. Таким чином оновлюється вигляд сторінки без того, що браузер розпізнає це як запит із форми. В результаті відбувається оновлення сторінки і немає пересилання даних.

Але оскільки ми використовуємо $_SESSIONДля зберігання всіх виявлених помилок, то дуже важливо, щоб ми скидали всі змінні, як тільки помилка буде показана користувачеві. В іншому випадку вона відображатиметься на кожному вигляді сторінки.

Також використовується додатковий скрипт, який показує панель на сторінці завантаження, тому повідомлення видно користувачеві.

Крок 4 - CSS

Панель, що вислизає, використовує свій власний файл зі стилями. Таким чином, нам залишається тільки створити стиль для нашої сторінки.

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label(
/* Скидання правил */
margin:0px;
padding:0px;
}
body(
color:#555555;
font-size:13px;
background: #eeeeee;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
}
h1(
font-size:28px;
font-weight:bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing:1px;
}
h2(
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space: wrap;
margin-top:4px;
color:#888888;
}
#main p(
padding-bottom:8px;
}
.clear(
clear:both;
}
#main(
width:800px;
/* Центруємо по середині сторінки */
margin:60px auto;
}
.container(
margin-top:20px;
background: #FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Закруглені кути */
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.err(
color:red;
}
.success(
color:#00CC00;
}
a, a:visited (
color:#00BBFF;
text-decoration: none;
outline: none;
}
a:hover(
text-decoration: underline;
}
.tutorial-info(
text-align:center;
padding:10px;
}

Крок 5 - jQuery

Висмоктуюча панель має свій файл jQuery.

demo.php

У першому рядку включається бібліотека jQuery із CDN Google. Потім слід латка для IE6 PNG для елементів прозорості. Потім вмикається скрипт панелі

Змінна $script показує панель на сторінці завантаження за потреби.

Якщо вам необхідно зробити один із розділів свого сайту доступним обмеженому, але невизначеному колу осіб, найпростіше це зробити за допомогою реєстрації та авторизації користувачів. Є багато способів авторизації користувачів. Можна використовувати інструменти веб-сервера та інструменти мови програмування. Ми поговоримо про випадок, коли використовуються сесії 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;

Якщо все зроблено правильно, у вас у броузері має бути таке:

Звичайно ж, у нас немає поки жодного зареєстрованого користувача, і щоб авторизуватися, потрібно зареєструватися. Давайте зробимо форму реєстрації.

Реєстрація користувачів

Ви, напевно, звернули увагу на те, що в HTML-коді присутні змінні PHP. Вони є вмістом атрибутів текстових полів форм, вміст контейнерів, призначених для виведення помилок. Але ми не ініціалізували ці змінні. Давайте зробимо це.

Реєстрація користувачів

Вкажіть ваш логін: " />

В імені користувача можуть бути лише символи латинського алфавіту, цифри, символи "_", "-", ".". Довжина імені користувача повинна бути не коротшою за 4 символи і не довшою за 16 символів

Напишіть пароль:

У паролі можна використовувати лише символи латинського алфавіту, цифри, символи "_", "!", "(", ")". Пароль повинен бути не коротшим за 6 символів і не довшим за 16 символів

Повторіть введений пароль:

Повторіть введений пароль

В атрибуті action тега form не вказано параметр. У цьому випадку при надсиланні даних форми оброблятися вони будуть у тому ж сценарії, з якого вони і вирушали. Значить, нам потрібно написати код, який обробляє дані форми. Але спочатку обговоримо алгоритм їх обробки.

Нам потрібно, щоб поля логіну та паролю не були порожніми. Потім потрібно перевірити логін на відповідність вимогам. Пароль також повинен відповідати описаним вимогам, а повторно вказаний пароль повинен з ним збігатися і, крім того, вони мають бути ідентичними. Якщо якась із цих умов не виконується, обробка даних форми має бути припинена, до масиву повідомлень про помилку має бути записано відповідне сповіщення, і воно має бути відображене користувачеві. Для зручності користувача ми збережемо введений ним логін (якщо він його вказав), записавши його значення масив $fields .

Якщо все нормально, у вікні вашого броузера звернувшись до документа registration.php, ви повинні побачити приблизно таку форму:

Тепер, скажімо, користувач натиснув на кнопку реєстрації, не заповнив поля форми. Відповідно до нашого алгоритму, логін та пароль не можуть бути порожніми. Якщо ця умова не виконується, реєстрація неможлива. Ми пам'ятаємо, що обробка даних форми відбувається в поточному сценарії. Значить, нам потрібно змінити його код, додавши відповідні перевірки. Відразу ж обмовимо й такі перевірки. Якщо введено і логін, і пароль, потрібно перевірити їхню відповідність зазначеним вимогам. Для перевірки логіну і пароля ми створимо функції користувача у файлі functions.php.

/** * functions.php * Файл з функціями користувача */ // Підключаємо файл з параметрами підключення до СУБД require_once("database.php"); // Перевірка імені користувача function checkLogin($str) ( // Ініціалізуємо змінну з можливим повідомленням про помилку $error = ""; // Якщо немає рядка з логіном, повертаємо повідомлення про помилку if(!$str) ( $error = " Ви не ввели ім'я користувача"; return $error; ) /** * Перевіряємо ім'я користувача за допомогою регулярних виразів бути символи "_", "-", "." */ $pattern = "/^[-_.a-z\d](4,16)$/i"; $result = preg_match($pattern, $str) ; // Якщо перевірка не пройшла, повертаємо повідомлення про помилку if(!$result) ( $error = "Неприпустимі символи в імені користувача або ім'я користувача занадто коротке (довге)"; return $error; ) // Якщо все нормально, повернімо значення true return true; ) // Перевірка пароля користувача function checkPassword($str) ( // Ініціалізуємо змінну з можливим повідомленням про помилку $error = ""; // Якщо відсутня ує рядок з логіном, повертаємо повідомлення про помилку if(!$str) ( $error = "Ви не ввели пароль"; return $error; ) /** * Перевіряємо пароль користувача за допомогою регулярних виразів * Пароль повинен бути не коротшим 6, не довшим за 16 символів * У ньому повинні бути символи латинського алфавіту, цифри, * в ньому можуть бути символи "_", "!", " (", ")" */ $pattern = "/^[_!)(.a-z\d](6,16)$/i"; $result = preg_match($pattern, $str); // Якщо перевірка не пройшла, повертаємо повідомлення про помилку if(!$result) ( $error = "Неприпустимі символи в паролі користувача або пароль занадто короткий (довгий)"; return $error; ) // Якщо все нормально, повернемо значення true return true; )

Тепер нам потрібно змінити файл registration.php, щоб задіяти оголошені функції. До сценарію ми додамо умову, яка перевіряє натискання кнопки реєстрації. Усередині цієї умови запускається перевірка логіну та паролів. У випадку, якщо якась із перевірок завершується невдачею, ми знову відображаємо форму і виводимо повідомлення про помилку. Якщо помилок немає, ми реєструємо користувача, форму реєстрації при цьому вже не відображаємо, повідомляємо користувача про успішну реєстрацію, і за допомогою функції header() переадресовуємо його до форми авторизації.

Ви успішно зареєструвалися у системі. Зараз ви будете переадресовані до сторінки авторизації. Якщо цього не сталося, перейдіть на неї за прямим посиланням.

"; header("Refresh: 5; URL = login.php"); ) // Інакше повідомляємо користувачеві про помилку else ( $errors["full_error"] = $reg; ) ) ) ?> Реєстрація користувачів

Вкажіть ваш логін: " />

Напишіть пароль:

Повторіть введений пароль:

Повторіть введений пароль

У скрипті ви мали помітити ще одну нову функцію — registration() . А ми її ще не оголошували. Давайте зробимо це.

// Функція реєстрації користувача function registration($login, $password) ( // Ініціалізуємо змінну з можливим повідомленням про помилку $error = ""; // Якщо немає рядка з логіном, повертаємо повідомлення про помилку if(!$login) ( $ error = "Не вказано логін"; // Пишемо рядок запиту $sql = "SELECT `id` FROM `users` WHERE `login`="" . $login . """; // Робимо запит до бази $query = mysql_query($sql) or die( ""); // Дивимося на кількість користувачів з таким логіном, якщо є хоч один, // повертаємо повідомлення про помилку if(mysql_num_rows($query) > 0) ( $error = "Користувач із зазначеним логіном вже зареєстрований"; return $ error; ) // Якщо такого користувача немає, реєструємо його // Пишемо рядок запиту $sql = "INSERT INTO `users` (`id`,`login`,`password`) VALUES (NULL, "" . $login . " ","". $password . "")"; // Робимо запит до бази $query = mysql_query($sql) or die("

Неможливо додати користувача: " . mysql_error() . ". Помилка сталася у рядку " . __LINE__ . "

"); // Не забуваємо відключитися від СУБД mysql_close(); // Повертаємо значення true, що повідомляє про успішну реєстрацію користувача return true; )

Якщо все нормально, ваш користувач буде зареєстрований. Можете потестувати форму. Спробуйте зареєструвати користувачів із однаковими логінами. Після успішної реєстрації користувач буде переадресований до форми авторизації. Раніше ми просто створили розмітку для відображення цієї форми. Так як в її атрибуті action не вказано жодного параметра, дані, надіслані формою, будуть оброблятися в цьому сценарії. Значить, нам потрібно написати код для обробки, і додати його в документ login.php.

Авторизація користувачів

;">

Якщо ви не зареєстровані у системі, зареєструйтесь.

Ви, мабуть, помітили, що у скрипті авторизації у нас з'явилася ще одна незнайома функція authorization() . Ця функція повинна авторизувати користувача, попередньо перевіривши, чи існує в базі даних зареєстрований користувач із таким логіном та паролем. Якщо такого користувача не буде знайдено, авторизація буде перервана, на екран буде виведено повідомлення про невдачу. У разі успішної перевірки функція authorization() запустить сесію, і запише в неї значення логіну та пароля користувача, повідомить сценарій про успішність авторизації, і сценарій перенаправить користувача на захищену сторінку ресурсу.

/** * Функція авторизації користувача. * Авторизація користувачів у нас буде здійснюватися * за допомогою сесій PHP. */ function authorization($login, $password) ( // Ініціалізуємо змінну з можливим повідомленням про помилку $error = ""; // Якщо немає рядка з логіном, повертаємо повідомлення про помилку if(!$login) ( $error = " Не вказано логін"; return $error; ) elseif(!$password) ( $error = "Не вказано пароль"; return $error; ) // Перевіряємо, чи вже не зареєстрований користувач // Підключаємося до СУБД connect(); // Нам потрібно перевірити, чи є такий користувач серед зареєстрованих // Складаємо рядок запиту $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password ."""; // Виконуємо запит $query = mysql_query($sql) or die("

Неможливо виконати запит: " . mysql_error() . ". Помилка сталася у рядку " . __LINE__ . "

"); // Якщо користувача з такими даними немає, повертаємо повідомлення про помилку if(mysql_num_rows($query) == 0) ( $error = "Користувач із зазначеними даними не зареєстрований"; return $error; ) // Якщо користувач існує , запускаємо сесію session_start(); // І записуємо в неї логін і пароль користувача // Для цього ми використовуємо суперглобальний масив $_SESSION $_SESSION["login"] = $login; $_SESSION["password"] = $password; / Не забуваємо закривати з'єднання з базою даних mysql_close(); // Повертаємо true для повідомлення про успішну авторизацію користувача return true;

Коли користувач потрапляє на захищену сторінку, перевірте коректність даних про його авторизацію. Для цього нам знадобиться ще одна функція користувача. Назвемо її checkAuth(). Її завданням буде звіряння даних авторизації користувача з тими, що зберігаються у нашій базі. Якщо дані не збігатимуться, користувач буде перенаправлений на сторінку авторизації.

Function checkAuth($login, $password) ( // Якщо немає логіна або пароля, повертаємо false if(!$login || !$password) return false; // Перевіряємо, чи зареєстрований такий користувач // Підключаємося до СУБД connect(); // Складаємо рядок запиту $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."""; // Виконуємо запит $ query = mysql_query($sql) or die("

Неможливо виконати запит: " . mysql_error() . ". Помилка сталася у рядку " . __LINE__ . "

// Якщо користувача з такими даними немає, повертаємо false; if(mysql_num_rows($query) == 0) ( return false; ) // Не забуваємо закривати з'єднання з базою даних mysql_close(); // Інакше повертаємо true return true; )

Тепер, коли користувач потрапив до захищеної сторінки, ми повинні викликати функцію перевірки даних авторизації. Сценарій виклику та перевірки ми помістимо в окремий файл checkAuth.php та підключатимемо його до тих сторінок, які будуть закритими для спільного доступу.

/** * Скрипт перевірки авторизації користувачів */ // Запускаємо сесію, з якої будемо отримувати логін і пароль // користувачів, що авторизувалися session_start(); // Підключаємо файл з функціями користувача require_once("functions.php"); /** * Щоб визначити чи авторизований користувач, нам потрібно * перевірити чи існують у базі даних записи для його логіна * та пароля. Для цього скористаємося функцією користувача * перевірки коректності даних авторизованого користувача. * Якщо ця функція поверне false, то авторизації немає. * За відсутності авторизації ми просто переадресовуємо користувача до сторінки авторизації. */ // Якщо в сесії присутні дані і про логіну, і про пароль, // перевіряємо їх if(isset($_SESSION["login"]) && $_SESSION["login"] && isset($_SESSION["password" ]) && $_SESSION["password"]) ( // Якщо перевірка існуючих даних завершується невдачею if(!checkAuth($_SESSION["login"], $_SESSION["password"])) ( // Переадресовуємо користувача на сторінку авторизації header("location: login.php"); // Припиняємо виконання скрипту exit; ) ) // Якщо даних або про логіну, або про пароль користувача немає, // вважаємо що авторизації немає, переадресовуємо користувача // на сторінку авторизації else ( header("location: login.php"); // Припиняємо виконання сценарію exit;

А тепер давайте створимо код нашої захищеної сторінки. Він буде досить простий.

Авторизація та реєстрація користувачів

Успішна авторизація.

Ви отримали доступ до захищеної сторінки. Ви можете вийти із системи.

Як бачите, у захищеному документі ми підключаємо лише один файл – checkAuth.php. Інші файли підключаються вже в інших сценаріях. Тому наш код не виглядає громіздким. Реєстрацію та авторизацію користувачів ми організували. Тепер необхідно дозволити користувачам виходити із системи. Для цього ми створимо сценарій у файлі logout.php.

/** * Скрипт виходу користувача із системи. Оскільки користувачі авторизуються через сесії, їх логін і пароль зберігаються в суперглобаному масиві $_SESSION. Щоб здійснити * вихід із системи, досить просто знищити значення * масиву $_SESSION["login"] і $_SESSION["password"], після чого ми переадресовуємо користувача до сторінки авторизації */ // Обов'язково запускаємо сесію session_start(); unset($_SESSION["login"]); unset($_SESSION["password"]); header("location: login.php");

Скрипт реєстрації, авторизації та перевірки користувачів готовий. Ви можете використовувати його у себе, доповнювати, змінювати під ваші потреби. Якщо у вас будуть питання, можете задавати їх у коментарях. Ви можете завантажити всі файли, про які тут йшлося, упаковані в один архів .

P.S. Я в курсі, що краще писати об'єктно-орієнтований код, знаю, що передавати та зберігати пароль у відкритому вигляді не варто, що інформацію, що заноситься до бази даних, необхідно попередньо перевіряти. Я знаю. Про це я тут не говоритиму.

Ми вирішили доповнити деякими прикладами , опубліковану на хабрі, щоб ви дізналися про деякі "інноваційні техніки" поліпшення форм реєстрації та авторизації.

Спрощуємо форми реєстрації

Отже, кілька прийомів:

не потрібно дублювати введення пароля;

Щоб полегшити користувачеві життя (навіщо це робити добре показано в цьому від 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;

краще зробити автозаповнення полів на основі введених даних;

Чим менше користувачеві потрібно вводити, тим краще. Деякі поля можна заповнити, відштовхуючись від попередніх, вже введених даних. Наприклад, можна заповнювати поле "місто", зчитуючи та обробляючи значення з поля "індекс". Простий 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) або die("Cannot connect to MySQL database server:".mysql_error()); $db = mysql_select_db($db_name, $conn) або 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`"; ); варіантів*/ ) $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; 6px;/* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete. ) .autocomplete strong ( font-weight:normal; color:#3399FF; )

навіщо вводити дані двічі?

У багатьох інтернет-магазинах використовують багатокрокові форми замовлення з полями адрес оплати та доставки. Найчастіше їх значення збігаються. Чому б не запропонувати користувачеві в один клік продублювати значення введених полів? Програмно прийом простий і ви можете застосовувати його у різних випадках, де мається на увазі ймовірність повторення значень.

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

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

2. jQuery Select Plugin.

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

Б. HTML-код форм наступний:

Дані оплати.

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-код форми наступний:

Б. додати наступний 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"). ( return false; )); *не на одному з об'єктів форми*/ $(".btnsignin").removeClass("btnsigninon"); /*прибираємо форму і повертаємо як було*/ $("#frmsignin"). ; )); ( /*якщо прийшло ОК*/ $("#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 = ""; = " Введіть логін:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Логін повинен бути довжиною 3 - 20 символів (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += " Введіть пароль "; , #, $, %, &, *, (,), _)."; 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; -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover ( background:#666; ) a.btnsigninon ( background:#ccc!important; none; ) #frmsignin ( display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; -radius:5px;-moz-border-radius-topleft:0;-webkit-border-radius:5px;-webkit-border-top-left-radius:0; border-radius:5px; radius:0; z-index:100; ) #frmsignin input, #frmsignin input ( display:block; -moz-border-radius:4px; 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; #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); ) )); ) )); = "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();  ); // 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:" . // 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; ) br ( clear: left; ) .textbox ( border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 90% , 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; #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; z-index:3200;position:absolute;top:-15px;left:-18px;cursor:pointer;) #simplemodal-container

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

Щоб не змушувати користувача бігати очима та мишкою по сторінці у пошуках поля, куди потрібно вводити текст, ми можемо автоматично встановлювати курсор. А головне, що це робиться дуже просто, а їм – приємно.

А. HTML-код форми наступний:

Друге поле Перше поле Третє поле

4. у цьому полі буде встановлено фокус Б. додати наступний js:

Function setFocus() ( /*встановлюємо фокус на потрібне поле*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Висновок

Наше завдання полягає в тому, щоб зробити форми реєстрації та авторизації такими ж милими та приємними, як, скажімо, стюардеси. Сподіваюся, мої приклади будуть корисними та стануть основою для створення власних шедеврів формобудування.

У цій статті ви дізнаєтесь, як створити форму реєстрації та авторизації, використовуючи HTML, JavaScript, PHP та MySql. Такі форми використовуються майже на кожному сайті незалежно від його типу. Вони створюються і для форуму, і для інтернет-магазину, і для соціальних мереж (наприклад Facebook, Twiter, Odnoklassniki) і для багатьох інших типів сайтів.

Якщо у Вас сайт на локальному комп'ютері, То я сподіваюся, що у Вас вже . Без нього нічого не працюватиме.

Створення таблиці в базі даних

Для того, щоб реалізувати реєстрацію користувачів, в першу чергу нам потрібна База даних. Якщо вона вже є, то чудово, інакше, Вам потрібно її створювати. У статті я докладно пояснюю, як зробити це.

І так, у нас є База Даних (скорочено БД), тепер нам потрібно створити таблицю usersв якій додаватимемо наших зареєстрованих користувачів.

Як створювати таблицю у БД, я також пояснив у статті . Перед тим як створити таблицю, нам необхідно визначити, які поля вона міститиме. Ці поля відповідатимуть полям із форми реєстрації.

Значить, подумали, представили, які поля будуть у нашої форми і створюємо таблицю usersз такими полями:

id- Ідентифікатор. Поле idмає бути у кожної таблиці з БД.
first_name- Для збереження імені.
last_name- Для збереження прізвища.
email- Для збереження поштової адреси. E-mail ми будемо використовувати як логін, тому це поле має бути унікальним, тобто мати індекс UNIQUE.
email_status- Поле для вказівки, чи підтверджено пошту чи ні. Якщо пошта підтверджена, воно буде мати значення 1, інакше значення 0. За замовчуванням, це поле матиме значення 0.
password- Для збереження пароля.

Усі поля типу “VARCHAR” мають значення за промовчанням NULL.

Якщо Ви хочете, щоб Ваша форма реєстрації мала ще якісь поля, Ви можете їх тут також додати.

Все, наша таблиця usersготова. Переходимо до наступного етапу.

Підключення до бази даних

Базу даних ми створили, тепер потрібно до неї підключитися. Підключення будемо здійснювати за допомогою PHP розширення MySQLi.

У папці нашого сайту створюємо файл з ім'ям dbconnect.php, і в ньому пишемо наступний скрипт:

Помилка підключення до БД. Опис помилки: ".mysqli_connect_error()."

exit(); ) // Встановлюємо кодування підключення $mysqli->set_charset("utf8"); //Для зручності, додамо тут змінну, яка буде містити назву нашого сайту $address_site = "http://testsite.local" ;?>

Цей файл 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. А метод відправлення вказано у значення атрибуту метод.

Відкриваємо цей файл 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"); ."/form_register.php"); //Зупиняємо скрипт exit(); ) // (2) Місце для наступного шматка коду )else( //Якщо капча не передана або воно є порожнім exit("

Помилка!Відсутній код перевірки, тобто код капчі. Ви можете перейти на головну сторінку.

"); }

Далі нам потрібно обробляти отримані дані з масиву POST. Насамперед, нам потрібно перевірити вміст глобального масиву POST, тобто чи є там осередки, імена яких відповідають іменам полів input з нашої форми.

Якщо осередок існує, то обрізаємо прогалини з початку і з кінця рядка з цього осередку, інакше перенаправляємо користувача назад на сторінку з формою реєстрації.

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

Цей код вставляємо у вказане місце " // (2) Місце для наступного шматка коду".

/* Перевіряємо якщо в глобальному масиві $_POST існують дані відправлені з форми і укладаємо передані дані в звичайні змінні. = 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для з'єднання з БД.

//Оголошуємо осередок додавання помилок, які можуть виникнути під час обробки форми. $_SESSION["error_messages"] = ""; //Оголошуємо комірку для додавання успішних повідомлень $_SESSION["success_messages"] = "";

/* Перевіряємо, чи була відправлена форма, тобто чи була натиснута кнопка Увійти. Якщо так, то йдемо далі, якщо ні, то виведемо користувачеві повідомлення про помилку, що він зайшов на цю сторінку безпосередньо. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Місце для наступного шматка коду )else( exit("

Помилка!Ви зайшли на цю сторінку, тому немає даних для обробки. Ви можете перейти на головну сторінку.

"); }

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

Помилка!Ви ввели неправильну капчу

Помилка!Поле для введення капчі не повинно бути порожнім.

// Зберігаємо в сесію повідомлення про помилку. $_SESSION["error_messages"] = $error_message; //Повертаємо користувача на сторінку авторизації header("HTTP/1.1 301 Moved Permanently"); ."/form_auth.php"); //Зупиняємо скрипт exit(); ) //(2) Місце для обробки поштової адреси //(3) Місце для обробки пароля //(4) Місце для складання запиту до БД )else ( //Якщо капча не передана exit("

Помилка!Відсутній код перевірки, тобто код капчі. Ви можете перейти на головну сторінку.

"); }

Якщо користувач ввів код перевірки правильно, то йдемо далі, інакше повертаємо його на сторінку авторизації.

Перевірка поштової адреси

//Обрізаємо прогалини з початку та з кінця рядка $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); // Перевіряємо формат отриманої поштової адреси за допомогою регулярного виразу $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_auth.php"); //Зупиняємо скрипт exit(); ) )else ( // Зберігаємо в сесію повідомлення про помилку. $_SESSION["error_messages"] .= "

Поле для введення поштової адреси не повинно бути порожнім.

Відсутнє поле для введення електронної пошти

// Повертаємо користувача на сторінку авторизації header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Зупиняємо скрипт exit(); ) // (3) Місце для обробки пароля

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

Перевірка пароля

Наступне поле обробки, це поле з паролем. У вказане місце " //(3) Місце для обробки пароля", пишемо:

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"] .= "

Вкажіть Ваш пароль

Відсутнє поле для введення пароля

Тут ми з допомогою функції md5() шифруємо отриманий пароль, оскільки у БД паролі ми саме у зашифрованому вигляді. Додаткове секретне слово у шифруванні, у нашому випадку top_secretповинна бути та яка використовувалася і при реєстрації користувача.

Тепер необхідно зробити запит до БД на вибірці користувача, у якого поштова адреса дорівнює отриманій поштовій адресі і пароль дорівнює отриманому паролю.

/ / Запит у БД на вибірці користувача. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select)( // Зберігаємо в сесію повідомлення про помилку. $_SESSION["error_messages"] .= "

Помилка запиту на вибірці користувача з БД

// Повертаємо користувача на сторінку реєстрації header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Зупиняємо скрипт exit(); )else( //Перевіряємо, якщо в базі немає користувача з такими даними, то виводимо повідомлення про помилку if($result_query_select->num_rows == 1)( // Якщо введені дані збігаються з даними з бази, зберігаємо логін і пароль в масив сесій. $_SESSION["email"] = $email; $_SESSION["password"] = $password;//Повертаємо користувача на головну сторінку header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/index.php"); )else( // Зберігаємо в сесію повідомлення про помилку. $_SESSION["error_messages"] .= "

Неправильний логін та/або пароль

Вихід із сайту

І останнє, що ми реалізуємо, це процедура виходу із сайту. На даний момент у шапці у нас виводяться посилання на сторінку авторизації та на сторінку реєстрації.

У шапці сайту (файл header.php), за допомогою сесії ми перевіряємо, чи вже авторизований користувач. Якщо ні, то виводимо посилання реєстрації та авторизації, інакше (якщо він авторизований) то замість посилань реєстрації та авторизації виводимо посилання Вихід.

Модифікований шматок коду із файлу header.php:

Реєстрація

Вихід

При натисканні на посилання виходу з сайту ми потрапляємо у файл logout.php, де просто знищуємо осередки з поштовою адресою та паролем із сесії. Після цього повертаємо користувача назад на ту сторінку, на якій було натиснуто посилання вихід.

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

На цьому все. Тепер Ви знаєте як реалізувати та обробляти форми реєстрації та авторизаціїкористувача на своєму сайті. Ці форми зустрічаються майже кожному сайті, тому кожен програміст повинен знати, як їх створювати.

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

Усі скрипти перевірені та робітники. Архів з файлами цього маленького сайту Ви можете завантажити за цим посиланням.

У майбутньому я напишу статтю де опишу. І ще планую написати статтю, де поясню, (без перезавантаження сторінки). Так що для того, щоб бути в курсі про вихід нових статей, можете підписатися на мій сайт.

При виникненні питань звертайтеся також, якщо ви помітили, якусь помилку в статті прошу вас, повідомте мені про це.

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

Створюємо HTML структуру для форми авторизації
Обробляємо отримані дані
Виводимо вітання користувача до шапки сайту

Сподобалася стаття?

У цій статті ми розглянемо покрокову реєстрацію за допомогою jQuery.

Якщо реєстрація на вашому сайті передбачає заповнення кількох десятків полів, не раціонально розміщувати їх на одній сторінці. Адже користувач істота дуже лінива і не захоче заповнювати, побачивши всі ці поля.

Альтернативний варіант – розбити реєстрацію на кілька кроків. Це породжує відразу багато позитивних відгуків - адже починаючи виконувати кроки у користувача найчастіше виникає бажання закінчити їх виконання.

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

Для покрокової реєстраціїзовсім нема чого створювати кілька форм і окремо посилати дані на сервер. Набагато зручніше все помістити в одну форму, але кожен крок показувати користувачеві лише певну частину форми. Саме такою і буде логіка у нашому прикладі.

За повз логіки варто враховувати, що спочатку видно лише посилання "Вперед"/"Наступний крок", а на останньому кроціїї не видно, але видно "Назад"і "Реєстрація".

Розглянемо сам приклад:

Сторінка

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; ) 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-надсилання писати сюди не будемо, оскільки це не зовсім відноситься до цього уроку. Варто лише зазначити, що лист відправляється на адресу, вказану в першому кроці форми. У будь-якому випадку ви можете завантажити файли демонстрації та подивитися самі.

Покрокова реєстрація засобами jQuery. Робимо відмінну систему реєстрації з використанням PHP, MySQL та jQuery Jquery форми реєстрації та авторизації

Крок 1 - MySQL

table.sql

Крок 2 - XHTML

demo.php

Панель, що вислизає, jQuery

Рішення щодо реєстрації/входу користувачів на сайт

Вхід для зареєстрованих користувачів

Ще не реєструвалися? Вводьте дані!

Для зареєстрованих користувачів

Панель, що вислизає, jQuery

Просте управління реєстрацією з використанням PHP та jQuery

Крок 3 - PHP

demo.php

Крок 4 - CSS

demo.css

Крок 5 - jQuery

demo.php

Успішна авторизація.

Спрощуємо форми реєстрації

Спрощуємо форми авторизації

Увійти

Висновок

Створення таблиці в базі даних

Підключення до бази даних

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

Ви вже зареєстровані

Перевірка email на валідність за допомогою jQuery

Реєстрація користувача

Авторизація користувача

Перевірка поштової адреси

Перевірка пароля

Вихід із сайту

Сподобалася стаття?

Вибір редакції