Quick Sample To Use jQuery Global AJAX Events

Sometime we write AJAX based application which has many ajax call. If an AJAX called, we add loading image indicator to show that request being processed. For simply way we use AJAX beforeSend() and complete() events for show and hide loading image indicator. See code below:

// call an AJAX request
$.ajax({
	url: 'sample/url/target.php',
	beforeSend: function() {
		//call loading image indicator here
		showImageLoading();
	},
	success: function(result) {
		// do when success AJAX called successfully
	},
	complete: function() {
		//call function to hide loading image indicator here
		hideImageLoading();
	}
});

// call an another AJAX request
$.ajax({
	url: 'sample/url/another_target.php',
	beforeSend: function() {
		//call loading image indicator here
		showImageLoading();
	},
	success: function(result) {
		// do when success AJAX called successfully
	},
	complete: function() {
		//call function to hide loading image indicator here
		hideImageLoading();
	}
});

When we write much of AJAX call, we waste our time to write beforeSend() and complete() events for each AJAX calls. It’s also affect on total lines of code.

The better solution, we can use AJAX global events which always called when an AJAX request fired. Let’s try to modify code above:

// This event is triggered if an Ajax request is started
// and no other Ajax requests are currently running.
$(document).ajaxStart(function() {
	$(this).showLoading();
});

// This global event is triggered if there are no more
// Ajax requests being processed.
$(document).ajaxStop(function() {
	$(this).hideLoading();
});

// call an AJAX request
$.ajax({
	url: 'sample/url/target.php',
	success: function(result) {
		// do when success AJAX called successfully
	}
});

// call an another AJAX request
$.ajax({
	url: 'sample/url/another_target.php',
	success: function(result) {
		// do when success AJAX called successfully
	}
});

That’s, we just define global AJAX events once, and call many AJAX request. We can also disable global event for a particular AJAX request by passing global option to false on an AJAX request like below:

$.ajax({
	global: false,
	success: function(result) {
		// do when success AJAX called successfully
	}
});

The complete list of global and local jQuery AJAX events can be found at http://api.jquery.com/Ajax_Events/

Aturan Penulisan Database Yang Biasa Saya Lakukan

Kali ini saya coba menuliskan kebiasaan (atau aturan?) yang saya buat sendiri untuk diri saya sendiri dalam membuat aplikasi. Aturan/convention yang saya buat ini bukan hal baru. Ini hanyalah rangkuman dari berbagai best practice dalam menulis code atau membangun aplikasi. Saat ini baru sempat untuk menulis tentang database convention. Kedepannya, saya berharap ada banyak yang bisa saya tambahkan. Saya juga meletakkan dokumen ini di Github, dan berharap bisa dapat masukan yang bagus.

Berikut daftar dari aturan penulisan database yang baru saja saya tulis dan disimpan di Github:

  1. use english language for name of fields and tables.
  2. Table names are lowercase, plural, and underscored without abbreviation except for commonly used. example: usersrulesorganitation_units.
  3. Field names are lowercase, and without abbreviation except for commonly used like id or uid.
  4. Field names with two or more words are underscored. Example: first_namelast_name, etc.
  5. Use `id` as name of primary key for all tables with int data type for auto increment or char(32) for UUID/GUID.
  6. use the (singular) name of the related table followed by _id for foreign keys. Example: user_id that reference to users table.
  7. Upper casing SQL keywords and built-in functions. Example:
    SELECT first_name,
        last_name,
        CONCAT(first_name, last_name) AS full_name
    FROM users;
    
  8. Avoid asterisk (*) symbol on select clause.

Untuk mendapatkan update terbaru dari daftar di atas, silahkan berkunjung ke repo Github.

Create Simple Jquery Plugin To Add An Arrow On Active Menu

Sometime I need to put an arrow on active menu visited by website user or visitor on simple way as image below.

menu

Firstly, prepare HTML image for arrow and a list of menus

...
...
<img class="up_arrow" src="images/up_arrow.png" />
<div class="menu left">
    <a href="#" class="active">About Us</a>
    <a href="#">The Dream</a>
    <a href="#">Events</a>
    <a href="#">Contact Us</a>
    <a href="#">Affiliates</a>
</div>
...
...

set absolute and hide the image on CSS file for first load

.up_arrow {
    position: absolute;
    display: none;
}

add javascript and write it as jquery plugin

(function($) {
    $.fn.putMenuArrow = function() {
        $('.up_arrow').css({
            'display': 'block',
            'position': 'absolute',
            'left': ($(this).offset().left + $(this).outerWidth() / 2) - 17, // 17 is width of arrow image
            'top': $(this).offset().top - 19 //19 is height of arrow image
        });
    }
}(jQuery));


