Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
CREATE TABLE `members` (
`memid` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(2, 'Airi', 'Satou'),
(3, 'Angelica', 'Ramos'),
(4, 'Ashton', 'Cox'),
(5, 'Bradley', 'Greer'),
(6, 'Brenden', 'Wagner');
ALTER TABLE `members`
ADD PRIMARY KEY (`memid`);
ALTER TABLE `members`
MODIFY `memid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Axios CRUD (Create, Read, Update and Delete) 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 Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi</h1>
<div id="vuejscrudmembers">
<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" @click="showEditModal = true; selectMember(member);"><span class="glyphicon glyphicon-edit"></span> Edit</button>
<button class="btn btn-danger" @click="showDeleteModal = true; selectMember(member);"><span class="glyphicon glyphicon-trash"></span> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<?php include('modal.php'); ?>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
//app.js
var app = new Vue({
el: '#vuejscrudmembers',
data:{
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
errorMessage: "",
successMessage: "",
members: [],
newMember: {firstname: '', lastname: ''},
clickMember: {}
},
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();
}
});
},
updateMember(){
var memForm = app.toFormData(app.clickMember);
axios.post('api.php?crud=update', memForm)
.then(function(response){
//console.log(response);
app.clickMember = {};
if(response.data.error){
app.errorMessage = response.data.message;
}
else{
app.successMessage = response.data.message
app.getAllMembers();
}
});
},
deleteMember(){
var memForm = app.toFormData(app.clickMember);
axios.post('api.php?crud=delete', memForm)
.then(function(response){
//console.log(response);
app.clickMember = {};
if(response.data.error){
app.errorMessage = response.data.message;
}
else{
app.successMessage = response.data.message
app.getAllMembers();
}
});
},
selectMember(member){
app.clickMember = member;
},
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 = '';
}
}
});
api.php
//api.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$out = array('error' => false);
$crud = 'read';
if(isset($_GET['crud'])){
$crud = $_GET['crud'];
}
if($crud == 'read'){
$sql = "select * from members";
$query = $conn->query($sql);
$members = array();
while($row = $query->fetch_array()){
array_push($members, $row);
}
$out['members'] = $members;
}
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";
}
}
if($crud == 'update'){
$memid = $_POST['memid'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$sql = "update members set firstname='$firstname', lastname='$lastname' where memid='$memid'";
$query = $conn->query($sql);
if($query){
$out['message'] = "Member Updated Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Could not update Member";
}
}
if($crud == 'delete'){
$memid = $_POST['memid'];
$sql = "delete from members where memid='$memid'";
$query = $conn->query($sql);
if($query){
$out['message'] = "Member Deleted Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Could not delete Member";
}
}
$conn->close();
header("Content-type: application/json");
echo json_encode($out);
die();
?>
modal.php
//modal.php
<!-- 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>
<!-- Edit Modal -->
<div class="myModal" v-if="showEditModal">
<div class="modalContainer">
<div class="editHeader">
<span class="headerTitle">Edit Member</span>
<button class="closeEditBtn pull-right" @click="showEditModal = false">×</button>
</div>
<div class="modalBody">
<div class="form-group">
<label>Firstname:</label>
<input type="text" class="form-control" v-model="clickMember.firstname">
</div>
<div class="form-group">
<label>Lastname:</label>
<input type="text" class="form-control" v-model="clickMember.lastname">
</div>
</div>
<hr>
<div class="modalFooter">
<div class="footerBtn pull-right">
<button class="btn btn-default" @click="showEditModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-success" @click="showEditModal = false; updateMember();"><span class="glyphicon glyphicon-check"></span> Save</button>
</div>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="myModal" v-if="showDeleteModal">
<div class="modalContainer">
<div class="deleteHeader">
<span class="headerTitle">Delete Member</span>
<button class="closeDelBtn pull-right" @click="showDeleteModal = false">×</button>
</div>
<div class="modalBody">
<h5 class="text-center">Are you sure you want to Delete</h5>
<h2 class="text-center">{{clickMember.firstname}} {{clickMember.lastname}}</h2>
</div>
<hr>
<div class="modalFooter">
<div class="footerBtn pull-right">
<button class="btn btn-default" @click="showDeleteModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-danger" @click="showDeleteModal = false; deleteMember(); "><span class="glyphicon glyphicon-trash"></span> Yes</button>
</div>
</div>
</div>
</div>
style.css
//style.css
.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;
}
.editHeader{
padding:10px;
background: #4CAF50;
color: #FFFFFF;
height:50px;
font-size:20px;
padding-left:15px;
}
.deleteHeader{
padding:10px;
background: #f44336;
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;
}
.closeEditBtn{
background: #4CAF50;
color: #FFFFFF;
border:none;
}
.closeDelBtn{
background: #f44336;
color: #FFFFFF;
border:none;
}
