Daftar Isi

1. Pengantar Backbone.js
2. Persiapan Lingkungan Pengembangan
3. Struktur Dasar Aplikasi Backbone.js
4. Model: Menyimpan Data
5. Collection: Mengelola Kumpulan Model
6. View: Menampilkan dan Mengelola UI
7. Router: Navigasi dan URL
8. Contoh Aplikasi Sederhana
9. Sumber Belajar dan Source Code

1. Pengantar Backbone.js

Backbone.js adalah sebuah library JavaScript yang membantu Anda membangun aplikasi web dengan struktur yang jelas dan terorganisir. Backbone menyediakan model, collection, view, dan router yang memudahkan pengelolaan data dan tampilan dalam aplikasi single-page.

Dengan Backbone.js, Anda dapat memisahkan logika aplikasi dari tampilan, sehingga memudahkan pengembangan dan pemeliharaan aplikasi yang kompleks.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai, pastikan Anda sudah menyiapkan lingkungan pengembangan dengan menghubungkan library Backbone.js dan dependensinya:

• jQuery (Backbone bergantung pada jQuery untuk manipulasi DOM)
• Underscore.js (Backbone menggunakan Underscore untuk utilitas)
• Backbone.js itu sendiri

Contoh cara menghubungkan library melalui CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone-min.js"></script>
      

Anda juga bisa menggunakan bundler seperti Webpack atau Vite untuk proyek yang lebih besar.

3. Struktur Dasar Aplikasi Backbone.js

Backbone.js membagi aplikasi menjadi beberapa bagian utama:

• Model: Menyimpan data dan logika bisnis.
• Collection: Kumpulan model yang dapat diurutkan dan difilter.
• View: Mengelola tampilan dan interaksi pengguna.
• Router: Mengatur navigasi dan URL aplikasi.

Setiap bagian memiliki peran penting untuk menjaga aplikasi tetap modular dan mudah dikembangkan.

4. Model: Menyimpan Data

Model adalah representasi data dan logika bisnis dalam Backbone.js. Anda dapat membuat model dengan cara berikut:

const Book = Backbone.Model.extend({
  defaults: {
    title: '',
    author: '',
    year: 0
  },
  validate: function(attrs) {
    if (!attrs.title) {
      return "Judul buku harus diisi.";
    }
  }
});

const myBook = new Book({
  title: 'Belajar Backbone.js',
  author: 'John Doe',
  year: 2024
});

console.log(myBook.get('title')); // Output: Belajar Backbone.js
      

Anda juga bisa menambahkan metode khusus pada model untuk logika bisnis.

5. Collection: Mengelola Kumpulan Model

Collection adalah kumpulan model yang memudahkan pengelolaan data secara grup. Contoh membuat collection buku:

const Library = Backbone.Collection.extend({
  model: Book
});

const myLibrary = new Library();

myLibrary.add([
  { title: 'Backbone untuk Pemula', author: 'Jane Smith', year: 2023 },
  { title: 'Mastering Backbone.js', author: 'Alex Johnson', year: 2022 }
]);

console.log(myLibrary.length); // Output: 2
      

Collection juga menyediakan metode untuk mencari, mengurutkan, dan memfilter model.

6. View: Menampilkan dan Mengelola UI

View bertanggung jawab untuk menampilkan data dan menangani interaksi pengguna. Contoh membuat view untuk menampilkan buku:

const BookView = Backbone.View.extend({
  tagName: 'li',
  className: 'mb-2 p-3 border rounded shadow-sm bg-white',
  template: _.template('<strong><%= title %></strong> oleh <%= author %> (<%= year %>)'),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

const bookView = new BookView({ model: myBook });
document.body.appendChild(bookView.render().el);
      

View dapat mendengarkan perubahan model dan memperbarui tampilan secara otomatis.

7. Router: Navigasi dan URL

Router mengatur navigasi aplikasi dan menghubungkan URL dengan fungsi tertentu. Contoh router sederhana:

const AppRouter = Backbone.Router.extend({
  routes: {
    '': 'home',
    'books/:id': 'showBook'
  },
  home: function() {
    console.log('Halaman utama');
  },
  showBook: function(id) {
    console.log('Menampilkan buku dengan ID:', id);
  }
});

const appRouter = new AppRouter();
Backbone.history.start();
      

Router memungkinkan aplikasi single-page untuk memiliki URL yang dapat diakses dan dibagikan.

8. Contoh Aplikasi Sederhana

Berikut contoh aplikasi perpustakaan sederhana menggunakan Backbone.js yang menampilkan daftar buku dan detailnya.

// Model Buku
const Book = Backbone.Model.extend({
  defaults: {
    title: '',
    author: '',
    year: 0
  }
});

// Collection Buku
const Library = Backbone.Collection.extend({
  model: Book
});

// View untuk satu buku
const BookView = Backbone.View.extend({
  tagName: 'li',
  className: 'mb-2 p-3 border rounded shadow-sm bg-white cursor-pointer hover:bg-indigo-50',
  template: _.template('<strong><%= title %></strong> oleh <%= author %>'),
  events: {
    'click': 'showDetails'
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  showDetails: function() {
    alert('Judul: ' + this.model.get('title') + '\\nPenulis: ' + this.model.get('author') + '\\nTahun: ' + this.model.get('year'));
  }
});

// View untuk daftar buku
const LibraryView = Backbone.View.extend({
  tagName: 'ul',
  render: function() {
    this.collection.each(book => {
      const bookView = new BookView({ model: book });
      this.$el.append(bookView.render().el);
    });
    return this;
  }
});

// Data buku
const myLibrary = new Library([
  { title: 'Backbone untuk Pemula', author: 'Jane Smith', year: 2023 },
  { title: 'Mastering Backbone.js', author: 'Alex Johnson', year: 2022 },
  { title: 'Belajar JavaScript Modern', author: 'Dewi Lestari', year: 2024 }
]);

// Render aplikasi
const libraryView = new LibraryView({ collection: myLibrary });
document.body.appendChild(libraryView.render().el);
      

Jalankan kode ini di browser yang sudah terhubung dengan jQuery, Underscore, dan Backbone.js untuk melihat daftar buku interaktif.

9. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan repositori source code yang dapat membantu Anda mendalami Backbone.js:

• Dokumentasi Resmi Backbone.js
• Repositori GitHub Backbone.js
• Playlist Tutorial Backbone.js di YouTube
• Kursus Backbone.js di Udemy