Форма реєстрації jquery. Робимо відмінну систему реєстрації з використанням PHP, MySQL і 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 \u003d $ ( "form"). Children ( ". Step"); // знаходимо всі кроки форми $ (steps) .show (); / / показуємо перший крок var current_step \u003d 0; // задаємо поточний крок $ ( "a.next"). click (function () (// Подія кліка на посилання "Наступний крок" if (current_step \u003d\u003d steps.length-2) (// перевіряємо, чи буде наступний крок останнім $ (this) .hide (); // приховуємо посилання "наступний крок" $ ( "form input"). show (); // показуємо кнопку "Реєстрація") $ ( " a.back "). show (); // показуємо посилання" Назад "current_step ++; // збільшуємо лічильник поточного слайда changeStep (current_step); // міняємо крок)); $ (" a.back "). click (function ( ) (// Подія кліка на маленьке зображення if (current_step \u003d\u003d 1) (// перевіряємо, чи буде попередній крок першим $ (this) .hide (); // приховуємо посилання "Назад") $ ( "form input") .hide (); // приховуємо кнопку "Реєстрація" $ ( "a.next"). show (); // показуємо посилання "Наступний крок" current_step--; // зменшуємо лічильник поточного слайда changeStep (current_step); // міняємо крок)); function changeStep (i) (// функція зміни кроку $ (steps) .hide (); // приховуємо всі кроки $ (steps [i]). show (); // показуємо поточний)));

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

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

код HTML

Для початку потрібно почати з коду HTML. HTML-код дуже простенький - він містить в собі тег «a», який йде разом з тегом «fieldset», за рахунок якого відображається форма.

Просто скопіюйте це в код нової сторінки:


Have an account? Sign in













Forgot your password?


title \u003d "(! LANG: If you remember your password, try logging in with your email" !}
href \u003d "#"\u003e Forgot your username?






код CSS

Вам буде потрібно використання CSS для визначення кнопки авторизації і форми логіна. Представлений нижче код виконують саме цю функцію.

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

#container (
width: 780px;
margin: 0 auto;
position: relative;
}

#content (
width: 520px;
min-height: 500px;
}
a: link, a: visited (
color: # 27b;
text-decoration: none;
}
a: hover (
text-decoration: underline;
}
a img (
border-width: 0;
}
#topnav (
padding: 10px 0px 12px;
font-size: 11px;
line-height: 23px;
text-align: right;
}
#topnav a.signin (
background: # 88bbd4;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
* Background: transparent url ( "images / signin-nav-bg-ie.png") no-repeat 0 0;
* Padding: 4px 12px 6px;
}
#topnav a.signin: hover (
background: # 59B;
* Background: transparent url ( "images / signin-nav-bg-hover-ie.png") no-repeat 0 0;
* Padding: 4px 12px 6px;
}
#topnav a.signin, #topnav a.signin: hover (
* Background-position: 0 3px! Important;
}

a.signin (
position: relative;
margin-left: 3px;
}
a.signin span (
background-image: url ( "images / toggle_down_light.png");
background-repeat: no-repeat;
background-position: 100% 50%;
padding: 4px 16px 6px 0;
}
#topnav a.menu-open (
background: # ddeef6! important;
color: # 666! important;
outline: none;
}
#small_signup (
display: inline;
float: none;
line-height: 23px;
margin: 25px 0 0;
width: 170px;
}
a.signin.menu-open span (
background-image: url ( "images / toggle_up_dark.png");
color: # 789;
}

І далі йде визначення форми логіна:

#signin_menu (
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
display: none;
background-color: # ddeef6;
position: absolute;
width: 210px;
z-index: 100;
border: 1px transparent;
text-align: left;
padding: 12px;
top: 24.5px;
right: 0px;
margin-top: 5px;
margin-right: 0px;
* Margin-right: -1px;
color: # 789;
font-size: 11px;
}

#signin_menu input, #signin_menu input (
display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #ACE;
font-size: 13px;
margin: 0 0 5px;
padding: 5px;
width: 203px;
}
#signin_menu p (
margin: 0;
}
#signin_menu a (
color: # 6AC;
}
#signin_menu label (
font-weight: normal;
}
#signin_menu p.remember (
padding: 10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
clear: both;
margin: 5px 0;
}
#signin_menu p a (
color: # 27B! important;
}
#signin_submit (
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: # 39d url ( "images / bg-btn-blue.png") repeat-x scroll 0 0;
border: 1px solid # 39D;
color: #fff;
text-shadow: 0 -1px 0 # 39d;
padding: 4px 10px 5px;
font-size: 11px;
margin: 0 5px 0 0;
font-weight: bold;
}
#signin_submit :: - moz-focus-inner (
padding: 0;
border: 0;
}
#signin_submit: hover, #signin_submit: focus (
background-position: 0 -5px;
cursor: pointer;
}

Прийшов час попрацювати з javascript

