Tutorial: Signup and Register using AngularJS in PHP/MySQLi with Source Code

Getting Started on Signup and Register using AngularJS

Signup and Register using AngularJS in PHP/MySQLi with Source Code is our tutorial for today. I’ve used CDN for Bootstrap, Angular JS and Angular Route, so you need an 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 how to create a login page. We’re going to be using the files we created in the previous tutorial.

Creating a Database on Signup and Register using AngularJS

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 the Main Page on Signup and Register using AngularJS

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 and Register using AngularJS

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

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

Updating a Main AngularJS Script

Next, we update angular.js to include a 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 a Signup and Registration Form using AngularJS

Next, we create a 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 a 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 API

Lastly, this is a 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);
 
?>