Scribd
Unggah
424 tayangan21 halaman

Laporan Praktikum Pemrograman Web Modul 6

Laporan Praktikum Pemrograman Web Modul 6

Diunggah oleh

Ezrafel Amadeuz
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
424 tayangan21 halaman

Laporan Praktikum Pemrograman Web Modul 6

Laporan Praktikum Pemrograman Web Modul 6

Diunggah oleh

Ezrafel Amadeuz
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

MODUL 5
PEMROSESAN FORM DAN VALIDASI
Untuk memenuhi tugas matakuliah Praktikum Pemrograman Berbasis Web
yang dibimbing oleh Bapak Didik Dwi Prasetya

Asisten Praktikum:
Samsul Arifin

Oleh :
AMADEUZ EZRAFEL
(120533430965)
S1 PTI 12 Off D

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS NEGERI MALANG
APRIL 2014

A.
-

TUJUAN
Memahami konsep dasar transfer data dari form HTML.
Mampu menangani masukan data dari form HTML.
Mampu melakukan inisiasi nilai pada elemen-elemen form HTML.
Mampu memahami tentang pemrosesan validasi form.

B. LATIHAN
Latihan 1
Script 1
<!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>

Script 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Metode POST</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
Nama
<input type="text" name="nama" /> <br />
<input type="submit" value="OK" />
</form>
<?php
if(isset($_POST['nama'])) {
echo 'Hallo, '. $_POST['nama'];
}
?>
</body>
</html>

Script Lat Kecil


<!DOCTYPE html>
<html lang="en">
<head>
<title>Identifikasi Metode</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($_REQUEST['nama'])) {
echo 'Metode, '. $_SERVER['REQUEST_METHOD'];
}
?>
</body>
</html>

Pada latihan di atas akan menampilkan hasil sesuai yang di inputkan dengan
menggunakan parameter GET yang kemudian akan dipanggil menggunakan
$_GET, sedangkan pada script 2 menggunakan inputan parameter POST yang
akan dipanggil menggunakan $_POST, lalu pada script latihan kecil
menggunakan fungsi $_REQUEST sebagai pengganti penggunaan fungsi dari
metode POST atau GET.

Latihan 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Prefilling Text</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
Nama
<input type="text" name="nama"
value="<?php
echo isset($_POST['nama']) ? $_POST['nama'] : ' ';
?>"
/> <br />
<input type="submit" value="OK" />
</form>
<?php
if(isset($_POST['nama'])) {
echo $_POST['nama'];
}
?>
</body>
</html>

Pada latihan ini akan menampilkan text sesuai dengan apa yang diinputkan oleh
user menggunakan prefiling sebagai penahan elemen yang disubmisikan pada
saat direset. Sedangkan fungsi $_POST digunakan untuk memanggil parameter
POST yang telah dideklarasikan untuk menampilkan kata sesuai inputan.

Latihan 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Radio Button</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" 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>

Script 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prefill Data Button</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" 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" checked ="
<?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>

Script Lat Kecil

<!DOCTYPE html>
<html lang="en">
<head> <title> Data Radio Button</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>"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" checked=
"<?php
if($_POST['sex']=='Wanita'){
echo'checked="checked"';
}
?>"
/>Wanita </br>
<input type="submit" value="ok"/><br/>
</form>
<?php
if (isset($_POST['sex'])){
echo $_POST['sex'];}
?>
</body>
</html>