Здавалося б, коди HTML і CSS досить складні і заплутані, а в javascript все дуже просто. Просто копіюйте цей код javascript, за рахунок якого можна буде відображати і ховати форму в момент кліка по кнопці авторизації, навіть якщо клік буде проведений поза формою логіна.



Відповідно до коду, представленого вище, коли відвідувач клацає по кнопці авторизації, запускається нова функція. Спочатку відображається форма логіна (укладена в тег «filedset»), потім посилання, укладена в клас «.signin», додає ще один клас «menu-open», за рахунок якого змінюється фонове зображення.

Ще одна подія в цьому коді полягає в тому, що коли відвідувачі клацають не по формі логіна, а десь на сторінці - то форма сама закривається. Іншими словами, клас «menu-open» знімається з посилання з класом «.signin» і повертає їй початкове фонове зображення.

Що стосується підказок?


Ми зазвичай радимо використовувати плагін для jQuery - tipsy. Вміст tooltip-а являє собою те, що написано в атрибуті «title», відноситься до заслання. Ви можете змінювати позицію tooltip-а щодо сходу, заходу, півдня чи півночі. Це реалізується за рахунок параметра «gravity», зазначеного в коді вище. Ми надаємо Вам посилання на сайт, присвячений цьому плагіну, там Ви зможете більш детально вивчити його можливості і завантажити плагін. ...

На закінчення

Якщо Ви скопіювали весь код з цієї статті, будь ласка, не міняйте структуру папок. Якщо Ви зміните її, то код не буде працювати. Даний код є лише прикладом створення випадає форми авторизації за допомогою 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 \u003d MyISAM DEFAULT CHARSET \u003d utf8 COLLATE \u003d utf8_unicode_ci;

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

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

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

Крок 2 - XHTML

Перш за все, нам потрібно вбудувати форму Web-creation в нашу сторінку.

demo.php






Вислизає панель jQuery


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



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



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


if ($ _ SESSION [ "msg"] [ "login-err"])
{
echo "
". $ _ SESSION [" msg "] [" login-err "]."
";
unset ($ _ SESSION [ "msg"] [ "login-err"]);
// This will output login errors, if any
}
?>












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


