Modul 4

Modulasi dan Form

1 Tujuan Intruksional
• Lebih memahami teknik modulasi pada PHP
• Lebih memahami penggunaan form HTML
• Memahami elemen-elemen form HTML dan metode pengiriman data pada form

2 Indikator
• Mahasiswa mampu membuat modulasi pada script PHP dan HTML
• Mahasiswa mampu membuat form HTML beserta elemen-elemennya
• Mahasiswa mampu menganalisa permasalahan kompleks dan menerapkan teknik
modulasi pada pemrograman PHP

3 Dasar Teori
3.1 Teknik Modulasi
Konsep teknik modulasi sebenarnya merupakan proses pemisahan sebuah aplikasi
menjadi bagian per bagian agar lebih mudah dalam proses pengembangan atau
maintenance, dengan demikian proses pemeriksaan kesalahan atau debug akan lebih mudah
dan cepat. Setelah program dipisah menjadi bagian-bagian yang lebih kecil, selanjutnya kita
akan menyatukan kembali fungsi-fungsi tersebut di dalam program induk. Proses ini
membutuhkan fungsi built-in yang sudah disediakan oleh PHP untuk menyatukan modul-
modul tersebut agar digunakan secara bersamaan.
3.1.1 Include()
include() digunakan untuk mengikutsertakan file lain ke dalam halaman yang
sedang kita buat. Adapun penggunaanya adalah:
include 'file_modul.php';
3.1.2 Include_once()
include_once(), secara prinsip sama seperti pada include(), dari segi
penggunaannya dan terminologi lainnya. Akan tetapi, dengan menggunakan
include_once(), maka file yang sama tidak boleh dimasukkan lebih dari satu – jadi hanya
satu file yang dapat dimasukkan – ke helaman utama. Adapun penggunaannya adalah:
include_once 'file_modul.php';
3.1.3 Require() Dan Require_once()
Sama seperti pada include() dan include_once(), yaitu melakukan proses
penggabuangan dengan file-file lain ke dalam halaman induk. Perbedaan yang mendasar
adalah require() dan require_once() akan memberikan informasi fatal error jika file
yang bersangkutan tidak ditemukan atau terjadi kesalahan pada file tersebut dan halaman
web akan berhenti sehingga script lainnya tidak akan dieksekusi. Cara penggunaannya sama
dengan cara penggunakan include() dan include_once().

1 Pemrograman Web | Modul 4 – Modulasi dan Form

 3.2 Form
Pada bagian ini akan dijelaskan sekilah tentang elemen-elemen form. Perhatikan cara
membuat form berikut ini.
<form id="form1" name="form1" method="post" action="">
.... isi elemen form
</form>
Dimana tag <form> memiliki atribut sebagai berikut:
• Id, merupakan nama identitas; akan digunakan pada saat menggunakan JavaScript
dengan fungsi getElementById().
• Name, nama dari form untuk digunakan pada saat kita melukan proses data dari form.
• Method, cara form melakukan proses pengiriman data. Secara default akan
menggunakan POST, tetapi kita dapat menggunakan parameter GET.
• Action, digunakan untuk memasukkan file yang berfungsi untuk mengolah data dari
from tersebut.
3.2.1 Elemen Form
Berikut ini daftar elemen form yang dapat digunakan:
a. Elemen TextField
Digunakan untuk menerima input dari user, sintaksnya adalah:
<input type="text" id="nama" name="nama" />
b. HiddenField
Digunakan untuk mengirimkan informasi secara tersembunyi, tag HTML-nya sebagai
berikut:
<input type="hidden" id="nim" name="nim" value="1113100">
c. Textare
Digunakan untuk menerima input dari user dalam bentuk beberapa baris, perhtikan
tag HTML berikut:
<textarea name="komentar" id="komentar"></textarea>
d. Checkbox
Digunakan untuk memilih data yang lebih dari satu pilihan berdasarkan daftar
checkbox tersebut.
<input type="checkbox" id="id" name="id" value="1">
e. Radio button
Digunakan untuk melakukan pemilihan data dengan hanya memilih satu data/satu
pilihan saja.
<input type="radio" id="hoby" name="hoby" value="menari">
f. List/Menu
Digunakan untuk memilih salah satu dari daftar pilihan.

