Contoh Crud Vuejs. Vue Merupakan JavaScript JavaScript Framework progresif yang digunakan untuk membangun halaman web. Berbeda dengan Javascript Framework yang lain, Vue dibangun untuk diadaptasi dengan mudah secara betahap Dalam pelaksanaannya, vue fokus hanya pada layer view dengan menggunakan pendekatan MVC (Model View Controller). MVC merupakan method (untuk mengolah data), view (untuk tampilan), dan Controller (untuk Memprosesnya) Lihat JS CRUDVue JS CRUD Contoh, CRUD mengacu pada 4 Dasar yang harus di pahami yaitu Create yaitu membuat/menambah data baru, Update yaitu dengan cara melakukan pembaharuan data yang telah di tambahkan atau data yang sudah ada. Delete digunakan untuk melakukan hapus data CRUD merupakan metode standar yang digunakan untuk pengelolaan Aplikasi baik Website maupun Aplikasi Mobile. CRUD ini terkoneksi dengan Database, semua yang dieksekusi di Website atau Aplikasi mobile akan terkoneksi langsung ke Database persiapanUntuk Proses Vue JS CRUD ini kita akan menggunakan Aplikasi Xampp sebagai server, dan menggunakan CDN sebagai Framework Vue JS CRUD CDN Vue JS <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Lalu Install Xampp, bisa di download pada Link di bawah Unduh Xampp.dll Tentang Project Crud Vue JSPada Project Vue JS ini kita akan membuat tampilan Website VueJs Toko Mobil dengan tampilan List nama Mobil dengan Nama Mobil, Merek, Harga dan lainnya. Project ini hanya menggunakan satu halaman dengan tombol action Add, Edit dan Delete Pada project CRUD VueJS ini kita akan membuat 4 file yaitu - indeks. php
- tindakan. php
- aplikasi. js
- gaya. css
Langkah 1 – Membuat Database Untuk CRUD Vue JSUntuk langkah awal dalam Vue JS kita akan mecoba untuk menampilkan data yang ada pada Database MySQL ke Dalam tampilan Website Framework Vue JS Buatlah sebuah database baru untuk CRUD Vue JSUntuk membuat Database dengan nama toko mobil di Xampp dapat mengakses url. Berikut tampilan jika telah Database telah dibuat Selanjutnya buat Tabel, dengan nama kendaraan, berikut Struktur Tabel yang harus dibuat Langkah 2 – Membuat File Php Untuk CRUD Vue JS (index. php)Buat sebuah folder baru pada htdocs di Xampp, dan didalam folder tersebut buat sebuah folder lagi dengan nama mobil, lalu buat sebuah file dengan nama index. php Copy Script di bawah ini dan paste ke dalam index. 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 - Dixmata Studio</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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="crudApp">
<br />
<h3 align="center">Latihan CRUD VueJS - DIXMATA STUDIO</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<h3 class="panel-title">DATA MOBIL</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>Nama Mobil</th>
<th>Merk</th>
<th>Warna</th>
<th>No Polisi</th>
<th>Harga</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr v-for="row in allData">
<td>{{ row.nama_mobil }}</td>
<td>{{ row.merk }}</td>
<td>{{ row.warna }}</td>
<td>{{ row.nopol}}</td>
<td>{{ row.harga }}</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>Enter Nama Mobil</label>
<input type="text" class="form-control" v-model="nama_mobil" />
</div>
<div class="form-group">
<label>Enter Merk</label>
<input type="text" class="form-control" v-model="merk" />
</div>
<div class="form-group">
<label>Enter Warna</label>
<input type="text" class="form-control" v-model="warna" />
</div>
<div class="form-group">
<label>Enter No Polisi</label>
<input type="text" class="form-control" v-model="nopol" />
</div>
<div class="form-group">
<label>Enter Harga</label>
<input type="text" class="form-control" v-model="harga" />
</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>
<script src="apps.js"></script>
</body>
</html> _Langkah 2 – Membuat Koneksi File ke Database Untuk CRUD Vue JS (action. php)Selanjutnya buatlah sebuah file dengan nama action. php, file ini berfungsi untuk koneksi ke Database, yang sudah kita buat sebelumnya Copykan script berikut dan paste ke dalam file action. php yang berada didalam folder mobil <?php
//action.php
$connect = new PDO("mysql:host=localhost;dbname=toko_mobil", "root", "");
$received_data = json_decode(file_get_contents("php://input"));
$data = array();
if($received_data->action == 'fetchall')
{
$query = "
SELECT * FROM kendaraan
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(
':nama_mobil' => $received_data->nama_mobil,
':merk' => $received_data->merk,
':warna' => $received_data->warna,
':nopol' => $received_data->nopol,
':harga' => $received_data->harga
);
$query = "
INSERT INTO kendaraan
(nama_mobil, merk, warna, nopol, harga)
VALUES (:nama_mobil, :merk, :warna, :nopol, :harga)
";
$statement = $connect->prepare($query);
$statement->execute($data);
$output = array(
'message' => 'Data Inserted'
);
echo json_encode($output);
}
if($received_data->action == 'fetchSingle')
{
$query = "
SELECT * FROM kendaraan
WHERE id = '".$received_data->id."'
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$data['id'] = $row['id'];
$data['nama_mobil'] = $row['nama_mobil'];
$data['merk'] = $row['merk'];
$data['warna'] = $row['warna'];
$data['nopol'] = $row['nopol'];
$data['harga'] = $row['harga'];
}
echo json_encode($data);
}
if($received_data->action == 'update')
{
$data = array(
':nama_mobil' => $received_data->nama_mobil,
':merk' => $received_data->merk,
':warna' => $received_data->warna,
':nopol' => $received_data->nopol,
':harga' => $received_data->harga,
':id' => $received_data->hiddenId
);
$query = "
UPDATE kendaraan
SET nama_mobil = :nama_mobil,
merk = :merk,
warna = :warna,
nopol = :nopol,
harga = :harga
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 kendaraan
WHERE id = '".$received_data->id."'
";
$statement = $connect->prepare($query);
$statement->execute();
$output = array(
'message' => 'Data Deleted'
);
echo json_encode($output);
}
?>
Langkah 3 – Membuat File VueJS (apps. js)Langkah selanjutnya kita akan membuat file Vue JS yang didalamnya berisi untuk CRUD VueJS seperti Create Update dan Delete. Buat sebuah file dengan nama apps. js didalam folder mobil Copykan script berikut kedalam file apps. js var application = new Vue({
el:'#crudApp',
data:{
allData:'',
myModel:false,
actionButton:'Insert',
dynamicTitle:'Add Data',
},
methods:{
fetchAllData:function(){
axios.post('action.php', {
action:'fetchall'
}).then(function(response){
application.allData = response.data;
});
},
openModel:function(){
application.nama_mobil = '';
application.merk = '';
application.warna = '';
application.nopol= '';
application.harga = '';
application.actionButton = "Insert";
application.dynamicTitle = "Add Data";
application.myModel = true;
},
submitData:function(){
if(application.nama_mobil != '' && application.merk != '')
{
if(application.actionButton == 'Insert')
{
axios.post('action.php', {
action:'insert',
nama_mobil:application.nama_mobil,
merk:application.merk,
warna:application.warna,
nopol:application.nopol,
harga:application.harga
}).then(function(response){
application.myModel = false;
application.fetchAllData();
application.nama_mobil = '';
application.merk = '';
application.warna = '';
application.nopol = '';
application.harga = '';
alert(response.data.message);
});
}
if(application.actionButton == 'Update')
{
axios.post('action.php', {
action:'update',
nama_mobil : application.nama_mobil,
merk : application.merk,
warna : application.warna,
nopol : application.nopol,
harga : application.harga,
hiddenId : application.hiddenId
}).then(function(response){
application.myModel = false;
application.fetchAllData();
application.nama_mobil = '';
application.merk = '';
application.warna = '';
application.nopol = '';
application.harga = '';
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.nama_mobil = response.data.nama_mobil;
application.merk = response.data.merk;
application.warna = response.data.warna;
application.nopol= response.data.nopol;
application.harga = response.data.harga;
application.hiddenId = response.data.id;
application.myModel = true;
application.actionButton = 'Update';
application.dynamicTitle = 'Edit Data';
});
},
deleteData:function(id){
if(confirm("Are you sure you want to remove this data?"))
{
axios.post('action.php', {
action:'delete',
id:id
}).then(function(response){
application.fetchAllData();
alert(response.data.message);
});
}
}
},
created:function(){
this.fetchAllData();
}
});
Langkah 3 – Membuat File CSS Contoh CRUD VueJSTerakhir kita akan membuat file css yang digunakan untuk membuat tampilan web lebih menarik dan Responsive. Buat sebuah file dengan nama style. css didalam folder mobil Copykan script berikut dan paste ke dalam file style. css .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;
}
_Langkah 4 – Melihat Tampilan Website Contoh CRUD VueJSJika semua selesai dari Langkah 1-3, maka sekarang kita sudah bisa membuka webiste yang sudah dikita buat. Berikut tampilan file yang telah dibuat tadi Untuk membukanya cukup mudah, buka Browser dan ketikan https. //localhost/ponsel. Berikut tampilan website jika berhasil Langkah 5 – Ujicoba Membuat Contoh Data CRUD VueJSDapat dilihat website telah dapat diakses, kita akan melakukan uji coba untuk membuat atau membuat sebuah data di Webiste Klik tombol Add pada Form yang ada pada Website, Lalu masukan Data Mobil seperti “Nama Mobil”, “Merk”, “Warna”, “No Polisi”, “Harga”. Berikut tampilan form Isikan penambahan data Lalu Klik > Sisipkan Jika sudah, maka pada form list “DATA MOBIL”, akan ditambahkan data yang baru saja kita tambahkan/atau Create. Berikut list Data Mobil jika berhasil menambahkan Data Langkah 6 – Uji Coba Update Data Contoh CRUD VueJSSetelah Create data berhasil, untuk ujicoba selajutnya kita akan menerapak Update/Edit Data. Untuk data yang akan di Edit adalah No Polisi, Data awal dengan No Polisi “BA 4212 XX”, akan kita edit ke “BA 3212 XX” Klik tombol > Edit Maka akan tampil kembali Form isian Data, dan Ganti No Polisi Lalu klik tombol > Perbarui Konfirmasi yang telah kami edit , lihat pada Daftar Data Mobil Terlihat No Polisi telah berganti menjadi “BA 3212 XX”. Dan kita telah berhasil melakukan Update Data dan Tombol Edit berfungsi Langkah 7 – Uji coba Hapus DataUntuk pengujian yang terakhir yaitu Delete Data, untuk menghapus data kita hanya perlu klik pada tombol Delete, maka data akan terhapus Klik tombol > Hapus Kita akan diminta untuk konfirmasi “Are you sure you want to remove this data?”, klik > Yes Lihat pada Daftar Data Mobil. Apakah data berhasil kita Hapus Terlihat data sudah kosong yang berarti kita sudah berhasil melakukan Delete Data, dan tombol Detele berfungsi dengan baik Sekian Dokumentasi CRUD VueJS Contoh, Dari Melakukan Create, Update Dan Delete Data. Jika Anda ingin memprakternya sangat mudah, Anda hanya perlu Copy paste Script yang ada pada Dokumentasi kami ke dalam Editor Anda. Terima Kasih telah mengunjungi Website kami. Mohon maaf jika ada kekuranga, mohon support dengan Kritik dan Sarannya BACA BERMAIN. Cara Install Vue JS. Dixmata Studio BlogBeritazimbrajendelaVirtualisasiKeamananInstalasi OSjaringanpemantauankeseimbangan muatan
Posting TerbaruTipe – Tipe Ancaman SiberModus kejahatan dalam Teknologi Informasi (Cybercrime)Cara Memasang IonikRouting BGP Sederhana MikrotikCara Mengimpor Windows ke GNS3Instal PHP8. 0 Ubuntu 22. 04. dua puluh. 04. 18. 04
Penerbit SunyiHalo Semuanya, Saya Editor Dixmata Studio, suka nge-linux, membuat konten, menyukai kamu dan bahagia dengan kamu. Quotes saya "Aku Tidak Membenci Keramaian, Tapi Sendiri Membuatku Lebih Merasa Damai"
Langkah langkah pembuatan CRUD dalam database MySQL?
Jika Anda belum memahami bagaimana membuat fitur CRUD menggunakan PHP dan MySQL silahkan simak langkah-langkah berikut. . LANGKAH 1 – Persiapan. . LANGKAH 2 – Membuat Database. . LANGKAH 3 – Buat Koneksi Database. . LANGKAH 4 – Buat Lihat Data. . LANGKAH 5 – Buat Sisipkan Data. . LANGKAH 6 – Buat Update Data. . LANGKAH 7 – Buat Hapus Data
Langkah langkah membuat CRUD?
Membuat CRUD di Halaman CRUD . Membuat Sistem Registrasi. Bagian ini nanti Anda akan membuat sebuah form registrasi lengkap dengan database di dalamnya. . Membuat File Config. . Membuat Formulir Pendaftaran. . Membuat Sistem Login. . Membuat Form Login. . 6. Membuat Halaman Utama. . 7. Membuat Script Logout
Mengapa menggunakan Vue JS?
Alasan menggunakan Vue. js selanjutnya dibanding frontend framework lainnya yaitu Vue. js lebih sederhana . Sintaks dalam Vue. js lebih pendek, data binding lebih mudah, data binding dua arah lebih bertenaga, Vue Component hingga integrasi dengan back-end framework juga sangat mudah.
Apa itu Lihat JS?
Vue. js adalah JavaScript framework yang bisa digunakan untuk mengembangkan aplikasi . Biasanya, framework ini digunakan untuk dua hal, yaitu membangun User Interface (UI) dan Single Page Application (ENG). Bisa dibilang, Vue. js adalah salah satu framework yang cukup populer. |