AngularJS : Login - ajayupreti/Tech.Blogs GitHub Wiki

Today i decided to create a simple login form that will POST data to PHP & in the PHP file we can check the posted data against the values in our MySQL database.

Login conditions

There are only three points in the application where the login modal should appear:

  • When I’m on a welcome page and I click “Login”.
  • When I am not logged in and I attempt to visit a page that requires a login, e.g. my profile page.
  • When I attempt to make a request that requires a login, e.g. my session has expired whilst I’m attempting to post something.

Routing of pages

we'll be defining our application routes, for example, how to handle a request like /home. In order to define routes, we'll need an AngularJS module called ngRoute. To use ngRoute we first need to inject it or add it into our application. We'll use angular.module to add the ngRoute module to our app as shown below:

angular.module('myApp', [
  'ngRoute'
])

The ngRoute module has a component called $routeProvider which is useful for configuring routes. We'll inject $routeProvider into the config method of angular.module and define our routes in its callback function as shown below:

 
angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
     // Routes will be here
}]);

There are 3 files namely login.html, logger.js, login.php

  • In the index.html, there is login form
  • In the logger.js, Angular module & controller is defined
  • In the login.php, the validation is done (currently againt static values)

Step 1: Create your HTML (login.html)

  • We will be adding ng-app=”myapp” after the HTML tag -ng-app tells the angular, this block needs to be watched by the angular module.
  • After that, we need to add the controller to form tag like ng-controller=”empcontroller”
  • Lastly we will add ng-click=”insertdata()”
<html ng-app="myapp">
<head>
    <link rel="stylesheet" href="css/mystyles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
 <script type = "text/javascript" src = "js/logger.js"></script>
 
</head>
<body ng-controller = "empcontroller">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" ng-model="user" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" ng-model="pswd"/>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<div>
<input type = "button" value = "LOGIN" ng-click = "insertdata()" id = "butt"/>
</div>
</form>
</body>
</html>

Step 2: Let us create our external javascript file (logger.js)

  • First, we are going to define the module as “myapp”.(We have already included in HTML as mentioned above).
  • Next to that we will define our controller with two dependency, ‘$scope’ and ‘$http’. $scope is for current scope and $http for ajax submission.
  • Later we will define insertdata function and we will pass the validation status as a parameter.
var app = angua=r.module('myapp', [])
app.controller('empcontroller', function($scope, $http){
$scope.insertdata=function(){
console.log("triggered");
$http.post("login.php",{'theusername':$scope.user, 'thepassword':$scope.pswd})
.success(function(data, status, headers, config) {
var mssg = data.MESSAGE;
 
console.log(data);
if(data.trim()==='correct'){
 
window.location.href = 'homes.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to LOGIN';
})
 
}});

Step 3: let’s create our PHP (login.php) file that will help in connecting us to our local database (using WAMP or XAMP ).

Now we are going to look on PHP part of angular js with PHP. For that we can use the below code:

<?php
$con = new mysqli("localhost", "root", "", "login");
$data = json_decode(file_get_contents("php://input"));
$username = mysqli_real_escape_string($con, $data->theusername);
$password = mysqli_real_escape_string($con,$data->thepassword);
$query =("SELECT id FROM authentication WHERE username= '$username' and password= '$password'");
$que = mysqli_query($con, $query);
$count = mysqli_num_rows($que);
if($count==1){
echo 'correct';}
else{
echo 'wrong';
}
?>

Step 4. Create welcome.php

The user will be redirected to welcome.php after authenticated from API. Add success message on this page.

<h2>Welcome to Angularjs dashboard.</h2>
⚠️ **GitHub.com Fallback** ⚠️