Bagi anda yang kerap bermain dengan program ataupun web tingkat lanjut, istilah tersebut mungkin sudah tidak asing. Dropdown menu adalah menu yang memiliki anak menu. Sebagai contoh, ketika anda membuka windows explorer, pada pojok kiri atas terdapat menu File, yang mana apabila menu tersebut diklik akan menampilkan sederetan menu lain seperti rename, delete, dsb.

Sebagian webdesigner dan webprogrammer menggunakan jenis menu ini untuk mempercantik tampilan web yang sedang mereka garap. Salah satu cara yang kerap digunakan adalah dengan menggunakan bantuan JavaScript maupun JQuery. Kedua script tersebut memang memberikan hasil yang optimal pada tampilan web. Namun bagaimana jika client men-disabled kemampuan baca javascript dari browser yang dimilikinya? Atau bagaimana jika browser client tidak support dengan javascript? Meski dua hal tersebut jarang ditemui, namun tidak menutup kemungkinan hal tersebut dapat terjadi. Sebagai seorang webprogrammer, kita harus dapat membuka pandangan mengenai semua kemungkinan yang dapat terjadi terhadap produk yang sedang kita kerjakan.

Untuk membuat dropdown menu, dapat dilakukan dengan menggunakan CSS dan HTML. Tidak percaya? Berikut akan dijelaskan sedikit tentang Membuat Dropdown Menu Tanpa Javascript.

Algoritma program kita kali ini cukup sederhana:

1. Membuat menu utama dan anak menu.
2. Menyembunyikan anak menu.
3. Menampilkan anak menu ketika cursor diletakkan diatas (hover).

Langsung aja, kita bikin format menu kita :

<div id="menu">
 <ul>
    <li><a class="mom" href="#">Home</a></li>
    <li>
      <div id="child">
        <a href="#">Menejemen Pegawai</a>
        <a href="#">Tambah Pegawai</a>
        <a href="#">Menejemen Level</a>
      </div>
      <a class="mom" href="#">Pegawai</a>
    </li>
 </ul>
</div>

Pada potongan program tersebut, terdapat sebuah div#menu yang merupakan tempat meletakkan seluruh elemen menu. Di dalamnya terdapat Unordered List <ul> yang di dalamnya terdapat dua buah List Item <li>. Dalam list item dapat berisi dua elemen pokok, yaitu a.mom sebagai menu utama dan div#child sebagai anak menu.

Setelah selesai dengan format menu, saatnya memberi css :

<style>
#menu ul {
   line-height:30px;
   list-style:none;
   padding:0;
   margin:0 20px;
}
#menu ul li {
   display:inline;
   margin:0 5px;
}
#menu ul li a.mom {
   background:#903;
   display:inline-block;
   padding:0 10px;
   color:#FFF;
}
#menu ul li:hover > #child {
   visibility:visible !important;
}
#menu ul li:hover > a.mom {
   background:#CCCC66;
   color:#000;
}

#child {
   display:inline;
   margin:30px 0 0 -5px;
   position:absolute;
   z-index:10;
   visibility:hidden !important;
   border:1px solid #000;
}
#child a {
   display:block;
   padding:5px 40px 5px 5px;
   background:#2D5082;
   color:#FFF;
   border-bottom:#CCC 1px solid;
}
#child a:hover {
   background:#A6DCFF;
   color:#000;
}
</style>

Terlihat rumit mungkin, tapi inti dari CSS tersebut adalah pada bagian yang saya tebalkan (bold) dan saya beri tag !important. Visibility dari #child diberi nilai hidden pada awalnya. Setelah ListI Item <li> di-hover, maka #child berubah menjadi visible. --intinya gitu.

Hasil dari percobaan di atas adalah: » seperti ini «

[Semoga Bermanfaat]

Bagi anda yang kerap berkunjung ke forum, situs download, atau jejaring sosial lain pasti sudah tidak asing dengan istilah Captcha. Menurut Wikipedia, "CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer.". Secara sederhana, Chapta digunakan untuk membatasi spambots yang biasa membombardir input pada sebuah situs.
Contoh sederhana ada pada sebuah forum. Ketika user hendak submit post, maka ia diminta untuk mengisi captcha. Jika tidak menggunakan captcha, mungkin spambots akan memasukkan ribuan post sekaligus dalam sebuah forum.
Pada pembahasan kali ini, kita akan belajar membuat captcha sederhana menggunakan PHP. Adapun algoritma program yang akan kita buat adalah sebagai berikut :

1. Membuat random text yang akan dijadikan sebagai kode verifikasi.
2. Menampilkan random text kepada user.
3. Mencocokkan input dari user dengan random text.

Pada project ini, kita akan mengeksekusi algoritma tersebut dengan 3 buah file sederhana :

• img.php (membuat random text)
• captcha.html (menampilkan random text pada user)
• check.php (mencocokan input dengan kode)

Saatnya beraksi...

img.php

Pertama, kita buat random text. Kemudian menyimpannya dalam sebuah variable. Setelah itu menyajikannya dalam wujud gambar agar tidak dapat di-copas (copy-paste).

<?php
// membuat random text dari 0 - 9999
$code=rand(0,9999);

// menyimpan random text pada session
session_start();
 $_SESSION["captcha"]=$code;

// mengubah text menjadi gambar
$im = imagecreate(150, 40);

$bg = imagecolorallocate($im, 0, 0, 0);
$fg = imagecolorallocate($im, 0, 255, 0);
$font = 5;

imagestring($im, $font, 50, 10, $code, $fg);

header('Content-type: image/png');
imagepng($im);

imagedestroy($im);
?>

Untuk penjelasan mengenai mengubah text menjadi gambar, dapat membaca lebih lanjut pada PHP.net

captcha.html

Merupakan halaman HTML yang berisi sebuah form yang akan menampilkan gambar kode yang telah dibuat oleh img.php serta menyediakan tempat bagi user untuk memasukkan data.

<form action="check.php" method="post">

 <!-- tempat menulis komentar -->
 <textarea name="komentar" cols="50" rows="8">
  Tulis apa saja di sini
 </textarea><br>

 <!-- menampilkan kode random text -->
 <img src="img.php" style="float:left;" />

 <!-- tempat menulis captcha -->
  Tulis teks di samping :<br>
  <input name="kode" type="text"><br>

 <!-- tombol kirim -->
 <input type="submit" value="Kirim">
</form>

check.php

Sebuah halaman PHP yang berisi perintah untuk mencocokkan input captcha user dengan input captcha yang telah dibuat oleh img.php

<?php
// set variable
 session_start();
 // komentar user
 $komentar=$_POST["komentar"];
 // input captcha user
 $kode=$_POST["kode"];
 // kode captcha dari img.php
 $captcha=$_SESSION["captcha"];

// jika captcha dari img.php kosong
if(empty($captcha))
{
 // redirect ke captcha.html untuk ambil kode
 header("location:captcha.html");
}
// jika captcha dari img.php tidak kosong
else{
  // jika captcha sama dengan input user
  if($kode==$captcha)
  {
   echo("Captcha yang anda masukkan benar.<br>");
   echo("Komentar anda :<br>");
   echo($komentar);
  }
  // jika captcha tidak sama dengan input user
  else
  {
   echo("Captcha yang anda masukkan salah.<br>");
   echo("Silakan ulangi.");
  }
}
?>

Hasil dari percobaan di atas adalah: » seperti ini «


[Semoga Bermanfaat]