Angular JS Login with Session using PHP/MySQLi Tutorial

Submitted by nurhodelta_17 on Tuesday, January 26, 2021 - 16:17.

This tutorial tackles how to create a login page using Angular JS and set SESSION with PHP/MySQLi. Angular JS is a javascript framework maintained by Google and is capable of creating Single-Page Applications. In this tutorial, we'll set up PHP Session to prevent users from going into our homepage if not authenticated.

Getting Started

I've have used CDN for following :

Boostrap
Angular JS
Angular Route

Since I have used CDN's for the plugins/libraries/frameworks, this means you will be needing an internet connection in order to work the scripts below properly.

Creating our Database

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

Open phpMyAdmin.
Click databases, create a database and name it as angular.
After creating a database, click the SQL and paste the below codes. See the image below for detailed instruction.

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

INSERT INTO `members` (`memid`, `username`, `password`, `firstname`, `lastname`, `address`) VALUES
(1, 'neovic', 'devierte', 'Neovic', 'Devierte', 'Silay City'),
(2, 'julyn', 'divinagracia', 'Julyn', 'Divinagracia', 'E.B. Magalona'),
(3, 'gemalyn', 'cepe', 'Gemalyn', 'Cepe', 'Bohol');

You can then use the ff login details:

Username: neovic
Password: devierte

Username: gemalyn
Password: cepe

Username: julyn
Password: divinagracia

index.html

This is the main page of our app.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>AngularJS Login with Session using 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 Session using 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/controllers/homeCtrl.js"></script>
<script src="js/services/loginService.js"></script>
<script src="js/services/sessionService.js"></script>
</body>
</html>

login.html

This contains our login form.

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

home.html

This is our homepage after a successful login.

<div class="row">
        <div class="col-md-4 col-md-offset-4">
                <h2>Welcome to Homepage </h2>
                <h4>User Info:</h4>
                <p>Firstname: {{ user.firstname }}</p>
                <p>Lastname: {{ user.lastname }}</p>
                <p>Address: {{ user.address }}</p>
                <p>Username: {{ user.username }}</p>
                <p>Password: {{ user.password }}</p>
                <a href="" class="btn btn-danger" ng-click="logout()"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
        </div>
</div>

angular.js

This is the main Angular js of our app.

var app = angular.module('app', ['ngRoute']);
 
app.config(function($routeProvider){
        $routeProvider
        .when('/', {
                templateUrl: 'login.html',
                controller: 'loginCtrl'
        })
        .when('/home', {
                templateUrl: 'home.html',
                controller: 'homeCtrl'
        })
        .otherwise({
                redirectTo: '/'
        });
});
 
app.run(function($rootScope, $location, loginService){
        //prevent going to homepage if not loggedin
        var routePermit = ['/home'];
        $rootScope.$on('$routeChangeStart', function(){
                if(routePermit.indexOf($location.path()) !=-1){
                        var connected = loginService.islogged();
                        connected.then(function(response){
                                if(!response.data){
                                        $location.path('/');
                                }
                        });
                        
                }
        });
        //prevent going back to login page if session is set
        var sessionStarted = ['/'];
        $rootScope.$on('$routeChangeStart', function(){
                if(sessionStarted.indexOf($location.path()) !=-1){
                        var cantgoback = loginService.islogged();
                        cantgoback.then(function(response){
                                if(response.data){
                                        $location.path('/home');
                                }
                        });
                }
        });
});

loginCtrl.js

This contains our angular controller for login.html.

'use strict';
 
app.controller('loginCtrl', function($scope, loginService){
        $scope.errorLogin = false;
        
        $scope.login = function(user){
                loginService.login(user, $scope);
        }
 
        $scope.clearMsg = function(){
                $scope.errorLogin = false;
        }
});

homeCtrl.js

This is our angular controller for home.html.

'use strict';
 
app.controller('homeCtrl', ['$scope', 'loginService', function($scope, loginService){
        //logout
        $scope.logout = function(){
                loginService.logout();
        }
        
        //fetch login user
        var userrequest = loginService.fetchuser();
        userrequest.then(function(response){
                $scope.user = response.data[0];
        });
 
}]);

loginService.js

This is our angular service for our login.

'use strict';
 
app.factory('loginService', function($http, $location, sessionService){
        return{
                login: function(user, $scope){
                        var validate = $http.post('login.php', user);
                        validate.then(function(response){
                                var uid = response.data.user;
                                if(uid){
                                        sessionService.set('user',uid);
                                        $location.path('/home');
                                }
                                
                                else{
                                        $scope.successLogin = false;
                                        $scope.errorLogin = true;
                                        $scope.errorMsg = response.data.message;
                                }
                        });
                },
                logout: function(){
                        sessionService.destroy('user');
                        $location.path('/');
                },
                islogged: function(){
                        var checkSession = $http.post('session.php');
                        return checkSession;
                },
                fetchuser: function(){
                        var user = $http.get('fetch.php');
                        return user;
                }
        }
});

sessionService.js

This is our angular service that handles our session.

'use strict';
 
app.factory('sessionService', ['$http', function($http){
        return{
                set: function(key, value){
                        return sessionStorage.setItem(key, value);
                },
                get: function(key){
                        return sessionStorage.getItem(key);
                },
                destroy: function(key){
                        $http.post('logout.php');
                        return sessionStorage.removeItem(key);
                }
        };
}]);

