crud vuejs example

CRUD VueJS Example

Crud Vuejs Example. Vue Merupakan JavaScript JavaScript Framework progresif yang digunakan untuk membangun halaman web. Berbeda dengan Javascript Framework yang lain, Vue dibangun untuk mudah diadaptasi secara bertahap.

Dalam pelaksanaannya, vue berfokus hanya pada layer view dengan menggunakan pendekatan MVC (Model View Controller). MVC merupakan metode (untuk manipulasi data), view (untuk tampilan), dan Controller (untuk Memprosesnya).

Vue JS CRUD

Vue JS CRUD Example, CRUD mengacu pada 4 Dasar yang harus di pahami yaitu Create yaitu membuat/menambah data baru, Update yaitu dengan cara melakukan memperbarui 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 atau Aplikasi Mobile. CRUD ini terkoneksi dengan Database, semua yang dieksekusi di Website atau Aplikasi mobile akan di terkoneksi langsung ke Database.

crud vuejs example

Persiapan

Untuk 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, dapat di download pada Link di bawah

Download Xampp

Tentang Project Crud Vue JS

Pada 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 cuma menggunakan satu halaman dengan tombol action Add, Edit dan Delete.

Pada project CRUD VueJS ini kita akan membuat 4 file yaitu

  1. index.php
  2. action.php
  3. apps.js
  4. style.css

Langkah 1 – Membuat Database For CRUD Vue JS

Untuk 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 JS

Untuk membuat Database degan nama toko_mobil pada Xampp dapat mengakses url http://localhost/phpmyadmin. Berikut tampilan jika telah Database telah di buat

Selanjutnya membuat Tabel, dengan nama kendaraan, berikut Struktur Tabel yang harus dibuat

Langkah 2 – Membuat File Php For 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">&times;</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 File Koneksi to Database For CRUD Vue JS (action.php)

Selanjutnya buatlah sebuah file dengan nama action.php, file ini berfungsi untuk koneksi ke Database, yang telah 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 CRUD VueJS Example

Terkahir kita akan membuat file css yang digunakan untuk membuat tampilan webiste 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 CRUD VueJS Example

Jika semua selesai dari Langkah 1 – 3, maka sekarang kita sudah dapat membuka webiste yang telah dikita buat. Berikut tampilan file yang telah dibuat tadi

Untuk membukanya cukup mudah, buka Browser dan ketikan https://localhost/mobil. Berikut tampilan website jika berhasil.

Crud Vuejs Example

Langkah 5 – Ujicoba Create Data CRUD VueJS Example

Dapat dilihat website telah bisa diakses, kita akan melakukan ujicoba untuk membuat atau create sebuah data pada 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.

Crud Vuejs Example

Lalu Klik > Insert

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

Crud Vuejs Example

Langkah 6 – Ujicoba Update Data CRUD VueJS Example

Setelah 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 > Update.

Konfirmasi yang telah kita edit , lihat pada List Data Mobil.

Terlihat No Polisi telah berganti menjadi “BA 3212 XX”. Dan kita telah berhasil melakukan Update Data dan Tombol Edit berfungsi.

Langkah 7 – Ujicoba Delete Data

Untuk pengujian yang terakhir yaitu Delete Data, untuk delete data, kita hanya perlu klik pada tombol Delete, maka data akan terhapus.

Kilik tombol > Delete

Kita akan di minta untuk konfirmasi “Are you sure you want to remove this data?”, klik > Yes

Lihat pada List Data Mobil. Apakah data berhasil kita Delete

Terlihat data sudah kosong yang berarti kita sudah berhasil melakukan Delete Data, dan tombol Detele berfungsi dengan baik.

Sekian Dokumentasi CRUD VueJS Example, Dari melakukan Create, Update dan Delete Data. Jika Anda ingin memprakternya sangat mudah, Anda hanya perlu Copy paste Script yang ada pada Dokumentasi kami kedalam Editor Anda. Terimakasi telah mengunjungin Website kami. Mohon maaf jika ada kekuranga, mohon support dengan Kritik dan Sarannya.

BACA JUGA : How Install Vue JS | Dixmata Studio

Related Post

Kategori