Menggabungkan banyak file script dengan Ant

Tips penting untuk optimasi website adalah mengurangi jumlah komponen yang ter-load. Yahoo!’s Exceptional Performance team menempatkan tip ini pada urutan pertama, ini artinya mengurangi jumlah komponen-komponen yang ter-load seperti image, style dan script file akan dapat mempercepat waktu load secara nyata pada halaman web. Beberapa artikel berkenaan optimasi pernah saya tulis, diantaranya:

• Optimasi Web menggunakan Yslow
• Plugin wordpress: Optimasi Web dengan W3 Total Cache
• Plugin wordpress: Optimasi Image Upload dengan Smush.It

Masih terkait dengan optimasi website, artikel ini akan menjelaskan bagaimana kita dapat menggabungkan beberapa file javascript menjadi satu file javascript, istilah teknisnya adalah concatenate file. Kita bisa saja melakukannya secara manual dengan satu persatu isi file kita pindahkan. Untuk dua atau tiga file mungkin cara ini dapat dilakukan, tapi dengan jumlah file lebih dari itu, tentu cara ini akan sangat merepotkan.

Pada tutorial ini, saya akan tunjukkan bagaimana cara concatenate javascript file dengan memakai Ant script pada Netbeans. Sebenarnya ini pengalaman yang saya dapati kemaren. Saya mendapatkan sebuah theme wordpress yang harus saya pakai, namun setelah saya pelajari ternyata theme ini meload belasan librari jQuery pada setiap page wordpress. Hal ini tentunya merupakan permasalahan untuk optimasi website yang saya kerjakan.

Berikut adalah IDE dan ant version yang saya gunakan:

• NetBeans 7.0 untuk PHP Project 
• Ant version 1.12.1

STEP 1. BUAT BUILD.XML

File konfigurasi yang akan dibaca oleh ant berbentuk xml. File ini bernama build.xml. Semua konfigurasi dan task terdapat pada file ini. Di Netbeans kita bebas membuat file ini dimana saja, caranya klik kanan pada folder dan pilih bagian "Other -> Ant Build Script"

Ant Build Script

Pada PHP project(Netbeans 7.0) yang saya pakai, pilihan menu "Other -> Ant Build Script" tidak dapat saya temukan, tapi jangan khawatir kita masih bisa membuatnya dengan memilih file "XML -> XML Document".

XML Document

File xml dengan cara ini tidak akan dikenali sebagai file konfigurasi ant, dia akan dikenali sebagai file xml biasa. Trik agar dikenal sebagai file ant adalah dengan mengubah namanya menjadi build.ant. Kemudian iconnya harusnya akan berubah seperti ini.

Ant File Konfigurasi

Root tag dan atribut dari file xml ini adalah "project" dengan beberapa atribut yang dapat anda lihat pada gambar berikut ini:

Ant Project File

Disini terlihat beberapa properti yang saya definisikan. Properti root didefinisikan sebagai tempat dimana file konfigurasi ini berada(build.xml). Kemudian src merupakan folder dimana file-file sumber berada dan build folder dimana hasilnya akan disimpan.

STEP 2. BUAT ANT TARGET "CONCATENATE"

Pada dasarnya file konfigurasi ant ini terdiri dari beberapa properti dan task yang kita berikan padanya. Dalam kasus ini, kita akan membuat sebuah task yang akan menggabungkan file-file javascript yang kita berikan padanya. Berikut adalah script lengkap mengenai task ini:

<project name="Concat file javascript" default="default" basedir=".">
  <description>
        Concatenate javascript file
  </description>
  <property name="root" location="." />
  <property name="src" location="${root}" />
  <property name="build" location="${root}/concat" />
  <target name="concatenate-js-file">
    <concat destfile="${build}/jquery-lib-concat.js" encoding="UTF-8" fixlastline="yes">
      <filelist dir="${src}"
        files= "jquery.prettyPhoto.js,
        jquery.tools.min.js,
        jquery.easing.1.3.js,
        jquery.cycle.all.min.js,
        jquery.nivo.slider.pack.js,
        jquery.anythingslider-min.js,
        jquery.anythingslider.fx-min.js,
        jquery.anythingslider.video.min.js,
        jquery.isotope.min.js,
        jquery.ba-bbq-min.js,
        jquery-ui-1.8.20.custom.min.js,
        jquery.bxSlider.min.js,
        jquery.li-scroller.1.0.js,"
      >
      </filelist>
    </concat>
  </target>
  <target name="minify-js-file"></target>
</project>

Atribut name pada tag target merupakan nama dari sebuah task yang kita definisikan. File hasil dari concatenate akan diletakkan pada file jquery-lib-concat.js, sedangkan file-file sumber di daftar pada tag filelist.

jQuery Librari

STEP 3. RUN ANT TASK "CONCATENATE"

Semua task atau target yang kita buat, akan tampak pada Navigator yang tampak pada window sebelah kiri IDE. Shortcut untuk menampilkan window ini adalah Ctrl+7

Ant Target Concatenate

Klik kanan pada target "concatenate", pilih "run target" dan kemudian kita akan mendapatkan satu file bernama jquery-lib-concat.js sebagai hasil concatenate file librari jQuery tersebut.

Hasil concat file js

PENUTUP

Saya belum terlalu banyak mempelajari build.xml ant tool, script konfigurasi dalam artikel ini masih sangat sederhana. Belum ada pengecekan apakah dua file bisa digabung atau tidak. Ini penting untuk diketahui developer, sebuah file js akan aman di concat jika file itu menggunakan anonymous function sebagai wrapper kode dari akses luar. Ini dimaksudkan agar kode terhindar dari konflik dan pengaksesan yang tidak semestinya. Semua file-file librari diatas pastinya menggunakan hal ini.

