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

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

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

Kalau sebelumnya saya sudah menulis tentang cara menampilkan halaman menggunakan Ajax (menggunakan fungsi load() pada jQuery), maka kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.
Read more

jQuery dan MooTools adalah salah dua Framework JavaScript yang banyak digunakan. Masing-masing memiliki kelebihannya sendiri-sendiri (Untuk detail feature masing-masing framework silakan cek sendiri di website mereka). Lalu bisakah kita menggunakan keduanya secara bersamaan? Tentu saja bisa.

Yang harus diperhatikan adalah bahwa jQuery menggunakan tanda $ sebagai shortcut untuk pemanggilan jQuery, sedangkan MooTools pun menggunakan $() sebagai shortcut untuk mempersingkat document.getElementById().

Jika kita meload jQuery dan MooTools secara bersamaan di satu halaman, maka bisa dipastikan bakalan terjadi konflik di antara keduanya.

Namun untungnya, kunci untuk mengatasi masalah tersebut sudah disediakan oleh jQuery, yaitu dengan menjalankan script jQuery.noConflict() setelah jQuery diload.
Read more