// call putMenuArrow plugin
$(document).ready(function() {
    $('.menu a.active').putMenuArrow();

    $('.menu a').click(function(e) {
        e.preventDefault();
        $('.menu a').removeClass('active');
        $(this).addClass('active');
        $(this).putMenuArrow();
    });
});

The complete demo can be found at:

Tipe-tipe Programmer Dengan Dengan Tumpukan Project-nya

Jika seorang programmer biasa mengerjakan 3 project, atau bahkan lebih, secara bersamaan, ada beberapa kemungkinan mengenai programmer tersebut. Bukan satu project dan project lainnya lagi idle karena menunggu feedback user, atau lagi user testing. Tapi benar-benar tiga project yang jalan secara bersamaan. Waktu perharinya dibagi 30% untuk coding project A, 30% untuk coding project B, dan seterusnya.

Kemungkinan pertama, ia bekerja 16 jam perhari. Mungkin managernya berdiri dibelakang mengawasi sambil bawa cambuk. Yang seperti ini sering kita temui meski tidak bawa cambuk beneran sih…

Kemungkinan kedua, programmernya sangat sakti dengan kemampuan tingkat dewa. Dengan hanya 8 jam sehari, 3 project selesai dengan mulus walaupun timline masing-masing project sangat ketat. Tapi kenyataannya, programmer tingkat dewa sangat susah didapat. Kalau sudah dapat programmer tipe ini, jangan dilepas deh, soalnya mudah lepas karena banyak yang ngincer 🙂

Kemungkinan ketiga, programmernya pinter seperti programmer kebanyakan, tapi cuek bebek. Deadline yang terpampang tidak terlihat. Yang penting dia bekerja. Semua project molor jauh dari target bukan urusannya. Atau bahkan jika tidak ada yang kelar, ia tetap cuek melnggang tanpa ada rasa bersalah. Prinsipnya cuma satu, “Seberat-beratnya pekerjaan, akan terasa ringan kalau tidak dikerjakan”. Nah.. loh.. 🙂

Negeri Auto Pilot

Spanduk bertuliskan “Negeri Auto Pilot” sempat terbentang dibeberapa titik strategis di ibu kota awal tahun ini (2012). Meski keberadaannya hilang dalam sekejab dan tampaknya kurang popular, tapi kalimat ini membuat saya tersenyum getir. Ada sedikit humor yang coba diselipkan dalam kalimat yang menggambarkan betapa negeri ini berjalan tanpa arah dan tujuan yang jelas. Negara berjalan dengan sendirinya, bahkan andai kata tidak ada pemimpin didalamnya. Pemimpinan hanya sekedar jabatan formalitas saja dan menyelesaikan kegiatan-kegiatan administratif. Keberadaannya tidak banyak memberi arti.

Kondisi yang seperti ini layaknya manusia yang hidup tanpa tujuan yang jelas. Ia hanya sekedar menjalani kehidupan sehari-hari tanpa tahu apa yang ingin ia capai hari ini, besok, bulan depan, atau lima tahun lagi. Apa lagi cita-cita setalah mati. Kehidupannya mengalir saja seiring dengan waktu yang telah dilalui. Hari-harinya hanya berisi makan, tidur, bekerja, dan bersenang-senang. Memikirkan pekerjaannya saja mungkin sudah sangat sibuk, apalagi memikirkan cita-cita dan bagaimana cara menggapainya.

Kondisi auto pilot ini juga bisa terjadi di setiap organisasi. Terutama organisasi-organisasi yang sudah “mapan” yang kepemimpinannya dipegang oleh generasi ketiga atau lebih. Tujuan organisasi memang tertuang dalam AD/ART. Tapi para pemimpinnya hanya menjalankan tugas-tugas manajerial saja. Program kerjanya hanya sekedar mencontek dari tahun-tahun sebelumnya tanpa ada improvisasi. Jikapun ada hanya beda bentuk saja. Esensinya tidak banyak berubah.

Menginstall Git Di Windows

Git adalah salah satu revision control yang sangat popular saat ini meski datangnya belakangan dibanding pendahulunya seperti Subversion, VCS, dan lain-lain. Dengan adanya github.com yang mengusung motto “Social Coding”, lengkaplah sudah kepopularannya.

Untuk menggunakan Git dalam lingkungan Windows, ada beberapa langkah instalasi yang mesti dilalui.

  1. Download dan install Git-.1.7.x…exe dari http://code.google.com/p/msysgit/downloads/list?can=3
  2. Download dan install TortoiseGIT dari http://code.google.com/p/tortoisegit/downloads/list

