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>
<?php
if(isset($_GET['nama']))
{
echo'Hallo, ' . $_GET['nama'];
}
?>
</body>
</html>
Tampilan web:
<!!DOCTYPE html>
<html lang="en">
<head>
<title> Metode POST</title>
</head>
<body>
<?php
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>
<?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.
<!!DOCTYPE html>
<html lang="en">
<head>
<title> Prefilling Text Field</title>
</head>
<body>
<?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>
<body>
<?php
if(isset($_POST['sex']))
{
echo $_POST['sex'];
}
?>
</body>
</html>
Tampilan Web:
<!!DOCTYPE html>
<html lang="en">
<head>
<title> Prefill Data Radio Button</title>
</head>
<body>
/>
Wanita <br/>
<?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>
<?php
if(isset($_POST['job']))
{
echo $_POST['job'];
}
?>
</body>
</html
Tampilan Web:
<!!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/>
<?php
if(isset($_POST['job']))
{
echo $_POST['job'];
}
?>
</body>
</html>
Tampilan Web:
Penjelasan:
<!!DOCTYPE html>
<html lang="en">
<head>
<title> Data Checkbox</title>
</head>
<body>
<?php
//Ekstraksi nilai
if(isset($_POST['hobby']))
{
foreach($_POST['hobby'] as $key => $val)
{
echo $key . ' -> ' .$val . '<br/>';
}
}
?>
</body>
</html>
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']))
{
</body>
</html>
Tampilan Web:
Penjelasan:
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Validasi Form berbasis PHP Script</title>
</head>
<body>
<?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>
Tampilan Web:
Penjelasan:
B. TUGAS PRAKTIKUM
1. Tugas Praktikum 1: Aplikasi Login Form Sederhana
Source code:
$(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>
<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
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>
<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>
<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> </p>
<p> </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 />" ;
</body>
</html>
Tampilan halaman:
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>
<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>
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>
<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>
</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
}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.
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.