2 Pemrograman Web | Modul 4 – Modulasi dan Form

 <select id="hoby" name="hoby">
<option value="menari">Menari</option>
<option value="melukis">Melukis</option>
<option value="makan">Makan</option>
</select>
g. File field
Digunakan untuk menampilkan field yang berguna untuk mengambil data dar client
untuk dikirim ke server (Uploading data). Perhatikan tag FileField berikut ini:
<input type="file" id="imageFile" name="imageFile">
h. Button
Berfungsi untuk melakukan proses data yang ada di dalam form untuk diolah pada
script PHP. Sintaksnya seperti berikut:
<input type="submit" id="btnSimpan" name="btnSimpan"
value="Simpan">
3.2.2 Parameter POST Dan GET
Ketika elemen-elemen dikirim ke halaman pengolahan data, maka informasi yang ada
pada setiap elemen form tersebut dapat dikenali oleh PHP. Terdapat beberapa cara untuk
mengakses informasi tersebut yaitu dengan menggunakan parameter POST dan GET.
Perbedaan keduanya adalah:
• POST, digunakan untuk mengambil informasi yang dikirim lewat elemen-elemen
form sebagai parameter POSTING. Sintaks yang digunakan adalah sebagai berikut:
$user = $_POST['username'];
• GET, digunakan untuk mengambil informasi yang dikirim lewat URL parameter.
Sintaksnya adalah sebagai berikut:
$user = $_GET['user'];
Perlu diingat bahwa sintaks ini menggunakan penulisan case-sensitive.

4 Petunjuk Praktikum
Sebuah program menerima input biodata mahasiswa yang meliputi, nama, jenis
kelamin, tempat lahir, tanggal lahir, alamat dan menampilkan informasi tersebut ke layar
serta menghitung umurnya.
Pada ujicoba ini, akan dibuat elemen form dinamis untuk pemilihan tanggal lahir,
dengan menggunakan proses perulangan. Selanjutnya data akan dikirim dan diproses pada
file PHP lain. Terlebih dahulu buatlah halaman utama dengan praktikum_4.php dan
masukkan script berikut:
<!DOCTYPE html>
<html>
<head>
<title>Praktikum 4 - Pemrograman Web</title>
</head>
<body>
<div align="">

3 Pemrograman Web | Modul 4 – Modulasi dan Form

 <form action="proses_simpan.php" method="post">
<h4>Biodata Mahasiswa</h4>
<label>Nama Mahasiswa:</label>
<input type="text" name="nama"> <br/>
<label>Jenis Kelamin:</label>
<input type="radio" name="jenis" value="Laki-Laki">
Laki-Laki
<input type="radio" name="jenis" value="Perempuan">
Perempuan <br/>
<label>Tempat Lahir:</label>
<input type="text" name="tempat"> <br/>
<label>Tanggal Lahir:</label>
<select name="tanggal">
<?php for($i = 1; $i <= 31; $i++){ ?>
<option value="<?php echo $i; ?>"><?php
echo $i; ?></option>
<?php } ?>
</select> /
<select name="bulan">
<?php for($i = 1; $i <= 12; $i++){ ?>
<option value="<?php echo $i; ?>"><?php
echo $i; ?></option>
<?php } ?>
</select>/
<select name="tahun">
<?php for($i = date('Y'); $i >= (date('Y')-20);
$i--){ ?>
<option value="<?php echo $i; ?>"><?php
echo $i; ?></option>
<?php } ?>
</select><br/>
<label>Alamat:</label>
<textarea name="alamat"></textarea> <br/>
<button type="submit">Simpan</button>
<hr/>
</form>
</div>
</body>
</html>
Pada contoh diatas, tag form menggunakan metode post dan action menuju ke file
proses_simpan.php yang nantinya akan kita buat. Terdapat pula beberapa elemen yang
dibuat menggunakan perulangan, yaitu list untuk tangga, bulan dan tahuan. Pada bagian ini
menunjukkan bahwa elemen form atau elemen HTML dapat dibuat secara dinamis
menggunakan script PHP.
Pada pilihan tanggal, akan dilakukan perulangan dari angka 1 sampai angka 31, begitu
juga pada piliihan bulan, akan dilakukan perulangan dari angka 1 sampai angka 12 dengan
incement +1. Namun pada pilihan tahun, dilakukan perulangan dengan nilai awal tahun
sekarang yang ditunjukkan pada expres $i = date(‘Y’). Ekspresi ini akan memberikan
nilai pada variabel $i dengan tahun sekarang. Selanjutnya akan dilakukan pengecekan
apakah variabel $i lebih kecil dari tahun sekarang dikurangi 20. Jika iya, script yang berada

