Login with PHP/MySQLi in AngularJS

Creating our Database

First, we are going to create our database and insert sample users to test our app.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as angular.

3. After creating a database, click the SQL and paste the below codes

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `members` (

`memid` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(30) NOT NULL,

`password` varchar(30) NOT NULL,

PRIMARY KEY(`memid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `members` (`memid`, `username`, `password`) VALUES
(1, 'neovic', 'devierte'),
(2, 'julyn', 'divinagracia'),
(3, 'gemalyn', 'cepe');

INSERT INTO `members` (`memid`, `username`, `password`) VALUES

(1, 'neovic', 'devierte'),

(2, 'julyn', 'divinagracia'),

(3, 'gemalyn', 'cepe');

Index.html

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://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>

<!DOCTYPE html>

<head>

<title>AngularJS Login with PHP/MySQLi</title>

</head>

<body>

<h1 class="page-header text-center">AngularJS Login with PHP/MySQLi</h1>

</div>

</body>

</html>

Login.html

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>
                        <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">&times;</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">&times;</span></button>
        {{ successMsg }}
    </div>
</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login

</h3>

</div>

</div>

</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>

Angular.js

JavaScript

var app = angular.module('app', ['ngRoute']);
 
app.config(function($routeProvider){
        $routeProvider
        .when('/', {
                templateUrl: 'login.html',
                controller: 'loginCtrl'
        })
        .when('/home', {
                templateUrl: 'home.html'
        })
        .otherwise({
                redirectTo: '/'
        });
});

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider){

$routeProvider

.when('/', {

templateUrl: 'login.html',

controller: 'loginCtrl'

})

.when('/home', {

templateUrl: 'home.html'

})

.otherwise({

redirectTo: '/'

});

LoginCtrl.js

JavaScript

'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;
        }
});

'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;

}

});

LoginService.js

service that sends post request to our PHP API for login.

php

'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;
                                }
                        });
                }
        }
});

'use strict';

app.factory('loginService', function($http){

return{

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;

}

});

}

});

Login.php

php

<?php
       
$conn = new mysqli("localhost", "root", "", "angular");
 
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 members 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);
 
?>

<?php

$conn = new mysqli("localhost", "root", "", "angular");

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 members 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);

Download Code Angular Login

Login with PHP/MySQLi in AngularJS

Creating our Database

Index.html

Login.html

Angular.js

LoginCtrl.js

LoginService.js

Login.php

Related Posts:

Leave a Comment Cancel Reply