Anda di halaman 1dari 18

COMBO-INPUT

- nama database : ''data'' - nama table : ''motherboard'' - menggunakan web browser Firefox sebagai default tutorial

THE REASON
Ide itu muncul ketika saya mencoba membuat suatu form input yang digunakan untuk men-input data berupa seri Motherboard yang sa'at ini digunakan, jika isi'an berupa input-text maka itu ber-arti kita harus mengingat dengan jelas item yang akan kita input-kan. Situasi ini bertambah sulit jika user yang mengisi-kan item tidak seragam dalam menulis dengan huruf kecil atau HURUF BESAR. Tetapi jika form itu kita pertegas dengan menggunakan combo-box, maka beberapa seri Motherboard khusus yang digunakan untuk server menjadi tidak ter-akomodasi, juga tidak mempunyai kesempatan untuk di-inputkan. Jalan keluar dari masalah ini tentu saja saya membuat suatu element gabungan yang memadukan unsur input-text dengan unsur combo-box, yang menjadi materi bahasan utama di bab ini.

PREPARE
Langkah 1 : membuat folder ''buku'' di localhost

Gambar 5.1 , membuat folder buku

note : jika folder telah ''buku'' sudah ada, tidak perlu membuat folder baru

Langkah 2 : meng-copy kan gambar2 arrow dari CD penyerta ke dalam folder ''buku''

Gambar 5.2 , file image berupa ''arrow''

Langkah 3 : membentuk file ''combo-input.php'' dengan script berikut, ... <html> <head> </head> <body> <?php $server $username $password $database

="localhost"; ="root"; ="root"; ="data";

//koneksi dan memilih database di Server $con=mysql_connect($server,$username,$password); if (!$con) { die('Could not connect: ' . mysql_error()); } $db=mysql_select_db($database,$con); if (!$db) { die('Database tidak ditemukan: ' . mysql_error()); } ?>

<input type="text" size="17" id="text-mb" name="motherboard" value="Pilih Motherboard" /> </body> </html> Untuk melihat hasil-nya, gunakan path berikut, ...

Gambar 5.3 , url path

hasil tampilan pada firefox web browser , ...

Gambar 5.4 , url path

ARROW-IMAGE
Tujuan utama kita adalah membentuk tanda arrow seperti pada gambar berikut , ...

Gambar 5.5 , arrow image

untuk itu, kita akan menambahkan sebuah <img> element dengan source "../buku/select_arrow.gif"

Langkah 1 : membentuk element <img> dengan suatu source


<html> <head> </head> <body> <input type="text" size="17" id="textcab" name="motherboard" value="Pilih Motherboard" /><img

src="select_arrow.gif" border="0" align="top" />


</body> </html>

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.6 , input-text dengan arrow

Image tersebut kita tambahkan dengan animasi , dengan beberapa event agar membuatnya tampil menawan. Langkah 2 : menambahkan event ''OnMouseOver'' di element <image>
<body> <input type="text" size="17" id="textcab" name="motherboard" value="Pilih Motherboard" /><img src="../buku/gambar/combo/select_arrow.gif" border="0" align="top"

onmouseover="this.src='select_arrow_over.gif'" />
</body>

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.7 , tampilan awal arrow

sewaktu mouse kita arahkan ke gambar arrow , ...

Gambar 5.8 , tampilan hover dari arrow

Langkah 3 : menambahkan event ''OnMouseOut'' di element <image>


<body> <input type="text" size="17" id="textcab" name="motherboard" value="Pilih Motherboard" /><img src="select_arrow.gif" border="0" align="top" onmouseover="this.src='select_arrow_over.gif'"

onmouseout="this.src='select_arrow.gif'" />
</body>

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.9 , tampilan awal arrow

sewaktu mouse kita arahkan ke gambar arrow , ...

Gambar 5.10 , tampilan hover dari arrow

sewaktu mouse kita alihkan dari gambar arrow , ...

Gambar 5.11 , tampilan arrow pada sa'at OnBlur

gambar arrow pun kembali menjadi normal.

COMBO-BOX
Combo-box disini memang sebuah combo yang kita bentuk dari element <select> dari tag HTML, tetapi dengan beberapa modifikasi untuk kita manipulasi. Langkah 1 : dibawah element <input> tambahkan element <div> dengan id="combo-mb"
<body> <input type="text" size="17" id="textmb" name="motherboard" value="pilih_motherboard" /><img src="../buku/gambar/combo/select_arrow.gif" border="0" align="top" onmouseover="javascript:document.getElementById('combotext').src='select_arrow_over.gif'" onmouseout="javascript:document.getElementById('combo-text').src='select_arrow.gif'" />

