Angular JS Simple Login using Ui-Router

Submitted by nurhodelta_17 on Thursday, January 25, 2018 - 15:51.

Getting Started

I've used CDN for Bootstrap, Angular JS and Ui-Router so you need internet connection for them to work.

Creating our Database

First we are going to create our MySQL Database and insert user data that we are going to use in this tutorial. 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. See 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');

index.html

This is the main view of our app. In here, we have declared all our dependencies and the javascripts that we have created.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <meta charset="utf-8">
        <title>Angular JS Simple Login using Ui-Router</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
</head>
<body>
<div class="container">
  <h1 class="page-header text-center">Angular JS Simple Login using Ui-Router</h1>
  <div ui-view></div>
</div>
<!-- Main Angular Script -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/controllers/homeCtrl.js"></script>
<!-- Services -->
<script src="js/services/loginService.js"></script>
<script src="js/services/sessionService.js"></script>
</body>
</html>

login.html

This template contains our login form and can be considered as the index view of our app.

<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 name="logform" ng-submit="login()">
                <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="submit" class="btn btn-lg btn-primary btn-block" ng-disabled="logform.$invalid"><span class="glyphicon glyphicon-log-in"></span> Login</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 landing page for a successful login and shows the user that logged into our app.

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

app.js

This is the main angular js script of our app where we assign our app name and the routes of our app.

var app = angular.module('app', ['ui.router']);
 
app.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/login');
    
    $stateProvider
        
        .state('login', {
            url: '/login',
            templateUrl: 'login.html',
            controller: 'loginCtrl'
        })
 
        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
              
});

loginCtrl.js

This is the controller for our login.html template.

'use strict';
 
app.controller('loginCtrl', function($scope, loginService, $location){
        //redirect back to home if user is logged in
        var connected = loginService.islogged();
        connected.then(function(response){
                if(response.data == 'true'){
                        $location.path('/home');
                }
        });
 
        $scope.errorLogin = false;
        
        $scope.login = function(){
                loginService.login($scope.user, $scope);
        }
 
        $scope.clearMsg = function(){
                $scope.errorLogin = false;
        }
});

homeCtrl.js

This is the controller for our home.html template.

'use strict';
 
app.controller('homeCtrl', function($scope, loginService, $location){
        //redirect user if not loggedin
        var connected = loginService.islogged();
        connected.then(function(response){
                if(response.data == 'false'){
                        $location.path('/login');
                }
        });
 
        //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 service that is responsible for our request relating to login members.

'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('/login');
                },
                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 service that is responsible for the sessions in our app both for local storage session and PHP session.

'use strict';
 
app.factory('sessionService', 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 api that checks the user that logged into our app.

<?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 api that checks for PHP session.

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

fetch.php

This is our PHP api that fetches logged in user details.

<?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 api that destroys our current user PHP session.

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

That ends this tutorial. Happy Coding :)

Add new comment

191 views