Vue.js User Registration/Sign up with PHP/MySQLi

Getting Started

I've use Bootstrap CDN in this tutorial, so you need internet connection for it to work.

Creating our Database

1. Open phpMyAdmin. 2. Click databases, create a database and name it as vuetot. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
  1. CREATE TABLE `users` (
  2. `userid` INT(11) NOT NULL AUTO_INCREMENT,
  3. `email` VARCHAR(150) NOT NULL,
  4. `password` VARCHAR(50) NOT NULL,
  5. PRIMARY KEY(`userid`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
database sql

index.php

This is our index which contains our registration form and also our users table for you to check if registration is successful.
  1. <!DOCTYPE html>
  2. <title>Vue.js Registration with PHP/MySQLi</title>
  3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  4. </head>
  5. <div class="container">
  6. <h1 class="page-header text-center">Vue.js Registration with PHP/MySQLi</h1>
  7. <div id="register">
  8. <div class="col-md-4">
  9.  
  10. <div class="panel panel-primary">
  11. <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> User Registration</div>
  12. <div class="panel-body">
  13. <label>Email:</label>
  14. <input type="text" class="form-control" ref="email" v-model="regDetails.email" v-on:keyup="keymonitor">
  15. <div class="text-center" v-if="errorEmail">
  16. <span style="font-size:13px;">{{ errorEmail }}</span>
  17. </div>
  18. <label>Password:</label>
  19. <input type="password" class="form-control" ref="password" v-model="regDetails.password" v-on:keyup="keymonitor">
  20. <div class="text-center" v-if="errorPassword">
  21. <span style="font-size:13px;">{{ errorPassword }}</span>
  22. </div>
  23. </div>
  24. <div class="panel-footer">
  25. <button class="btn btn-primary btn-block" @click="userReg();"><span class="glyphicon glyphicon-check"></span> Sign up</button>
  26. </div>
  27. </div>
  28.  
  29. <div class="alert alert-danger text-center" v-if="errorMessage">
  30. <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
  31. <span class="glyphicon glyphicon-alert"></span> {{ errorMessage }}
  32. </div>
  33.  
  34. <div class="alert alert-success text-center" v-if="successMessage">
  35. <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
  36. <span class="glyphicon glyphicon-check"></span> {{ successMessage }}
  37. </div>
  38.  
  39. </div>
  40.  
  41. <div class="col-md-8">
  42. <h3>Users Table</h3>
  43. <table class="table table-bordered table-striped">
  44. <th>User ID</th>
  45. <th>Email</th>
  46. <th>Password</th>
  47. </thead>
  48. <tr v-for="user in users">
  49. <td>{{ user.userid }}</td>
  50. <td>{{ user.email }}</td>
  51. <td>{{ user.password }}</td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. </div>
  56. </div>
  57. </div>
  58. <script src="vue.js"></script>
  59. <script src="axios.js"></script>
  60. <script src="app.js"></script>
  61. </body>
  62. </html>

app.js

  1. var app = new Vue({
  2. el: '#register',
  3. data:{
  4. successMessage: "",
  5. errorMessage: "",
  6. errorEmail: "",
  7. errorPassword: "",
  8. users: [],
  9. regDetails: {email: '', password: ''},
  10. },
  11.  
  12. mounted: function(){
  13. this.getAllUsers();
  14. },
  15.  
  16. methods:{
  17. getAllUsers: function(){
  18. axios.get('api.php')
  19. .then(function(response){
  20. if(response.data.error){
  21. app.errorMessage = response.data.message;
  22. }
  23. else{
  24. app.users = response.data.users;
  25. }
  26. });
  27. },
  28.  
  29. userReg: function(){
  30. var regForm = app.toFormData(app.regDetails);
  31. axios.post('api.php?action=register', regForm)
  32. .then(function(response){
  33. console.log(response);
  34. if(response.data.email){
  35. app.errorEmail = response.data.message;
  36. app.focusEmail();
  37. app.clearMessage();
  38. }
  39. else if(response.data.password){
  40. app.errorPassword = response.data.message;
  41. app.errorEmail='';
  42. app.focusPassword();
  43. app.clearMessage();
  44. }
  45. else if(response.data.error){
  46. app.errorMessage = response.data.message;
  47. app.errorEmail='';
  48. app.errorPassword='';
  49. }
  50. else{
  51. app.successMessage = response.data.message;
  52. app.regDetails = {email: '', password:''};
  53. app.errorEmail='';
  54. app.errorPassword='';
  55. app.getAllUsers();
  56. }
  57. });
  58. },
  59.  
  60. focusEmail: function(){
  61. this.$refs.email.focus();
  62. },
  63.  
  64. focusPassword: function(){
  65. this.$refs.password.focus();
  66. },
  67.  
  68. keymonitor: function(event) {
  69. if(event.key == "Enter"){
  70. app.userReg();
  71. }
  72. },
  73.  
  74. toFormData: function(obj){
  75. var form_data = new FormData();
  76. for(var key in obj){
  77. form_data.append(key, obj[key]);
  78. }
  79. return form_data;
  80. },
  81.  
  82. clearMessage: function(){
  83. app.errorMessage = '';
  84. app.successMessage = '';
  85. }
  86.  
  87. }
  88. });

api.php

This is our PHP API that contains our registration code.
  1. <?php
  2.  
  3. $conn = new mysqli("localhost", "root", "", "vuetot");
  4.  
  5. if ($conn->connect_error) {
  6. die("Connection failed: " . $conn->connect_error);
  7. }
  8.  
  9. $out = array('error' => false, 'email'=> false, 'password' => false);
  10.  
  11. $action = 'read';
  12.  
  13. if(isset($_GET['action'])){
  14. $action = $_GET['action'];
  15. }
  16.  
  17.  
  18. if($action == 'read'){
  19. $sql = "select * from users";
  20. $query = $conn->query($sql);
  21. $users = array();
  22.  
  23. while($row = $query->fetch_array()){
  24. array_push($users, $row);
  25. }
  26.  
  27. $out['users'] = $users;
  28. }
  29.  
  30. if($action == 'register'){
  31.  
  32. function check_input($data) {
  33. $data = trim($data);
  34. $data = stripslashes($data);
  35. $data = htmlspecialchars($data);
  36. return $data;
  37. }
  38.  
  39. $email = check_input($_POST['email']);
  40. $password = check_input($_POST['password']);
  41.  
  42. if($email==''){
  43. $out['email'] = true;
  44. $out['message'] = "Email is required";
  45. }
  46.  
  47. elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
  48. $out['email'] = true;
  49. $out['message'] = "Invalid Email Format";
  50. }
  51.  
  52. elseif($password==''){
  53. $out['password'] = true;
  54. $out['message'] = "Password is required";
  55. }
  56.  
  57. else{
  58. $sql="select * from users where email='$email'";
  59. $query=$conn->query($sql);
  60.  
  61. if($query->num_rows > 0){
  62. $out['email'] = true;
  63. $out['message'] = "Email already exist";
  64. }
  65.  
  66. else{
  67. $sql = "insert into users (email, password) values ('$email', '$password')";
  68. $query = $conn->query($sql);
  69.  
  70. if($query){
  71. $out['message'] = "User Added Successfully";
  72. }
  73. else{
  74. $out['error'] = true;
  75. $out['message'] = "Could not add User";
  76. }
  77. }
  78. }
  79. }
  80.  
  81. $conn->close();
  82.  
  83. header("Content-type: application/json");
  84. echo json_encode($out);
  85. die();
  86.  
  87.  
  88. ?>
That ends this tutorial. Happy Coding :)

Comments

Submitted byAdrian Morales (not verified)on Thu, 02/22/2018 - 22:26

Nice code! Could you make some video-tutorial about this code?

Add new comment