Gatot Ari Wibowo’s Weblog

Di dalam sebuah website, seringkali kita menemukan penggunaan menu bertingkat seperti pada gambar di atas. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas.

Berikut ini adalah contoh struktur html menu yang terdiri dari 3 level (menggunakan tag html <ul> dan <li>):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul>
    <li><a href="menu1.html">Menu 1</a></li>
    <li><a href="menu2.html">Menu 2</a></li>
    <li><a href="menu3.html">Menu 3</a>
        <ul>
            <li><a href="menu31.html">Sub Menu 3.1</a></li>
            <li><a href="menu32.html">Sub Menu 3.2</a>
                <ul>
                    <li><a href="menu321.html">Sub Menu 3.2.1</a></li>
                    <li><a href="menu322.html">Sub Menu 3.2.2</a></li>
                    <li><a href="menu323.html">Sub Menu 3.2.3</a></li>
                </ul>
            </li>
            <li><a href="menu33.html">Sub Menu 3.3</a></li>
        </ul>
    </li>
    <li><a href="menu4.html">Menu 4</a></li>
</ul>

Read more

CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sbb:

• Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
  nilai specificity = 1 (0,0,1)
• Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
  nilai specificity = 10 (0,1,0)
• ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
  nilai specificity = 100 (1,0,0)

Read more

Masih ragu-ragu menggunakan jQuery, MooTools, prototype.js atau framework javascript lainnya karena ukurannya yang cukup besar? Atau file css anda cukup besar hingga puluhan bahkan ratusan KB? Cobalah trik di bawah ini untuk memperkecil ukuran file-file web.

Ukuran script jQuery (versi 1.3.2) adalah sekitar 118 KB (versi development / tidak dikompres), atau 56 KB (versi minified / dikompres). Dengan menambahkan lagi kompresi menggunakan gzip/deflate, script jQuery versi minified bisa diperkecil lagi menjadi hanya sekitar 19 KB. Sebuah penurunan ukuran yang cukup besar kan..

Ada beberapa teknik untuk mengompres, yaitu:

1. Menggunakan mod_deflate

Ini adalah cara paling mudah, karena kita tinggal menambahkan 1 buah file .htaccess, maka semua jenis file-file yang kita inginkan akan terkompres dengan otomatis. Tapi sayangnya tidak semua server hosting mengaktifkan mod_deflate.
mod_deflate adalah sebuah module pada web server Apache 2 (menggantikan mod_gzip pada Apache 1.3) yang digunakan untuk mengompres output dari server sebelum dikirimkan ke browser. Sebelum mencoba menggunakannya, cek dahulu apakah web server anda sudah mengaktifkan module ini. Jika sudah aktif, maka buatlah sebuah file .htaccess di dalam document root website anda, dan isikan code seperti ini.
Read more

Setelah lebih dari setahun menggunakan Wordpress 2.3, akhirnya blog ini saya upgrade ke Wordpress versi 2.7. Salah satu hal yang menarik dari Wordpress 2.7 adalah adanya fasilitas Threaded (Nested) Comments. Threaded Comments bisa mempermudah diskusi di dalam komentar, karena ada tombol Reply untuk membalas komentar dengan mudah. Komentar balasan tersebut bisa dibalas lagi dengan komentar, dan seterusnya sampai level maksimal yang ditentukan. Sebenarnya sebelum dirilis WP 2.7, sudah ada plugin untuk mengaktifkan fasilitas ini, namun mulai WP 2.7 tidak perlu tambahan plugin lagi.

Untuk mengaktifkan fasilitas ini, masuklah ke menu admin, Settings -> Discussion, kemudian beri tanda centang pada Enable threaded (nested) comments. Kedalaman level yang bisa dipilih maksimal adalah 10.

Untuk melihat efeknya, jika theme anda belum support threaded comments, anda bisa mencoba dengan mengaktifkan theme default bawaan Wordpress 2.7.

Sekedar sharing, berikut ini saya tampilkan kode CSS yang saya pakai pada theme di blog ini, supaya komentar balasan terlihat lebih nested (bersarang). Untuk file comments.php nya kurang lebih sama dengan comments.php di theme default. Read more

Ini adalah contoh cara mengimplementasikan tutorial Form Ajax Menggunakan jQuery untuk membuat sebuah shoutbox sederhana. Setidaknya contoh ini bisa lebih berguna daripada hanya sekedar menampilkan data yang barusan disubmit, seperti pada contoh tutorial tersebut.

Data yang disubmit dari form akan dimasukkan ke dalam database MySQL. Untuk itu perlu dibuat database dan tabelnya. Cukup 1 buah tabel saja supaya simple. Rancangan tabelnya seperti ini:
Read more