Pada latihan ini menerapkan inputan data berupa Radio Button dalam membuat
pilihan kepada user. Pada script 2 yaitu tentang prefilling radio button
menampilkan hasil pilihan user,dan akan tetap menampilkan pilihan item yang
terkait sekaligus menampilkan dalam bentuk kata. Sedangkan pada latihan kecil
ditambahkan if($_POST['sex']=='Pria'){ echo'checked="checked"'; yang mana
jika dijalankan akan langsung tepilih pada opsi wanita.

Latihan 4

<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Seleksi</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" 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>

Script Lat Kecil


<!DOCTYPE>
<html lang="en">
<head><title>Data seleksi</title></head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
Pekerjaan
<select name="job">
<option value="Mahasiswa" > Mahasiswa
</option>
<option value="ABRI" selected> ABRI </option>
<option value="PNS" > PNS </option>
<option value="Swasta" > Swasta </option>
</select>
<br/>
<input type="submit" value="OK"/>
</form>
<?php
if (isset($_POST['job'])){
echo $_POST['job'];
}
?>
</body>

Pada latihan ini menerapkan penanganan nilai seleksi dengan membuat list
pilihan menggunakan fungsi option value, setelah user memilih maka akan
ditampilkan hasilnya. List seleksi hanya dapat dipilih satu saja. Sedangkan pada
latihan kecil juga sama hanya saja ditambahkan fungsi preselecting, yaitu
<option

value="ABRI" selected> ABRI </option>

sehingga bila

dijalankan akan

muncul default yang telah di select.

Latihan 5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Checkbox</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post"> Hobi
<input type="checkbox" name="hobby[]" value="Membaca" />Membaca
<input type="checkbox" name="hobby[]" value="Olahraga" />Olahraga
<input type="checkbox" name="hobby[]" value="Menyanyi" />Menyanyi
<br />
<input type="submit" value="ok" />
</form>
<?php
//Ekstraksi Nilai
if (isset($_POST['hobby'])) {
foreach ($_POST['hobby'] as $key => $val) {
echo $key . ' -> ' .$val . '<br />';
}
}
?>
</body>

Script Lat Kecil

<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Checkbox</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
Hobi
<input type="checkbox" name="hobby[]" value="Membaca" <?
php if(isset($_POST['hobby'][0])){ echo "checked='checked'"; } ?>/> Membaca
<input type="checkbox" name="hobby[]" value="Olahraga" <?
php if(isset($_POST['hobby'][1])){ echo "checked='checked'"; } ?> /> Olahraga
<input type="checkbox" name="hobby[]" value="Menyanyi" <?
php if(isset($_POST['hobby'][2])){ echo "checked='checked'"; } ?>/> Menyanyi
<br/>
<input type="submit" value="OK" /><br/>
</form>

</body>

<?php
//ekstraksi nilai
if(isset($_POST['hobby'])){
foreach( $_POST['hobby'] as $key => $val ){
echo $key.'->'.$val.'<br/>';
}
}
?>

</html>

Pada latihan ini menerapkan penanganan nilai check box untuk memberikan
pilihan kepada user banyaknya item yang dapat dipilih yaitu user dapat memilih
lebih dari 1 pilihan yang ada. Sedangkan pada script latihan kecil sama hanya
saja ditambahkan preselecting yang kegunaan fungsinya sama dengan latihan
sebelumnya.

Latihan 6

<!DOCTYPE html>
<html lang="en">
<head>
<title>Validasi Form Berbasis 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 memasukkan 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>
Silahkan isi identitas Anda : <br/>
<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"> <br/>
Email
: <input type="text" name="email"> <br />
<input type="submit" name="submit" value="Submit">
</form>
<body>
</html>

Script 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>VALIDASI FORM BERBASIS PHP SCRIPT</title>
</head>
<body>
SILAHKAN ISI IDENTITAS ANDA : <br/>
<form action="<?php $_SERVER['PHP_SELF'];?>" name="identitas"
method="post">
Nama : <input type="text" name="nama"> <br/>
Umur : <input type="text" name="umur"> <br/>
E-mail : <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/>Silahkan masukkan Nama Anda";
}
else if ((trim($umur) == '') || ($umur < 0) ||
(preg_match('[^0-9]',$umur))){
echo"<br/>INPUT UMUR ANDA SALAH";
}else if (!filter_var($email,FILTER_VALIDATE_EMAIL))
{
echo"<br/>E-MAIL ANDA SUDAH BENAR";
}else{
echo"<br/>INPUTAN ANDA SUDAH BENAR";
}
}
?>
</body>
</html>

