hapus semua elemen html yang ada di dalamnya dan gantikan dengan:

Backbone – Model, View, Collection

Karena kita menggunakan Backbone untuk framework kita, maka kita memerlukan model, view dan collection untuk aplikasi kita, dengan bagan sebagai berikut: (untuk tutorial dasar backbone bisa dibaca disini)

1. Setiap data komentar di buku tamu adalah model. Kita nama namakan ‘komentar’.
2. ‘komentar‘ model memiliki 2 field, yaitu: nama dan komentar.
3. Setiap model memiliki View., kita namakan ini ‘komentar’ view.
4. Seluruh model akan digabung dalam satu Collection, kita namakan ini ‘guestbook’.
5. Untuk tampilan keseluruhan perlu satu View, kita namakan ini ‘daftar_komentar’.

Di sini yeoman akan membantu sekali dalam hal  pembuatan model, view, dan collection. Coba jalankan perintah-perintah dibawah:

dengan ini semua yang kita perlukan telah ter-generate dan tersusun dengan rapi, tanpa kita harus susah payah membuat dan menyusunnya sendiri.

Buka ‘app/scripts/models/komentar.js’, gantikan dengan:


guestbook.Models = guestbook.Models || {};

})();


Penjelasan: kita deskripsikan field-field yang ada di model kita di sini.

Buka ‘app/scripts/collections/guestbook.js’, gantikan dengan:


(function () {
guestbook.Collections.GuestbookCollection = Backbone.Collection.extend({

})();


Penjelasan: kita inisialisasi model dari collection dengan ‘Komentar’ model. Dan membuat local storage baru dengan nama guestbook_app. Kita akan menggunakan adaptar backbone localstorage untuk menyimpan data di local storage browser. Bagaimana kita bisa mendapatkan adapter tersebut ? Di sinilah letak kemudahan bower. Jalankan perintah dibawah untuk mencari adapter dengan menggunakan bower:

Setelah ditemukan, tinggal menjalankan perintah dibawah untuk meng-install:

$ bower install backbone.localStorage --save

Sekarang coba buka file ‘app/index.html‘, maka secara otomatis backbone.localStorage.js akan ter-include di html kita.

Buka ‘app/scripts/views/daftar_komentar.js’, gantikan dengan:


guestbook.Views = guestbook.Views || {};

})();


Penjelasan: karena kita menggunakan local storage fungsi collection.fetch di sini adalah untuk memasukkan semua data yang ada di local storage ke model. Dan fungsi ‘tambahKomentar‘ akan dipanggil saat collection memasukkan data dari local storage ke model.

Buka ‘app/scripts/templates/daftar_komentar.ejs’, gantikan dengan:

Penjelasan: Input form berisi nama dan komentar, karena komentar bisa lebih dari 1 baris, maka di sini kita menggunakan textarea. ‘Komentar’ view akan masuk ke dalam elemen tbody.

Buka ‘app/scripts/views/komentar.js’, gantikan dengan:


guestbook.Views = guestbook.Views || {};

})();


Penjelasan: di fungsi ‘render’ terdapat pengkonversian dari \n ke <br />, dikarenakan data yang tersimpan di model disaat lebih dari 1 baris adalah newline(\n). Fungsi ‘toggleEdit’ akan dipanggil di saat user men-double click komentar, dan disaat user menyelesaikan editing komentar yaitu saat men-click area selain textarea komentar yang ter-edit. Di fungsi ini juga ada pengkonversian kembali dari <br /> ke \n untuk keperluan editing.

Sinkronisasi Model, View, Collection di Backbone: bagi bukan pengguna Backbone, mungkin beberapa method yang tertulis di sini terasa asing. Dengan menggunakan backbone, developer di tuntut untuk berpikir OOP (Object Oriented Programming). Setiap model mempunyai view, dan semua komponen yang ada di dalam view ini hanya mewakili 1 objek model. Dengan memanggil this.model otomatis akan mengambil objek model yang berkaitan. Dan disaat yang sama this.model.save() bakal menyimpan objek ke collection, dan karena tempat penyimpanan collection untuk aplikasi ini adalah local storage, maka otomatis akan tersimpan di local storage browser. Jika tempat penyimpanan collection diganti dengan path API server, maka otomatis backbone akan mengirim HTTP request POST (simpan) atau PUT (update) ke API tersebut. Begitu pula this.model.destroy() akan menghapus model di tempat penyimpanan yang telah disediakan.

Buka ‘app/scripts/templates/komentar.ejs’, gantikan dengan:

Penjelasan: karena setiap objek view mempunyai 1 template, maka variable nama, dan komentar disini adalah representasi objek model yang bersangkutan. Untuk menyembunyikan form dan textarea disaat menampilkan komentar,  kita akan gunakan style (scss).

Buka ‘app/scripts/main.js’, gantikan dengan:


window.guestbook = {
Models: {},
Collections: {},
Views: {},
Routers: {},
init: function () {
new this.Views.DaftarKomentarView({
collection: new this.Collections.GuestbookCollection()
});
}
};

$(document).ready(function () {
'use strict';
guestbook.init();
});


Penjelasan: ‘main.js’ adalah file utama yang mengontrol proses di backbone.

Buka ‘app/styles/main.scss’, tambahkan code di bawah ini kebagian akhir file scss:


td form {
display: none;
}

thead {
td{
font-weight: bold;
}
}


Penjelasan: dengan ini textarea akan tersembunyikan saat tampilan awal, dan sebaliknya textarea akan ditampilkan, dan label akan disembunyikan saat editing.

Dengan ini lengkap sudah source code kita untuk aplikasi buku tamu. Karena yeoman secara default memasukkan task ‘watch‘ kedalam konfigurasi grunt kita, jika file -file source code diatas terupdate maka grunt akan mendeploy template dan file scss serta mengecheck ulang semua file javascript dan html kita. Jika selesai, maka tampilan akan seperti dibawah ini:

Coba anda refresh ulang browser dengan alamat url http://localhost:9000/. Jika tidak terupdate dengan benar, maka terjadi error di proses grunt. Dan jika itu terjadi, berhentikan proses grunt, dan jalankan kembali dengan perintah ‘grunt server‘.

Saya sudah menyediakan repositori untuk aplikasi ini di github. Tinggal di-clone, dan jalankan perintah:

# Untuk mendownload dan mengupdate semua dependency yang tertulis di package.json
$ npm install

# Untuk mendownload dan mengupdate semua dependency framework dan library yang tertulis di bower.json
$ bower install

Setelah itu jalankan perintah dibawah untuk me-launch aplikasi kita:

$ grunt server

Jika ada pertanyaan atau ingin minta penjelasan lebih lengkap untuk backbone, grunt atau request tutorial-tutorial yang lain, harap mengirim komentar dibawah ini, atau bisa japri ke saya.

*) Direview oleh Alfian Busyro.

*) Penulis adalah seorang  front-end engineer yang bekerja untuk CyberAgent.

Penulis dapat dihubungi melalu e-mail :  arufian703@gmail.com