Ferdianto.com: Latest Posts

Detecting Mobile User-Agent For OperaMini Client

Wed, 20 May 2009 07:05:00 -0000

Mobile phone that use OperaMinisometimes don't sent user agent header to the server. Instead, they send:

Opera/9.60 (J2ME/MIDP; Opera Mini/4.1.13068/488; U; en) Presto/2.2.0

This can cause a problem for web application that rely on user-agent detection, such as application that use WURFL So, after about an hour or two trying to debug the problem, I found some way to retrieve the original user-agent (device user-agent) instead of operamini user-agent.

The solution is to check for the existence of X-OperaMini-Phone-UA header. In PHP, it can be as simple as:


$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : '';
if ( stristr( $user_agent, 'Opera Mini' ) ) {
  //its opera mini, try the X-OperaMini-Phone-UA
  $user_agent = isset( $_SERVER['HTTP_X_OPERAMINI_PHONE_UA'] ) ? $_SERVER['HTTP_X_OPERAMINI_PHONE_UA'] : $user_agent;
}

//do your rest of the stuff here

So, now phone detection using user_agent will work as normal, even if the user use Opera Mini browser.

Wordpress to Plurk Plugin

Sat, 16 May 2009 11:05:00 -0000

Why not extends your blog reader by sharing your post permalink to Plurk or alert your Plurk friends about your post. Yes, you could do it with posting to plurk manually. But how about do it automatically each time you publish a blog post, wordpress will do the post for you. How? Simple, just install the wp-plurk plugins.

Have fun ;)

Simple Routing Library

Thu, 14 May 2009 14:05:00 -0000

Once I've wrote a simple routing library. You know, the one that you can use to make pretty urls such as: http://ferdianto.com/2009/05/21/this-is-a-post. Actually, framework like CodeIgniter has internal support for friendly URLs. But, what if you already have an up-and-running application and decide to make pretty urls. This library is intentionally made simple so that it can be included in any framework or application you have.

The library is inspired by Django — web framework build in python language. So, you only have to specify the URL pattern (perl-compatible-regex) and handler. Here's some simple usage:

include 'route.php';

//a simple controller class
class HelloController
{
    function hello()
    {
        echo 'Hello World';
    }
}

//a simple controller class
class TestController
{
    function test()
    {
        echo 'test';
    }
}

//a simple controller function
function index()
{
    echo 'Hello World';
}

//a simple controller which accept parameters
function testparam()
{
    echo '',print_r( func_get_args() ),'';
}


$urls = array( 
    //simple function
    '!^$!' => 'index',
    //using string as classname
    '!^test/$!' => array( 'TestController', 'test' ),
    //using object
    '!^hello/$!' => array( new HelloController, 'hello' ),
    //use parameterized regex
    '!^archives/(\d+)/(\d+)/(\d+)/(.+)$!' => 'testparam',
    //simple include
    '!^about$!' => 'about.php',
);

route($urls);

Requirement for this library to work is mod_rewrite. And the configuration is pretty simple, I've just use the wordpress .htaccess configuration. Here's the rewrite syntax:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ /index.php [L]

Interested? You can download the source via link below.

http://beta.ferdianto.com/media/route.php

Using Apache And mod_rewrite to Redirect your Mobile User

Wed, 06 May 2009 08:05:00 -0000

While I'm browsing using my K800i, very often that I've accidentally visit a non-mobile site with huge flash or huge content. That sucks, that costs, since mobile internet is rather expensive in my location. So after searching and testing, I've shared a simple hacks for your existing blog or web application to redirect mobile user that visiting your website to mobile-specific pages.

The hacks is for apache webserver only, but nginx or lighttpd server can use the same concept using their config syntax. Put the following config snippet on your website either using .htaccess or directy editing the apache config.

RewriteEngine On

#redirect mobile browser using HTTP_ACCEPT header
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC]
RewriteCond %{HTTP_HOST} "!m.yourmobileurl.com" [NC]
RewriteRule (.*) http://m.yourmobileurl.com/$1 [L]

#some high-end phone sometimes support HTML, only its sucks
#add more browser user agent sig here
RewriteCond %{HTTP_USER_AGENT} (nokia|symbian|iphone|blackberry) [NC] 
RewriteCond %{HTTP_HOST} "!m.yourmobileurl.com" [NC]
RewriteRule (.*) http://m.yourmobileurl.com/$1 [L]

Using HTTP_ACCEPT header is much more simple rather than hitting the HTTP_USER_AGENT variables. I guess there's the end of it, Have fun!

