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