212 lines
5.6 KiB
PHP
212 lines
5.6 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PHP Insert Update Delete with Vue.js</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>
|
|
<style>
|
|
.modal-mask {
|
|
position: fixed;
|
|
z-index: 9998;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
display: table;
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
.modal-wrapper {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="crudApp">
|
|
<br />
|
|
<h3 align="center">Aplikacja do inwentaryzacji książek</h3>
|
|
<br />
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h3 class="panel-title">Inwetaryzacja książek</h3>
|
|
</div>
|
|
<div class="col-md-6" align="right">
|
|
<input type="button" class="btn btn-success btn-xs" @click="openModel" value="Add" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<tr>
|
|
<th>Tytul</th>
|
|
<th>Autor</th>
|
|
<th>Rok</th>
|
|
<th>Edit</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
<tr v-for="row in allData">
|
|
<td>{{ row.tytul }}</td>
|
|
<td>{{ row.autor }}</td>
|
|
<td>{{ row.rok }}</td>
|
|
<td><button type="button" name="edit" class="btn btn-primary btn-xs edit" @click="fetchData(row.id)">Edit</button></td>
|
|
<td><button type="button" name="delete" class="btn btn-danger btn-xs delete" @click="deleteData(row.id)">Delete</button></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="myModel">
|
|
<transition name="model">
|
|
<div class="modal-mask">
|
|
<div class="modal-wrapper">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" @click="myModel=false"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title">{{ dynamicTitle }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Tytul</label>
|
|
<input type="text" class="form-control" v-model="tytul" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Autor</label>
|
|
<input type="text" class="form-control" v-model="autor" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Rok</label>
|
|
<input type="text" class="form-control" v-model="rok" />
|
|
</div>
|
|
<br />
|
|
<div align="center">
|
|
<input type="hidden" v-model="hiddenId" />
|
|
<input type="button" class="btn btn-success btn-xs" v-model="actionButton" @click="submitData" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
|
|
var application = new Vue({
|
|
el:'#crudApp',
|
|
data:{
|
|
allData:'',
|
|
myModel:false,
|
|
actionButton:'Insert',
|
|
dynamicTitle:'Dodaj Książkę',
|
|
},
|
|
methods:{
|
|
fetchAllData:function(){
|
|
axios.post('action.php', {
|
|
action:'fetchall'
|
|
}).then(function(response){
|
|
application.allData = response.data;
|
|
});
|
|
},
|
|
|
|
openModel:function(){
|
|
application.tytul = '';
|
|
application.autor = '';
|
|
application.rok = '';
|
|
application.actionButton = "Insert";
|
|
application.dynamicTitle = "Dodaj Książkę";
|
|
application.myModel = true;
|
|
},
|
|
|
|
submitData:function(){
|
|
if(application.tytul != '' && application.autor != '' && application.rok != '')
|
|
{
|
|
if(application.actionButton == 'Insert')
|
|
{
|
|
axios.post('action.php', {
|
|
action:'insert',
|
|
tytul:application.tytul,
|
|
autor:application.autor,
|
|
rok:application.rok
|
|
}).then(function(response){
|
|
application.myModel = false;
|
|
application.fetchAllData();
|
|
application.tytul = '';
|
|
application.autor = '';
|
|
application.rok = '';
|
|
alert(response.data.message);
|
|
});
|
|
}
|
|
if(application.actionButton == 'Update')
|
|
{
|
|
axios.post('action.php', {
|
|
action:'update',
|
|
tytul : application.tytul,
|
|
autor : application.autor,
|
|
rok : application.rok,
|
|
hiddenId : application.hiddenId
|
|
}).then(function(response){
|
|
application.myModel = false;
|
|
application.fetchAllData();
|
|
application.tytul = '';
|
|
application.autor = '';
|
|
application.rok = '';
|
|
application.hiddenId = '';
|
|
alert(response.data.message);
|
|
});
|
|
}
|
|
}
|
|
else
|
|
{
|
|
alert("Fill All Field");
|
|
}
|
|
},
|
|
|
|
fetchData:function(id){
|
|
axios.post('action.php', {
|
|
action:'fetchSingle',
|
|
id:id
|
|
}).then(function(response){
|
|
application.tytul = response.data.tytul;
|
|
application.autor = response.data.autor;
|
|
application.rok = response.data.rok;
|
|
application.hiddenId = response.data.id;
|
|
application.myModel = true;
|
|
application.actionButton = 'Update';
|
|
application.dynamicTitle = 'Edytuj dane książki';
|
|
});
|
|
},
|
|
|
|
deleteData:function(id){
|
|
if(confirm("Jesteś pewny że chcesz usunąć tą pozycję?"))
|
|
{
|
|
axios.post('action.php', {
|
|
action:'delete',
|
|
id:id
|
|
}).then(function(response){
|
|
application.fetchAllData();
|
|
alert(response.data.message);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
created:function(){
|
|
this.fetchAllData();
|
|
}
|
|
});
|
|
|
|
</script>
|