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

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

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

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

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.