Contoh Sederhana Marionettejs

Setelah sekian lama menggunakan javascript secara biasa saja, ya sekedar load javascript gunakan fungsi2 nya dll dll. Beberapa waktu ini baca-baca mengenai beberapa cara lain menggunakan javascript, atau mungkin lebih tepatnya penggunaan teknologi baru, setidaknya bagi saya, dalam ber javascript. Mungkin sudah banyak yang tahu mengenai angularjs, emberjs, backbonejs dll. Semacam framework dan library javascript yang menggunakan pattern mvc. Katanya sih untuk memudahkan, tapi bagi saya tetap mempersulit karena harus belajar lagi. Setelah baca-baca entah kenapa saya pribadi tertarik mencoba marionette js, semacam plugin(atau apalah namanya) yang dibuat untuk backbonejs. Sila cari dan baca-baca sendiri apa itu backbone dan apa itu marionette. Kenapa tertarik dengan marionettejs? jujur karena namanya, awalnya pengen nyoba emberjs tapi kok namanya gimana gitu, ember, kurang menarik bagi saya, lebih keren marionette :))
Oke, simple saja, untuk uji coba saya implementasikan untuk bagian “panel” (klik tulisan panel di kiri atas akan muncul kotak berisi last post dan last comment). Masih sangat sederhana karena ini pertama kali menggunakan marionettejs.
Pertama, silahkan download dulu dari file-file javascript yang dibutuhkan dari website nya ada link download nya kok disitu gak usah takut, setelah itu extract dan seperti biasa load file-file javascriptnya di halaman web.
Siapkan template untuk menampilkan datanya:

<script type="text/template" id="last-post-ul">
<h3>Last Post</h3>
<ul></ul> 
</script>
<script type="text/template" id="last-post-li">
 <a href="{{ URL::to('/view/<%= slug %>') }}"><%= subject %></a>   
</script>
<div id="panelcontent" class="span12" style="display:none;">
    <div id="last-post" class="span4"></div>
</div>

Buat aplikasi marionette js nya:

var App = new Backbone.Marionette.Application();
App.addRegions({
    mainRegion:"#panelcontent",
    lastpost:"#last-post",
});
App.on("initialize:after",function(){
    if(Backbone.history) {
        Backbone.history.start();
    }
});

Untuk menampilkan last post, saya buat sebuah module:

App.module("LastPostModule",function(Mod,App,Backbone,Marionette,$,_){
})

didalam module ini nantinya akan dibuat model, proses mengambil data dan menampilkannya lewat controller dan view.
Untuk view nya sendiri dibuat seperti ini:

var postRow = Backbone.Marionette.ItemView.extend({
    template: '#last-post-li',
    tagName: 'li'
});
var PostList = Backbone.Marionette.CompositeView.extend({
    template: '#last-post-ul',
    itemViewContainer: 'ul',
    itemView: postRow
});

di view ini kita mendefinisikan tampilan untuk daftar last post yang akan ditampilkan.
Untuk modelnya, kita definisikan seperti berikut:

var LastPost = Backbone.Model.extend({
    defaults: {
        'slug': null,
        'subject':null
    }
});

slug dan subject merupakan variabel isi dari data modelnya. Kemudian kita definisikan bahwa data model adalah collection, ini mungkin semacam array/object yang berisi data last post yang akan kita gunakan, untuk datanya sendiri nanti akan berformat json, kira-kira seperti ini:

[
   {
      "subject":"Terlalu Fanatik Itu Tidak Baik",
      "slug":"terlalu-fanatik-itu-tidak-baik"
   },
   {
      "subject":"Ikuti Yang Sesuai Keinginan",
      "slug":"ikuti-yang-sesuai-keinginan"
   },
   {
      "subject":"RSS Feed",
      "slug":"rss-feed"
   },
   {
      "subject":"Sego Wiwit",
      "slug":"sego-wiwit"
   },
   {
      "subject":"Codeigniter Dijual?",
      "slug":"codeigniter-dijual"
   }
]
var PostC = Backbone.Collection.extend({
    model: LastPost
});

Setelah itu kita buat controllernya:

var Controller = Marionette.Controller.extend({
});

kemudian kita buat fungsi dari controller yang akan dieksekusi untuk menampilkan data:

initialize: function(options) {
    this.region = options.region
},
lastpost: function() {
    var post = new PostC();
    var postList = new PostList({ collection:post });

    post.fetch({url: '{{ URL::to("lastpost") }}',reset:true });

    this.region.show(postList);
}

bagian:

var post = new PostC();
var postList = new PostList({ collection:post });

mendefinisikan data dan view yang akan digunakan.
bagian

post.fetch({url: '{{ URL::to("lastpost") }}',reset:true });

untuk mengambil data last post yang akan dieksekusi via request ajax
dan terakhir

this.region.show(postList);

