Artikel Teknologi Web

Membuat Formulir Masukan Data

Sebagai Tugas Individu Mata Kuliah Pemrograman Web

Aulia Oktaviana
PTIK/Rombel 1
5302412002

Membuat Formulir Masukan Data

Pada langkah pertama ini kita akan membuat program utama masukan data, yaitu file
bernama FmSiswaIn.php. Program ini berisi formulir masukan yang nantinya tempat anda untuk
entri data. Berikut langkahnya :
1.

Buatlah kembali dokumen baru dengan jenis halaman PHP, yaitu melalui menu File, pilih
menu New, kemudian pada halaman New Pages dapat memilih tombol Dynamic Pages
dan PHP.

2.

Untuk dapat membuat form, Anda dapat mengaktifkan komponen ikon form pada halaman
kerja.

3.

Untuk membuat formulir, pertama Anda harus menambahkan objek form kedalam halaman
kerja. Caranya adalah dengan mengklik ikon form ( ) pada jendela ikon, atau melalui menu
Insert, pilih Form, kemudian pilih Form lagi. Anda akan segera mendapatkan objek form
bergaris merah pada halaman kerja.

Gambar Objek form telah terbuat dalam halaman kerja

4.

Perhatikan pada jendela Properties yang ada pada bagian bawah halaman, sekarang
masukan alamat file penyimpanan program yang nanti akan dibuat, Anda apat menuliskan
alamat FmSiswaSim.php pada kolom Action, dan memberikan nilai POST pada Method.
Berikut contohnya:

Gambar Memberikan alamat penyimpanan pada Form

5.

Sampai saat ini Anda masih didalam objek form, sekarang buatlah objek Tabel ( ) kedalam
halaman kerja (masih didalam objek form). Seperti pelajaran yang lalu, bahwa tabel
digunakan untuk kerangka formulir. Tabel dibuat dengan banyak baris=11 dan kolom=2.
berikut contoh desainnya:

Gambar Desain tabel untuk formulir siswa

6.

Pada pembuatan tabel diatas, kolom yang dibuat adalah sebanyak 2, pada bagian kiri akan
digunakan sebaga label keterangan, dan kolom sebelah kanan akan dijadikan sebagai
tempat objek masukan.

7.

Sekarang tambahkan objek form lengkap dan desainlah setiap komponen formnya beserta
keterangan yang sesu ai dengan struktur database siswa yang hendak diinput.

8.

Kemudian aturlah setiap objek form yang dimasukan melaui jendela Properties, bentuk
pengaturannya dapat melihat pada tabel berikut.

Berikut daftar pengaturan lengkapnya:

Tabel Pengaturan form masukan data siswa
Komponen

Properti

Nilai

Text Field1

TextField Name

FmNis

Char With

Max Char

Keterangan

Nis

TextField Name

FmNama

Char With

30

Max Char

35

Keterangan

Nama Siswa

RadioButton Name

RbKelamin

Checked Value

Initial State

Checked

Text Field2

Radio Button1

Radio Button2

Text Field3

Text Field4

Text Field5

Text Field6

Text Field7

Text Field 8

Radio Button1

Radio Button2

Radio Button3

Button

Keterangan

Kelamin

RadioButton Name

RbKelamin

Checked Value

Initial State

Unchecked

TextField Name

FmAlamatAsl

Char With

40

Max Char

60

Keterangan

Alamat Asal

TextField Name

FmAlamatTgl

Char With

40

Max Char

60

Keterangan

Alamat Tinggal

TextField Name

FmTempatLhr

Char With

25

Max Char

25

Keterangan

Tempat Lahir

TextField Name

FmTgl

Char With

Max Char

Keterangan

Tanggal Lahir

TextField Name

FmThn

Char With

Max Char

TextField Name

FmThn

Char With

Max Char

RadioButton Name

RbAgama

Checked Value

Islam

Initial State

Checked

Keterangan

Agama

RadioButton Name

RbAgama

Checked Value

Hindu

Initial State

Unchecked

RadioButton Name

RbAgama

Checked Value

Budha

Initial State

Unchecked

Button Name

Simpan

Value

9.

Simpan

Setelah selesai menambahkan objek form kedalam kerangka tabel, dan semya objek telah
selesai diatur nilai propertie -nya, maka Anda seharusnya mendapatkan hasil seperti
gambar berikut:

Gambar Hasil desain formulir masukan data siswa

Catatan :
Pada bagian judul tabel, Anda dapat menggunakan fasilitas Merger Cell untuk
menggabungkan dua sell data.

10.

Setelah selesai melakukan pengaturan tata letak objek form, Anda dapat menyimpan
kedalam file bernama FmSiswaIn.php, simpanlah kedalam folder Bab7.

11.

Dari kesemua langkah yang telah dilakukan diatas, apabila Anda masuk pada halaman
kode, maka Anda akan mendapatkan hasil dari setiap langkah tersebut berupa tag -tag
HTML. Berikut adalah listingnya:
<html>
<head>
<title>Form masukan data siswa</title>
</head>
<body>
<form action="FmSiswaSim.php" method="post"
name="form1"
target="_self">
<table width="450">
<tr>
<td colspan="2" bgcolor="#00CCFF">
<b>Masukan Data Siswa</b></td>
</tr>

<tr>
<td width="117">Nis</td>
<td width="321">:
<input name="FmNis" type="text" size="9"
maxlength="9">
</td>
</tr>
<tr>
<td>Nama Siswa </td>
<td>:
<input name="FmNama" type="text" size="30"
maxlength="35">
</td>
</tr>
<tr>
<td>Kelamin</td>
<td>:
<input name="RbKelamin" type="radio"
value="P" checked>
22
Pria
<input type="radio" name="RbKelamin"
value="W">
Wanita </td>
</tr>
<tr>
<td>Alamat Asal</td>
<td>:
<input name="FmAlamatAsl" type="text"
size="40"
maxlength="60"></td>
</tr>
<tr>
<td>Alamat Tinggal</td>
<td>:
<input name="FmAlamatTgl" type="text"
size="40"
maxlength="60"></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:
<input name="FmTempatLhr" type="text"
size="25"
maxlength="25"></td >
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:
<input name="FmTgl" type="text" size="2"
maxlength="2"><input name="FmBln" type="text" size="2"
maxlength="2"><input name="FmThn" type="text" size="4"
maxlength="4">
23
</td>
</tr>

<tr>
<td>Agama</td>
<td>:
<input name="RbAgama" type="radio"
value="Islam" checked>
Islam
<input type="radio" name="RbAgama"
value="Hindu">
Hindu
<input type="radio" name="RbAgama"
value="Buda">
Buda
<input type="radio" name="RbAgama"
value="Kristen">
Kristen
</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="simpan"
value="Simpan">
<input type="reset" name="gagal"
value="Gagal"></td>
</tr>
</table>
</form>
</body>
</html>
12.

Listing program FmSiswaIn.php diatas dapat buat langsung pada halaman kode apabila
Anda mengalami kesulitan dalam mengikuti langkah desain. Setelah selesai, apabila
dijalankan, hasil yang diperoleh adalah:

Gambar Hasil formulir masukan dengan contoh data

Sumber Buku : Latihan Membuat Aplikasi Website dengan PHP

MySQL dan Editor Dreamweaver 8/Cs, Penerbit Gava Media,
Yogyakarta