Pada latihan ini script bagian pertama merupakan validasi form yang dibuat
berbasis javascript yaitu javascript disini digunakan untuk pendeklarasian
variable nama, umur, dan email. Semua proses eksekusi menggunakan
penerapan dari javascript. Sedangkan pada script kedua berbasis php yang mana
dari segi tampilan berbeda, pada javascript alert ditampilkan dalam bentuk box
dialog pada basis php berupa tampilan teks biasa. Pada keseluruhan tampilan
dilakukan pengkondisian jika user menginputkan semua form dengan benar
maka akan ditampilkan pernyataan inputan sudah benar tetapi apabila ada salah
satu yang tidak diinputkan/tidak sesuai maka akan menghasilkan output yang
berbeda seperti pada screenshoot tampilan diatas.

C. TUGAS PRAKTIKUM
<!DOCTYPE html>
<html lang="en">
<head>
<title>FORM LOGIN EZRAFEL AREA</title>
<script type="text/javascript">
function pesan() {
var cekusername = document.identitas.username.value;
var cekpassword = document.identitas.password.value;
if ((cekusername == "rahasia") && (cekpassword == "icikiwir") {
alert ("Welcome to the jungle :D");
return false;
}else{
alert ("Sorry, your ID or Pass is not correct, please try
again!);

return false;
}

}
</script>
<style>
#login {
margin-top : 20px ;
border: 15px solid gray;
background-color: rgba(193, 203, 216, 0.8);
color: red;
border-radius: 10px;
text-align: center;
font-family: arial;
height:auto;
width:400px;
font-weight: italic;

}
hr{
color: red;
line-height: 10px;
}
</style>
</head>
<center>
<div id="login">
<form action="<?php $_SERVER['PHP_SELF'];?>" name="identitas"
method="post" onsubmit="return pesan()">
<h1> Login </h1>
<hr/>
Username <br />
<input type="text" name="nama"> <br/>
Password <br />
<input type="password" name="pass"> <br/>
<br/>
<input type="submit" name="submit" value="LOGIN">
<br />
<?php
if(isset ($_POST['submit'])) {
$nama = $_POST["nama"];
$pass = $_POST ["pass"];
if((strlen($nama) > 0) AND ($pass=='icikiwir') AND ($nama == 'rahasia')){
echo "<br/>Welcome to my paradise :)";
}else{
echo "<br/>Sorry, your ID or Pass is not correct, please try again!";
}
}
?>
</form>
</div>
</center>
</body>
</html>

Pada tugas ini menerapkan validasi form yang berbasis javascript untuk validasi
awal dan berbasis php pada sisi validasi server. Terlebih dahulu diinisialisasikan
user dan password untuk akses form. Jika user dan pass yang dimasukan sesuai
maka akan dimunculkan tampilan welcome sedangkan bila ada kesalahan pada
masukan user atau pass maka akan ditampilkan pernyataan not correct.
Password yang dimasukan juga harus berupa huruf atau string karena bila tidak
maka pernyataan not correct akan ditampilkan.

D. STUDI KASUS

