Javascript – Backbone JS
A. Pengertian
SammyJS adalah sebuah framework Javascript yang menggunakan design-pattern Model-
View-Controller. Backbone diciptakan untuk mengatasi kerumitan dalam membangun sebuah thick
web application (aplikasi web dengan business logic yang cukup padat). Backbone memiliki kelebihan
sebagai berikut :
• Memisahkan logic dengan interaksi DOM.
• Mengabstraksi koneksi client ke database menggunakan AJAX.
• Mempermudah representasi kepingan-kepingan html ke dalam sebuah object wrapper.
• Menjadi control flow sebuah single page web application.
• Bahkan, Backbone dapat dengan mudah mengabstraksi koneksi yang dibangun client
menggunakan websocket.
Backbone memiliki 7 komponen dasar :
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
Framework ini dapat diunduh di sini [Link]
Gambar A.1 Logo BackboneJS
B. Persiapan
Untuk menggunakan framework BackboneJS, pastikan file [Link] telah terunduh,
Disributed by Fluider Team 2
Javascript – Backbone JS
kemudian pada file HTML yang telah dibuat, tambahkan baris di bawah ini sebelum </head>.
<script src="[lokasi file [Link]]"></script>
untuk solusi template, backbone memiliki utility library bernama [Link], untuk mengunduhnya
dapat menuju url berikut : [Link] Untuk memanggil javascript underscore,
tambahkan baris di bawah ini setelah kode di atas, tambahkan juga javascript jquery.
<script src="[lokasi file [Link]]"></script>
<script src="[lokasi file [Link]]"></script>
C. Start
C.1 Dasar HTML5 Template Backbone
Untuk memulai membuat aplikasi menggunakan Framework Backbone, dibutuhkan halaman
HTML5 untuk menampilkannya di Web Browser. Untuk Pertama, buatlah sebuah file html bernama
[Link].
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Panduan Fluider</title>
<script src="[Link]" type="text/javascript"></script>
<script src="[Link]" type="text/javascript"></script>
<script src="[Link]" type="text/javascript"></script>
</head>
<body>
<div id="container">Loading...</div>
Disributed by Fluider Team 3
Javascript – Backbone JS
<script type="text/javascript">
// Javascript kode
</script>
</body>
</html>
Aplikasi Backbone membutuhakan library seperti [Link], [Link] dan [Link], untuk
memanggil library dapat melihat kodenya pada tahap “[Link]”.
Untuk fungsi dari <div id=”container”> … </div> adalah untuk menampilkan semua fungsi aplikasi js
dari user atau developer aplikasi, untuk kode javascript dari user dapat di letakkan pada bagian <script
type=”text/javascript”> … </script>
Simpan kode di atas, kemudian buka di web browser.
Gambar C.1 Template Dasar BackboneJS
C.2 Hello World
Untuk tahap kedua akan dibahas bagaimana cara menampilkan 'Hello World' pada halaman
html dengan menggunakan fungsi [Link] pada library backbonejs.
Apa itu [Link] ?
[Link] merupakan representasi ‘kepingan-kepingan’ html pada Backbone. Inti dari
sebuah [Link] adalah bagaimana sebuah view dapat sinkron dengan representasi data yang
menjadi tanggung jawabnya, serta bagaimana aksi-aksi user pada sebuah view dapat diubah menjadi
aksi-aksi pada data (model) yang sesuai.
Disributed by Fluider Team 4
Javascript – Backbone JS
Beberapa fitur yang menarik dari [Link] adalah kemudahan [Link] dalam
mengelola user-triggered event serta keluwesan penggunaan library javascript untuk manipulasi DOM
(jQuery atau Zepto).
Tambahkan konfigurasi fungsi javascript [Link] pada file [Link].
<script type="text/javascript">
var AppView = [Link] .extend({
el: '#container',
initialize: function(){
[Link]();
},
render: function(){
this.$[Link]("Hello World");
}
});
var appView = new AppView();
</script>
Penjelasan :
el = singkatan dari element. Element di sini menghubungkan konten HTML dengan fungsi Javascript
Backbone.
Var appView = new AppView(); = digunakan untuk menginisialisasi tampilan pertama.
Simpan kode tersebut, kemudian tampilkan di browser.
Gambar C.2 Tampilan Hello World
Disributed by Fluider Team 5
Javascript – Backbone JS
C.3 Template Backbone dengan UnderscoreJS
Dalam tahap ini, pengguna akan mengubah template dasar backbone pada tahap sebelumnya
menjadi template Backbone dengan menggunakan Underscore JS. Berikut langkah-langkahnya :
Template [Link] memiliki signature berikut :
_.template(templateString, [data], [settings])
Dimana fungsi “templateString” menggunakan place holder “<%= %>” dan “<%- %>” untuk
menggantinya dengan data. Selain itu juga dapat menggunakan “<% %>” untuk menjalankan
javascript.
1. Ubah el: '#container', menjadi :
el: $('#container'),
2. Tambahkan kode signature Underscore js setelah kode di atas.
Template: _.template(“<h3>Hello <%= who %><h3>”),
Fungsi template di atas memiliki placeholder 'who' yang akan digunakan sebagai kata pengganti.
3. Ubah kode “this.$[Link]("Hello World");” menjadi :
“this.$[Link]([Link]({who: 'World!'}));”.
Fungsi di atas digunakan untuk mengganti variabel “who” untuk “World!”.
Disributed by Fluider Team 6
Javascript – Backbone JS
4. Jalankan aplikasi di atas dan pastikan bekerja di web browser.
Gambar C.3.2 Halaman Template UnderscoreJS
C.4 Membuat Todo App
Pada tahap ini akan dijelaskan bagaimana membuat aplikasi todo, aplikasi ini berhubungan
dengan fungsi centang. Untuk tahap pertama, buat file html kedua dengan menggunakan kode
“Template Dasar Backbone” pada tahap “C.1” .
1. Buatlah sebuah tampilan html untuk menampilkan aplikasi dasar “Todos”.
<section id="todoapp">
<header id="header">
<h1>Todos</h1>
<input id="new-todo" placeholder="Apa kegiatan kamu?">
</header>
<section id="main">
<ul id="todo-list"></ul>
</section>
</section>
Penghubung antara javascript dan html adalah di bagian “<ul id='todo-list'></ul> ”.
Disributed by Fluider Team 7
Javascript – Backbone JS
Kemudian simpan html di atas dan tampilkan di web browser.
Gambar C.4.1 Tampilan HTML TodoApp.
2. Tambahkan fungsi javascript di bawah ini pada file html, kode javascript ini menggunakan
komponen [Link].
<script type="text/javascript">
var app = {}; // membuat namespace untuk app user
[Link] = [Link]({
defaults: {
title: '',
completed: false
}
});
</script>
Apa itu [Link] ?
Model merupakan inti dari setiap aplikasi, Model memuat data interaktif dan logika. Seperti
data validation, getters and setters, default value, data initialization, conversion dan lain-lain.
Setelah itu simpan konfigurasi tersebut, uji pada web browser, pilih web browser Chrome
kemudian tekan “Ctrl + Shift + I” untuk membuka Console, kemudian jalankan perintah di bawah ini
pada console tersebut.
> var todo = new [Link]({title: 'Learn [Link]', completed: false});
undefined
Disributed by Fluider Team 8
Javascript – Backbone JS
> [Link]('title');
"Learn [Link]"
> [Link]('completed');
false
> [Link]('created_at');
undefined
> [Link]('created_at', Date());
child{cid:"c1",attributes:Object,_changing:false,_previousAttributes:Object,chan
ged:Object…}
> [Link]('created_at');
"Fri Apr 12 2013 16:35:08 GMT+0700 (WIT)"
Jika kode [Link] tidak terbaca pada web browser, ketika mencoba kode di atas akan tampil
error di bawah ini.
Gambar C.4.2 Error pada Console Chrome.
Disributed by Fluider Team 9
Javascript – Backbone JS
3. Kemudian tambahkan kode javascript di bawah ini untuk membuat sebuah fungsi untuk
penyimpanan, letakkan di dalam kode <script> setelah kode “[Link]” di atas.
[Link] = [Link]({
model: [Link],
localStorage: new Store("backbone-todo")
});
[Link] = new [Link]();
Kode diatas menggunakan komponen [Link].
Fungsi dari Backbone Collection memungkinkan untuk menyimpan data dalam database, file
atau memory dan memerlukan referensi yang di spesifikasikan dengan parameter url dengan url
relatif, dimana sumber daya Model akan diletakkan di server. Jika tidak maka akan menampilkan error
seperti di bawah ini.
A "url" property or function must be specified
Kode di atas menggunakan penyimpanan lokal HTML5, jadi yang diperlukan untuk mendefinisikan
penyimpanan adalah “localStorage” bukan “url”. Untuk membuat kode di atas berjalan, tambahkan
javascript [Link] pada [Link].
<script src="[Link]" type="text/javascript"></script>
Unduh file [Link] pada url di bawah ini.
[Link]
Untuk menguji kode tersebut, dapat menggunakan Console dari Google Chrome, gunakan perintah di
bawah ini.
> var todoList = new [Link]()
Disributed by Fluider Team 10
Javascript – Backbone JS
undefined
> [Link]({title: 'Learn Backbone\'s Collection'});
r{cid:"c1",attributes:Object,collection:r,_changing:false,_previousAttributes:Ob
ject…}
> var lmodel = new [Link]({title: 'Learn Models', completed: true});
undefined
> [Link](lmodel);
r{length:2,models:Array[2],_byId:Object,constructor:function,model:function…}
> [Link]('title');
["Learn Backbone's Collection", "Learn Models"]
> [Link](todoList);
"[{"title":"Learn Backbone's Collection","completed":false,"id":"03785394-30ab-
adb8-32c1-bd085457b175"},{"title":"Learn Models","completed":true}]"
4. Saatnya beralih ke Todo App, buatlah sebuah template untuk menampilkan fungsi model Object ke
dalam halaman, gunakan “item-template” pada id template dan “TodoView” untuk fungsi javascript.
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox">
<label><%- title %></label>
</div>
</script>
untuk script template di atas letakkan setelah kode </section>.
[Link] = [Link]({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$[Link]([Link]([Link]()));
return this;
}
Disributed by Fluider Team 11
Javascript – Backbone JS
});
5. Langkah terakhir adalah menambahkan kode javascript “AppView”.
[Link] = [Link]({
el: '#todoapp',
initialize: function () {
[Link] = this.$('#new-todo');
[Link]('add', [Link], this);
[Link]('reset', [Link], this);
[Link]();
},
events: {
'keypress #new-todo': 'createTodoOnEnter'
},
createTodoOnEnter: function(e){
if ( [Link] !== 13 || ![Link]().trim() ) {
return;
}
[Link]([Link]());
[Link]('');
},
addOne: function(todo){
var view = new [Link]({model: todo});
$('#todo-list').append([Link]().el);
},
addAll: function(){
this.$('#todo-list').html('');
[Link]([Link], this);
},
newAttributes: function(){
return {
title: [Link]().trim(),
completed: false
}
Disributed by Fluider Team 12
Javascript – Backbone JS
}
});
[Link] = new [Link]();
Kemudian uji pada web browser, jika berhasil maka ketika user memasukkan inputan berupa kegiatan,
akan muncul daftar list di bawah inputan.
Gambar C.4.5 TodoApp List.
C.5 Membuat CRUD
Pada tahap kelima akan dibahas bagaimana cara membuat CRUD (Create, Read, Update, dan
Delete).
1. Untuk fitur “Create” dan “Read” telah dibuat pada tahap sebelumnya, saatnya lanjut dengan
membuat fitur “Update”, fitur “Update” digunakan untuk memperbaiki kesalahan dalam pengetikan
atau inputan (masukkan) ke dalam Aplikasi.
Buatlah sebuah tampilan inputan pada halaman untuk fungsi edit, tambahkan ke dalam kode <script
type=”text/template” id=”item-template”>
Disributed by Fluider Team 13
Javascript – Backbone JS
<input class="edit" value="<%- title %>">
Jika sudah, simpan konfigurasi html tersebut, kemudian tampilkan di web browser.
Gambar C.5.1 Tampilan Fitur Todo App.
2. Pada tampilan di atas, fungsi edit berseberangan dengan list, untuk menyembunyikan fungsi edit
adpat menggunakan kode CSS di bawah ini, letakkan sebelum </head>.
<style>
#todoapp ul {
list-style-type: none;
}
#todo-list [Link] {
display: none;
}
#todo-list .editing label {
display: none;
}
#todo-list .editing [Link] {
display: inline;
}
</style>
Disributed by Fluider Team 14
Javascript – Backbone JS
Fungsi CSS di atas adalah menyembunyikan fungsi “Edit” dan menampilkannya ketika proses Editing.
3. Ubah template input untuk fungsi “checkbox” menjadi seperti kode di bawah ini.
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
4. Ubah juga kode Backbone Model menjadi kode berikut :
[Link] = [Link]({
defaults: {
title: '',
completed: false
},
toggle: function(){
[Link]({ completed: });
}
});
5. Setelah itu dibutuhkan juga event pada TodoView untuk merespon perubahan. Ubah kode event
TodoView menjadi kode di bawah ini.
[Link] = [Link]({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$[Link]([Link]([Link]()));
[Link] = this.$('.edit');
return this;
},
initialize: function(){
[Link]('change', [Link], this);
},
events: {
Disributed by Fluider Team 15
Javascript – Backbone JS
'dblclick label' : 'edit',
'keypress .edit' : 'updateOnEnter',
'blur .edit' : 'close',
'click .toggle': 'toggleCompleted'
},
edit: function(){
this.$[Link]('editing');
[Link]();
},
close: function(){
var value = [Link]().trim();
if(value) {
[Link]({title: value});
}
this.$[Link]('editing');
},
updateOnEnter: function(e){
if([Link] == 13){
[Link]();
},
toggleCompleted: function() {
[Link]();
}
});
Setelah itu simpan konfigurasi di atas, kemudian buka sekali lagi pada browser, kemudian pada salah
satu list klik dua kali, kemudian ubah kegiatan atau perbaiki kata-kata, setelah itu tekan “Enter”.
Disributed by Fluider Team 16
Javascript – Backbone JS
Gambar C.5.3 Tampilan Fitur Edit
.
4. Terakhir, saatnya membuat fitur 'Delete', tambahkan kode di bawah ini di bagian “initialize:
function()”.
[Link]('destroy', [Link], this);
Buat sebuah event untuk fitur 'Delete' tersebut, letakkan pada bagian “events: { … },”.
'click .toggle': 'toggleCompleted',
'click .destroy': 'destroy'
Tambahkan sebuah fungsi javascript baru pada “[Link]”, letakkan di bagian akhir fungsi.
toggleCompleted: function() {
[Link]();
},
destroy: function(){
[Link]();
}
Disributed by Fluider Team 17
Javascript – Backbone JS
Setelah itu, buat sebuah tombol pada tampilan html untuk fitur 'Delete', tambahkan pada bagian <div
class="view"> … </div>
<button class="destroy">delete</button>
Simpan konfigurasi, kemudian buka halaman pada web browser, uji fitur 'Delete' dengan menekan
tombol 'Delete'.
Gambar C.5.4 Tampilan Fitur Delete
C.6 Menambahkan Fungsi Router
Untuk pembuatan aplikasi Backbone, sebenarnya tidak membutuhkan fungsi Router. Namun,
jika ingin membuat sebuah referensi lokasi tertentu dari aplikasi web, dibutuhkan referensi (link/URL).
Di sinilah guna dari fungsi Router.
Fungsi dari router ini dapat dijabarkan di url dengan penggunaan
“[Link] ” . Dalam Backbone, penggunaan route menggunakan part
parameter seperti, “todos/:id” atau menggunakan “file/*path”.
Pada aplikasi Todo, fungsi router yang akan digunakan adalah untuk menyaring antara tugas-
tugas yang tertunda dana tugas yang telah selesai dikerjakan.
1. Tambahkan kode di bawah ini pada bagian <script> … </script>. Letakkan sebelum “[Link] =
new [Link]();”.
Disributed by Fluider Team 18
Javascript – Backbone JS
[Link] = [Link]({
routes: {
'*filter' : 'setFilter'
},
setFilter: function(params) {
[Link]('[Link] = ' + params);
[Link] = [Link]() || '';
[Link]('reset');
}
});
[Link] = new [Link]();
[Link]();
Tes dengan menambahkan “#example/test1/test2/test3” pada url, kemudian lihat pada console
browser.
Gambar C.6.1 Tampilan Routing pada URL.
Disributed by Fluider Team 19
Javascript – Backbone JS
2. Buat sebuah proses routing pada “[Link]”, ubah baris pada “addAll: function()” dengan kode
di bawah ini.
addAll: function(){
this.$('#todo-list').html('');
switch([Link]){
case 'pending':
_.each([Link](), [Link]);
break;
case 'completed':
_.each([Link](), [Link]);
break;
default:
[Link]([Link], this);
break;
}
},
Agar kode di atas berfungsi, ubah versi dari backbonejs dari 1.0 ke versi 0.9, untuk mengunduhnya
dapat menuju link di bawah ini.
[Link]
Disributed by Fluider Team 20
Javascript – Backbone JS
Setelah itu cek pada console browser Chrome, tambahkan tambahan “#/pending” dan “#/completed”,
jika terdapat error seperti pada gambar di bawah ini, berarti fungsi router telah berfungsi.
Gambar C.6.2 Tampilan Filtering Route.
3. Kemudian, definisikan kode untuk tampilan '#/pending' dan '#/completed', ubah kode
“[Link]” dengan kode di bawah ini.
[Link] = [Link]({
model: [Link],
localStorage: new [Link]("todos-backbone"),
completed: function() {
return [Link](function( todo ) {
return [Link]('completed');
});
},
remaining: function() {
return [Link]( this, [Link]() );
Disributed by Fluider Team 21
Javascript – Backbone JS
}
});
4. Buat sebuah link yang mengarahkan ke url “#/pending” dan “#/completed”, letakkan di antara kode
<header id="header"> … </header>, letakkan pada baris terakhir.
<div>
<a href="#/">tampilkan semua</a> |
<a href="#/pending">list pending</a> |
<a href="#/completed">list terselesaikan</a>
</div>
Kemudian, buka web browser untuk menguji konfigurasi halaman html di atas, centang kegiatan yang
telah diselesaikan, kemudian klik link “list terselesaikan”.
Gambar C.6.4 Tampilan Filtering Route untuk list terselesaikan.
--- Selamat Mencoba ---
Disributed by Fluider Team 22