1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.php dan tuliskan syntax dasar html
<html>
<head>
<title>Autofill Data Alamat dengan Javascript</title>
</head>
<body>
</body>
</html>
3. Buka aplikasi Xampp untuk dapat mengakses phpmyadmin untuk membuat database. Pada Apache dan MySQL, Klik tombol Start untuk menyalakan service
5. Buat database 'alamat'
id_kota_fk untuk memberikan sebuah relasi (foreign key) dari tabel 'kecamatan' ke tabel 'kota'
9. Setelah itu insert/ masukkan data disetiap tabel
10. Kembali ke index.php, sisipkan style type="text/css" pada bagian bawah tutup head dan berikan syntax php pada bagian dalam body untuk mendeklarasikan koneksi ke database. Disini menggunakan database alamat yang telah dibuat sebelumnya.
<style type="text/css"></style>
<?php
//koneksi ke database
$con = mysqli_connect('localhost', 'root', '','alamat');
?>
//koneksi ke database
$con = mysqli_connect('localhost', 'root', '','alamat');
?>
11. Atur style pada div untuk mengatur panjang, dan margin, buat form dengan method="post" dan atur div nya. Taruh syntax nya di bagian bawah setelah koneksi database.
<div style="width: 60%;margin-left: 20%;margin-right: 20%;">
<form method="post">
<!--Kolom1-->
<div align="left" style="float: left; width: 50%">
12. Setelah itu buat tabel dengan padding 3 dan spacing 2, berikan judul 'alamat saya' dan textbox untuk NAMA, NIM dan HP. Berikan id untuk setiap textbox maupun combobox.
<table cellpadding="3" cellspacing="2"
border="0">
<tr><td
colspan="2" align="center"><h3>ALAMAT
SAYA</h3></tr>
<tr><td>NAMA</td><td><input
type="text" name="nama" id="nama"
onkeyup="k_nama()"></td></tr>
<tr><td>NIM</td><td><input
type="text" name="nim" id="nim"
onkeyup="k_nim()"></td></tr>
<tr><td>HP</td><td><input
type="text" name="nohp" size="12"
maxlength="13" onkeypress="return isNumberKey(event)"
id="nohp" onkeyup="k_nohp()"></td></tr>
onkeypress = untuk memberikan format pada textbox yang hanya dapat diinputkan dengan angka
onkeyup = untuk memberikan event/ function pada textbox sehingga nantinya ketika textbox ini di isi data, maka textbox lain yang memiliki ikatan bisa terisi secara otomatis seperti data yang telah diisikan sebelumnya.
13. Kemudian masuk pada bagian pembuatan combobox dan pemanggilan data dari database. Buat table row(tr) dan table data(td) untuk provinsi.
<tr>
<td>PROVINSI</td>
<td>
<!--provinsi-->
<select
id="provinsi" name="provinsi"
onchange="k_provinsi()">
<option
value="">- PILIH PROVINSI -</option>
<?php
$query =
mysqli_query($con,"SELECT * FROM provinsi ORDER BY nama_provinsi");
while
($row = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $row['id_provinsi'];
?>">
<?php echo $row['nama_provinsi']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
Pada $query=mysqli_query($con... adalah syntax untuk pemanggilan tabel provinsi berdasarkan nama_provinsi, sehingga data yang akan muncul pada combobox adalah hanya data nama_provinsi.
Pada option value, menampilkan data nama_provinsi ke option combobox
14.Buat tr dan td lagi untuk kota dan kecamatan, tuliskan syntax dibawah ini
Pada option value, menampilkan data nama_provinsi ke option combobox
14.Buat tr dan td lagi untuk kota dan kecamatan, tuliskan syntax dibawah ini
<tr>
<td>KAB/ KOTA
</td>
<td>
<!--kota-->
<select
id="kota" name="kota" onchange="k_kota()"
onselect="k_kec()">
<option
value="">- PILIH KABUPATEN -</option>
<?php
$query =
mysqli_query($con,"SELECT
*
FROM
kota
INNER JOIN
provinsi ON kota.id_provinsi_fk = provinsi.id_provinsi ORDER BY nama_kota");
while
($row = mysqli_fetch_array($query)) {
?>
<option id="kota" class="<?php echo
$row['id_provinsi']; ?>" value="<?php echo $row['id_kota'];
?>">
<?php echo $row['nama_kota']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>KECAMATAN</td>
<td>
<!--kecamatan-->
<select
id="kecamatan" name="kecamatan"
onchange="k_kec()" onclick="k_kel()">
<option
value="">- PILIH KECAMATAN -</option>
<?php
$query =
mysqli_query($con,"SELECT
*
FROM
kecamatan
INNER
JOIN kota ON kecamatan.id_kota_fk = kota.id_kota ORDER BY
nama_kecamatan");
while
($row = mysqli_fetch_array($query)) {
?>
<option id="kecamatan" class="<?php echo
$row['id_kota']; ?>" value="<?php echo $row['id_kecamatan'];
?>">
<?php echo $row['nama_kecamatan']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
Pasti kalian bertanya-tanya, kenapa pada pemanggilan data menggunakan inner join? Yap.. dikarenakan tabel-tabel yang sebelumnya telah dibuat akan di foreign key/ di relasikan supaya memiliki hubungan antar tabel.
15. Setelah itu buat tr dan td untuk desa/ kelurahan, dusun/ kampung, rt/ rw dan jalan. Jangan lupa untuk menutup tabel, div dan form
15. Setelah itu buat tr dan td untuk desa/ kelurahan, dusun/ kampung, rt/ rw dan jalan. Jangan lupa untuk menutup tabel, div dan form
<tr>
<td>DESA/ KELURAHAN </td><td><input type="text" name="kelurahan" id="kelurahan" onkeyup="k_kel()"></td>
</tr>
<tr>
<td>DUSUN/ KAMPUNG </td><td><input type="text" name="dus" id="dus" onkeyup ="k_dus()"></td>
</tr>
<tr>
<td>RT/ RW </td><td><input type="text" name="rt" id="rt" onkeyup="k_rt()"></td>
</tr>
<tr>
<td>Jalan </td><td><input type="text" name="jln" id="jln" onkeyup="k_jln()"></td>
</tr>
</table>
</div>
<form/>
16. Buat form yang kedua untuk alamat ortu. Pada bagian id di form kedua ini, tambahkan huruf 'b' agar dapat dibedakan. Langsung saja tuliskan syntax dibawah ini
<form2>
<div
style="position: inherit;">
<table cellpadding="3" cellspacing="2"
border="0">
<tr><td
colspan="2" align="center"><h3>ALAMAT
ORTU</h3></tr>
<tr><td>NAMA</td><td><input
type="text" name="namab" id="namab"></td></tr>
<tr><td>HP</td><td><input
type="text" name="nohp" size="12"
maxlength="13" onkeypress="return isNumberKey(event)"
id="nohp" onkeyup="k_nohp()"></td></tr>
<tr>
<td>PROVINSI</td>
<td>
<!--provinsi2-->
<select
id="provinsib" name="provinsib">
<option
value="">- PILIH PROVINSI -</option>
<?php
$query =
mysqli_query($con,"SELECT * FROM provinsi ORDER BY nama_provinsi");
while ($row =
mysqli_fetch_array($query)) {
?>
<option value="<?php echo $row['id_provinsi'];
?>">
<?php echo $row['nama_provinsi']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>KAB/ KOTA
</td>
<td>
<!--kota2-->
<select
id="kotab" name="kotab" onclick="b_kab()">
<option
value="">- PILIH KABUPATEN -</option>
<?php
$query =
mysqli_query($con,"SELECT
*
FROM
kota
INNER JOIN
provinsi ON kota.id_provinsi_fk = provinsi.id_provinsi ORDER BY
nama_kota");
while
($row = mysqli_fetch_array($query)) {
?>
<option id="kotab" class="<?php echo
$row['id_provinsi']; ?>" value="<?php echo $row['id_kota']; ?>">
<?php echo $row['nama_kota']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>KECAMATAN
</td>
<td>
<!--kecamatan2-->
<select id="kecamatanb"
name="kecamatanb" onclick="b_kec()">
<option
value="">- PILIH KECAMATAN -</option>
<?php
$query =
mysqli_query($con,"SELECT
*
FROM
kecamatan
INNER
JOIN kota ON kecamatan.id_kota_fk = kota.id_kota ORDER BY
nama_kecamatan");
while
($row = mysqli_fetch_array($query)) {
?>
<option id="kecamatanb" class="<?php echo
$row['id_kota']; ?>" value="<?php echo $row['id_kecamatan'];
?>">
<?php echo $row['nama_kecamatan']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
<tr><td>DESA/ KELURAHAN
</td><td><input type="text"
name="kelurahanb" id="kelurahanb"></td></tr>
<tr><td>DUSUN/ KAMPUNG
</td><td><input type="text" name="dusb"
id="dusb"></td></tr>
<tr><td>RT/ RW </td><td><input
type="text" name="rtb"
id="rtb"></td></tr>
<tr><td>Jalan </td><td><input
type="text" name="jlnb"
id="jlnb"></td></tr>
</table>
</div>
</form2>
</div>
17. Sampai lah dimana javascript akan digunakan, syntax sebelumnya sudah tecantumkan onchange dan onclick, nah pada bagian ini bakal dijelaskan lebih detail lagi
18. Yang terakhir buat beberapa function untuk mengambil data1 ke data2, pada tutorial no 17 hanya menjelaskan ikatan chained, belum termasuk pengambilan data. Tuliskan syntax seperti berikut
<script
src="jquery-1.10.2.min.js"></script>
<script
src="jquery.chained.min.js"></script>
<script>
$("#kota").chained("#provinsi");
$("#kecamatan").chained("#kota");
$("#kelurahan").chained("#kecamatan");
function b_kab(){
var
data_prov_b = document.getElementById("provinsib").value;
$("#kotab").chained("#provinsib");
}
function b_kec(){
$("#kecamatanb").chained("#kotab");
}
Apabila belum memiliki file .js nya, bisa didownload lewat google. File .js yang dimaksud berfungsi untuk chained/ terrantai, lebih tepat nya adalah membuat sebuah ikatan antara data1 ke data2 dan jika data1 dicantumkan ke dalam textbox1, data2 akan muncul pada textbox2 dan secara otomatis terisi sesuai yang dituliskan data1(clone). Disini menggunakan id untuk membuat rantai tersebut dapat digunakan pada data-data yang akan ditampilkan.18. Yang terakhir buat beberapa function untuk mengambil data1 ke data2, pada tutorial no 17 hanya menjelaskan ikatan chained, belum termasuk pengambilan data. Tuliskan syntax seperti berikut
function k_provinsi(){
var y =
document.getElementById("provinsi").value;
document.getElementById("provinsib").value = y;
}
function
k_kota(){
var y =
document.getElementById("kota").value;
document.getElementById("kotab").value = y;
}
function
k_kec(){
var y =
document.getElementById("kecamatan").value;
document.getElementById("kecamatanb").value = y;
}
function k_kel(){
var y =
document.getElementById("kelurahan").value;
document.getElementById("kelurahanb").value = y;
}
function k_dus(){
var y =
document.getElementById("dus").value;
document.getElementById("dusb").value=
y;
}
function k_rt(){
var y =
document.getElementById("rt").value;
document.getElementById("rtb").value=
y;
}
function k_jln(){
var y = document.getElementById("jln").value;
document.getElementById("jlnb").value=
y;
}
function
isNumberKey(evt)
{
var charCode
= (evt.which) ? evt.which : event.keyCode
if (charCode
> 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
function
k_nama(){
//var y =
document.getElementById("nama").value;
//document.getElementById("namab").value=
y;
}
function k_nim(){
//var y =
document.getElementById("nim").value;
//document.getElementById("nimb").value=
y;
}
function
k_nohp(){
//var y =
document.getElementById("nohp").value;
//document.getElementById("nohpb").value=
y;
}
</script>
</body>
</html>
19. Buka browser yang akan digunakan untuk menampilkan hasil, tuliskan localhost/nama_folder/nama_file
Pada textbox bagian kab/ kota dan kecamatan masih hide karena option provinsi belum terisi
20. Setelah option provinsi di pilih, maka kab/ kota akan terbuka/ unhide, dst. Textbox pada alamat ortu akan menyesuaikan isi/ pilihan pada textbox alamat saya
21. Apabila provinsi, kab/ kota dan kecamatan pada alamat ortu diganti, maka tidak akan berpengaruh terhadap provinsi, kab/ kota dan kecamatan pada alamat saya. Pada bagian textbox desa/ kelurahan, dusun/ kampung, rt/ rw dan jalan akan chained.
Sekian tutorial kali ini, walau agak belibet nerangin nya, tetapi semoga dapat dimengerti dan bermanfaat. Sampai jumpa pada tutorial selanjutnya..
20. Setelah option provinsi di pilih, maka kab/ kota akan terbuka/ unhide, dst. Textbox pada alamat ortu akan menyesuaikan isi/ pilihan pada textbox alamat saya
0 komentar:
Posting Komentar