Signup/Register using PHP/MySQLi in AngularJS

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.

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;

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>

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

1	<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');
                                }
                        });
                }
        });
});

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>

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

</div>

</div>

</div>

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

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;
        }
});

'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;
                                }
                        });
                }
        }
});

'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);
 
?>

<?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);

Signup/Register using PHP/MySQLi in AngularJS

Creating our Database

Updating our Main Page

Creating the link for Signup

Updating our Main Angular JS Script

Creating our Signup Form

Creating our Signup Controller

Creating our Signup Service

Creating our Signup API

Download : Signup/Register Full Code

Related Posts:

Leave a Comment Cancel Reply