Sebagai seorang programmer, membuat sebuah aplikasi juga berarti membuat sebuah tools yang dapat digunakan oleh manusia guna menunjang pekerjaan manusia. Oleh karena itu, data yang ditampilkan juga harus dalam format yang mudah dipahami dan dibaca oleh manusia itu sendiri.
Dalam berbagai case, kadang kita mendapatkan sebuah data yang seharusnya diolah terlebih dahulu sebelum ditampilkan. Misalnya saja, harga yang terdapat dalam daftar produk pastinya akan disimpan dengan tipe data integer, yang tidak memiliki tanda baca sedikitpun. Hal ini akan menimbulkan kesulitan dalam membaca data tersebut apabila sudah berada pada tingkat digit tertentu.
Pada tulisan sebelumnya, kita telah membahas tentang computed property yang didalamnya terdapat fungsi filtering data. Maka pada kesempatan kali ini, saya akan me-refresh kembali materi sebelumnya dengan menggunakannya dalam case yang akan dibahas pada materi ini. Adapun point of content yang akan kita dapatkan diantaranya:
-
Filtering List with a computed property
-
Formatting Currencies With Filter
-
Formatting Date
Baca Juga: VueJS: Mengenal Computed Properties
Filtering List with a computed property
Untuk melakukan formatting currencies, saya tertarik dengan library Accounting.js yang simple untuk digunakan. Adapun case yang akan diangkat kali ini adalah menampilkan daftar makanan / minuman beserta harganya, berdasarkan kategori dari select box yang dipilih. Buat kerangkanya terlebih dahulu, buat file index.html kemudian masukkan potongan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daengweb.id</title>
</head>
<body>
<div id="dw">
<select v-model="kategori">
<option value="makanan">Makanan</option>
<option value="minuman">Minuman</option>
</select>
<ul>
<li v-for="row in data">{{ row.title }} - Rp {{ row.price }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<script>
new Vue({
el: '#dw',
data: {
data: [
{ title: 'Mie Goreng', price: 12000, kategori: 'makanan' },
{ title: 'Nasi Goreng', price: 10000, kategori: 'makanan' },
{ title: 'Kopi Susu', price: 11000, kategori: 'minuman' },
{ title: 'Bakso', price: 9000, kategori: 'makanan' },
{ title: 'Sate', price: 15000, kategori: 'makanan' },
{ title: 'Cappucino', price: 10000, kategori: 'minuman' },
{ title: 'Ayam Goreng', price: 15000, kategori: 'makanan' }
],
kategori: ''
}
})
</script>
</body>
</html>
Penjelasan: Terdapat list data yang akan ditampilkan dengan mengunakan v-for yang terdapat pada potongan code: <li v-for="row in data">{{ row.title }} - Rp {{ row.price }}</li>.
Dalam kerangka diatas, kita telah memiliki select box kategori yang nantinya digunakan untuk mem-filter data yang akan ditampilkan. Tambahkan computed property berikut ini:
computed: {
filterKategori() {
return this.data.filter(row => row.kategori === this.kategori)
}
}
Kemudian pada v-for ganti data menjadi filterKategori
<li v-for="row in filterKategori">{{ row.title }} - Rp {{ row.price }}</li>
Penjelasan: filterKategori adalah computed property yang berisi array yang telah di filter berdasarkan kategori yang dipilih.
Seperti yang kamu lihat, harga yang ditampilkan masih menggunakan format data yang sebenarnya. Untuk kondisi yang masih berada dikisaran puluhan sampai ribuan mungkin saja masih bisa dibaca, namun apa jadinya jika sudah lebih dari itu? Maka secara otomatis otak manusia akan melakukan filtering digit angka agar dapat membacanya.
Baca Juga: VueJS: Ajax Request Menggunakan Axios
Formating Currencies
Langkah selanjutnya, kita akan mempermudah pengguna dalam membaca angka tersebut dengan membuat currencies format, sebelumnya kita telah me-load library <script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script> , maka tambahkan potongan code berikut:
Vue.filter('currency', function (money) {
return accounting.formatMoney(money, "Rp ", 2, ".", ",")
})
Penjelasan: Kita telah membuat sebuah fungsi baru dengan nama currency yang akan mem-format digit angka yang diterima dengan ketentuan:
-
Memiliki prefix
Rp -
Menetapkan 2 angka dibelakang koma
-
Pemisah bilangan mengugnakan
. -
Pemisah desimal menggunakan
,
Kemudian lakukan perubahan kembali pada list harga yang akan ditampilkan dengan menambahkan fungsi currency:
{{ row.price | currency }}
Maka apabila dijalankan akan terlihat seperti berikut
Kode lengkapnya dapat kamu temukan di github.
Formatting Date
Seperti halnya dengan formatting currencies, date juga perlu di re-format agar dapat di baca oleh user. Seperti yang kita ketahui, date dalam database dikenali dengan format yyyy-mm-dd, sedangkan di Indonesia format tanggal yang umumnya digunakan adalah dd-mm-yyyy.
Kita mulai dengan kerangka dokumen yang baru agar tidak bingung, buat file date.html kemudian masukkan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daengweb.id</title>
</head>
<body>
<div id="dw">
<ul>
<li v-for="row in data">{{ row.tempat }}, {{ row.tgl_lahir }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script>
new Vue({
el: '#dw',
data: {
data: [
{ tempat: 'Sungguminasa', tgl_lahir: '1994-04-19' },
{ tempat: 'Bulukumba', tgl_lahir: '1995-04-25' },
{ tempat: 'Takalar', tgl_lahir: '1993-03-12' }
]
}
})
</script>
</body>
</html>
Untuk melakukan formatting date, maka kita akan menggunakan library bantuan, dalam hal ini yang akan digunakan adalah moment.js. Library tersebut telah di-load pada kerangka diatas, maka selanjutnya tambahkan potongan code berikut:
Vue.filter('date', function (date) {
return moment(date).format('D MMM Y');
})
Kemudian pada v-for tambahkan fungsi filtering data yang telah dibuat:
{{ row.tgl_lahir | date }}
Penjelasan: Date yang diterima akan di-reformat dengan ketentuan:
-
D : Menampilkan tanggal
-
MMM : Menampilkan nama bulan
-
Y : Menampilkan format tahun
Kode lengkapnya dapat kamu temukan di Github.
Kesimpulan
Data merupakan aset yang dimiliki oleh aplikasi dengan tujuan agar dapat digunakan oleh user, sehingga kita harus menyediakan yang dapat dibaca dengan mudahnya oleh pengguna agar dapat mempermudah pengguna tersebut. Formatting data bisa dilakukan dari sisi server maupun client ataupun keduanya sekaligus.
Comments