PHP - OOP Sign Up using angular.js

Submitted by: 
Language: 
Visitors have accessed this post 776 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. `firstname` VARCHAR(30) NOT NULL,
  6. `lastname` VARCHAR(30) NOT NULL,
  7. `email` VARCHAR(60) NOT NULL,
  8. PRIMARY KEY(`userid`)
  9. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

angularsignup

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 is our index that contains our sign up form and our users table.

  1. <!DOCTYPE html>
  2. <html ng-app="sign_app" ng-controller="controller" ng-init="showdata()">
  3. <meta charset="UTF-8">
  4. <title>PHP - OOP Sign Up using angular.js</title>
  5. <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">
  6. <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>
  7. </head>
  8. <div class="container">
  9. <center><h1 class="page-header">PHP - OOP Sign Up using angular.js</h1></center>
  10. <div class="row">
  11. <div class="col-md-4">
  12. <form ng-submit="myFunc()">
  13. <h3>Signup Form</h3>
  14. <hr>
  15. <div class="form-group">
  16. <label for="email">Email</label>
  17. <input type="text" class="form-control" id="email" name="email" ng-model="email" placeholder="<a href="mailto:[email protected]" rel="nofollow">[email protected]</a>">
  18. </div>
  19. <div class="form-group">
  20. <label for="username">Username</label>
  21. <input type="text" class="form-control" id="username" name="username" ng-model="username">
  22. </div>
  23. <div class="form-group">
  24. <label for="password">Password</label>
  25. <input type="password" class="form-control" id="password" name="password" ng-model="password">
  26. </div>
  27. <div class="form-group">
  28. <label for="repassword">Re-type Password</label>
  29. <input type="password" class="form-control" id="repassword" name="repassword" ng-model="repassword">
  30. </div>
  31. <div class="{{alert}}">
  32. <center>{{alerttext}}</center>
  33. </div>
  34. <hr>
  35. <button type="submit" class="btn btn-success" ng-click="register()"><span class="glyphicon glyphicon-pencil"></span> {{btnName}}</button>
  36. </form>
  37. </div>
  38. <div class="col-md-8">
  39. <h3>User List</h3>
  40. <table class="table table-bordered table-striped">
  41. <th>Email</th>
  42. <th>Username</th>
  43. <th>Password</th>
  44. </thead>
  45. <tr ng-repeat="user in user">
  46. <td>{{user.email}}</td>
  47. <td>{{user.username}}</td>
  48. <td>{{user.password}}</td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. </div>
  53. </div>
  54. </div>
  55. <script src="myangular.js"></script>
  56. </body>
  57. </html>

myangular.js

This is our angular js code.

  1. var app = angular.module("sign_app", []);
  2. app.controller("controller", function($scope, $http, $window) {
  3. $scope.alert = "alert alert-success";
  4. $scope.alerttext = "Fill up all the Fields";
  5. $scope.btnName = "Register";
  6. var email = $window.document.getElementById('email');
  7. var username = $window.document.getElementById('username');
  8. var password = $window.document.getElementById('password');
  9. var repassword = $window.document.getElementById('repassword');
  10. email.focus();
  11. $scope.register = function() {
  12. if ($scope.email == null){
  13. $scope.alerttext="Please input email";
  14. email.focus();
  15. }
  16. else if ($scope.username == null) {
  17. $scope.alerttext="Please input username";
  18. username.focus();
  19. }
  20. else if ($scope.password == null) {
  21. $scope.alerttext="Please input password";
  22. password.focus();
  23. }
  24. else if($scope.password!=$scope.repassword){
  25. $scope.alerttext = "Password didn't match";
  26. repassword.focus();
  27. }
  28. else {
  29. $scope.btnName = "Checking";
  30. setTimeout(function() {
  31. $http.post(
  32. "register.php", {
  33. 'email': $scope.email,
  34. 'username': $scope.username,
  35. 'password': $scope.password,
  36. }
  37. ).success(function(data) {
  38. if(data==1){
  39. $scope.alerttext="Invalid email format";
  40. email.focus();
  41. }
  42. else if(data==2){
  43. $scope.alerttext="Only letters, numbers and underscore allowed";
  44. username.focus();
  45. }
  46. else if(data==3){
  47. $scope.alerttext="Registration Successful";
  48. $scope.showdata();
  49. $scope.email="";
  50. $scope.username="";
  51. $scope.password="";
  52. $scope.repassword="";
  53. email.focus();
  54. $scope.btnName = "Register";
  55. }
  56. else{
  57. $scope.alerttext="Registration Failed";
  58. }
  59. });
  60. }, 3000);
  61. }
  62. }
  63. $scope.showdata = function() {
  64. $http.get("fetch.php")
  65. .success(function(data) {
  66. $scope.user = data;
  67. });
  68. }
  69. $scope.enter = function(keyEvent) {
  70. if (keyEvent.which === 13){
  71. register();
  72. }
  73. }
  74. });

fetch.php

This is our php code in fetching our table rows.

  1. <?php
  2. include('conn.php');
  3. $output = array();
  4. $query = $conn->query("select * from user");
  5. if ($query->num_rows > 0) {
  6. while ($row = $query->fetch_array()) {
  7. $output[] = $row;
  8. }
  9. echo json_encode($output);
  10. }
  11. ?>

register.php

Lastly, this is php register code.

  1. <?php
  2. include('conn.php');
  3. $data = json_decode(file_get_contents("php://input"));
  4. $email = mysqli_real_escape_string($conn, $data->email);
  5. $username = mysqli_real_escape_string($conn, $data->username);
  6. $password = mysqli_real_escape_string($conn, $data->password);
  7. $msg="";
  8. if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  9. $msg=1;
  10. }
  11. elseif (!preg_match("/^[a-zA-Z0-9_]*$/",$username)) {
  12. $msg=2;
  13. }
  14. else{
  15. $password=md5($password);
  16. if ($conn->query("insert into user (email, username, password) values ('$email', '$username', '$password')")) {
  17. $msg=3;
  18. } else {
  19. $msg=4;
  20. }
  21. }
  22. echo json_encode($msg);
  23. ?>

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


Comments

There is no defaults values for $firstname and $lastname. So need to put them in the insert.

  1. $firstname = 'firstname';
  2. $lastname = 'lastname';
  3. $sql = "INSERT INTO user (email, username, firstname, lastname, password) VALUES ('$email', '$username', '$firstname', '$lastname', '$password')";
  4.  
  5. if ($conn->query($sql) === TRUE) {
  6. $msg=3;
  7.  
  8. } else {
  9. $msg=4;
  10. echo "Error: " . $sql . "<br>" . $conn->error;
  11. }
  12. <php>

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.