TortoiseGIT berguna untuk mengintegrasikan Git dengan Windows Explorer. Integrasi ini memunginkan bekerja dengan Git langsung dari Windows Explorer dengan hanya mengklik kanan untuk memunculkan menu yang berhubungan dengan Git. Tidak diperlukan lagi command line.

Dengan terinstallnya dua tool diatas, sebenarnya sudah cukup untuk bekerja dengan Git. Lalu bagaimana jika ingin mempublish atau membuat repository di github.com atau sourecode hosting server lain yang mendukung Git  seperti assembla.com, Gitorious, bitbucket.org, dll)?

Otentikasi Git Server Menggunakan Public dan Private key

Meskipun ada beberapa metode untuk sinkronisasi repository di Git, seperti file sharing, http/https, git daemon, dan ssh, kebanyakan Git server online menggunakan otentikasi ssh dengan publik dan private key. Disini akan dijelaskan bagaimana mensetup otentikasi di Git server menggunakan public dan private key saja.

Kok cuma yang SSH yang di jelasin?

Sebenarnya protokol lain yang sering dipakai adalah https. Tapi kalo servernya pake https kan gak perlu setup public dan private key. Tinggal clone dan alamat remotenya diarahkan ke url yang HTTPS. Github dan Bitbucket udah support https, yang lain belum tahu.

Kalau cara kerja publik dan private key silahkan googling aja. Sedangkan cara membuat public dan private key bisa pakai Putty Key Generator (puttygen.exe). Caranya:

  1. Download puttygen.exe di http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html
  2. Jalankan file puttygen.exe dengan mengklik ganda, kemudian klik tombol Generate, gerakkan mouse secara bebas selama hinggak public dan private key berhasil di generate.
  3. Masukkan key passphrase (sama dengan password) atau biarkan kosong.
  4. Simpan private key secara pribadi.
  5. Public key bisa disimpan atau tidak. Jika tidak disimpan, anda perlu menggunakan puttygen.exe untuk melihat  public key yang telah di generate dengan cara me-load private key-nya. Public key ini nantinya akan di publish di server git.

Setelah public dan private key sudah siap, silahkan masukkan public key ke git server. Sebagai contoh, bila ingin menambahkan public key ke account di github, silahkan login ke github (daftar dulu bila belum punya account). Setelah login success,

  1. Pilih account setting di pojok kanan atas.
  2. Pilih SSH Keys
  3. Pilih add SSH Key
  4. Masukkan title dan public key yang sudah digenarete. Perlu diperhatikan format public key yang di terima seperti yang tampak pada field public key di puttygen.exe

Setelah public key di tambahkan ke server github, anda sudah bisa membuat repository, push ke server github, dll. Langkah-langkah menambahkan public key keserver git lainnya seperti assembla.com, gitorious.org, bitbucket.org, dll relatif sama. Jadi selamat mencoba 🙂

Convert Virtualbox Image to VMware Image

I use Windows XP Mode that integrated with my windows7, but I often get it crash with no reason. So I try to get VMware Player and fortunately, it easy to import my Windows XP Mode to VMware.

If you want to permanently remove Windows XP Mode (will save a lot of disk space), follow step explained Microsoft Technet instead of uninstall Windows XP Mode from Control Panel.

Someday, I get VirtualBox image and try to run it using VMware. First step, I surf and search how to convert VirtualBox image(.vdi) to VMware image(.vmdk). I get here and tell me to use qemu-image utility part of Qemu and run command bellow:

qemu-img convert VirtualBox-HardDisk-image.vdi -O vmdk VMware-virtual-machine-image.vmdk

It’s very simple but commented didn’t work a well and pointed to another tutorial. This second tutorial more explained steps. first step convert VirtualBox image to raw image using Vboxmanage (part of VirtualBox) and second step convert raw image to VMware image using Qemu(http://www.qemu.org). This steps more complicated for me because I must download VirtualBox to use Vboxmanage command.

So I decide to use just Qemu to convert because is small and lightweight to download. The following steps explain you to convert VirtualBox image(.vdi) to VMware image(.vmdk):

  1. Download Qemu for windows at http://lassauge.free.fr/qemu/
  2. Extract on c: and become c:\qemu-0.13.0-windows
  3. Open Windows Command Prompt as administrator
  4. Run command bellow to convert VirtualBox image(.vdi) to raw image(.raw)

    c:\qemu-0.13.0-windows>qemu-img convert c:\virtualbox_image.vdi -O raw c:\virtualbox_image.raw

  5. Run command bellow to convert raw image(.raw) to VMware image(.vmdk)

    c:\qemu-0.13.0-windows>qemu-img convert c:\virtualbox_image.raw -O vmdk c:\virtualbox_image.vmdk

Converting disk image need more times dependent to image size. be patient to wait until finished and make sure you disk space is sufficient to output file.