Login sử dụng Angularjs + PHP + MySQL + Bootstrap
Lượt xem: 5953
Các bước thực hiện như sau:
Bước 1. Tạo cơ sở dữ liệu (database)
Tạo database với tên là "angularjslogin"
CREATE DATABASE angularjslogin;
Bước 2. Tạo bảng và dữ liệu
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
insert into `user`(`id`,`user_name`,`password`) values (1,'dandev','demo');
Bước 4. Tạo kết nối csdl với file config.php
Kết nối cơ sở dữ liệu Mysql với PDO
<?php
/*
author:dandev
AuthorURI:dandev.net
File: config.php
*/
$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "angularjslogin";
//Connect with database
try
{
$DBcon = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
$DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
echo "ERROR : ".$e->getMessage();
}
?>
Bước 5. Tạo file index.php chứa form login và nhúng bootstrap và angularjs
<?php
/*
author:dandev
AuthorURI:dandev.net
File: config.php
File: index.php
*/
?>
<!DOCTYPE html >
<html lang="en" >
<head >
<meta charset="utf-8" >
<meta name="robots" content="noindex" >
<title > Code Login kết hợp Angularjs+PHP+MySQL+Bootstrap</title >
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script >
</head >
<body ng-app="AngularJSLogin" ng-controller="AngularJSLoginController as loginCtrl" >
<div class="container" >
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" >
<div class="panel panel-success" >
<div class="panel-heading" >
<div class="panel-title" > Code Login kết hợp Angularjs+PHP+MySQL+Bootstrap</div >
</div >
<div style="padding-top:30px" class="panel-body" >
<form name="login" ng-submit="loginCtrl.loginForm()" class="form-horizontal" method="POST" >
<div style="margin-bottom: 25px" class="input-group" >
<span class="input-group-addon" > <i class="glyphicon glyphicon-user" > </i > >
<input type="text" id="inputusername" class="form-control" required autofocus ng-model="loginCtrl.inputData.username" >
</div >
<div style="margin-bottom: 25px" class="input-group" >
<span class="input-group-addon">></i></span >
<input type="password" id="inputpassword" class="form-control" required ng-model="loginCtrl.inputData.password" >
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-success pull-left"> class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
× </button>
<span class="glyphicon glyphicon-hand-right"></span>> {{errorMsg}}
</div>
</form>
</div>
</div>
</div>
</div>
<script type=text/javascript">
angular.module('AngularJSLogin', [])
.controller('AngularJSLoginController', ['$scope', '$http', function($scope, $http) {
this.loginForm = function() {
var user_data='user_name=' +this.inputData.username+'&password='+this.inputData.password;
$http({
method: 'POST',
url: 'login.php',
data: user_data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data);
if ( data.trim() === 'OK') {
window.location.href = 'welcome.php';
} else {
$scope.errorMsg = "Tên đăng nhập hoặc mật khẩu không đúng";
}
})
}
}]);
</script>
</body>
</html>
Bước 6. Tạo file login.php
<?php
/*
author:dandev
AuthorURI:dandev.net
File: config.php
File: index.php
*/
//include database connection file
require_once 'config.php';
// verifying user from database using PDO
$stmt = $DBcon->prepare("SELECT user_name, password from user WHERE user_name='".$_POST['user_name']."' && password='".$_POST['password']."'");
$stmt->execute();
$row = $stmt->rowCount();
if ($row > 0){
echo "OK";
} else{
echo 'ERROR';
}
?>
Bước 7. Tạo file welcome.php
<?php
/*
author:dandev
AuthorURI:dandev.net
File: config.php
*/
?>
<h1> Chào mừng bạn đến với Login sử dụng Angularjs </h1>
Vậy là bạn đã xây dựng xong ứng dụng login sử dụng Angularjs kết hợp PHP MySQL và Bootstrap
Bạn có thể download source code tại đây. Hoặc xem demo tại đây