4 Pemrograman Web | Modul 4 – Modulasi dan Form

 pada perulangan tersebut akan dijalankan dan dilakukan decrement -1 pada variabel $i.
Sehingga pilihan tahun yang ditampilkan terurut dari yang besar sampai tahun terkecil
sebanyak 20 tahun. Jika script diatas dijalankan akan tampil seperti berikut ini:

Langkah selanjutnya adalah membuat file PHP baru untuk melakukan proses
mengambilan dan menampilkan data. Pada tahap ini akan dibuat dua buah file PHP yaitu file
hitung_umur.php dan proses_simpan.php dimana file hitung_umur.php akan dipanggil oleh
proses simpan.php. Terlebih dahulu buatlah file hitung_umur.php dan masukkan script
berikut:
<?php

$thn_sekarang = date('Y');
$umur = $thn_sekarang - $tahun;

?>

<tr>
<td>Umur</td>
<td>:</td>
<td><?php echo $umur; ?> Tahun</td>
</tr>
Script diatas, menunjukkan bahwa file ini hanya melakukan perhitungan umur dengan
cara mengurangi tahun sekarang dengan tahun lahir yang diinputkan dari biodata.
Selanjutnya buatlah file proses_simpan.php dan masukkan script berikut:
<?php

$nama = $_POST['nama'];
$jenis = $_POST['jenis'];
$tempat = $_POST['tempat'];
$tgl = $_POST['tanggal'];
$bulan = $_POST['bulan'];
$tahun = $_POST['tahun'];
$alamat = $_POST['alamat'];

?>

<!DOCTYPE html>
<html>

5 Pemrograman Web | Modul 4 – Modulasi dan Form

 <head>
<title>Biodata Mahasiswa - Pemrograman Web</title>
</head>
<body>
<div align="center">
<h4>Biodata Mahasiswa</h4>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><?php echo $nama; ?></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><?php echo $jenis; ?></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><?php echo $tempat; ?></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><?php echo $tgl."-".$bulan."-".$tahun;
?></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><?php echo $alamat; ?></td>
</tr>

<?php include "hitung_umur.php"; ?>

</table>
</div>
</body>
</html>
Pada script diatas yaitup file proses_simpan.php, terlihat bahwa pada file ini terdapat
script untuk mengambil data dari form melalui metode post dan selanjutnya data-data
tersebut ditampilkan pada sebuah tabel HTML. Pada script PHP diatas ada baris yang dicetak
tebal dan diberi marker warna kuning, terdapat script untuk memanggil file lain yaitu
hitung_umur.php dengan menggunakan keyword include(). Sehingga apapun yang
dijalankan oleh script pada file hitung_umur.php akan dilakukan pada baris tersebut
termasuk menampilkan data. Jika dijalankan output dari dari program diatas adalah sebagai
berikut:

6 Pemrograman Web | Modul 4 – Modulasi dan Form

 Proses input data Hasil tampilan data

7 Pemrograman Web | Modul 4 – Modulasi dan Form