Создание сайтов сегодня - это не просто HTML+CSS+IMG (Язык разметки, стиль и картинки), хотя и это пока еще часто встречается. Сегодня стандарт создания качественного и "солидного" сайта обязательно включает в себя процесс регистрации и последующей авторизации пользователей. Много людей пользуются готовыми движками типа Wordpress, Joomla и прочими, и конечно же не задумываются о скрытых процессах авторизации и верификации пользователей, да им это и не нужно, любой серьезный движок это поддерживает по умолчанию. А что же делать начинающим программистам, которые сами бы хотели создать проверку на существование юзера в базе данных?
Представляем вам пример простейшей проверки существования пользователя в базе данных с помощью AngulaJs. Для тех кто в теме цель статьи должна быть понятна, для всех остальных - обязательно перед занесением в базу нужно проверить, существует ли введенное имя пользователя. При этом пользователь моментально узнает о том, что его имя уникально, или такое уже есть. Мы будем использовать для этой цели такой инструмент, как AnguiarJs.
Скачать рабочий пример проверки юзера в базе с помощью Angular можно тут.
Содержание:
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `password` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
config.php и прописываем в него следующие строки:
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password, $dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
Готовый код:
<body ng-app='myapp'>
<div class="container" ng-controller='signup'>
<div id="div_reg">
<h1>Registration</h1>
<div>
<input type="text" class="textbox" id="txt_name" ng-model="name" placeholder="Name"/>
</div>
<!-- Username -->
<div>
<input type="text" class="textbox" id="txt_uname" ng-model="username" ng-keyup='checkUsername()' placeholder="Username" />
<div ng-class="addClass(unamestatus)" >{{ unamestatus }}</div>
</div>
<div>
<input type="password" class="textbox" id="txt_pwd" ng-model="password" placeholder="Password"/>
</div>
<div>
<input type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</div>
</body>
Код файла style.css:
/* Container */
.container{
margin: 0 auto;
width: 70%;
}
/* Registration */
#div_reg{
border: 1px solid gray;
border-radius: 3px;
width: 470px;
height: 370px;
box-shadow: 0px 2px 2px 0px gray;
margin: 0 auto;
}
#div_reg h1{
margin-top:0px;
font-weight: normal;
padding:10px;
background-color:cornflowerblue;
color:white;
font-family:sans-serif;
}
#div_reg div{
clear: both;
margin-top: 10px;
padding: 5px;
}
#div_reg .textbox{
width: 96%;
padding: 7px;
}
#div_reg input[type=submit]{
padding: 7px;
width: 100px;
background-color: lightseagreen;
border: 0px;
color: white;
}
/* Response */
.response{
padding: 6px;
display: block;
}
.hide{
display: none;
}
.exists{
color: green;
}
.not-exists{
color: red;
}
uname_check.php прописываем в него следующие строки:
<?php
include 'config.php';
$data = json_decode(file_get_contents("php://input"));
// Username
$uname = $data->username;
$resText = '';
if($uname != ''){
// Check username
$sel = mysqli_query($con,"select count(*) as allcount from users where username = '".$uname."' ");
$row = mysqli_fetch_array($sel);
$resText = "Available";
if($row['allcount'] > 0){
$resText = 'Not available';
}
}
echo $resText;
Определяем два метода:
Готовый код:
var fetch = angular.module('myapp', []);
fetch.controller('signup', ['$scope', '$http', function ($scope, $http) {
// Check username
$scope.checkUsername = function(){
$http({
method: 'post',
url: 'uname_check.php',
data: {username:$scope.username}
}).then(function successCallback(response) {
$scope.unamestatus = response.data;
});
}
// Set class
$scope.addClass = function(unamestatus){
if(unamestatus == 'Available'){
return 'response exists';
}else if(unamestatus == 'Not available'){
return 'response not-exists';
}else{
return 'hide';
}
}
}]);
Для демонстрации работы скрипта проверки юзера в базе данных приводим форму. Здесь в поле можно вводить любые имена, однако в базу данных уже занесены - yssyogesh, sona, vishal, sunil, vijay, anil, jiten. Так, что полезно будет потыкать по клавищам проверяя на существование юзера в базе данных с помощью Angular.
Используя приведенный выше скрипт, вы можете предупредить пользователя, существует ли введенное им "имя пользователя" в базе или нет. Во избежании ошибок записи, всегда проверяйте значение перед сохранением в таблицу базы данных.
Источник: makitweb.com