Sejak gue posting cara menangkal hacking* di multiply, kayaknya ada aja orang yang malah jadi gatel ingin "jajal ilmu" di MP gue. Serasa dukun buka praktek nih, dijajal sama orang-orang yang merasa ilmunya lebih tinggi... hehehe...

Padahal, asal tau aja ya, wahai para hacker cap kepinding, nyampah di MP dengan bikin deface itu sama sekali nggak ada gunanya, karena:

1. Kalo tujuan kalian agar nampak jago, nggak akan berhasil - karena teknik ini teknik pemula BANGET.
2. Kalo tujuan kalian agar nampak lucu, juga nggak akan berhasil - karena ini sama sekali nggak lucu.
   
3. Apalagi kalo tujuannya untuk bikin susah orang, nggak akan berhasil karena cara menangkalnya gampang banget.
   

Tapi gue yakin, sebagaimana Tuhan telah menciptakan cacing, kutu busuk, belatung nangka, atau kecoa, tidak ada ciptaan-Nya yang ada dengan sia-sia. Pasti semua hal ada manfaatnya, termasuk keberadaan kalian, para hacker cap kepinding. Buat gue, manfaatnya adalah bisa jadi bahan posting yang mudah-mudahan berguna buat orang banyak. Lumayan lah buat naikin pageload...

Ok, mari kita mulai.

CARA MENGHAPUS DIALOG BOX NGESELIN

Setelah tren deface dengan membuat div ukuran raksasa yang menutupi halaman, sekarang ada tren baru yang lebih ngeselin yaitu memunculkan dialog box di halaman yang di-deface tsb. Dialog boxnya dilengkapi dengan tombol "OK" yang kalo diklik akan memunculkan dialog box baru, terus-terusan. Padahal, selama dialog box ini muncul di layar, kita nggak bisa mengklik benda lainnya; sehingga kita nggak mungkin menghapusnya dengan cara mengintip page source seperti dulu.

Dialog box ini muncul karena ada sebuah script yang dimasukkan ke kolom reply, lewat perantara perintah "object". Sebenernya teknik ini bermanfaat buat yang mau punya shoutbox seperti yang pernah gue posting di sini. Tapi di tangan hacker cap kepinding malah cuma bikin sebel orang lain.

Sebenernya untuk menangkal script, kita bisa aja menon-aktifkan seluruh script dari pilihan 'option' di browser atau dengan menggunakan add-on "no-script" untuk mozilla firefox. Masalahnya; kalo kita menon-aktifkan script, kita nggak akan bisa login ke MP! Coba aja non-aktifkan script dan coba login ke MP, maka akan muncul warning "javascript must be enabled to login".

Jadi, gimana dong?

Untunglah ada add-on lain buat firefox yang bernama "adblock plus". Fungsi utama add-on ini sebenernya adalah untuk mencegah iklan muncul, tapi karena pada prinsipnya dia mampu memblokir semua jenis script, gambar, dan file-file multimedia, maka bisa kita manfaatkan untuk membenahi halaman yang kena deface.

Caranya adalah;

1. Download dan install Adblock Plus. Tentunya untuk bisa menginstall Adblock Plus kalian harus pake browser Mozilla Firefox ya. Setelah terinstall dengan baik, akan muncul logo Adblock Plus warna merah di sebelah kanan atas browser.
   
2. Buka halaman yang kena deface. Perhatikan dialog box yang muncul Biasanya di bagian atas dialog box akan tertulis di mana lokasinya, misalnya "http://images.dedemitmaya.multiply-...dst dst". Alternatifnya, dari message board juga kelihatan siapa pereply terakhir di halaman tersebut.  Biasanya, walaupun nggak selalu, pereply terakhir adalah pelakunya.
3. Berhubung dialog box ini biasanya akan bikin browser lo nge-hang, maka lo harus ber-"ctrl+alt+del" untuk menutup browser. Setelah ditutup, buka lagi browsernya tapi JANGAN masuk ke halaman yang kena deface. Kalo langsung masuk ke sana lagi, ya akan hang lagi - percuma aja kan.
   
4. Klik panah kecil di sebelah kanan logo Adblock Plus, dan pilih "Preferences..."
   
5. Klik "Add filter..." dan ketik "http://images.[ nama pelaku ].multiply.com/*" Tentunya lo harus mengganti [ nama pelaku ] dengan username si hacker cap kepinding yang telah mampir di halaman lo. Jangan lupa bubuhkan tanda bintang / asterisk ( * ) di belakang link karena itu berarti semua file yang berasal dari link tersebut akan kena block. FYI, semua file attachment atau MP3 yang lo upload ke MP akan masuk ke directory "http://images.[username].multiply.com" - termasuk file  script yang digunakan untuk merusak halaman lo.
6. Klik OK.
7. Nah sekarang buka halaman yang kena deface. Dialog box nggak akan muncul lagi, dan lo bisa melanjutkan proses pembersihan dengan mengikuti langkah-langkah yang udah gue posting di sini.
   
8. Jangan lupa laporkan si pelaku ke admin MP dengan mengklik link "http://multiply.com/info/inquiry?report_user=[ nama pelaku ]" Sebagai permulaan, kalian bisa mulai dengan mengklik http://multiply.com/info/inquiry?report_user=dedemitmaya yang hari ini udah 'berkreasi' di beberapa account dengan metode belajarannya itu.
   

Selamat mencoba.



*sebuah istilah yang kurang tepat karena biasanya yang dilakukan hanya deface tingkat sederhana banget.

gambar gue pinjem dari noisebot.com

Beberapa hari yang lalu, temen gue yang orang HRD dateng ke meja gue dengan wajah desperado.

"Gung, tau gimana cara ngontak Gede Prama nggak? Kita mau undang dia untuk jadi pembicara nih..."
"Nggak tau. Cari dong di google."
"Udah, nggak ada."
"Nggak mungkin."
"Bener! Gue udah cari berhari-hari, ketemunya cuma artikel-artikelnya doang. Alamat sama nomer telepon nggak ada."
"Kalo gue bisa nemuin, dapet apa?"
"Dapet... ucapan terima kasih serta doa semoga sukses selalu deh."
"Ya udah sini gue cariin. Pasti ketemu deh."
"Nggak mungkin, orang gue udah cari..."
"Pasti ada. Nanti kalo udah ketemu gue kasih."

Guepun memulai pencarian. Langkah pertama, tentunya, adalah keyword utamanya yaitu "Gede Prama". Hasilnya memang seperti kata temen gue itu: hanya memunculkan tulisan-tulisannya aja tanpa mencantumkan alamat atau nomer telepon.

Berikutnya gue coba berbagai variasi keyword, seperti "Gde Prama"  "Gedeprama"  "GdePrama"  "Prama"  "Prama Gede"  "Prama Gde"  dan  "Pramagde". Semuanya nihil. Demikian juga dengan "telepon Gede Prama"  "telefon Gede Prama"  "contact Number Gede Prama"  "Kontak Gede Prama"  "Hubungi Gede Prama"  "Hub Gede Prama"  "HP Gede Prama"  "Alamat Gede Prama"  dan semua variasinya.

What happened with you sih, Pak Gede? Orang yang pernah dapet julukan "begawan bisnis Indonesia" masa sampe nggak tertangkap di hasil pencarian google? Bahkan websitenya www.gedepramaideas.com juga udah mati.

Tadinya mau nyerah aja, toh ini bukan kerjaan gue. Tapi pikir2, masa iya sih cuma nemuin Gede Prama aja nggak berhasil? Hmm.. di sini gengsi mulai angkat bicara.

Gue coba cara lain. Salah satu hasil pencarian google menunjuk pada blog berjudul Andie Stuff, yang punya section khusus untuk tulisan2 Gede Prama. Dari situ juga gue comot foto Gede Prama yang jadi hiasan posting ini.

Gue telepon Mas Andie, sang pemilik blog. Barangkali dia kenal langsung dengan Gede Prama.

"Wah saya nggak tau teleponnya Pak Gede Prama," kata Mas Andie, "Tapi mungkin Radio Smart FM tau. Kayaknya Pak Gede Prama pernah bawain acara di sana."

OK, target berubah, gue pake google untuk cari nomor telepon SmartFM. Kali ini jauh lebih gampang.

"Oh kita nggak tau nomer telepon Gede Prama," kata mbak-mbak yang nerima telepon gue, "Dia udah nggak ngisi acara di sini lagi sih." Trus, kalo udah nggak jadi pengisi acara, catatan nomer teleponnya dibuang ya mbak? Atau dibakar?

Gue coba media lain. Kebetulan yang muncul teratas di pencarian Google adalah Tempo. Gue nelepon ke redaksinya.Yang nerima terdengar seperti ibu-ibu.

"Selamat sore bu, saya mau mohon informasi, gimana caranya mengontak Pak Gede Prama ya?"
"Gede Prama? Di sini nggak ada pegawai yang namanya itu."
"Ya memang bukan pegawai Tempo bu, tapi pembicara motivasi. Pernah nulis di Tempo juga kok."
"Oooo... nggak tau saya, nggak kenal."

