Hari Tanpa Ponsel Sedunia

Tahukah kamu kapan itu? Tidak tahu kan? Aku juga tidak tahu sih. Tapi yang jelas, hari ini aku tidak menyentuh barang itu sedetik pun. Mungkin baru 2 hari lagi aku baru menyentuh barang itu kembali. Kemarin sekitar jam 11 aku ke Sony Ericsson Service Center di BEC, untuk memperbaiki ponselku, SE K800i, yang sudah rusak joystick-nya. Sebenarnya sih sudah lama rusaknya, tapi malas mau diperbaiki karena tidak ada ponsel kedua dan juga aku tidak ingin kehilangan isi-isi ponsel yang penting yang tersimpan di memori ponsel, seperti kontak dan pesan. Untuk kontak sih bisa di-backup ke memori stick, tapi tidak bisa untuk pesan. Aku pun berpikir untuk menginstal PC suite di komputer ComLabs karena tidak bisa di Windows Vista. Belum sempat meng-install-nya, kata temanku di PC suite Sony Ericsson tidak ada fitur backup pesan. Beberapa hari kemudian, aku ke situs Sony Ericsson dan alhamdulillah, PC suite terbaru sudah bisa dipakai di Windows Vista. Setelah di-install, alhamdulillah lagi, bisa "backup"^[1] pesan. Tapi sayang, pesan-pesannya disimpan satu per satu ke dalam berkas teks. Jadi, berkasnya banyak banget. Oleh karena itu, baru bisa kemarin aku membawanya ke service center. Itu pun terpaksa karena masa garansi akan habis esok harinya (hari ini). Untung, tugas IF3292 membuat catur yang deadline-nya jam 17 hampir selesai. Aku serahkan kelanjutannya kepada kedua rekan kelompokku. Deadliner juga aku dalam hal begini^[2]. Beberapa bulan yang lalu pun aku memperbaiki printer Canon iP1700 punyaku satu hari (kerja) sebelum masa garansi habis walaupun sudah lama rusak. Hehe.

---

[1]	Diberi tanda petik karena bukan backup biasa (kok BBB ya?) yang ada restore-nya.
[2]	Tapi tugas membuat caturnya tidak terlalu deadliner. Hehe.

Makan di Pizza Hut Pertama Kali

Senin kemarin aku ikut silaturahim Tim CIC (ComLabs IT Course) pertama kali sejak aku bergabung dengan mereka. Aku merupakan anggota baru di tim ini. Baru akhir bulan Februari kemarin aku gabung di tim pengembang sistem informasi CIC. Senin sore kami berkumpul dulu di ComLabs. Pukul 17.45 kami baru berangkat dengan tujuan Jonas Studio dan Pizza Hut Dago. Sampai di Jonas pukul 17.55. Di sana pun kami menunggu antrian untuk pemotretan hingga pukul 19.00. Setelah selesai kami meluncur ke Dago untuk makan Pizza Hut. Aku punya agenda lain yang cukup penting ba'da isya. Bagaimana ini? "Ah, nanti nyusul aja deh." pikirku. Pas lagi makan, aku mendapat pesan singkat dari teman bahwa agenda yang dimaksud di atas dibatalkan. Bisa tenang deh. Baru kali ini aku masuk ke Pizza Hut dan makan di sana. Tapi kalau makan produknya sih pernah, dulu. Sudah lama banget sih, waktu masih SMP kalau tidak salah. Waktu belum ada mall di Tegal. Waktu Tegal belum seramai sekarang. Waktu itu ayahku beli dari Cirebon (padahal beliau tidak suka lho), kota terdekat dari Tegal yang ada mall-nya kala itu. Sampai rumah, ya ..., begitu lah. Baru kerasa bedanya pas makan kali ini. Enak sih..., tapi jangan dibiasakan lah. Tidak baik. Makan di McDonalds pun aku baru satu kali, di Jogja bersama teman-teman pas mau UM-UGM. Kalau KFC sih lumayan sering dulu, bareng teman-teman juga, dan makan di KFC terakhir kali sekitar satu setengah tahun lalu. Aku tidak pernah makan bersama keluarga di tempat seperti itu, seingatku. Makan makanan seperti ini memang bukan budaya keluargaku. Kami lebih menyukai makanan lokal, terutama Jawa. Lha wong waktu keluarga melancong ke Bandung aja lebih mengutamakan makan di warung milik orang Jawa. Sampai sekarang pun kami masih suka makan sega lengko, sega langgi, ponggol setan, yang harganya sangat murah sekali. Dan juga makanan khas Tegal lainnya seperti soto Talang. Kalau ke Solo atau Wonogiri, baru sate kambing khas daerah sana. Beruntung lah aku dilahirkan dan dibesarkan di keluarga yang sederhana, tidak suka hidup berlebih-lebihan. Di Bandung pun aku masih cukup bisa menjaga hati untuk hidup sederhana.

