April 25, 2017
AngularJS User Signup And Login Authentication Using PHP & MySQL
Hi, friends in this post we going to see how to do AngularJS User Signup And Login authentication using PHP & MySQL. Here we going to create a simple AngularJS web application that will have the following three functionality.
- Signup
- Login
- Logout
We will create an easy web application service using PHP. The data from easy service will be used to allow user authentication in our AngularJS web application.
Now we going to create the Login page. After the user enters the correct sequence of email or phone, and password, it will be verified from the credentials collected in our MySQL database. When login successfully it will cache the user credentials and stored in the session and it will automatically redirect to welcome page. All following pages browsed after login will have access to the user information. If failed login or logout, the app will automatically redirect to user login page.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>SoftAOX | AngularJS User Signup and Login Authentication Using PHP & MySQL</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="css/toaster.css" rel="stylesheet"> <style> body { padding-top: 100px; } </style> </head> <body> <div class="container"> <div data-ng-view="" id="ng-view" class="slide-animation"></div> </div> <toaster-container toaster-options="{'time-out': 4000}"></toaster-container> <!-- JavaScripts --> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script src="js/angular-animate.min.js"></script> <script src="js/toaster.js"></script> <script src="files/angularjs/myapp.js"></script> <script src="files/angularjs/input.js"></script> <script src="files/angularjs/mydirectives.js"></script> <script src="files/angularjs/controls.js"></script> </body> </html> |
signup.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.softaox.info/"><img src="img/softaox_logo.png"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/login">Log In</a></li> </ul> </div> <!--/.nav-collapse --> </div> </div> <h2 align="center">AngularJS User Signup And Login Authentication Using PHP & MySQL</h2> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form name="signupForm" class="form-horizontal" role="form"> <h3 align="center">Sign Up <small>It's free and always will be.</small></h3> <br/> <div class="form-group"> <input type="text" id="display_name" class="form-control input-lg" placeholder="Name" ng-model="signup.user_name"> </div> <div class="form-group"> <input type="text" class="form-control input-lg" placeholder="Phone" name="user_phone" ng-model="signup.user_phone"> </div> <div class="form-group"> <input type="text" class="form-control input-lg" placeholder="Address" ng-model="signup.user_address"> </div> <div class="form-group"> <input type="email" class="form-control input-lg" placeholder="Email" name="user_email" ng-model="signup.user_email" focus> <span ng-show="signupForm.user_email.$error.user_email" class="help-inline">Invalid email address</span> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" class="form-control input-lg" name="user_password" placeholder="Password" ng-model="signup.user_password" required> <span class="errorMessage" data-ng-show="signupForm.user_password.$dirty && signupForm.user_password.$invalid"> Enter Password.</span> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" class="form-control input-lg" name="confPassword" placeholder="Password Again" ng-model="signup.confPassword" password-match="signup.user_password" required> <span class="errorMessage" data-ng-show="signupForm.confPassword.$dirty && signupForm.confPassword.$error.required">Enter confirm password</span> <span style="color:#F00" class="errorMessage" data-ng-show="signupForm.confPassword.$dirty && signupForm.confPassword.$error.passwordNoMatch && !signupForm.confPassword.$error.required">Passwords do not match, please retype..</span> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6"><a href="#/login" class="btn btn-success btn-block btn-lg">Log In</a></div> <div class="col-xs-12 col-md-6"> <button type="submit" class="btn btn-primary btn-block btn-lg" ng-click="signUp(signup)" data-ng-disabled="signupForm.$invalid">Sign Up </button> </div> </div> </form> </div> </div> </div> |
login.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.softaox.info/"><img src="img/softaox_logo.png"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/signup">Sign Up</a></li> </ul> </div> <!--/.nav-collapse --> </div> </div> <h2 align="center">AngularJS User Signup and Login Authentication Using PHP & MySQL</h2> <div class="container"> <div class="row" style="margin-top:20px"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form role="form"> <fieldset> <h3 align="center">Log In</h3> <br/> <div class="form-group"> <input type="text" class="form-control input-lg" placeholder="Your Email or Phone" name="user_email" ng-model="login.user_email" required focus> </div> <div class="form-group"> <input type="password" class="form-control input-lg" placeholder="Password" ng-model="login.user_password" required> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="#/signup" class="btn btn-lg btn-primary btn-block">Sign Up</a> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <button type="submit" class="btn btn-lg btn-success btn-block" ng-click="sa_login(login)" data-ng-disabled="login_app.$invalid">Log In</button> </div> </div> </fieldset> </form> </div> </div> </div> |
home.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.softaox.info/"><img src="img/softaox_logo.png"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="" ng-click="logout();" target="_blank" rel="noopener noreferrer">Logout</a></li> </ul> </div> <!--/.nav-collapse --> </div> </div> <h1>Welcome, <span style="color:#f5a521;">{{user_name}}.</span></h1> <br/> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="well well-sm"> <div class="row"> <div class="col-sm-6 col-md-4"> <img src="img/user.png" alt="" class="img-rounded img-responsive" /> </div> <div class="col-sm-6 col-md-8"> <h5><span class="glyphicon glyphicon-user"></span> User Name: {{user_name}}</h5> <h5><span class="glyphicon glyphicon-user"></span> User ID: {{user_id}}</h5> <h5><span class="glyphicon glyphicon-envelope"></span> Email ID: {{user_email}}</h5> <!-- Split button --> <div class="btn-group"> <button type="button" ng-click="logout();" class="btn btn-primary">Logout </button> </div> </div> </div> </div> </div> </div> |
