Dokumen - SKB133306 - STMIK EL RAHMA Pertemuan IV
PEMROGRAMAN WEB II
PENANGANAN FORM
Agustina Purwatiningsih., S.Kom
1
PENGERTIAN
Form merupakan sebuah metode yang digunakan dalam Web Site yang
mengizinkan seorang pengunjung untuk dapat berinteraksi dengan Server
ataupun dengan pengelola Web Site tersebut.
Untk dapat menciptakan
halaman Web yang dapat berinteraksi dengan pengunjung salah satunya kita
dapat menggunakan form, yang kemudian
form tersebut akan dikirim
menggunakan sebuah program aplikasi Web berbasis Server Side menuju
Database Server. Adapun beberapa program Server side yang dimaksud antara
lain adalah PHP, ASP, PERL dan lain lain.
2
CONTOH IMPLEMENTASI FORM
Contoh implementasi form dapat dilihat di https://www.facebook.com/
3
FORM INPUTAN
Pada form inputan terdapat beberapa elemen didalamnya, antara lain :
Tag
Atribut ACTION
Atribut METHOD
SUBMIT BUTTON
4
TAG
digunakan untuk mendeklarasikan awalan atau start tag sebuah form
Tag FORM mendefinisikan satu kesatuan masukan
Dalam satu halaman dapat terdiri dari satu atau lebih tag
Dalam satu tag dapat terdiri dari beberapa jenis masukan
5
ATRIBUT ACTION
Atribut ACTION terdapat di dalam tag
Atribut ini digunakan untuk menentukan alamat dimana data dari komponen form
akan dikirimkan
Dapat berisi a a_hala a .php atau koso g
6
ATRIBUT METHOD
Atribut yang digunakan untuk membedakan metode pengiriman data, dan
bagaimana form akan diproses
Atribut METHOD terdapat di dalam tag
Atribut method dibagi menjadi 2 yaitu:
a) GET
pengiriman data ke dalam halaman lain yang tidak berhubungan dengan halaman
selanjutnya
b) POST
Melakukan pengiriman data pada halaman lain yang selanjutnya dapat diproses
menuju halam berikutnya ataupun melakukan pengiriman ke dalam database
7
SUBMIT DN RESET BUTTON
SUBMIT BUTTON merupakan trigger yang menandakan suatu form akan diproses.
Pada dasarnya SUBMIT BUTTON dapat berupa tombol atau komponen HTML yang
lain yang difungsikan sebagai tombollain yang difungsikan sebagai tombol.
RESET digunakan untuk mengosongkan data yang telah diisi sebelumnya.
8
SINTAKS FORM
form tags
form tags
form tags
form tags
form tags
window name > form tags
form tags
Note : target window name diisikan berupa:Note : target window name diisikan berupa:
• _blank : buka window baru
• _self : pada window yang sama
• _parent
• _top
9
PENANGANAN FORM DI PHP
•
•
•
$_POST_
Digunakan untuk form dengan method POST, data tidak akan ditampilkan di address
browser.
$_GET
Digunakan untuk form dengan method GET, data ditampilkan di address browserdata
ditampilkan di address browser.
$_REQUEST
Digunakan untuk form dengan method POSTDigunakan untuk form dengan method
POST maupun GET.
10
JENIS – JENIS FORM MASUKAN
•
•
•
•
•
•
•
TEXT
PASSWORD
HIDDEN FIELD
RADIO button
CHECKBOX
COMBO BOX
TEXTAREATEXTAREA
11
Form masukan TEXT
Teks adalah masukan yang berbentuk karakter
Teks dikhususkan untuk menerima masukan yang sifatnya tidak begitu banyak,
Ex : pernyataan nama
dengan menggunakan metode tersebut, anda telah memiliki suatu bentuk masukan
berupa TEXT, yang kemudian dibaca dengan dengan variabel nama.
12
Contoh untuk GET, TEXT, SUBMIT
INPUT CLIENT BROWSER
PROSES DI SERVER
OUTPUT CLIENT BROWSER
13
Contoh untuk POST, TEXT, SUBMIT
INPUT CLIENT BROWSER
PROSES DI SERVER
OUTPUT CLIENT BROWSER
14
Contoh untuk REQUEST
PROSES DI SERVER
OUTPUT CLIENT BROWSER GET
OUTPUT CLIENT BROWSER POST
15
Form masukan PASSWORD
•
•
•
•
•
Password adalah bentuk kata yang dirahasiakan
Dalam menggunakan komponen password, setiap karakter yang dimasukkan
didalamnya akan di enkripsi sehingga pada halaman address web hanya akan terlihat
kode seperti bintang – bintang
StandardStandard
Menentukan panjang password
Menentukan ukuran dari form password
NB: Gunakan metode POST untuk menerima data password agar tidak kelihatan datanya.
16
Contoh Inputan PASSWORD
17
Input HIDDEN FILE
Di dalam form kita juga mengenal masukan yang disembunyikan atau di hidden.
Penggunaanya adalah untuk mnyimpan data yang berasal dari variabel masukan
sebelumnya, data tersebut akan
disimpan dalam variabel masukan yang
disembunyikan selanjutnya dilakukan pengiriman data menuju halaman yang lain
Hidden file juga dapat digunakan untuk mendeklarasika data yang sifatnya permanen,
maksudnya apapun data yang dimasukkan oleh pengunjung akan memiliki tambahan
data yang telah diletakkan pada variable komponen hidden
dalam implementasinya hidden file dapat dituliskan:
18
Input RADIO BUTTON
Dalam penggunaannya, pilihan – plihan yang hanya mengizinkan kita untuk memilih
pilihan hanya satu:
19
Input CHECKBOX BUTTON
Pada checkbox button, pilihan berupa ganda yang artinya dibolehkan anda menentukan
pilihan lebih dari satu.
20
INPUT COMBO BOX
Combo box merupakan metode masukan data yang datanya telah dideklarasikan
sebelumnya oleh pembuatnya. Dengan combo box hanya diizinkan melakukan pilihan
berjumlah satu pilihan saja
21
INPUT TEXT AREA
Pada input text kita diberi kesempatan untuk memasukkan data yang banyak. Ex:
komentar atau status dalam facebook.
22
TUGAS
Buatlah form seperti interface facebook atau bisa dimodifikasi, intinya form tersebut
mengandung semua type inputan dan tampilkan nilai outputnya pada file proses .
Dikirim ke : agustina.purwa@gmail.com Subject: PEMWEB File: di zip/rar dengan nama
tugas2_nim
Paling lambat pengumpulan 18 Maret pukul 23.59 WIB
23
Setiap Kesuksesan Sudah Ada Di Depan
Mata, Tinggal Mau Di Ambil atau Tidak
24
PENANGANAN FORM
Agustina Purwatiningsih., S.Kom
1
PENGERTIAN
Form merupakan sebuah metode yang digunakan dalam Web Site yang
mengizinkan seorang pengunjung untuk dapat berinteraksi dengan Server
ataupun dengan pengelola Web Site tersebut.
Untk dapat menciptakan
halaman Web yang dapat berinteraksi dengan pengunjung salah satunya kita
dapat menggunakan form, yang kemudian
form tersebut akan dikirim
menggunakan sebuah program aplikasi Web berbasis Server Side menuju
Database Server. Adapun beberapa program Server side yang dimaksud antara
lain adalah PHP, ASP, PERL dan lain lain.
2
CONTOH IMPLEMENTASI FORM
Contoh implementasi form dapat dilihat di https://www.facebook.com/
3
FORM INPUTAN
Pada form inputan terdapat beberapa elemen didalamnya, antara lain :
Tag
Atribut ACTION
Atribut METHOD
SUBMIT BUTTON
4
TAG
digunakan untuk mendeklarasikan awalan atau start tag sebuah form
Tag FORM mendefinisikan satu kesatuan masukan
Dalam satu halaman dapat terdiri dari satu atau lebih tag
Dalam satu tag dapat terdiri dari beberapa jenis masukan
5
ATRIBUT ACTION
Atribut ACTION terdapat di dalam tag
Atribut ini digunakan untuk menentukan alamat dimana data dari komponen form
akan dikirimkan
Dapat berisi a a_hala a .php atau koso g
6
ATRIBUT METHOD
Atribut yang digunakan untuk membedakan metode pengiriman data, dan
bagaimana form akan diproses
Atribut METHOD terdapat di dalam tag
Atribut method dibagi menjadi 2 yaitu:
a) GET
pengiriman data ke dalam halaman lain yang tidak berhubungan dengan halaman
selanjutnya
b) POST
Melakukan pengiriman data pada halaman lain yang selanjutnya dapat diproses
menuju halam berikutnya ataupun melakukan pengiriman ke dalam database
7
SUBMIT DN RESET BUTTON
SUBMIT BUTTON merupakan trigger yang menandakan suatu form akan diproses.
Pada dasarnya SUBMIT BUTTON dapat berupa tombol atau komponen HTML yang
lain yang difungsikan sebagai tombollain yang difungsikan sebagai tombol.
RESET digunakan untuk mengosongkan data yang telah diisi sebelumnya.
8
SINTAKS FORM
form tags
form tags
form tags
form tags
form tags
window name > form tags
form tags
Note : target window name diisikan berupa:Note : target window name diisikan berupa:
• _blank : buka window baru
• _self : pada window yang sama
• _parent
• _top
9
PENANGANAN FORM DI PHP
•
•
•
$_POST_
Digunakan untuk form dengan method POST, data tidak akan ditampilkan di address
browser.
$_GET
Digunakan untuk form dengan method GET, data ditampilkan di address browserdata
ditampilkan di address browser.
$_REQUEST
Digunakan untuk form dengan method POSTDigunakan untuk form dengan method
POST maupun GET.
10
JENIS – JENIS FORM MASUKAN
•
•
•
•
•
•
•
TEXT
PASSWORD
HIDDEN FIELD
RADIO button
CHECKBOX
COMBO BOX
TEXTAREATEXTAREA
11
Form masukan TEXT
Teks adalah masukan yang berbentuk karakter
Teks dikhususkan untuk menerima masukan yang sifatnya tidak begitu banyak,
Ex : pernyataan nama
dengan menggunakan metode tersebut, anda telah memiliki suatu bentuk masukan
berupa TEXT, yang kemudian dibaca dengan dengan variabel nama.
12
Contoh untuk GET, TEXT, SUBMIT
INPUT CLIENT BROWSER
PROSES DI SERVER
OUTPUT CLIENT BROWSER
13
Contoh untuk POST, TEXT, SUBMIT
INPUT CLIENT BROWSER
PROSES DI SERVER
OUTPUT CLIENT BROWSER
14
Contoh untuk REQUEST
PROSES DI SERVER
OUTPUT CLIENT BROWSER GET
OUTPUT CLIENT BROWSER POST
15
Form masukan PASSWORD
•
•
•
•
•
Password adalah bentuk kata yang dirahasiakan
Dalam menggunakan komponen password, setiap karakter yang dimasukkan
didalamnya akan di enkripsi sehingga pada halaman address web hanya akan terlihat
kode seperti bintang – bintang
StandardStandard
Menentukan panjang password
Menentukan ukuran dari form password
NB: Gunakan metode POST untuk menerima data password agar tidak kelihatan datanya.
16
Contoh Inputan PASSWORD
17
Input HIDDEN FILE
Di dalam form kita juga mengenal masukan yang disembunyikan atau di hidden.
Penggunaanya adalah untuk mnyimpan data yang berasal dari variabel masukan
sebelumnya, data tersebut akan
disimpan dalam variabel masukan yang
disembunyikan selanjutnya dilakukan pengiriman data menuju halaman yang lain
Hidden file juga dapat digunakan untuk mendeklarasika data yang sifatnya permanen,
maksudnya apapun data yang dimasukkan oleh pengunjung akan memiliki tambahan
data yang telah diletakkan pada variable komponen hidden
dalam implementasinya hidden file dapat dituliskan:
18
Input RADIO BUTTON
Dalam penggunaannya, pilihan – plihan yang hanya mengizinkan kita untuk memilih
pilihan hanya satu:
19
Input CHECKBOX BUTTON
Pada checkbox button, pilihan berupa ganda yang artinya dibolehkan anda menentukan
pilihan lebih dari satu.
20
INPUT COMBO BOX
Combo box merupakan metode masukan data yang datanya telah dideklarasikan
sebelumnya oleh pembuatnya. Dengan combo box hanya diizinkan melakukan pilihan
berjumlah satu pilihan saja
21
INPUT TEXT AREA
Pada input text kita diberi kesempatan untuk memasukkan data yang banyak. Ex:
komentar atau status dalam facebook.
22
TUGAS
Buatlah form seperti interface facebook atau bisa dimodifikasi, intinya form tersebut
mengandung semua type inputan dan tampilkan nilai outputnya pada file proses .
Dikirim ke : agustina.purwa@gmail.com Subject: PEMWEB File: di zip/rar dengan nama
tugas2_nim
Paling lambat pengumpulan 18 Maret pukul 23.59 WIB
23
Setiap Kesuksesan Sudah Ada Di Depan
Mata, Tinggal Mau Di Ambil atau Tidak
24