Tutorial: Membuat Aplikasi CRUD dengan Vue Menggunakan JSON Server

Published by Fazry on

Bagian I: Pengenalan

Pada bagian pengenalan ini, kita akan membahas tentang aplikasi CRUD, tujuan pembelajaran dari tutorial ini, serta tools dan teknologi yang akan digunakan dalam pengembangan aplikasi CRUD dengan VueJS menggunakan JSON Server.

Daftar Isi

A. Aplikasi CRUD

Aplikasi CRUD merupakan aplikasi yang memungkinkan pengguna untuk membuat (Create), membaca (Read), mengedit (Update), dan menghapus (Delete) data. Aplikasi jenis ini sangat umum dalam pengembangan perangkat lunak karena banyak aplikasi membutuhkan operasi dasar ini untuk mengelola data. Dengan menggunakan VueJS, Anda dapat membuat aplikasi CRUD yang dinamis dan responsif dengan mudah.

B. Tujuan Pembelajaran

Tujuan dari tutorial ini adalah:

  1. Memahami konsep dasar aplikasi CRUD.
  2. Mengembangkan keterampilan pengembangan aplikasi web menggunakan VueJS.
  3. Mengenal penggunaan JSON Server sebagai mockup server untuk menyediakan API.
  4. Memahami implementasi operasi CRUD (Create, Read, Update, Delete) dalam aplikasi VueJS.
  5. Menerapkan interaksi antara aplikasi VueJS dan JSON Server menggunakan Axios.

Dengan mencapai tujuan pembelajaran ini, Anda akan memiliki pemahaman yang kokoh tentang pengembangan aplikasi web menggunakan VueJS serta penggunaan JSON Server sebagai mockup server untuk mengembangkan aplikasi CRUD.

C. Tools dan Teknologi

Dalam tutorial ini, kita akan menggunakan beberapa tools dan teknologi sebagai berikut:

  • Vue CLI: Untuk membuat dan mengelola proyek VueJS.
  • Vue Router: Untuk mengatur routing dalam aplikasi VueJS.
  • Bootstrap: Untuk tampilan yang responsif dan menarik.
  • Axios: Untuk melakukan HTTP requests ke JSON Server.
  • JSON Server: Sebagai mockup server untuk menyediakan API RESTful.

Dengan kombinasi tools dan teknologi ini, kita akan dapat mengembangkan aplikasi CRUD VueJS yang berfungsi dengan baik dan responsif.

Bagian II: Persiapan Proyek

Dalam bagian ini, kita akan membahas langkah-langkah persiapan proyek untuk pengembangan aplikasi CRUD dengan VueJS menggunakan JSON Server. Ini termasuk pembuatan proyek Vue, instalasi dependencies yang diperlukan, serta setup environment untuk pengembangan.

A. Membuat Proyek Vue

Langkah pertama adalah membuat proyek Vue menggunakan Vue CLI. Vue CLI adalah alat pengembangan resmi untuk Vue.js yang memungkinkan Anda untuk membuat proyek Vue baru dengan cepat dan mudah.

Untuk membuat proyek Vue dengan nama “CrudApp”, jalankan perintah berikut di terminal:

vue create CrudApp

Anda akan diminta untuk memilih opsi konfigurasi proyek. Untuk tutorial ini, Anda dapat menggunakan opsi default atau opsi manual untuk menyesuaikan konfigurasi proyek Anda sesuai kebutuhan.

B. Instalasi Dependencies

Setelah membuat proyek Vue, langkah berikutnya adalah menginstal dependencies yang diperlukan. Untuk aplikasi CRUD kita, kita akan menggunakan Vue Router untuk mengatur routing dan Axios untuk berinteraksi dengan JSON Server.

Instal Vue Router dengan menjalankan perintah berikut di terminal:

cd CrudApp
npm install vue-router
# atau
yarn add vue-routerCode language: PHP (php)

Selanjutnya, instal Axios untuk melakukan HTTP requests ke JSON Server:

npm install axios
# atau
yarn add axiosCode language: PHP (php)

Terakhir, instal Bootstrap untuk tampilan yang responsif dan menarik:

npm install bootstrap
# atau
yarn add bootstrapCode language: PHP (php)

C. Setup Environment untuk Development

Terakhir, set up environment untuk pengembangan aplikasi. Pastikan Anda memiliki JSON Server diinstal secara global atau sebagai dependency lokal. Anda juga perlu membuat file JSON yang akan digunakan sebagai database.

Untuk menginstal JSON Server secara global, jalankan perintah berikut di terminal:

npm install -g json-server
# atau
yarn global add json-serverCode language: PHP (php)

Setelah instalasi selesai, buat file JSON yang akan berfungsi sebagai database Anda. Misalnya, Anda dapat membuat file db.json dan menambahkan beberapa data awal ke dalamnya.

{
  "posts": [
    { "id": 1, "title": "Post 1", "body": "Content of post 1" },
    { "id": 2, "title": "Post 2", "body": "Content of post 2" },
    { "id": 3, "title": "Post 3", "body": "Content of post 3" }
  ]
}Code language: JSON / JSON with Comments (json)

Selanjutnya, jalankan JSON Server dengan perintah berikut di terminal:

json-server --watch db.json --port 3000Code language: CSS (css)

Dengan langkah-langkah ini, proyek VueJS Anda dengan nama “CrudApp” sudah siap untuk dikembangkan lebih lanjut dengan implementasi aplikasi CRUD dan interaksi dengan JSON Server. Selanjutnya, kita akan mulai membuat komponen-komponen CRUD dan menghubungkannya dengan JSON Server.

D. Struktur Folder Proyek CrudApp

Struktur folder proyek CrudApp dapat terlihat seperti ini:

CrudApp/
├── node_modules/       # Folder yang berisi semua dependencies proyek
├── public/             # Folder yang berisi file publik seperti index.html
│   └── index.html      # Halaman utama aplikasi VueJS
├── src/                # Folder yang berisi kode sumber aplikasi VueJS
│   ├── assets/         # Folder yang berisi aset seperti gambar atau CSS
│   ├── components/     # Folder yang berisi komponen-komponen VueJS
│   │   ├── AddPost.vue      # Komponen untuk menambah post baru
│   │   ├── DeletePost.vue   # Komponen untuk menghapus post
│   │   ├── EditPost.vue     # Komponen untuk mengedit post
│   │   └── PostsList.vue    # Komponen untuk menampilkan daftar post
│   ├── router/         # Folder yang berisi konfigurasi Vue Router
│   │   └── index.js    # File konfigurasi Vue Router
│   ├── App.vue         # Komponen induk aplikasi VueJS
│   └── main.js         # File utama yang menentukan titik awal aplikasi VueJS
├── .gitignore          # File yang berisi daftar file/folder yang diabaikan oleh Git
├── package.json        # File konfigurasi proyek dan daftar dependencies
└── README.md           # File README untuk proyekCode language: PHP (php)

Pada umumnya, struktur folder seperti ini adalah standar untuk proyek VueJS yang dibuat menggunakan Vue CLI. Di dalam folder src, komponen-komponen VueJS ditempatkan di dalam folder components, dan konfigurasi Vue Router ditempatkan di dalam folder router.

File App.vue adalah komponen induk utama yang menaungi semua komponen lainnya dalam aplikasi. File main.js adalah file utama yang menentukan titik awal aplikasi VueJS dan menginisialisasi Vue Router.

Folder public berisi file publik seperti index.html, yang merupakan halaman utama aplikasi VueJS. File ini adalah titik awal yang dimuat oleh browser saat aplikasi dijalankan.

Folder node_modules berisi semua dependencies proyek yang diinstal melalui npm atau yarn. Folder ini biasanya cukup besar dan tidak diikutkan dalam version control (misalnya, dengan Git), karena dependencies dapat di-generate ulang dari file package.json.

.gitignore adalah file yang berisi daftar file dan folder yang diabaikan oleh Git, sehingga tidak dimasukkan ke dalam repository Git.

package.json adalah file konfigurasi proyek yang berisi daftar dependencies, skrip npm, dan metadata proyek lainnya.

README.md adalah file README untuk proyek yang berisi dokumentasi dan informasi penting lainnya tentang proyek.

