Table of Contents
Tutorial: Insert Data into MySQL Database using Vuejs in PHP with Source Code
Getting Started on How to Insert Data into MySQL Database using Vuejs
Insert Data into MySQL Database using Vuejs in PHP is getting all the data inputted in the form to be added to MySQL Database. This is the continuation of my tutorial, Vue.js Fetch Data from MySQL Database using PHP, wherein this time we are going to insert data into our database.
For database structure, please visit the previous tutorial.
Creating an Add Modal
First, we’re are going to create our add modal as well as our custom CSS.
1. Create a new file and name it as modal.php and paste the ff codes:
<!-- Add Modal -->
<div class="myModal" v-if="showAddModal">
<div class="modalContainer">
<div class="modalHeader">
<span class="headerTitle">Add New Member</span>
<button class="closeBtn pull-right" @click="showAddModal = false">×</button>
</div>
<div class="modalBody">
<div class="form-group">
<label>Firstname:</label>
<input type="text" class="form-control" v-model="newMember.firstname">
</div>
<div class="form-group">
<label>Lastname:</label>
<input type="text" class="form-control" v-model="newMember.lastname">
</div>
</div>
<hr>
<div class="modalFooter">
<div class="footerBtn pull-right">
<button class="btn btn-default" @click="showAddModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-primary" @click="showAddModal = false; saveMember();"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
</div>
</div>
</div>
</div>2. Create a new file and name it as style.css and paste the ff. styles:
.myModal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background: rgba(0, 0, 0, 0.4);
}
.modalContainer{
width: 555px;
background: #FFFFFF;
margin:auto;
margin-top:50px;
}
.modalHeader{
padding:10px;
background: #008CBA;
color: #FFFFFF;
height:50px;
font-size:20px;
padding-left:15px;
}
.modalBody{
padding:40px;
}
.modalFooter{
height:36px;
}
.footerBtn{
margin-right:10px;
margin-top:-9px;
}
.closeBtn{
background: #008CBA;
color: #FFFFFF;
border:none;
}Updating index.php
Next, we update our index to accomodate our modal and add error or success div.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js CRUD Operation using PHP/MySQLi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center">Vue.js CRUD Operation with PHP/MySQLi</h1>
<div id="members">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-12">
<h2>Member List
<button class="btn btn-primary pull-right" @click="showAddModal = true"><span class="glyphicon glyphicon-plus"></span> Member</button>
</h2>
</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-ok"></span> {{ successMessage }}
</div>
<table class="table table-bordered table-striped">
<thead>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</thead>
<tbody>
<tr v-for="member in members">
<td>{{ member.firstname }}</td>
<td>{{ member.lastname }}</td>
<td>
<button class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> Edit</button> <button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<?php include('modal.php'); ?>
</div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="app.js"></script>
</body>
</html>Setting up our Add API
In our api.php, add the following line after the if statement for our read.
if($crud == 'create'){
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$sql = "insert into members (firstname, lastname) values ('$firstname', '$lastname')";
$query = $conn->query($sql);
if($query){
$out['message'] = "Member Added Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Could not add Member";
}
}Updating a Vue Code
Lastly, we update our app.js which contains our vue code with the ff:
var app = new Vue({
el: '#members',
data:{
showAddModal: false,
errorMessage: "",
successMessage: "",
members: [],
newMember: {firstname: '', lastname: ''}
},
mounted: function(){
this.getAllMembers();
},
methods:{
getAllMembers: function(){
axios.get('api.php')
.then(function(response){
//console.log(response);
if(response.data.error){
app.errorMessage = response.data.message;
}
else{
app.members = response.data.members;
}
});
},
saveMember: function(){
//console.log(app.newMember);
var memForm = app.toFormData(app.newMember);
axios.post('api.php?crud=create', memForm)
.then(function(response){
//console.log(response);
app.newMember = {firstname: '', lastname:''};
if(response.data.error){
app.errorMessage = response.data.message;
}
else{
app.successMessage = response.data.message
app.getAllMembers();
}
});
},
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 = '';
}
}
});
You should now be able to add new row using vue.js.
That ends this tutorial. Happy Coding!