Nampaknya pamor sang begawan bisnis Indonesia bener-bener meredup belakangan ini.

Gue coba majalah Swa. Kali ini tersambung dengan orang yang jauh lebih penolong.

"Ya memang Pak Gede Prama pernah nulis di Swa, tapi belakangan udah jarang. Ini nama dan alamat kantornya ya pak," kata mbak-mbak yang nerima telepon gue sambil menyebutkan sebuah perusahaan bernama Promaster beralamat di daerah Benhil.

Bingo!

Langsung gue pencet nomer telepon Promaster pemberian si mbak baik hati dari Majalah Swa.

"Promaster? Apaan tuh pak?" sambutan dari seberang mematahkan semangat gue.
"Ini bukan nomernya kantor Promaster ya mas?"
"Bukan, pak. Ini rumah tinggal."
"Alamatnya bener di jalan anu nomer sekian, Benhil?"
"Betul, pak."
"Ada orang namanya Pak Gede Prama nggak tinggal di situ?"
"Nggak ada tuh! Udah pindah kali pak, mungkin dulunya nyewa di sini, gitu."

Back to square one.

Gue mulai pencarian baru, kali ini dengan keyword "promaster". Hasilnya, sebuah situs milik lembaga training bernama "pro-m" yang lokasinya di... Surabaya. Gede Prama tergusur dari Benhil ke Surabaya? Jauh amat. Gue telepon nomor yang tercantum di situs itu.

"Oh ya... ya... ya... benar pak, kami penyelenggara seminar Pak Gede Prama!" kata mas-mas berlogat Surabaya yang nerima telepon gue.
"Jadi, kalau saya mau mengundang Pak Gede Prama ceramah di kantor saya, melalui Pro-M ini ya mas?"
"Betul Pak, nanti kami bantu menghadirkan!"
"Emangnya Pak Gede Prama sekarang tinggal di Surabaya, gitu?"
"Wuah ganti-ganti Pak, namanya juga orang sibuk... kadang di Jakarta, kadang Surabaya, kadang Bali...beliau kan orang Bali, Pak." Oh really? Dari namanya gue kira Menado.
"Enggak, maksud saya, domisilinya, rumahnya, di mana?"
"Ooo... di Surabaya juga ada pak!"
"Ya udah deh. Kalo saya mau ngundang Pak Gede Prama untuk ceramah di kantor saya, di Jakarta, akhir bulan Januari ini, bisa apa enggak?"
"Saya catat dulu pak tanggalnya, biar nanti saya tanyakan dulu untuk tau jadwal beliau."
"Mas mau tanya sama sapa?"
"Sama sekretariatnya di Jakarta, Pak..."

Dengan kata lain, elu calo, gitu kan? Dari denger nadanya yang terlalu antusias itupun gue udah curiga. Kalo mau nyari tiket mudik Lebaran, baru gue urusan sama calo. Untuk nyari Gede Prama doang mah gue lebih percaya sama Google.

"Sekretariatnya di Jakarta" hmm... ini menimbulkan ide baru buat gue. Berarti si Gede Prama ini punya sebuah perusahaan konsultan sendiri. Berhubung dia adalah "sang begawan bisnis", nggak mungkin dong jabatannya office boy. Pastinya pimpinan. Maka gue search Google dengan keyword "Gede Prama direktur".

Hasilnya, muncul kalimat "Gede Prama Presiden Direktur Dynamic Consulting". Horeee!

Search lagi, keyword "Dynamic Consulting Gede Prama". Hasilnya membawa gue pada sebuah halaman dari websitenya Female Radio yang memuat tulisan Gede Prama. Di akhir tulisan ada sederet kalimat dalam huruf miring:


BINGO!!

Gue cek nelepon ke nomer itu, kali aja udah pindah lagi.

"Iya betul Pak, ini kantornya Pak Gede Prama", kata mas-mas penerima telepon dengan ramahnya.

Langsung gue ambil kertas dan gue tulis gede-gede:

Gede Prama
Dynamic Consulting
Contact Person : Yadi/Henry/Ivan/Ayu, Telp : (021) 7486 3845 atau
SMS : 0813 10727 923.

Gue kasih ke si HRD desperado. "See? Gue bilang pasti dapet, kan?"

Kesimpulannya, tips gue dalam melakukan pencarian informasi lewat Google adalah:

1. Coba semua kemungkinan variasi keyword. Coba juga kemungkinan alternatif penulisan kata.
   
2. Jangan cuma terpaku pada keyword utama, coba juga keyword lain yang mungkin berhubungan.
3. Jangan cuma mengandalkan Google, sekali-sekali perlu juga angkat telepon.
   
4. Yang paling penting: yakin dan berpikir positif, jangan gampang putus asa....
   

Kalo lagi baca novel yang tebel, kita biasanya butuh 'bookmark' untuk pengingat halaman berapa yang terakhir dibaca. Halaman-halaman website juga gitu, bisa dibookmark supaya kapan-kapan kita bisa mampir ke halaman itu lagi.

Dulunya, bookmark cuma ada di browser kita (coba liat bagian atas jendela Internet Explorer atau Firefox, ada menu 'bookmark', kan?). Tapi belakangan, bermunculan situs-situs yang menawarkan fungsi bookmark. Tujuannya supaya para usernya bisa memanfaatkan bookmark-bookmark itu sekalipun nggak lagi make komputernya sendiri - misalnya kalo lagi main ke warnet. Selain itu, manfaat tambahan yang nggak kalah penting adalah; dengan menyimpan bookmark secara online, kita bisa berbagi informasi dengan orang lain.

Di situs del.iciou.us misalnya, kita bisa membangun 'network' dengan meng-add teman2 baru (seperti di Multiply atau Friendster), dan para anggota network tersebut bisa saling intip bookmark masing-masing.

Dengan kata lain, semakin banyak orang yang mem-bookmark (secara online) sebuah halaman web, semakin besar juga peluangnya untuk menarik pengunjung.

Nah, situs "addthis.com" ini membantu para pemilik blog seperti kita untuk memudahkan para pengunjung melakukan bookmarking. Cukup dengan mendaftarkan diri ke sana (yang tentunya gratis), kita bisa dapet sebuah kode html yang bisa dicopy ke halaman multiply kita akan memunculkan tombol bookmark. Kalo para pengunjung lo suka dengan informasi di blog lo, mereka tinggal klik tombol itu dan selanjutnya bisa pilih, mau dibookmark di situs bookmarking yang mana.

Memang sih, pihak Multiply udah menyediakan fungsi serupa berupa link "share" di bagian bawah setiap posting... tapi linknya kecil dan nggak menarik, kemungkinan besar akan terlewatkan oleh para pengunjung. Dengan "addthis", kita bisa naro tombol yang lebih menarik untuk diklik.

Situs ini menyediakan 2 jenis tombol, versi image dan versi javascript. Berhubung javascript diharamkan di multiply, maka lo bisa pilih tombol yang versi image. Copy - paste kode tombol tersebut di akhir setiap posting, maka halaman lo akan lebih mudah untuk dibookmark oleh pengunjung. Khusus untuk posting journal, lo harus klik "view source" dulu sebelum paste kode HTML tombolnya, ya.

Selamat mencoba, silakan tes tombol addthis gue di sebelah kanan bawah halaman ini. Itu lho, yang ada tulisan "bookmark".

Pepatah mengatakan, "Orang pintar belajar dari pengalamannya sendiri, orang bijak belajar dari pengalaman orang lain." Dengan posting ini, gue telah memberikan kesempatan bagi kalian semua untuk menjadi orang bijak dengan cara belajar dari kesalahan gue. Jadi ini bukanlah tutorial, tapi sekedar sharing pengalaman. Selamat menikmati.

Berawal dari keseriusan Ida berbisnis kue, dan berakhir pada tuntutan untuk punya website sendiri, maka dengan segala keterbatasan pengetahuan gue mencoba membangun kotakkue.com, website khusus buat jualan kuenya Ida.

Ide awalnya, website ini harus mampu untuk:

1. Diupdate secara gampang dan cepat oleh orang yang buta sama sekali soal HTML
2. Bisa interaktif dengan pengunjung.

Maka nggak bisa enggak, websitenya harus dinamis, dalam hal ini gue memilih PHP (karena gratisan).

Berhubung di luar sana udah banyak banget tutorial PHP yang lebih lengkap dan ditulis oleh orang yang jauh lebih kompeten dari gue, maka di sini gue cuma akan menjelaskan sekilas aja tentang PHP. Selebihnya bisa kalian baca sendiri di link-link di bagian akhir posting ini.

Apa itu PHP?

Jadi begini ceritanya:

Dahulu kala, di awal masa internet, orang baru mengenal HTML (Hyper Text Mark-up Language) sebagai bahasa pemrograman web. Kalo diibaratkan, file HTML ini seperti poster: informasi ditulis ke dalamnya, terus dipasang untuk dibaca orang. Kalo informasi di dalamnya mau diubah, maka pilihannya cuma dua:

