Bogger semua kesempatan ini saya mau sharing cara membuat pencarian data yang nantinya data itu kita add kedalam input text yang kita inginkan. Untuk percobaan ini saya mengunakan PHP dengan Databasen MySql.
Untuk Persiapan kita buat folder searchdata dan didalamnya dibuatkan dua file yaiu index.php dan search.php
Struktur filenya kira-kira sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search Employee</title>
<script type="text/javascript">
function popupwindow(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'scrollbars=1,status=1, resizable=1, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
</head>
<body>
<table>
<tr border="0" cellpadding="0" cellspacing="0">
<td colspan="2" align="center">Contoh search employee</td>
</tr>
<tr>
<td>Employee</td>
<td><input type="text" name="txtId" id="txtId"><input type="text" name="txtNama" id="txtNama"><input type="button" name="Search" value="Search" onclick='javascript:popupwindow("search.php","Seach Employee",950,600);'></td>
</tr>
</table>
</body>
</html>
Selanjutnya kita akan mengisi code pada file search.php dengan code sbb:
<script type="text/javascript">
function changeparent(doc,doc2){
var input1=doc;
var input2=doc2;
window.opener.document.getElementById('txtId').value=input1;
window.opener.document.getElementById('txtNama').value=input2;
window.close();
}
</script>
<h3>Data Employee</h3>
<table cellpadding="3" cellspacing="0" border="1" width="80%" id="tblMain">
<tr>
<td>Employee Id</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<?php
function getConnection() {
$usr="root";
$pwd="";
$database="searchdata";
$host="localhost";
$connection= mysql_connect($host, $usr, $pwd);
mysql_select_db($database)or die("Database tidak ditemukan !");
return $connection;
}
$conn=getConnection();
$sql="select * from employee";
$dataQry = mysql_query($sql, $conn)or die("Query error :". mysql_error());
while ($dataRow= mysql_fetch_array($dataQry)){
?>
<tr onClick="javascript:changeparent('<?php echo $dataRow['emp_id']; ?>','<?php echo $dataRow['nama']; ?>');">
<td><?php echo $dataRow['emp_id'];?></td>
<td><?php echo $dataRow['nama'];?></td>
<td><?php echo $dataRow['alamat'];?></td>
</tr>
<script language="javascript">
var tbl = document.getElementById("tblMain");
if (tbl != null) {
if (tbl.rows[0] != null) {
tbl.rows[0].style.backgroundColor = "#365890";
tbl.rows[0].style.color = "#FFFFFF";
}
for (var i = 1; i < tbl.rows.length; i++) {
tbl.rows[i].style.cursor = "pointer";
tbl.rows[i].onmousemove = function () { this.style.backgroundColor = "#cccccc"; this.style.color = "#FFFFFF"; };
tbl.rows[i].onmouseout = function () { this.style.backgroundColor = ""; this.style.color = ""; };
}
}
</script>
<?php
}
?>
</table>
Sebelum menjalankan kita harus membuat databasenya terlebih dahulu, kita buat database baru dengan nama searchdata atau sesuaikan dengan keinginan anda
Selanjutnya kita membuat tabel dengan nama employee. filed tabel employee bisa dilihat pada gambar diatas.
Sekarang kita isi tabel yang sudah kita buat dengan cara menjalankan script SQl dibawah ini :
insert into employee values
('00001','asep Komarudin','Jakarta'),
('00002','Rizal maulana','Bandung'),
('00003','Nilam Ayu','Bekasi')
Sekarang kita coba menjalankannya, tampilannya kurang lebih sbb:
Klik Tombol Dibawah Untuk Memunculkan Link Download :
Tutorial Cara Download File :
Jika ada pertanyaan silahkan input pada kolom komentar....
3 comments
Terima kasih tutorialnya master, jika itu pencariannya dibikin 2 perintah search, bagaimana ya? bisa minta alamat email master buat sharing??
Bisa saja, tinggal di tambahkan saja nanti di olah dengan mengunakan Javascript dan JQuery
ini email saya aasseepp@gmail.com jangan lupa subscribe youtube chanel saya Pojok Code
EmoticonEmoticon