Bagian III: Membuat Komponen CRUD dengan Bootstrap

Dalam bagian ini, kita akan membuat komponen-komponen untuk melakukan operasi CRUD (Create, Read, Update, Delete) dalam aplikasi VueJS dengan menggunakan Bootstrap untuk tampilan yang responsif dan menarik.

A. Membuat Komponen Tampilan Data

Langkah pertama adalah membuat komponen untuk menampilkan data. Komponen ini akan bertanggung jawab untuk menampilkan daftar data yang diambil dari JSON Server.

  1. Buat file PostsList.vue di dalam folder components.
  2. Gunakan Bootstrap untuk menata tampilan komponen.
<template>
  <div class="container">
    <h2>Daftar Post</h2>
    <ul class="list-group">
      <li class="list-group-item" v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    // Ambil data dari JSON Server saat komponen dimount
    // Gunakan Axios untuk melakukan GET request ke '/posts'
  }
};
</script>

<style>
/* Tidak perlu styling khusus */
</style>Code language: HTML, XML (xml)

B. Membuat Komponen Tambah Data Baru

Selanjutnya, kita akan membuat komponen untuk menambahkan data baru ke dalam database. Komponen ini akan berisi formulir untuk pengguna memasukkan informasi tentang post baru.

  1. Buat file AddPost.vue di dalam folder components.
  2. Gunakan Bootstrap untuk menata tampilan formulir.
<template>
  <div class="container">
    <h2>Tambah Post Baru</h2>
    <form @submit.prevent="addPost">
      <div class="form-group">
        <input type="text" class="form-control" v-model="newPost.title" placeholder="Judul">
      </div>
      <div class="form-group">
        <textarea class="form-control" v-model="newPost.body" placeholder="Isi"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Tambah</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newPost: {
        title: '',
        body: ''
      }
    };
  },
  methods: {
    addPost() {
      // Kirim data baru ke JSON Server menggunakan Axios POST request
      // Setelah berhasil, kosongkan formulir
    }
  }
};
</script>

<style>
/* Tidak perlu styling khusus */
</style>Code language: HTML, XML (xml)

C. Membuat Komponen Edit Data

Selanjutnya, kita akan membuat komponen untuk mengedit data yang sudah ada di database. Komponen ini akan menampilkan formulir pra-diisi dengan informasi post yang sudah ada.

  1. Buat file EditPost.vue di dalam folder components.
  2. Gunakan Bootstrap untuk menata tampilan formulir edit.
<template>
  <div class="container" v-if="post">
    <h2>Edit Post</h2>
    <form @submit.prevent="updatePost">
      <div class="form-group">
        <input type="text" class="form-control" v-model="editedPost.title" placeholder="Judul">
      </div>
      <div class="form-group">
        <textarea class="form-control" v-model="editedPost.body" placeholder="Isi"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Simpan</button>
    </form>
  </div>
  <div v-else>
    <p>Post tidak ditemukan</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postId: this.$route.params.id,
      post: null,
      editedPost: {
        title: '',
        body: ''
      }
    };
  },
  mounted() {
    // Ambil data post yang akan diedit dari JSON Server saat komponen dimount
    // Gunakan Axios untuk melakukan GET request ke '/posts/:id'
    // Isi nilai editedPost dengan data post yang diperoleh
  },
  methods: {
    updatePost() {
      // Kirim data post yang sudah diedit ke JSON Server menggunakan Axios PUT request
      // Setelah berhasil, kembalikan ke halaman sebelumnya
    }
  }
};
</script>

<style>
/* Tidak perlu styling khusus */
</style>Code language: HTML, XML (xml)

D. Membuat Komponen Hapus Data

Terakhir, kita akan membuat komponen untuk menghapus data dari database. Komponen ini akan menampilkan konfirmasi sebelum menghapus data.

  1. Buat file DeletePost.vue di dalam folder components.
  2. Gunakan Bootstrap untuk menata tampilan konfirmasi hapus.
<template>
  <div class="container">
    <h2>Konfirmasi Hapus</h2>
    <p>Apakah Anda yakin ingin meng

