Pada tutorial ini Anda akan belajar bagaimana mengakses API menggunakan Vue.js dan Axios.
Tidak hanya itu, Anda juga akan belajar bagaimana menggunakan Vuetify sehingga user interface (UI) menjadi lebih interaktif dan responsive.
Hari ini, saya akan sharing kepada Anda semua hal yang perlu Anda ketahui untuk mengakses API dengan method GET, POST, PUT, dan DELETE.
(Step-by-Step)
Mari kita mulai.
Tonton video tutorial web berkualitas GRATIS di channel youtube saya:
Klik Disini.!
#1. Persiapan
Ini penting!
Untuk membuat aplikasi menggunakan vue.js dapat dilakukan dengan 2 cara yaitu dengan menggunakan Vue-CLI atau menggunakan CDN / file vue.js nya.
Pada tutorial ini, saya akan menggunakan file vue.js agar lebih mudah dipahami bagi pemula.
Berikut beberapa hal yang perlu Anda persiapkan:
1. Vue.js
Untuk mendapatkan vue.js, silahkan kunjungi URL berikut:
https://vuejs.org/js/vue.min.js
Kemudian Select All (Ctrl + A) dan Copy (Ctrl + C) semua kodenya, simpan dengan nama vue.min.js.
Pada tutorial ini, saya menyimpannya di direktori:
C:/xampp/htdocs/api
Itu artinya saya telah membuat folder “api” di dalam folder htdocs.
Anda boleh menyimpannya dimana saja, tidak harus di “htdocs”, bahkan Anda dapat menyimpannya di “desktop”, karena aplikasi ini tidak berjalan di atas Apache server atau sejenisnya.
2. Axios
Axios merupakan Promise based HTTP Client untuk browser ataupun node.js.
Axios memberikan kemudahan dalam menghandle AJAX request.
Pada tutorial ini, Anda tidak perlu mendownload Axios, karena kita hanya akan menggunakan Axios CDN.
3. Vuetify
Vuetify merupakan library User Interface (UI) untuk vue.js dengan desain yang elegan.
Dengan memanfaatkan vuetify, Anda dapat membuat aplikasi dengan user interface yang elegan dan responsive dengan cepat tanpa memikirkan CSS ataupun Javascript.
Pada tutorial ini, Anda juga tidak perlu mendownload Vuetify, karena kita hanya akan menggunakan vuetify CDN.
4. API
Pada tutorial ini, saya akan menggunakan API yang saya buat sebelumnya menggunakan Codeigniter.
Jika Anda belum melihat tutorial saya sebelumnya, saya sarankan untuk melihatnya disini: “Tutorial Membuat RESTful API dengan Codeigniter 4.”
Anda tidak harus membuatnya dari awal, cukup download source codenya, kemudian jalankan di web server Anda dengan perintah berikut pada terminal/cmd:
php spark serve
Mari kita lanjut!
#2. Buat sebuah file bernama “index.html”
Buat sebuah file bernama “index.html”, kemudian tempatkan satu folder dengan file vue.min.js.
Pada kasus ini, saya menempatkannya pada direktori:
C:/xampp/htdocs/api
Seperti gambar berikut:
Kemudian buka file index.html menggunakan kode editor, disini saya menggunakan Visual Studio Code dan ketikan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>Product Lists</title>
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<!-- Modal Add New Product -->
<template>
<v-dialog v-model="dialogAdd" persistent max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
Add New
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">Add New Product</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field label="Product Name*" v-model="productName" required>
</v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Price*" v-model="productPrice" required>
</v-text-field>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialogAdd = false">Close</v-btn>
<v-btn color="blue darken-1" text @click="saveProduct">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<!-- Modal Update Product -->
<template>
<v-dialog v-model="dialogEdit" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline">Update Product</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field label="Product Name*" v-model="productNameEdit" required>
</v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Price*" v-model="productPriceEdit" required>
</v-text-field>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialogEdit = false">Close</v-btn>
<v-btn color="blue darken-1" text @click="updateProduct">Update</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<!-- Modal Delete Product -->
<template>
<v-dialog v-model="dialogDelete" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline"></span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<h2>Are sure want to delete {{ productNameDelete }} ?</h2>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialogDelete = false">No</v-btn>
<v-btn color="info darken-1" text @click="deleteProduct">Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">#</th>
<th class="text-left">Product Name</th>
<th class="text-left">Price</th>
<th class="text-left">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in products" :key="product.product_id">
<td>{{ index + 1 }}</td>
<td>{{ product.product_name }}</td>
<td>{{ product.product_price }}</td>
<td>
<v-btn color="info" depressed small @click="getEdit(product)">
Edit
</v-btn>
<v-btn color="error" depressed small @click="getDelete(product)">
Delete
</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
</v-container>
</v-main>
</v-app>
</div>
<script src="vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Pada kode diatas, Anda dapat melihat itu hanyalah kode html pada umumnya.
Ada beberapa hal yang perlu Anda perhatikan pada kode tersebut.
Kita memanggil file vuetify CSS melalui CDN dengan kode berikut:
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
Selain itu, kita juga memanggil beberpa file javascript dengan kode berikut:
<!-- Include file vue js --> <script src="vue.min.js"></script> <!-- Include file vuetify js --> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <!-- Include file axios js --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- Include file main js --> <script src="main.js"></script>
Pada kode diatas, kita memanggil file vue.min.js, vuetify.js (CDN), axios.min.js (CDN), dan file main.js.
File “main.js” adalah file javascript yang akan kita buat untuk menghandle semua kode javascript untuk aplikasi kita.
#3. Buat sebuah file bernama “main.js”
Buat sebuah file bernama “main.js”, kemudian tempatkan satu folder dengan file vue.min.js dan index.html.
Pada kasus ini, saya menempatkannya pada direktori:
C:/xampp/htdocs/api
Seperti gambar berikut:
Kemudian buka file main.js menggunakan kode editor dan ketikan kode berikut:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
products: '',
productName: '',
productPrice: '',
dialogAdd: false,
dialogEdit: false,
dialogDelete: false,
productIdEdit: '',
productNameEdit: '',
productPriceEdit: '',
productIdDelete: '',
productNameDelete: ''
},
created: function () {
this.getProducts()
},
methods: {
// Get Product
getProducts: function () {
axios.get('http://localhost:8080/products')
.then(res => {
this.products = res.data;
})
.catch(err => {
// handle error
console.log(err);
})
},
// Create New product
saveProduct: function () {
axios.post('http://localhost:8080/products', {
product_name: this.productName,
product_price: this.productPrice
})
.then(res => {
// handle success
this.getProducts();
this.productName = '';
this.productPrice = '';
this.dialogAdd = false;
})
.catch(err => {
// handle error
console.log(err);
})
},
// Get Edit and Show data to Modal
getEdit: function (product) {
this.dialogEdit = true;
this.productIdEdit = product.product_id;
this.productNameEdit = product.product_name;
this.productPriceEdit = product.product_price;
},
// Get Delete and Show Confirm Modal
getDelete: function (product) {
this.dialogDelete = true;
this.productIdDelete = product.product_id;
this.productNameDelete = product.product_name;
},
// Update Product
updateProduct: function () {
axios.put(`http://localhost:8080/products/${this.productIdEdit}`, {
product_name: this.productNameEdit,
product_price: this.productPriceEdit
})
.then(res => {
// handle success
this.getProducts();
this.dialogEdit = false;
})
.catch(err => {
// handle error
console.log(err);
})
},
// Delete Product
deleteProduct: function () {
axios.delete(`http://localhost:8080/products/${this.productIdDelete}`)
.then(res => {
// handle success
this.getProducts();
this.dialogDelete = false;
})
.catch(err => {
// handle error
console.log(err);
})
}
}
})
Pada kode diatas terdapat beberapa function yaitu getProduct, saveProduct, updateProduct, dan deleteProduct.
getProduct berfungsi untuk mengambil data dari API dengan method GET.
saveProduct berfungsi untuk menyimpan data melalui API dengan method POST.
updateProduct berfungsi untuk mngupdate data melalui API dengan method PUT.
deleteProduct berfungsi untuk menghapus data melalui API dengan method DELETE.
#4. Testing
Sebelum melakukan uji coba, pastikan API berjalan dengan baik dan dapat diakses melalui POSTMAN.
Kemudian buka file “index.html” melalui browser, jika berjalan dengan maka akan terlihat seperti gambar berikut:
1. Add New Data
Klik tombol “Add New” untuk menambahkan data baru, maka akan terlihat form seperti berikut:
Ketikan Product Name dan Price, kemudian klik tombol “SAVE” untuk menyimpan data.
Jika data berhasil tersimpan, maka akan terlihat penambahan data seperti berikut:
2. Edit Data
Klik salah satu dari tombol “EDIT” untuk mengedit data, maka akan tampil form seperti berikut:
Edit Product Name atau Price, kemudian klik tombol “UPDATE” untuk mengupdate data.
Jika data berhasil terupdate, maka akan terlihat perubahan data seperti berikut:
3. Delete Data
Klik salah satu dari tombol “DELETE” untuk menghapus data, maka akan tampil konfirmasi seperti berikut:
Klik “YES” untuk menghapus data.
Jika data berhasil terhapus, maka akan terlihat pengurangan data pada list product.
Related: Tutorial Lengkap CRUD CodeIgniter 4 dan Vue JS (Full-Stack)
Kesimpulan:
Pada tutorial ini, Anda telah belajar bagaimana mengakses API menggunakan Vue.js dan Axios.
Anda juga telah belajar menggunakan vuetify untuk mempercantik user interface (UI).
Jadi tunggu apalagi, Let’s Coding!
![Tutorial Codeigniter Untuk Pemula [Full Tutorial]](/assets/images/small/2631429ede1d080f81ca5a4de5fe844b.png)
Komentar (2)
Tommy, 03 September 2020 10:58 - Reply
sebelumnya saya mau bilang. web anda keren. anda juga keren. terimakasih sudah berbagi. tapi saya mengalami kesulitan. api saya tidak bekerja. kenapa ya?
dian ermawan, 26 September 2020 08:50 - Reply
mantap tutorialnya aku selalu mengikuti...terimakasih boss sangat membantu