Blog Updates - Mobile Version and English

Fri, 01 May 2009 01:05:00 -0000

After reading this article, I've put some minor modification onto this blog so that mobile user can view this blog also. The design still simple, at least I can view it correctly in my k800i. You can try it also, just browse ferdianto.com on your mobile phone.

The second change is: I decided to write my blog in english — again. The only reason that most of the traffic that come to this blog was not from Indonesia, so.. I'll try to make this blog more accessible from the International viewer ;) And what about the local viewer? Here's a tip: "learn english"

Ok, have fun ;)

HTTP Server Instant menggunakan Jetty

Thu, 23 Apr 2009 23:04:00 -0000

Salah satu keunggulan Java yang susah mencari bandingannya adalah melimpahnya library opensource. Library mulai dari yang sederhana semacam membaca konfigurasi, penanganan file upload atau yang lain. Library-library tersebut bisa dilihat di Java Source, sudah terkategorisasi secara rapi. Tinggal browse dan temukan library yang anda butuhkan. Tetapi saat ini yang ingin saya share adalah menambahkan kemampuan webserver di aplikasi java anda. Ya, anda ngga perlu coding sendiri hanya untuk membuat webserver. Ada 1 library yang hebat yang bernama Jetty. Sebenarnya banyak web server yang bisa ditambahkan atau di embed di aplikasi anda dengan mudah, tetapi pilihan saya jatuh kepada Jetty. Mengapa?

Sederhana saja, karena sangat lengkap fiturnya (jsp, servlet, comet, cgi) , kecil ukurannya (untuk penggunaan standar hanya butuh sekitar 1mb), dokumentasi yang lengkap dan terkenal handal (google dan hadoop pun menggunakannya)

Cara penggunaan yang paling sederhana, cukup bikin servlet sederhana


public class OneServletContext
{
    public static void main(String[] args)
        throws Exception
    {
        Server server = new Server(8080);
        Context context = new Context(server,"/",Context.SESSIONS);
        context.addServlet(new ServletHolder(new HelloServlet()), "/*");
        
        server.start();
        server.join();
    }

    public static class HelloServlet extends HttpServlet
    {
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
        {
            response.setContentType("text/html");
            response.setStatus(HttpServletResponse.SC_OK);
            response.getWriter().println("<h1>Hello SimpleServlet</h1>");
            response.getWriter().println("session="+request.getSession(true).getId());
        }
    }
}

Sangat sederhana, ndak neko2. Bahkan, jetty juga bisa jadi container semacam tomcat, jadi bisa di run secara standalone. Cukup dengan extract instalasinya, dan jalankan:

java -jar start.jar

Jadi, apa yang anda tunggu, coba downloadlah dan coba membuat webserver milik anda sendiri. Untuk info lanjut bisa membaca di dokumentasi jetty di link dibawah.

http://docs.codehaus.org/display/JETTY/Jetty+Documentation

Setup Modem PCI Serial di Linux

Thu, 02 Apr 2009 01:04:00 -0000

Mencoba untuk mendokumentasikan dan berbagi pengalaman saat ngeset modem serial di Linux. Sebenarnya ngga susah sih, banyak resourcenya, cuman karena emang dilakukan secara manual pake konsol dan ssh, jadi terlihat sangat rumit, tetapi sebenarnya ngga susah kok. Begini critanya:

Pertama, cek apakah /dev/ttyS1 ... /dev/ttyS4 nya ada yang idle.

# setserial /dev/ttyS0 -a

Kalau device terpakai — oleh mouse misalnya, biasanya akan memunculkan result sbb:

/dev/ttyS0 : Device or resource busy

Tapi kalau ngga busy alias available, maka akan kaya gini:

/dev/ttyS0, Line 0, UART: 16550A, Port: 0x3f8, irq: 4
Baud_base: 115200, clos_delay: 50, divisor: 0
closing_wait: 3000, closing_wait2: infinite
Flags: spd_normal skip_test

Nah, sekarang, cari tau info device PCI anda pakai command lspci -vv biar mantab:

# lspci -vv
00:00.0 Host bridge: Intel Corporation 82865G/PE/P DRAM Controller/Host-Hub Interface (rev 02)
	Subsystem: ASUSTeK Computer Inc. P5P800-MX Mainboard
	Control: I/O- Mem+ BusMaster+ SpecCycle- MemWINV- VGASnoop- ParErr- Stepping- SERR- FastB2B-
	Status: Cap+ 66MHz- UDF- FastB2B+ ParErr- DEVSEL=fast >TAbort- <TAbort- <MAbort+ >SERR- <PERR-
	Latency: 0
	Region 0: Memory at fe800000 (32-bit, prefetchable) [size=4M]
	Capabilities: [e4] Vendor Specific Information

