Membuat Form Input Data Dengan PHP dan JavaScript adalah salah satu standar permainan pemrograman web. Bisa dibilang ini adalah dasar yang harus dikuasai oleh semua programer berbasis web. Untuk kali ini saya belum akan membicarakan bagaimana membuat web yang terhubung dengan database. Melainkan masih berupa tampilan luar sebuah form input Data Kepegawaian sebuah kantor. Oke untuk pertama kali mari kita membuat form awal untuk pengisian data kepegawaian.
<html>
<head>
<title>Data Diri Anggota Kepegawaian</title>
</head>
<body>
<center>
<form method="post" name="formpegawai"onSubmit="return cek_data()">
<h1>Data Pribadi</h1>
<table width=80% bgcolor="#CCFF66" bordercolor="#666666" border="1" >
<tr>
<td>Nama</td>
<td>:
<input type="text" name="text_nama" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:
<input type="text" name="text_nama" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:
<input type="text" name="text_nama" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:
<input type="text" name="text_alamat" size="50" maxlength="60">
</td>
</tr>
<tr>
<td>Kota (Sekarang)</td>
<td> :
<input type="text" name="text_kota" size="30" maxlength="30">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="tombol_simpan" value="simpan">
</td>
</tr>
</tr>
</table>
</form>
</center>
</body>
Source code diatas adalah pembentuk form input pegawai dengan
menggunakan HTML murni. Bila anda belum terbiasa dengan pemrograman web
atau tidak mempunyai tools yang memadahi untuk pengembangan web, maka
cukup dengan menggunakan text editor seperti notepad source codee
tersebut telah dapat digunakan. Caranya cukup mudah, yaitu dengan
mengkopinya ke dalam notepad, simpan dengan ekstensi (.html) misal
datapegwai.html. Lalu buka dengan web browser yang tersedia di komputer
anda. Dengan source code diatas maka akan diperoleh bentuk form seperti
di bawah ini.
Lalu setelah tampilan tersebut berhasil, kita akan sedikit bermain-main
dengan javascript. Javascript disini digunakan untuk melakukan evaluasi
apakah data yang dibutuhkan telah diisi atau belum. Kita asumsikan bahwa
seluruh data yang harus diisi adalah penting, sehingga tidak boleh ada
form yang kosong. Dengan begitu, maka tuliskan source code di bawah ini
(source code ini dituliskan pada bagian <head> </head>
<title>Data Diri Anggota Kepegawaian</title>
<script type="text/javascript">
function cek_data(){
if (formpegawai.text_nama.value=="")
{
alert("Nama tidak boleh dikosongkan");
formpegawai.text_nama.focus()
return false
}
if (formpegawai.text_lahir.value=="")
{
alert("Kota lahir tidak boleh dikosongkan");
formpegawai.text_lahir.focus()
return false
}
if (formpegawai.text_tanggal.value=="")
{
alert("Tanggal lahir tidak boleh dikosongkan");
formpegawai.text_tanggal.focus()
return false
}
if (formpegawai.text_alamat.value=="")
{
alert("Alamat tidak boleh dikosongkan");
formpegawai.text_alamat.focus()
return false
}
if (formpegawai.text_kota.value=="")
{
alert("Kota tidak boleh dikosongkan");
formpegawai.text_kota.focus()
return false
}
return true
}
if (formpegawai.text_nama.value=="")
{
alert("Nama tidak boleh dikosongkan");
formpegawai.text_nama.focus()
return false
}
if (formpegawai.text_lahir.value=="")
{
alert("Kota lahir tidak boleh dikosongkan");
formpegawai.text_lahir.focus()
return false
}
if (formpegawai.text_tanggal.value=="")
{
alert("Tanggal lahir tidak boleh dikosongkan");
formpegawai.text_tanggal.focus()
return false
}
if (formpegawai.text_alamat.value=="")
{
alert("Alamat tidak boleh dikosongkan");
formpegawai.text_alamat.focus()
return false
}
if (formpegawai.text_kota.value=="")
{
alert("Kota tidak boleh dikosongkan");
formpegawai.text_kota.focus()
return false
}
return true
}
</script>
Setelah kode javascript tersebut dimasukan, maka kode keseluruhan dari form akan menjadi berikut:
<html>
<head>
<title>Data Diri Anggota Kepegawaian</title>
<script type="text/javascript">
function cek_data(){
if (formpegawai.text_nama.value=="")
{
alert("Nama tidak boleh dikosongkan");
formpegawai.text_nama.focus()
return false
}
if (formpegawai.text_lahir.value=="")
{
alert("Kota lahir tidak boleh dikosongkan");
formpegawai.text_lahir.focus()
return false
}
if (formpegawai.text_tanggal.value=="")
{
alert("Tanggal lahir tidak boleh dikosongkan");
formpegawai.text_tanggal.focus()
return false
}
if (formpegawai.text_alamat.value=="")
{
alert("Alamat tidak boleh dikosongkan");
formpegawai.text_alamat.focus()
return false
}
if (formpegawai.text_kota.value=="")
{
alert("Kota tidak boleh dikosongkan");
formpegawai.text_kota.focus()
return false
}
return true
}
</script>
</head>
<body>
<center>
<form method="post" name="formpegawai"
onSubmit="return cek_data()">
<h1>Data Pribadi</h1>
<table width=80% bgcolor="#CCFF66" bordercolor="#666666" border="1" >
<tr>
<td>Nama</td>
<td>:
<input type="text" name="text_nama" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:
<input type="text" name="text_lahir" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:
<input type="text" name="text_tanggal" size="35" maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:
<input type="text" name="text_alamat" size="50" maxlength="60">
</td>
</tr>
<tr>
<td>Kota (Sekarang)</td>
<td> :
<input type="text" name="text_kota" size="30" maxlength="30">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="tombol_simpan" value="simpan">
</td>
</tr>
</table>
</form>
</center>
</body>
Sekarang perhatikan hasil output dari source code diatas, apabila sebuah
input teks tidak diisikan maka akan muncul konfirmasi yang mengharuskan
form tersebut untuk diisi. Kurang lebih hasilnya akan seperti pada
gambar di bawah ini.
sumber : http://dewa-sumberilmu.blogspot.com
0 komentar:
Posting Komentar