5.Pemrosesan Form Dan Validasi

PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015

PEMROSESAN FORM DAN VALIDASI A. LATIHAN 1. Latihan 1: Mengenal Masukan Data a. Pengaksesan Pengaksesan data menggunakan menggunakan metode GET

Source code: Metode GET
?>"method method= ="get">

Nama

Tampilan web:

b. Pengkasesan data menggunakan metode POST

Source code: Metode POST
?>"method method= ="post">

Nama

1

PEMROSESAN FORM DAN VALIDASI


if(isset($_POST $_POST[ ['nama' 'nama'])) ])) {

echo'Hallo, ' . $_POST $_POST[ ['nama' 'nama']; ]; } ?>

Tampilan Web:

c. Latihan kecil

Source code: Identifikasi Metode
?>"method method= ="get">

Nama

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 jik a kita mengisi form dengan denga n metode GET maka alamat pada URL bar akan berubah sedangkan sedan gkan jika menggunakan POST maka urlnya urln ya tidak berubah seperti pada contoh. 2



2. Latihan 2: Prefilling Text Field

Source code: Prefilling Text Field

Nama

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:

3


PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015 Data Radio Button

Jenis Kelamin Pria Wanita

Tampilan Web:

b. Prefilling Radio Button

Source code: Prefill Data Radio Button

Jenis Kelamin />Pria

4


PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015 />

Wanita

Tampilan Web:

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

Source code: Data Seleksi

Pekerjaan

5



Tampilan Web:

b. Latihan kecil: penanganan seleksi dengan menambahkan preselecting

Source code: Data Seleksi

Pekerjaan

6



Tampilan Web:

Penjelasan:

5. Latihan 5: Menangani Nilai Check Box a. Penanganan Check Box

Source code: Data Checkbox

Hobi

Membaca

Olahraga