...

01:0b.0 Serial controller: NetMos Technology Unknown device 9820 (rev 01) (prog-if 02 [16550])
	Subsystem: LSI Logic / Symbios Logic Unknown device 0001
	Control: I/O+ Mem+ BusMaster- SpecCycle- MemWINV- VGASnoop- ParErr- Stepping- SERR+ FastB2B-
	Status: Cap- 66MHz- UDF- FastB2B+ ParErr- DEVSEL=medium >TAbort- <TAbort- <MAbort- >SERR- <PERR-
	Interrupt: pin A routed to IRQ 16
	Region 0: I/O ports at dff0 [size=8]
	Region 1: I/O ports at dfe0 [size=8]
	Region 2: I/O ports at dfa8 [size=8]
	Region 3: I/O ports at dfa0 [size=8]
	Region 4: I/O ports at df98 [size=8]
	Region 5: I/O ports at df80 [size=16]

Tuh dapet info port address dan IRQ dari PCI modemnya. Tinggal ngeset serial port. Saya kebetulan pakai ttyS2 dan ttyS3. Begini caranya:

# setserial /dev/ttyS2 port 0xdff0 UART 16550A irq 16 Baud_base 115200
# setserial /dev/ttyS3 port 0xdfa8 UART 16550A irq 16 Baud_base 115200

Cukup perhatikan port yang saya ambil adalah port yg saya dapet dari lspci di:

Region 0 (dff0) untuk ttyS2
Region 2 (dfa8) untuk ttyS3

Sedang IRQ nya cukup pakai punya lspci juga, yaitu 16. Untuk mengetes, bisa gunakan minicom. Sekian saya akhiri tulisan singkat ini, have fun with your linux ;)

Eksternal resource saya dapatkan dari:

April Mop 2009

Wed, 01 Apr 2009 05:04:00 -0000

Happy April Mop!

BYOB - Bring Your Own Bags

Wed, 04 Mar 2009 01:03:00 -0000

Tadi sore, sekitar pukul 20, pas ngeliat NGC, ada iklan layanan yg judulnya B.Y.O.B, yg nyantol pertama adalah lagunya System of a Down, ternyata singkatan dari "Bring Your Own Bags".

Iklan ini menyarankan kalau pas pergi ke supermarket, minimarket, micromarket dan market-market yang lain, disarankan untuk bawa tas sendiri. Jangan meminta tas kresek atau tas kertas yang biasa kita dapat kalau kita membeli ke toko. Alasannya sederhana. Tas kresek terbuat dari plastik. Plastik itu bahan yang tidak bisa di daur oleh tanah. Otomatis nantinya akan jadi sampah yang ga bakalan hancur-hancur. Nah, jika semua orang di dunia setiap membeli sesuatu selalu dapat 1 tas kresek, bayangin aja, berapa banyak tas kresek yang harus dibuang tiap hari.

OK, ga pake kresek, pakai yang karton, yang bisa di daur ulang. Eh, itu karton dari kertas. Nah kertas itu bikinnya dari kayu. Ga tambah bagus, tambah parah. Jadi, iklan ini make sense banget. Daripada kita hidup dikelilingi sampah, biasakan untuk bawa tas sendiri dari rumah ketika beli sesuatu.

Saya udah coba hari ini, tadi pagi, pas beli rokok. Gampang sih kalau di toko2 kecil. Susahnya kalau pas beli di mal2 gedhe. Pasti disuruh nitipin, dan pasti dipaksa untuk bawa tas sablonan logo mall yg gedhe itu. Tapi, patut dicoba kok, take care ;)

Zen of Python

Sun, 01 Mar 2009 02:03:00 -0000

Sebenernya sudah lama nemu ini, sejak pertama kali kenalan python, tapi cuman pengen share aja bagi yg belum mengenal python, kalau python punya easter egg yg lucu, namanya Zen Of Python. Mengandung ajaran2 yang sebaiknya dianut oleh programmer python. Begini isinya:

>>> import this
The Zen of Python, by Tim Peters

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!
>>>

Jika Flash Banner Anda Menutupi Javascript

Sat, 28 Feb 2009 07:03:00 -0000

