LAPORAN PEMROGRAMAN WEB - PEMROSESAN FORM DAN VALIDASI

LAPORAN PRAKTIKUM MODUL 5

PEMROGRAMAN WEB

PEMROSESAN FORM DAN VALIDASI

Disusun Oleh:

Ananda Putri Syaviri

(130533608243)

PTI OFF B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA

Maret-2015

MODUL 5

PEMROSESAN FORM DAN VALIDASI

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. PETUNJUK Awali setiap aktivitas dengan do’a, semoga berkah dan

mendapat kemudahan.

Pahami tujuan, dasar teori, dan latihan-latihan

praktikum dengan baik dan benar.

Kerjakan tugas-tugas praktikum dengan baik, sabar, dan

jujur.

Tanyakan kepada asisten/dosen apabila ada hal-hal yang

kurang jelas.

C. DASAR TEORI

a) 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.

b) 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.

c) Komponen Form HTML<FORM ACTION=action base> form tags </FORM>

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

D. LATIHAN

1. Menangani Masukan Data

Sebagaimana diketahui, kita dapat menggunakan metode

GET atau POST untuk mengirim informasi ke kode PHP.

Latihan 1.1

- Script :

- Output :

- Deskripsi :

Pada program ini menggunakan method get , yang

fungsinya mengirim dan menampilkan data pada url

(link). Alur kerja dari program diatas adalah

ketika menginputkan nama pada form nama dan

mengklik button Ok, maka akan menampilkan hasil

“Halo, Ananda” pada bagaian bawah button, kemudian

pada bagian url, ditampilkan data yang telah

berhasil diinputkan pada form “latihan1.php?

nama=Ananda”.

Nilai $_SERVER['PHP_SELF'] (variabel

superglobal) menyatakan bahwa

form akan ditangani oleh current script.

Nilai get pada atribut method menyatakan

bahwa transfer data menggunakan metode GET.

Untuk mendapatkan nilai variabel, kita memanfaatkan

superglobal $_GET.<!DOCTYPE html><html lang="en"><head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="get"> // membuatform nama dengan metode get Nama <input type="text" name="nama" /> <br /> //form inputan nama <input type="submit" value="OK" /> //button ok</form>

