Anda di halaman 1dari 22

PRAKTIKUM PEMROGRAMAN BERBASIS WEB

March 19, 2015

PEMROSESAN FORM DAN VALIDASI

A. LATIHAN
1. Latihan 1: Mengenal Masukan Data
a. Pengaksesan data menggunakan metode GET
Source code:

<!!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>
Tampilan web:

b. Pengkasesan data menggunakan metode POST


Source code:

<!!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

1 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

if(isset($_POST['nama']))
{
echo'Hallo, ' . $_POST['nama'];
}
?>
</body>
</html>
Tampilan Web:

c. Latihan kecil
Source code:

<!!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>
Tampilan Web:

Penjelasan:
Pada pemrosesan form terdapat metode yang dapat digunakan antara lain
POST,GET,dan gabungan dari keduanya. Pada metode GET menggunakan
$_GET dan jika menggunakan metode POST menggunakan $_POST dimana
perbedaannya adalah jika kita mengisi form dengan metode GET maka alamat
pada URL bar akan berubah sedangkan jika menggunakan POST maka urlnya
tidak berubah seperti pada contoh.

2 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

2. Latihan 2: Prefilling Text Field


Source code:

<!!DOCTYPE html>
<html lang="en">
<head>
<title> Prefilling Text Field</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>
Tampilan Web:

Penjelasan:
Prefilling text field digunakan untuk mengisi form namun nilai dari form tersebut
tidak akan di reset sehingga jika kita mengisi form tersebut dan ada bagian yang
salah maka kita tidak perlu mengisi form dari awal dan hanya mengisi bagian
form yang salah.
3. Latihan 3: Menangani Nilai Radio Button
a. Mendapatkan Nilai Radio Button
Source code:

<!!DOCTYPE html>
<html lang="en">
<head>

3 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<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>
Tampilan Web:

b. Prefilling Radio Button


Source code:

<!!DOCTYPE html>
<html lang="en">
<head>
<title> Prefill 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 (isset($_POST['sex']) && ($_POST['sex']=='Pria'))
{
echo 'checked="checked"';
}
?>
/>Pria

<input type="radio" name="sex" value="Wanita" checked


<?php
if (isset($_POST['sex']) &&
($_POST['sex']=='Wanita'))
{
echo 'checked="checked"';
}
?>

4 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

/>
Wanita <br/>

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


</form>

<?php
if(isset($_POST['sex']))
{
echo $_POST['sex'];
}
?>

</body>
</html>
Tampilan Web:

Penjelasan:
Pada program web ini
4. Latihan 4: Menangani Nilai Seleksi
a. Menangani data-data dari elemen seleksi
Source code:

<!!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

5 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

Tampilan Web:

b. Latihan kecil: penanganan seleksi dengan menambahkan preselecting


Source code:

<!!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"
<?php
if (isset($_POST['job']) &&
($_POST['job']=='Mahasiswa'))
{
echo 'selected="selected"';
}
?>
/> Mahasiswa
<option value="ABRI"
<?php
if (isset($_POST['job']) && ($_POST['job']=='ABRI'))
{
echo 'selected="selected"';
}
?>
/> ABRI
<option value="PNS"
<?php
if (isset($_POST['job']) && ($_POST['job']=='PNS'))
{
echo 'selected="selected"';
}
?>
/> PNS
<option value="Swasta"
<?php
if (isset($_POST['job']) &&
($_POST['job']=='Swasta'))
{
echo 'selected="selected"';
}
?>
/> Swasta
</select><br/>

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


</form>

6 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<?php
if(isset($_POST['job']))
{
echo $_POST['job'];
}
?>

</body>
</html>
Tampilan Web:

Penjelasan:

5. Latihan 5: Menangani Nilai Check Box


a. Penanganan Check Box
Source code:

<!!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

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


</form>

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

</body>
</html>

7 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

Tampilan Web:

b. Latihan kecil
Source code:

<!!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['job']) &&
($_POST['job']=='Membaca'))
{
echo 'checked="checked"';
}
?>

/> Membaca
<input type="checkbox" name="hobby[]" value="Olahraga"

<?php
if (isset($_POST['job']) &&
($_POST['job']=='Olahraga'))
{
echo 'checked="checked"';
}
?>

/> Olahraga
<input type="checkbox" name="hobby[]" value="Menyanyi"

<?php
if (isset($_POST['job']) &&
($_POST['job']=='Menyanyi'))
{
echo 'checked="checked"';
}
?>