Problem flash yang selalu berada diatas menu javascript atau tooltip javascript atau div lain, sangat mengesalkan. Menu anda menjadi tertutup flash. Solusi sederhana adalah memberikan parameter wmode = transparent. Jadi flash anda tidak menutupi tag div atau yg lain. Masalah baru timbul, bagaimana jika flash ini dari banner / ads. Kita ngga mungkin modif flash HTML nya kan? Untuk itu saya ada beberapa script sederhana yang menambahkan parameter wmode di flash object.

Script ini dijalankan saat onload, jadi begitu flash terload, maka script ini akan men-set atau menambahkan parameter wmode. Berikut scriptnya


function addTransparentWmode(  ) {
  var objects = document.getElementsByTagName( 'OBJECT' );
  for(var i=0; i<objects.length; i++) {
    var params = objects[i].getElementsByTagName( 'PARAM' );
    var wmodeparam = null;
    for(var j=0; j<params.length; j++) {
      if ( params[j].getAttribute( 'NAME' ) == 'wmode' ) {
        wmodeparam = params[j];
        break;
      }
    }
    
    //add wmode param if not found
    if (wmodeparam == null) {
      wmodeparam = objects[i].ownerDocument.createElement('PARAM');
      wmodeparam.setAttribute( 'name', 'wmode' );
      objects[i].appendChild( wmodeparam );
    } else {
    }
    wmodeparam.setAttribute('value', 'transparent');
    //showhide
    objects[i].style.display = 'none';
    objects[i].style.display = 'block';
  }
  
  var embeds = document.getElementsByTagName( 'EMBED' );
  for(var k=0; k<embeds.length; k++) {
    embeds[k].setAttribute( 'wmode', 'transparent' );
    embeds[k].style.display = 'none';
    embeds[k].style.display = 'block';
  }
}

Cara penggunaanya cukup masukkan di event onload anda.

window.onload = function() { addTransparentWmode();  }

Semoga berguna

[thinkagain] Naik motor sambil SMSan

Thu, 26 Feb 2009 01:03:00 -0000

Jika anda berpikir kalau sms-an sambil naik motor/mobil adalah keren, efektif dan hebat, THINK AGAIN

Anda tidak akan melihat jalan, apakah didepan anda ada cewe cakep atau atau tikungan tajam, jambret2 akan langsung melirik HP anda, sudah pasti SMS anda pasti typo semua, dan orang akan menganggap anda kacung / kurir, karena takut bos anda marah2 gara2 SMS ga di reply. Worse of all, bisa jadi SMS yang terkirim adalah SMS terakhir anda, karena anda tidak memperhatikan bahwa didepan anda ada truk yang supirnya ngantuk dan lupa pasang handrem.

Aman di Internet

Tue, 24 Feb 2009 23:03:00 -0000

Ada plesetan yang mengatakan, WWW bukan singkatan dari World Wide Web, melainkan singkatan dari World Wild Web. Plesetan tersebut sebenarnya sangat mirip dengan kenyataan. Internet adalah dunia liar dimana semua orang bebas mem-posting apa keinginannya, ada beberapa orang yang selalu ingin tahu, menyebarkan virus, menangkap password orang lain dan menggunakan sesuai dengan keinginannya. Saya ada beberapa tips yang cukup manjur dalam membuat ber-internet sedikit lebih aman.

Berikut tips-tips yang selalu saya lakukan:

Gunakan browser yang terpercaya

Ada banyak browser yang beredar, tetapi yang terpercaya hanya sedikit. Secara pribadi saya menyukai Firefox. Karena selain plugin banyak, firefox adalah browser open-source. Dicoding oleh community — but that just me. Ada pilihan browser lain semacam Opera. Mereka punya fitur untuk mematikan javascript / java / flash
Matikan Javascript untuk situs yang tidak dikenal

Javascript adalah fitur yang biasa digunakan pembuat web untuk efek2 cantik. Tetapi bukan hanya itu, javascript juga digunakan untuk mengubah tampilan sebuah situs tidak dikenal mirip dengan tampilan klikbca atau membuat anda mendownload program yang tidak anda ketahui. Jadi untuk amannya matikan javascript. Di firefox, ada plugin yang bernama: Noscript, fungsinya adalah mematikan script dan mengenable javascript di situs2 yang anda inginkan — gmail atau Facebook tidak akan berjalan mulus tanpa javascript. Untuk opera, sudah ada opsinya.
Jangan pernah langsung percaya dengan link yang diberikan melalui Messenger atau E-Mail

Ada kalanya teman anda memberikan sebuah link. Mungkin kata2 nya menarik. Tetapi, jangan langsung percaya. Bisa saja itu bukan dari teman anda, tetapi dari virus di komputer teman anda, yang secara otomatis mengirimkan link tersebut. Konfirmasikan dulu dengan teman anda.
Attachment Juga Ancaman

