Backbone Js

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 :

• Backbone.Events
• Backbone.Model
• Backbone.Collection
• Backbone.Router
• Backbone.History
• Backbone.View
• Backbone.sync
Framework ini dapat diunduh di sini http://backbonejs.org.
Gambar A.1 Logo BackboneJS
B. Persiapan
Untuk menggunakan framework BackboneJS, pastikan file backbone.js telah terunduh,
Disributed by Fluider Team 2

kemudian pada file HTML yang telah dibuat, tambahkan baris di bawah ini sebelum </head>.
<script src="[lokasi file backbone-min.js]"></script>
untuk solusi template, backbone memiliki utility library bernama underscore.js, untuk mengunduhnya
dapat menuju url berikut : http://underscorejs.org/. Untuk memanggil javascript underscore,
tambahkan baris di bawah ini setelah kode di atas, tambahkan juga javascript jquery.
<script src="[lokasi file underscore.js]"></script>

<script src="[lokasi file jquery.js]"></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
index.html.
<!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="jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="underscore.js" type="text/javascript"></script>
<script src="backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">Loading...</div>

<script type="text/javascript">
// Javascript kode
</script>
</body>
</html>
Aplikasi Backbone membutuhakan library seperti backbone.js, underscore.js dan jquery.js, untuk
memanggil library dapat melihat kodenya pada tahap “B.Persiapan”.
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 Backbone.View pada library backbonejs.
Apa itu Backbone.View ?

Backbone.View merupakan representasi ‘kepingan-kepingan’ html pada Backbone. Inti dari
sebuah Backbone.View 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.