/> Menyanyi
<input type="submit" value="OK" />
</form>

<?php
//Ekstraksi nilai
if(isset($_POST['hobby']))
{

8 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

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


{
echo $key . ' -> ' .$val . '<br/>';
}
}
?>

</body>
</html>
Tampilan Web:

Penjelasan:

6. Latihan 6: Validasi Form


a. Berbasis Javascript
Source code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Validasi Form berbasis JavaScript</title>
<script type="text/javascript">

function pesan(){
var ceknama=dokument.identitas.nama.value;
var cekumur=dokument.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.index("@",1)==-1)){
alert("Periksa kembali alamat email anda");
return false;
}else{
return true;
}
}

</script>
</head>
<body>

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">tahun<br/>

9 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

Email : <input type="text" name="email"><br/>

<input type="submit" name="submit" value="submit">


</form>
</body>
</html>
Tampilan Web:

b. Berbasis PHP Javascript


Source code:

<!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">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/>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/>Email Anda salah";
}else{
echo "<br/>Inputan Anda sudah benar";
}
}
?>

</body>
</html>

10 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

Tampilan Web:

Penjelasan:

B. TUGAS PRAKTIKUM
1. Tugas Praktikum 1: Aplikasi Login Form Sederhana
Source code:

<script type="text/javascript" src="jquery.min.js">


</script>
<script type="text/javascript">

