Интерактивность с пользователями — одна из самых важных задач web-программиста.
В данном посте я хотел бы остановится на блоке «авторизация», но данный «метод» можно применить для множества различных задач.
Идея заключается в том, что бы при каждом нажатии клавиши проверять логин (введенный пользователем) с логинами хранящимися в БД. В том случае, если введенный логин соответствует логину хранимому в БД, подсвечивать input зеленным цветом, в противном случае — красным.
Как это выглядит:
Поиграться можно здесь — nikitascr.ks8.ru/for_habr/authorization
Итак, взглянем на код:
Ничего особо сложного и интересного.
Данный скрипт сравнивает то, что ввел пользователь с данными который хранятся в БД, и если пользователь ввел все верно возвращает «ok» Ajax скрипту, в противном случае возвращает «error».
И как я уже писал выше, тестовый полигон — nikitascr.ks8.ru/for_habr/authorization
В данном посте я хотел бы остановится на блоке «авторизация», но данный «метод» можно применить для множества различных задач.
Идея заключается в том, что бы при каждом нажатии клавиши проверять логин (введенный пользователем) с логинами хранящимися в БД. В том случае, если введенный логин соответствует логину хранимому в БД, подсвечивать input зеленным цветом, в противном случае — красным.
Как это выглядит:
Поиграться можно здесь — nikitascr.ks8.ru/for_habr/authorization
Итак, взглянем на код:
1) Сss
input {
outline:none;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
input:focus {
border: #40c0ff;
box-shadow: 0 0 10px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 10px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 10px rgba(81, 203, 238, 1);
}
Ничего особо сложного и интересного.
2) PHP скрипт, который все это обрабатывает
<?php
if(isset($_POST['login'])){
//В БД все в нижнем регистре, поэтому перевожу
$login = strtolower($_POST['login']);
//Файл с настройками коннекта к БД
require_once('stores.php');
if (!$database = mysqli_connect($db_host, $db_user, $db_password, $db_db)){
echo 'Ошибка соединения к БД!'; exit();}
//Открываем соединение
else{
if(!$res = mysqli_query($database, "SELECT `login` FROM `users`")) {
echo 'Ошибка запроса на выборку данных!'; exit(); }
else {
while($all_login = mysqli_fetch_assoc($res))
if($all_login[login] == $login)
//Если в БД есть такой логин, то переменная login_true = 1;
$login_true = 1;
if($login_true == 1) echo 'ok';
else echo 'error';
}
}
}
?>
Данный скрипт сравнивает то, что ввел пользователь с данными который хранятся в БД, и если пользователь ввел все верно возвращает «ok» Ajax скрипту, в противном случае возвращает «error».
И собственно Ajax скрипт (с помощью фреймворка JQuery)
<sсript type="text/javascript" src="jquery-1.6.2.min.js"> </sсript>
<sсript type="text/javascript">
//При каждом нажатии клавиши в input элементе
$('#a_login').keyup(function() {
//Берем данные с input Элемента
login_user = $('#a_login').val();
$.ajax({
url : 'authorization.php',
type : 'POST', //метод запроса
//Передаем введенные пользователем данные в PHP скрипт
data : {login : login_user},
//если PHP отработал верно
success : function(xhr, data, textStatus){
if(xhr == 'ok'){ //Если логин введен верно
$('#a_login').css('box-shadow','0 0 10px rgba(0, 255, 0, 1)');
$('#a_login').css('-webkit-box-shadow','0 0 10px rgba(0, 255, 0, 1)');
$('#a_login').css('-moz-box-shadow','0 0 10px rgba(0, 255, 0, 1)');
}
else if(xhr == 'error') { //Если такого логина не существует
$('#a_login').css('box-shadow','0 0 10px rgba(255, 0, 0, 1)');
$('#a_login').css('-webkit-box-shadow','0 0 10px rgba(255, 0, 0, 1)');
$('#a_login').css('-moz-box-shadow','0 0 10px rgba(255, 0, 0, 1)');
}
//При какой то ошибке
else alert('Ошибка авторизации!');
},
//В случае, если PHP скрипт отработал с ошибкой
error : function(xhr, textStatus, errorObj){
alert('Произошла критическая ошибка!');
},
});
});
<sсript>
И как я уже писал выше, тестовый полигон — nikitascr.ks8.ru/for_habr/authorization
