Simple real-time data filtering with EmberJS

Selamat datang di blog perusahaan kami. Pada kesempatan kali ini saya akan coba sharing bagaimana cara melakukan filter data dengan menggunakan EmberJS.

The Basic

Sebelum memulai, ada baiknya anda mengetahui salah satu konsep dasar pada EmberJS yang di sebut computed property di mana fitur ini akan di pakai pada tahap selanjutnya. Sebagaimana yang telah kita ketahui property digunakan untuk mengakses atribut/sifat sebuah object dalam pemrograman ber-orientasi object. EmberJS mengembangkan lebih lanjut konsep property dengan computed property di mana sebuah property dapat bergantung pada property yang lainnya. Ini dilakukan untuk menyesuaikan dengan fitur data binding yang di miliki oleh EmberJS.

Untuk lebih jelasnya akan saya deskripsikan melalui sebuah contoh, dengan membuat aplikasi sederhana untuk menghitung luas segitiga. 

Mari kita mulai. Untuk mempermudah, kita akan menggunakan starter kit EmberJS, karena sudah menyediakan sebuah template project yang sudah di konfigurasi untuk pengembangan aplikasi EmberJS. Anda dapat mengunduh starter kit ini di homepage EmberJS.

Ubah file index.html dan app.js kurang lebih seperti di bawah:

Tujuannya adalah saat alas atau tinggi berubah maka nilai dari "luas" akan otomatis ter-update. Coba anda jalankan sekarang maka anda akan temukan bahwa kenyataannya tidak demikian. Disinilah kita akan gunakan computed property.

Tambahkan 'alas' dan 'tinggi' pada fungsi property. (contoh di bawah)

Jalankan kembali, maka sekarang anda akan temukan bahwa saat anda mengubah alas atau tinggi, maka luas akan di ter-update dengan sendirinya. Ini terjadi karena kita sudah memberitahukan EmberJS bahwa ada korelasi antara property "luas" dengan property "alas" dan "tinggi".

Preparation

Kita akan membuat aplikasi Contact sederhana dengan dua field "nama" dan "email". Untuk melanjutkan tentunya kita membutuhkan data untuk di tampilkan. Agar tetap fokus pada masalah, kita akan menggunakan data dummy saja. Kita akan menggunakan ember-data untuk membantu dalam pembuatan data dummy. Anda dapat mengunduhnya disini.

Letakkan di folder starter-kit/js/libs

Tambahkan referensi ke ember-data pada index.html

Untuk membuat data dummy anda dapat menambahkan kode sebagai berikut pada file app.js

Sedikit penjelasan kode di atas:

• Pada baris ke 7 saya set adapter dari ember-data ke FixtureAdapter untuk keperluan membuat data dummy. Secara default ember-data menggunakan RestAdapter.
• Pada baris ke 9 saya membuat model bernama Contact yang akan menjadi domain object dari aplikasi.
• Pada baris ke 14 saya membuat beberapa data dummy dan meng-asosiasikannya dengan model Contact.
• Pada baris ke 28, saya mendapatkan data dummy dari interface yang disediakan oleh ember-data.

Untuk sementara kita dapat mencoba dengan melakukan penyesuaian pada index.html

Filtering

Saatnya kita menambahkan fitur filtering pada aplikasi. Tambahkan input field di atas table yang value-nya di bind ke property "filter" pada controller.

Tambahkan property "filteredContent" pada controller sebagai berikut:

Fungsi ini akan melakukan filtering terhadap data. Mungkin anda bertanya-tanya, bagaimana kita bisa mendapatkan data dari property "model", padahal pada controller kita tidak men-definisikan-nya sama sekali. 

Ingatkah anda pada statement di bawah ini:

Ya, disini dilakukan setting terhadap model, sehingga controller dapat mengambil data dengan me-referensikan nya kembali.

Fungsi "filteredContent" melakukan filter terhadap data berdasarkan value dari property "filter" maka di tambahkan referensi ke property "filter", sehingga saat filter berubah prosedur otomatis dijalankan kembali untuk dilakukan pemrosesan ulang (melakukan filtering), seperti yang sudah di jelaskan pada bagian "The Basic" di atas:

Karena sekarang kita mendapatkan data untuk tujuan filtering dari property "filteredContent" maka kita juga harus melakukan penyesuaian pada file index.html sebagai berikut:

Saat di jalankan maka kurang lebih akan tampil seperti di bawah:

Lihat betapa sedikitnya code yang harus di tulis untuk membuat fitur filtering seperti ini dengan EmberJS, tidak terbayangkan kalau anda harus melakukannya tanpa framework sama sekali. Dilihat dari sisi produktifitas dan maintainability maka framework seperti EmberJS membawa dampak yang sangat signifikan pada proses pengembangan aplikasi web.

Source code sudah saya siapkan dan bisa bisa di akses disini. Selamat mencoba!

Referensi:

http://blog.crowdint.com/2014/07/08/simple-collection-s-sorting-and-filtering-with-ember-js.html

http://emberjs.com/guides/controllers/