Modul Praktikum Pemrograman Web

MODUL V
FORM
(PERTEMUAN KE 5)

Tujuan
1. Mahasiswa dapat memahami dan mengaplikasikan form dalam pemrograman web dan dapat
melakukan pengolahan data menggunakan bahasa pemrograman PHP.
2. Mahasiswa dapat memahami dan mengaplikasikan form input type text, radio, check box, combo
box, text area dan melakukan pengolahan inputan data menggunakan bahasa pemrograman PHP.
DASAR TEORI
Dalam pemprograman web form ialah suatu tools dalam membatu interaksi aplikasi web dengan user,
dengan adanya form user dapat memanipulasi jalannya sistem sesuai dengan keinginan. Dalam form,
dibutuhkan pembuka dan penutup tag form untuk menampung untuk menampung input yang ada.
Adapun pembuka dan penutup tag form ialah sebagai berikut:
<form action="action.php" method="GET/POST">
{Jenis input}
</form>

Pada form biasanya dibutuhkan minimal dua atribut yaitu action dan method. Action berisi halaman
atau file tujuan untuk memproses inputan dalam form, sedangkan method berisi tentang metode
pengiriman data yang akan digunakan (GET atau POST).
Terdapat dua metode pengiriman data yang digunakan dalam form, yaitu metode GET dan POST.
Metode GET berarti input user dikirim ke halaman atau file action melalui address bar, sedangkan
metode POST berarti input user tidak dikirim melalui address bar.
Adapun beberapa jenis input pada form, diantaranya ialah sebagai berikut :
1. Form Input Type Text
Text berate input merupakan string biasa satu baris. Adapun syntak type text ialah:
<input type = “text” name=”nama_input_text”/>

2. Form Input Type Radio

Type radio ialah tipe inputan yang memberikan user pilihan, namun user hanya dapat
memilih salah satu saja dari beberapa pilihan tersebut. Biasanya digunakan untuk
pilihan agama, jenis kelamin dan lainnya yang bersifat diskrit. Apapun syntaknya type
radio ialah:
<input type="radio" name="JK" value="Pria" /> Pria </b>

3. Form Input Type Check Box

Type check box ialah tipe inputan yang memberikan user pilihan, namun user dapa
memilih lebih dari satu pilihan atau tidak memilih sama sekali. Adapun contoh syntak
type check box ialah:
<input type="checkbox" name="hobby" value="Joging" /> Joging </b>

Program Studi Informatika Fakultas Teknik Universitas Janabadra 42

 Modul Praktikum Pemrograman Web

4. Form Input Type Combo Box

Combo box biasanya digunakan untuk membuat user memilih salah satu dari banyak
pilihan, fungsi combo box sama dengan radio akan tetapi tampilan menunya yang
berbeda. Adapun contoh syntak type combo box ialah:
<select name="hari">
<option value="senin">Senin</option> <option
value="selasa">Selasa</option> <option
value="rabu">Rabu</option> <option
value="kamin">Kamis</option> <option
value="jumat">Jumat</option> <option
value="sabtu">Sabtu</option> <option
value="minggu">Minggu</option>
</select>

5. Form Input Type Text Area

Type text area biasanya digunakan untuk kalimat-kalimat yang cukup panjang seperti
alamat. Adapun contoh syntak type text area ialah:
<textarea name="alamat"></textarea>
6. Mengupload file
Pada pemprograman berbasis website seperti PHP fasilitas upload file sangat lumrah
dibutuhkan, file-file yang disimpan dalam server dari proses upload dapat membantu
dalam sebuah website. Adapun fungsi-fungsi yang dapat digunakan untuk mengupload
file ialah:
 Is_uploaded_file()
Berfungsi untuk untuk konfirmasi ada atau tidaknya proses terjadinya upload file.
Contoh penulisan:
Is_uploaded_file($_FILES [„file‟][„tmp_name‟]);

 move_uploaded_file()
Dimana fungsi dari fungsi ini ialah untuk melakukan pengcopy-an pada path
distionasion ke bagian server. Contoh:
$dirktori = „upload/‟;
$uploadfile = $dirktori . $_FILES[„file‟][„tmp_name‟];
move_uploaded_file($_FILES [„file‟][„tmp_name‟], $uploadfile);

pada sintak di atas fungsi move_uploaded_file ialah memindahkan file ke dalam

direktori atau folder yang sudah ditentukan contoh folder upload yang telah disediakan.
Adapun variabel global $_files upload yang dapat digunakan antara lain:
Variabel Keterangan
$_ FILES[“$file_nama”][“name”] Menampilkan nama file
$_ FILES[“$file_nama”][“type”] Menampilkan tipe file

Program Studi Informatika Fakultas Teknik Universitas Janabadra 43

 Modul Praktikum Pemrograman Web

$_ FILES[“$file_nama”][“size”] Menampilkan ukuran file dalam byte