Beberapa fitur yang menarik dari Backbone.View adalah kemudahan Backbone.View dalam
mengelola user-triggered event serta keluwesan penggunaan library javascript untuk manipulasi DOM
(jQuery atau Zepto).
Tambahkan konfigurasi fungsi javascript Backbone.View pada file index.html.
var AppView = Backbone.View .extend({
el: '#container',
initialize: function(){
this.render();
},
render: function(){
this.$el.html("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

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 Underscore.js 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.$el.html("Hello World");” menjadi :
“this.$el.html(this.template({who: 'World!'}));”.
Fungsi di atas digunakan untuk mengganti variabel “who” untuk “World!”.

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> ”.

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 Backbone.Model.
var app = {}; // membuat namespace untuk app user
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
</script>
Apa itu Backbone.Model ?

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 app.Todo({title: 'Learn Backbone.js', completed: false});

undefined

> todo.get('title');
"Learn Backbone.js"
> todo.get('completed');
false
> todo.get('created_at');
undefined
> todo.set('created_at', Date());
child{cid:"c1",attributes:Object,_changing:false,_previousAttributes:Object,chan
ged:Object…}
> todo.get('created_at');
"Fri Apr 12 2013 16:35:08 GMT+0700 (WIT)"
Jika kode Backbone.Model tidak terbaca pada web browser, ketika mencoba kode di atas akan tampil
error di bawah ini.
Gambar C.4.2 Error pada Console Chrome.

3. Kemudian tambahkan kode javascript di bawah ini untuk membuat sebuah fungsi untuk
penyimpanan, letakkan di dalam kode <script> setelah kode “Backbone.Model” di atas.
app.TodoList = Backbone.Collection.extend({
model: app.Todo,
localStorage: new Store("backbone-todo")
});
app.todoList = new app.TodoList();
Kode diatas menggunakan komponen Backbone.Collection.

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 backbone.localStorage-min.js pada index.html.
<script src="backbone.localStorage.js" type="text/javascript"></script>
Unduh file backbone.localStorage-min.js pada url di bawah ini.

http://backbonejs.org/examples/backbone.localStorage.js.
Untuk menguji kode tersebut, dapat menggunakan Console dari Google Chrome, gunakan perintah di
bawah ini.
> var todoList = new app.TodoList()

undefined
> todoList.create({title: 'Learn Backbone\'s Collection'});
r{cid:"c1",attributes:Object,collection:r,_changing:false,_previousAttributes:Ob
ject…}
> var lmodel = new app.Todo({title: 'Learn Models', completed: true});
undefined
> todoList.add(lmodel);
r{length:2,models:Array[2],_byId:Object,constructor:function,model:function…}
> todoList.pluck('title');
["Learn Backbone's Collection", "Learn Models"]
> JSON.stringify(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>.
app.TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}

});
5. Langkah terakhir adalah menambahkan kode javascript “AppView”.
app.AppView = Backbone.View.extend({
el: '#todoapp',
initialize: function () {
this.input = this.$('#new-todo');
app.todoList.on('add', this.addAll, this);
app.todoList.on('reset', this.addAll, this);
app.todoList.fetch();
},
events: {
'keypress #new-todo': 'createTodoOnEnter'
},
createTodoOnEnter: function(e){
if ( e.which !== 13 || !this.input.val().trim() ) {
return;
}
app.todoList.create(this.newAttributes());
this.input.val('');
},
addOne: function(todo){
var view = new app.TodoView({model: todo});
$('#todo-list').append(view.render().el);
},
addAll: function(){
this.$('#todo-list').html('');
app.todoList.each(this.addOne, this);
},
newAttributes: function(){
return {
title: this.input.val().trim(),
completed: false
}

}
});
app.appView = new app.AppView();
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”>

<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 input.edit {
display: none;
}
#todo-list .editing label {
display: none;
}
#todo-list .editing input.edit {
display: inline;
}
</style>

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 :
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
toggle: function(){
this.save({ completed: !this.get('completed')});
}
});
5. Setelah itu dibutuhkan juga event pada TodoView untuk merespon perubahan. Ubah kode event
TodoView menjadi kode di bawah ini.
app.TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
this.input = this.$('.edit');
return this;
},
initialize: function(){
this.model.on('change', this.render, this);
},
events: {

'dblclick label' : 'edit',

'keypress .edit' : 'updateOnEnter',
'blur .edit' : 'close',
'click .toggle': 'toggleCompleted'
},
edit: function(){
this.$el.addClass('editing');
this.input.focus();
},
close: function(){
var value = this.input.val().trim();
if(value) {
this.model.save({title: value});
}
this.$el.removeClass('editing');
},
updateOnEnter: function(e){
if(e.which == 13){
this.close();
},
toggleCompleted: function() {
this.model.toggle();
}
});
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”.

Gambar C.5.3 Tampilan Fitur Edit

.
4. Terakhir, saatnya membuat fitur 'Delete', tambahkan kode di bawah ini di bagian “initialize:
function()”.
this.model.on('destroy', this.remove, this);
Buat sebuah event untuk fitur 'Delete' tersebut, letakkan pada bagian “events: { … },”.
'click .toggle': 'toggleCompleted',

'click .destroy': 'destroy'
Tambahkan sebuah fungsi javascript baru pada “app.TodoView”, letakkan di bagian akhir fungsi.
toggleCompleted: function() {
this.model.toggle();
},
destroy: function(){
this.model.destroy();
}

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

“http://example.com/#example/123456 ” . 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 “app.appView =
new app.AppView();”.

app.Router = Backbone.Router.extend({
routes: {
'*filter' : 'setFilter'
},
setFilter: function(params) {
console.log('app.router.params = ' + params);
window.filter = params.trim() || '';
app.todoList.trigger('reset');
}
});
app.router = new app.Router();

Backbone.history.start();
Tes dengan menambahkan “#example/test1/test2/test3” pada url, kemudian lihat pada console
browser.
Gambar C.6.1 Tampilan Routing pada URL.