<!DOCTYPE html>
<html>
<head>
<title>Validasi Form Ezrafel</title>
</head>
<body>
<h2>NOTEBOOK STORE</h2>
<form action="<?php $_SERVER ['PHP_SELF'];?>" name="store"
method="post" >
Produk notebook terbaru : <br/>
<input type="checkbox" name="produk[]" id="3900000" value="Acer E1-422" <?php
echo (isset($_POST['produk']) && in_array('Acer E1-422',$_POST['produk']))?
'checked':''; ?>/>Acer E1-422
Rp.
3.900.000,00
<input type="checkbox" name="produk[]" id="3400000" value="Asus X45A" <?php
echo (isset($_POST['produk']) && in_array('Asus X45A',$_POST['produk']))?
'checked':''; ?> />Asus X45A
Rp.
3.400.000,00
<input type="checkbox" name="produk[]" id="5100000" value="Lenovo B490-0224"
<?php echo (isset($_POST['produk']) && in_array('Lenovo B490-0224',
$_POST['produk']))? 'checked':''; ?>/>Lenovo B490-0224
Rp.
5.100.000,00
<input type="checkbox" name="produk[]" id="14600000" value="Sony VAIO SVF13N12SG" <?php echo (isset($_POST['produk']) && in_array('Sony VAIO SVF13-N12SG',
$_POST['produk']))? 'checked':''; ?>/>Sony VAIO SVF13-N12SG
Rp.
14.600.000,00
<input type="checkbox" name="produk[]" id="3400000" value="Toshiba NB520" <?
php echo (isset($_POST['produk']) && in_array('Toshiba NB520',$_POST['produk']))?
'checked':''; ?>/>Toshiba NB520
Rp. 3.400.000,00
<hr/>
<h3>Data Customer</h3>
ID Customer &nbsp;:
<input style="margin-left:28px" type="textbox" name="id"
value="<?php echo isset($_POST['id']) ? $_POST['id'] : '';?>"/>
<br/>
Nama &nbsp;:
<input style="margin-left:70px" type="textbox"
name="nama" value="<?php echo isset($_POST['nama']) ? $_POST['nama'] : '';?>"/>
<br/>

<!DOCTYPE html>
<html>
<head>
<title>Validasi Form Ezrafel</title>
</head>
<body>
<h2>NOTEBOOK STORE</h2>
<form action="<?php $_SERVER ['PHP_SELF'];?>" name="store"
method="post" >
Produk notebook terbaru : <br/>
<input type="checkbox" name="produk[]" id="3900000" value="Acer E1-422" <?php
echo (isset($_POST['produk']) && in_array('Acer E1-422',$_POST['produk']))?
'checked':''; ?>/>Acer E1-422
Rp.
3.900.000,00
<input type="checkbox" name="produk[]" id="3400000" value="Asus X45A" <?php
echo (isset($_POST['produk']) && in_array('Asus X45A',$_POST['produk']))?
'checked':''; ?> />Asus X45A
Rp.
3.400.000,00
<input type="checkbox" name="produk[]" id="5100000" value="Lenovo B490-0224"
<?php echo (isset($_POST['produk']) && in_array('Lenovo B490-0224',
$_POST['produk']))? 'checked':''; ?>/>Lenovo B490-0224
Rp.
5.100.000,00
<input type="checkbox" name="produk[]" id="14600000" value="Sony VAIO SVF13N12SG" <?php echo (isset($_POST['produk']) && in_array('Sony VAIO SVF13-N12SG',
$_POST['produk']))? 'checked':''; ?>/>Sony VAIO SVF13-N12SG
Rp.
14.600.000,00
<input type="checkbox" name="produk[]" id="3400000" value="Toshiba NB520" <?
php echo (isset($_POST['produk']) && in_array('Toshiba NB520',$_POST['produk']))?
'checked':''; ?>/>Toshiba NB520
Rp. 3.400.000,00
<hr/>
<h3>Data Customer</h3>
ID Customer &nbsp;:
<input style="margin-left:28px" type="textbox" name="id"
value="<?php echo isset($_POST['id']) ? $_POST['id'] : '';?>"/>
<br/>
Nama &nbsp;:
<input style="margin-left:70px" type="textbox"
name="nama" value="<?php echo isset($_POST['nama']) ? $_POST['nama'] : '';?>"/>
<br/>
Email &nbsp;:
<input style="margin-left:74px" type="textbox"
name="email" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '';?>"/>
<br/>
Alamat &nbsp; :
<input style="margin-left:60px" type="textbox"
name="alamat" value="<?php echo isset($_POST['alamat']) ? $_POST['alamat'] : '';?
>"/><br/>
Member &nbsp; :
<input style="margin-left:52px" type="radio"
name="member" id="Ya" value="Ya" <?php echo isset($_POST['member'])?
($_POST['member'] == 'Ya')?'checked="checked"':'':''; ?>
/>Ya
<input type="radio" name="member" id="Tidak"
value="Tidak" <?php echo isset($_POST['member'])?($_POST['member'] ==
'Tidak')?'checked="checked"':'':''; ?>
/>Tidak<br/>

