Kelompok 2 - Laporan 5

Laporan Praktikum 5
“Form dan Validasi”

Praktikum Pemrograman Berbasis Web
Nama Kelompok
Nafa Zulfa 140533604432
Radha Nia Afika Sari 140533602886
Setiawan 140533603042
PTI E 2014
S1 PENDIDIKAN TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
FAKULTAS TEKNIK
UNIVERSITAS NEGERI MALANG
Oktober, 2016
Laporan Praktikum 5
“Form dan Validasi”
A. TUJUAN PEMBELAJARAN
1. Memahami konsep dasar transfer data dari form HTML.
2. Mampu menangani masukan data dari form HTML.
3. Mampu melakukan inisiasi nilai pada elemen-elemen form HTML. Mampu memahami
tentang pemrosesan validasi form.
B. DASAR TEORI
1. Form
Pemrosesan Form Pemrosesan form (form processing) merupakan operasi
mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah
ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu
diperlukan sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika
administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung.
Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun
aplikasi web yang interaktif. Pada aplikasi web, teknik pengiriman form dapat dilakukan
melalui tiga metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP,
parameter-parameter GET dapat dibaca melalui superglobal $_GET, sedangkan POST
melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.
2. Validasi Form
Validasi form merupakan hal yang harus diperhatikan dalam pembuatan web.
Untuk melakukan validasi bisa menggunakan Javascript maupun PHP script.
Perbedaannya dari keduanya, jika Javascript akan diproses disisi client, PHP script akan
diproses disisi server.
3. Komponen Form HTML
Form <FORM ACTION=action base> form tags </FORM>
<FORM METHOD=method> form tags </FORM> <FORM
ENCTYPE=media type> form tags </FORM>
<FORM ACTION=action base TARGET="target
window name"> form tags </FORM> <FORM
SCRIPT=URL> form tags </FORM>
Note: target window name diisikan berupa:
_blank _self _parent _top
Check Box <INPUT TYPE=CHECKBOX NAME=name VALUE=value>
<INPUT TYPE=CHECKBOX NAME=name VALUE=value
CHECKED>
File <INPUT TYPE=FILE NAME=name>
Hidden <INPUT TYPE=HIDDEN NAME=name VALUE=value>
Password <INPUT TYPE=PASSWORD NAME=name> <INPUT
TYPE=PASSWORD NAME=name MAXLENGTH=length>
<INPUT TYPE=PASSWORD NAME=name SIZE=size>
<INPUT TYPE=PASSWORD NAME=name VALUE=value>
Radio Button <INPUT TYPE=RADIO NAME=name VALUE=value>
<INPUT TYPE=RADIO NAME=name VALUE=value
CHECKED>
Reset <INPUT TYPE=RESET>
Submit <INPUT TYPE=SUBMIT> <INPUT TYPE=SUBMIT
NAME=name> <INPUT TYPE=SUBMIT VALUE=value>
Button <INPUT TYPE=BUTTON> <INPUT TYPE=BUTTON
NAME=name> <INPUT TYPE=BUTTON VALUE=value>
Text <INPUT TYPE=TEXT NAME=name> <INPUT TYPE=TEXT
NAME=name MAXLENGTH=length> <INPUT TYPE=TEXT
NAME=name SIZE=size> <INPUT TYPE=TEXT
NAME=name VALUE=value>
Select <SELECT NAME=name> <OPTION VALUE=value>
content </OPTION> </SELECT>
Text Area <TEXTAREA NAME=name COLS=columns ROWS=rows>
content </TEXTAREA>
C. LATIHAN
1. Menangani Masukan data
a) Ketikan Kode berikut
Demo_Get.PHP
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Metode Get</title>
</head>
<body>
<form action="<?php $_SERVER ['PHP_SELF']; ?>" method
="get">
nama
<input type="text" name ="nama" /><br />
<input type="submit" value="OK"/>
</form>
<?php
if (isset($_GET ['nama'])) {
echo 'hallo' .$_GET ['nama'];
}
?>
</body>
</html>
Demo_Post.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Metode Post</title>
</head>
<body>
<form action="<?php $_SERVER ['PHP_SELF']; ?>"
method ="post">
nama
</form>
<?php
if (isset($_POST ['nama'])) {
echo 'hallo' .$_POST ['nama'];
}
?>
</body>
</html>
Demo_requet.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> identifikasi metode</title>
</head>
<body>
method ="post">
nama
</form>
<?php
if (isset($_REQUEST ['nama'])) {
echo 'metode' .$_SERVER
['REQUEST_METHOD'];
}
?>
</body>
</html>
b) Hasil
c) Penjelasan
Pada Program diatas menggunakan tiga pendekatan yaiu get,post dan
request. Dalam konteks PHP, parameter-parameter GET dapat dibaca melalui
superglobal $_GET, sedangkan POST melalui $_POST. Selain itu, keduanya juga
dapat dibaca menggunakan $_REQUEST.
2. Prefilling Text Field
a) Ketikan Program Berikut :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> prefilling Text Field </title>
</head>
<body>
method ="post">
Nama
<input type="text" name ="nama"
value="<?php
echo isset($_POST['nama'])? $_POST['nama']:'';
?>" /> <br />
</form>
<?php
if (isset($_POST ['nama'])) {
echo $_POST['nama'];
}
?>
</body>
</html>
b) Hasil :
c) Penjelasan :
Program diatas menggunakan metode post dan menggunakan prefilingttext
field. Text field digunakan untuk menginputkan nilai kemudian submit Ok untuk
mendapatkan mengeksekusi nilai yang diinputkan. Nilai akan dicheck apakah
dalam text field ada atau tidak, jika terisi maka saat disubmit akan memunculkan
nilai.
3. Mendapatkan Radio Button
a) Ketikan Program berikut
Radiobutton.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Radio Buton </title>
</head>
<body>
method ="post">
Jenis Kelamin
<input type="radio" name="sex" value="Pria" />
Pria
<input type="radio" name="sex" value="wanita"
/> Wanita <br>
<input type="submit" value="Ok">
</form>
<?php
if (isset($_POST['sex'])) {
echo $_POST['sex'];
}
?>
</body>
</html>
Prefillradiobutton.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> prefill Data Radio Buton </title>
</head>
<body>
method ="post">
Jenis Kelamin
<input type="radio" name="sex" value="Pria"
checked
<?php
if ($_POST['sex']=='Pria') {
echo 'checked="checked"';
}
?>
/> Pria
<input type="radio" name="sex" value="wanita"
<?php
if ($_POST['sex']=='Wanita') {
echo 'checked="checked"';
}
?>
/> Wanita <br>
<input type="submit" value="Ok">
</form>
<?php
if (isset($_POST['sex'])) {
echo $_POST['sex'];
}
?>
</body>
</html>
b) Hasil
c) Penjelasan
Program diatas menggunakan fungsi radio button dan metode post sehingga
data tidak ditampilkan pada url. Setelah memilih salah satu dari pilihan yang
tersedia dan menekan tombol ok maka hasil akan muncul pada bagian bawah dan
radio button akan kembali seperti semula, tidak ada yang tercentang.
4. Menangani Nilai Seleksi
a) Ketikkan kode berikut
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
method ="post">
Pekerjaan
<select name="job">
<option value="Mahasiswa"> Mahasiswa
<option value="ABRI">ABRI
<option value="PNS">PNS
<option value="Swasta">Swasta
</select> <br />
<input type="submit" value="ok" />

