In this tutorial I will show how to create a registration form and also read data and delete data from the database mysqli
vuejs CDN https://vuejs.org/v2/guide/installation.html
https://vuejs.org/
Axios is a promise-based HTTP Client for node.js and the browser. https://axios-http.com/docs/intro using Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js https://axios-http.com/docs/post_example
CREATE TABLE `user` (
`user_id` bigint(20) NOT NULL,
`user_name` varchar(45) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`user_email` varchar(45) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`user_password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`user_id`, `user_name`, `user_email`, `user_password`) VALUES
(1, 'cairocoders', 'cairocoders@gmail.com', 'pass'),
(2, 'tutorial101.blogspot.com', 'cairocoders08@gmail.com', 'pass');
ALTER TABLE `user`
ADD PRIMARY KEY (`user_id`);
ALTER TABLE `user`
MODIFY `user_id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
//index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue js PHP MySQLi Registration</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header text-center">Vue js PHP MySQLi Registration</h1>
<div id="vueregapp">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><span class="glyphicon glyphicon-user"></span> User Registration</div>
<div class="panel-body">
<label>User Name:</label>
<input type="text" class="form-control" ref="username" v-model="regDetails.username" v-on:keyup="keymonitor">
<div class="text-center" v-if="errorUsername">
<span style="font-size:13px;">{{ errorUsername }}</span>
</div>
<label>Email:</label>
<input type="text" class="form-control" ref="email" v-model="regDetails.email" v-on:keyup="keymonitor">
<div class="text-center" v-if="errorEmail">
<span style="font-size:13px;">{{ errorEmail }}</span>
</div>
<label>Password:</label>
<input type="password" class="form-control" ref="password" v-model="regDetails.password" v-on:keyup="keymonitor">
<div class="text-center" v-if="errorPassword">
<span style="font-size:13px;">{{ errorPassword }}</span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary btn-block" @click="userReg();"><span class="glyphicon glyphicon-check"></span> Sign up</button>
</div>
</div>
<div class="alert alert-danger text-center" v-if="errorMessage">
<button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-alert"></span> {{ errorMessage }}
</div>
<div class="alert alert-success text-center" v-if="successMessage">
<button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-check"></span> {{ successMessage }}
</div>
</div>
<div class="col-md-8">
<h3>Users Table</h3>
<table class="table table-bordered table-striped">
<thead>
<th>Username</th>
<th>Email</th>
<th>Password</th>
<th>Delete</th>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{ user.user_name }}</td>
<td>{{ user.user_email }}</td>
<td>{{ user.user_password }}</td>
<td><button type="button" name="delete" class="btn btn-danger btn-xs delete" @click="deleteData(user.user_id);">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="vuejs.js"></script>
</body>
</html>
vuejs.js
//vuejs.js
var app = new Vue({
el: '#vueregapp',
data:{
successMessage: "",
errorMessage: "",
errorUsername: "",
errorEmail: "",
errorPassword: "",
users: [],
regDetails: {username: '', email: '', password: ''},
},
mounted: function(){
this.getAllUsers();
},
methods:{
getAllUsers: function(){
axios.get('action.php')
.then(function(response){
if(response.data.error){
app.errorMessage = response.data.message;
}
else{
app.users = response.data.users;
}
});
},
userReg: function(){
var regForm = app.toFormData(app.regDetails);
axios.post('action.php?action=register', regForm)
.then(function(response){
console.log(response);
if(response.data.username){
app.errorUsername = response.data.message;
app.focusUsername();
app.clearMessage();
}
else if(response.data.email){
app.errorEmail = response.data.message;
app.focusEmail();
app.clearMessage();
}
else if(response.data.password){
app.errorPassword = response.data.message;
app.errorEmail='';
app.focusPassword();
app.clearMessage();
}
else if(response.data.error){
app.errorMessage = response.data.message;
app.errorEmail='';
app.errorPassword='';
}
else{
app.successMessage = response.data.message;
app.regDetails = {email: '', password:''};
app.errorEmail='';
app.errorPassword='';
app.getAllUsers();
}
});
},
focusUsername: function(){
this.$refs.username.focus();
},
focusEmail: function(){
this.$refs.email.focus();
},
focusPassword: function(){
this.$refs.password.focus();
},
keymonitor: function(event) {
if(event.key == "Enter"){
app.userReg();
}
},
toFormData: function(obj){
var form_data = new FormData();
for(var key in obj){
form_data.append(key, obj[key]);
}
return form_data;
},
clearMessage: function(){
app.errorMessage = '';
app.successMessage = '';
},
deleteData: function(user_id){ //alert(user_id)
if(confirm("Are you sure you want to remove this data?")){
axios.post('action.php?action=delete&id='+ user_id +'', {
action:'delete',
}).then(function(response){
alert(response.data.message);
app.getAllUsers();
});
}
}
}
});
action.php
//action.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$out = array('error' => false, 'username'=> false, 'email'=> false, 'password' => false);
$action = 'alldata';
if(isset($_GET['action'])){
$action = $_GET['action'];
}
if($action == 'alldata'){
$sql = "select * from user";
$query = $conn->query($sql);
$users = array();
while($row = $query->fetch_array()){
array_push($users, $row);
}
$out['users'] = $users;
}
if($action == 'register'){
function check_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$username = check_input($_POST['username']);
$email = check_input($_POST['email']);
$password = check_input($_POST['password']);
if($username==''){
$out['username'] = true;
$out['message'] = "User Name is required";
}
elseif($email==''){
$out['email'] = true;
$out['message'] = "Email is required";
}
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$out['email'] = true;
$out['message'] = "Invalid Email Format";
}
elseif($password==''){
$out['password'] = true;
$out['message'] = "Password is required";
}
else{
$sql="select * from user where user_email='$email'";
$query=$conn->query($sql);
if($query->num_rows > 0){
$out['email'] = true;
$out['message'] = "Email already exist";
}
else{
$sql = "insert into user (user_name, user_email, user_password) values ('$username', '$email', '$password')";
$query = $conn->query($sql);
if($query){
$out['message'] = "User Added Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Could not add User";
}
}
}
}
if($action == 'delete'){
$del = $_GET['id'];
$sqldel = "DELETE FROM user WHERE user_id = '".$del."'";
$conn->query($sqldel);
$out['message'] = "Deleted $del";
}
$conn->close();
header("Content-type: application/json");
echo json_encode($out);
die();
?>