hapus post ini?</p>
    <button @click="deletePost" class="btn btn-danger">Hapus</button>
    <router-link :to="'/'" class="btn btn-secondary">Batal</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    deletePost() {
      // Kirim permintaan penghapusan ke JSON Server menggunakan Axios DELETE request
      // Setelah berhasil, kembali ke halaman utama
    }
  }
};
</script>

<style>
/* Tidak perlu styling khusus */
</style>Code language: HTML, XML (xml)

Dengan menggunakan Bootstrap untuk tampilan komponen CRUD, kita telah membuat aplikasi VueJS yang lebih menarik dan responsif. Sekarang kita sudah siap untuk menghubungkan komponen-komponen ini dengan JSON Server untuk melakukan operasi CRUD pada data yang ada dalam database.

E. Definisi Route untuk CRUD

Untuk melakukan operasi CRUD, kita perlu mendefinisikan route-route yang sesuai di dalam Vue Router. Hal ini akan memastikan bahwa setiap URL di aplikasi kita mengarah ke komponen yang tepat untuk menampilkan, menambahkan, mengedit, atau menghapus data.

  1. Buka file router/index.js di dalam proyek VueJS Anda.
  2. Tambahkan definisi route untuk setiap operasi CRUD yang ingin Anda dukung.

Misalnya, untuk proyek CRUD sederhana ini, Anda dapat menggunakan route berikut:

import Vue from 'vue';
import VueRouter from 'vue-router';
import PostsList from '../components/PostsList.vue';
import AddPost from '../components/AddPost.vue';
import EditPost from '../components/EditPost.vue';
import DeletePost from '../components/DeletePost.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: PostsList
  },
  {
    path: '/add',
    component: AddPost
  },
  {
    path: '/edit/:id',
    component: EditPost
  },
  {
    path: '/delete/:id',
    component: DeletePost
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;Code language: JavaScript (javascript)

Dalam contoh di atas:

  • / akan menampilkan daftar post (PostsList.vue).
  • /add akan menampilkan formulir untuk menambah post baru (AddPost.vue).
  • /edit/:id akan menampilkan formulir untuk mengedit post dengan ID tertentu (EditPost.vue).
  • /delete/:id akan menampilkan konfirmasi untuk menghapus post dengan ID tertentu (DeletePost.vue).

Dengan menambahkan definisi route ini, aplikasi VueJS Anda sekarang siap untuk melakukan operasi CRUD dengan navigasi yang sesuai antara halaman-halaman yang terkait. Selanjutnya, mari lanjutkan untuk mengimplementasikan komponen-komponen CRUD dan menghubungkannya dengan JSON Server.

Bagian V: Interaksi dengan JSON Server

Dalam bagian ini, kita akan membahas cara melakukan interaksi antara aplikasi VueJS kita dengan JSON Server. Kita akan menggunakan Axios untuk melakukan HTTP requests ke JSON Server untuk operasi CRUD (Create, Read, Update, Delete) pada data yang ada dalam database.

A. Mengambil Data dari JSON Server

Langkah pertama adalah mengambil data dari JSON Server saat komponen di-mount. Ini akan memastikan bahwa kita memiliki data terbaru untuk ditampilkan dalam aplikasi.

  1. Buka file PostsList.vue di dalam folder components.
  2. Gunakan Axios untuk melakukan GET request ke endpoint JSON Server yang sesuai untuk mendapatkan data post.
<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    axios.get('http://localhost:3000/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
};
</script>Code language: HTML, XML (xml)

B. Menambah Data Baru ke JSON Server

Selanjutnya, kita akan menambahkan kemampuan untuk menambahkan data baru ke dalam database melalui formulir.

  1. Buka file AddPost.vue di dalam folder components.
  2. Gunakan Axios untuk melakukan POST request ke endpoint JSON Server yang sesuai dengan data baru yang dimasukkan oleh pengguna.
<script>
import axios from 'axios';

export default {
  data() {
    return {
      newPost: {
        title: '',
        body: ''
      }
    };
  },
  methods: {
    addPost() {
      axios.post('http://localhost:3000/posts', this.newPost)
        .then(response => {
          console.log('New post added:', response.data);
          // Kosongkan formulir setelah berhasil menambahkan post
          this.newPost.title = '';
          this.newPost.body = '';
        })
        .catch(error => {
          console.error('Error adding post:', error);
        });
    }
  }
};
</script>Code language: HTML, XML (xml)

C. Mengedit Data di JSON Server

Selanjutnya, kita akan menambahkan kemampuan untuk mengedit data yang sudah ada di database.

  1. Buka file EditPost.vue di dalam folder components.
  2. Gunakan Axios untuk melakukan PUT request ke endpoint JSON Server yang sesuai dengan data post yang sudah diubah oleh pengguna.
<script>
import axios from 'axios';

export default {
  data() {
    return {
      postId: this.$route.params.id,
      post: null,
      editedPost: {
        title: '',
        body: ''
      }
    };
  },
  mounted() {
    axios.get(`http://localhost:3000/posts/${this.postId}`)
      .then(response => {
        this.post = response.data;
        this.editedPost.title = this.post.title;
        this.editedPost.body = this.post.body;
      })
      .catch(error => {
        console.error('Error fetching post:', error);
      });
  },
  methods: {
    updatePost() {
      axios.put(`http://localhost:3000/posts/${this.postId}`, this.editedPost)
        .then(response => {
          console.log('Post updated:', response.data);
          // Kembali ke halaman sebelumnya setelah berhasil mengupdate post
          this.$router.go(-1);
        })
        .catch(error => {
          console.error('Error updating post:', error);
        });
    }
  }
};
</script>Code language: HTML, XML (xml)

D. Menghapus Data dari JSON Server

Terakhir, kita akan menambahkan kemampuan untuk menghapus data dari database.

  1. Buka file DeletePost.vue di dalam folder components.
  2. Gunakan Axios untuk melakukan DELETE request ke endpoint JSON Server yang sesuai dengan data post yang akan dihapus.
<script>
import axios from 'axios';

export default {
  methods: {
    deletePost() {
      axios.delete(`http://localhost:3000/posts/${this.$route.params.id}`)
        .then(response => {
          console.log('Post deleted:', response.data);
          // Kembali ke halaman utama setelah berhasil menghapus post
          this.$router.push('/');
        })
        .catch(error => {
          console.error('Error deleting post:', error);
        });
    }
  }
};
</script>Code language: HTML, XML (xml)

Dengan langkah-langkah ini, aplikasi VueJS kita sekarang dapat berinteraksi dengan JSON Server untuk melakukan operasi CRUD pada data yang ada dalam database. Sekarang, kita memiliki aplikasi CRUD yang lengkap dan berfungsi dengan baik!

Categories: JavascriptVueJS
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Related Posts

Routing Dinamis dan Pre-fetching Data dengan Nuxt.js
VueJS

Routing Dinamis dan Pre-fetching Data dengan Nuxt.js

I. Pendahuluan Pengenalan tentang Konsep Routing Dinamis dan Pre-fetching Data Routing dinamis adalah teknik yang memungkinkan penggunaan parameter dalam URL untuk menentukan konten halaman yang akan ditampilkan secara dinamis. Ini memungkinkan pengembang untuk membuat aplikasi Read more…

Berkenalan dengan Nuxt.js Membangun Aplikasi Universal Pertamamu
Javascript

Berkenalan dengan Nuxt.js: Membangun Aplikasi Universal Pertamamu

I. Pendahuluan Dalam dunia pengembangan web modern, aplikasi universal menjadi semakin populer karena kemampuannya untuk memberikan pengalaman pengguna yang responsif dan cepat. Nuxt.js adalah salah satu framework yang memungkinkan pengembangan aplikasi universal dengan cepat dan Read more…

Pengenalan Nuxt.js Memahami Dasar-Dasar Framework Vue Universal
Javascript

Pengenalan Nuxt.js: Memahami Dasar-Dasar Framework Vue Universal

I. Pendahuluan Nuxt.js adalah sebuah framework yang dibangun di atas Vue.js yang dirancang untuk membuat pengembangan aplikasi web menjadi lebih mudah dan cepat. Dengan memanfaatkan konsep Universal (sebelumnya dikenal sebagai Server-Side Rendering atau SSR), Nuxt.js Read more…