1. Informasinya disetip terus diganti dengan informasi yang baru; atau
2. Posternya diganti dengan poster yang baru

Berhubung orang makin butuh informasi yang serba cepat, maka terciptalah bahasa pemrograman web yang lebih dinamis, di antaranya PHP. Selain PHP masih banyak lagi sih bahasa pemrograman web yang lain, tapi berhubung gue cuma ngerti (dikit) PHP dan ASP, sementara untuk make ASP biaya sewa servernya lebih mahal, maka gue pilih PHP.

Kalo tadi HTML file gue analogikan seperti poster yang statis, PHP ini ibarat televisi: bendanya cuma satu dan itu-itu juga, tapi informasi yang dimunculkan bisa ganti-ganti sesuai kebutuhan. Dengan kata lain, PHP ini bekerja dengan dukungan sebuah database. Filenya cuma satu, tapi informasi yang dia munculkan ditarik dari database bernama MySQL.

Seberapa 'sakti'-nya si PHP ini?

Sakti banget. Beberapa ilustrasi potensi penggunaan web berbasis PHP:

1. Kalo elo punya toko di Bekasi, terus buka cabang di Tanjung Priok dan Tangerang, maka lo bisa bikin website di mana para pegawai toko lo bisa menginput laporan penjualan hari ini secara online, sehingga elo bisa mengelola stok secara lebih tepat dan akurat tanpa harus buang waktu, buang ongkos, buang umur kena macet di jalan. .
2. Elo juga bisa bikin website di mana pengunjung bisa mendaftarkan diri jadi anggota, terus masing-masing anggota bisa punya halaman sendiri tempat nulis curhat, masang foto, dan upload lagu... jadi kaya Multiply gitu deh.
3. Lo bisa bikin toko online di mana pengunjung yang mau beli bisa pilih barang cukup dengan klik-klik-klik, uang dikirim, barang diantar, dan elo bisa kaya raya sambil sarungan di rumah.

Beda dengan file HTML yang bisa dibuat dengan diketik di notepad trus disave as HTML trus kalo didouble klik bisa kebuka, PHP hanya bisa jalan di komputer yang telah terinstall dengan Apache Server dan MySQL server.

Mengingat gue sama sekali nggak pernah belajar soal web programing, maka gue sebenernya nggak mudeng dengan segala kode-kode ajaibnya PHP. Untunglah di luar sana banyak orang baik hati yang mau membuat CMS (Content Management System) yang bisa didownload gratisan. CMS ini adalah sebuah file paket (biasanya zip atau rar file) yang kalo diupload ke sebuah server akan simsalabim... berubah jadi website yang canggih. Sangat membantu buat orang2 buta-PHP seperti gue.

Dengan demikian, langkah-langkah untuk mendesain dan mengonline-kan sebuah website PHP dengan bantuan CMS adalah: 

1. Install Apache dan MySQL Server di komputer kita. Dengan bantuan xammp, dua-duanya bisa langsung terinstall dalam 1 langkah.
   
2. Buat database baru di MySQL
3. Unzip paket file CMS
4. Ikuti langkah-langkah installasi di layar, termasuk menginput nama database MySQL yang udah kita buat
5. Simsalabim, website terbangun secara otomatis
6. Kutak-katik tampilan web dengan CSS biar warnanya lebih sesuai dengan pilihan kita
7. Input content website ke dalam database MySQL
8. Upload file PHP dan MySQL server yang udah diutak-atik ke server sewaan, selesai.
   

Pilih-pilih CMS

Dulu waktu gue bikin website Planet Holiday, gue pake CMS bernama Joomla. Sekarang, iseng-iseng browsing around cari CMS baru, kali aja ada yang lebih keren dari Joomla. Setelah ngeliat sana-sini, gue tertarik sama CMS bernama "Drupal" yang konon abis  menang  penghargaan apaaa... gitu sebagai CMS favorit. Maka gue download Drupal, trus melakukan langkah 1 - 5: website default Drupal terbentuk di komputer gue.

Klik punya klik, kayanya gue masih kurang sreg dengan si Drupal ini, maka gue mulai cari-cari lagi. Pilihan jatuh pada Wordpress karena kayaknya CMS yang satu ini laris bener dipake oleh para blogger. Gue coba install, klak-klik-klak-klik... ah masih kurang asoy.

Setelah nyari sana-sini, akhirnya gue lagi-lagi milih Joomla. Memang paket zipnya paling besar kalo dibanding dengan Drupal atau Wordpress; setelah diunzip bisa mencapai 10 MB-an, tapi fiturnya paling lengkap. Kalo toh akhirnya fitur2nya yang banyak itu nggak gue pake, tinggal di-non-aktif aja. Lebih mudah ketimbang gue install CMS yang terlalu simpel terus masih harus browsing sana-sini untuk cari tambahan fitur.

Udah nih, pilihan jatuh pada Joomla, dan gue mulai melakukan proses permak wajah dengan CSS dan input content (langkah 6 dan 7). Berhubung komputer di kamar dijajah istri, maka gue ngerjain pake laptop di ruang tamu. Nyaris seminggu begadang, termasuk meladeni permintaan klien cerewet milih warna dan image background ("aku nggak mau gambar belakangnya gini, kesannya sok eksklusif" - "kok hurufnya kecil amat" - "link yang itu nggak keliatan" dsb dsb). Yah mau gimana lagi, klien adalah raja.

...dan kekacauan mulai terjadi

Setelah selesai permak wajah dan input content, gue pindahin seluruh file dari laptop ke flashdisk trus pindah lagi ke komputer di kamar. Sekarang masuk ke langkah 8, upload file CMS dan database MySQL ke server sewaan (gue pake Jagoanhosting.com, murah cuma 20 ribu per bulan dan lumayan kenceng). Lumayan lama juga proses uploadnya, apalagi setelah dipermak dan diinput, ukuran file yang tadinya 10 MB-an bengkak jadi sekitar 12 MB-an.

Sambil nunggu proses upload selesai, gue iseng browsing cari referensi tentang tips mengupload Joomla ke server. Ealaaaa... ternyata ada satu tutorial yang mengajarkan bahwa untuk mengupload file CMS nggak perlu dalam keadaan udah diunzip (yang besarnya 12 MB itu tadi), melainkan cukup upload paket file zip-nya (ukuran sekitar 2 MB), baru nanti diunzip di server lewat control panel!

Maka, pelajaran pertama kita hari ini adalah:
Upload-lah file CMS dalam bentuk paket zip, supaya lebih irit waktu dan tentunya bandwith.

Berhubung udah tanggung, maka gue jabanin aja proses upload file yang 12 MB itu terus berjalan sampai selesai. Abis itu gue create new MySQL database, selesai. Berikutnya utak-atik file configuration biar file PHP-nya bisa mengenali database MySQL-nya di rumah yang baru, selesai.

Setting udah gue ubah, seharusnya sih website udah langsung online, tapi... lho... kok, malah muncul halaman error? Katanya:

    ERROR: blablabla... file globals.php not found blablabla..    .

...atau dengan kata lain, server menuduh gue kelupaan nggak mengupload file globals.php, sebuah file yang vital untuk menjalankan website gue.

Lewat FTP program gue telusuri satu-satu file yang udah gue upload ke server. Lha itu, ada kok file bernama globals.php... gimana sih?

Gue coba refresh, dan...

    ERROR: blablabla... file globals.php not found blablabla..    .

NOT FOUND GIMANA SEEEEH... ORANG UDAH JELAS-JELAS ADA GITU LOH, NGGAK PUNYA MATA YA?

Saking sebelnya gue sampe ngomong sendiri ke layar monitor di tengah malam buta. Ya iyalah, server mana punya mata...

Sampe subuh gue utak-atik, coba refresh bolak-balik, nggak berhasil juga. Sampe gue delete semua file yang 12 MB itu tadi, dan gue upload ulang, tetep aja nggak berhasil. Sial bener.

Besokannya gue tanya temen2 gue yang web-programmer betulan di kantor (kalo gue kan jadi2an), kata mereka "coba aja upload ulang filenya". Udah, tauuuuu!

Pulang kantor, gue kembali melototin monitor. Apa sih yang salah? Gue coba upload ulang file paket zip Joomla yang asli ke server, gue unzip di sana, trus gue perhatiin satu-satu. Hmmm... kayaknya gue mulai nemu kesalahannya di mana.

Harusnya, kalo kita mengcopy sebuah file ke dalam folder, dan di folder itu udah ada file dengan nama yang sama, maka seharusnya file yang baru akan menimpa (overwrite) file yang lama, kan? Tapi ternyata, itu nggak terjadi di server gue. Jadi ada file index.php, berjejeran dengan INDEX.PHP. Ada globals.php, juga ada GLOBALS.PHP. Jadi.... ya ampuuun... ternyata nama file di server itu case-sensitive, alias membedakan nama file berdasarkan huruf besar dan kecil!