Laptop PS3

Barusan browsing internet nyasar ke artikel yang membahas sebuah produk keren, laptop PS3. Tidak disebutkan nama resminya. Pokoknya produk ini merupakan hasil kloning antara laptop dan Sony PlayStation 3, buatan Ben Heck^[1]. Katanya sih saat ini cuma ada satu buah saja di bumi tempat kita berpijak ini. Produk ini dilelang di eBay dan saat artikel ini ditulis, tawaran tertinggi adalah US $ 17,300. Berikut ini spesifikasi singkatnya:

• Original backwards compatible 60GB model
• 17-inch LCD HDTV screen: 720p
• HDMI-DVI connection
• Built-in keyboard, USB ports, stereo speakers, headphone jack
• Size: 17 x 13.75 x 3-inches
• Weight: 16 pounds!

Untuk melihat lebih banyak gambar dan video produk ini, kunjungi halaman ini. Produk ini masih relatif baru. Sebelumnya Ben Heck sudah membuat laptop Wii dan laptop Xbox 360. Tapi aku tidak tahu apakah dulu kedua produk tersebut juga dilelang/dijual atau tidak. Ayo, adakah yang ingin laptop PS3 terdampar di Indonesia? Menangkan lelangnya dong sebelum ditutup, nanti kita main bersama deh. PS3 asli saja aku belum pernah melihatnya langsung.

---

[1]	Ben Heck itu nama orang, bukan nama pabrikan.

Sentuhan Pertama dengan AJAX: Mengirim Data ke Server dengan Method GET

Setelah kita selesai ta'aruf beberapa waktu yang lalu, kita lanjutkan proses ke khitbah dan proses inti. Untuk melakukannya kita harus mempunyai kemampuan dasar (minimal mengerti lah) pemrograman web, yaitu HTML, JavaScript, dan bahasa server scripting seperti PHP. Dalam kehidupan nyata sangat diperlukan juga CSS dan DBMS seperti MySQL dan PostgreSQL. Walaupun singkatan dari AJAX ada kata XML, kita tidak harus menguasainya. Jika sudah siap, nyatakan bahwa kita telah menguasai kemampuan dasar tersebut dan siap melanjutkan proses. Dengan demikian, AJAX pun akan menerima kita. Setelah proses di atas selesai, sekarang kita akan menyentuh AJAX untuk pertama kali. nya adalah text editor (misal Notepad++, VI, dan gEdit), internet browser Siapkan peralatan-peralatan yang diperlukan. Peralatan wajib(lebih baik gunakan beberapa internet browser populer untuk uji coba, misal Mozilla Firefox, Internet Explorer, Opera, dan Safari), web server (misal Apache dan Tomcat), dan bahasa server scripting (misal PHP, ASP, dan JSP). Silakan tambahkan sendiri peralatan lainnya sesuai selera. Sekarang kita benar-benar siap untuk menjelajahi AJAX. Contoh pertama, kita belum berhubungan dengan DBMS. Bukan pula hello world atau halo dunia. Kita akan membuat halaman web untuk menerima masukan dan langsung menampilkannya di halaman yang sama. Metode pengiriman data kali ini menggunakan GET. Pertama, kita siapkan halaman/form HTML untuk menerima masukan dari pengguna dan menampilkan hasil masukannya. Misal namanya input_id.html, kodenya:

<html> <head> <title>Hafni Syaeful Sulun | Tutorial AJAX | Mengirim Data ke Server dengan Method GET</title> <script type="text/javascript" src="ajaxscript.js"></script> </head> <body> <form name="form_input_id" method="get" action="javascript:input_id()"> <table> <tr> <td>Nama:</td> <td><input type="textbox" name="nama" /></td> </tr> <tr> <td>Jenis kelamin:</td> <td><input type="radio" name="jenis_kelamin" value="Laki-laki" checked>Laki-laki <input type="radio" name="jenis_kelamin" value="Perempuan">Perempuan</td> </tr> <tr> <td>Pendidikan:</td> <td><select name="pendidikan"><option value="SD" selected>SD</option><option value="SMP">SMP</option><option value="SMA">SMA</option></select></td> </tr> <tr> <td><input type="submit" name="submit" value="Submit"></td> </tr> </table> </form> <div id="main"> <!-- layer untuk menampilkan hasil dari AJAX --> Di sini akan ditampilkan hasil input identitas. </div> </body> </html>

