Week 4

1 Maret 2023

KKPR205 – PEMROGRAMAN WEB

FORM HANDLING
OUTCOME

• Students are able to create a form that contains the basic elements
of the most commonly used: TextBox, TextArea, ComboBox / Menu
and Button.
• Students are able to create dynamic form using PHP
• Students are able to gather data from PHP form and use it for further
computation

2
FORM
• Form merupakan antarmuka aplikasi yang digunakan untuk menginput
data ke dalam web melalui elemen-elemennya. Formulir menggunakan
tag HTML <FORM> dan ditutup oleh </FORM>.

• Forms diperlukan bila Anda ingin mengumpulkan beberapa data dari

pengunjung situs. Misalnya saat pendaftaran pengguna Anda ingin
mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.

• HTML Forms berguna untuk menghasilkan website yang lebih interaktif.

3
FORM ATTRIBUT
Atribut Deskripsi
Action Halaman script yang akan melakukan pemrosesan data.
Method Metode yang digunakan untuk meng-upload data. Paling
sering digunakan GET dan POST

Target Halaman atau frame yang digunakan untuk menampilkan

hasil dari pemrosesan data. Biasanya _blank, _self, _parent
dsb.
Enctype Untuk menspesifikasi metode enkripsi terhadap data dari
browser. Biasanya diisi:
 application/x-www-form-urlencoded – Metode standar
yang digunakan untuk scenario sederhana.
 mutlipart/form-data – Digunakan jika ingin melakukan
upload dalam bentuk file(gambar, word, dsb)

4
SIMPLE FORM

5
SIMPLE FORM

6
WEB CONTROL ELEMENTS
• Elemen-elemen yang dapat dimasukkan ke dalam form:
• Textbox
• Textarea
• Button
• Combobox
• Radiobutton,
• Dsb

• Attribut yang wajib diset:

• Name: nama element, dipakai untuk pemrosesan data pada php
• Id, id element, dipakai untuk identifikasi elemen pada javascript/jquery

7
TEXT INPUT CONTROLS

8
TEXT INPUT ATTRIBUT
Atribut untuk tag <input>
Attribute Description
Type dari input. Dapat diisi text untuk single line, atau password untuk
type
password
name Nama element
value Initial value untuk element
size Width/lebar input text
maxlength Maksimum karakter yang dapat diinput

Atribut untuk tag <textarea>

Attribute Description
name Nama element
rows Jumlah baris
cols Jumlah kolom
9
CHECKBOXES CONTROLS
• Digunakan jika dibutuhkan lebih dari satu input yang dapat dipilih. Tag yang
digunakan <input> dengan type=checkbox.

Attribut:
Attribute Description
type Type = checkbox.
Nama element (Nama elemen harus sama untuk satu grup
name
checx box control)
value Value jika checkbox dipilih
checked Set checked jika ingin dipilih secara default.

10
RADIO BUTTON CONTROLS
• Digunakan jika terdapat beberapa pilihan, namun hanya boleh satu yang
dipilih. Tag yang digunakan <input> dengan type=radio

Attribut:
Attribute Description
type Type = radio.
Nama element (Nama elemen harus sama untuk satu grup radio
name
button)
value Value jika radio dipilih
checked Set checked jika ingin dipilih secara default.

11
CHECKBOXES CONTROLS

12
SELECT BOX CONTROLS/ DROPDOWN
LIST
• Untuk menampilkan opsi-opsi pilihan dalam bentuk dropdown, dan user
dapat memilih satu atau lebih pilihan. Tag yang digunakan <select>

Attribut tag <select>

Attribute Description
name Nama element
size Ukuran scrolling box
Jika diizinkan untuk memilih lebih dari satu option, maka diset
multiple
multiple.

Attribute Description
value Value jika option dipilih dipilih.
selected Jika diset selected, maka option akan terpilih secara default.
label Label alternative 13
BUTTON CONTROL
• Untuk menampilkan button. Tag yang digunakan adalah <button>. Namun
dapat juga menggunakan tag <input> dengan type= button.

Attribut

Type Description
submit Button yang digunakan untuk men-submit form
reset Button yang digunakan untuk mereset form ke initial value
Button yang digunakan untuk mentrigger client-side script ketika
button
diklik
image Button yang menggunakan image sebagai backgroudnya.

14
HIDDEN CONTROL
• Hidden control digunakan untuk meng-hide data pada halaman HTML. Data
tersebut dibutuhkan di server, namun tidak perlu ditampilkan di halaman.
• Tag yang digunakan <input> dengan type=hidden.

15
PEMROSESAN FORM

• Form yang telah dibuat, hanya merupakan tampilan antarmuka dan belum
dapat melakukan eksekusi. Agar formulir ini berfungsi, maka harus diberi
suatu method yaitu POST atau GET.
• Metode POST
Metode POST merupakan metode pengiriman dimana data yang
dikirim tidak ditampilkan di browser ke tempat tujuan melalui atribut action.
• Metode GET
Metode GET memiliki fungsi yang sama dengan POST hanya kalau
GET, parameter pengirimannya diperlihatkan di browser.

16
PEMROSESAN FORM

Pemrosesan form dalam PHP dapat menggunakan 2

metode
1. Pemrosesan di file php berbeda (ada 2 file, satu untuk
tampilan, satu untuk pemrosesan)
2. Pemrosesan di file php yang sama (hanya menggunakan
satu file, dibagi 2 blok, 1 blok untuk tampilan, satu blok
untuk pemrosesan)

17
PEMROSESAN DENGAN 2 FILE
MENGGUNAKAN METODE POST
File 1 : index_post.php

File 2 : welcome_post.php

18
PEMROSESAN DENGAN 2 FILE
MENGGUNAKAN METODE GET
File 1 : index_get.php

File 2 : welcome_get.php

19
PEMROSESAN DENGAN 1 FILE
MENGGUNAKAN METODE POST
File : index_one_post.php

20
PEMROSESAN DENGAN 1 FILE
MENGGUNAKAN METODE GET
File : index_one_get.php

21
LATIHAN 1
Buat kode php untuk menampilkan data yang diinput user dalam form yang
sama

22
LATIHAN 2
• Buatlah sebuah form php sederhana (penyewaan.php) untuk penyewaan
buku sebagai berikut:
• Form penyewaan.php Form penyewaanpost.php

23
LATIHAN 2
• Button ‘Simpan’ untuk memproses data masukkan di form dan
menampilkan outputnya di form penyewaanpost.php
• Button ‘Batal’ untuk mereset value di dalam form
• Link kembali di form penyewaanpost.php untuk kembali ke form
penyewaan.php

Ketentuan data sbb:

• Kategori buku : Fiksi, Non Fiksi, Karya Ilmiah, Majalah.
• Tanggal Pinjam: 1-31. Bulan : Januari – Desember, Tahun : 2020,
2019, 2018
• Nama petugas: isikan data minimal 3 nama
• Tarif sewa dihitung per buku per hari.
• Untuk buku dengan kategori karya ilmiah, tarifnya Rp 10.000,
selain itu Rp 5.000,-
• Biaya sewa = Tarif Sewa X Lama Pinjam
24
REDIRECT HALAMAN WEB

• Redirect page atau pengalihan halaman adalah suatu cara

yang digunakan untuk mengalihkan suatu halaman
website menuju halaman web lainnya.
• Redirect halaman ini bisa dilakukan dengan berbagai
bahasa pemrograman web seperti PHP, HTML, dan
Javascript.

25
REDIRECT DENGAN PHP

• Syntax
<?php
header("location:url-tujuan");
?>

• Contoh
<?php
header("location:http://esqbs.ac.id");
?>

• Contoh diatas akan mengalihkan halaman PHP secara otomatis

ke http://esqbs.ac.id saat halaman tersebut diakses.
• Untuk redirect ke halaman yang terdapat dalam folder yang
sama, url cukup berupa url halamannya saja tanpa http
26
REDIRECT DENGAN HTML
• Syntax
<meta http-equiv="Refresh" content="waktu-tunda; URL=url-tujuan">

• Contoh
<?php
echo ‘<meta http-equiv="Refresh" content=“10; URL=http://esqbs.ac.id">’;
?>

• Contoh diatas akan mengalihkan halaman PHP secara

otomatis ke http://esqbs.ac.id setelah 10 detik halaman
tersebut diakses.
• Untuk redirect ke halaman yang terdapat dalam folder yang
sama, url cukup berupa url halamannya saja tanpa http
27
REDIRECT DENGAN JAVASCRIPT
• Syntax
<script>
window.location.href=“url-tujuan”;
</script>

• Contoh
echo '<script>
window.location = "index.php";
</script>';

• Contoh diatas akan mengalihkan halaman PHP secara

otomatis ke index.php saat halaman tersebut diakses.
28
LATIHAN 3
• Modifikasi file Latihan 1
• Setelah form di-submit, tampilkan pesan javascript
bahwa Sign Up berhasil, kemudian langsung
redirect ke halaman login.php

29