Якщо вам необхідно зробити один із розділів свого сайту доступним обмеженому, але невизначеному колу осіб, найпростіше це зробити за допомогою реєстрації та авторизації користувачів. Є багато способів авторизації користувачів. Можна використовувати інструменти веб-сервера та інструменти мови програмування. Ми поговоримо про випадок, коли використовуються сесії 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 = "/^[-_.az\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 = "/^[_!)(.az\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. Я в курсі, що краще писати об'єктно-орієнтований код, знаю, що передавати та зберігати пароль у відкритому вигляді не варто, що інформацію, що заноситься до бази даних, необхідно попередньо перевіряти. Я знаю. Про це я тут не говоритиму.

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

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

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

Приклад подивилися, тепер давайте, розберемо у деталях всі основні компоненти модального вікна та форм, для того щоб навчитися використовувати їх у себе на сайті.
Робота спливаючого вікна з формами входу та реєстрації, побудована на популярній бібліотеці JavaScript, виконуваному плагіні jQuey і сформованих стилях CSS. Всі ці інструменти потрібно підключити до вашого сайту. Остання актуальна версія бібліотеки jQuey можна підключити безпосередньо з Google, сам файл плагіна main.js і готовий набір сформованих стилів style.css знайдете в архіві.
Javascript прописуємо перед тегом, що закриває, стилі CSS можна скопіювати та додати до файлу стилів.css вашого сайту.

HTML Структура:

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

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Вхід < li>< a href= "#0" >Реєстрація < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >E-mail < input class = id= "signin-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Пароль < input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "(!LANG:Пароль" > !}< a href= "#0" class = "hide-password" >Приховати < span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Запам'ятати мене < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Увійти" > < p class = "cd-form-bottom-message" >< a href= "#0" >Забули свій пароль? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Ім'я користувача < input class = "full-width has-padding has-border" id="signup-username" type="text" placeholder= "Ім'я користувача"> < span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >E-mail < input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "(!LANG:E-mail" > !}< span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Пароль < input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "(!LANG:Пароль" > !}< a href= "#0" class = "hide-password" >Приховати < span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >Я згоден з< a href= "#0" >умовами < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Створити акаунт"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Забули пароль? Будь ласка, введіть адресу електронної пошти. Ви отримаєте посилання, щоб створити новий пароль. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >E-mail < input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "(!LANG:E-mail" > !}< span class = "cd-error-message" >Тут повідомлення про помилку! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Відновити пароль"> < p class = "cd-form-bottom-message" >< a href= "#0" >Повернутись до входу < a href= "#0" class = "cd-close-form" >Закрити

CSS Стилі:

Базовий шаблон та елементи управління форм автор виконав у популярному, плоскому стилі (Flat), з явним упором на мінімалізм. Нічого зайвого, у міру прозоре тло затемнення, легкі для сприйняття кольору, добре підібраний шрифт та іконки, для позначення полів введення. За допомогою властивостей CSS, ви легко зможете змінити будь-який елемент форм.

.cd-user-modal ( position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba (52 , 54 , 66 , 0.9 ) ; z-index : 3 ; y : auto ; cursor : pointer ; visibility : hidden ; opacity : 0 ; s 0 , visibility 0 0.3s ; ) .cd-user-modal .is-visible ( visibility : visible ; opacity : 1 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0 ; -moz-transition: opacity 0.3s 0 , visibility 0 0 ; transition : opacity 0.3s 0 , visibility 0 0 ; ) .cd-user-modal . transform: translateY(0 ) ; -ms-transform: translateY(0 ) ; -o-transform: translateY(0 ) ; transform : translateY(0 ) ; 90%; dth: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius : 0.25em; -webkit-transform: translateY(-30px ); -moz-transform: translateY(-30px ); -ms-transform: translateY(-30px ); -o-transform: translateY(-30px ); transform : translateY(-30px ); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property : transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration : 0.3s; ) .cd-user-modal-container .cd-switcher : after ( content : "" ; display : table ; clear : both ; ) .cd-user-modal-container .cd-switcher li ( width : 50% ; float : left ; text-align : center ; ) .cd-user-modal-container .cd-switcher li: first-child a (border-radius: .25em 0 0 0 ; ) -switcher li: last-child a ( border-radius : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a ( display : block ; width : 100% ; height : 50px ; line-height : 50px ;background : #d2d8d8 ; color : #809191 ; ) .cd-user-modal-container .cd-switcher a.selected ( background : #FFF ; color : #505260 ; ) : 600px ) ( .cd-user-modal-container ( margin : 4em auto ; ) .cd-user-modal-container .cd-switcher a ( height : 70px ; line-height : 70px ; ) ) .cd-form ( padding: 1. 4em; ) .cd-form .fieldset ( position : relative ; margin : 1.4em 0 ; ) .cd-form .fieldset : first-child ( margin-top : 0 ; ) .cd-form .fieldset : last-child ( margin- bottom : 0 ; ) .cd-form label ( font-size : 14px ; font-size : 0.875rem ; ) .cd-form label.image-replace ( /* замінити текст із іконою */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50% ); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform : translateY(-50% ); height: 20px; width: 20px; overflow: hidden; text-indent: 100% ; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0 ; } /* Іконки полів введення */ .cd-form label .cd-username { background-image: url("../img/cd-icon-username.svg") ; } .cd-form label .cd-email { background-image: url("../img/cd-icon-email.svg") ; } .cd-form label .cd-password { background-image: url("../img/cd-icon-password.svg") ; } .cd-form input { margin: 0 ; padding: 0 ; border-radius: 0.25em; } .cd-form input .full-width { width: 100% ; } .cd-form input .has-padding { padding: 12px 20px 12px 50px; } .cd-form input .has-border { border: 1px solid #d2d8d8; -webkit-appearance : none; -moz-appearance : none; -ms-appearance : none; -o-appearance : none; appearance : none; } .cd-form input .has-border: focus { border-color: #343642 ; box-shadow: 0 0 5px rgba(52 , 54 , 66 , 0.1 ) ; outline: none; } .cd-form input .has-error { border: 1px solid #d76666; } .cd-form input [ type = password ] { /* простір для кнопки Сховати */ padding-right: 65px; } .cd-form input [ type = submit ] { padding: 16px 0 ; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance : none; -moz-appearance : none; -ms-appearance : none; -o-appearance : none; appearance : none; } .no-touch .cd-form input [ type = submit ] : hover, .no-touch .cd-form input [ type = submit ] : focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0 ; top: 0 ; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50% ; bottom: auto; -webkit-transform : translateY (-50% ) ; -moz-transform : translateY (-50% ) ; -ms-transform : translateY (-50% ) ; -o-transform : translateY (-50% ) ; transform: translateY (-50% ) ; font-size: 14px; font-size: 0.875rem; color: #343642 ; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215 , 102 , 102 , 0.9 ) ; padding: .8em; z-index: 2 ; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* запобігання клікам та дотику */ pointer-events: none; visibility: hidden; opacity: 0 ; -webkit-transition : opacity 0.2s 0 , visibility 0 0.2s; -moz-transition : opacity 0.2s 0 , visibility 0 0.2s; transition: opacity 0.2s 0 , visibility 0 0.2s; } .cd-form .cd-error-message:: after { /* куточок повідомлення про помилку */ content: "" ; position: absolute; left: 22px; bottom: 100% ; height: 0 ; width: 0 ; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215 , 102 , 102 , 0.9 ) ; } .cd-form .cd-error-message.is-visible { opacity: 1 ; visibility: visible; -webkit-transition : opacity 0.2s 0 , visibility 0 0 ; -moz-transition : opacity 0.2s 0 , visibility 0 0 ; transition: opacity 0.2s 0 , visibility 0 0 ; } @media only screen and (min-width: 600px) { .cd-form { padding: 2em; } .cd-form .fieldset { margin: 2em 0 ; } .cd-form .fieldset: first-child { margin-top: 0 ; } .cd-form .fieldset: last-child { margin-bottom: 0 ; } .cd-form input .has-padding { padding: 16px 20px 16px 50px; } .cd-form input [ type = submit ] { padding: 16px 0 ; } } .cd-form-message { padding: 1.4em 1.4em 0 ; font-size: 14px; font-size: 0.875rem; line-height: 1.4 ; text-align: center; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0 ; } } .cd-form-bottom-message { position: absolute; width: 100% ; left: 0 ; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* стиль X кнопки зверху праворуч */ display: block; position: absolute; width: 40px; height: 40px; right: 0 ; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100% ; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; }

Cd-user-modal ( position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y : auto, cursor: pointer, visibility: hidden, opacity: 0; 0, visibility 0 0.3s; ) .cd-user-modal.is-visible ( visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0 , visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; ) .cd-user-modal.is-visible .cd-user-modal-container ( -webkit-transform: translateY(0); -moz-transform : translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); ) cd-user-modal-container ( position: relative; %;max-width:600px;background:#FFF;margin:3em auto 4em;cursor:auto;border-radius:0.25em;-webkit-transform: translateY(-30px); translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; ) .cd-user-modal-container .cd-switcher:after ( content: ""; display: table; clear: both; ) .cd-user-modal-container .cd-switcher li ( width: 50%; float : left; text-align: center; . -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( display: block; width: 100%; height: 50px; line-height : 50px; background: #d2d8d8; color: #809191; ) .cd-user-modal-container .cd-switcher a.selected ( background: #FFF; color: #505260; ) : 600px) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal-container .cd-switcher a ( height: 70px; line-height: 70px; ) ) .cd-form ( padding: 1.4em; ) .cd-form .fieldset ( position: relative; margin: 1.4em 0; ) .cd-form .fieldset:first-child ( margin-top: 0; ) .cd-form .fieldset:last -child ( margin-bottom: 0; ) .cd-form label ( font-siz e: 14px; font-size: 0.875rem; ) .cd-form label.image-replace ( /* замінити текст з іконою */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(- 50%);-moz-transform: translateY(-50%); -ms-transform: translateY(-50%); : 20px, width: 20px, overflow: hidden, text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; ) /* Іконки полів введення */ .cd-form label.cd-username (background-image: url("). ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( background-image: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( background-image: url("../img/cd-icon-password.svg"); ) .cd-form input ( margin: 0; padding: 0; border-radius: 0.25 em;) .cd-form input.full-width (width: 100%; ) .cd-form input.has-padding ( padding: 12px 20px 12px 50px; ) solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; ) -color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; ). form input ( /* простір для кнопки Приховати */ padding-right: 65px; ) .cd-form input ( padding: 16px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border : none;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none; -o-appearance: none; appearance: none; ) .no-touch .cd-form input:hover, .no-touch .cd-form input:focus ( background: #3599ae; outline: none; ) .cd-form .hide-password ( display: inline-block; position: absolute, right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); size: 0.875rem; color: #343642; ) .cd-form .cd-error-message ( display: inline-block; 102, 0.9), padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; -events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; visi bility 0 0.2s; ) .cd-form .cd-error-message::after ( /* куточок повідомлення про помилку */ content: ""; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border -left: 8px solid transparent; border-right: 8px solid transparent; 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0. 2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; ) @media only screen and (min-width: 600px) ( .cd-form ( padding: 2em; ) .cd-form .fieldset ( margin: 2em 0; ) .cd-form .fieldset:first-child ( margin- top: 0; ) .cd-form .fieldset:last-child ( margin-bottom: 0; ). 0; ) ) .cd-form-message ( padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; ) (min-width: 600px) ( .cd-form-message ( padding: 2em 2em 0; ) ) .cd-form-bottom-message ( position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; ) .cd-form-bottom-message a (color: #FFF; text-decoration: underline; ) * стиль X кнопки вгорі праворуч */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; ") no-repeat center center; text-indent: 100 %; white-space: nowrap; overflow: hidden; ) @media only screen and (min-width: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( display: block; )

В ефекті переходу появи додано затримку, щоб добитися плавного зникнення модального вікна при закритті.

Примітка. Розмір шрифту всіх полів введення встановлено за замовчуванням 16px. Це запобігає автоматичному масштабуванню, яке відбувається під час перегляду на мобільних пристроях.

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

З повагою Андрій

У цьому уроці ми створимо стильну форму авторизації на сайті, ви можете її знайти у Futurico UI Pro, створеному Володимиром Кудіновим. Для створення форми ми будемо використовувати CSS3 та jQuery.

Крок 1 - HTML-розмітка

Почнемо із створення HTML-розмітки. Створимо форму з чотирма input-ами (ім'я користувача, пароль, чекбокс та кпонка "submit") прапорець ми обернемо в тег span, який ми будемо використовувати для стилізації цього прапорця. Потім обернемо форму та заголовок у тег DIV та призначимо йому клас "login-form".

> Login Form >

>

remember >
>

Крок 2 - Загальні стилі

Спочатку видалимо всі поля, відступи, межі тощо. із елементів, які ми будемо використовувати.

Login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label (
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

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

Login-form (
position: relative;
width: 200px;
height: 200px;
padding : 15px 25px 0 25px;
margin-top: 15px;
cursor: default;

background-color : #141517;

Webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
}

Щоб створити стрілку, ми використовуватимемо селектор :before .

width: 0px;
height: 0px;
content: "";

border-bottom: 10px solid #141517;
border-right: 10px solid #141517;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
}

Додамо деякі стилі для заголовка форми (колір, шрифт та розмір, тощо).

Login-form h1 (
line-height : 40px;
font-family: "Myriad Pro", sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}

Крок 3 – Загальні стилі для полів форми

Спочатку поставимо основні стилі для input-ів.

line-height : 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;

font-family : Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow : 0px 1px 1px rgba (255, 255, 255, .2);

Webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;

Webkit-transition: all .15s ease-in-out;
-Moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}

Потім ми поставимо стилі для полів введення логіну та паролю. Ми додамо градієнт сірий фон і тіні. Ми також додамо фіксовану ширину, рівну 170px, та колір для тексту.

Login-form input[ type= text ] ,
.login-form input[ type= password] ,
.js .login-form span (
color: #686868;
width: 170px;

Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);
box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);

background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #989898));
background: -webkit-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -o-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #989898 100%);
background: linear-gradient(top, #ffffff 0%, #989898 100%);
}

При наведенні курсору миші на ці поля ми змінюватимемо їх тіні.

Login-form input[ type= text ] :hover ,
.login-form input[ type= password] :hover (
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6), 0px 0px 5px rgba(255, 255, 255, .5);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6), 0px 0px 5px rgba(255, 255, 255, .5);
box-shadow: 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
}

