initial commit

This commit is contained in:
s439489 2022-02-16 23:26:38 +01:00
commit c9be3c9ed9
2 changed files with 325 additions and 0 deletions

114
action.php Normal file
View 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
View 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">&times;</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>