<div id="combo-mb" > </div>


</body>

Langkah 2 : didalam element <div> kita tambahkan element <select> dan <option>, yang mana isi dari combo tersebut merupakan data yang di akses dari database <div id="combo-mb" >
<select size="5" > <?php $sql=mysql_query("SELECT id_motherboard,nama_motherboard FROM motherboard"); while ($data=mysql_fetch_array($sql)){ echo "<option value=$data[id_motherboard]>$data[nama_motherboard]</option>"; } ?> </select>

</div> Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.12 , tampilan awal combo-input

scripting kita lanjutkan dengan menyembunyikan element <select> , dan akan kita tampilkan jika dibutuhkan. Langkah 3 : menambahkan script style=" visibility:hidden;" pada element <div> <div id="combo-mb" style=" visibility:hidden;" >
<select size="5" > <?php $sql=mysql_query("SELECT id_motherboard,nama_motherboard FROM motherboard"); while ($data=mysql_fetch_array($sql)){

echo "<option value=$data[id_motherboard]>$data[nama_motherboard]</option>"; } ?> </select>

</div> Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.13 , tampilan awal combo-input

kini, element <select> telah hidden, dan akan tampil jika kita meng-click gambar panah kebawah

Gambar 5.14 , tampilan arrow combo-input

Gambar 5.15 , tampilan combo-input setelah arrow kita click

untuk tujuan itu, kita akan menambahkan fungsi comboTampil pada bagian <head> file Langkah 4 :

menambahkan fungsi comboTampil di bagain <head> <head> <script type="text/javascript"> function comboTampil() { document.getElementById('combo-mb').style.visibility = "visible"; } </script> </head> Sementara di element <image> kita tambahkan dengan event OnClick ( sewaktu di click ) , ... Langkah 5 : menambahkan event ''OnClick'' pada element <img>
<input type="text" size="17" id="textmb" name="motherboard" value="pilih_motherboard" /><img src="select_arrow.gif" border="0" align="top" onmouseover="javascript:document.getElementById('combotext').src='select_arrow_over.gif'" onmouseout="javascript:document.getElementById('combo-text').src='select_arrow.gif'"

onclick="comboTampil()" /> Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.16 ,tampilan awal combo-input

sewaktu gambar arrow kita tekan , ...

Gambar 5.17 , tampilan combo-input setelah arrow kita click

HIDING THE <SELECT> ELEMENT.


Tujuan utama kita adalah menyembunyikan element <select> ketika sudah tidak lagi kita butuhkan, untuk itu tambahkan id pada element <select> dengan id="select-mb" Langkah 1 : menambahkan identitas pada element <select> <select size="5" id="select-mb">
<?php $sql=mysql_query("SELECT id_motherboard,nama_motherboard FROM motherboard"); while ($data=mysql_fetch_array($sql)){ echo "<option value=$data[id_motherboard]>$data[nama_motherboard]</option>"; } ?>

</select> Kemudian di dalam fungsi comboTampil juga akan kita tambahkan script lain, ... Langkah 2 : me-modifikasi fungsi comboTampil() function comboTampil() { document.getElementById('combo-mb').style.visibility = "visible";

10

document.getElementById('select-mb').focus(); } tapi itu hanya sebagian, dan hasil nya belum dapat kita lihat, sampai kita menambahkan event ''OnBlur'' pada element <select> Langkah 3 : menambahkan event ''OnBlur'' pada element <select> <select size="5" id="select-mb" onBlur="comboSembunyi()"> dan pada bagian <head> kita tambahkan fungsi baru, yaitu fungsi comboSembunyi() Langkah 4 : menambahkan fungsi comboSembunyi() di bagian <head> <script type="text/javascript">
function comboTampil() { document.getElementById('combo-mb').style.visibility = "visible"; document.getElementById('select-mb').focus(); }

function comboSembunyi() { document.getElementById('combo-mb').style.visibility = "hidden"; } </script> Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.18 , tampilan awal combo-input

sewaktu gambar arrow kita tekan , ...

11

Gambar 5.19 , tampilan combo-input

sewaktu kita meng-click sembarang tempat di luar combo-box , ...

