Creating A Registration And Login Using AngularJS - Part 2

Submitted by razormist on Friday, February 10, 2017 - 19:37.

In this tutorial we will create a login form using AngularJS. Last time in my previous tutorial Creating A Registration And Login Using AngularJS - Part 1 we already created a sign up form. This time we will continue on the project that we left behind, and we will add a login code to make this application complete. So let's start coding.. Creating the login form This is where the user will input their account for login. To do that open any kind of text editor, then copy/paste the code below name it "index.php"

<!DOCTYPE html>
<html lang = "en">
        <head>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
                <script src = "js/angular.js"></script>
                <script src = "js/loginapp.js"></script>
        </head>
<body ng-app = "myModule" ng-controller = "myController">
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class = "row">
                <div class = "col-md-4"></div>
                <div class = "col-md-4 well">
                        <form ng-submit = "loginForm()">
                        <h3 class  = "text-primary">Creating A Registration And Login Using AngularJS - Part 2</h3>
                        <hr style = "border-top:1px dotted #000;"/>
                        <h3>Member Login</h3><a href =  "signup.php" class = "pull-right">Sign up</a>
                        <br />
                        <div class = "form-group">
                                <label>Username</label>
                                <input type = "text" class = "form-control" ng-model = "username" ng-required = "true"/>
                        </div>
                        <div class = "form-group">
                                <label>Password</label>
                                <input type = "password" class = "form-control" ng-model = "password" ng-required = "true"/>
                        </div>
                        <center><div class = "text-danger" ng-model = "result">{{result}}</div></center>
                        <br />
                        <div class = "form-group">
                                <button class = "btn btn-primary form-control"><span class = "glyphicon glyphicon-log-in"></span> Login</button>
                        </div>
                        </form>
                </div>
        </div>
</body> 
</html>

The code above will generate the request of the user if the account is correct. The Login Script This is where the data of an user will be processed. Copy/paste the code below then name it "loginapp.js"

'use strict';
 
var app = angular.module("myModule", [])
                                                            .controller("myController", function($scope, $http){
                                                                        $scope.loginForm = function(){
                                                                                $scope.result = "";
                                                                                var request = $http({
                                                                                        method: "POST",
                                                                                        url: "login_query.php",
                                                                                        data: {
                                                                                                username : $scope.username,
                                                                                                password: $scope.password
                                                                                        },
                                                                                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                                                                                });
                                                                                request.then(function(response){
                                                                                        console.log(response);
                                                                                        if(response.data == "true"){
                                                                                                $scope.username = "";
                                                                                                $scope.password = "";
                                                                                                window.location = "login.php";
                                                                                        }else{
                                                                                                $scope.result = "Invalid username or Password";
                                                                                        }
                                                                                });
                                                                        };
                                                                 });

The code above will processed the value of an input, then will be send to a php server. The Login Query This is where the data will be check if the user is already a member. To do that copy/paste the code below then name it "login_query.php"

<?php
        $conn = new mysqli("localhost", "root", "", "db_member") or die(mysqli_error());
        $postdata = file_get_contents("php://input");
    $request = json_decode($postdata);
        $username = $request->username;
        $password = $request->password;
        $query = $conn->query("SELECT * FROM `member` WHERE `username` = '$username' && `password` = '$password'") or die(mysqli_error());
        $valid = $query->num_rows;
        $fetch = $query->fetch_array();
        if($valid > 0){
                session_start();
                $_SESSION['mem_id'] = $fetch['mem_id'];
                echo "true";
        }else{
                echo "false";
        }
?>

The code above will receive the data from the angularjs directives, then will be decoded by json script and store the value in the variable simultaneously. After that it will check by the SQL query to check if the user is already a member. Creating a Home Form This is where the user will go after login. So copy/paste the code below then name it "login.php"

<!DOCTYPE html>
<?php
        session_start();
        if(!ISSET($_SESSION['mem_id'])){
                header("location:index.php");
        }
?>
<html lang = "en">
        <head>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
        </head>
        <body>
                <nav class = "navbar navbar-default">
                        <div class = "container-fluid">
                                <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
                        </div>
                </nav>
                <div class = "row">
                        <div class = "col-md-4"></div>
                        <div class = "col-md-4 well">
                                <h3 class  = "text-primary">Creating A Registration And Login Using AngularJS - Part 2</h3>
                                <hr style = "border-top:1px dotted #000;"/>
                                <br /><br />
                                <?php
                                        $conn = new mysqli("localhost", "root", "", "db_member") or die(mysqli_error());
                                        $query = $conn->query("SELECT * FROM `member` WHERE `mem_id` = '$_SESSION[mem_id]'") or die(mysqli_error()); 
                                        $fetch = $query->fetch_array();
                                ?>
                                <center><h3 class = "text-info">Welcome: </h3><h3><?php echo $fetch['firstname']." ".$fetch['lastname'] ?></h3></center>
                                <br />
                                <a class = "btn btn-danger" href = "logout.php"><span class = "glyphicon glyphicon-log-out"></span> Logout</a>
                        </div>
                </div>
        </body>
</html>

The Logout Script This is where all the session of user will be dispose to log out properly. To do that copy/paste the code below and name it "logout.php"

<?php
        session_start();
        session_unset(mem_id);
        header("location:index.php");
?>

There you have we created a login form using AngularJS. I hope that this tutorial help you to your projects. For more tutorials and updates just kindly visit this site. Enjoy Coding!!

Add new comment

68 views