<select style="margin-left:28px" name="pay">


<option value="VISA" <?php
if(isset($_POST['pay'])&&($_POST['pay'] == 'VISA')) {echo 'selected="selected"';} ?
>/>VISA
<option value="Master Card" <?php
if(isset($_POST['pay'])&&($_POST['pay'] == 'Master Card')) {echo
'selected="selected"';} ?>/>Master Card
<option value="Debit BCA" <?php
if(isset($_POST['pay'])&&($_POST['pay'] == 'Debit BCA')) {echo
'selected="selected"';} ?>>Debit BCA
</select>
<input type="submit" name="submit" value="Submit">
<input type="button" name="cancel" value="Cancel">
</form>
<?php
if(isset($_POST['submit'])){
$id = $_POST['id'];
$nama = $_POST['nama'];
$email = $_POST['email'];
$alamat = $_POST['alamat'];
$pembayaran = $_POST['pay'];
$diskon= "";

$cek = preg_match("/[a-z]/",$id);
$cek2 = preg_match("/[a-z]/",$nama);
$error = array();
if(strlen($id)==0){
echo 'Please input your ID<br/>';
}
else if($cek == true){
echo 'Please input your ID with number';
}
else if(strlen($nama)==0){
echo 'Please inpur your name';
}
else if($cek2 == false){
echo 'Please input your name A-Z';
}
else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Sorry your email is wrong";
}
else if(strlen($alamat)==0){
echo 'Please input your address';
}
else if(!isset($_POST['member']) || !$_POST['member']){
$member = $_POST['member'];
echo 'Pilih Member';
}
else{
$member = $_POST['member'];
echo
'<b> Produk yang dibeli : </b>';
if (isset($_POST['produk'])){
$harga=0;
foreach ($_POST['produk'] as $key => $val){
echo
$val.',';
if($val=="Acer E1-422")
$harga+=3900000;
if($val=="Asus X45A")
$harga+=3400000;
if($val=="Lenovo B490-0224")
$harga+=5100000;
if($val=="Sony VAIO SVF13-N12SG")
$harga+=14600000;

}
echo '<hr/>'.
'<b>Data Customer :</b><br/>'.
'ID Customer : '.$id.'<br/>'.
'Nama : '.$nama.'<br/>'.
'Email : '.$email.'<br/>'.
'Alamat : '.$alamat.'<br/>'.
'Member : '.$member.'<br/>'.
'Pembayaran : '.$pembayaran.'<br/>'.
'Total Pembayaran: '.$harga.'<br/>';
if($member=="Ya"){
$diskon= "10%";
$harga=$harga-($harga*0.1);
}
else{
$diskon="0%";
$harga=$harga;
}
echo 'Diskon Member :'.$diskon.'<br/>';
echo 'Total: '.$harga;

</body>
</html>

}
}
if(isset($_POST['cancel'])){
echo '';}
?>

Pada studi kasus diatas merupakan penerapan dari semua latihan yang telah
dibuat untuk pengisian form dan validasi nya. Disediakan menu pengisisan terhadap
produk yang berupa penanganan check box lalu isian data berupa nama, email,
alamat, member dan pembayaran. Jika produk belum dipilih, id, nama, email, alamat
yang diinputkan tidak sesuai, maka akan ditampilkan sesuai dengan pengkondisian
yang dibuat dari validitas form. Kemudian jika sudah akan ditampilkan rincian data
pembelian, ditambahkan jika tercatat sebagai member akan mendapatkan potongan
10% terhadap total harga produk yang dipilih.

E. DAFTAR RUJUKAN

______. 2014. Modul Ajar Praktikum Pemrograman Web Bab 5 Pemrosesan


Form dan Validasi. Jurusan Teknik Elektro FT UM.

Anda mungkin juga menyukai