</form>
<?php
if (isset($_POST['job'])) {
echo $_POST['job'];
}
?>
</body>
</html>
b) Hasil
c) Penjelasan
Program ini menggunakan combobox untuk menampilkan pilihan
pekerjaan yang dapat dipilih. Kemudian jika disubmit dengan button Ok maka akan
muncul jenis pekerjaan yang dipilih.
5. Menangani Nilai Check Box
a) Ketikkan kode berikut
Demo_checkbox.php
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
method ="post">
Hobi
<input type="checkbox" name="hobby[]"
value="Membaca"> Membaca
value="Olahraga"> Olahraga
value="Menyanyi"> Menyanyi <br />
</form>
<?php
//ekstraksi Nilai
if (isset ($_POST ['hobby'])) {
foreach ($_POST ['hobby'] as $key =>

$val) {
echo $key . '->' .$val .'<br /> ';
}
}
?>
</body>
</html>
b) Hasil :
c) Penjelasan
Pada program diatas menggunakan checkbox untuk mencentang/ memilih
hoby . Pada program diatas menggunakan preselected seperti pada latihan 4, yaitu
menahan nilai untuk tetap ditampilkan. Pada program ini menyisipkan selected
pada bagian perkondisian if. Program diatas menampilkan hasil nilai yang
terseleksi lebih dari satu, dengan kata lain dapat menyeleksi lebih dari satu radio
button, kemudian ditampilkan dengan penomoran mulai dari 0. Menggunakan
checkbox untuk memilih hobi dari hobi yang tersedia.
6. Validasi Form
a) Berbasis JavaScript
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> validasi Form javascript </title>
<script type="text/javascript">
function pesan(){
var ceknama
=document.identitas.nama.value;
var cekumur
=document.identitas.umur.value;
var
cekemail=document.identitas.email.value;
if (ceknama.length == 0) {
alert("anda belum memasukan nama
anda");
return false;
} else if ((cekumur<0) || (isNaN

(cekumur)) || (cekumur.length == 0)){
alert ("input umur anda salah");
return false;
}else if ((cekemail.length == 0) ||
(cekemail.indexOf("@",1) == -1)) {
alert ("periksa kembali alamat
email anda");
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form action="<?php $_SERVER ['PHP_SELF'];?>"
name="identitas" method="post"onsubmit="return pesan()">
Nama : <input type="text" name="nama"><br />
Umur : <input type="text" name="umur"> tahun
<br />
Email: <input type="text" name="email" <br />
<input type="submit" name="email"> <br/>
</form>
</body>
</html>
b) Berbasis php script
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> validasi Form javascript </title>
</head>
Silakan isi Identitas Anda : <br />
<body>
<form action="<?php $_SERVER ['PHP_SELF'];?>"
name="identitas" method="post"onsubmit="return pesan()">
Nama : <input type="text" name="nama"><br />
Umur : <input type="text" name="umur"> tahun
<br />
Email: <input type="text" name="email" <br />
<input type="submit" name="submit"
value="submit" />
</form>
<?php
if (isset($_POST ['submit'])) {
$nama=$_POST["nama"];
$umur=$_POST["umur"];
$email=$_POST["email"];
if (strlen($nama) == 0) {
echo "<br /> Silakan Masukan Nama
Anda";
} else if ((trim($umur) == '')||

($umur<0) || (ereg('[^0-9]', $umur))) {
echo "<br /> input umur Anda

salah";
} else if (!filter_var
($email,FILTER_VALIDATE_EMAIL )) {
echo "<br /> Email anda salah";
} else {
echo "<br /> Inputan anda sudah
benar";
}
}
?>
</body>
</html>
c) Berbasi html5
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> html5</title>
</head>
<body>
<form>
Nama : <input type="text" placeholder="nama Lengkap harus
diisi" required /> <br/>
Nama Lengkap : <input type="date" /><br />
Tanggal dan waktu :<input type="datetime" /><br/>
Bulan: <input type="month" /> <br />
Waktu: <input type="time" /> <br />
Minggu: <input type="week" /> <br />
Email: <input type="email" placeholder="email /"> <br />
URL: <input type="email" placeholder="URL dengan HTTP /">
<br />
Nomor Urut : <input type="number" min="1" max="10" /> <br
/>
Nomor telepon :<input type="tel" /><br />
<input type="submit" nama ="submit" value="submit" />
</form>
</body>
</html>
d) Hasil :
e) Penjelasan :
Program diatas menggunakan javascript, PHP, dan HTML untuk membuat validasi
form.
D. TUGAS PRAKTIKUM
 Kode Program :
