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

Submitted by nurhodelta_17 on Wednesday, December 13, 2017 - 15:45.

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

Comments

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

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

Add new comment

About text formats