Sebenarnya ada banyak hal yang dapat kita lakukan dengan memahami ant task. Kita dapat membuat beberapa task yang mungkin akan sangat memudahkan kita dalam development project, misalnya minify script, backup file, synchro, debugging, dll.

Real-time protokol XMPP

Disini saya ingin berbagi beberapa pengetahuan yang saya pelajari mengenai sebuah protokol bernama Jabber atau lebih dikenal dengan XMPP. Saya tertarik untuk membahas protokol ini, selain memang sangat penting pengetahuan tentang protokol ini bagi para developer, artikel-artikel yang banyak saya dapati di internet hanya menyebutkan seolah-olah bahwa protokol ini hanya dapat diimplementasikan pada Instant Messaging saja. Padahal tidak demikian, protokol ini merupakan protokol standar komunikasi real-time yang telah disahkan oleh IETF. Memang pada tahun 2002 kemarin IETF telah merancang core protokol ini untuk keperluan Instance Messaging dan teknologi presence, namun komunitas jabber bekerja terus menerus agar protokol ini bersifat extensible dan luas dalam hal penggunaannya.

Dalam artikel ini, akan saya tulis beberapa karakteristik yang dimiliki oleh open-standard protokol XMPP. Tidak akan terlalu detail menjelaskan apa itu protokol XMPP atau prosedur teknis kerja protokol ini. Hanya beberapa karakteristik pokok yang akan saya sebutkan. Baiklah berikut adalah poin-poin penting yang bagus untuk pemahaman awal tentang protokol ini:

1. Desentralisasi Arsitektur

Implementasi protokol XMPP merupakan teknologi dengan jaringan client-server yang terdesentralisasi. Jaringan ini mirip dengan jaringan email, dimana paket data dapat diteruskan kepada server XMPP lain yang menjadi tujuannya. Kita dapat saja membuat jaringan XMPP dan kemudian membuat saluran komunikasi dengan server Instant Messaging seperti GTalk, YM dan Facebook chat. Instant Messaging sekarang memang kebanyakan menggunakan protokol ini untuk saling berkomunikasi.

2. JabberID

Penamaan address entitas pada jaringan XMPP menggunakan layanan DNS. Dengan memakai DNS akan sangat memudahkan untuk menghafal seluruh entitas-entitas yang terhubung, daripada mengingat satu-persatu IP address pada setiap entitas. Tiap entitas pasti memiliki sebuah ID yang unik yang dikenal dengan istilah JabberID atau disingkat dengan JID. JabberID ini terbagi menjadi tiga bagian: local part, domain dan resource. Contoh-nya adalah mustofa@mimicreative.net/athome, dimana mustofa adalah local part, mimicreative.net merupakan domain dimana saya terhubung dan athome adalah resource session dimana saya sedang melakukan komunikasi sekarang.

3. Core Protokol

Core protokol XMPP hanya mentransmisi aliran data dalam format XML. Terdapat tiga jenis aliran XML yang ditransmisikan, antara lain message, presence, dan info query atau lebih dikenal dengan IQ. Jenis pertama (1) message, merupakan general paket XMPP berisi informasi yang dikirim dari satu entitas ke entitas lainnya. Pengiriman paket ini bersifat fire and forget, artinya entitas pengirim tidak akan mendapatkan result dari paket message yang telah dia kirimkan. Selain itu juga message ini dikirimkan dari dan ke one-to-one entitas atau one-to-many. Jenis yang kedua adalah (2) presence, dikirimkan dengan tujuan availability kehadiran entitas yang terhubung dalam jaringan. Kita dapat mengetahui status online atau offline dari setiap entitas karena adanya aliran data presence ini. Tidak seperti message, presence dikirimkan ke semua entitas (broadcast) yang sudah subscribe ke entitas tersebut. Terakhir, jenis yang ketiga adalah (3) IQ, digunakan untuk mekanisme request-response antar entitas dalam jaringan XMPP. Mirip dengan metode GET dan POST pada protokol HTTP. Terdapat sebuah entitas yang mengirimkan request ke entitas lain, dan akan menerima response balasan dari entitas tersebut.

4. Server XMPP

Pada jaringan XMPP, tidak semua operasi dilakukan oleh server. Tugas server hanya terbatas pada meneruskan aliran data, mencatat status kehadiran entitas dan mengatur roster (subscribing user/entitas). Pemprosesan setiap paket akan dilakukan sendiri oleh masing-masing entitas. Dalam beberapa kasus bahkan kita tidak memerlukan operasi tambahan di server. Kita hanya membutuhkan core protokol dan server XMPP bekerja sebagaimana mestinya. Semua operasi dan proses dilakukan oleh aplikasi client yang kita bangun. Kasusnya seperti pada game sederhana Tankar. Game ini merupakan game multi-player yang juga memanfaatkan core protokol XMPP untuk bertukar data dan berkomunikasi antar pemainnya. Semua proses sepenuhnya ada pada aplikasi client yang di jalankan independent pada masing-masing player. Tidak ada spesifik server, karena aliran data akan berjalan melewati server-server XMPP yang sudah ada, seperti server jabber.org dan server GTalk.

5. Payload

Setiap child elemen dari aliran XML yang ditransmisi, merupakan payload data aplikasi. Kalau dalam ilmu komunikasi dan informasi, payload disini adalah sekumpulan data seperti data buku, event, atau informasi apapun yang nantinya akan diproses oleh aplikasi yang kita bangun. Ketiga jenis aliran XML yang sudah saya sebutkan diatas (message, presence, dan IQ), dapat membawa data-data informasi untuk sistem aplikasi. Lalu format payload seperti apa yang dapat kita sisipkan pada aliran XML? Dari e-book yang berjudul Profesional XMPP Programming with Javascript and jQuery karangan Jack Moffitt, payload disini dapat berbagai macam jenis data, contohnya seperti XHTML (contoh pada Data Form pada XEP-0004), URL, RSS, SOAP, XML-RPC dan banyak lagi lainnya. Dalam bukunya Jack Moffitt bahkan berkata bahwa payload types are limited only by your imagination! yang memberikan penjelasan bahwa apapun tipe datanya dapat di sisipkan pada aliran XML protokol ini.

6. Extensions Protokol

Komunitas XMPP telah membuat banyak sekali extensions yang dapat kita manfaatkan untuk build sistem aplikasi. Extensions disini bukanlah library, module atau add-ons. Bisa dibilang extension ini merupakan kekuatan utama protokol XMPP.

X dari singkatan XMPP merupakan extensible. Merupakan sifat yang dimiliki oleh core protokol XMPP. Istilah extensible -menurut saya- berkenaan dengan sifat core protokol XMPP untuk membawa data (payload) yang telah kita definisikan untuk membangun berbagai macam sistem aplikasi yang berbeda. Sistem aplikasi mulai dari content syndication, push notification, lightweight middleware and web services, whiteboarding, multimedia session negotiation, intelligent workflows, geolocation, social gaming, social networking dan bahkan cloud computing.

Dari sifat extensible ini kemudian terdapat sebuah istilah extensions yang berarti proses dan payload data yang sudah developer rancang untuk tujuan tertentu. Setiap developer dapat merancang atau membangun extensions-nya sendiri. Sehingga akan sangat banyak sekali extensions yang akan dapat kita temukan. Tapi terdapat juga extensions standar yang diatur oleh XSF (XMPP Standart Foundations). Extensions standar ini kemudian di kenal dengan istilah XEP (XMPP Extension Protocol). Berikut adalah extensions standar yang paling sering digunakan oleh para developer untuk membangun sistem aplikasi:

• Multi User Chat (MUC)
• Publish-subscribe
• Bidirectional-streams Over Synchronous HTTP (BOSH)
• Message archive

Terdapat tiga ratusan lebih extensions yang sudah masuk dalam daftar XSF. Untuk melihat keseluruhannya Anda dapat membacanya pada link ini.

7. Keamanan Protokol

XMPP support TLS (Transport Layer Security) yang juga merupakan protokol kembaran dari SSL, digunakan untuk menangani keamanan data yang ditransmisikan melalui jaringan XMPP. Integrasi XMPP dengan TLS ini diatur pada sebuah extensions yaitu XEP-0290.

Itulah 7 karakteristik protokol XMPP yang dapat saya tulis. Dengan mengetahui beberapa karakteristik ini, tentunya kita dapat menebak aplikasi atau sistem seperti apa yang cocok diimplementasikan dengan protokol ini. Kita dapat saja membuat kendaraan yang berjalan diatas air dengan sangat baik atau membuat kendaraan yang melayang diudara dengan sangar baik, tapi tentunya kita tidak dapat menciptakan kendaraan yang sangat baik dikeduanya, diatas air dan di udara. Demikian juga dengan implementasi protokol XMPP. Protokol ini akan sangat baik diimplementasi ketika kita membuat beberapa kebutuhan aplikasi berikut ini:

• Ketika membutuhkan sebuah informasi tentang kehadiran atau presence sebuah entitas dalam jaringan, entah itu entitas client atau server.
• Ketika sebuah aplikasi membutuhkan alert dan notifikasi terhadap data baru pada jaringan internet.
• Ketika komunikasi membutuhkan sebuah channel enkripsi, authentikasi dan trusted identities.
• Ketika kita membutuhkan komunikasi diantara distributed network yang kita miliki.
• Ketika kita membutuhkan sebuah signaling channel yang cukup sederhana untuk mengatur interaksi data suara atau video.

Penutup

Pada umumnya, protokol XMPP digunakan untuk interaksi dan komunikasi secara real-time antara entitas-entitas jaringan. Dan ini memang sangat luas sekali pemanfaatannya. Banyak aplikasi-aplikasi keren yang dapat kita bangun dengan memanfaatkan protokol ini seperti social gaming, push notification dan social networking. Perusahaan-perusahaan sekelas google, apple, facebook membangun beberapa servicenya diatas protokol ini. Service-service ini seperti GTalk, Google wave, Facebook Chat, iCloud, dan lain sebagainya. Dengan menguasai dan memahami protokol ini, kita sebagai developer tentunya akan dapat menciptakan service atau aplikasi keren milik kita sendiri. Oke demikian, semoga artikel ini memberikan manfaat bagi anda.

* Artikel ini pernah publis di bisakomputer.com tertanggal 16 Januari 2013 dengan judul "7 Karakteristik Dasar Protokol XMPP"

SoundManager2, Play audio di Web

Pada acara GDG DevFest di surabaya kemaren, ada presentasi mengenai Web audio API yang dilakukan oleh Yohan Totting, founder dari ThinkRooms. Materi ini menarik karena memang saya belum pernah dengar  web audio API. Sebelum itu saya beranggapan bahwa satu-satunya cara standar main audio di web adalah dengan tag audio pada HTML5. Dengan diperkenalkan web audio API terdapat standar baru yang coba diperkenalkan untuk memperbaiki kekurangan tag audio pada HTML5. Kekurangan ini mengenai perbedaan dukungan format audio disetiap browser dan juga kurangnya power yang dimilikinya. Firefox tidak dapat memainkan audio format MP3 dan MPEG4/HE-AAC/H.264 karena memang audio ini merupakan audio non-free, proprietary. Apple dan chrome memiliki lisensinya sehingga mereka dapat memainkan file-file audio ini. Masalah ini tentunya merupakan masalah yang serius, karena setiap browser memiliki daftar format audionya masing-masing. Baca artikel berikut untuk mengetahui lebih detail problem apa yang ada pada tag audio HTML5.  

Web audio API sejauh yang saya pelajari menarik banget. Kita bisa mengatur equalizer, manambah beberapa efek audio, menampilkan visualizer dan lainnya. Tapi saya sih masih menganggap terlalu awal mengimplementasikan web audio API. Teknologi ini merupakan teknologi yang baru saja diperkenalkan. Chrome, safari dan firefox versi terbaru saja yang baru mendukung. Sedangkan versi-versi lain yang berada dibawahnya masih harus menggunakan tag audio HTML5 sebagai satu-satunya solusi standar untuk audio web.

Menurutku sih satu cara terbaik masih dipegang oleh flash. Maksud saya disini adalah flash audio yang ada pada flash player. Dengan engine audio ini, lisensi tidak ditanggung oleh browser pengguna. Implementasi audio pada web atau game akan sama pada setiap browser karena memang dilakukan oleh flash player. Apa yang kita lakukan disini memang tidak standar, tapi akan solve problem yang kita punya.

Satu librari javascript yang dapat diandalkan untuk urusan ini adalah SoundManager2. Menurutku librari ini sangat-sangat bagus, idenya adalah menggunakan audio flash sebagai fallback audio player tapi status dan kontrolnya masih dapat dibuat dengan javascript dan HTML5. Menarik bukan!! kita dapat membuat tampilan player pake CSS dan HTML5 sedangkan engine audio pake flash. Hanya beberapa baris kode javascript, audio akan berjalan lancar pada semua browser. Tapi pertanyaannya, bagaimana jika browser pengguna tidak install flash player, bukankah tidak akan jalan? yang pasti engine audio flash tidak akan jalan, tapi SoundManager2 cukup pintar karena dia akan memilih alternatif yang dapat didukung oleh browser pengguna. Disini kita pun dapat memilih engine audio apa yang mau digunakan, apakah html5 audio atau flash audio dan prioritas mana yang didahulukan. Dan jangan khawatir, kita tidak akan berhubungan langsung dengan script-script flash karena memang engine audio flash bekerja dibalik layar pada SoundManager2 :D_.  

Ukuran file SoundManager2 sangat kecil, hanya berukuran 11KB untuk Build-script optimized, minified, no-debug version. Sedangkan untuk versi originalnya masih hanya berukuran 41KB. Website social music yang biasa kita kenal seperti 8track, SoundCloud, LastFM setahu saya memanfaatkan SoundManager2 untuk audio librari. Beberapa feedback dari beberapa orang yang saya baca dari dokumentasi SoundManager2, bahwa mereka telah memanfaatkan librari ini untuk membangun beberapa website yang bertema:

1. Scripted language tutorials
2. Spoken word/audio assistance
3. Ringtone/music previews
4. Musician/artist web site soundtracks
5. Web-based chat  

Terlihat banyak banget yang bisa kita lakukan dengan SoundManager2. Beberapa bulan lalu saya membuat sebuah theme wordpress yang bertema musik. Dalam theme ini, saya menginginkan user dapat mengupload beberapa format audio standar dan tidak akan ada masalah ketika pengunjung memainkan semua file audio yang user upload tersebut. Dalam theme, saya membuat beberapa macam player yang user dapat pilih dan mendukung beberapa file audio standar seperti mp3, m4a, ogg, wav dll. Proses develop sangat-sangat simple karena saya juga menggunakan SoundManager2. Disini saya menemukan bahwa librari ini memang sangat brillian. Dan terakhir saran saya, jika menginginkan membangun sebuah website yang sejenis diatas, cobalah untuk riset mengenai SoundManager2. Trims udah membaca, semoga bermanfaat :D_.

Blog post fuelphp dan ODM Mongodb Part I

Artikel ini merupakan sebuah tutorial pemrograman FuelPHP untuk pembuatan halaman blog post website. Pada prakteknya, database yang digunakan adalah MongoDB, database NoSQL berbasis document-oriented. Dijelaskan juga tentang sebuah teknik abstraksi database yang dikenal dengan Object Document Mapping (ODM)

Object Document Mapping (ODM)

Pernahkah Anda mendapati istilah ORM atau Object Relational Mapping? Saya yakin Anda pernah mendengarnya karena hampir disemua framework pemrograman yang saya kenal selalu menyertakannya untuk abstraksi model database. Sedikit ulasan bahwa ini adalah sebuah teknik pemrograman yang mana data dalam database akan diubah ke object-oriented oleh program yang kita buat. ORM akan melakukan dua hal, yang pertama akan me-mapping data tiap row pada sebuah tabel database ke dalam sebuah objek dan yang kedua membangun hubungan relational antar objek-objek representasi dari tabel database. Secara konsep, objek yang terbentuk dibedakan antara persistence object dan transient object. Objek dikatakan persistence disini memiliki arti bahwa semua propertiesnya represented pada data model database, sedangkan transient memiliki arti objek biasa, yang tidak persistence. Konsepnya sama seperti binding data pada sebuah form.  

Konsep Object Document Mapping(ODM) sama persis seperti penjelasan ORM diatas, bedanya hanya terletak pada jenis database yang digunakan. ODM ini digunakan pada jenis database NoSQL yang berbasis document-oriented yaitu mongoDB.

Package FuelPHP tentang ODM MongoDB

Didalam dokumentasinya FuelPHP telah menyediakan sebuah class yang dapat berinteraksi dengan database MongoDB. Beberapa operasi dasar dapat kita lakukan dengan class ini, seperti menambahkan sebuah document, mengambil isi collection, menghapus document dan juga mengedit document. Tetapi tidak seperti ORM yang sudah secara default sudah tersedia dalam paket download FuelPHP, ODM tidak tersedia dalam paketan itu. Sepertinya para pengembang fuelphp belum ada rencana untuk menambahkan konsep ODM ini ke fuelphp, saya lihat roadmap version 2.0 tidak ada rencana pengembangan untuk teknik ini.

Walaupun development fuelphp belum sampai pada pengembangan teknik abstraksi database NoSQL, Phil Sturgeon yaitu salah satu developer FuelPHP memperkenalkan sebuah package yang dia porting dari sebuah package kohana buatan Colin MollenHour. Package Phil Sturgeon hasil porting ke FuelPHP dapat ditemukan pada link ini, sedangkan package asli buatan Colin dapat ditemukan pada link ini.

Pada artikel ini akan saya tunjukkan bagaimana membuat sebuah contact form dengan memakai package ODM di FuelPHP. Pada dasarnya ini sama saja dengan kita bekerja pada ORM FuelPHP, yang harus disiapkan hanya model yang merepresentasi data pada database, tapi sebelum masuk ke kode-kode pemrograman, ada beberapa kebutuhan sistem yang harus dipersiapkan dulu. Berikut adalah requirement sistem yang harus kita persiapkan:

1. Instalasi MongoDB + Running service MongoDB
Sebelumnya saya pernah menulis artikel tentang MongoDB yang dibagi menjadi tiga bagian, bagian pertama saya bahas tentang Document-oriented yang dimiliki oleh MongoDB, bagian kedua kemudian tentang operasi-operasi dasar MongoDB, dan terakhir bagian ketiga tentang autosharding MongoDB. Untuk instalasi MongoDB, saya tulis pada bagian kedua dari artikel itu. Instalasinya cukup mudah untuk dilakukan, baik Anda yang memiliki sistem operasi Linux maupun Windows. Setelah ter-install jalankan sebuah service MongoDB, dengan menjalankan sebuah perintah:

$ bin/mongod --dbpath ~/db

2. PHP driver untuk Mongodb
Secara default PHP driver untuk MongoDB ini belum ditambahkan pada konfigurasi server. Untuk Anda yang memakai Linux, bisa menambahkan driver ini dengan melakukan perintah sebagai berikut:

sudo pecl install mongo

Buka file php.ini, kemudian tambahkan driver ini.

extension=mongo.so

Pada sistem Windows, kita dapat mendownload driver ini di http://github.com/mongodb/mongo-php-driver/downloads. Unzip dan pindahkan php_mongo.dll ke dalam direktori extension PHP (biasanya folder dengan nama "ext"). Setelah driver diletakkan disana, kemudian buka file php.ini dan tambahkan driver ini didalamnya.

extension=php_mongo.dll

Selesai menambahkan driver ini, restart dulu web server kemudian cek hasilnya dengan memanggil fungsi phpinfo().

phpinfo()

3. Aktivasi package FuelPHP
Download package ODM MongoDB buatan Colin yang sudah di porting oleh Phil pada alamat berikut. Letakkan package itu pada folder /fuel/packages. Buka file /fuel/app/config/config.php dan aktifkan package itu dengan menambahkannya pada daftar package yang akan selalu di load.

'always_load' => array(
...
'packages' => array(
 'orm',
 'mongo-odm',
 ),
...
)

4. Koneksikan aplikasi ke service MongoDB
Mengkonfigurasi agar aplikasi fuelphp terkoneksi ke service MongoDB yang telah dibuat bisa dilakukan dengan cara menambahkan beberapa config berikut pada file app/config/db.php.

...
'mongo' => array(
 'default' => array(
 'hostname' => '127.0.0.1',
 'database' => 'gooblog',
 //'port' =>28017,
), 
...

Semua requirement yang dibutuhkan untuk pembuatan halaman blog post ini, cuma beberapa point seperti diatas. Dari sini, kita tinggal membuat sebuah model post dan tampilan presentasinya. Untuk pembahasan selanjutnya dapat dilihat pada tulisan lanjutan dari artikel ini akan saya tulis pada bagian II yang akan membahas kode kode program . Untuk kode-kode program yang akan kita buat akan saya tulis pada bagian II artikel ini. :D

* Artikel ini pernah dipublis bisakomputer tertanggal 2 Agustus 2012 dengan judul Membuat Blog Post FuelPHP dengan ODM MongoDB Part I

NodeJS Part II: Javascript, EventEmitter dan Modules

Ryan Dahl, dialah yang pertama kali mengembangkan Node. Ryan Dahl adalah seorang developer C dan Ruby on Rails, dia banyak mengerjakan proyek menggunakan kedua bahasa itu. Awal penelitian Node juga menggunakan C, tapi kemudian dia kesulitan menyelesaikannya. Tapi pertanyaannya sekarang adalah, kenapa kemudian Ryan Dahl memilih Javascript untuk Node? Secara umum, Javascript adalah bahasa yang membuang semuanya ke dalam variabel global, memiliki reputasi buruk untuk handling data-data binary, dan lagi masih belum ada pemrograman GUI di Javascript. Tapi walaupun begitu, Dahl menganggap Javascript adalah bahasa pemrograman yang cocok untuk Node.

Pada part kedua dari artikel Node ini, saya akan membahas tentang first-class function Javascript yaitu alasan utama kenapa Node ditulis dengan Javascript, selanjutnya pemrograman dasar  Node dengan event emitter pattern dan terakhir dasar yang harus kita ketahui untuk pembuatan module Node. Tetapi sebelum itu, ada baiknya Anda membaca juga Artikel Javascript sebelumnya yang berjudul Menjadikan Javascript lebih Modular dan NodeJS Part I: Asynchronous I/O dan Event-Driven yang juga pernah saya tulis sebelumya pada Bisakomputer.

Function first-class object javascript

Javascript adalah bahasa object-oriented, semuanya yang dimasukkan adalah object. Function Javascript adalah sebuah objek juga, Anda dapat memasukkan properties ke dalamnya, dan menambahkan sebuah method. Sebuah objek javascript dapat inherit juga ke objek lain. Contoh kode yang bagus untuk menjelaskan ini adalah sebagai berikut:

Object.prototype.inObj = 1;
function A(){
this.inA = 2;
}

A.prototype.inAProto = 3;
B.prototype = new A; 
B.prototype.constructor = B;
function B(){
this.inB = 4;
}

B.prototype.inBProto = 5;

x = new B;
console.log(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

Kode diatas adalah dasar pembuatan objek, berikut juga inheritance antar objek yang ada dalam javascript. Ada dua objek dalam kode diatas, A dan B. Objek B inherit ke objek A, sehingga masing-masing properties A dapat diakses dari objek B. Output console dari kode diatas adalah 1, 2, 3, 4, 5.

Dari beberapa referensi yang pernah saya baca, Javascript adalah sebuah bahasa pemrograman yang memiliki sifat first-class object. Maksud dari first-class object ini adalah objek, entity, atau value dalam Javascript dapat dikonstruksi saat program run-time. Anda dapat membuat sebuah fungsi, mengganti nilai sebuah variabel, mengganti callback event meskipun program sedang dalam keadaan running. Selain itu, javascript disebut sebagai bahasa first-class object juga karena objek dalam Javascript dapat melakukan beberapa hal berikut ini:

• Dapat disimpan dalam sebuah variabel.
• Dapat dilewatkan sebagai parameter ke dalam sebuah function/subroutine.
• Dapat dipakai sebagai return dari sebuah function/subroutine.
• Dapat dibentuk saat run-time program.

Dari beberapa hal yang kita dapati diatas, tentunya ini merupakan bahasa pemrograman yang cocok untuk pemrograman server dengan non-blocking I/O dan konsep event-driven.

Event Emitter Module

Satu module penting yang harus kita pahami, menurut saya, dari banyak module yang dimiliki node adalah module events. Event-driven yang dimiliki node memungkinkan sebuah objek memiliki satu atau beberapa events. Suatu contoh objek fs.readStream memiliki atau emit beberapa events seperti 'open', 'data', 'end', dan lainnnya. Ini artinya instance dapat memberikan sebuah callback function pada masing-masing event emit objek fs.readStream tersebut.

var filename = "README";
var readStream = fs.createReadStream(filename);

readStream.on('open', function () {
console.log('File opened');
});

readStream.on('data' function(data){ 
console.log(data);
});

readStream.on('end', function(){
console.log('File ended.');
});

readStream.on('error', function(err) {
console.log(err);
});

Untuk menginginkan sebuah objek yang dapat emit events, Anda memerlukan module events. Dalam module ini hanya ada satu buah objek yaitu EventEmitter. Untuk melakukannya objek hanya butuh inherit ke EventEmitter dan kemudian emit beberapa event dalam objek tersebut. Contoh yang dapat menjelaskan ini adalah sebagai berikut:

var EventEmitter = require('events').EventEmitter,
util = require('util');

var adder = function(a, b){
this.a=a;
this.b=b;
};

util.inherits(adder, EventEmitter);

adder.prototype.add = function(){
this.emit('display', this.a+this.b);
};

Baris pertama dari kode diatas adalah memanggil sekaligus instance class EventEmitter. Sebuah objek Adder harus inherit ke EventEmitter, ini ditunjukkan pada baris 8. Kemudian objek Adder emit sebuah event 'display' pada add method ditunjukkan pada baris 10. Dari kode diatas menunjukkan, instance dari Adder bisa membuat sebuah fungsi untuk display hasil penjumlahan kedua parameter yang dimasukkan.

var InstanceAdder = new adder(5,3);

InstanceAdder.on('display', function(result){
  console.log('Output Adder: ' + result);
});

InstanceAdder.add();

Instance adder pada program ini, menampilkan hasil penjumlahan pada console (baris 3). Ketika program ini running, console akan mengeluarkan: Output Adder: 8.
Untuk referensi lengkap mengenai EventEmitter ini, dokumentasinya dapat baca pada link ini.

Dasar pembuatan modules node

Node memiliki sistem module yang sederhana. Ini akan mudah Anda ikuti. File dan module dalam node itu adalah satu kesatuan. Kita buat kode-kode objek pada sebuah file, dan kemudian file itu kita panggil pada program node sebagai sebuah module. Untuk urusan ini, kita bisa memanfaatkan objek module.export untuk merepresentasikan objek module. Contoh adalah kode objek adder yang sudah kita buat dan kita modifikasi sedikit hingga tampak seperti ini:

var EventEmitter = require('events').EventEmitter,
util = require('util');

var adder = function(){};

util.inherits(adder, EventEmitter);

adder.prototype.add = function(a, b){
  this.emit('display', a+b);
};

module.exports=new adder();

Kemudian kita simpan pada sebuah file dengan nama adder.js. Untuk pemanggilan module, kita bisa memanfaatkan fungsi require yang diikuti path dari module tersebut.

var InstanceAdder = require('./adder2');

InstanceAdder.on('display', function(result){
  console.log('Output Adder: ' + result);
});

InstanceAdder.add();

Ada beberapa trik yang dapat kita ikuti untuk module node ini, Anda dapat melihat referensi lengkap pada link dokumentasi node di sini.

Penutup

Dengan memahami topik yang ada pada bagian pertama dan kedua ini, saya rasa kita tidak akan merasa kesulitan untuk mempelajari node ini lebih lanjut. Saat ini ada 6 ribu lebih module node yang dapat kita manfaatkan di NPM. Dengan mempelajari beberapa module yang sudah ada itu, kita dapat menciptakan sebuah aplikasi atau mungkin sebuah tool server yang keren.

Terakhir, jika memang artikel ini dapat membantu Anda dalam memahami teknologi node, saya berharap Anda dapat meninggalkan sebuah komentar disini. Dengan komentar yang Anda tinggalkan, itu akan membantu saya dalam menyelesaikan bagian terakhir dari artikel tentang node ini. Semoga bermanfaat :)

*Artikel ini pernah publis di bisakomputer,com tertanggal 6 Agustus 2012

NodeJS part I: Asynchronous I/O dan Event-driven

Pada artikel terdahulu di Bisakomputer.com, saya pernah menulis tutorial artikel tentang pembuatan web dengan platform nodejs. Pada bahasan NodeJS  ini saya akan coba menulis ke dalam tiga bagian artikel, dan pada artikel pertama ini, saya akan memberikan contoh pemrograman NodeJS dengan beberapa operasi synchronous dan operasi asynchronous I/O event-driven yang juga dimiliki oleh NodeJS. Disini saya ingin menunjukkan kekuatan yang dimiliki NodeJS untuk membangun aplikasi server dan real-time website.

Definisi synchronous dan asynchronous I/O event-driven

Asynchronous disini berarti non-blocking I/O. Ini berarti setiap operasi asynchronous harus segera mungkin mengembalikan nilai agar program tidak perlu menunggu proses baca tulis ke I/O. I/O sendiri adalah komponen sebuah mesin atau komputer untuk urusan input dan output data. Komponen I/O memiliki kecepatan baca tulis jauh lebih kecil dari kecepatan prosesor dalam memproses data. Kebalikan dari asynchronous, sebuah program yang menjalankan operasi synchronous akan menunggu operasi itu selesai baru kemudian program dapat melanjutkan operasi lainnya.

Sedangkan istilah event-driven disini sama dengan event-based programming yaitu urutan atau flow program ditentukan oleh sebuah events. Jika diartikan secara bahasa event itu sama dengan kejadian, sedangkan Wiki mendefinisikan events ini dengan perubahan pada sebuah kondisi objek. Perpindahan mouse dari window satu ke window lain, penekanan tut-tut keyboard, sampai pada request halaman website. Paling dasar sekaligus terpenting dari event-driven ini adalah event-handler atau callback. Callback ini sebuah fungsi atau subroutine yang bisa sebagai argument pada operasi-operasi asynchronous. Dia akan dipanggil sekali setelah operasi selesai dilakukan.

Di dalam NodeJS terdapat operasi-operasi yang sifatnya synchronous dan asynchronous, tapi keunggulan NodeJS ini ada pada non-blocking I/O alias asynchronous nya.
Asynchronous dan event-driven yang ada pada NodeJS ini disebut-sebut sebagai bentuk pemrograman baru dari pendahulunya, multi-threaded. Berikut adalah dua program yang mengerjakan operasi yang sama tapi berbeda, satu menggunakan synchronous dan yang satunya lagi menggunakan asynchronous

var fs = require('fs');
try {
 var data = fs.readFileSync('README.md', 'ascii');
 console.log(data);
}catch (err) {
 console.error("There was an error opening the file:");
 console.log(err);
}

Operasi membaca atau memperoleh data file yang dilakukan program diatas, menggunakan operasi synchronous readFileSync(). Program tidak akan melanjutkan operasi lain sebelum readFileSync() selesai dieksekusi dan mengembalikan teks file README.md. Ketika menggunakan operasi synchronous terkadang juga mengembalikan exception atau kesalahan, sehingga penggunaan try/catch harus dilakukan untuk kestabilan dan debugging program. Pemrograman seperti diatas tentu tidak asing lagi bagi Anda, karena hampir semua pemrograman yang Anda lakukan memiliki operasi synchronous seperti diatas.

var fs = require('fs');
fs.readFile('README.md', 'ascii', function(err,data){
 if(err) {
 console.error("Could not open file: %s", err);
 process.exit(1);
 }
console.log(data.toString('ascii'));
});

Program ini sama dengan program yang pertama, yaitu mendapatkan isi dari sebuah file README tapi bedanya pada penggunaan fungsi operasi asynchronous. Pada program yang kedua ini menggunakan fungsi asynchronous readFile(). Semua fungsi asynchronous nodejs memiliki argument callback yang biasanya harus dimasukkan pada akhir parameter. Fungsi readFile() diatas memiliki callback yang akan beroperasi untuk display isi file ke console. Ini dilakukan jika operasi readFile() selesai dilakukan.

Kemudahan Asynchronous I/O dan Event-driven NodeJS

1. Independent Code
Prinsipnya semua operasi yang dependent terhadap operasi asynchronous dapat diletakkan pada callback operasi asynchronous tersebut. Hal ini tentunya dapat menciptakan blok-blok operasi yang independent terhadap yang lain.

2. Nested Callbacks
Pada pemrograman synchronous, fungsi operasi tergantung pada operasi lain yang berada pada baris atasnya, ini yang dinamakan dengan linier sequence. Tetapi pada nodejs dengan dukungan asynchronous dan event-driven nya, urutan eksekusi operasi dapat dilakukan dengan nested callbacks. Ini bukan dari atas ke bawah seperti pada linier sequence, tapi secara prinsip fungsi callback dieksekusi setelah fungsi asynchronous selesai dilakukan.

var fs = require('fs');
var Filename='README.md';
fs.chmod(Filename, 777, function (err) { 
 fs.rename(Filename, "READ.md", function (err) {
 fs.stat("READ.md", function (err, stats) {
 var isFile = stats.isFile();
  });
 });
});

Pada contoh program diatas, terdapat tiga operasi yang dilakukan. Mengubah permission file README.md, mengubah nama file README.md dan terakhir mendapatkan informasi seputar file READ.md. Callback fungsi chmod() merupakan fungsi rename(), sedangkan callback rename() adalah stat(). Dengan cara nested callbacks seperti inilah urutan eksekusi program dilakukan.

3. Parallelisation
non-blocking I/O pada NodeJS memungkinkan untuk menjalankan operasi-operasi secara pararel. Kode program berikut adalah contoh parallelisation operasi fungsi stat(). Tujuan dari program ini adalah menghitung total size file pada sebuah direktori.

var fs = require('fs');
var count = 0,
 totalBytes = 0;
fs.readdir(".", function (err, filenames) {
 var i;
 count = filenames.length;
 for (i = 0; i < filenames.length; i++) {
 fs.stat("./" + filenames[i], function (err, stats) {
 totalBytes += stats.size;
 count--;
 if (count === 0) {
 console.log(totalBytes);
 }
 });
 }
 });

Fungsi stat() akan dilakukan pada masing-masing file. Tiap fungsi stat() akan dijalankan secara pararel satu dengan lainnya.

4. Code Reuse
Dalam pemrograman NodeJS, Anda dapat me-wrapper kode yang Anda buat kedalam sebuah fungsi. Semua bahasa pemrograman apapun tentunya dapat melakukannya, tapi kemudahaannya disini adalah kode yang di-wrapper dapat dimasukkan sebagai argument pada fungsi lain.

var fs = require('fs');
var path1 = "./",
 path2 = ".././",
 logCount;
function countFiles(path, callback) {
 fs.readdir(path, function (err, filenames) {
 callback(err, path, filenames.length);
 });
}
logCount = function (err, path, count) {
 console.log(count + " files in " + path);
};
countFiles(path1, logCount); 
countFiles(path2, logCount);

Pada contoh, kita me-wrapper kode untuk display teks ke console dengan nama logCount. Sehingga kita dapat memakai ulang wrapper logCount pada operasi menghitung jumlah file pada path1 dan juga operasi pada path2.

Penutup

Pada artikel pertama ini merupakan dasar pemrograman yang ada pada NodeJS. Kekuatan NodeJS itu terletak pada asynchronous I/O dan event-driven nya, sehingga untuk membangun aplikasi server atau website yang berjalan diatasnya, kita harus memahami dulu kedua istilah ini dan bagaimana penerapannya pada NodeJS.

Beberapa aplikasi keren sudah banyak yang dibuat diatas platform ini, diantaranya yang saya ketahui adalah Blaast Backend (http://blaast.com/) yang dibangun diatas NodeJS, sebuah tool kolaborasi projek yaitu trello (https://trello.com/), dan lagi sebuah IDE online development yaitu Cloud9 IDE (https://c9.io/).

*Artikel ini pernah publis di bisakomputer.com tertanggal 17 Juli 2012

Duh...

Lebih dari dua bulan ini aku fokus mempelajari protokol XMPP. Bukan protokol ini saja sih, aku rasa banyak banget yang telah aku pelajari. Mulai dari berlembar-lembar RFC dan XEP protokol ini sampai buat module erlang pada ejabberd. Ditambah lagi, aku harus memperbaiki keahlianku dalam pemrograman android platform. Pertanyaannya adalah demi apa??

Hampir tiap malam aku kagak tidur, tapi nanti paginya baru aku tidur :p_. Mulai bulan puasa kemaren sampai sekarang, jam hidup itu mulai tidak normal. Yah ini mungkin juga karena aku mulai tidak ngantor lagi, jadinya seleksi alam milih waktu yang tepat untuk didepan laptop dan waktu yang tepat untuk istirahat. Pertanyaannya adalah demi apa??

Persis satu bulan sebelum puasa kemaren, aku kedapatan sebuah projek yang harusnya menyita semua waktuku. Harusnya aku fokus disini untuk bisa menyelesaikan, tapi ternyata tidak begitu. Dan terakhir pertanyaannya adalah demi apa??

Tahun ini merupakan tahun terakhir kesempatanku untuk menyelesaikan kuliah. Yah tinggal selangkah lagi lah bisa selesai, eh dua langkah deng, eh bukan tiga langkah kayaknya, aaarrgg terserahlah pokoknya tinggal skripsi ini aja yang harus aku perjuangkan. Tapi mahasiswa telat lulus kayak aku ini, memang semuanya serba sulit. Mau ke kampus tidak ada temen, mau ngurus ini itu tidak ada yang bisa dititipi, serba #hufft wes pokoknya. Teman-teman seangkatan yang belum selesai disini, mungkin tidak lebih dari jumlah keseluruhan jari normal manusia. Sekarang denger kabar adek angkatan akan wisuda aja, aku hanya bisa berkata "selamat yah, kawan" dengan mengheningkan cipta untuk sesaat. Yang pasti tinggal tugas akhir aja ini yang harus segera aku selesaikan.

Tugas akhir yang sedang aku kerjakan adalah mengenai messenger dalam lingkungan kampus. Teknologi yang digunakan sudah ada lebih dari sepuluh tahun ini yaitu XMPP protokol, tapi tetep saja protokol ini masih populer dalam pembuatan messenger. Aku tertarik dengan pembuatan messenger ini mungkin karena akan banyak manfaatnya jika memang jadi terimplementasikan pada lingkungan kampus. Messenger bisa jadi satu-satunya media komunikasi yang dapat dipakai bersama, mahasiswa, dosen, staf dan pejabat kampus. Problem-problem yang muncul karena kurangnya komunikasi mungkin saja dapat diselesaikan dengan implementasi aplikasi messenger ini. Yah aku harap begitu.

Aku sih baru pertama kali kerja dengan protokol ini. Aku juga pertama kali membuat messenger, eh kagak deng, aku pernah buat aplikasi chatting long polling yang tampilannya mirip facebook. Tapi aplikasi chatting ini tidak dapat diimplementasikan karena memang long polling tidak bisa diandalkan untuk urusan ini. Melihat beberapa aplikasi yang sukses memakai protokol XMPP ini, aku yakin bahwa protokol ini dapat diandalkan untuk komunikasi real-time messenger. Sampai artikel ini ditulis, aku sudah berhasil menggunakan external autentikasinya ejabberd. Autentikasi ini memungkinkan kita berbagi session antara ejabberd server dengan sistem diluar itu. Masih banyak sebenarnya yang harus aku kerjakan untuk menyelesaikannya, yah pasti bisalah, harus bisa. #AkuSemangato #Yosh

Menu

Group

Contact

Contact menu actionbar

Chat message