Login.html
<head><title>Login</title>
<link rel="stylesheet" href="Login.css" type="text/css"/>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function checkUserName(user)
{
re = /^\D{3,}$/;
return re.test(user);
}
function checkPass(user)
{
re = /^\D{3,}$/;
return re.test(user);
}
function checkForm(cek)
{
if (!checkUserName(cek.username.value))
{
alert("Masukkan Username Anda!");
cek.username.focus();
return false;
}
if (!checkPass(cek.password.value))
{
alert("Masukkan Password Anda!");
cek.pin.focus();
return false;
}
return true;
}
</script>
<div id="form">
<h2 align="center">Login</h2>
<form action="Login.php" method="POST" NAME="input" onSubmit="return
checkForm(this)">
<div id="Input">
Username:<br /><input type="text" name="username"/><br />
Password:<br /><input type="password" name="password"/><br />
</div>
<div id="btnLogin">
<input type="submit" name="Login" value="Login">
</div>
</form>
</div>
</body>
</html>
Login.php
<?php
if (isset($_POST['Login']))
{
$user = $_POST['username'];
$pass = $_POST['password'];
if($user == "Setiawan" && $pass == "Setiawan")
{
echo"<h2>Login Berhasil!</h2>";
echo"<h3>ID Anda = $user</h3>";
}
else
{
echo"<h2>Login Gagal!</h2>";
}
}
?>
Login.css
#form{
margin-top:180px;
margin-left:450px;
font-family: arial;
font-size: 20px;
color:#000000;
width:350px;
height : 250px;
background: #9fd5f4;
border: 3px solid #000000;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#btnLogin{
margin-left:100px;
}
#Input{
margin-top: 30px ;
margin-left: 100px ;
margin-bottom: 10px;
font-family: calibri;
font-size: 15px;
color:#000000;
}
 Screenshot :
 Penjelasan :