login.php

This is our PHP code for login.

<?php
 
session_start();
        
$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){
        $row = $query->fetch_array();
        $out['message'] = 'Login Successful';
        $out['user'] = uniqid('ang_');
        $_SESSION['user'] = $row['memid'];
}
else{
        $out['error'] = true;
        $out['message'] = 'Invalid Login';
}
 
echo json_encode($out);
 
?>

session.php

This is our PHP code is checking if the session has been set.

<?php
        session_start();
        if(isset($_SESSION['user'])){
                echo 'authentified';
        }
?>

fetch.php

This is our PHP code in fetching the details of the logged-in user.

<?php
        session_start();
 
        $conn = new mysqli("localhost", "root", "", "angular");
 
        $output = array();
        $sql = "SELECT * FROM members WHERE memid = '".$_SESSION['user']."'";
        $query=$conn->query($sql);
        while($row=$query->fetch_array()){
                $output[] = $row;
        }
 
        echo json_encode($output);
?>

logout.php

Lastly, this is our PHP code in destroying our current PHP Session.

<?php
        session_start();
        session_destroy();
        session_commit();
?>

That ends this tutorial.

Happy Coding :)

Comments

excellent

I used this code. I wanted to list my data in another table. For this purpose I added code. But I did not succeed fully. I added 'controller' and 'service'. The 'datalist.js' code looks like this (the result is NOT obtained with this code.):


'use strict';

app.controller('datalist', ['$scope', 'listServices', function($scope, listServices){
	
	var listeistek = listServices.listele();
	listeistek.then(function(response){
		$scope.listem = response.data ; 
	});

}]);

Alternative codes for 'datalist.js' are (the result is obtained with this code):


'use strict';

app.controller('datalist', ['$scope', 'listServices', function($scope, listServices){
	
	var listeistek = listServices.listele();
	listeistek.then(function(response){
		$scope.listem = response.data[0] ; //only one record fetch
	});

}]);

The 'listServices.js' code looks like this:


'use strict';

app.factory('listServices', function($http, $location, sessionService){
	return{
		listele: function(){
			var datalistem = $http.get('fetchListe.php');
			return datalistem;
		}
		
	}
});

The 'fetchListe.php' code looks like this:


$row['ID'],
				 "AH_ID"=>$row['AH_ID'],
				 "TARIH"=>$row['TARIH'],
				 "HASTA_ID"=>$row['HASTA_ID'],
				 "AD"=>$row['AD'],
				 "SOYAD"=>$row['SOYAD'],
				 "YAS"=>$row['YAS'],"AHX"=>$row['AHX']);
}
echo json_encode($data);

?>

The result of the 'fetchListe.php' file is:

[{"ID":"1","AH_ID":"MEMIS KEDICI","TARIH":"16:56:24","HASTA_ID":"1575922","AD":"MIRAC","SOYAD":"SAHIN","YAS":"8","AHX":"MEMIS KEDICI"},{"ID":"2","AH_ID":"MEMIS KEDICI","TARIH":"16:56:10","HASTA_ID":"1192888","AD":"MUHAMMET","SOYAD":"SAHIN","YAS":"11","AHX":"MEMIS KEDICI"}, {"ID":"3","AH_ID":"MEMIS KEDICI","TARIH":"16:27:34","HASTA_ID":"1763536","AD":"MUAMMER","SOYAD":"GUMUS","YAS":"67","AHX":"MEMIS KEDICI"}]

The 'angular.js' code looks like this:


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

app.config(function($routeProvider){
	$routeProvider
	.when('/', {
		templateUrl: 'login.html',
		controller: 'loginCtrl'
	})
	.when('/home', {
		templateUrl: 'home.html',
		controller: 'homeCtrl'
	})
	.when('/listele', {
		templateUrl: 'listele.html',
		controller: 'datalist'
	})
	.otherwise({
		redirectTo: '/'
	});
});

app.run(function($rootScope, $location, loginService){
	//prevent going to homepage if not loggedin
	var routePermit = ['/home'];
	$rootScope.$on('$routeChangeStart', function(){
		if(routePermit.indexOf($location.path()) !=-1){
			var connected = loginService.islogged();
			connected.then(function(response){
				if(!response.data){
					$location.path('/');
				}
			});
			
		}
	});
	//prevent going back to login page if sessino is set
	var sessionStarted = ['/'];
	$rootScope.$on('$routeChangeStart', function(){
		if(sessionStarted.indexOf($location.path()) !=-1){
			var cantgoback = loginService.islogged();
			cantgoback.then(function(response){
				if(response.data){
					$location.path('/home');
				}
			});
		}
	});
});

The 'listele.html' code looks like this:



	
		listele .html
		ID: {{ listem.ID }}
		AD: {{ listem.AD }}
		SOYAD: {{ listem.SOYAD }}
		YAS: {{ listem.YAS }}
		TARİH: {{ listem.TARIH }}
		AİLE HEKİMİ: {{ listem.AHX }}
		
		 Exit
		
		
                
                    {{c.ID}}
                    {{c.AD}}
                    {{c.SOYAD}}
                    {{c.TARIH}}\
                    {{c.YAS}}

I've got 'one record' successfully. But I have not been able to list all the data with 'ng-repeat'! Where did I make a mistake?

...

wrong layout, you lost the table tag in template: 'listele.html'

Log in or register to post comments
4307 views

Search