Gambar 5.20 , OnBlur

combo-box pun kembali hilang.

COMBO-BOX HOVER
Hover yang kita maksud disini adalah penambahan warna ( dalam hal ini warna biru ) sa'at mouse berada di atas <option>. Untuk lebih jelasnya, perhatikan gambar di bawah ini.

Gambar 5.21 , contoh option hover

12

untuk tujuan itu, tambahkan event OnMouseOver pada element <option> , dengan beberapa langkah berikut, Langkah 1 : Pada element <option> , echo "<option value=$data[id_motherboard] >$data[nama_motherboard]</option>"; pisahkan menjadi seperti berikut echo "<option value=$data[id_motherboard] >$data[nama_motherboard]</option>"; Langkah 2 : menambahkan event OnMouseOver diantaranya
echo "<option value=$data[id_motherboard]

onmouseover=\"this.style.backgroundColor='#00008B';this.style.color= '#FFFFFF'\"
>$data[nama_motherboard]</option>";

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.22 , option hover

13

Langkah 3 : menambahkan event OnMouseOut untuk menyempurnakannya


echo "<option value=$data[id_motherboard] onmouseover=\"this.style.backgroundColor='#00008B';this.style.color='#FFFFFF'\"

onmouseout=\"this.style.backgroundColor='FFFFFF';this.style .color='#000000'\"
>$data[nama_motherboard]</option>";

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.23 , option hover

sewaktu mouse tidak kita arahkan pada pilihan , ...

Gambar 5.24 , OnMouseOut

COMBO-BOX FUNCTION
Pada tahap ini, kita akan menambahkan fungsi OnChange, sehingga value yang telah kita pilih dapat tampil di input-text

14

Untuk lebih jelasnya, perhatikan gambar di bawah ini.

Gambar 5.25 , combo-input

setelah kita memilih salah satu field data, maka value itu , ...

Gambar 5.26 , setelah memilih

Langkah 1 : menambahkan event ''OnChange'' pada element <select> <select size="5" id="select-mb" onBlur="comboSembunyi()" onChange="hasil(this.value)" >
<?php $sql=mysql_query("SELECT id_motherboard,nama_motherboard FROM motherboard"); while ($data=mysql_fetch_array($sql)){ echo "<option value=$data[id_motherboard onmouseover=\"this.style.backgroundColor='#00008B';this.style.color='#FFFFFF'\" onmouseout=\"this.style.backgroundColor='FFFFFF';this.style.color='#000000'\" >$data[nama_motherboard]</option>"; } ?> </select>

Langkah 2 : menambahkan fungsi hasil di bagian <head>

15

function hasil(x) { document.getElementById('textmb').value=x; document.getElementById('textmb').focus(); document.getElementById('combo-mb').style.visibility = "hidden"; }

FINISHING
Langkah 1: tambahkan element <filedset> untuk mempercantik tampilan combo-input kita
<body> <?php include "koneksi.php"; ?>

<fieldset>
<input type="text" size="17" id="textmb" name="motherboard" value="Pilih Motherboard" /><img src="../buku/gambar/combo/select_arrow.gif" border="0" align="top" onmouseover="this.src='select_arrow_over.gif'" onmouseout="this.src='select_arrow.gif'" onclick="comboTampil()" /> <div id="combo-mb" style="visibility:hidden;" > <select size="5" id="select-mb" onBlur="comboSembunyi()" onChange="hasil(this.value)"> <?php $sql=mysql_query("SELECT id_motherboard,nama_motherboard FROM motherboard"); while ($data=mysql_fetch_array($sql)){ echo "<option value=$data[id_motherboard] onmouseover=\"this.style.backgroundColor='#00008B';this.style.color='#FFFFFF'\" onmouseout=\"this.style.backgroundColor='FFFFFF';this.style.color='#000000'\" >$data[nama_motherboard]</option>"; } ?> </select> </div>

16

</fieldset>
</body>

Langkah 2 : tambahkan css-script di bagian <head> <style type="text/css"> fieldset { border-style padding color width height } select { width } input { width } </style>

: groove; : 1px; : #000000; : 175px; : 20px;

: 175px;

: 160px;

Refresh lah browser anda, Sehingga menghasilkan tampilan , ...

Gambar 5.27 , tampilan awal combo-input

17

Gambar 5.28 , tampilan combo-input setelah di click

18