<?phpif (isset($_GET['nama'])){ //perkondisian if untuk variabel bermethod get pada form nama echo 'Hallo, '.$_GET['nama']; //pemanggilan variable get nama dan menampilkan Halo, kemudian nama yang diinputkan pada form}?>

</body></html>

Latihan 1.2- Script :

- Output :

- Deskripsi :

Pada program diatas menggunakan metode post, fungsi

yang berbeda dengan metode get pada latihan

sebelumnya. Perbedaan penggunaan metode post dan get

adalah, jika pada metode post, tidak menampilkan data

yang diinputkan pada url. Post hanya mengirimkan data

pada server, sehingga tidak akan ditampilkan pada

url. <!DOCTYPE html><html lang="en"><head> <title>Metode POST</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> //pembuatan form nama dengan fungsi action dan menggunakan metode post Nama <input type="text" name="nama" /> <br /> //form inputan nama <input type="submit" value="OK" /> //button OK</form>

<?phpif (isset($_POST['nama'])){ //perkondisian if pada variabel post nama untuk dilakukan pengecekan menggunakan fungsi isset echo 'Hallo, '.$_POST['nama']; //pemanggilan isi data yang diinputkan pada variabel post nama, kemudian ditampilkan dengan "Haloo, 'nama'"}?>

</body></html>

Latihan 1.3

- Script :

- Output :

- Deskripsi :

Program diatas berfungsi untuk mengidentifikasi metode

yang digunakan dalam program ini. Menggunakan fungsi

$_REQUEST untuk melakukan identifikasi metode yang

digunakan. <!DOCTYPE html><html lang="en"><head> <title>iIdentifikasi 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'])){ //perkondisian if untuk identifikasi metodeyang digunakan dengan fungsi isset dan $_request dari form nama echo 'Metode, '.$_SERVER['REQUEST_METHOD'];//pemanggilan variabel request method untuk menampilkan hasil dari identifikasi yang dilakukan saat perkodisian}?>

</body></html>

2. Prefilling Text Field

Begitu form disubmisi, normalnya nilai elemen-elemen

form akan di-reset (atau dikosongkan). Adapun jika

diperlukan, kita sebenarnya juga dapat menahan agar

nilainya tetap ada di dalam elemen, misalnya text field.

Latihan 2 :- Script :

- Output :

- Deskripsi :

Program diatas menggunakan metode post, kemudian

menggunakan prefiling text untuk menahan nilai yang

di inputkan agar nilainya tetap ada di dalam elemen,

namun segera dikosongkan kembali ketika inputan

berhasil disimpan. Tidak menggunakan button OK,

tetapi menggunakan tombol enter pada keyboard,

sehingga hasilnya akan muncul pada bagian bawah.

Nilai akan di check apakah dalam tedxt field ada atau

tidak, jika terisi maka saat dienter akan keluar

hasilnya, jika tidak maka tidak akan menghasilkan

perubahan apapun. <!DOCTYPE html><html lang="en"><head> <title>Prefiling Text Field</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> //penggunaan metode post Nama <input type="text" name="nama" value="<?php echo isset($_POST['nama']) ? $_POST['nama'] : ''; //pemanggilan hasil yang dilakukan dengan pengecekan dengan fungsi isset pada variabel post nama ?>" <input type="submit" value="OK" /></form>

<?phpif (isset($_POST['nama'])){ echo $_POST['nama'];// pemanggilan isi data untuk ditampilkan dari variabel post nama}?>

</body></html>

3. Menangani Nilai Radio Button

Mendapatkan Nilai

Radio Button

Pada prinsipnya, cara mendapatkan nilai radio button tak

ubahnya elemen text field.

Latihan 3:- Script :

- Output :

- Deskripsi :

Program diatas menggunakan fungsi radio button,

kemudian menggunakan 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.

<!DOCTYPE html><html lang="en"><head> <title>Data Radio Button</title>

</head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> //pembuatan form jenis kelamin dengan metode post Jenis Kelamin <input type="radio" name="sex" //untuk menampilkna radio button pria value="Pria" /> Pria <input type="radio" name="sex" value="Wanita" /> wanita <br /> // untuk mennampilkan radio button wanita<input type="submit" value="OK" /> // pembuatan button ok</form>

<?phpif (isset($_POST['sex'])){ //penggunaan perkondisian if dengan fungsi isset untuk pengecekan isi data yang ada pada variabel post sex echo $_POST['sex']; //menampilkan isi data pada variabel post sex}?>

</body></html>

Latihan kecil 3.1:

Sintaks :<!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" <?php if($_POST['sex'] == 'wanita'){ echo 'checked="checked"'; } ?> />Wanita <br/> <input type="submit" value="ok" /> </form>

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

</body></html>

- Output:

- Deskripsi:

Pada program diatas alurnya sama seperti latihan 3.2

karena tujuannya adalah memberikan nilai default,

sehingga hasilnya tetap terisi pada radio button yang

dipilih sebelumnya. Dengan menggunakan checked untuk

tetap menahan nilai yang telah dipilih.

Latihan 3.2 :

- Script :

<!DOCTYPE html><html lang="en"><head> <title>Prefiling Data Radio Button</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> Jenis Kelamin <input type="radio" name="sex" value="Pria" checked <?phpif ($_POST['sex'] == 'Pria'){ echo 'checked="checked"';}?>/>Pria

<input type="radio" name="sex" value="Wanita" <?phpif ($_POST['sex'] == 'Wanita'){ echo 'checked="checked"';}?>/> wanita <br />

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

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

</body></html>

- Output :

- Deskripsi :

Program ini sama seperti program sebelumnya hanya saja

saat menekan button OK, pada radio button yang

terpilih, tetap ditampilkan, sehingga tidak sama

seperti program sebelumnya yang hasilnya akan

mengembalikan kondisi radio button seperti semula,

karena menggunakan checked sehingga tetap terisi radio

button yang sebelumnya dipilih. <!DOCTYPE html><html lang="en"><head> <title>Prefiling Data Radio Button</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> // penggunaan metode post dan fungsi action untuk membentuk form jenis kelamin

Jenis Kelamin <input type="radio" name="sex" value="Pria" checked //penggunaan fungsi checked pada radio button //pembuatan radio button pria <?phpif ($_POST['sex'] == 'Pria'){ echo 'checked="checked"'; //fungsi untuk tetap menampilkan pilihan radio button jika memilih radio button wanita}?>/>Pria <input type="radio" name="sex" value="Wanita" //pembuatan radio buttonw wanita<?phpif ($_POST['sex'] == 'Wanita'){ echo 'checked="checked"';//fungsi untuk tetap menampilkan pilihan radio button jika memilih radio button wanita }?>/> wanita <br />

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

<?phpif (isset($_POST['sex'])){ //perkondisian if dengan fungsi isset untuk melakukan pengecekan isi data dari variabel post sex echo $_POST['sex']; //pemanggilan isi variabel post sex}?>

</body></html>

4. Menangani Nilai Seleksi

Latihan 4.1 :- Script :<!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> <?phpif (isset($_POST['job'])){ echo $_POST['job'];}?>

</body></html>

- Output :

- Deskripsi :

Program ini menggunakan combobox untuk menmapilkan

pilihan pekerjaan yang dapat dipilih. Menggunakan form

action dengan <selection> untuk menampilkan pekerjaan

yang dipilih, <option> untuk menampilkan pekerjaan apa

saja yang tersedia. <!DOCTYPE html><html lang="en"><head> <title>Data Seleksi</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>"method="post"> //penggunaan metode post dan penggunaan action untuk pembuatan form pekerjaan Pekerjaan <select name="job"> //untuk menampilkan urutan teratas pekerjaan yang disediakan <option value="Mahasiswa">Mahasiswa //untuk menampilkan pekerjaan yangtersedia <option value="ABRI">ABRI <option value="PNS">PNS <option value="Swasta">Swasta

</select> <br /> <input type="submit" value="Ok" /> //pembuatan button ok</form> <?phpif (isset($_POST['job'])){//perkondisian if dengan fungsi isset untuk melakukan pengecekan isi data variabel post job echo $_POST['job']; //pemanggilan isi data variabel post job}?>

</body></html>

Latihan 4.2 (latihan kecil) :- Script :<!DOCTYPE html><html lang="en"><head> <title>Data Checkbox</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>" method ="post"> Pekerjaan <select name="job"> <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'Mahasiswa') echo "selected"; ?> value = "Mahasiswa">Mahasiswa <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'ABRI') echo "selected"; ?> value = "ABRI">ABRI <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'PNS') echo "selected"; ?> value = "PNS">PNS <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'Swasta') echo "selected"; ?> value = "Swasta">Swasta

</select> <br/>

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

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

- Output :

- Deskripsi :Program diatas menggunakan preselected untuk menampilkan

pada combobox, pekerjaan yang dipilih, bukan menampilkan

urutan teratas dari pekerjaan yang tersedia, dengan kata

lain menahan nilai yang dipilih dan kemudian tetap

ditampilkan pada form. Dengan menyisipkan “selected”

kemudian menuliskan pekerjaan yang dipilih seperti : if (isset ($_POST['job'])and $_POST['job'] == 'Mahasiswa') echo "selected"; ?> value = "Mahasiswa">Mahasiswa<!DOCTYPE html><html lang="en"><head> <title>Data Checkbox</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>" method ="post"> Pekerjaan <select name="job"> <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'Mahasiswa') echo "selected"; ?> value = "Mahasiswa">Mahasiswa//perkondisian if dengan fungsi isset untuk melakukan pengecekan pada variabel post job jika mahasiswa, maka value(nilainya) mahasiswa <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'ABRI') echo "selected";

?> value = "ABRI">ABRI//perkondisian if dengan fungsi isset untuk melakukan pengecekan pada variabel post job jika ABRI, maka value(nilainya) ABRI <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'PNS') echo "selected"; ?> value = "PNS">PNS//perkondisian if dengan fungsi isset untuk melakukan pengecekan pada variabel post job jika PNS, maka value(nilainya) PNS <option <?php if (isset ($_POST['job'])and $_POST['job'] == 'Swasta') echo "selected"; ?> value = "Swasta">Swasta//perkondisian if dengan fungsi isset untuk melakukan pengecekan pada variabel post job jika swasta, maka value(nilainya) swasta </select> <br/> <input type="submit" value="ok"/> </form>

<?php if (isset($_POST['job'])) {//perkondisian if dengan fungsi isset untuk mengecek isi data pada variabel post job echo $_POST['job'];//pemanggilan isi variabel post job } ?></body></html>

5. Menangani Nilai Check Box

Khusus dalam penanganan check box, kita akan melibatkan

tipe data array, item check box normalnya boleh dipilih

lebih dari satu.

Latihan 5.1 :

- Script :<!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 nilaiif (isset($_POST['hobby'])){ foreach ($_POST['hobby'] as $key => $val){ echo $key .'->' .$val . '<br />'; }}?>

</body></html>

- Output :

- Deskripsi :

Pada program diatas menggunakan checkbox untuk

menyediakan hobi yang dapat dipilih. Program ini sama

alurnya seperti program sebelumnya yang menggunakan

radio button.<!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//menggunakan checkbox, jika memilih membaca maka akan ditampilkan membaca <input type="checkbox" name="hobby[]" value="Olahraga" />Olahraga

//menggunakan checkbox, jika memilih olahraga maka akan ditampilkan olahraga <input type="checkbox" name="hobby[]" value="Menyanyi" />Menyanyi//menggunakan checkbox, jika memilih menyanyi maka akan ditampilkan menyanyi <input type="submit" value="Ok" /></form> <?php//ekstraksi nilaiif (isset($_POST['hobby'])){ foreach ($_POST['hobby'] as $key => $val){ //penggunaan foreach untuk menguraikan nilai dalam array echo $key .'->' .$val . '<br />';//pemanggilan nilai yang ada pada array }}?>

</body></html>

Latihan 5.2 :

- Script :<!DOCTYPE html><html lang="en"><head> <title>Latihan Kecil Data Checkbox</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>" method ="post">Hobi<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job'])and in_array($_POST['job'],'Mahasiswa')==true) echo "selected" ?>value="Membaca"/>Membaca<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job'])and in_array($_POST['job'],'Olahraga')==true) echo "selected" ?>value="Olahraga"/>Olahraga<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job'])and in_array($_POST['job'],'Menyanyi')==true) echo "selected" ?>value="Menyanyi"/>Menyanyi<br/><input type="submit" value"ok" /></form>

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

}}?></body></html>

- Output :

- Deskripsi :

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. <!DOCTYPE html><html lang="en"><head> <title>Latihan Kecil Data Checkbox</title></head>

<body>

<form action="<?php $_SERVER['PHP_SELF'];?>" method ="post">Hobi<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job']) and in_array($_POST['job'],'Mahasiswa')==true) echo "selected" ?> value="Membaca"/>Membaca//menggunakan selected pada array job, jika memilih membaca maka akan ditampilkan membaca<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job']) and in_array($_POST['job'],'Olahraga')==true) echo "selected" ?> value="Olahraga"/>Olahraga//menggunakan selected pada array job, jika memilih olahraga maka akan ditampilkan olahraga<input type="checkbox" name="hobby[]" <?php if(isset ($_POST['job']) and in_array($_POST['job'],'Menyanyi')==true) echo "selected" ?> value="Menyanyi"/>Menyanyi<br/>

//menggunakan selected pada array job, jika memilih menyanyi maka akan ditampilkan menyanyi<input type="submit" value"ok" /></form>

<?php//Ekstraksi nilaiif (isset($_POST['hobby'])) {foreach ($_POST['hobby'] as $key => $val){ //penggunaan foreach untuk menguraikan nilai dalam arrayecho $key . ' -> ' .$val . '<br/>'; //pemanggilan nilai yang ada pada array}}?></body></html>

Latihan 6.1

- Sintaks:<!!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.lenght==0){ alert("Anda belum memasukkan nama Anda"); return false; } else if ((cekumur<0 || (isNaN(cekumur)) || (cekumur.lenght == 0)){ alert ("input umur Anda salah"); return false; } else if ((cekemail.lenght== 0) || ( (cekemail.indexOf("@",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/> Email : <input type="text" name="email"> <br/> <input type="submit" name="submit" value="submit"> </form> </body> </html>

- Output:

- Deskripsi:

Program diatas menggunakan javascript untuk membuat

validasi form. Alur kerjanya sama seperti php, hanya

saja setelah berhasil menginputkan data, hasilnya tidak

dapat diketahui apakah berhasil atau tidak, semua form

kembali seperti semula (kosong).

Latihan 6.2 (basis php)<!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> Input nama Anda salah"; } 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> input email Anda salah"; } else { echo "</br> Inputan anda sudah benar"; } } ?></body></html>

Output :

Deskripsi:

- Pada program diatas alurnya sama seperti berbasis

java, hanya saja setelah menginputkan semua form, ada

pemberitahuan bahwa form berhasil diisi dengan inputan

yang benar.<!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) //fungsi strlen untuk menghitung panjang karakter, jika 0 { echo "</br> Input nama Anda salah"; // maka muncul inputnama salah } else if((trim($umur) == '')||($umur<0)||(preg_match('[^0-9]',$umur))) //kondisi jika menginputkan umur kurang dari 0 dengan pengecekan menggunakan fungsi umur { echo "</br> Input umur Anda salah"; // maka muncul inputumur salah } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) //perkondisian untuk mengecek dan menyaring isi dari variabel email { echo "</br> input email Anda salah"; //jika salah maka muncul input email anda salah } else { echo "</br> Inputan anda sudah benar"; //jika benar makamuncul inputan anda sudah benar (perkondisian else) } } ?></body></html>

E. TUGAS PRAKTIKUM

Buat aplikasi login form sederhana (tanpa database) yang

terdiri dari field ID/Username

dan Password. Gunakan variabel di PHP untuk

mensimulasikan verifikasi data yang dimasukkan.

Kode Program<!DOCTYPE html><html lang = "en"> <head> <title>Tugas Praktikum</title>

<script type="text/javascript">

function pesan() { var cekusername = document.login.username.value; var cekpassword = document.login.password.value; if(cekusername.length == 0) { alert("masukkan username anda"); return false; } else if(cekpassword.length == 0) { alert("masukkan password anda"); return false; } else { alert("Selamat Datang"); return true; } } </script> </head> <body background="m2.jpg"> <center> </br></br></br></br></br></br></br> <form action="<?php $_SERVER['PHP_SELF'];?>" name="login" method="post" onsubmit="return pesan()"> <table width=200 border=0 cellpadding=3 align="center" bgcolor="blue"> <tr> <th> <center> <font size="+2"> <b>LOGIN</b> </font> </center> </th> </tr> <tr> <th>Username</th> </tr> <tr> <th> <input type=text name=username></th></tr> <tr> <th>Password</td></tr> <tr> <th> <input type=text name=password></th></tr> <tr> <th align=center><input type=button value="Login" onClick="pesan()"></th></tr> </table> </form> </body> </html>

Output:

Deskripsi:

- Program diatas menggunakan javascript untuk

pendeklarasian fungsi yang digunakan untuk validasi

form login .

<!DOCTYPE html><html lang = "en"> <head> <title>Tugas Praktikum</title> <script type="text/javascript">

function pesan() { var cekusername = document.login.username.value; //inisialisai cek user var cekpassword = document.login.password.value; //inisialisai cek pass if(cekusername.length == 0) { alert("masukkan username anda"); //peringattan jika kondisi username tisdak terisi return false; } else if(cekpassword.length == 0) { alert("masukkan password anda"); //peringattan jika kondisi password tisdak terisi return false; } else { alert("Selamat Datang"); //textbox, jika username dan password terisi return true; //fungsi pengembalian jika kondisi benar, maka program terus diulang } } </script> </head> <body background="m2.jpg"> //pemberian background halaman html <center> //peletakan form login pada posisi tengah </br></br></br></br></br></br></br> <form action="<?php $_SERVER['PHP_SELF'];?>" name="login" method="post" onsubmit="return pesan()"> //pembuatan form login username dan pass <table width=200 border=0 cellpadding=3 align="center" bgcolor="blue"> // menggunakan ukuran w=200, no-border, cellpadding= 3, diletakkan pada posisi tengah dengan warna background biru <tr> <th> <center> <font size="+2"> <b>LOGIN</b> </font> </center> </th> </tr> <tr> <th>Username</th> </tr> <tr> <th> <input type=text name=username></th></tr> <tr> <th>Password</td></tr> <tr> <th> <input type=text name=password></th></tr> <tr> <th align=center><input type=button value="Login" onClick="pesan()"></th></tr> </table> </form> </body>

</html>

F. STUDI KASUS

Buatlah halaman web untuk penjualan notebook dengan

ketentuan:

1. Produk: menggunakan checkbox

2. ID Customer, Nama, Email, Alamat: menggunakan textbox

3. Member: menggunakan radio button

4. Pembayaran: menggunakan select box yang terdiri atas

VISA, Master Card, Debit BCA

Kode Program<!DOCTYPE html><html> <head> <title>Studi Kasus</title> </head>

<body> <form action="<?php $_SERVER['PHP_SELF'];?>" name="notebook" method="post" > <table width=300 border=0 cellpadding=2 align="center" bgcolor="cyan"> <tr><th colspan=2><h1><b>NOTEBOOK STORE</b></h1></th></tr> <tr><td colspan=2>Produk notebook terbaru :</td></tr> <tr><td><input type="checkbox" name="barang[]" value="Acer">Acer</td><td>Rp. 3.900.000,00</td></tr> <tr><td><input type="checkbox" name="barang[]" value="Asus">Asus</td><td>Rp. 3.400.000,00</td></tr> <tr><td><input type="checkbox" name="barang[]" value="Lenovo">Lenovo</td><td>Rp. 5.100.000,00</td></tr> <tr><td><input type="checkbox" name="barang[]" value="Sony">Sony</td><td>Rp. 14.600.000,00</td></tr> <tr><td><input type="checkbox" name="barang[]" value="Toshiba">Toshiba</td><td>Rp. 3.400.000,00</td></tr> <tr></tr> <tr><td colspan=2><h2>Data Costumer :</h2></td></tr> <tr><td>ID Costumer :</td><td><input type="text" name="id"value="<?PHP echo isset($_POST['id']) ? $_POST['id'] : '' ?>"></td></tr> <tr><td>Nama :</td><td><input type="text" name="nama" value="<?PHP echo isset($_POST['nama']) ? $_POST['nama'] : '' ?>"></td></tr> <tr><td>Email :</td><td><input type="text" name="email" value="<?PHP echo isset($_POST['email']) ? $_POST['email'] : '' ?>"></td></tr>

<tr><td>Alamat :</td><td><input type="text" name="alamat" value="<?PHP echo isset($_POST['alamat']) ? $_POST['alamat'] : '' ?>"></td></tr> <tr><td>Member :</td><td><input type="radio" name="member"value= 1"<?PHP echo isset($_POST['member']) ? $_POST['member'] : '' ?>">Ya <input type="radio" name="member" value = 2>Tidak</td></tr> <tr><td>Pembayaran :</td><td><select name="bayar"> <option value="VISA">VISA <option value="Master Card">Master Card <option value="Debit BCA">Debit BCA</td></tr> <tr></tr> <tr><th colspan=2><input type="submit" value="Submit" name="submit"></th></tr> <tr></tr> <tr></tr> </table> </form> <?php if(!isset($_POST['barang'])){ $_POST['barang'] = array() ; } if(count($_POST['barang']) == 0){ echo "Pilih produk yang anda inginkan"; }else if((trim($_POST['id']) == '') || ($_POST['id'] < 0) || (ereg('[^0-9]',$_POST['id']))){ echo "Id yang anda isikan salah"; }else if(strlen($_POST['nama']) == 0){ echo "Masukkan nama anda!"; }else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){ echo "<br/>Email anda salah"; }else if(strlen($_POST['alamat']) == 0){ echo "Isikan alamat anda!"; }else if ((isset($_POST['barang'])) && (isset($_POST['id'])) && (isset($_POST['nama'])) && (isset($_POST['email'])) && (isset($_POST['alamat'])) && (isset($_POST['member'])) ){ $total= 0 ; $diskon = 0 ; $member = "Tidak" ; if($_POST['member'] == 1){ $diskon = 10 ; $member = "Ya" ; } $akhir= 0 ; echo "<h1>Produk yang dibeli</h1>"; echo"<hr /><br />"; echo "<pre>" ; foreach($_POST['barang'] as $key => $val){ if($val == 'Acer'){ echo"Acer E1-422<br />" ; $total = $total + 3900000 ; }else if($val == 'Asus'){

echo"Asus X45A<br />" ; $total = $total + 3400000 ; }else if($val == 'Lenovo'){ echo "Lenovo B490-0224<br />" ; $total = $total + 5100000 ; }else if($val == 'Sony'){ echo"Sony VAIO SVF13-N12SG<br />" ; $total = $total + 14600000 ; }else if($val == 'Toshiba'){ echo"Toshiba NB520<br />" ; $total = $total + 3400000 ; } } echo"<hr /><br />"; echo"<h1>DATA PELANGGAN</h1>"; echo"<hr /><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 : " . $member . "<br/>"; echo"Pembayaran : " . $_POST['bayar']. "<br/>"; echo"Total Pembayaran : Rp. " . number_format($total). "<br/>"; echo"Diskon Member : " . $diskon. "% <br/>"; $akhir = $total - ($total * $diskon / 100) ; echo"Pembayaran Akhir : Rp. " . number_format($akhir). " <br/>"; echo"</pre>"; }else{ echo "Anda belum mengisi form dengan benar!";

?> </body> </html>

Hasil

Deskripsi :

Pada program diatas menggunakan javascript dan php script,

untuk penjelasan alur kerjanya merupaka kombinasi dari semua

latihan pada modul ini, menggunakan fungsi strlen untuk

menghting jumlah karakter , lalu melakukan pengecekan jika

form belum terisi maka ada pemberitahuan untuk kesalahan

pengisian form. Kemudian untuk menampilkan data produk, data

pembeli, dalam dokumen php, dideklarasikan tersendiri secara

rinci.

<!DOCTYPE html><html>  <head>  <title>Studi Kasus</title>  </head> 

<body>  <form action="<?php $_SERVER['PHP_SELF'];?>" name="notebook" method="post" >  <table width=300 border=0 cellpadding=2 align="center" bgcolor="cyan">     <tr><th colspan=2><h1><b>NOTEBOOK STORE</b></h1></th></tr> <tr><td colspan=2>Produk notebook terbaru :</td></tr>  <tr><td><input type="checkbox" name="barang[]" value="Acer">Acer</td><td>Rp. 3.900.000,00</td></tr>  <tr><td><input type="checkbox" name="barang[]" value="Asus">Asus</td><td>Rp. 3.400.000,00</td></tr>  <tr><td><input type="checkbox" name="barang[]" value="Lenovo">Lenovo</td><td>Rp. 5.100.000,00</td></tr>  <tr><td><input type="checkbox" name="barang[]" value="Sony">Sony</td><td>Rp. 14.600.000,00</td></tr>  <tr><td><input type="checkbox" name="barang[]" value="Toshiba">Toshiba</td><td>Rp. 3.400.000,00</td></tr>  <tr></tr>  <tr><td colspan=2><h2>Data Costumer :</h2></td></tr>  <tr><td>ID Costumer :</td><td><input type="text" name="id"value="<?PHP echo isset($_POST['id']) ? $_POST['id'] : '' ?>"></td></tr>  <tr><td>Nama :</td><td><input type="text" name="nama" value="<?PHP echo isset($_POST['nama']) ? $_POST['nama'] : '' ?>"></td></tr> 

<tr><td>Email :</td><td><input type="text" name="email" value="<?PHP echo isset($_POST['email']) ? $_POST['email'] : '' ?>"></td></tr>  <tr><td>Alamat :</td><td><input type="text" name="alamat" value="<?PHP echo isset($_POST['alamat']) ? $_POST['alamat'] : '' ?>"></td></tr>  <tr><td>Member :</td><td><input type="radio" name="member"value= 1"<?PHP echo isset($_POST['member']) ? $_POST['member'] : '' ?>">Ya  <input type="radio" name="member" value = 2>Tidak</td></tr>  <tr><td>Pembayaran :</td><td><select name="bayar">  <option value="VISA">VISA  <option value="Master Card">Master Card  <option value="Debit BCA">Debit BCA</td></tr>  <tr></tr>  <tr><th colspan=2><input type="submit" value="Submit" name="submit"></th></tr>   <tr></tr>  <tr></tr>  </table>  </form>  <?php // kode php // validasi form dengan metode POST if(!isset($_POST['barang'])){ $_POST['barang'] = array() ; } //validasi produk if(count($_POST['barang']) == 0){ echo "Pilih produk yang anda inginkan"; // menampilkanstring yg akan diterjemhkan oleh browser // baik berupa teks biasa maupun kode html //validasi ID }else if((trim($_POST['id']) == '') || ($_POST['id'] < 0) || (ereg('[^0-9]',$_POST['id']))){ echo "Id yang anda isikan salah"; // menampilkan string yg akan diterjemhkan oleh browser // baik berupa teks biasa maupun kode html //validasi Nama }else if(strlen($_POST['nama']) == 0){ echo "Masukkan nama anda!"; // menampilkan string yg akan diterjemhkan oleh browser

// baik berupa teks biasa maupun kode html //validasi Email }else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){ echo "<br/>Email anda salah"; // menampilkan string ygakan diterjemhkan oleh browser // baik berupa teks biasa maupun kode html //validasi Alamat }else if(strlen($_POST['alamat']) == 0){ echo "Isikan alamat anda!"; // menampilkan string yg akan diterjemhkan oleh browser // baik berupa teks biasa maupun kode html }else if ((isset($_POST['barang'])) && (isset($_POST['id'])) && (isset($_POST['nama'])) && (isset($_POST['email'])) && (isset($_POST['alamat'])) && (isset($_POST['member'])) ){ //mengatur diskon member //jika member mendapat diskon 10% // jika bukan maka tdk mendapat diskon $total= 0 ; $diskon = 0 ; $member = "Tidak" ; if($_POST['member'] == 1){ $diskon = 10 ; $member = "Ya" ; } $akhir= 0 ; //menampilkan data produk echo "<h1>Produk yang dibeli</h1>"; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html echo"<hr /><br />"; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html echo "<pre>" ; // menampilkan string yg akan diterjemhkanoleh browser baik berupa teks biasa maupun kode html foreach($_POST['barang'] as $key => $val){ if($val == 'Acer'){ // jika user memilih acer echo"Acer E1-422<br />" ; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html $total = $total + 3900000 ; // harga produk }else if($val == 'Asus'){ // jika user memilih asus echo"Asus X45A<br />" ; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html $total = $total + 3400000 ; // harga produk }else if($val == 'Lenovo'){ // jika user memilih lenovo echo "Lenovo B490-0224<br />" ; // menampilkanstring yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html $total = $total + 5100000 ; // harga produk }else if($val == 'Sony'){ // jika user memilih sony

echo"Sony VAIO SVF13-N12SG<br />" ; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html $total = $total + 14600000 ; // harga produk }else if($val == 'Toshiba'){ // jika user memilih toshiba echo"Toshiba NB520<br />" ; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html $total = $total + 3400000 ; // harga produk } } echo"<hr /><br />"; // menampilkan string yg akan diterjemhkanoleh browser baik berupa teks biasa maupun kode html //menampilkan data pelanggan echo"<h1>DATA PELANGGAN</h1>"; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html echo"<hr /><br />"; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html echo"<pre>" ; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html echo"ID : " . $_POST['id'] . "<br/>"; // menampilkan id pelanggan echo"Nama : " . $_POST['nama']. "<br/>"; // menampilkan nama pelanggan echo"Email : " . $_POST['email']. "<br/>"; //menampilkan email pelanggan echo"Alamat : " . $_POST['alamat']. "<br/>";// menampilkan alamat pelanggan echo"Member : " . $member . "<br/>"; // menampilkan keterangan member tidaknya pembeli echo"Pembayaran : " . $_POST['bayar']. "<br/>"; //menampilkan harga echo"Total Pembayaran : Rp. " . number_format($total). "<br/>"; // menampilkan total harga echo"Diskon Member : " . $diskon. "% <br/>"; // menampilkan diskon member $akhir = $total - ($total * $diskon / 100) ; // penghitungan total harga echo"Pembayaran Akhir : Rp. " . number_format($akhir). " <br/>"; // menampilkan total harga yg sudah di diskon echo"</pre>"; }else{ echo "Anda belum mengisi form dengan benar!"; // menampilkan string yg akan diterjemhkan oleh browser baik berupa teks biasa maupun kode html } ?> </body> </html> 

G. 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. Fungsi trim dam strlen dapat digunakan untuk pengecekan

pengisian form.

4. Untuk menyaring data bisa menggunakan fungsi filter

variabel.

H. DAFTAR RUJUKAN

Modul Pratikum Pemrograman Berbasis Web 5 Pemrosesan Form dan

Validasi 2014. Pendidikan Teknik Informatika. Universitas

Negeri Malang

Modul Ajar Praktikum Pemrograman Web Teknik Elektro UM

Modul 3 Internet Programming : PHP 3,

http://lecturer.eepis-its.edu/~zenhadi/kuliah/

InternetProgramming/Prakt%20Modul%20PHP%203.pdf

LAPORAN PEMROGRAMAN WEB - PEMROSESAN FORM DAN VALIDASI

Documents