Wajah menggunakan crud vue js, mysql

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 CRUD

Vue 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

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

Lalu Install Xampp, bisa di download pada Link di bawah

Unduh Xampp.dll

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

Pada project CRUD VueJS ini kita akan membuat 4 file yaitu

1. indeks. php
2. tindakan. php
3. aplikasi. js
4. gaya. css

Langkah 1 – Membuat Database Untuk 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 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

 
  
  
  
  
  
  
  
  
 
 
  

   

   
Latihan CRUD VueJS - DIXMATA STUDIO
   

   

    

     

      

       
DATA MOBIL
      
      

       
      
     
    
    

     

      

       

        
Nama Mobil
        
Merk
        
Warna
        
No Polisi
        
Harga
       
        
Edit
        
Delete
       
       

        
{{ row.nama_mobil }}
        
{{ row.merk }}
        
{{ row.warna }}
        
{{ row.nopol}}
        
{{ row.harga }}
        
Edit
        
Delete
       
      
     
    
   
   

    
     

      

       

        

         

          ×
          
{{ dynamicTitle }}
         
         

          

           Enter Nama Mobil
           
          
          

           Enter Merk
           
          
           

           Enter Warna
           
          
           

           Enter No Polisi
           
          
           

           Enter Harga
           
          
          

          

           
           
          
         
        
       
      
     
    
   
  
  
 

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

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 VueJS

Terakhir 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 VueJS

Jika 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 VueJS

Dapat 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 VueJS

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 > 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 Data

Untuk 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