$_ FILES[“$file_nama”][“tmp_name”] Menampilkan nama temporary file
$_ FILES[“$file_nama”][“error”] Menampilkan kode error pada upload

* $file_name adalah nama variabel yang bererisi file yang diupload.

KEGIATAN PRAKTIKUM

1. Program Form Input Text, Salin coding di bawah ini:

<html>
<head>
<title>Form Input Text</title>
</head>

<body>

<form id="form_text" name="form_text" method="POST"

action="Proses_text.php">
<p>NIM <input type="text" name="nim"
id="nim" /></p> <p>Nama <input
type="text" name="nama"
id="nama"/></p> <p><input
type="submit" name="Button"
id="Button"
value="Tampil"/></p>
</form>

</body>
</html>

Setelah selesai mengetik coding di atas, maka simpan dengan nama form_text.php dan buka
file baru dan salin coding di bawah ini :
<?php
$nim = $_POST['nim'];
$nama = $_POST['nama'];

echo "NIM : $nim <br>";

echo "Nama : $nama <br>";
?>

Simpan file baru tersebut dengan nama roses_text.php dan letakkan di folder yang sama dengan
form_text.php. Lalu jalankan form_text.php di browser, Maka pada browser akan muncul hasil
sebagai berikut:

Program Studi Informatika Fakultas Teknik Universitas Janabadra 44

 Modul Praktikum Pemrograman Web

Bila tombol tampil di tekan, maka muncul hasil :

2. Program Form Input Radio, Salin Koding dibawah ini :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator sederhana</title>
</head>
<body>
<form id="form_text" name="form_text" method="POST"
action="proses_hitung.php">
<table width="400" cellspacing="0" cellpading="3">
<tr>
<td>Angka 1</td>
<td>: <input type="text" name="angka1" /></td>
</tr>
<tr>
<td>Operator</td>
<td><input type="radio" name="operator" value="tambah"> +
<input type="radio" name="operator" value="kurang"> -
<input type="radio" name="operator" value="kali"> *
<input type="radio" name="operator" value="bagi"> /
<input type="radio" name="operator" value="modulo"> % </td>
</tr>
<tr>
<td>Angka 2</td>
<td>: <input type="text" name="angka2" /></td>
</tr>
<tr>
<td></td>
<td><br><input name="submit" type="submit" value="Hitung">
<input name="Reset" type="reset" value="CLEAR"></td>
</tr>
</table>
</form>

</body>
</html>

Setelah selesai mengetik coding di atas, maka simpan dengan nama kalkulator.html dan buka
file baru dan salin coding di bawah ini :

Program Studi Informatika Fakultas Teknik Universitas Janabadra 45

 Modul Praktikum Pemrograman Web

<?php
$angka1=$_POST['angka1'];
$angka2=$_POST['angka2'];
$operator=$_POST['operator'];

if($operator=="tambah"){
$hasil=$angka1+$angka2;
}else if ($operator=="kurang"){
$hasil=$angka1-$angka2;
}else if ($operator=="kali"){
$hasil=$angka1*$angka2;
}else if ($operator=="bagi" && $angka2!=0){
$hasil=$angka1/$angka2;
}else if ($operator=="bagi" && $angka2==0){
$hasil="<b>Error Pembagi 0</b>";
}else if ($operator=="modulo" && $angka2!=0){
$hasil=$angka1%$angka2;
}else if ($operator=="modulo" && $angka2==0){
$hasil="<b>Error Pembagi 0</b>";
}
echo"<br> Hasil dari $angka1 di$operator $angka2 = $hasil";
?>

Simpan file baru tersebut dengan nama proses hitung.php dan letakkan di folder yang sama dengan
kalkulator.html. Lalu jalankan kalkulator.html di browser, Maka pada browser akan muncul hasil
sebagai berikut:

Bila tombol Hitung di tekan, maka muncul hasil :

3. Program Form Input CheckBox, Salin koding dibawah ini :

Program Studi Informatika Fakultas Teknik Universitas Janabadra 46

 Modul Praktikum Pemrograman Web

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Input Checkbox</title>
</head>
<body>
<p>Pilih Game yang disukai</p>
<FORM NAME="form_checkbox" METHOD="POST"

ACTION="proses_checkbox.php">

<input type="checkbox" name="game1" value="Dota 2"> Dota

2<br>

<input type="checkbox" name="game2" value="Mobile Legend">

Mobile Legend<br>

<input type="checkbox" name="game3" value="Counter Strike">

Counter Strike<br>

<input type="checkbox" name="game4" value="Tidak Menyukai

Game"> Tidak ada<br>

<input type="submit" name="Pilih" value="Pilih"> </FORM>

</body>
</html>
Setelah selesai mengetik coding di atas, maka simpan dengan nama form_checkbox.html dan buka
file baru dan salin coding di bawah ini :
<?php
echo "Hobi Anda Adalah :<br>";
if (isset($_POST['game1'])) {
echo "+ " . $_POST['game1'] . "<br>";
}
if (isset($_POST['game2'])) {
echo "+ " . $_POST['game2'] . "<br>";
}
if (isset($_POST['game3'])) {
echo "+ " . $_POST['game3'] . "<br>";
}
if (isset($_POST['game4'])) {
echo "+ " . $_POST['game4'] . "<br>";
}
?>