Menyanyi
$val) { echo $key . ' -> ' .$val . '
'; } } ?>

7



Tampilan Web:

b. Latihan kecil

Source code: Data Checkbox

Hobi
if (isset($_POST['job']) && ($_POST['job']=='Membaca')) { echo 'checked="checked"'; } ?> /> Membaca
if (isset($_POST['job']) && ($_POST['job']=='Olahraga')) { echo 'checked="checked"'; } ?> /> Olahraga
if (isset($_POST['job']) && ($_POST['job']=='Menyanyi')) { echo 'checked="checked"'; } ?> /> Menyanyi

8



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

echo $key . ' -> ' .$val . '
'; } } ?>

Tampilan Web:

Penjelasan:

6. Latihan 6: Validasi Form a. Berbasis Javascript

Source code: Validasi Form berbasis JavaScript <script type="text/javascript"> function pesan(){ var ceknama=dokument.identitas.nama.value ; var cekumur=dokument.identitas.umur.value ; var cekemail=document.identitas.email.value ;

(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; } } if

Silahkan isi identitas Anda:

Nama :
Umur : tahun

9



Email :

Tampilan Web:

b. Berbasis PHP Javascript

Source code: Validasi Form berbasis PHP Script

Silahkan isi identitas Anda:

Nama :
Umur : tahun
Email :

Silahkan masukkan nama anda"; }else if((trim($umur)=='')||($umur<0)||(preg_match('[^09]',$umur))) { echo"
Input umur anda salah"; }else if(!filter_var($email,FILTER_VALIDATE_EMAIL)){ echo "
Email Anda salah"; }else{ echo "
Inputan Anda sudah benar"; } } ?>

10



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 type="text/javascript" > $(document).ready(function(){ $('#submit').click(function(){ var username=$('#user').val(); var password=$('#pass').val(); if (username =="")

{ $('#dis').slideDown().html("Please type Username"); return false; } if (password =="") { $('#dis').slideDown().html('Please type Password' ); return false; } }); }); Login

11


Login

Username

Password

else echo ("Username atau Password Anda Salah.Silahkan Coba Lagi!"); ?>

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 kondis i 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



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

Source code: NOTEBOOK STORE

13

type = "checkbox"

type = "checkbox"

type = "checkbox"

type = "checkbox"


PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015 Nama

14



NOTEBOOK STORE

Produk notebook terbaru :

Acer E1-422 Rp. 3900000,00

ASUS X45A Rp. 3400000,00

Lenovo B490-0224 Rp. 5100000,00

Sony Vaio SVF13-N12SG Rp. 14600000,00

Toshiba NB520 Rp. 3400000,00

DATA CUSTOMER

ID Customer :
"Masukkan ID Pelanggan" value = "" />

:

Email :

Alamat :

Member :

Ya Tidak

Pembayaran :

"; if(!isset($_POST['notebook'])){ $_POST['notebook'] = array() ; } if(count($_POST['notebook']) == 0){ echo "
ISIKAN DATA PRODUK
"; } else if((trim($_POST['id']) == '') || ($_POST['id'] < 0) ){ echo "
ID SALAH
"; } else if(strlen($_POST['nama']) == 0){ echo "
ISIKAN NAMA
"; } else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){ echo"
EMAIL SALAH
"; } else if(strlen($_POST['alamat']) == 0){ echo "
ISIKAN ALAMAT
"; } 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 "
PRODUK YANG DIBELI
"; echo"
"; echo "
" ; foreach($_POST['notebook'] as $key => $val){ if($val == 1){ echo"Acer E1-422
" ;

15


PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015 $nHargaTotal

= $nHargaTotal + 3900000

; } else if($val == 2){ echo"Asus X45A
" ; $nHargaTotal = $nHargaTotal + 3400000 ; } else if($val == 3){ echo "Lenovo B490-0224
" ; $nHargaTotal = $nHargaTotal + 5100000 ; } else if($val == 4){ echo"Sony VAIO SVF13-N12SG
" ; $nHargaTotal = $nHargaTotal + 14600000 ; }else if($val == 5){ echo"Toshiba NB520
" ; $nHargaTotal = $nHargaTotal + 3400000 ; } }

echo"
"; echo"
DATA echo"
"; echo"
" ; echo"ID : " . echo"Nama : echo"Email : echo"Alamat : echo"Member : echo"Pembayaran : echo"Total Pembayaran

PELANGGAN
";

$_POST['id'] . "
"; " . $_POST['nama']. "
"; " . $_POST['email']. "
"; " . $_POST['alamat']. "
"; " . $cMember . "
"; " . $_POST['bayar']. "
"; : Rp. " . number_format($nHargaTotal). "
"; echo"Diskon Member : " . $nDiskon. "%
"; $nHargaAkhir = $nHargaTotal - ($nHargaTotal * $nDiskon / 100) ; echo"Pembayaran Akhir : Rp. " . number_format($nHargaAkhir). "
"; echo"
"; } else{ echo "
Anda belum mengisi form dengan benar!
"; } }?>

Tampilan halaman:

16



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: UTS

MASUKKAN BIODATA

Alamat

17



Nama :

:

Tanggal Lahir :

Email :

Jenis Kelamin : Pria Wanita

Pekerjaan :

Hobi : Traveling Olaharaga Musik Lain-Lain

Upload Foto :

18



output.php Form Hasil

INFORMASI BIODATA

19



Nama
:

{

Alamat
:

{

Tanggal Lahir
:

{

Email
:

{

Jenis Kelamin
:

Pekerjaan
:

Hobi
:

Upload Foto
:

if(move_uploaded_file($sumber,$target)) { ?>
20


PRAKTIKUM PEMROGRAMAN BERBASIS WEB March 19, 2015 }else{

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

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



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


NOTEBOOK STORE Produk notebook terbaru :
Acer E1-422	Rp. 3900000,00
ASUS X45A	Rp. 3400000,00
Lenovo B490-0224	Rp. 5100000,00
Sony Vaio SVF13-N12SG	Rp. 14600000,00
Toshiba NB520	Rp. 3400000,00
DATA CUSTOMER
ID Customer	: "Masukkan ID Pelanggan" value = "" />
	:
Email	:
Alamat	:
Member	: Ya Tidak
Pembayaran	:

5.Pemrosesan Form Dan Validasi

Recommend Documents

Login

NOTEBOOK STORE

PRODUK YANG DIBELI

DATA echo""; echo"" ; echo"ID : " . echo"Nama : echo"Email : echo"Alamat : echo"Member : echo"Pembayaran : echo"Total Pembayaran PELANGGAN

MASUKKAN BIODATA

INFORMASI BIODATA

DATA echo"
"; echo"
" ; echo"ID : " . echo"Nama : echo"Email : echo"Alamat : echo"Member : echo"Pembayaran : echo"Total Pembayaran

PELANGGAN