Program ini menggunakan fungsi percabangan dan fungsi. Percabangan digunakan
untuk menverifikasi username dan password. Fungsi digunakan untuk membuat fungsi
validasi huruf da nisi form. re = /^\D{3,}$/; digunakan untuk menvalidasi masukan
haruf huruf. function checkForm(cek) digunakan untuk membuat fungsi checkform
yang digunakan untuk melakukan pengecekan pada form yaitu apakah terdapat form
yang belum terisi atau tidak dan terdapat masukan selain huruf atau tidak. if($user ==
"Setiawan" && $pass == "Setiawan") digunakan untuk menvalidasi jika user dan
pass sama dengan “Setiawan’, maka login berhasil. Dan jika sebaliknya login gagal.
E. TUGAS PROYEK
 Kode Program :
Form.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Penjualan</title>
<style type="text/css">
.putih {
color: #FFF;
}
</style>
</head>
<body>
<div align="center">
<form id="form1" name="form1" method="post" action="proses.php">
<p> </p>
<table width="450" height="201" border="1">
<tr><td colspan="2" bgcolor="#666666"><div align="center"
class="putih"><strong>NOTEBOOK STORE</strong></div></td></tr>
<tr><td colspan="2" bgcolor="#CCCCCC"><div align="left">Produk yang
dijual:</div></td></tr>
<tr><td bgcolor="#CCCCCC"><input type="checkbox" name="barang[]"
value="Asus">Asus GL502VT-FY129</td><td bgcolor="#CCCCCC">= Rp
15.000.000,00</td></tr>
value="Lenovo">Lenovo Y900-5CID</td><td bgcolor="#CCCCCC">= Rp
17.000.000,00</td></tr>
value="Dell">Dell XPS 15</td><td bgcolor="#CCCCCC">= Rp
16.000.000,00</td></tr>
value="Acer">Acer Predator 15</td><td bgcolor="#CCCCCC">= Rp
17.000.000,00</td></tr>
<tr><td bgcolor="#CCCCCC">ID Customer</td><td width="243"
bgcolor="#CCCCCC"> <input name="id" type="number" /></td></tr>
<tr><td bgcolor="#CCCCCC">Nama</td><td bgcolor="#CCCCCC">
<input name="nama" type="text" /></td></tr>
<tr><td bgcolor="#CCCCCC">Email</td><td bgcolor="#CCCCCC">
<input name="email" type="text" /></td></tr>
<tr><td bgcolor="#CCCCCC">Alamat</td><td bgcolor="#CCCCCC">
<input name="alamat" type="text" /></td></tr>
<tr><td bgcolor="#CCCCCC">Status</td><td bgcolor="#CCCCCC">
<p>
<label><input type="radio" name="status" value="Member" id="status_0"
checked="checked" />Member</label>
<label><input type="radio" name="status" value="Non Member"
id="status_1" checked="checked"/>Non Member</label><br/>
</p>
</td></tr>
<tr><td bgcolor="#CCCCCC">Pembayaran</td><td
bgcolor="#CCCCCC"><select name="pembayaran">
<option>Visa</option>
<option>Master Cards</option>
<option>Debit BCA</option>
</select> </td>
</tr>
<tr>
<td height="28" bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC">
<input name="" type="submit" value="Hitung" />
<input name="" type="reset" value="Hapus" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Proses.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nota</title>
<style type="text/css">
.putih {
color: #FFF;
}
</style>
</head>
<body>
<?php
$total= 0;
$id = $_POST['id'];
$nama = $_POST['nama'];
$email = $_POST['email'];
$alamat = $_POST['alamat'];
$status = $_POST['status'];
$pembayaran = $_POST['pembayaran'];
?>
<div align="center">
<table width="297" border="1">
<tr><td colspan="2" bgcolor="#666666"><div align="center"
class="putih"><strong>HASIL PERHITUNGAN</strong></div></td></tr>
<tr><td width="116" bgcolor="#CCCCCC">ID Customer</td><td width="165"
bgcolor="#CCCCCC"><?php echo "$id"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Nama</td><td bgcolor="#CCCCCC"><?php echo
"$nama"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Email</td><td bgcolor="#CCCCCC"><?php echo
"$email"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Alamat</td><td bgcolor="#CCCCCC"><?php echo
"$alamat"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Status</td><td bgcolor="#CCCCCC"><?php echo
"$status"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Daftar Barang</td>
<td bgcolor="#CCCCCC">
<?php
foreach($_POST['barang'] as $key => $val)
{
if($val == 'Asus')
{
echo" Asus GL502VT-FY129<br/>" ;
$total = $total + 15000000 ;
}
else if($val == 'Lenovo')
{
echo" Lenovo Y900-5CID<br/>" ;
$total = $total + 17000000 ;
}
else if($val == 'Dell')
{
echo" Dell XPS 15<br/>" ;
$total = $total + 16000000 ;
}
else if($val == 'Acer')
{
echo" Acer Predator 15<br/>" ;
$total = $total + 17000000 ;
}
}
switch ($status)
{
case "Member":
$diskon = $total * 0.1;
break;
default:
$diskon = 0;
}
$akhir = $total - $diskon;