Pelajaran ke dua kita hari ini adalah:
Server linux, yang merupakan turunan dari server unix, itu case-sensitive, jadi perhatikan nama file jangan sampe keliru naro huruf besar dan kecil.

Yang gue masih nggak ngerti sampe sekarang adalah, kenapa nama2 file yang tadinya huruf kecil semua waktu diolah di laptop, bisa mendadak berubah jadi huruf besar semua waktu dipindah ke komputer di kamar. Ada yang tau?

Langkah berikutnya, mengupload database MySQL ke server. Dari laptop udah gue 'dump' (export) datanya, terus gue copy paste ke server lewat aplikasi PHPMyAdmin. Adan... error lagi. Katanya:

    ERROR: table name wp_links is invalid blablabla

Loh kok, ada tabel berawalan 'wp' sih? Bukannya database Joomla biasanya berawalan 'jos'??
Setelah gue inget-inget lagi... ya ampun, rupanya waktu gue coba-coba CMS Drupal dan Wordpress kemarin ini, databasenya kecampur-aduk di database Joomla gue - sehingga waktu diupload ke server yang menjalankan website Joomla, jadinya malah error.

Terpaksa deh nyari kutu, nelusurin satu per satu databasenya dan ngedeletin table2 yang nggak berhubungan dengan Joomla.

Pelajaran ke tiga kita hari ini adalah:
Kalau mau nyoba aneka CMS, pastikan masing-masing terkoneksi ke database yang terpisah, biar nggak kusut!

Begitulah sharing pengalaman gue hari ini, yang berakhir dengan happy-ending karena sekarang website kotakkue.com udah online dengan suksesnya. Pesan moralnya adalah, buat kalian yang bernasib sama seperti gue, yaitu nggak punya latar belakang pendidikan web-programming tapi ingin punya website sendiri, jangan putus asa - sekarang udah banyak paket-paket CMS gratisan yang gampang untuk dijalankan. Pasti bisa kok, asal rajin aja browsing2 nyari referensi. Tetap semangat! :-)

Referensi soal PHP dan CMS-nya yang ditulis dalam bahasa Indonesia

1. Komunitas Joomla Indonesia
   
2. Dapur Hosting - selain menyediakan layanan web-hosting juga punya banyak tutorial
   
3. Aminudin.net - blog pribadi yang punya tutorial Joomla
   
4. Rumahweb.com - aneka tutorial PHP dan Joomla
   

Udah setahun lebih gue hidup paceklik di kantor karena nggak bisa buka MP... dan hari ini penderitaan gue sedikit terobati berkat Google XHTML search!

Sebelumnya gue udah nyoba aneka situs anonymous proxy, tapi gagal karena situs anonymous proxy-nya juga diblok oleh IT kantor. Tapi dengan Google XHTML search ini, semua situs yang 'terlarang' bisa diakses - walaupun tampilannya nggak seperti aslinya.

Contohnya bisa dilihat pada gambar, itu adalah tampilan halaman muka Mbot's HQ kalo diakses pake Google XHTML: plain tanpa hiasan apapun. Kelemahan lainnya adalah, dia juga nggak bisa mengakses seluruh situs yang harus diakses menggunakan username dan password seperti webmail atau friendster. Untuk MP, dia nggak bisa membawa kita masuk ke message board, tapi lumayan bisa baca2 reply yang masuk di posting terakhir. Segini aja udah cukup membahagiakan kok buat gue!

Cara makenya gampang, tinggal masuk ke situs Google XHTMl (klik link di awal posting ini) lalu masukkan alamat website yang dituju. Klik search, lantas seperti biasa akan muncul hasil pencarian. Nah, klik deh link yang ada di hasil pencarian tersebut. Gampang kan?

Contoh kasus*:
Eriq sangat menggemari posting-posting yang dibuat oleh Chika di multiply. Eriq lalu mengirimkan invitation kepada Chika agar mau menjadi contact-nya; dengan tujuan agar kalo Chika membuat posting baru, Eriq bisa mendapatkan pemberitahuan via e-mail alert. Tapi sayang disayang, invitation tersebut ditolak (declined) oleh Chika. Eriq menjadi frustrasi dan malas pulang ke rumah.

Seandainya Eriq tau tentang Feed RSS, ia tidak perlu frustrasi.

Apa itu Feed RSS?
RSS adalah singkatan dari 'Really Simple Syndication', sebuah fitur yang memungkinkan kita untuk membaca 'ringkasan' update sebuah website. Gue nggak akan bahas detil teknisnya secara terlalu mendalam, karena:

1. Gue takut penjelasan teknis tersebut terlalu rumit sehingga kalian akan pusing dan kurang mengerti.
2. Gue sendiri juga nggak ngerti detil teknisnya, hehehehe...

Pokoknya gini: situs yang menyediakan fasilitas Feed RSS akan punya sebuah halaman yang isinya kumpulan update terakhir yang baru ditambahkan ke dalam situs tersebut. Multiply termasuk yang menyediakan fasilitas Feed RSS ini. Kalo kalian mau liat Feed RSS sebuah account di multiply, linknya adalah:


Tinggal ganti 'username' dengan Multiply ID masing-masing. Bahkan, isi message board multiply juga ada Feed RSS-nya lho! Kalo mau liat, klik aja link 'RSS Info' di sebelah kanan atas message board lo.

Dengan menggunakan Feed Reader, kita bisa mengikuti perkembangan update sebuah situs tanpa harus berkunjung ke situs tersebut.

Apa itu Feed Reader?
Feed Reader adalah aplikasi yang bisa membaca Feed RSS. Ada berbagai jenis Feed Reader, silakan pilih dari berbagai opsi berikut ini:

:: melalui e-mail
Ada beberapa situs yang menyediakan layanan Feed RSS via e-mail, antara lain R-mail.org dan Feedblitz.com. Yang perlu lo lakukan hanyalah berkunjung ke situs-situs tersebut, register alamat e-mail lo, masukin alamat RSS Feed yang lo mau (contohnya seperti username.multiply.com/feed.rss tadi), dan duduk manis di depan komputer. Nanti kalo ada update baru, lo akan dikirimi notification lewat e-mail, mirip dengan fasilitas e-mail alert dari multiply! Bedanya adalah: kalo e-mail alert dari multiply memuat seluruh isi posting secara lengkap, sedangkan kalo Feed RSS biasanya hanya cuplikan / paragraf pertama aja. Promosi: kalo mau langganan Feed RSS untuk Mbot's HQ, klik aja di sini. Di halaman yang terbuka nantinya lo bisa masukkan alamat e-mail lo, plus kode verifikasi yang udah disediakan, trus tunggu e-mail konfirmasi muncul di inbox lo.

:: melalui aplikasi / software
Software gratisan yang gue pake untuk membaca feed adalah Feed Reader 3. Lo tinggal mampir ke situsnya, download softwarenya, trus input alamat Feed RSS yang mau lo monitor. Besok-besoknya lo tinggal jalanin aplikasi ini, dan update terbaru bisa lo baca di dalam aplikasi ini. Denger-denger aplikasi e-mail Thunderbird bisa ditambahi add-on untuk membaca Feed RSS, tapi gue sendiri belum pernah coba. Ada yang punya pengalaman nyoba Feed RSS di THunderbird?

:: melalui online Feed Reader
Tipe yang ini adalah situs yang bisa 'menangkap' update di Feed RSS dan menampilkannya secara online. Jadi lo daftar dulu jadi anggota di situs ini, trus lo harus login dulu di sini untuk membaca kumpulan Feed lo. Memang kurang praktis kalo dibandingkan dengan 2 cara sebelumya, tapi minimal lo udah mengirit waktu karena cukup dengan berkunjung ke satu situs, lo udah bisa baca update dari beberapa situs yang lo monitor feed RSS-nya. Situs yang menyediakan layanan online Feed Reader antara lain Google Reader dan Bloglines. Ini cuma contoh lho, karena di luar yang dua ini masih buanyaak lagi lainnya.

Nah dengan banyaknya pilihan memanfaatkan Feed RSS ini, nggak perlu pusing soal 'add as contact' kan? Feed aja!


*Penggunaan nama hanya untuk keperluan ilustrasi belaka dan tidak menggambarkan kejadian yang sesungguhnya.
Image: screen capture Feed Reader 3
Penjelasan lebih lanjut tentang Feed RSS bisa dibaca di sini.

Berhubung gue udah lumayan sering mendapat pertanyaan sejenis, maka jawabannya gue tulis di posting aja deh. Semoga membantu.

Cara membuat polling / survey di journal

1. Dari message board, klik 'post' > 'blog'.
2. Halaman compose blognya akan berbentuk seperti ini. Untuk mempermudah, gue tambahkan nomor urut dari kiri ke kanan. Klik tombol di atas nomor 13.
   
   
   
