<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue+PHP</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/c543e84baf.js" crossorigin="anonymous" ></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
</style>
<body>
<div id="app">
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-lg-12">
<p
class="text-center text-light display-4 pt-2"
style="font-size: 25px"
>
CRUD Application Using Vue.js, PHP & MySQLi
</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-lg-6">
<h3 class="text-info">Registered Users</h3>
</div>
<div class="col-lg-6">
<button class="btn btn-info float-right" @click="showAddModal=true">
<i class="fas fa-user"></i> Add New User
</button>
</div>
</div>
<hr class="bg-info" />
<div class="alert alert-danger" v-if="errorMsg">{{ errorMsg }}</div>
<div class="alert alert-success" v-if="successMsg">
{{ successMsg }}
</div>
<!-- Displaying Records -->
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center bg-info text-light">
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-center" v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td>
<a
href="#"
class="text-success"
@click="showEditModal=true;selectUser(user);"
><i class="fas fa-edit"></i
></a>
</td>
<td>
<a
href="#"
class="text-danger"
@click="showDeleteModal=true; selectUser(user);"
><i class="fas fa-trash-alt"></i
></a>
</td>
</tr>
<tr class="text-center">
<td>2</td>
<td>최군</td>
<td>1111@gmail.com</td>
<td>123-3456</td>
<td>
<a href="#" class="text-success"
><i class="fas fa-edit"></i
></a>
</td>
<td>
<a href="#" class="text-danger"
><i class="fas fa-trash-alt"></i
></a>
</td>
</tr>
<tr class="text-center">
<td>3</td>
<td>이군</td>
<td>1111@gmail.com</td>
<td>123-3456</td>
<td>
<a href="#" class="text-success"
><i class="fas fa-edit"></i
></a>
</td>
<td>
<a href="#" class="text-danger"
><i class="fas fa-trash-alt"></i
></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Add New User Model -->
<div id="overlay" v-if="showAddModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New User</h5>
<button type="button" class="close" @click="showAddModal=false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<form action="#" method="post">
<div class="form-group">
<input
type="text"
name="name"
class="form-control form-control-lg"
placeholder="Name"
v-model="newUser.name"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
class="form-control form-control-lg"
placeholder="E-Mail"
v-model="newUser.email"
/>
</div>
<div class="form-group">
<input
type="tel"
name="phone"
class="form-control form-control-lg"
placeholder="Phone"
v-model="newUser.phone"
/>
</div>
<div class="form-group">
<button
class="btn btn-info btn-block btn-lg"
@click="showAddModal=false; addUser(); clearMsg();"
>
Add User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End. Add New User Model -->
<!-- Edit User Model -->
<div id="overlay" v-if="showEditModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</h5>
<button type="button" class="close" @click="showEditModal=false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<form action="#" method="post">
<div class="form-group">
<input
type="text"
name="name"
class="form-control form-control-lg"
placeholder="Name"
v-model="currentUser.name"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
class="form-control form-control-lg"
placeholder="E-Mail"
v-model="currentUser.email"
/>
</div>
<div class="form-group">
<input
type="tel"
name="phone"
class="form-control form-control-lg"
placeholder="Phone"
v-model="currentUser.phone"
/>
</div>
<div class="form-group">
<button
class="btn btn-info btn-block btn-lg"
@click="showEditModal=false; updateUser(); clearMsg();"
>
Edit User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End. Edit User Model -->
<!-- Delete User Model -->
<div id="overlay" v-if="showDeleteModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete User</h5>
<button
type="button"
class="close"
@click="showDeleteModal=false"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<h4>Are you sure want to delete this user?</h4>
<h5>You are deleting '{{currentUser.name}}'</h5>
<hr />
<button
class="btn btn-danger btn-lg"
@click="showDeleteModal=false; deleteUser(); clearMsg();"
>
Yes
</button>
<button
class="btn btn-success btn-lg"
@click="showDeleteModal=false"
>
No
</button>
</div>
</div>
</div>
</div>
<!-- End. Delete User Model -->
</div>
<!-- google : axios cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"
integrity="sha512-quHCp3WbBNkwLfYUMd+KwBAgpVukJu5MncuQaWXgCrfgcxCJAq/fo+oqrRKOj+UKEmyMCG3tb8RB63W+EmrOBg=="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
errorMsg: false,
successMsg: false,
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
users: [],
newUser: { name: "", email: "", phone: "" },
currentUser: {},
},
mounted: function () {
this.getAllUsers();
},
methods: {
getAllUsers() {
axios
.get("http://k5566.co.kr/vue/tjson.php?action=read")
.then(function (response) {
if (response.data.eror) {
app.errorMsg = response.data.message;
} else {
app.users = response.data.users;
}
});
},
addUser() {
var formData = app.toFormData(app.newUser);
axios
.post("http://k5566.co.kr/vue/tjson.php?action=create", formData)
.then(function (response) {
app.newUser = { name: "", email: "", phone: "" };
if (response.data.eror) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
updateUser() {
var formData = app.toFormData(app.currentUser);
axios
.post("http://k5566.co.kr/vue/tjson.php?action=update", formData)
.then(function (response) {
app.currentUser = { name: "", email: "", phone: "" };
if (response.data.eror) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
deleteUser() {
var formData = app.toFormData(app.currentUser);
axios
.post("http://k5566.co.kr/vue/tjson.php?action=delete", formData)
.then(function (response) {
app.currentUser = { name: "", email: "", phone: "" };
if (response.data.eror) {
app.errorMsg = response.data.message;
} else {
app.successMsg = response.data.message;
app.getAllUsers();
}
});
},
toFormData(obj) {
var fd = new FormData();
for (var i in obj) {
fd.append(i, obj[i]);
}
return fd;
},
selectUser(user) {
app.currentUser = user;
},
clearMsg() {
app.errorMsg = "";
app.successMsg = "";
},
},
});
</script>
</body>
</html>
