Bagaimana membuat tampilan website dua kolom yang fleksibel? Yang saya maksud tampilan yang fleksibel adalah tampilan website yang bisa melebar dan menyempit sesuai dengan ukuran layar browser. Dengan menggunakan tabel masalah ini dengan mudah ditangani, tetapi bagaiman jika tidak menggunakan tabel? sesuai dengan tren desain saat ini yaitu tableless alias tanpa table. Hal inilah yang akan saya bahas pada tulisan ini.

Misalnya kita akan membuat tampilan website dengan dua kolom fleksibel yang dilengkapi dengan header dan footer dan area utama berada di sisi kanan seperti pada gambar berikut.

Untuk membuat dua kolom yang fleksibel kita bisa menggunakan margin negatif. Margin negatif memungkinkan area utama menjauh dari sisi browser dan memberikan tempat untuk bagian samping (sidebar). Read more »

Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya.

Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.

Kode CSS

<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
 
label{float:left; width:150px; font-weight:bold;}
 
input, textarea, select{margin-bottom:10px; border: 1px solid #b9c7b0; padding:3px;}
 
input, textarea{width:330px;}
 
textarea{height:100px;}
 
small{display:block; padding-left:150px;}
 
.checkbox{width:2em; border:none; padding:0; margin:0;}
 
.button{margin-left:150px; margin-top:15px; width:120px; font-weight:bold; background:#2B5401; color:#fff; font-size:14px;}
 
br {clear:left;}
</style>

Kode HTML

<h2>Contoh Form tanpa table menggunakan CSS</h2>
<form action="" method="post">
<label for="name">Nama</label> <input type="text" name="name" id="name" /><small>Wajib diisin</small><br />
 
<label for="email">Email</label> <input type="text" name="email" id="email" /><small>Wajib diisin</small><br />
 
<label for="comment">Komentar</label> <textarea name="comment" id="comment" rows="5" cols="100"></textarea><small>Wajib diisin</small><br />
 
<label for="aggree">Setuju dengan Terms</label> <input type="checkbox" name="aggree" id="aggree" class="checkbox" /><br />
 
<input type="submit" name="task" value="Submit" class="button" />
</form>

Dan hasilnya dapat dilihat disini.

Saat ini ajax merupakan teknologi dalam bidang web yang sedang naik daun. Load yang lebih cepat karena tidak perlu meload semua halaman menjadi salah satu keunggulan dari teknologi ajax ini. Saat membuat website direktori saya coba untuk menerapkan teknologi ajax ini pada website tersebut. Emang tidak semua menggunakan ajax tetapi hanya pada form daftarkan website saya gunakan teknologi ajax untuk mensubmit form tersebut.

Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut. Read more »