?>
</td></tr>
<tr><td bgcolor="#CCCCCC">Pembayaran</td><td bgcolor="#CCCCCC"><?php
echo "$pembayaran"; ?></td></tr>
<tr><td bgcolor="#CCCCCC">Subtotal</td><td
bgcolor="#CCCCCC"> <?php echo "Rp.
".number_format($total)?></td></tr>
<tr><td bgcolor="#CCCCCC">Diskon</td><td
bgcolor="#CCCCCC"> <?php echo "Rp. ".number_format($diskon);
?></td></tr>
<tr><td bgcolor="#666666"
class="putih"><strong>Total</strong></td><td
bgcolor="#666666"> <?php echo "Rp. ".number_format($akhir);
?></td></tr>
</table>
<a href="Form.php"> << Kembali</a><br />
</div>
</body>
</html>
 Screenshot :
 Penjelasan :
Program ini menggunakan fungsi percabangan dan perulangan. Program ini
menggunakan fungsi percabangan if-else yang digunakan untuk memberikan masukan
harga sesuai dengan nama laptop pada proses.php dan juga fungsi percabangan switch
case yang digunakan untuk menyeleksi diskon sesuai dengan status customer. Program
ini menggunakan fungsi percabangan foreach yang digunakan untuk memasukkan harga
sesuai dengan barang-barang yang telah dipilih oleh customer. Pada program ini
terdapat 2 file yaitu Form.html dan Proses.php. Form.html digunakan untuk masukkan
yang dilakukan oleh customer, sedangkan Proses.php digunakan untuk melakukan
perhitungan jumlah biaya yang harus oleh customer dan juga menampilkan kembali data
yang telah dimasukkan oleh customer.
F. KESIMPULAN
1. Teknik pengiriman data dalam web menggunakan metode post, get atau keduanya.
Dapat dibaca menggunakan parameter superglobal $_GET untuk metod get, sedangkan
POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan
$_REQUEST.
2. Validasi bisa menggunakan Javascript maupun PHP script. Perbedaannya dari
keduanya, jika Javascript akan diproses disisi client, PHP script akan diproses disisi
server.
3. Komponen-komponen dalam form : form, check Box, file, hidden, password, radio
button, reset, submit, button, text, select, dan text area.
4. Fungsi trim dam strlen dapat digunakan untuk pengecekan pengisian form.
5. Untuk menyaring data bisa menggunakan fungsi filter variabel.
G. DAFTAR PUSTAKA
Tim asisten dosen 2016. Modul Ajar Praktikum Pemrograman Web. Universitas Negeri
Malang

Kelompok 2 - Laporan 5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kelompok 2 - Laporan 5

Diunggah oleh

Hak Cipta:

Format Tersedia

Laporan Praktikum 5

“Form dan Validasi”

S1 PENDIDIKAN TEKNIK INFORMATIKA

<input type="submit" value="ok" />

foreach ($_POST ['hobby'] as $key =>

} else if ((cekumur<0) || (isNaN

} else if ((trim($umur) == '')||

echo "<br /> input umur Anda

$akhir = $total - $diskon;

Anda mungkin juga menyukai