3. Setelah diklik, maka halaman composenya akan berbentuk seperti ini:
   Isi pertanyaan dan alternatif jawabannya di tempat yang telah disediakan.

Beberapa hal yang perlu lo tau tentang polling multiply:

• Polling hanya bisa dibuat di sction blog / journal, nggak bisa dibuat di section reviews, photos, links, atau lainnya.
  
• Semua journal yang dilengkapi dengan polling akan ketambahan tulisan *(poll)* di bagian subjectnya (bila dibaca dari message board).
  
• Sebuah polling maksimum hanya memiliki 10 alternatif jawaban dan minimal 2 alternatif jawaban.
  
• Begitu journal yang telah dilengkapi polling telah disave, walaupun hanya di draft (belum published) polling di dalamnya tidak bisa dihapus / diedit. Oleh karena itu, hati2 dalam membuat pertanyaan / alternatif jawabannya, sebab kalo salah nggak bisa dibetulin lagi Contoh polling dengan alternatif jawaban yang kurang lengkap dan bikin nyesel karena nggak bisa diedit lagi bisa diklik di sini.
  
• Dulu, yang bisa mengisi polling di multiply hanya user multiply saja (harus login dulu). Sekarang, semua orang bisa ikut isi polling walaupun belum join multiply.
  
• Berkaitan dengan poin di atas, maka dengan sedikit trik yang sederhana, seseorang bisa mengisi polling berulang kali (caranya nggak perlu gue jelaskan di sini, sebab nanti bikin orang jadi iseng ingin nyoba dan mengacau polling2 yang udah ada).
  
• Oleh karena itu, hasil polling jangan terlalu dianggep serius karena belum tentu akurat.
  

Selamat membuat polling!

Satu hal yang menjadi kelebihan sekaligus kekurangan nge-blog di Multiply adalah: semangat inovasinya yang (kelewat?) rajin.

Mungkin sebagian di antara kalian udah tau, bahwa baru-baru ini Multiply kembali meluncurkan fitur baru yaitu "HTML checker" (selengkapnya bisa dibaca di sini).Intinya, fitur ini bertujuan 'membantu' para user yang mau mengedit script HTML welcome page-nya agar tidak melakukan kesalahan, yaitu bila user lupa menambahkan tag penutup, maka Multiply akan menambahkan tag penutup secara otomatis.

Buat yang udah familiar dengan HTML tentunya tau bahwa perintah2 di HTML punya tag pembuka dan penutup, misalnya perintah untuk membuat tulisan bold dibuka dengan tag <b> dan ditutup dengan tag </b>. Nah, dengan fitur baru ini, bila user membuat sebuah tag pembuka tapi nggak memberikan tag penutup, maka sistem Multiply akan secara otomatis menambahkannya dalam script.

Repotnya, fitur baru ini nggak berhenti sampai di situ doang. Dia juga dengan rajinnya menambahkan kode <br> di dalam script bila kita membuat line break saat menulis script. Maksudnya gini:

Kalo kita menulis script HTML sebagai berikut:

<b>
Halo-Halo
<i>
Bandung
</i>
</b>

Yang seharusnya menghasilkan tulisan sebagai berikut:

Halo-Halo Bandung

Maka dengan fitur baru ini, Multiply akan menambahi script kita dengan <br> di tempat-tempat yang menurutnya seharusnya diisi dengan line break secara semena-mena menjadi

<b><br>
Halo-halo<br>
<i><br>
Bandung<br>
</i><br>
</b><br>

Yang akan memotong / mengacaukan tulisan menjadi

Halo-halo

Bandung

Kalo masalahnya cuma tata letak sih paling cuma sedikit mengganggu pemandangan ya, tapi kalo urusannya udah menyangkut javascript, kode-kode <br> yang muncul secara tidak semestinya itu bisa mengacaukan / merusak jalannya program - dan ini menjengkelkan banget buat para user yang udah kadung naro aneka jenis script di halaman Multiply - seperti gue, misalnya. Udah beberapa hari ini gue bete berat ngeliat halaman depan dan navigasi kanan gue kacau-balau, tapi pas mau ngebenerin... ufff.... udah keburu males liat kode2 ruwet itu. Hmm...ntar2 aja deh benerinnya, kalo lagi kurang kerjaan!

Berita baiknya, elo bisa mencegah fitur HTML checker ini untuk mengacaukan script kalo lo nggak meletakkan satupun line-break dalam script. Jadi tulis script kalian dalam 1 line aja, lurus berjajar ke kanan (seperti yang pernah gue bahas di journal yang ini). Berita buruknya, lo harus mengalokasikan lebih banyak waktu kalo mau ngedit situs multiply lo, karena sekali lo mengklik tombol 'edit' maka proses HTML checking otomatis langsung berjalan dengan cerianya.

So, mau ngutak-atik MP? Hmm... pikir2 dulu deh, daripada nyesel!

*Gambar: script navigasi kanan gue yang kacau balau akibat diisengin sama Multiply.

Portable Application atau biasa juga disingkat "Portable App" adalah software yang bisa digunakan tanpa diinstall. Buat yang familiar dengan OS windows*, tentunya tau bahwa rata2 software jaman sekarang minta diinstall dulu sebelum dipake. Beda dengan software jamannya wordstar dulu, di mana lo bisa bawa-bawa disket berisi program ws yang bisa langsung colok dan dipake di komputer manapun. Sedangkan sekarang, nggak mungkin orang bisa bawa2 MS Word siap pakai dalam disket. Paling-paling yang bisa dibawa adalah installernya, yang harus diinstall dulu sebelum bisa dipake.

Saat lo menginstall sebuah software ke dalam komputer, software tersebut mendaftarkan diri dalam registry. Registry adalah bagian dari operating system yang mencatat dan menentukan seluruh hardware dan software dalam komputer tersebut. Registry, misalnya, menentukan bahwa file yang diciptakan oleh software A bisa diexport untuk dibuka dengan software B. Juga menentukan bahwa file dengan tipe tertentu, saat di-dobel-klik, akan memanggil software tertentu untuk membukanya. Kurang lebih kaya gitulah fungsinya.

Walaupun bertujuan mulia, yaitu agar seluruh aktivitas komputer terintegrasi, kehadiran registry ini bisa menimbulkan masalah juga. Misalnya, waktu lo menguninstall sebuah program, kadang registrynya masih ketinggalan. Kalo lo sering main install-uninstall program, maka registry2 nggak bertuan ini bisa membebani system dan bikin komputer jadi bertingkah aneh. Kadang ada juga registry yang kurang rukun dengan registry lainnya, sering berantem, dan ujung-ujungnya kita juga sebagai user yang harus ketempuhan mondar-mandir ke Dusit Mangga Dua.

Nah, kehadiran Portable Apps ini bisa menjadi solusi yang manis dan realistis** untuk masalah tersebut. Karena bisa langsung dijalanin tanpa install, kita terbebas dari urusan tetek bengek registry. Selain itu kita juga bisa pake program ini di komputer2 yang administrator levelnya dikunci. Biasanya di kantor2 suka gitu tuh, admin levelnya dikunci sehingga para karyawannya nggak bisa seenaknya main install program. Dengan portable apps, itu bukan masalah lagi.

Makin lama makin banyak software ngetop yang memunculkan versi portablenya. Mulai dari browser firefox, e-mail app thunderbird, virus scan clamwin, sampe image editor gimp. Software httrack yang gue link di sini juga ada versi portablenya. Kalo tertarik dengan portable app, di bawah ini gue sertakan juga beberapa link referensinya.

Pertanyaannya sekarang: kalo memang software portable itu lebih praktis dan mekanistis***, kenapa nggak semua software aja dibuat portable? Kan lebih memudahkan buat para user? apakah ada unsur kepentingan dagang si pembuat software, biar program buatannya nggak mudah untuk dibajak? Ada yang tau?

Referensi:

• Thanks to Avron atas pengetahuan barunya tentang Portable Apps.
• Hasil search google atas keyword "Portable Application".
• Pembahasan tentang Portable App di Wikipedia.
• Situs untuk mendownload Free Portable App.
  

*karena software di OS Mac umumnya udah portable, jadi istilah ini lebih umum digunakan untuk software Windows
**kedua kata ini sebenernya nggak ada hubungannya, cuma enak aja karena berima.
***ini juga dua kata yang dijajarkan hanya karena alasan kenyamanan ucap.

Jangan anggap sepele MP kalian. Yang tertuang di sini bisa aja sangat berharga sebagai catatan pribadi, bahkan sebagai portofolio karya. Kita nggak pernah tau kapan account MP ini akan terus eksis. Bisa aja someday situsnya ditutup, atau nggak gratis lagi, atau mungkin diisengin hacker yang lagi jajal ilmu.

Daripada nyesel kemudian nggak ada gunanya, mending mulai dari sekarang dibackup aja deh! Salah satu caranya adalah dengan program HTTrack ini.