untuk menampilkan data.
Setelah itu kita buat initialisasi agar fungsi lastpost tersebut dijalankan:

Mod.addInitializer(function() {
    Mod.controller = new Controller({
        region: App.lastpost
    });
    Mod.controller.lastpost();
});

dan terakhir jalankan aplikasi marionette nya:

App.start();

Sebenarnya masih ada banyak sekali fitur yang bisa membuat script contoh diatas lebih singkat dan lebih efisien, tapi berhubunng baru nyoba sebatas itu ya itu dulu saja, mohon dimaafkan kalau kurang jelas karena saya sendiri juga belum terlalu ngerti. Jika ingin melihat script secara lengkap bisa dengan melihat source halaman ini.

Terlalu Fanatik Itu Tidak Baik

Sesuai dengan judulnya, dalam bentuk apapun terlalu fanatik itu tidak baik. Apalagi kalau sampai menganggap diri sendiri yang paling benar terus yang lain jelek, tidak bagus, tidak benar dll dll.

Dalam hal tertentu fanatik tetap dibutuhkan, contohnya saya sebagai muslim secara fanatik membabi buta setuju kalau sholat dzuhur itu aslinya 4 rokaat, kalau ada yang kurang dari itu (kecuali yang lagi qoshor ya) maka salah atau lebih dari 4 ya salah. Fanatik yang seperti itu saya rasa gak masalah, soalnya ada dalam hal yang jelas aturannya. Tapi kalau untuk hal-hal lain yang memang tidak jelas ya udahlah gak usah fanatik-fanatik banget, biasa saja.

Sejak awal ramadhan ini banyak yang tiba-tiba jadi fanatik, masalah apa? ya masalah penentuan tanggal 1. Sampai tadi pun saya masih menjumpai beberapa yang membela pendapatnya dan nyinyirin pendapat yang lain. Dan sepertinya akan rame lagi menjelang penentuan 1 syawal.

Ya semoga saja tahun depan hal-hal seperti ini tidak perlu terjadi, semua bisa menahan diri dan saling bersabar. Kalau bisa sih ada salah satu yang mau ngalah, jadi bisa bareng-bareng, kan lebih afdhal tu kalau bisa serentak, bukannya kebersamaan dalam jamaah itu lebih utama dari pada perbedaan? ingatkan cerita imam Ahmad yang membid’ahkan qunut subuh tapi tetap menyuruh mengikuti jika imam sholat melakukan qunut?

“Jika engkau shalat di belakang Imam yang qunut maka ikutilah qunutnya, dan aminkanlah doa imam tersebut.”

Demi persatuan dan kebersamaan umat, serta agar tidak timbul kebencian antara sebagian kita terhadap sebagian yang lain kenapa to harus ngeyel-ngeyelan? menganggap kita sendiri yang paling benar dan yang lain pasti salah?.

Duh dari mau nulis tentang fanatik malah mbleber kemana-mana 😐

Ikuti Yang Sesuai Keinginan

Inget obrolan tadi pagi sama istri seusai subuh. Manusia itu biasanya, biasanya ya, akan lebih memilih membenarkan/membela apa yang sesuai dengan yang diyakini atau hal-hal yang disukai. Walau berasal dari keyakinan yang dianut kalau gak sesuai keinginan ya kalau bisa ditinggalkan, dicari yang sesuai dengan keinginan.

Contoh sederhana, dan ini cuma misalnya, saya seorang perokok dan kebetulan anggota dari sebuah kumpulan yang ternyata mengeluarkan fatwa mengharamkan rokok. Ya berhubung gak bisa meninggalkan rokok ya saya cuek aja, fatwa ini bisa salah, begitu kira-kira pembelaan saya. Tapi untuk hal-hal lain yang tidak mengganggu privasi ya saya ikuti, kalau perlu saya bela habis-habisan.

Bukan bermaksud menyinggung, hanya sebuah renungan saja, semoga tidak membuat salah persepsi.

Sego Wiwit

Jadi kemarin buka bareng temen-temen di sego wiwit, dan berhubung ada sponsor jadi gratisan :D. Yang belum tahu sego wiwit berlokasi di deket selokan mataram ring road barat jogja. Tempatnya di kampung tapi gak terlalu jauh dari kota yogya.

Tempat dan menu makanannya sih lumayan, gak mewah tapi nyaman dan asyik, ada kolam renangnya juga bagi yang mau sambil nyebur. Modelnya lesehan dengan tempat makan berupa rumah-rumah di pinggir/atas kolam/danau. Yang kurang asyik kolamnya airnya buthek(keruh) agak kurang nyaman dilihat.

Ini salah satu foto kolam disana sego_wiwit.

Dan pas pulang parkirnya yang biasa 1000 rupiah ternyata sudah naik jadi 2000 rupiah, entah kara bulan puasa atau karena harga bensin yang naik :D.