Для активного стану ми змінимо CSS3 градієнт на трохи світліший

Login-form input[ type= text ] :focus ,
.login-form input[ type= password] :focus (
background: #e1e1e1;
background : -moz-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background : -o-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background: -ms-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background: linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
}

Крок 4 - Кнопка Submit

Розташуємо кнопку справа, для цього поставимо їй float:right.

color: #445b0f;

Webkit-box-shadow: 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
-moz-box-shadow: 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
box-shadow: 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

При наведенні миші змінимо тіні, а активному стані - видалимо їх.

Login-form input[ type= submit] :hover (
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
box-shadow: 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
}

Додати зелений градієнт для кнопки.

Login-form input[ type= submit] ,
.js .login-form span.checked :before (
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #a5cd4e ) , color-stop(100% , #6b8f1a) ) ;
background: -webkit-linear-gradient (top, #a5cd4e 0% , #6b8f1a 100% ) ;
background: -o-linear-gradient (top, #a5cd4e 0% , #6b8f1a 100% ) ;
background: -ms-linear-gradient (top, #a5cd4e 0% , #6b8f1a 100% ) ;
background: linear-gradient (top, #a5cd4e 0% , #6b8f1a 100% ) ;
}

Крок 5 - Стилі для прапорця

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

Найпростіший спосіб, який я знайшов, це замінити прапорець тегом span.

Це буде працювати наступним чином: спочатку ми сховаємо прапорець і задамо такі стилі для тега span, щоб він виглядав як прапорець, а потім ми будемо оновлювати цей прапорець (позначений/не помічений) за допомогою jQuery.

Оскільки у деяких користувачів вимкнено JavaScript, потрібно додати резервний варіант. Для цього ми додаватимемо "js"клас у тег body за допомогою jQuery. Таким чином, якщо JavaScript буде увімкнено, клас "js" буде доданий до тега body при завантаженні сторінки, а якщо JavaScript вимкнено, то клас не буде доданий. Отже, тільки користувачі з підтримкою JavaScript будуть бачити стилізований прапорець.

Спочатку ми сховаємо прапорець.

.js .login-form input [ type = checkbox ] {
position: fixed;
left: -9999px;
}

Потім ми розмістимо в потрібному місці тег span.

.login-form span {
position: relative;
margin-top: 15px;
float: left;
}

Потім додамо деякі стилі для тега span (ширину, висоту, межу та ін.).

.js .login-form span {
width: 16px;
height: 16px;
cursor: pointer;

Webkit-border-radius : 2px;
-moz-border-radius : 2px;
border-radius : 2px;
}

Щоб створити стан "checked", в span ми вставимо маленький квадрат і помістимо його у центрі.

.js .login-form span .checked:before{
content: "" ;
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;

Webkit-box-shadow : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
-moz-box-shadow : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
box-shadow : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
}

Тег label ми розмістимо праворуч від прапорця та додамо деякі основні стилі (шрифт, колір тощо).

.login-form label {
position: absolute;
top: 1px;
left: 25px;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #e4e4e4;
}

Усі стилі, які мають клас "js" на початку, будуть застосовуватись лише якщо включена підтримка JavaScript.

Крок 6 - jQuery

Спочатку ми підключимо останню версію бібліотеки jQuery, використовуючи Google API, якщо ви хочете, ви можете розмістити її на власному сервері, це ваш вибір. Потім додайте наступний код у нижній частині HTML-файлу, перед закриваючим тегом .

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> script >
< script >
$( document ) .ready(function() {

// Check if JavaScript is enabled
$("body") .addClass("js") ;

// Make the checkbox checked on load
$(".login-form span") .addClass("checked") .children("input") .attr("checked", true) ;

// Click function
$(".login-form span") .on("click", function() {

if ($(this) .children("input") .attr("checked") ) {
$(this) .children("input") .attr("checked", false) ;
$(this) .removeClass("checked") ;
}

else {
$(this) .children("input") .attr("checked", true) ;
$(this) .addClass("checked") ;
}
} ) ;
} ) ;
script >

Спочатку ми додамо клас "js" у тег body.

Якщо у Вас виникли питання, то для якнайшвидшого отримання відповіді рекомендуємо скористатися нашим форумом

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

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

Для написання цього скрипта нам потрібно зрозуміти, що таке реєстрація користувача. Реєстрація користувача – це отримання даних реального користувача, обробка та зберігання даних.

Якщо пояснювати простими словами то реєстрація це лише запис і зберігання певних даних за якими ми можемо авторизувати користувача в нашому випадку - це Логін і Пароль.

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

Розглянемо структуру каталогів скриптів реалізації нашої реєстрації з авторизацією. Нам потрібно розбити скрипти на логічні складові. Модулі реєстрації та авторизації ми помістивши в окремий каталог. Також в окремі каталоги ми помістимо підключення до бази даних MySQL, файл з функціями користувача, файл стилів CSSі наш шаблон HTML. Ця структура дозволяє швидко орієнтуватися у скриптах. Уявіть собі, що у вас великий сайт з купою модулів і т.д. і якщо не буде порядку, то буде дуже складно щось знайти в такому бардаку.

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

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

Структура таблиці: bez_reg

-- -- Структура таблиці `bez_reg` -- CREATE TABLE IF NOT EXISTS `bez_reg` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` varchar(200) NOT NULL, `pass` varchar(32) NOT NULL , `salt` varchar(32) NOT NULL, `active_hex` varchar(32) NOT NULL, `status` int(1) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Тепер створимо основні скрипти для подальшої роботи.

Файл INDEX.PHP

Файл CONFIG.PHP

"); ?>

Файл 404.HTML

Помилка 404

На сторінці сталася помилка 404

Повернутись

Файл BD.PHP

Файл INDEX.HTML

Реєстрація користувачів PHP MySQL з активацією листом

Файл FUNCT.PHP

"."\n"; if(is_array($data)) ( foreach($data as $val) $err .= "

". $val ."

"."\n"; ) else $err .= "

". $data ."

"."\n"; $err .= ""."\n"; return $err; ) /**Проста обгортка для запитів до MySQL * @param string $sql */ function mysqlQuery($sql) ( $res = mysql_query($sql); /* Перевіряємо результат Це показує реальний запит, надісланий до MySQL, а також помилку. Зручно при налагодженні.*/ if(!$res) ( $message = "Неправильний запит: " . : " . $sql; die($message); ) return $res; ) /**Простий генератор солі * @param string $sql */ function salt() ( $salt = substr(md5(uniqid())), - 8);return $salt; )

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

Файл REG.PHP

Ви успішно реєструвалися! Будь ласка, активуйте свій акаунт!!"; //Здійснюємо активацію облікового запису if(isset($_GET["key"])) ( //Перевіряємо ключ $sql = "SELECT * FROM `". BEZ_DBPREFIX ."reg` WHERE `active_hex` = "". escape_str( $_GET["key"]) ."""; $res = mysqlQuery($sql); if(mysql_num_rows($res) == 0) $err = "Ключ активації не вірний!"; // Перевіряємо наявність помилок і виводимо користувачеві if(count($err) > 0) echo showErrorMessage($err);else ( //Отримуємо адресу користувача $row = mysql_fetch_assoc($res); $email = $row["login"]; //Активуємо акаунт користувача $sql = "UPDATE `". BEZ_DBPREFIX ."reg` SET `status` = 1 WHERE `login` = "". $email ."""; $res = mysqlQuery($sql); $title = "(!LANG:Ваш аккаунт на http://сайт успішно активований"; $message = "Поздравляю Вас, Ваш аккаунт на http://сайт успешно активирован"; sendMessageMail($email, BEZ_MAIL_AUTOR, $title, $message); /*Перенаправляем пользователя на нужную нам страницу*/ header("Location:". BEZ_HOST ."less/reg/?mode=reg&active=ok"); exit; } } /*Если нажата кнопка на регистрацию, начинаем проверку*/ if(isset($_POST["submit"])) { //Утюжим пришедшие данные if(empty($_POST["email"])) $err = "Поле Email не может быть пустым!"; else { if(!preg_match("/^!} [email protected](+\.)+(2,6)$/i", $_POST["email"])) $err = "Неправильно введено E-mail"."\n"; ) if(empty($_POST[ "pass"])) $err = "Поле Пароль не може бути порожнім"; if(empty($_POST["pass2"])) $err = "Поле Підтвердження пароля не може бути порожнім"; // Перевіряємо наявність помилок та виводимо користувачеві if(count($err) > 0) echo showErrorMessage($err);else ( /*Продовжуємо перевіряти введені дані Перевіряємо на збіг паролі*/ if($_POST["pass"] != $_POST["pass2" ]) $err = "Паролі не співпадають"; // Перевіряємо наявність помилок і виводимо користувачеві if(count($err) > 0) echo showErrorMessage($err); / $sql = "SELECT `login` FROM `". BEZ_DBPREFIX ."reg` WHERE `login` = "". escape_str($_POST["email"]) ."""; $res = mysqlQuery($sql); if(mysql_num_rows($res) > 0) $err = "На жаль Логін: ". $_POST["email"] ."зайнятий!"; // Перевіряємо наявність помилок і виводимо користувачеві if(count($err) > 0) echo showErrorMessage($err); else ( //Отримуємо ХЕШ солі $salt = salt(); //Солим пароль $pass = md5(md5($_POST["pass"]).$salt); /*Якщо все добре, пишемо дані в базу*/ $sql = "INSERT INTO `". BEZ_DBPREFIX ."reg` VALUES("", "" . escape_str($_POST["email"]) ."", "". $pass ."", "". $salt ."", "". md5($salt) ."", 0)"; res = mysqlQuery($sql); //Надсилаємо лист для активації $url = BEZ_HOST ."less/reg/?mode=reg&key=". md5($salt); $title = "(!LANG:Реєстрація на http:/ /сайт"; $message = "Для активации Вашего акаунта пройдите по ссылке ". $url .""; sendMessageMail($_POST["email"], BEZ_MAIL_AUTOR, $title, $message); //Сбрасываем параметры header("Location:". BEZ_HOST ."less/reg/?mode=reg&status=ok"); exit; } } } } ?>!}

Файл REG_FORM.HTML

Реєстрація користувачів PHP MySQL з активацією листом

E-mail *:
Пароль *:
Підтвердження пароля *:

Поля зі значком *обов'язкові для заповнення

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

Файл AUTH.PHP

0) echo showErrorMessage($err); else ( /*Створюємо запит на вибірку з бази даних для перевірки автентичності користувача*/ $sql = "SELECT * FROM `". BEZ_DBPREFIX ."reg` WHERE `login` = "". escape_str($_POST["email"])) ."" AND `status` = 1"; $res = mysqlQuery($sql); //Якщо логін співпадає, перевіряємо пароль if(mysql_num_rows($res) > 0) ( //Отримуємо дані з таблиці $row = mysql_fetch_assoc( $res);if(md5(md5($_POST["pass"]).$row["salt"]) == $row["pass"]) ( $_SESSION["user"] = true; // Скидаємо параметри header("Location:". BEZ_HOST ."less/reg/?mode=auth"); exit; ) else echo showErrorMessage("Невірний пароль!"); ) else echo showErrorMessage("Логін ". $_POST["email"] ."не знайдено!"); ) ) ?>

Для тих, у кого остання версія PHP викладаю цей скрипт з використанням PDOт.к. розширення MySQLзастаріло і видалено з нової версії PHP. Завантажити реєстрацію та авторизацію php mysql pdo

Архів оновлено 24.02.2015р.

Увага:Якщо ви використовуєте цей скрипт на локальному сервері типу DENWER,XAMPP, то не варто чекати листів на свою поштову скриньку. Листи лежать у заглушці sendmail. В Denwerви їх можете знайти на шляху Z:\tmp\!sendmail\відкрити дані файли ви зможете у будь-якому поштовому клієнті.

3.8 із 5

Буенос діаз, амігос!

Сьогодні ми з вами зробимо незвичайну форму реєстрації-авторизації-нагадування пароля.

Використовуватимемо jQuery та jQuery easing plugin, який розширює можливості анімації jQuery. Про цей плагін ми вже писали. Зараз будемо використовувати на реальному прикладі.

NB.Ця стаття має .

Суть того, що я хочу зробити, полягає в наступному. Всі три форми: реєстрація, авторизація та нагадування пароля – на сторінці є. Але дві з них не видно. При натисканні на відповідну псевдопосилання (про посилання всім раджу прочитати статтю Павла Марківніна) з'являється необхідна форма.

Загалом дивимося приклад, і все стане зрозуміло:

HTML та CSS

Код сторінки буде виглядати приблизно так:

наступні рядки в CSS

роблять можливим наступну картинку в браузері:

Кожен loginBlock містить у собі інпути, кнопки та блоки для показу помилок. Поглянемо на signin:

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

JavaScript

Перше, що ми робимо – на $(document).ready() вішаємо обробники кліків на псевдопосилання. У нас є три пари посилань, які повинні призводити до того самого результату, кожна пара має свій клас. По ньому ми й шукатимемо посилання:

$(document).ready(function() (
$("a.remindPass").click(function(e) (
e.preventDefault();
GoTo(2);
});
$("a.signin").click(function(e) (
e.preventDefault();
GoTo(1);
});
$("a.signup").click(function(e) (
e.preventDefault();
GoTo(0);
});
});

Функція GoTo(num) перемотуватиме #wr на потрібне значення лівого відступу. Тут спливає використання плагіну jQuery easing:

Function GoTo(num) (
margin = num * 382;
$("#wr").animate(( marginLeft: -margin ),
( duration: 800, easing: "easeInOutBack" ));
}

382px - ширина одного.loginBlock'a з урахуванням всіх відступів та бордерів.

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

Function SignUp() (
email = $("#email").val();
pass = $("#password").val();
passAgain = $("#passwordAgain").val();
if (!ValidEmail(email)) (
ShowError(0);
}
else (
if ((pass!="")&&(pass == passAgain)) (
if (!UserWithEmailExists(email)) (
//Register User
HideError()
}
) else (
ShowError(1);
}
}
}

Функція UserWithEmailExists(email) повинна надсилати запит до сервера, щоб дізнатися, чи є користувач із таким е-мейлом в системі. Якщо є, то повертати true, інакше false.

Тепер поговоримо про показ помилок та помилок. Виглядати це має приблизно так:

Помилка валідації емейлу:

Помилка збігу паролів:

Непомилка:

Для кожної помилки є код, кожна помилка відповідає своїй формі, тому можна завести наступний список констант:

Var er0 = "Неправильний формат email"a"; //0
var er1 = "Паролі не співпадають"; //0
var er2 = "Користувач з таким email" уже зареєстрований"; //0
var er3 = "Не вгадали пароль. Або email. Спробуйте ще раз"; //1
var er4 = "Користувача з таким email"oм у нас ще немає"; //2
var er5 = "Неправильний формат email"a"; //2

А сам показ помилок реалізує таку функцію:

Function HideError() (
$(".error").hide();
}
function ShowError(code) (
HideError();
switch (code) (
case 0:
$("#error0").html(er0).slideDown();
break;
case 1:
$("#error0").html(er1).slideDown();
break;
case 2:
$("#error0").html(er2).slideDown();
break;
case 3:
$("#error1").html(er3).slideDown();
break;
case 4:
$("#error2").html(er4).slideDown();
break;
case 5:
$("#error2").html(er5).slideDown();
break;
}
}

Аналогічним чином реалізується показ помилок.

Браузери

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

HTML Структура:

CSS Стилі:

Крок 1 - HTML-розмітка

Крок 2 - Загальні стилі

Крок 3 – Загальні стилі для полів форми

Крок 4 - Кнопка Submit

Крок 5 - Стилі для прапорця

Крок 6 - jQuery

Структура таблиці: bez_reg

Тепер створимо основні скрипти для подальшої роботи.

Файл INDEX.PHP

Файл CONFIG.PHP

Файл 404.HTML

Помилка 404

На сторінці сталася помилка 404

Файл BD.PHP

Файл INDEX.HTML

Файл FUNCT.PHP

Файл REG.PHP

Файл REG_FORM.HTML

Реєстрація користувачів PHP MySQL з активацією листом

Файл AUTH.PHP

Архів оновлено 24.02.2015р.

HTML та CSS

JavaScript

Вам також може сподобатися