Program gratisan ini akan memindahkan seluruh isi website ke dalam harddisk kita, sehingga nanti bisa di-browse secara offline. Tampilannya nanti akan persis sama seperti versi onlinenya, cuma ya akan statis - artinya nggak akan ketambahan reply baru di dalamnya.

Tapi buat yang isi MPnya udah banyak, apalagi kalo banyak fotonya, yah siapin aja space yang cukup di harddisknya. Proses pengcopyan MP gue ini so far udah menghabiskan 172 MB dan udah berjalan non-stop selama 6.5 jam... hehehe... tapi lumayan kan buat ngisi waktu bengong selama long weekend kali ini?

alaupun belum pernah kerja sebagai petugas Helpdesk IT, tapi di kantor yang lama gue bertugas ngurusin website intranet sehingga buat sebagian orang itu nampak sama aja dengan Helpdesk IT. Kadang para regular user ini rada enggan untuk minta bantuan petugas Helpdesk IT dengan alasan suka pada lelet, lambat kalo dimintai bantuan, suka nggak 'dong' kalo diajak ngomong, dll dsb.

Padahal, nggak selamanya kesalahan terletak pada para petugas Helpdesk IT. Kadang usernya sendiri yang menyulitkan para petugas Helpdesk IT untuk memberikan solusi. Karena itulah, di sini gue mencoba sharing tips untuk membantu para petugas Helpdesk IT membantu kita. Kalo mereka bisa menyelesaikan tugasnya secara lebih cepet, kita juga yang akan diuntungkan toh?

Cek dan ricek untuk mengeliminasi semua kemungkinan masalah

Contoh kasus:
Seorang user meminta bantuan gue si petugas Helpdesk gadungan dengan keluhan "Gung, gimana ini komputer gue nggak mau nyala sama sekaliiii..."
"Sama sekali?"
"Iyaaaa... tolonggg..." nadanya panik nyaris histeris. Eh, setelah diperiksa ternyata gara-garanya cuma kabel power yang kendor.

atau,

"Gung ini keyboard gue rusak ya? Dari tadi gue pencet-pencet kok nggak keluar apa-apa di layar..." Eh taunya kabel keyboard kurang nancep.

atau,

"Komputer gue masa dari tadi layarnya item terus nggak keluar windowsnya, gimana iniii..." Eh taunya tombol power di monitor belum dipencet.

Pokoknya sebelum memutuskan untuk panik dan histeris, cek dan ricek semua kemungkinan yang sifatnya mendasar.

Restart, restart, restart

Seperti balsem untuk orang yang mau pingsan, atau air kelapa untuk orang yang keracunan, restart adalah pertolongan pertama buat komputer yang mulai bertindak celeng. Selama komputer lo masih berbasis Windows, sebagian besar masalah bisa diatasi dengan restart. Mulai dari pointer mouse yang berjalan tersendat-sendat, proses data yang lelet, sampe hasil print-out yang berubah menjadi huruf yunani, umumnya bisa beres hanya dengan restart.

Jadi, sebelum bercucuran air mata memanggil petugas Helpdesk IT, coba deh restart dulu komputernya.

Komputer bukan tanaman...

...oleh karena itu nggak perlu disirami.

Kisah nyata: pada suatu hari seorang boss hendak berangkat untuk sebuah perjalanan dinas super-duper penting ke luar negeri. Di malam sebelum keberangkatan, si boss buka2 laptop. Maksudnya mau baca-baca materi yang akan dibahas di perjalanan dinasnya itu kali. Tentunya ini suatu hal yang normal2 aja, asalkan nggak dilakukan sambil... makan indomie kuah. Pada suatu saat tangannya yang memegang mangkok oleng dan CROT...! tumpahlah sebagian kuah ke atas laptop. Tentu aja si laptop langsung mampus. Berhubung pesawat akan berangkat subuh, maka habislah satu tim dibikin kalang kabut di tengah malam untuk membantu boss menghidupkan kembali laptopnya. Untungnya berhasil, dan setelah insiden tersebut berlalu masih sempet2nya berkomentar dengan nada setengah komplen, "Padahal yang tumpah cuma sedikit lho, nggak semuanya, kok bisa mati sih!?"

Mungkin karena kuahnya PEDES kali boss... dan oh ya, sampe sekitar seminggu setelah kejadian, santer terdengar obrolan santai di depan lift yang menanyakan, "Denger2 pada abis begadang ya, karena KOMPUTER BOSS KETUMPAHAN KUAH INDOMIE?"

Segala sesuatu yang ada tulisannya, biasanya perlu untuk dibaca

Sebuah ilustrasi yang lumayan sering terjadi:

"Ini komputer gue kenapa siiih... dari tadi kok bengong beginiiii..."
"Tenang, tenang, coba ceritain dulu, kronologisnya gimana?"
[menjelaskan kronologi kejadian] "Jadi tadi awalnya gue begini... terus gue begitu... terus gue giniin... terus tiba-tiba MUNCUL KOTAK. Gue klik 'OK', eh tau2 sekarang jadi gini!"
"Emangnya tulisan di kotak yang lu 'OK'-in tadi apaan?"
"Tauk!"

Kabar buruk, friends. Komputer yang selama ini dielu-elukan orang sebagai benda cerdas itu sebenarnya nggak cerdas-cerdas amat. Bertahun-tahun lo pelihara, dia nggak akan pernah bisa ngomong sendiri. Itulah sebabnya dia mencoba berkomunikasi lewat kotak-kotak yang muncul di layar. Ada kotak yang memang aman untuk di-'OK', tapi ada juga yang beresiko. Intinya, baca dulu tulisannya, sebelum mengklik 'OK'. Siapa tau suatu hari nanti lo akan ketemu kotak yang seperti ini:

Usahakan memberikan deskripsi sejelas mungkin

Terakhir, bila lo udah hati-hati merawat komputer tapi tetep aja ketiban apes sehingga harus berurusan dengan petugas Helpdesk IT, satu kata kunci yang perlu lo inget adalah DESKRIPSI. Biasanya, para petugas Helpdesk IT berada di lokasi yang terpisah dengan tempat kerja elu. Jadi, pertama-tama lo harus berhubungan dengan mereka via telepon atau e-mail, sehingga butuh upaya ekstra untuk menjelaskan permasalahan yang terjadi.

Ilustrasi berdasarkan pengalaman pribadi:
"Halo?"
"Halo...! Gung! Komputer gue kenapa sih ini kok gini?"
"Gini kenapa?"
"Ini lho, kan tadi gue klik ininya, nah biasanya dari situnya akan keluar tulisan, tapi kok sekarang nggak mau yah?"

Sampe di sini mungkin udah pada kebayang apa yang gue maksud. 'Gini', 'di sini', 'di situ', 'sininya', 'situnya', 'diginiin', 'digituin', adalah kata2 yang hanya bermakna saat diucapkan berbarengan dengan peragaan visual. Di telepon konvensional yang belum memungkinkan komunikasi tatap muka lewat video, penggunaan kata-kata tersebut hanyalah memancing keisengan sang petugas Helpdesk IT gadungan untuk mengeluarkan respon seperti:

"OOH... ITUnya toh yang lo klik, ya jelas salah dong... harusnya kan lo klik yang SANAAN dikit tuh, baru nanti ITUnya bisa BEGINI..."

Gambar dari picturequest.com

ntah kenapa gue tergila-gila pada animated button di web. Itu lho, efek di mana sebuah button akan melakukan sesuatu bila di-"senggol" (mouse over) dengan pointer. Di CSS MP, efek animated button bisa dilakukan dengan mengubah-ubah setting pada class .topt dan .toptsel*. Sialnya, pada salah satu perubahan yang dilakukan oleh MP entah kapan, class .topt dan .toptsel di MP gue menghilang. Itulah sebabnya gue akal2an bikin button sendiri di sebelah kanan, walaupun nggak sesempurna efek menggunakan class .topt dan .toptsel yang asli.
Bedanya adalah, pada MP yang punya class .toptsel, posisi halaman yang sedang aktif ditunjukkan pada button. Maksudnya gini: kalo elo lagi buka blog, maka tombol blog akan "aktif" dan berbentuk / berwarna beda dengan tombol lainnya.

Waktu itu gue udah berusaha nyari ke mana perginya class .topt dan .toptsel gue, tapi nggak ketemu sehingga "ya sudahlah" pikir gue. Tapi belakangan waktu regular account juga udah bisa make theme di MP, gue mulai bertanya-tanya lagi.

Yang menarik perhatian gue adalah: semua theme tersebut memiliki class .topt dan .topsel, tapi dengan posisi yang berbeda-beda! Coba deh buka2 daftar template theme di sini. Perhatiin letak tombol2nya. Ada yang di atas, dan ada yang di samping, kan?

Tadinya gue kira semua theme di MP memiliki struktur HTML yang sama, cuma CSS-nya doang yang beda, ternyata enggak - antara satu theme dengan lainnya terdapat perbedaan struktur HTML juga.

