initial commit
This commit is contained in:
commit
c9be3c9ed9
114
action.php
Normal file
114
action.php
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
//action.php
|
||||||
|
|
||||||
|
$connect = new PDO("mysql:host=localhost;dbname=vuejs", "root", "");
|
||||||
|
$received_data = json_decode(file_get_contents("php://input"));
|
||||||
|
$data = array();
|
||||||
|
|
||||||
|
if($received_data->action == 'fetchall'){
|
||||||
|
$query = "
|
||||||
|
SELECT * FROM tbl_sample
|
||||||
|
ORDER BY id DESC
|
||||||
|
";
|
||||||
|
$statement = $connect->prepare($query);
|
||||||
|
$statement->execute();
|
||||||
|
while($row = $statement->fetch(PDO::FETCH_ASSOC))
|
||||||
|
{
|
||||||
|
$data[] = $row;
|
||||||
|
}
|
||||||
|
echo json_encode($data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if($received_data->action == 'insert'){
|
||||||
|
$data = array(
|
||||||
|
':tytul' => $received_data->tytul,
|
||||||
|
':autor' => $received_data->autor,
|
||||||
|
':rok' => $received_data->rok
|
||||||
|
);
|
||||||
|
|
||||||
|
$query = "
|
||||||
|
INSERT INTO tbl_sample
|
||||||
|
(tytul, autor, rok)
|
||||||
|
VALUES (:tytul, :autor, :rok)
|
||||||
|
";
|
||||||
|
|
||||||
|
$statement = $connect->prepare($query);
|
||||||
|
|
||||||
|
$statement->execute($data);
|
||||||
|
|
||||||
|
$output = array(
|
||||||
|
'message' => 'Data Inserted'
|
||||||
|
);
|
||||||
|
|
||||||
|
echo json_encode($output);
|
||||||
|
}
|
||||||
|
|
||||||
|
if($received_data->action == 'fetchSingle'){
|
||||||
|
$query = "
|
||||||
|
SELECT * FROM tbl_sample
|
||||||
|
WHERE id = '".$received_data->id."'
|
||||||
|
";
|
||||||
|
|
||||||
|
$statement = $connect->prepare($query);
|
||||||
|
|
||||||
|
$statement->execute();
|
||||||
|
|
||||||
|
$result = $statement->fetchAll();
|
||||||
|
|
||||||
|
foreach($result as $row)
|
||||||
|
{
|
||||||
|
$data['id'] = $row['id'];
|
||||||
|
$data['tytul'] = $row['tytul'];
|
||||||
|
$data['autor'] = $row['autor'];
|
||||||
|
$data['rok'] = $row['rok'];
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if($received_data->action == 'update'){
|
||||||
|
$data = array(
|
||||||
|
':tytul' => $received_data->tytul,
|
||||||
|
':autor' => $received_data->autor,
|
||||||
|
':rok' => $received_data->rok,
|
||||||
|
':id' => $received_data->hiddenId
|
||||||
|
);
|
||||||
|
|
||||||
|
$query = "
|
||||||
|
UPDATE tbl_sample
|
||||||
|
SET tytul = :tytul,
|
||||||
|
autor = :autor,
|
||||||
|
rok = :rok
|
||||||
|
WHERE id = :id
|
||||||
|
";
|
||||||
|
|
||||||
|
$statement = $connect->prepare($query);
|
||||||
|
|
||||||
|
$statement->execute($data);
|
||||||
|
|
||||||
|
$output = array(
|
||||||
|
'message' => 'Data Updated'
|
||||||
|
);
|
||||||
|
|
||||||
|
echo json_encode($output);
|
||||||
|
}
|
||||||
|
|
||||||
|
if($received_data->action == 'delete'){
|
||||||
|
$query = "
|
||||||
|
DELETE FROM tbl_sample
|
||||||
|
WHERE id = '".$received_data->id."'
|
||||||
|
";
|
||||||
|
|
||||||
|
$statement = $connect->prepare($query);
|
||||||
|
|
||||||
|
$statement->execute();
|
||||||
|
|
||||||
|
$output = array(
|
||||||
|
'message' => 'Data Deleted'
|
||||||
|
);
|
||||||
|
|
||||||
|
echo json_encode($output);
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
211
index.php
Normal file
211
index.php
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
<!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>
|
||||||
Loading…
Reference in New Issue
Block a user