$(document).ready(function(){
$('#submit').click(function(){
var username=$('#user').val();
var password=$('#pass').val();
if(username=="")
{
$('#dis').slideDown().html("<span>Please type Username</span>");
return false;
}
if(password=="")
{
$('#dis').slideDown().html('<span id="error">Please type
Password</span>');
return false;
}
});
});

</script>
<html>
<head>
<title>Login</title>
<style>
table{
border-radius:10px;
}
</style>
</head>

<body>
<form action="<?php $_SERVER['PHP_SELF'];?>"
method="post">
<table bgcolor="#000000" align="center" border="0"
width="250" height="350"><tr><td>
<table bgcolor="#FF0000" align="center" width="205"
height="300"><tr><td><p><b><h3>Login</h3></b></p></td></tr>

11 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<tr><td><hr></td></tr>
<label id="dis"></label>
<tr><td>Username</td></tr>
<tr><td><input type="teks" name="user" id="user"
autofocus required></td></tr>
<tr><td>Password</td></tr>
<tr><td><input type="password" name="pass"
id="pass"></td></tr>
<tr><td><input type="submit" value="Login"
id="submit"></td></tr>
</td></tr></table></div></td></tr></table>
</form>

<table align="center"><tr><td>

<?php
$user = $_POST['user'];
$pass = $_POST['pass'];
if (($user=="admin")&&($pass=="12345"))
echo ("Selamat Anda Berhasil Masuk.");
else
echo ("Username atau Password Anda Salah.Silahkan Coba
Lagi!");
?>

</table></td></tr>
</body>
</html>
Output Program:

Penjelasan:
Pada tugas praktikum ini kita membuat login form dengan menggunakan java
script. Yang dimana user serta password yang digunakan pada login form ini telah
dideklarasikan pada script program,username diisi admin dan untuk password
12345. Sedangkan kondisi pada saat login menggunakan iif,jika berhasil login
maka akan muncul pesan selamat anda berhasil masuk dan jika gagal login
maka muncul pesan teks Username atau password anda salah,silahkan coba lagi

12 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

C. STUDI KASUS
1. Studi Kasus 1: Halaman Web untuk penjualan notebook
Source code:

<!DOCTYPE html>
<html lang="en">

<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>NOTEBOOK STORE</title>
</head>

<body bgcolor="#708090">
<form action ="<?php $_SERVER['PHP_SELF'];?>" method="post">
<table width="700" align="center" >
<tr>
<td colspan = 5 height="50">

<h1>
<center>
NOTEBOOK STORE
</center>
</h1>
<div id="judul">Produk notebook terbaru :</div>
</td></tr>
<tr>
<td width="300" height="30"><input type = "checkbox"
name="notebook[]" value = "1"/>
Acer E1-422</td>
<td>Rp. 3900000,00</td>
</tr>

<tr>
<td width="300" height="30"><input type = "checkbox"
name="notebook[]2" value = "2"/>
ASUS X45A</td>
<td> Rp. 3400000,00</td>
</tr>
<tr>
<td width="300" height="30"><input type = "checkbox"
name="notebook[]2" value = "3"/>
Lenovo B490-0224</td>
<td>Rp. 5100000,00</td>
</tr>
<tr>
<td width="300" height="30"><input type = "checkbox"
name="notebook[]2" value = "4"/>
Sony Vaio SVF13-N12SG</td>
<td>Rp. 14600000,00</td>
</tr>
<tr>
<td width="300" height="30"><input type = "checkbox"
name="notebook[]2" value = "5"/>
Toshiba NB520</td>
<td>Rp. 3400000,00</td>
</tr>
<br />
<br>

13 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<tr>
<td colspan = 2 height="30"><div id="judul"><b>
<center>
DATA CUSTOMER
</center>
</b></div></td>
</tr>
<tr>
<td width="300" height="30">ID Customer</td>
<td> :
<input type = "text" name = "id" id="id" placeholder =
"Masukkan ID Pelanggan"
value = "<?php
echo isset($_POST['id']) ? $_POST['id'] : '' ;
?>" />
<br/></td>
</tr>
<tr>
<td width="350" height="30">Nama</td>
<td>:
<input type = "text" name = "nama" placeholder = "Masukkan
Nama Lengkap"
value="<?php
echo isset($_POST['nama']) ? $_POST['nama'] :
'';
?>" />
<br/></td>
</tr>
<tr>
<td width="350" height="30">Email </td>
<td>:
<input type = "text" name = "email" placeholder = "Masukkan
Email"
value = "<?php
echo isset($_POST['email']) ? $_POST['email'] :
'' ;
?>" />
<br></td>
</tr>
<tr>
<td width="350" height="30">Alamat </td>
<td>:
<input type = "text" name = "alamat" placeholder = "Masukkan
Alamat Lengkap"
value = "
<?php
echo isset($_POST['alamat']) ? $_POST['alamat']
: '' ;
?>" />
<br/></td>
</tr>
<tr>
<td width="350" height="30">Member</td>
<td>:
<input type = "radio" name="member" value = "1"/>
Ya
<input type = "radio" name="member" value = "2"
checked="checked" />
Tidak </td>
</tr>

14 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<tr>
<td width="350" height="30">Pembayaran</td>
<td> :
<select name = "bayar">
<option value = "VISA">VISA</option>
<option value = "MASTER CARD">Master Card</option>
<option value = "DEBIT BCA">Debit BCA </option>
</select>
<tr>
<td colspan = 2 td width="250" height="30"><input type =
"submit" value="Submit" name="submit"/>
</td>
</tr></td></tr></table></form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="821" border="5" align="center" cellpadding="6"
cellspacing="6" bordercolor="#000000">
<tr>
<td>
<?php
if(isset($_POST['submit'])){
echo "<br/><br/>";
if(!isset($_POST['notebook'])){
$_POST['notebook'] = array() ; }
if(count($_POST['notebook']) == 0){
echo "<br/><div class=\"warning\">ISIKAN DATA
PRODUK</div>";
} else if((trim($_POST['id']) == '') || ($_POST['id'] <
0) ){
echo "<br/><div class=\"warning\">ID SALAH</div>";
} else if(strlen($_POST['nama']) == 0){
echo "<br/><div class=\"warning\">ISIKAN
NAMA</div>";
} else if (!filter_var($_POST['email'],
FILTER_VALIDATE_EMAIL)){
echo"<br/><div class=\"warning\">EMAIL SALAH</div>";
} else if(strlen($_POST['alamat']) == 0){
echo "<br/><div class=\"warning\">ISIKAN
ALAMAT</div>";
} else if ((isset($_POST['notebook'])) &&
(isset($_POST['id'])) &&
(isset($_POST['nama'])) && (isset($_POST['email']))
&&
(isset($_POST['alamat'])) &&
(isset($_POST['member'])) ){
$nHargaTotal= 0 ;
$nDiskon = 0 ;
$cMember = "Tidak" ;
if($_POST['member'] == 1){
$nDiskon = 15 ;
$cMember = "Ya" ; }
$nHargaAkhir= 0 ;
echo "<h1><center>PRODUK YANG
DIBELI</center></h1>";
echo"<br />";
echo "<pre>" ;
foreach($_POST['notebook'] as $key => $val){
if($val == 1){
echo"Acer E1-422<br />" ;

15 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

$nHargaTotal = $nHargaTotal + 3900000


;
} else if($val == 2){
echo"Asus X45A<br />" ;
$nHargaTotal = $nHargaTotal + 3400000 ;
} else if($val == 3){
echo "Lenovo B490-0224<br />" ;
$nHargaTotal = $nHargaTotal + 5100000 ;
} else if($val == 4){
echo"Sony VAIO SVF13-N12SG<br />" ;
$nHargaTotal = $nHargaTotal + 14600000 ;
}else if($val == 5){
echo"Toshiba NB520<br />" ;
$nHargaTotal = $nHargaTotal + 3400000 ;
}
}
echo"<br />";
echo"<h1><center>DATA PELANGGAN</center></h1>";
echo"<br />";
echo"<pre>" ;
echo"ID : " . $_POST['id'] . "<br/>";
echo"Nama : " . $_POST['nama']. "<br/>";
echo"Email : " . $_POST['email']. "<br/>";
echo"Alamat : " . $_POST['alamat']. "<br/>";
echo"Member : " . $cMember . "<br/>";
echo"Pembayaran : " . $_POST['bayar']. "<br/>";
echo"Total Pembayaran : Rp. " .
number_format($nHargaTotal). "<br/>";
echo"Diskon Member : " . $nDiskon. "% <br/>";
$nHargaAkhir = $nHargaTotal - ($nHargaTotal *
$nDiskon / 100) ;
echo"Pembayaran Akhir : Rp. " .
number_format($nHargaAkhir). " <br/>";
echo"</pre>";
} else{
echo "<br /><div class=\"warning\">Anda belum
mengisi form dengan benar!</div>"; }
}?>
</td>
</tr>
</table>

</body>
</html>
Tampilan halaman:

16 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

Pejelasan:
Pada program web penjualan notebook ini,untuk memilih notebook kita
menggunakan checkbox yang dimana pada tiap produk telah diberikan harga
sehingga pada saat memilih beberapa produk program akan langsung menghitung
total dari produk yang dibeli. Sedangkan pada data customer semua form yang
tersedia harus diisi oleh pengguna. Terdapat radio button juga yang dapat dipilih
apakah custimer merupakan member atau bukan,jika member maka total
pembelian akan mendapat diskon sebesar 15%.
D. UJIAN TENGAH SEMESTER
Source code:

<style type="text/css">
table{
border-radius:20px;
}
</style>
<html>
<head>
<title>UTS</title>
</head>
<body bgcolor="#008080">
<div>
<table align="center"><tr><td><h1>MASUKKAN BIODATA</h1>
<hr></td></tr></table>
<form action="output.php" method="post"
enctype="multipart/form-data">
<table background="4.jpg" align="center" border="0"> <tr><td>
<table align="center" width="530" height="400">
<tbody>
<tr>
<td>Nama</td>
<td>:</td>
<td>
<input type="text" name="nama" placeholder="Masukkan Nama
Lengkap Anda" required>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>
<input type="text" name="alamat" placeholder="Masukkan Alamat
Lengkap" required>
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td>
<input type="date" name="tgl_lahir" placeholder="mm/dd/yyyy"
required>
</td>
</tr>

17 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<tr>
<td>Email</td>
<td>:</td>
<td>
<input type="email" name="email" placeholder="Masukkan Alamat
Email" required>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" id="sex" name="sex" value="Pria">Pria
<input type="radio" id="sex" name="sex" value="Wanita">Wanita
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td>
<select name="job" id="job">
<option value="0" disabled selected style="display:none">Pilih
salah satu
<option value="Pelajar">Pelajar/Mahasiswa
<option value="ABRI">ABRI
<option value="PNS">PNS
<option value="Wiraswasta">Wiraswasta
<option value="Petani">Petani
</select></td>
</tr>
<tr style="vertical-align:top;">
<td height="40">Hobi</td>
<td>:</td>
<td>
<input type="checkbox" id="hobi" name="hobi1"
value="Traveling">Traveling
<input type="checkbox" id="hobi" name="hobi2"
value="Olahraga">Olaharaga
<input type="checkbox" id="hobi" name="hobi3"
value="Musik">Musik
<input type="checkbox" id="hobi" name="hobi4" value="Lain-
Lain">Lain-Lain
<br></tr>
<tr>
<td>Upload Foto</td>
<td>:</td>
<td>
<input name="dokumen" type="file" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" name="ok" value="OK" />
<button onClick="location.reload()">Batal</button>
</td></tr></tbody>
</td></tr></table>
</table></form>
</div></body>
</html>

18 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

output.php

<style>
table{
margin-left: auto;
margin-right: auto;
align:center;
}
#tabel{
background-color: rgba(255,255,255,0.5);
border-radius:20px;
width: 600px;
height: 400px;
align: center;
margin-right: auto;
margin-left: auto;
margin-top: 120px;
}
</style>
<html>
<head>
<title>Form Hasil</title>
</head>
<body bgcolor="#008080">
<div id="tabel">
<table><tr><td><h1>INFORMASI BIODATA<h1>
<hr></td></tr></table>
<form method="post" enctype="multipart/form-data " id="validasi"
action="coba.php" >
<table border="0"><tr><td>
<table width="420">
<tbody>
<tr>
<td width="154">Nama</td>
<td width="95"><div
align="center">:</div></td>
<td width="394">

<?php if (isset($_POST['nama'])) {
echo $_POST['nama']; }?>

</td></tr>
<tr>
<td>Alamat</td>
<td><div align="center">:</div></td>
<td>

<?php if (isset($_POST['alamat'])) {
echo $_POST['alamat']; }?>

</td></tr>
<tr>
<td>Tanggal Lahir</td>
<td><div align="center">:</div></td>
<td>

<?php if (isset($_POST['tgl_lahir'])) {
echo $_POST['tgl_lahir']; }?>

</td></tr>

19 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

<tr>
<td>Email</td>
<td><div align="center">:</div></td>
<td>

<?php if (isset($_POST['email'])) {
echo $_POST['email']; }?>

</td></tr>
<tr>
<td>Jenis Kelamin</td>
<td><div align="center">:</div></td>
<td>

<?php if (isset($_POST['sex'])) {
echo $_POST['sex']; }?>

</td></tr>
<tr>
<td>Pekerjaan</td>
<td><div align="center">:</div></td>
<td>

<?php if (isset($_POST['job'])) {
echo $_POST['job']; }?>

</td></tr>
<tr style="vertical-align:top;">
<td>Hobi</td>
<td><div align="center">:</div></td>
<td>

<?php if(isset ($_POST['hobi1'])) echo $_POST['hobi1'].", ";


if(isset ($_POST['hobi2'])) echo $_POST['hobi2'].", ";
if(isset ($_POST['hobi3'])) echo $_POST['hobi3'].", ";
if(isset ($_POST['hobi4'])) echo $_POST['hobi4'];
?>

</td>
</tr>
<tr>
<td>Upload Foto</td>
<td><div align="center">:</div></td>
<td>
<align = "right">

<?php if($_POST['ok'])
{
$nama_berkas = $_FILES['dokumen']['name'];
$tipe_berkas = $_FILES['dokumen']['type'];
$ukuran_berkas = $_FILES['dokumen']['size'];
if($nama_berkas != "")
{
$sumber = $_FILES['dokumen']['tmp_name'];
$target = "img.jpg";

if(move_uploaded_file($sumber,$target))
{
?>
<img src="img.jpg" width="150" height="150"><?php

20 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

}else{
echo $_FILES['dokumen']['error'];
}
}
}
?>

</td>
</tr>
</tbody>
</td></tr></table>
</table>
</form>
</div>
</body>
</html>
Tampilan Halaman:

Penjelasan:
Pada biodata ini kita menginputkan data diri hampir sama dengan studi kasus
sebelumnya,namun kali ini diberi tambahan untuk mengunggah foto/gambar pada
informasi biodata. Untuk mengunggah foto/gambar tersebut kita menggunakan fungsi

Sehingga foto/gambar yang diupload akan berubah ukurannya. Pada program ini
terdapat dua file php yang digunakan,yang pertama digunakan untuk mengisi
biodata,terdapat radiobutton dan checkbox. Sedangkan yang kedua untuk
menampilkan hasil dari informasi biodata yang diinputkan.

21 PEMROSESAN FORM DAN VALIDASI


PRAKTIKUM PEMROGRAMAN BERBASIS WEB
March 19, 2015

E. KESIMPULAN
- Pemrosesan form digunakan untuk menerima masukan dari user dan ketika
administrator ingin masuk ke dalam sistem.
- Pengiriman form dapat dilakukan melalu tiga metode: POST,GET,dan kombinasi
keduanya.
- Perbedaan antara Javascript dan PHP dalam validasi form adalah,jika Javascript
akan diproses disisi client,sedangkan PHP script akan diproses disisi server.
- Pada method GET panjang string dibatasi hanya 2047 karakter,sedangkan pada
method POST tidak ada batasan karakter.

22 PEMROSESAN FORM DAN VALIDASI

Anda mungkin juga menyukai