Rasa penasaran gue jadi bangkit lagi, apalagi dengan masuknya sebuah personal message dari user myhaura yang menanyakan soal tombol. Maka, mumpung hari ini gue "libur", sekalian aja gue bongkar ulang site MP gue, tentunya dengan memanfaatkan account dummy mbotx buat rusak2an. Biar kalo gagal nggak mengacaukan account gue yang ini, gitu loh.

Pertama-tama gue pasang theme "myokonos" di account mbotx. Gue view source, dan di bagian head ternyata ada 4 file CSS yang berfungsi secara bersamaan di sana. Dua file CSS yang pertama nggak penting, itu adalah file CSS basic untuk mengatur fungsi2 dasar di MP. Yang menarik adalah 2 file CSS yang terakhir dengan susunan sebagai berikut:

<link rel="stylesheet" type="text/css" href="http://multiply.com/style/custom/mykonos/5.css">
<link rel="stylesheet" type="text/css" href="http://mbotx.multiply.com/style-custom/mbotx/73/custom.css">

Artinya, bila kita menerapkan sebuah theme DAN mengcustomize CSS dari sini, maka KEDUA file CSS tersebut akan berfungsi secara bersamaan, dengan CSS custom kita dalam posisi mengoverride / menimpa CSS theme!

Maksudnya gini: dalam CSS ada prinsip 'inherit' atau 'turunan / warisan'. File CSS yang atas menurunkan perintahnya ke file CSS yang bawah BILA di file CSS yang bawah tidak ada perintah yang serupa. Sedangkan bila ada 2 perintah yang sama, maka file CSS yang bawah yang akan berlaku. Ih ribet ya? Mending pake contoh kali ye...

Contohnya, kita punya sebuah file html yang diatur dengan file CSS A dan file CSS B secara bersamaan.

Bila di file CSS A yang letaknya lebih di atas ada perintah sbb:

body {
font-size: 10pt;
line-height: 150%;
font-family: tahoma
}

yang artinya: seluruh tulisan di body akan berukuran 10pt dengan 1.5 spasi dan huruf tahoma.

Maka bila kita mau mengubah bentuk hurufnya DOANG menjadi arial tapi membiarkan seluruh setting lainnya, maka kita nggak perlu mengutak-atik file CSS A. Cukup di file CSS B yang terletak di bawah file CSS A kita masukkan perintah sbb:

body {
font-family: arial
}

sedangkan perintah lainnya seperti spasi dan ukuran font akan mengikuti perintah yang tercantum di file CSS A karena perintah2 tersebut diturunkan / diwariskan (inherited) dari file CSS A ke file CSS B.

Dengan demikian memodif tampilan MP sebenarnya bisa menjadi (relatif) mudah yaitu cukup dengan menerapkan sebuah theme dan menambahkan modifikasi di bagian2 yang mau kita ubah melalui link custom CSS. Kenapa gue bilang "relatif" mudah? Karena ternyata untuk melakukannya menghabiskan waktu seharian juga sih, krn bolak-balik salah dan kacau... hehehe... tapi at least langkah ini jauh lebih mudah daripada menyusun file CSS dari nol yang disesuaikan dengan puluhan class yang berlaku di MP.

Sebagai contoh, gue mengubah gambar background header yang tadinya berbentuk seperti ini:

yang di file CSS theme dilengkapi dengan perintah seperti ini:

div.owner_nav {
    border: none;
    margin: 0 auto;
    margin-top: 20px;
    height: 310px;
    height: 280px;
    width: 680px;
    border: 5px solid #fff;
    border-bottom: none;
    padding: 10px 20px 0 0;
    background-color: none;
    background: url(http://images.multiply.com/multiply/style/mykonos/top2.jpg) no-repeat top left;
    background-position: 0 -100px;
}

menjadi seperti ini:


dengan cara menambahkan perintah berikut di file CSS yang custom:

div.owner_nav {   
background: url(http://images.mbot.multiply.com/image/1/photos/upload/orig/3708.274228/1.jpeg?et=OvKYyesPrZ5qiNqw16lxTg) no-repeat bottom left;   
}

Sedangkan masalah ukuran, setting font, margin dan padding serta segala tetek-bengek yang ribet2 itu nggak gue utak-atik sama sekali - cukup gue ganti elemen yang perlu-perlu aja. Nggak lupa tentunya class .topt dan .toptsel favorit gue itu, gue tambahin background image yang bisa berubah-ubah.

Hasilnya, MP gue sekarang punya tampilan baru yang jauh lebih rapi ketimbang tampilannya yang lama dan secara "relatif" lebih gampang.

Ada yang tertarik mencoba? :-)

*.topt adalah class untuk tombol navigasi dalam kondisi normal, dan .toptsel adalah tombol navigasi yang sedang aktif (dibuka).

Di posting tutorial CSS sebelumnya, kita udah mencoba membuat halaman HTML dengan kode seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Yang  berakibat munculnya dokumen yang berwajah seperti ini: 

Tapi problemnya, isi tulisan terlalu mepet dengan pinggir, jadi kurang nyaman dibaca. Untuk mengatasinya, kita berkenalan dengan satu perintah CSS yang bernama padding.

Padding adalah jarak dari pinggir tulisan ke pinggir kotak - dalam konteks elemen <div> ya berarti dari tulisan menuju bagian pinggir dari area <div> tersebut. Dengan demikian, jarak yang ditentukan dalam padding mempengaruhi sebuah area dari 4 penjuru, yaitu atas, kanan, bawah, dan kiri. Satuannya, seperti biasa, bisa menggunakan satuan yang absolut maupun relatif seperti yang udah pernah dibahas di sini.  

Beberapa alternatif penulisan perintah padding 

Misalnya kita mau mengatur padding untuk sebuah class, maka kita bisa menuliskan padding secara borongan seperti ini:

.namaclass {
padding: 5px;
}

Artinya, class tersebut akan memiliki jarak yang sama rata sebesar 5px ke empat penjuru sisinya (atas, kanan, bawah, dan kiri). 

Tapi kalo kita mau mengatur padding yang berbeda-beda untuk keempat sisi yang mengelilingi area tersebut, bisa kita tuliskan seperti ini: 

.namaclass {
padding: 5px 10px 5px 10px;
} 

Perhatikan ada 4 angka yang kita masukkan ke dalam perintah tersebut. Itu adalah besaran padding searah jarum jam, mulai dari padding atas. Jadi perintah di atas berarti: di bagian atas ada padding 5px, di sebelah kanan 10px, di bawah 5px, dan di sebelah kiri 10px. 

Padding juga bisa diatur untuk bagian tertentu aja, misalnya untuk bagian atas aja, kanan aja, bawah aja, atau kiri aja. Perintahnya jadi padding-top, padding-right, padding-bottom, dan padding-left. Contoh penggunaannya seperti ini: 

.namaclass {
padding-left: 5px;
} 

Kutipan seperti di majalah: berkenalan dengan panjang, lebar, posisi dan margin

Dengan CSS, kita juga bisa mengatur peletakan sebuah area sehingga saling bertumpuk dengan area lainnya. Trik ini berguna kalo misalnya kita mau bikin sebuah kotak kutipan seperti yang sering kita lihat di majalah. Perintahnya adalah seperti ini:

.namaclass {
position: relative;
float: left / right;
}

Sedangkan untuk mengatur dimensi kotak kutipan yang hendak kita bikin, kita bisa menggunakan perintah width atau height atau dua-duanya sekaligus. Contoh pengaturan lebar aja : 

.namaclass {
width: 200px;
}  

Contoh pengaturan lebar dan tinggi:

.namaclass {
width: 200px;
height: 150px;
}  

Namanya kotak kutipan, tentunya jelek kalo terlalu berhimpit dengan kotak di sebelahnya. Maka kita perlu mengatur margin. Margin adalah kebalikan dari padding; kalo padding mengatur jarak tulisan di DALAM area dengan batas pinggir area, sedangkan margin mengatur jarak antara batas pinggir area dengan sisi-sisi di LUAR-nya. Margin juga bisa diatur secara satuan maupun borongan seperti padding. 

Contoh penggunaan margin secara borongan: 

.namaclass {
margin: 10px;
}

Praktek

Nah, sekarang kita akan menerapkan pembahasan hari ini ke dalam naskah berita "maling sarung". Gue akan mengutip pembelaan diri dari si MBT, maling sarungnya, ke sebuah kotak yang terletak di sebelah kanan paragraf ke dua. Kutipan akan gue kasih class "kutip" dengan background abu-abu. Kode lengkapnya adalah sebagai berikut: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
padding: 5px;
}

