• Tidak ada hasil yang ditemukan

LAPORAN PEMROGRAMAN WEB PEMROSESAN FOR

N/A
N/A
Protected

Academic year: 2017

Membagikan "LAPORAN PEMROGRAMAN WEB PEMROSESAN FOR"

Copied!
32
0
0

Teks penuh

(1)

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

(2)

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>

(3)

<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 _parent _top

Check 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.

(4)

- 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"> // membuat form nama dengan metode get

Nama

<input type="text" name="nama" /> <br /> //form inputan nama <input type="submit" value="OK" /> //button ok

</form>

(5)

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

(6)

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

<?php

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

(7)

<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 metode yang 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 :

(8)

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

<?php

if (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.

(9)

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

<?php

if (isset($_POST['sex'])){ //penggunaan perkondisian if dengan fungsi isset untuk pengecekan isi data yang ada pada variabel post sex

(10)

}

?>

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

<?php

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

echo $_POST['sex']; }

?>

</body> </html>

- Output:

- Deskripsi:

(11)

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

<?php

if (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.

(12)

<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 <?php

if ($_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

<?php

if ($_POST['sex'] == 'Wanita'){

echo 'checked="checked"';//fungsi untuk tetap menampilkan pilihan radio button jika memilih radio button wanita

}

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

(13)

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

<?php

if (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 yang tersedia

<option value="ABRI">ABRI <option value="PNS">PNS

<option value="Swasta">Swasta </select> <br />

<input type="submit" value="Ok" /> //pembuatan button ok </form>

<?php

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

}

?>

(14)

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 :

(15)

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

mengecek isi data pada variabel post job

(16)

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 nilai

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

(17)

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>

<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'])

(18)

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

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

(19)

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

(20)

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

(21)

</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> 9]',$umur))) //kondisi jika menginputkan umur kurang dari 0 dengan pengecekan menggunakan fungsi umur

//perkondisian untuk mengecek dan menyaring isi dari variabel email

{ muncul inputan anda sudah benar (perkondisian else)

}

(22)

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>

(23)
(24)

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

(25)

{

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

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>

(26)
(27)

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

(28)

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> <!--menyatakan dokumen html-->

<head> <!--menytakan informasi seputar dokumen html-->

<title>Studi Kasus</title> <!--title bar-->

</head> <!--tag penutup head-->

<body> <!--pelingkup kode html-->

<form action="<?php $_SERVER['PHP_SELF'];?>" name="notebook" method="post" >

<!--membuat form pada dokumen html-->

<table width=300 border=0 cellpadding=2 align="center" bgcolor="cyan">

<!--membuat tabel-->

<!--<th> table header, semua teks yg berada pada tabel header posisinya di tengah-->

<!--<tr> table rows, tag ini digunakan ketika akan berpindah baris pada tabel-->

<!--<td> table data, tag ini digunakan unt mengisi data pd tabel, semua teks yg berada pd table data posisinya di kiri-->

<tr><th colspan=2><h1><b>NOTEBOOK STORE</b></h1></th></tr>

<!--teks judul-->

<tr><td colspan=2>Produk notebook terbaru :</td></tr> <!--teks keterangan produk-->

<tr><td><input type="checkbox" name="barang[]" value="Acer">Acer</td><td>Rp. 3.900.000,00</td></tr>

(29)

<tr><td><input type="checkbox" name="barang[]" value="Asus">Asus</td><td>Rp. 3.400.000,00</td></tr>

<!--membuat input berupa checkbox unt memudahkan user memilih produk yg ingin di beli-->

<tr><td><input type="checkbox" name="barang[]" value="Lenovo">Lenovo</td><td>Rp. 5.100.000,00</td></tr>

<!--membuat input berupa checkbox unt memudahkan user memilih produk yg ingin di beli-->

<tr><td><input type="checkbox" name="barang[]" value="Sony">Sony</td><td>Rp. 14.600.000,00</td></tr>

<!--membuat input berupa checkbox unt memudahkan user memilih produk yg ingin di beli-->

<tr><td><input type="checkbox" name="barang[]" value="Toshiba">Toshiba</td><td>Rp. 3.400.000,00</td></tr>

<!--membuat input berupa checkbox unt memudahkan user memilih produk yg ingin di beli-->

<tr></tr> <!--pindah baris--> satu menu pilihan pada drop down-->

<option value="Debit BCA">Debit BCA</td></tr> <!--salah satu menu pilihan pada drop down-->

<tr></tr> <!--pindah baris-->

<tr><th colspan=2><input type="submit" value="Submit" name="submit"></th></tr> <!--button submit-->

<!--membuat button submit unt melakukan proses pengolahan data yg telah diinpukan oleh user-->

(30)

$_POST['barang'] = array() ;

}

//validasi produk

if(count($_POST['barang']) == 0){

echo "Pilih produk yang anda inginkan"; // menampilkan string 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 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

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

(31)

echo "Lenovo B490-0224<br />" ; // menampilkan string 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 diterjemhkan oleh 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/>"; //

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

}

?> <!--penutup kode html-->

</body> <!--penutup tg body-->

</html> <!--penutup tag html-->

G. KESIMPULAN

(32)

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

Referensi

Dokumen terkait