if ($ _ SESSION [ "msg"] [ "reg-err"])
{
echo "
". $ _ SESSION [" msg "] [" reg-err "]."
";
unset ($ _ SESSION [ "msg"] [ "reg-err"]);
// Тут виводимо помилку реєстрації, якщо вона є
}
if ($ _ SESSION [ "msg"] [ "reg-success"])
{
echo "
". $ _ SESSION [" msg "] [" reg-success "]."
";
unset ($ _ SESSION [ "msg"] [ "reg-success"]);
// Тут виводимо повідомлення про успішність реєстрації
}
?>








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 \u003d array ();
session_destroy ();
// Видаляємо сесію
}
if (isset ($ _ GET [ "logoff"]))
{
$ _SESSION \u003d array ();
session_destroy ();
header ( "Location: demo.php");
exit;
}
if ($ _ POST [ "submit"] \u003d\u003d "Login")
{
// Перевіряємо, що запит прийшов з форми Входу
$ Err \u003d array ();
// Зберігаємо помилку
if (! $ _ POST [ "username"] ||! $ _ POST [ "password"])
$ Err \u003d "Всі поля повинні бути заповнені!";
if (! count ($ err))
{

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

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

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

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

Else if ($ _ POST [ "submit"] \u003d\u003d "Register")
{
// Якщо запит відправлений з форми Реєстрації
$ Err \u003d array ();
if (strlen ($ _ POST [ "username"])<4 || strlen($_POST["username"])>32)
{
$ Err \u003d "Ім'я користувача повинно бути довжиною від 3 до 32 символів!";
}
if (preg_match ( "/ [^ a-z0-9 \\ - \\ _ \\.] + / i", $ _ POST [ "username"]))
{
$ Err \u003d "Ім'я користувача містить неприпустимі символи!";
}
if (! checkEmail ($ _ POST [ "email"]))
{
$ Err \u003d "Ваш email адреса неправильний!";
}
if (! count ($ err))
{
// Якщо немає помилок
$ Pass \u003d substr (md5 ($ _ SERVER [ "REMOTE_ADDR"]. Microtime (). Rand (1,100000)), 0,6);
// Згенеруємо випадковий пароль
$ _POST [ "email"] \u003d mysql_real_escape_string ($ _ POST [ "email"]);
$ _POST [ "username"] \u003d 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) \u003d\u003d 1)
{
send_mail ( " [Email protected]сайт ",
$ _POST [ "email"],
"Демонстрація системи реєстрації - генерація пароля",
"Ваш пароль:". $ Pass);
$ _SESSION [ "msg"] [ "reg-success"] \u003d "Ми відправили вам email з вашим новим паролем!";
}
else $ err \u003d "Дане ім'я користувача вже використовується!";
}
if (count ($ err))
{
$ _SESSION [ "msg"] [ "reg-err"] \u003d implode ( "
", $ Err);
}
header ( "Location: demo.php");
exit;
}
$ Script \u003d "";
if ($ _ SESSION [ "msg"])
{
// Скрипт показує вислизає панель на сторінці завантаження
$ Script \u003d "
";
}

Зберігаємо всі певні помилки в масиві $ 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 \u003d MyISAM DEFAULT CHARSET \u003d utf8 AUTO_INCREMENT \u003d 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 \u003d ""; // Якщо відсутній рядок з логіном, повертаємо повідомлення про помилку if (! $ Str) ($ error \u003d " ви не ввели ім'я користувача "; return $ error;) / ** * Перевіряємо ім'я користувача за допомогою регулярних виразів * Логін повинен бути не коротше 4, не довше 16 символів * у ньому повинні бути символи латинського алфавіту, цифри, * в ньому можуть бути символи "_", "-", "." * / $ pattern \u003d "/^[-_.az\\d](4,16)$/i"; $ result \u003d preg_match ($ pattern, $ str) ; // Якщо перевірка не пройшла, повертаємо повідомлення про помилку if (! $ result) ($ error \u003d "Неприпустимі символи в імені користувача або ім'я користувача занадто короткий (довге)"; return $ error;) // Якщо ж все нормально, повернемо значення true return true;) // Перевірка пароля користувача function checkPassword ($ str) (// ініціалізувавши змінну з можливим повідомленням про помилку $ error \u003d ""; // Якщо отсутст яття рядок з логіном, повертаємо повідомлення про помилку if (! $ str) ($ error \u003d "Ви не ввели пароль"; return $ error; ) / ** * Перевіряємо пароль користувача за допомогою регулярних виразів * Пароль повинен бути не коротше 6, не довше 16 символів * У ньому повинні бути символи латинського алфавіту, цифри, * в ньому можуть бути символи "_", "!", " ( ",") "* / $ pattern \u003d" /^[_!)(.az\\d](6,16)$/i "; $ result \u003d preg_match ($ pattern, $ str); // Якщо перевірка не пройшла, повертаємо повідомлення про помилку if (! $ result) ($ error \u003d "Неприпустимі символи в паролі користувача або пароль занадто короткий (довгий)"; return $ error;) // Якщо ж все нормально, повернемо значення true return true; )

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

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

"; Header (" Refresh: 5; URL \u003d login.php ");) // Інакше повідомляємо користувачеві про помилку else ($ errors [" full_error "] \u003d $ reg;)))?\u003e Реєстрація користувачів
" />
В імені користувача можуть бути тільки символи латинського алфавіту, цифри, символи "_", "-", ".". Довжина імені користувача має бути не коротшою 4 символів і не довше 16 символів
У паролі ви можете використовувати тільки символи латинського алфавіту, цифри, символи "_", "!", "(", ")". Пароль повинен бути не коротше 6 символів і не довше 16 символів
Повторіть введений раніше пароль

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

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

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

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

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

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

;">

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

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

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

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

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

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

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

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

"); // Якщо користувача з такими даними немає, повертаємо false; if (mysql_num_rows ($ query) \u003d\u003d 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. Я в курсі, що краще писати об'єктно-орієнтована код, знаю, що передавати і зберігати пароль у відкритому вигляді не варто, що інформація, що заноситься в базу даних, необхідно попередньо перевіряти. Знаю. Про це я тут не буду говорити.

1. Плагін для створення онлайн форм «jFormer»

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

2. Покрокова форма реєстрації з використанням jQuery

Акуратна форма з покроковим заповненням. Знизу вказаний індикатор заповнення форми.

3. Покрокова форма

Заповнення форми в кілька кроків з перевіркою правильності заповнення.

4. Контактна форма для сайта

Перевірка правильності введення іфнормаціі здійснюється «на льоту» перед відправкою повідомлення з використанням javascript.

5. Анимированное перемикання між формами на jQuery

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

6. виїжджати PHP форма зворотного зв'язку

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

7. PHP форма реєстрації з використанням jQuery і CSS3

Форма з перевіркою правильності введення інформації.

8. PHP форма реєстрації в стилі Facebook

Симпатична форма реєстрації, реалізована за допомогою CSS, PHP і jQuery.

9. jQuery контактна форма «SheepIt»

Реалізована можливість перед відправкою повідомлення додавати нові поля.

10. Контактна форма «Fancy AJAX Contact Form»

Симпатична акуратна PHP форма зворотного зв'язку з перевіркою правильності введення інформації. Технології: CSS, PHP, jQuery.

11. Система авторизації / реєстрації на сайті

12. Форма відправки даних

З перевіркою правильності заповнення.

13. Плагін jQuery «Contactable»

Для реалізації виїжджає форми зворотного зв'язку для швидкого відправлення повідомлення.