Jangan langsung percaya dengan attachment e-mail yang ada di Inbox anda. Sama juga seperti link di chatroom / messenger, attachment menjadi media penyebaran spyware dan virus yang sangat efektif.
Manfaatkan SSL/HTTPS

Google / yahoo mail punya fitur SSL / HTTPS. HTTPS adalah saluran terenkripsi, dimana data yang anda kirimkan dienkripsi dulu sebelum dikirim lewat internet. Manfaatkan sebaik2nya. Apalagi jika anda mengakses e-mail di cafe dengan hotspot tanpa password. Orang lain bisa dengan mudah membaca data password atau ucapan selamat ultah ke selingkuhan anda, yang anda kirimkan jika dikirim tanpa SSL
Hemat bandwith dengan host files

Hosts file adalah file di komputer lokal anda yang berisi data alamat internet dengan alamat network IP. Contoh isi dari hosts file bisa anda lihat di /etc/hosts untuk linux atau di C:\WINDOWS\system32\drivers\etc\ untuk windows. Silahkan buka dengan notepad anda. Kemungkinan isinya:
```
127.0.0.1 localhost
127.0.0.1 namakomputeranda
```
127.0.0.1 selalu akan menjadi IP komputer anda. Dan kita bisa memanfaatkan file ini untuk tidak mendownload banner2 dari situs2 iklan yang biasanya berukuran besar. Silahkan download file hosts dari MVPS dan kopikan ke komputer anda. Maka, browser akan menganggap doubleclick atau beberapa situs penyedia banner iklan beralamat di komputer anda, sehingga komputer anda tidak akan melakukan request network untuk mendapatkan banner. Tips ini dapat menghemat bandwith speedy / telkomsel flash anda.
Manfaatkan SSH Shell

Jika anda mempunyai hosting dan mempunyai fitur SSH shell, manfaatkan shell anda sebagai proxy untuk berinternet / chatting. Cukup download putty jika anda berada di Windows. Gunakan perintah DOS:
```
putty.exe -D$port $hostsshserver $portsshserver
```
Atau di linux
```
ssh -D$port $hostsshserver $portsshserver
```
Kemudian login seperti biasa. Setelah login sukses, set browser anda untuk proxy Socks5 ke 127.0.0.1 dan port ke $port (port isikan dengan angka antara 1025 - 65535, sesuai yang anda masukkan saat login SSH), maka anda sudah cukup aman untuk berinternet, karena jalur anda sudah dilewatkan melalui saluran terenkripsi SSH. Trik ini berlaku juga untuk chatting dengan Yahoo messenger. Anda bisa memproxy messenger anda, sehingga aman untuk digunakan dan chat anda menjadi lebih aman.

Sekian dulu tips-tips berinternet dari saya, semoga berguna. Have fun ;)

Membuat Programming Lebih Menyenangkan

Tue, 24 Feb 2009 16:03:00 -0000

Saya adalah tipe orang yang sangat cepat bosan. Jadi ada kalanya saya sangat bosan dalam kegiatan yang menafkahi saya, yaitu memprogram. Bosan dengan mengetik source-code, membuat getter/setter, melakukan query SQL, dsb. Mengetik source semacam:

$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
if (empty($username)) {
  //
} else if (..) {
  //
}

Menjadi sebuah neraka bagi saya, dan menutup IDE adalah salah satu obat. Untungnya, saya menemukan cara untuk membuat kegiatan satu ini menjadi lebih menarik dan menantang. Cara saya adalah mem-variasi model penulisan. Contoh kasus diatas, saya biasanya memodifikasi dengan:

$posts = array( 'username', 'password', 'email', ... );
foreach($posts as $p) $$p = $_POST[$p];

do {
  if (!$username) {  $error = "Username kosong"; break; }
  if (!$password) {  $error = "Password kosong"; break; }
  //simpan SQL di sini
}
while(0);

Atau daripada menulis:

cookiedata = {
  'name': request.COOKIES.get('name'),
  'email': request.COOKIES.get('email'),
  'url': request.COOKIES.get('url'),
}

#atau

key_name = 'tag:%s' % defaultfilters.slugify(tag.name)
newtag = models.Tag( key_name=key_name, name = tag.name, description = tag.description )
newtag.put()

Saya akan mengubah ke:


cookiedata = dict([(k, request.COOKIES.get(k, '')) for k in ['name', 'email', 'url']])