Setelah itu, kita beralih ke berkas JavaScript (dalam contoh ini bernama ajaxscript.js) yang akan menghubungkan form tadi dengan berkas yang akan memproses masukan dari form tersebut. Pertama dan yang wajib, kita buat XMLHttpRequest object, yaitu sebuah API yang menyediakan fungsionalitas scripted client untuk transfer data antara klien dan server^[1]. Berikut ini script-nya.

var xmlHttp = GetXmlHttpRequestObject(); // langsung buat XMLHttpRequest object ketika halaman dimuat function GetXmlHttpRequestObject() // fungsi untuk membuat XMLHttpRequest object { try { // Firefox, Opera 8.0+, Safari, Internet Explorer 7+ xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer < 7 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

Fungsi GetXmlHttpRequestObject akan mencoba (try) membuat XMLHttpRequest object. Jika tidak bisa, maka akan membuat ActiveXObject (ini khusus Internet Explorer < 7). Kemudian, kita buat fungsi untuk mengubah bagian halaman tertentu, yang dalam contoh ini layer (div) ber-id "main", ketika request sedang diproses dan sudah selesai. Kita periksa readyState dari XMLHttpRequest object. Berikut ini nilai-nilai dari readyState: 0 : Request belum diinisialisasi. 1 : Request telah diinisialisasi, dikirim, atau sedang diproses di server. 2 : Response telah diterima klien. 3 : Response sedang diproses klien. 4 : Proses selesai. Kita gunakan readyState 4 saja. Jika bernilai 4, tampilkan hasil request (response). Jika bukan 4, tampilkan keterangan "loading". Eit, memeriksa readyState saja belum cukup karena metode ini hanya akan berhasil jika tidak terjadi kesalahan pada sisi server. Klien tidak mengetahui apakah request telah diproses server atau belum. Untuk memeriksanya gunakan properti status HTTP request--sering lihat kan "HTTP error code 404 object not found" yang mengindikasikan bahwa object/berkas yang di-request tidak ada di server. Untuk keperluan AJAX ini, kita periksa apakah nilainya 200. Properti status ini bernilai 200 jika request telah diproses server. Script-nya:

function stateChanged() // fungsi untuk mengubah bagian halaman ketika AJAX dijalankan { if (xmlHttp.readyState==4 && xmlHttp.status==200) // transfer data klien-server selesai { document.getElementById("main").innerHTML = xmlHttp.responseText; } else // transfer data klien-server belum selesai atau sedang diproses { document.getElementById("main").innerHTML = "Loading..."; } }

Selanjutnya, buat fungsi untuk mengirimkan data ke server dengan method GET^[2]. Script-nya:

function GetAjaxRequest(url) // fungsi GET { xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true); xmlHttp.setRequestHeader("Cache-Control", "no-cache"); // untuk menghindari penggunaan cache browser xmlHttp.send(null); }

Pada script di atas terdapat baris xmlHttp.setRequestHeader("Cache-Control", "no-cache");. Ini bertujuan agar browser tidak menggunakan cache (data temporer yang disimpan di browser). Artinya kita ingin mendapatkan data/halaman yang benar-benar baru dari server. Selain dengan mengeset header Cache-Control, mencegah caching juga bisa dengan menggunakan nilai random yang dimasukkan ke dalam parameter GET seperti berikut:

function GetAjaxRequest(url) // fungsi GET { xmlHttp.onreadystatechange = stateChanged; url += "&sid=" + Math.random(); // untuk menghindari penggunaan cache browser xmlHttp.open("GET", url, true); xmlHttp.send(null); }

Karena dalam form HTML kita menggunakan input radio button, kita harus membuat fungsi untuk mengambil nilai yang dipilih pengguna. Sepengetahuanku ya begini, tidak bisa langsung diambil, harus menggunakan fungsi sendiri. Kalau ada yang tahu cara yang lebih mudah, beri tahu aku ya.

function radio_value(radio) // fungsi untuk mengambil nilai dari radio button { for (i=0; i<radio.length; i++) { if (radio[i].checked) return radio[i].value; }

Sekarang buat fungsi yang memproses form. Script-nya:

