Tips Merancang User Interface Form Pencarian Data

Pada saat merancang sebuah form anda perlu memikirkan masalah user interface agar para pengguna aplikasi anda dapat dengan mudah mengoperasikan sistem yang anda buat dan mencegah adanya human error. Design user interface pada aplikasi harus diperhatikan pada setiap field yang berhubungan dengan data dari database.

Pada artikel kali ini saya ingin memberikan tips bagaimana mensiasati perancangan form pada saat pencarian data pada suatu table yang record-nya sudah banyak sehingga tidak mungkin element SELECT/DROPDOWN bisa menampungnya. Berikut adalah screenshootnya:

Pada tampilan diatas ada satu inputan kode pegawai dan di sebelahnya adalah nama pegawai sesuai dari kode yang dimasukkan. Apabila user hafal dengan kode pegawai maka kode dapat langsung diinput dan ketika cursor sudah keluar dari inputan kode maka dengan metode Ajax, pencarian nama pegawai dengan kode yang diinput sebelumnya pun akan dilakukan. Namun apabila user lupa akan kode pegawai, dia dapat menekan tombol cari dan keluar dialog seperti gambar diatas. Dialog diatas bertujuan untuk mensupport user dalam melakukan pencarian pegawai yang ingin diinput.

Lain halnya apabila user salah menginput manual kode pegawai, maka akan ada peringatan seperti gambar dibawah. Peringatan ini sangat berguna dalam mengurangi kesalahan input user.

Untuk membuat program ini, siapkan beberapa file PHP yang nantinya akan berfungsi untuk menampilkan daftar pegawai dan pencarian pegawai. Pertama siapkan file dengan nama “daftar_pegawai.php“:

<?
 include 'koneksi.php';
 $query = mysql_query("SELECT * FROM pegawai");	
?>
<table bgcolor="#000000" cellspacing="1" cellpadding="3">	
	<tr bgcolor="#DDDDDD">
		<th>No. Peg</th>
		<th>Nama</th>
		<th>Umur</th>
		<th>Alamat</th>
	</tr>
	<? while($row = mysql_fetch_object($query)): ?>
	<tr bgcolor="#FFFFFF">
		<!-- fungsi selectPegawai di deklarasikan di index.html dan file ini bisa memanggilnya selama file ini
			 dipanggil oleh thickbox dari index.html, fungsi dari selectPegawai adalah untuk memasukan nilai
			 NIP dan nama pegawai dari masing-masing baris di daftar pegawai ini -->
		<td align="center"><a href="javascript:selectPegawai('<?=$row->NIP?>','<?=$row->nama?>')"><?=$row->NIP?></a></td>
		<td><?=$row->nama?></td>
		<td align="center"><?=$row->umur?></td>
		<td><?=$row->alamat?></td>
	</tr>
	<? endwhile; ?>
</table>

Lalu siapkan file dengan nama “cara_pegawai.php“:

<?
 // pastikan file ini diakses dengan mengirimkan variable POST dengan nama "nip"
 isset($_GET['nip']) or die('Kirim parameter NIP');
 
 include 'koneksi.php';
 $nip = $_GET['nip'];
 $query = mysql_query("SELECT nama FROM pegawai WHERE NIP = '$nip'");
 // cara mengambil nilai nama pegawai dari query diatas
 @list($nama_pegawai) = mysql_fetch_row($query);
 echo $nama_pegawai; // beri response nilai nama pegawai
?>

Untuk formnya siapkan script seperti ini:

45
46
47
48
49
50
51
52

<form action="" method="post"> 
 Pilih Pegawai: <input type="text" name="pegawai" size="4" /> 
 <!-- semua element anchor dengan class="thickbox" akan otomatis menampilkan dialog thickbox, 
 	  isi href bisa dimasukan setting thickbox berupa width dan height dari dialog thickbox -->
 <a href="daftar_pegawai.php?width=300&height=400" class="thickbox"><img src="button_search.png" border="0" /></a>
 <input type="text" name="nama_pegawai" size="20" readonly /> 
 <small id="divAlertPegawai"></small>
</form>

Untuk support javascript dalam program ini contoh scriptnya seperti ini:

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/*  fungsi selectPegawai tidak digunakan di file ini melainkan digunakan di file daftar_pegawai
	yang nantinya akan dipanggil oleh thickbox, fungsinya untuk memasukan nilai hasil klik dari
	salah satu daftar pegawai di table lalu dimasukan ke masing-masing inputan form  */
function selectPegawai(nip,nama){
  $('input[@name=pegawai]').val(nip);
  $('input[@name=nama_pegawai]').val(nama);
  tb_remove(); // hilangkan dialog thickbox
}
$(document).ready(function(){
  $('input[@name=pegawai]').blur( // beri event pada saat onBlur inputan kode pegawai
	function(){				
	  var vNIP = $(this).val();
	  $.get('cari_pegawai.php',{nip: vNIP},
		function(nama_pegawai){
		  // jika response tidak kosong nilainya maka masukkan nilai ke inputan nama pegawai
		  if(nama_pegawai.length > 0){ 
			$('input[@name=nama_pegawai]').val(nama_pegawai);	   
		  }else $('#divAlertPegawai').text('Pegawai dengan NIP "'+vNIP+'" Tidak Ditemukan').css('color','red');
		}
	  );
	}
  );
  // beri event pada saat keyup kode pegawai agar kode yang dimasukan font-nya UPPERCASE semua (optional)
  $('input[@name=pegawai]').keyup(
	function(){
	  $(this).val(String($(this).val()).toUpperCase());
	}
  );
});

Sebagai catatan, saya menggunakan JQuery + Plugin Thickbox untuk membuat dialog thickbox dan penerapan Ajax.

Untuk sample data pegawai download disini –> sample data pegawai

Untuk demo program lihat di link ini

Untuk download program lengkap di link ini

Semoga dapat menambah wawasan… ^_^