article

Saturday, November 13, 2021

AngularJS Login with PHP MySQLi

AngularJS Login with PHP MySQLi

This tutorial used CDN for Bootstrap, Angular JS and Angular Route

CREATE TABLE `tbl_user` (
  `userid` int(11) NOT NULL,
  `fullname` varchar(50) NOT NULL,
  `username` varchar(100) NOT NULL,
  `email` varchar(150) NOT NULL,
  `password` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `tbl_user` (`userid`, `fullname`, `username`, `email`, `password`) VALUES
(1, 'cairocoder Ednalan', 'cairocoders', '', '123456'),
(2, 'tutorial101', 'tutorial101', '', '123456');

ALTER TABLE `tbl_user`
  ADD PRIMARY KEY (`userid`);

ALTER TABLE `tbl_user`
  MODIFY `userid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Login with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1 class="page-header text-center">AngularJS Login with PHP MySQLi</h1>
  <div ng-view></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/services/loginService.js"></script>
</body>
</html>
login.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//login.html
<div class="col-md-4 col-md-offset-4">
    <div class="login-panel panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
            </h3>
        </div>
        <div class="panel-body">
            <form role="form" name="logform">
                <fieldset> sdfsdfsf
                    <div class="form-group">
                        <input class="form-control" placeholder="Username" type="text" autofocus ng-model="user.username" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" placeholder="Password" type="password" ng-model="user.password" required>
                    </div>
                    <button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block" ng-disabled="logform.$invalid" ng-click="login(user)"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>
                </fieldset>
            </form>
        </div>
    </div>
 
    <div class="alert alert-danger text-center" ng-show="errorLogin">
        <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">×</span></button>
        {{ errorMsg }}
    </div>
 
    <div class="alert alert-success text-center" ng-show="successLogin">
        <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">×</span></button>
        {{ successMsg }}
    </div>
</div>
angular.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//angular.js
var app = angular.module('app', ['ngRoute']); //Routing - ngRoute module helps your application to become a Single Page Application.
 
app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'login.html',
        controller: 'loginCtrl'
    })
    .when('/home', {
        templateUrl: 'home.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});
js/services/loginService.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//js/services/loginService.js
'use strict';
 
app.factory('loginService', function($http){
    return{
        login: function(user, $scope){
            var validate = $http.post('login.php', user);
            validate.then(function(response){
                if(response.data.error == true){
                    $scope.successLogin = false;
                    $scope.errorLogin = true;
                    $scope.errorMsg = response.data.message;
                }
                else{
                    $scope.errorLogin = false;
                    $scope.successLogin = true;
                    $scope.successMsg = response.data.message;
                    setTimeout(function(){
                        window.location.href="http://localhost/devtest/angularjs/angularlogin/#/home";
                    },2000);
                }
            });
        }
    }
});
js/controller/loginCtrl.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//js/controller/loginCtrl.js
'use strict';
 
app.controller('loginCtrl', function($scope, loginService){
    $scope.errorLogin = false;
    $scope.successLogin = false;
 
    $scope.login = function(user){
        loginService.login(user, $scope);
    }
 
    $scope.clearMsg = function(){
        $scope.errorLogin = false;
        $scope.successLogin = false;
    }
});
login.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//login.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
 
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
$out = array('error' => false);
 
$user = json_decode(file_get_contents('php://input'));
 
$username = $user->username;
$password = $user->password;
 
$sql = "SELECT * FROM tbl_user WHERE username='$username' AND password='$password'";
$query = $conn->query($sql);
 
if($query->num_rows>0){
    $out['message'] = 'Login Successful';
}
else{
    $out['error'] = true;
    $out['message'] = 'Invalid Login';
}
 
echo json_encode($out);
?>

Posted by ednalan at 9:55 PM . Under .

Related Post