function input_id() { // berkas PHP yang memproses form plus parameter GET var url = "input_id_action.php" + "?submit=Submit" + "&nama=" + encodeURI(document.form_input_id.nama.value) + "&jenis_kelamin=" + encodeURI(radio_value(document.form_input_id.jenis_kelamin)) + "&pendidikan=" + encodeURI(document.form_input_id.pendidikan.value); GetAjaxRequest(url); }

Script di atas akan mengirimkan nilai-nilai dari form ke berkas input_id_action.php. Sama kan metodenya dengan metode pengiriman form langsung ke berkas PHP tanpa AJAX, yaitu dengan menuliskan parameter dan nilainya di belakang URL? Nah, terakhir kita buat berkas PHP yang akan memproses nilai-nilai yang dikirimkan (dalam contoh ini bernama input_id_action.php). Kodenya:

<?php if (isset($_GET['submit'])) { extract($_GET); echo " Nama: " . $nama . "<br /> Jenis kelamin: " . $jenis_kelamin . "<br /> Pendidikan: " . $pendidikan; } ?>

Referensi XMLHttpRequest bisa didapatkan di sini. Demo tutorial ini bisa dilihat di sini. Kode sumber tutorial ini bisa diunduh di sini.

---

[1]	Definisi dari www.w3.org.
[2]	Method yang tersedia untuk XMLHttpRequest object ini adalah GET, POST, HEAD, PUT, DELETE, dan OPTIONS.

Ta'aruf dengan AJAX

Artikel ini merupakan artikel singkat mengenai ta'aruf atau berkenalan teknologi AJAX. Sasaran artikel ini adalah para pemula. Untuk para ahli, boleh baca, tapi beri komentar ya, barangkali ada kesalahan, atau mungkin malah kebenarannya mau dikomentari. AJAX itu singkatan dari Asynchronous JavaScript and XML. AJAX bukan bahasa pemrograman, melainkan teknik baru dalam menggunakan bahasa-bahasa yang sudah ada (dan intinya adalah JavaScript). Seperti kita ketahui, aplikasi desktop lebih bersahabat (user-friendly) daripada aplikasi web. Yang paling terasa adalah dalam hal respon oleh sistem (server kalau dalam aplikasi web). Aplikasi desktop lebih peka terhadap rangsang, tidak seperti aplikasi web (loading-nya lama). Nah, untuk mengatasi hal ini, maka digunakanlah AJAX. Dengan AJAX, kita bisa membuat aplikasi web menjadi lebih baik, cepat, dan bersahabat. Katanya, AJAX ini dipopulerkan oleh Google pada tahun 2005 melalui aplikasi Google Suggest. Bagi kamu yang belum tahu contoh aplikasi yang didukung AJAX, sebaiknya lihat dulu deh. Ini nih yang mendasari populernya AJAX. Dalam website tradisional, jika kita ingin mendapatkan informasi dari basisdata atau berkas pada server, atau mengirim informasi kepada server, kita harus membuat form HTML dengan metode GET atau POST data ke server. Pengguna harus menekan tombol "Submit" untuk mengirim atau memperoleh informasi, menunggu server meresponnya, kemudian halaman baru akan ditampilkan sebagai hasilnya. Karena server mengembalikan halaman baru setiap kali pengguna mengirimkan form, aplikasi web tradisional berjalan lambat, bahkan terkesan tidak ada respon (tidak user-friendly). Dengan AJAX, JavaScript yang dibuat bisa berkomunikasi langsung dengan server melalui JaavaScript XMLHttpRequest object. Dengan HTTP request tersebut, halaman web bisa request ke web server dan juga mendapatkan respon dari web server tanpa memuat halaman kembali. Pengguna akan tetap berada di halaman yang sama dan dia tidak akan menyadari bahwa script meminta halaman atau mengirim data ke server secara background (tidak terlihat). Berikut ini ringkasan kelebihan AJAX:

1. Tidak perlu memuat halaman secara utuh sehingga lebih cepat.
2. Lebih user-friendly.
3. Platform independent (bisa digunakan di server dan browser (terkini) apa pun).

Dan berikut ini ringkasan kekurangannya:

1. Browser tidak memberikan keterangan bahwa browser sedang melakukan proses, karena proses terjadi di background. Hal ini bisa diatasi dengan membuat sendiri keterangan tersebut (misalnya progress bar) dari sisi aplikasi kita.
2. Browser tidak menyimpan browsing history lengkap (karena pengguna tetap berada dalam satu halaman, tidak berpindah ke halaman lain), sehingga pengguna kesulitan untuk kembali ke "halaman" sebelumnya. Bisa diatasi juga, dengan membuat sendiri (lagi) script kembali ke halaman sebelumnya.

Kita baru saja selesai ta'aruf. Tidak usah lama-lama ta'aruf itu. Selesai ta'aruf bukan berarti kita boleh bersentuhan dengannya sekarang. Sabar dan jagalah hati (berpuasalah bila perlu). Kita harus meng-khitbah-nya terlebih dulu, kemudian prosesi inti, baru boleh diubek-ubek. Jadi, tunggu artikel selanjutnya. Insya Allah tidak sampai satu pekan dari sekarang. Tetap semangat, tetap istiqomah, biar tetap bisa berkontribusi untuk teknologi Indonesia.