Simpan file baru tersebut dengan nama proses_checkbox.php dan letakkan di folder yang sama
dengan form_checkbox.html. Lalu jalankan form_checkbox.html di browser, Maka pada browser
akan muncul hasil sebagai berikut:

Program Studi Informatika Fakultas Teknik Universitas Janabadra 47

 Modul Praktikum Pemrograman Web

Bila tombol Proses di tekan, maka muncul hasil :

4. Program Form Input ComboBox, salin koding dibawah ini :

<html>
<head>
<title>Form Input ComboBox</title>
</head>
<body>
<p>Binatang apa yang Anda suka?</p>
<form id="form_combobox" name="form_combobox" method="POST"
action="Proses_combobox.php">
<select name="favorit">
<option value="Kucing">Kucing</option>
<option value="Anjing">Anjing</option>
<option value="Burung">Burung</option>
<option value="Sapi">Sapi</option>
<option value="Kambing">Kambing</option>
</select>
<p></p>
<p><input type="submit" name="button" value="Tampil"/></p>
</form>

Setelah selesai mengetik coding di atas, maka simpan dengan nama form_combobox.php dan buka
file baru dan salin coding di bawah ini :
<?php
$binatang = $_POST['favorit'];
echo "Binatang yang anda sukai ialah $binatang";
?>

Simpan file baru tersebut dengan nama proses_combobox.php dan letakkan di folder yang sama
dengan form_combobox.php. Lalu jalankan form_combobox.php di browser, Maka pada browser
akan muncul hasil sebagai berikut:

Program Studi Informatika Fakultas Teknik Universitas Janabadra 48

 Modul Praktikum Pemrograman Web

Bila tombol Proses di tekan, maka muncul hasil :

5. Program Form Input TextArea, buka file baru dan salin koding dibawah ini:
<html>
<head>
<title>Form Input Text
Area</title> </head>

<body>
<p>Masukkan komentar atau pendapat anda!</p>

<form id="form_area" name="form_area" method="POST"

action="Proses_area.php">
<textarea name="komen"></textarea><br/>
<p></p>
<p><input type="submit" name="button" value="Tampil"/></p>

</form>

</body>
</html>

Setelah selesai mengetik coding di atas, maka simpan dengan nama form_radio.php dan buka file
baru dan salin coding di bawah ini :
<?php
$komentar = $_POST['komen'];
echo "Komentar atau Pendapat
Anda :<br/>"; echo
"$komentar";
?>

Simpan file baru tersebut dengan nama proses_radio.php dan letakkan di folder yang sama dengan
form_radio.php. Lalu jalankan form_radio.php di browser, Maka pada browser akan muncul hasil
sebagai berikut:

Program Studi Informatika Fakultas Teknik Universitas Janabadra 49

 Modul Praktikum Pemrograman Web

Bila tombol Proses di tekan, maka muncul hasil :

6. Program Upload File, salin koding dibawah ini :

<html>
<head>
<title>Form Upload File</title>
</head>

<body>
<FORM ENCTYPE="multipart/form-data" METHOD="POST"
ACTION="proses_upload.php">
<p>Pilih File : <input type="file"
name="file"></p> <input type="submit"
name="Button" value="Upload">
</FORM>
</body>
</html>

Setelah selesai mengetik coding di atas, maka simpan dengan nama form_upload.php dan buka file
baru dan salin coding di bawah ini :
<?php
$dir_upload = "files/";
$uploadfile = $dir_upload . $_FILES['file']['name'];

if (is_uploaded_file($_FILES['file']['tmp_name'])) {
$kirim = move_uploaded_file
($_FILES['file']['tmp_name'], $uploadfile);
if ($kirim) {
echo "File berhasil diupload ke server pada folder
<b>$uploadfile</b>";
} else {
echo "File gagal diupload";
echo "error : ", $_FILES['file']['error'];
}
}
?>

Program Studi Informatika Fakultas Teknik Universitas Janabadra 50

 Modul Praktikum Pemrograman Web

Simpan file baru tersebut dengan nama proses_upload.php dan letakkan di folder yang sama
dengan form_upload.php. Lalu jalankan form_upload.php di browser, Maka pada browser akan
muncul hasil sebagai berikut:

Untuk mencari file yang akan diupload kita harus menekan tombol choose file... , setelah
menekan tombol choose file… maka akan muncul jendela windows untuk memilih file yang
akan diupload.

Setelah memilih file, tekan tombol Upload file. Maka akan muncul hasil seperti berikut :

TUGAS
1. Buatlah program tampil biodata menggunakan 5 form input di atas!
2. Buatlah form login sederhana.

Program Studi Informatika Fakultas Teknik Universitas Janabadra 51