Kamis, 28 April 2011

Membuat Form Input Dengan PHP dan JavaScript


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>   
</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
    }
</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.
 

4 komentar:

saphirotMe mengatakan...

terima kasih atas artikelnya...sangat membantu...tetap menghasilkan yah...

anindita saktiaji mengatakan...

Makasih atas saran dan masukannya :D

Unknown mengatakan...

mas untuk menghubungkan ke databasenya gimana? kalau bisa tolong dikirim ke email saya untuk tugas kuliah mas! makasih

Anak dunia maya mengatakan...

Makasih gan, sangat membantu.