AngularJS Signup/Register using PHP/MySQLi

Submitted by nurhodelta_17 on Sunday, January 7, 2018 - 17:47.

Getting Started

I've used CDN for Bootstrap, Angular JS and Angular Route so you need internet connection for them to work. This tutorial is a continuation of the previous tutorial, Angular JS Login with Session using PHP/MySQLi, which discuss on how to create a login page. We're gonna be using the files we created in the previous tutorial.

Creating our Database

First, we're going to create our database. 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;

Updating our Main Page

Next, we update index.html by adding the ff. javascript files for our registration.

<script src="js/controllers/signupCtrl.js"></script>
<script src="js/services/signupService.js"></script>

Creating the link for Signup

Next, in the login.html, in the panel heading, add this to have a link to our registration form.

<a class="pull-right btn btn-default btn-xs" href="#/signup" style="color:black">Signup</a>

Updating our Main Angular JS Script

Next, we update angular.js to include our signup form.

var app = angular.module('app', ['ngRoute']);
 
app.config(function($routeProvider){
        $routeProvider
        .when('/', {
                templateUrl: 'login.html',
                controller: 'loginCtrl'
        })
        .when('/signup', {
                templateUrl: 'signup.html',
                controller: 'signupCtrl'
        })
        .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 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');
                                }
                        });
                }
        });
        //prevent going back to singup page
        var signupcompleted = ['/signup'];
        $rootScope.$on('$routeChangeStart', function(){
                if(signupcompleted.indexOf($location.path()) !=-1){
                        var signupsuccess = loginService.islogged();
                        signupsuccess.then(function(response){
                                if(response.data){
                                        $location.path('/home');
                                }
                        });
                }
        });
});

Creating our Signup Form

Next, we create our sign up form and we're gonna name it as signup.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-user"></span> Signup
                <a class="pull-right btn btn-default btn-xs" href="#/" style="color:black">Login</a>
            </h3>
        </div>
        <div class="panel-body">
                <form role="form" name="signupform">
                <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>
                    <div class="form-group">
                        <input class="form-control" placeholder="Firstname" type="text" ng-model="user.firstname" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" placeholder="Lastname" type="text" ng-model="user.lastname" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" placeholder="Address" type="text" ng-model="user.address" required>
                    </div>
                        <button type="button" class="btn btn-lg btn-primary btn-block" ng-disabled="signupform.$invalid" ng-click="signup(user)"><span class="glyphicon glyphicon-check"></span> Verify</button>
                </fieldset>
                </form>
        </div>
    </div>
 
    <div class="alert alert-danger text-center" ng-show="errorSignup">
        <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="successSignup">
        <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">&times;</span></button>
        {{ successMsg }}
    </div>
</div>

Creating our Signup Controller

Next step is to create the controller for our sign up and we're gonna name it as signupCtrl.js.

'use strict';
 
app.controller('signupCtrl', function($scope, signupService){
        $scope.errorSignup = false;
        $scope.successSignup = false;
        
        $scope.signup = function(user){
                signupService.signup(user, $scope);
        }
 
        $scope.clearMsg = function(){
                $scope.errorSignup = false;
                $scope.successSignup = false;
        }
});

Creating our Signup Service

Next, we create our sign up service and we're gonna name it as signupService.js

'use strict';
 
app.factory('signupService', function($http, $location, sessionService){
        return{
                signup: function(user, $scope){
                        var validate = $http.post('signup.php', user);
                        validate.then(function(response){
                                //console.log(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;
                                }
                        });
                }
        }
});

Creating our Signup API

Lastly, this is our Signup PHP code/api to insert user in our database.

<?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;
$firstname = $user->firstname;
$lastname = $user->lastname;
$address = $user->address;
 
$sql = "INSERT INTO members (username, password, firstname, lastname, address) VALUES ('$username', '$password', '$firstname', '$lastname', '$address')";
$query = $conn->query($sql);
 
if($query){
        $nid = $conn->insert_id;
        $out['user'] = uniqid('ang_');
        $_SESSION['user'] = $nid;
}
else{
        $out['error'] = true;
        $out['message'] = 'Signup Failed';
}
 
echo json_encode($out);
 
?>

That ends this tutorial. Happy Coding :)

Add new comment

585 views