2. Buat sebuah proses routing pada “app.AppView”, ubah baris pada “addAll: function()” dengan kode
di bawah ini.
addAll: function(){
this.$('#todo-list').html('');
switch(window.filter){
case 'pending':
_.each(app.todoList.remaining(), this.addOne);
break;
case 'completed':
_.each(app.todoList.completed(), this.addOne);
break;
default:
app.todoList.each(this.addOne, 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.
http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.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
“app.TodoList” dengan kode di bawah ini.
app.TodoList = Backbone.Collection.extend({
model: app.Todo,
localStorage: new Backbone.LocalStorage("todos-backbone"),
completed: function() {
return this.filter(function( todo ) {
return todo.get('completed');
});
},
remaining: function() {
return this.without.apply( this, this.completed() );

}
});
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 ---

Backbone Js

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Backbone Js

Diunggah oleh

Hak Cipta:

Format Tersedia

Javascript – Backbone JS

Backbone memiliki 7 komponen dasar :

Framework ini dapat diunduh di sini http://backbonejs.org.

Gambar A.1 Logo BackboneJS

Disributed by Fluider Team 2

<script src="[lokasi file backbone-min.js]"></script>

<script src="[lokasi file underscore.js]"></script>

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>

Disributed by Fluider Team 3

Simpan kode di atas, kemudian buka di web browser.

Gambar C.1 Template Dasar BackboneJS

C.2 Hello World

Apa itu Backbone.View ?

Disributed by Fluider Team 4

Tambahkan konfigurasi fungsi javascript Backbone.View pada file index.html.

var appView = new AppView();

Simpan kode tersebut, kemudian tampilkan di browser.

Gambar C.2 Tampilan Hello World

Disributed by Fluider Team 5

C.3 Template Backbone dengan UnderscoreJS

Template Underscore.js memiliki signature berikut :

_.template(templateString, [data], [settings])

1. Ubah el: '#container', menjadi :

2. Tambahkan kode signature Underscore js setelah kode di atas.

Template: _.template(“<h3>Hello <%= who %><h3>”),

3. Ubah kode “this.$el.html("Hello World");” menjadi :

Fungsi di atas digunakan untuk mengganti variabel “who” untuk “World!”.

Disributed by Fluider Team 6

4. Jalankan aplikasi di atas dan pastikan bekerja di web browser.

Gambar C.3.2 Halaman Template UnderscoreJS

C.4 Membuat Todo App

1. Buatlah sebuah tampilan html untuk menampilkan aplikasi dasar “Todos”.

Penghubung antara javascript dan html adalah di bagian “<ul id='todo-list'></ul> ”.

Disributed by Fluider Team 7

Kemudian simpan html di atas dan tampilkan di web browser.

Gambar C.4.1 Tampilan HTML TodoApp.

Apa itu Backbone.Model ?

> var todo = new app.Todo({title: 'Learn Backbone.js', completed: false});

Disributed by Fluider Team 8

Gambar C.4.2 Error pada Console Chrome.

Disributed by Fluider Team 9

app.todoList = new app.TodoList();

Kode diatas menggunakan komponen Backbone.Collection.

A "url" property or function must be specified

<script src="backbone.localStorage.js" type="text/javascript"></script>

Unduh file backbone.localStorage-min.js pada url di bawah ini.

> var todoList = new app.TodoList()

Disributed by Fluider Team 10

<script type="text/template" id="item-template">

untuk script template di atas letakkan setelah kode </section>.

Disributed by Fluider Team 11

5. Langkah terakhir adalah menambahkan kode javascript “AppView”.

Disributed by Fluider Team 12

app.appView = new app.AppView();

Gambar C.4.5 TodoApp List.

C.5 Membuat CRUD

Disributed by Fluider Team 13

<input class="edit" value="<%- title %>">

Gambar C.5.1 Tampilan Fitur Todo App.

Disributed by Fluider Team 14

<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>

4. Ubah juga kode Backbone Model menjadi kode berikut :

Disributed by Fluider Team 15

'dblclick label' : 'edit',