Make It Cool with CSS

Pada bagian terakhir ini kita akan memanfaatkan CSS untuk mempercantik penampilan aplikasi sederhana ini.

Mula2, baca aja dulu kodenya (untuk vote.htm):

[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/html]

Di sini kita akan mengganti textbox nilai output dng tampilan grafis. SIapkan terlebih dahulu 2 file gambar yg berbeda. Misal untuk rating 3, gambar yg kita buat akan spt: ***##, sedang untuk rating 4, gambarnya ****#. Nah siapkan 1 gambar untuk tanda *, dan 1 lagi untuk tanda # itu. Namanya terserah, tapi jangan lupa untuk memodifikasi skript di atas supaya nama filenya sesuai. Apabila tombol Vote ditekan, maka sbg pengganti tulisan biasa, akan muncul gambar2 tsb. Di sini kita memanfaatkan DOM dng atribut innerHTML.

Modifikasi kedua adalah tampilan tulisan Loading di pojok kanan atas apabila proses request sedang berlangsung. GMail banget gitu loh! Caranya cukup dng mengubah atribut display dari obyek text tsb (di atas diberi nama textStatus), dari “none” ke “block”. Untuk mematikannya, kita ubah kembali dari “block” ke “none”. Masih memanfaatkan DOM juga.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote3.php

Bagaimana hasilnya? Lumayan keren kan? Silahkan coba diexplore lagi lebih jauh pemanfaatan Ajax, dijamin, bikin aplikasi web kita tambah yahud. Salah satu yg bisa dicoba adalah membuat tampilan foto/image di web yg berubah2 sendiri tiap beberapa detik.

Semoga bermanfaat buat semuanya (dan semoga saya gak males nulis bagian terakhir tutorial Smarty :))