key_name = 'tag:%s' % defaultfilters.slugify(tag.name)
newtag = models.Tag(key_name=key_name, **dict([(prop, getattr(tag, prop)) for prop in models.Tag.properties()]))
newtag.save()

Contoh lagi di Java, daripada saya menulis


class ShutdownThread extends Thread {
  MyObject obj = null;
  public void run() {
    obj.closeAllConnections();
  }
  public void setObj(MyObject obj) {
    this.obj = obj.
  }
}

public static void main(String[] args) {
  MyObject obj = new MyObject();
  ShutdownHook hook = new ShutdownHook( obj )
  Runtime.getRuntime.addShutdownHook( hook );
}

Saya akan menggunakan metode yg lebih menyenangkan

public static void main(String[] args) {
  MyObject obj = new MyObject();
  Runtime.getRuntime.addShutdownHook( new Thread() { 
    MyObject obj;
    public  Thread set(MyObject obj) { this.obj = obj; return this; }
    public void run() { obj.closeAllConnections(); }
  }.set(obj) );
}

Karena mengingatkan saya kepada betapa menyenangkannya javascript dan jQuery.

Ya, memang lebih tidak mudah dibaca dan maintenance aplikasi akan sedikit lebih susah, tetapi at-least its fun. Dan sepertinya saya udah bosan ngeblog, jadi sampai di sini. Silahkan ceritakan solusi anda sendiri untuk mengatasi kebosanan anda di kerjaan anda sendiri.

Javascript Siap Pakai

Tue, 24 Feb 2009 00:03:00 -0000

Saya hanya ingin share beberapa fungsi JS yang sering saya pakai. Ya, memang jQuery atau Prototype selalu lebih menggiurkan. Tetapi, kalau hanya untuk toggle (show/hide sebuah div) kemudian anda menggunakan jQuery, bukankah itu adalah sebuah overkill? 50kb overhead (uncompressed) tidaklah murah. Jadi, saya share aja fungsi-fungsi javascript yang sering saya gunakan tanpa harus melangkah ke prototype atau jQuery.

Menyingkat getElementByID. Metode itu memang sangat menyebalkan, panjang, dan notasi case-sensitive yang menyakitkan hati. Saya suka mempersingkat pemanggilan dengan menggunakan fungsi ini:

var EL = function() {
	if (arguments.length == 1) {
		var obj = document.getElementById(arguments[0]) || {length:0};
		if (obj) obj.length = 1;
		return obj;
	}

	var r = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var el = arguments[i];
		if (typeof el == 'string') {
			var obj = document.getElementById(el);
			if (obj) r.push(obj);
		}
	}
	return r;
}

Metode ini selalu mengembalikan object. Contoh pemanggilan:

EL( "submitButton" ).onclick = function() { /*masukkan fungsi anda di sini*/; return true; };

Fungsi untuk mem-filter inputan, jadi sebuah textbox yang hanya menerima inputan angka, atau huruf atau apa aja yang kira2 kepikir.

function filterInput(input, pattern) {
	input.onkeypress = function(e) {
		if (!e) var e = window.event; //IE
		var code = ( e.keyCode && e.keyCode ) || ( e.which && e.which );
		var ch = String.fromCharCode(code);
		return code < 32 || pattern.test(ch);
	};
}

Fungsi filterInput akan melakukan capturing key yang diketikkan oleh user dan jika match dengan pattern (regex) yg ada akan meneruskan key yg diketik. Jika tidak match, dia akan diam saja. Contoh penggunaan:

filterInput( EL("username"), /[a-zA-Z0-9_\.]/ );

Username hanya boleh karakter a-z, A-Z, 0-9 dan boleh mengandung spesial karakter titik (.) atau underscore (_)

Array on Steroid, extending object array, sehingga object array menjadi sangat powerful dengan metode2 yang kita definisikan sendiri.

//diambil dari jQuery 
Array.prototype.each = function(fn) {
	var n, i=0;
	if (this.length === undefined) {
		for (n in this)
			if (fn.call(this[n], n, this[n]) === false) break;
	} else {
		for (var value=this[0], i=0; i
Array.prototype.find = function(s) {
	var r = false;
	for (i=0; i
Penggunaan sangat sederhanya. Contoh:
//enable form username dan password
EL("username", "password").each(function() {
  this.enabled = true;
});


Sementara itu dulu yg saya share, next time, akan saya share lebih banyak lagi.

Analytic dan Ajax

Mon, 23 Feb 2009 23:03:00 -0000

Seperti kita tahu, Google Analytics adalah servis lengkap dari google untuk melakukan tracking terhadap user. Sederhananya, analytic adalah statistik situs dengan kemampuan canggih untuk menganalisa perilaku user di situs kita. Permasalahannya, jika situs kita menggunakan konsep ajax atau request dijalankan via XMLHttpRequest, maka analytic tidak berlaku disini. Kita tidak bisa men-track user melalui request ajax, jika instalasi analytic dijalankan secara normal. Normal itu maksudnya, anda langsung kopi-paste kode yang ada di analytic dan memasukkan ke halaman anda.

Cara yang paling umum dilakukan adalah secara manual memasukkan fungsi _trackPageView setelah request ajax anda sukses dijalankan.

Misal:

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { 
    pageTracker._trackPageView( '/path/request/ajax/anda'  );
  }
}

Ini akan meng-capture semua request ajax anda dan perhitungan pageview akan lebih representatif dengan kondisi aktual. Baik request ajax dan request normal akan dicapture oleh analytic.

Referensi yang lebih lengkap tentang analytic bisa anda dapatkan di alamat:
http://code.google.com/apis/analytics/docs/gaJSApi.html

Have fun ;)

Load balance dengan Nginx

Sun, 01 Feb 2009 01:02:00 -0000

Apakah website anda mengalami overload dengan ribuan request per hari? Atau aplikasi web anda super berat sehingga 1 server tidak mampu lagi menangani request yang datang? Mungkin solusi Load Balancing dengan beberapa server bisa meringankan beban load yang tinggi. Permasalahnnya adalah: Bagaimana

Salah satu aplikasi yang lumayan handal untuk kerjaan load balancer adalah Nginx, Nginx adalah HTTP server yang compact, mudah dikonfigurasi dan ringan di resource. Saya membuat contoh kasus sederhana dengan 2 python script yang bisa kita anggap 2 buah web server yg bekerja berdampingan.

Script server1.py menggunakan CherryPy sebagai httpserver.

#server1.py
import wsgiserver, os
PORT = 8070
def my_crazy_app(environ, start_response):
    start_response('200 OK', [('Content-type','text/plain')])
    return [("\n".join(["%r: %r" % (k, environ[k]) for k in environ.keys()]))]
server = wsgiserver.CherryPyWSGIServer(
            ('0.0.0.0', PORT), my_crazy_app,
            server_name='www.cherrypy.example')
if __name__ == '__main__':
    try: 
        print "CherryPy WSGIServer started at port %d" % PORT
        server.start()
    except KeyboardInterrupt: 
        server.stop()

Script server2.py menggunakan wsgiref-nya python sebagai http server.

#server2.py
from wsgiref.simple_server import make_server

def hello_world_app(environ, start_response):
    start_response('200 OK', [('Content-type', 'text/plain')])
    return [("\n".join(["%r: %r" % (k, environ[k]) for k in environ.keys()]))]

httpd = make_server('', 8000, hello_world_app)
print "Serving on port 8000..."
httpd.serve_forever()

Pemilihan bahasa dan dua modul diatas tanpa alasan tertentu. Hanya untuk simulasi load balancing saja. Sekarang, anda bisa menginstall nginx. Dan konfigurasi sebagai berikut:

upstream test {
	server 127.0.0.1:8070; #cherrypy
	server 127.0.0.1:8000; #python wsgiref module
}

server {
	listen 80;
	server_name localhost;
	root /var/www/nginx-default;
	client_max_body_size 10m;

	location / {
		proxy_pass http://test/;
		proxy_redirect off;
		proxy_set_header  Host  $host;
		proxy_set_header  X-Real-IP  $remote_addr;
		proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
}

Restart Nginx anda, jalankan script server1.py dan server2.py, kemudian buka browser ke http://localhost/. Anda akan melihat output berganti2 dari server1.py ke server2.py. Begitu juga berlaku untuk apache anda — karena kebanyakan orang memakai apache. Prosedurnya:

Setting apache anda untuk jalan di port selain 8080 — misalnya ke port 8080 Listen 8080, kemudian konfigurasi nginx untuk load balance ke server2 anda, dan anda siap untuk menghandle request yang lebih banyak lagi.

Tidur Malam

Sun, 28 Dec 2008 00:01:00 -0000

Hampir semua programmer yg saya kenal, punya hobi tidur pagi. Dan sepertinya tidur pagi ini banyak ruginya daripada untungnya, misalnya telat ngantor gara2 bangun kesiangan atau badan lemes dan kulit pucat karena ga pernah kena sinar matahari. Tetapi untungnya, kebiasaan tidur pagi ini ada untungnya juga. Ada 3 hal yang bisa dikemukakan sebagai pembenaran kegiatan diatas:

Hormon stress cortisol paling banyak di produksi sekitar jam 7 pagi. Jadi kalau bangun sekitar jam itu, kemungkinan akan mengalami ketegangan. Coba tambahkan beberapa menit tidur
8 jam untuk tidur tidaklah cukup. Sebenarnya, sebelum bola lampu ditemukan, rata2 lama orang tidur adalah 10 jam per hari. Bukan 8 jam.
Terakhir, biasanya yg punya hobi tidur malam/pagi adalah mempunyai tingkat kreatifitas tinggi. Ada riset yang berkesimpulan bahwa orang yg hobi melekan cenderung mempunyai skor tinggi di test kreatifitas daripada orang yg "normal"

Programmer dan Typo

Sun, 21 Dec 2008 02:12:00 -0000

Setelah sekitar 3 hari tidak mengakses e-mail kantor — libur natal dan tahun baru, hari ini saya beranikan diri untuk mengakses inbox kantor. Ngga sebanyak saat hari kerja normal. Tetapi yang paling menyebalkan menurut saya adalah typo yang ada di body maupun subject e-mail. Sebenarnya saya ngga akan terlalu mempermasalahkan problem "Salah Ketik" ini jika saja orang yang typo bukan programmer.

Mengapa saya membenci programmer yang suka typo? Karena senjata utama programmer adalah typing. Seorang ngga akan mungkin bisa menjadi programmer yang handal tanpa skill mengetik di keyboard. Well, memang mungkin, tetapi di jaman dulu, saat Punched Card masih berjaya. Kalau sekarang? Baik anda menggunakan IDE hebat semacam Eclipse, Netbeans ataupun Visual Studio, seorang programmer akan selalu terkutuk untuk mengetik.

Jadi, skill mengetik adalah skill dasar, yang menurut saya sangat berpengaruh dalam produktifitas seorang programmer. Mungkin saya akan usulkan untuk mencantumkan skill mengetik di lowongan pekerjaan programmer di kantor saya, agar problem semacam ini ngga akan terjadi di masa depan.

Nopol Mobil Jakarta 3 Huruf

Thu, 18 Dec 2008 14:12:00 -0000

Pas ke jakarta kemaren, saya perhatikan kalau kode karakter nopol mobil di Jakarta menjadi 3 Huruf. Dan ketika saya baca di beberapa blog dan sebuah situs media, SAMSAT Jakarta menyatakan kalau memang kehabisan digit untuk nomer kendaraan. Heran aja, dikasih 4 digit plus 2 kombinasi karakter, tetapi bisa kehabisan. Memang seberapa banyak sih mobil dan motor di Jakarta? Jika saya coba hitung dari digitnya

9999 x 27 x 26 = 7.019.298

7 juta kendaraan. Pantesan aja jakarta macet. Cuman, yang saya permasalahkan adalah solusi untuk menambah jumlah huruf untuk Nopol baru. Ini yang menurut saya kurang cerdas. Secara akan membuat plat nomer yang udah jelek, menjadi lebih panjang dan lebih jelek lagi. Belum lagi akan menyusahkan orang untuk mengingat nomer kendaraan. Dengan menambah 1 digit di belakang

9999 x 27 x 27 x 26 = 189.521.046

189.5 Juta dengan kompleksitas nomer semacam: B 9919 JXR. Panjang banget. Jadi plat metal yang dibuat dari plat drum bekas yang asalnya udah jelek, jadi tambah jelek dan panjang.

Apakah ada solusi lain? Ya, tentunya ada solusi yang mudah. Daripada menambah digit di belakang, kenapa tidak mengubah 4 digit angka tersebut menjadi bilangan basis 36? (Base-36 adalah bilangan 0-9, A-Z) Dengan base-36, mungkin 3 huruf dibelakang ngga akan diperlukan lagi. Kita hitung kemungkinan untuk base-36

4 Digit untuk base36 adalah 1.679.615
Jadi total kendaraan yg muat adalah = 1.679.615 x 27 x 26 = 1.179.089.730

1 milyar, tanpa hrs nambah panjang plat nomer, Contoh plat nomer yang valid adalah: B JXPY CR. Juga menambah peluang untuk customizing plat nomer dengan nama pemiliknya semacam: B ANDI CX atau B FER DI

Moral: Mikir dulu sebelum nambahin digit.