.kutip {
font-family: arial;
color: #555555;
line-height: 100%;
font-size: 12pt;
font-weight: bold;
padding: 5px;
text-align: right;
width: 150px;
float: right;
position: relative;
margin: 10px;
background: #ccccccl;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<div class="kutip">"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini"</div>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Hasilnya adalah dokumen seperti ini:

Posting berikutnya adalah posting tips n trik CSS dasar yang terakhir, yaitu tentang gimana cara mengaplikasikan CSS di MP. Nggak seperti pembuatan CSS di dokumen HTML yang kita buat sendiri dari awal, di MP kita harus membalik prosesnya: mencari class2 yang digunakan di sini, dan mengubah atributnya. Jangan lupa juga, prinsip perintah turunan akan sangat berpengaruh karena kita juga harus 'menetralisir' perintah2 yang nggak ingin kita munculkan. 

Untuk lengkapnya, kita bahas lebih lanjut di posting berikut aja deh ya...    

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling
Semua, tapi jangan semua deh!
CSS tutorial: jurus pamungkas (bag.1)

---

Iklan baris:
      

ari 5 posting tentang CSS sebelumnya, praktis kita udah ngebahas hampir semua jurus dasar yang diperlukan untuk bikin sebuah dokumen HTML ber-CSS. Ini adalah bagian pertama dari 2 posting penutup jurus2 CSS dasar sebelum gue ngebahas tentang cara make CSS di MP. Di sini kita akan praktekin hampir semua materi yang udah pernah kita bahas, PLUS beberapa materi tambahan tentang background dan border. 

So, guys, buckle-up, this is going to be an exciting journey!!     

Kita mulai dengan sebuah dokumen HTML sederhana yang kodenya seperti ini: 

<HTML>
<HEAD>

</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>
<p>AN alias MBT (33th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Hasilnya adalah sebuah dokumen HTML yang bentuknya seperti ini: 

Sebuah dokumen HTML yang nampak biasa-biasa aja, bukan? Mari kita hias sedikit dengan beberapa jurus CSS. 

1. Bentuk dan ukuran huruf. Dengan perintah yang udah pernah kita bahas di sini dan di sini gue mengubah bentuk dan ukuran huruf dasarnya menjadi verdana 11pt. 
2. Warna dan varian huruf. Biar judulnya makin ngejreng, elemen <h1> alias heading dengan warna merah dan varian small-caps. Jurus yang ini pernah dibahas di sini.   
3. Tinggi spasi. Yang ini belum pernah dibahas sebelumnya. 
   Biar tulisan lebih nyaman dibaca, kita juga bisa mengatur tinggi spasi dengan perintah line-height. Satuan ukurannya bisa pake satuan absolut maupun relatif seperti yang dibahas di sini. Untuk contoh ini, gue pake line-height setinggi 150% alias 1.5 spasi. 
4. Alignment. Dengan perintah ini kita bisa menentukan apakah sebuah paragraf akan rata kiri (text-align: left), rata kanan (text-align: right), rata tengah (text-align: center), atau rata kanan-kiri (text-align: justify).

Perintahnya akan berbentuk seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 150%;
text-align: justify
}

h1 {
color: red;
font-variant: small-caps;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Sehingga akan menghasilkan dokumen seperti ini: 

Tapi... masih kurang seru ya? Gimana kalo kita kasih background warna? Ya udah, sekalian kita bahas tentang penggunaan "class" pada elemen <div>!

Pentingnya <div> dalam CSS

Elemen <div> adalah salah satu elemen HTML yang besar banget peranannya dalam ber-CSS-ria karena sifatnya yang mem-"blok" sebuah area berbentuk kotak dalam sebuah dokumen HTML, sehingga cocok untuk dihias-hias dengan background atau border. Kalo mau liat contohnya, buka deh review gue tentang filmnya Project -P di sini. Kotak-kotak kuning di sana gue buat dengan perintah <div>. 

Background

Sebelumnya gue jelaskan dulu bahwa perintah "background" dalam CSS nggak cuma bisa diterapkan ke elemen <div> doang lho ya. Ke elemen lain juga bisa. Contohnya ke elemen <span> yang pernah gue bahas di sini. Tapi berhubung <div> akan membentuk bidang kotak, maka background yang kita terapkan di sana, khususnya yang berbentuk gambar, akan terlihat lebih bagus. 

Kita bisa pake background warna seperti ini: 

background: #ffffcc; (kuning muda);

atau bisa juga dengan gambar. Tentunya gambar yang bisa dipake adalah yang udah disimpen / dihost di online image hosting seperti photobucket atau imageshack misalnya. Nanti yang dimasukkan dalam perintah CSS-nya adalah link menuju gambar yang udah online tadi seperti ini: 

background: url(http:⁄⁄linkmenujugambaryangudahonline);

Border

Perintah "border" digunakan untuk memberi garis pinggir kepada sebuah elemen HTML. Perintah yang terkait dengan perintah border adalah  ketebalan, warna, dan jenis garis.  

Ketebalan, seperti biasa pake ukuran-ukuran yang pernah kita bahas di sini. 

Warna, juga pake kode atau nama warna yang pernah kita bahas di sini. 

Jenis garis: ada enam jenis garis yang sering gue liat muncul di MP yaitu solid (garis lurus biasa) dashed (berupa potongan-potongan garis pendek) dotted (berupa titik2), double (dua garis ganda), inset (garis dengan efek kedalaman, bikin area kotak nampak sedikit 'masuk') dan outset  (garis dengan efek kedalaman, bikin area kotak nampak sedikit 'timbul'). 

Contoh perintahnya adalah seperti ini:

border: 1px solid #aaaaaa; 

Yang dalam bahasa manusia berbunyi: 

border memiliki ketebalan 1 px, berupa garis lurus, dan berwarna abu-abu. 

Menerapkan perintah background dan border

Percuma ngomongin teori sampe berbusa kalo nggak dipraktekin. Sekarang  kita coba praktekin perintah2 background dan border ke dalam berita pencurian sarung.        

Pertama-tama, gue rencanakan dulu bahwa isi berita akan gue kasih "class" bernama .berita (tentang penggunaan class bisa dibaca di sini).  "Class" bernama .berita ini punya format sbb:

• background warna kuning muda (#ffffcc)
• dikelilingi border dashed setebal 1px berwarna coklat muda (#993333)

Maka gue memasukkan class .berita ke dalam kode style seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Perhatikan, di depan nama "class" selalu ada titik. Setelah menyiapkan class-nya, gue tambahkan elemen div yang mengacu pada class tersebut di dalam body, seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Maka, lo akan mendapatkan dokumen yang berbentuk seperti ini: 

Gimana, makin meriah kan beritanya? 

Tapi... coba deh perhatiin: dari tulisan ke garis pinggir terlalu mepet, kurang enak diliat. Untuk mengatasinya, kita perlu menambahkan perintah padding / margin. Tentunya nggak akan kita bahas sekarang, pertama karena posting ini udah terlalu panjang, ke dua- karena gue juga udah pegel ngetik! Jadi untuk sementara silakan dicoba2 dulu  jurus2 background dan border ini, ya! 

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling
Semua, tapi jangan semua deh!

---

Iklan baris:
      

alo ngomongin CSS, maka kita berurusan dengan format yang berlaku di seluruh halaman. Misalnya lo udah tentuin <body> menggunakan font tahoma 9pt, maka di seluruh halaman dia akan muncul sebagai tahoma berukuran 9pt.

Tapi gimana kalo kita mau memformat sebagian halaman dengan formatting yang sama sekali beda?

Nggak masalah. Inget kan definisi CSS sebagai "CASCADING" style sheet? Nah, kita sekarang akan mulai memanfaatkan segi ke-CASCADING-annya di mana kita akan melakukan formatting secara bersusun, format suatu bagian menjadi mengikuti (atau justru bertentangan) dari format bagian lainnya. Di sini kita akan berkenalan dengan yang namanya atribut "class".

Dengan perintah "class" kita bisa menentukan bagian-bagian dalam CSS yang memiliki formatting khusus, mulai dari ukuran, jenis font, font-style, pokoknya semua deh!

Untuk membuat perintah class, kita cukup ngarang nama sendiri yang dituliskan setelah titik (.). Syaratnya, nama tersebut nggak boleh mengandung spasi dan karakter khusus (!, #, @, dsb). Cukup beri nama dengan huruf dan angka aja.

Contohnya, gue bikin class di CSS bernama "highlight" dengan perintah seperti ini:

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

} 

Perintah CSS seperti ini, kalo diterjemahkan dalam bahasa manusia berarti:

Bagian yang gue kasih class "highlight", ukurannya akan jadi 1.2 kali lebih besar dan hurufnya bold.

 

Gimana cara menggunakan CSS class?

Caranya adalah dengan menambahkan perintah "class =[nama class]" ke dalam elemen-elemen HTML kita.

Misalnya, kita punya sebuah artikel yang kita format dengan kode HTML seperti ini:

<html>

<head>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.  

</body>

</html>

Dengan elemen HTML seperti itu, maka hasilnya akan seperti ini:

Sebuah dokumen HTML sederhana yang terdiri atas 2 paragraf. Nah, sekarang, kita mau buat tambahkan kode <style> yang memuat class highlight dengan perintah-perintah font 1.2em, bold, berwarna merah seperti yang udah gue tuliskan sebelumnya menjadi seperti ini: 

<html>

<head>

<style>

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

} 

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjad