PHP - OOP Login using Angular JS

Submitted by: 
Language: 
Visitors have accessed this post 887 times.

Getting Started

Please take note that CSS and angular.js used in this tutorial are hosted so you need internet connection for them to work.

Creating our Database

1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular_db.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

  1. CREATE TABLE `user` (
  2. `userid` INT(11) NOT NULL AUTO_INCREMENT,
  3. `username` VARCHAR(50) NOT NULL,
  4. `password` VARCHAR(50) NOT NULL,
  5. PRIMARY KEY(`userid`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  7.  
  8. INSERT INTO `user` (`userid`, `username`, `password`) VALUES
  9. (1, 'neovic', 'devierte');

angularlogin

Notice that I have inserted one row. You can use this as sample user in our login.
Username: neovic
Password: devierte

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.

  1. <?php
  2.  
  3. $conn = new mysqli("localhost", "root", "", "angular_db");
  4.  
  5. if ($conn->connect_error) {
  6. die("Connection failed: " . $conn->connect_error);
  7. }
  8.  
  9. ?>

index.php

This contains our login form.

  1. <?php
  2. if(isset($_SESSION['user'])){
  3. header('location:home.php');
  4. }
  5. ?>
  6. <!DOCTYPE html>
  7. <html ng-app="myapp" ng-controller="controller">
  8. <head>
  9. <title>PHP - OOP Login using Angular JS</title>
  10. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  11. <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>" rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s...</a>
  12. </head>
  13. <body>
  14. <div class="container">
  15. <div class="row">
  16. <div class="col-md-6 col-md-offset-3">
  17. <center><h2>PHP - OOP Login using Angular JS</h2></center>
  18. </div>
  19. </div>
  20. <hr>
  21. <div class="row" id="loginform">
  22. <div class="col-md-4 col-md-offset-4">
  23. <div class="login-panel panel panel-primary">
  24. <div class="panel-heading">
  25. <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Sign In</h3>
  26. </div>
  27. <div class="panel-body">
  28. <form ng-submit="myFunct()">
  29. <fieldset>
  30. <div class="form-group">
  31. <input class="form-control" placeholder="Username" name="username" id="username" type="text" ng-model="username" autofocus>
  32. </div>
  33. <div class="form-group">
  34. <input class="form-control" placeholder="Password" name="password" id="password" type="password" ng-model="password">
  35. </div>
  36. <button type="submit" class="btn btn-lg btn-primary btn-block" ng-click="login()"><span class="glyphicon glyphicon-log-in"></span> {{btnName}}</button>
  37. </fieldset>
  38. </form>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="row">
  44. <div class="col-md-4 col-md-offset-4">
  45. <div class="alert alert-success"><center>{{alert}}</center></div>
  46. </div>
  47. </div>
  48. </div>
  49. <script src="myangular.js"></script>
  50. </body>
  51. </html>

myangular.js

This is our angular js code.

  1. var app = angular.module("myapp", []);
  2. app.controller("controller", function($scope, $http) {
  3. $scope.btnName = "Login";
  4. $scope.alert = "Input User Credentials";
  5. $scope.login = function() {
  6. if ($scope.username == null) {
  7. alert("Please input Username");
  8. }
  9. else if ($scope.password == null) {
  10. alert("Please input Password");
  11. }
  12. else {
  13. $scope.btnName = "Logging in...";
  14. $scope.alert = "Checking Account. Please Wait...";
  15. $http.post(
  16. "login.php", {
  17. 'username': $scope.username,
  18. 'password': $scope.password,
  19. }
  20. ).success(function(data) {
  21. if(data!=''){
  22. setTimeout(function() {
  23. $scope.alert = "Login Failed. User not Found!";
  24. $scope.btnName = "Login";
  25. $scope.$apply();
  26. }, 3000);
  27. }
  28. else{
  29. setTimeout(function() {
  30. $scope.username = null;
  31. $scope.password = null;
  32. $scope.alert = "Login Successful. Welcome!";
  33. $scope.btnName = "Login";
  34. $scope.$apply();
  35. }, 3000);
  36. setTimeout(function() {
  37. window.location.reload();
  38. }, 4000);
  39.  
  40. }
  41. });
  42. }
  43. }
  44. });

login.php

This is our PHP login code.

  1. <?php
  2. include('conn.php');
  3. $data = json_decode(file_get_contents("php://input"));
  4. $username = mysqli_real_escape_string($conn, $data->username);
  5. $password = mysqli_real_escape_string($conn, $data->password);
  6. $query=$conn->query("select * from user where username='$username' and password='$password'");
  7. if($query->num_rows > 0){
  8. $row=$query->fetch_array();
  9. $_SESSION['user']=$row['userid'];
  10. }
  11. else{
  12. echo "1";
  13. }
  14.  
  15. ?>

home.php

This is our goto page after a successful login.

  1. <?php
  2. if(!isset($_SESSION['user'])){
  3. header('location:index.php');
  4. }
  5. include('conn.php');
  6. $query=$conn->query("select * from user where userid='".$_SESSION['user']."'");
  7. $row=$query->fetch_array();
  8. ?>
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>PHP - OOP Login using Angular JS</title>
  13. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  14. <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>" rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s...</a>
  15. </head>
  16. <body>
  17. <div class="container">
  18. <div class="row">
  19. <div class="col-md-6 col-md-offset-3">
  20. <center><h2>PHP - OOP Login using Angular JS</h2></center>
  21. </div>
  22. </div>
  23. <hr>
  24. <div class="row">
  25. <div class="col-md-4 col-md-offset-4">
  26. <h2><center>Welcome, <?php echo $row['username']; ?></center></h2>
  27. <center><a href="logout.php" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Logout</a></center>
  28. </div>
  29. </div>
  30. </div>
  31. </body>
  32. </html>

logout.php

Lastly, this is logout to destroy our user session.

  1. <?php
  2. header('location:index.php');
  3. ?>

That ends this tutorial. If you have any comments, question, or suggesstions, feel free to write it below or message me. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.