Think Different Materi Pemrograman Web 1 04_Penanganan Form
Penanganan Form
Aryo Pinandito, ST, M.MT
Fajar Pradana, S.ST, M.Eng
Issa Arwani, S.Kom, M.Sc
1 . PEN D AH U LUAN
1.1 Pengant ar
1.2 Tuj uan
2.
3.
4.
5.
Pe nga nt a r For m
M e t hod Post da n Ge t
M a nipu la si Form
Ca ra Pe na n ga na n For m
1 . PEN D AH ULUAN
Form m erupakan salah sat u elem ent HTML yang digunakan unt uk
m enerim a input dari user. Halam an yang m engandung form m urni
( t idak ada script php) t idak harus disim pan dalam bent uk php, bisa
dalam bent uk ht m l. Melalui for m user dapat berint eraksi dengan web.
Pengunj ung dapat m em asuk an dat a m elalui elem en- elem en input
sepert i t ex t field, checkbox, radio but t on, t ext area, subm it but t on dan
m asih banyak lagi lainny a. Selain it u pengunj ung j uga dapat
m elakukan pem ilihan dat a m enggunak an elem en select list at au biasa
dikenal dengan ist ilah com bo box at au dropdown list . Form berfungsi
unt uk m em buat sebuah halam an web m enj adi int erakt if dan dinam is
1 .2 Tu j u a n
Tuj uan pem belaj aran pada bab ini adalah:
1. Mem aham i St ruk t ur Kont r ol Program
2. Mam pu m engim plem ent asik an st rukt ur percabangan
3. Mam pu m engim plem ent asik an st rukt ur perulangan
4. Mam pu m engim plem ent asik an st rukt ur perpindahan
4
SELF-PROPAGATING ENTREPRENEURIAL EDUCATION DEVELOPMENT
1 .1 Pe n ga n t a r
MODUL
Pemrograman Web / Penanganan Form
Brawijaya University
2012
2 . PEN GAN TAR FORM
Form m erupakan salah sat u elem ent HTML yang digunakan unt uk m enerim a input dari user.
Halam an yang m engandung for m m urni ( t idak ada script php) t idak harus disim pan dalam
bent uk php, bisa dalam bent uk ht m l. Melalui for m user dapat berint eraksi dengan web.
Pengunj ung dapat m em asuk an dat a m elalui elem en- elem en input sepert i t ext field, check box ,
radio but t on, t ex t area, subm it but t on dan m asih banyak lagi lainnya.
Selain it u pengunj ung j uga dapat m elakukan pem ilihan dat a m enggunakan elem en select list
at au biasa dikenal dengan ist ilah com bo box at au dropdown list . Form ber fungsi unt uk
m em buat sebuah halam an web m enj adi int erakt if dan dinam is
Unt uk m em buat sebuah for m , ada 3 hal pent ing yang harus dipaham i :
•
M ETH OD
Met hod dari sebuah form m enent ukan bagaim ana m et ode dat a input an form dik irim k e
t uj uan. Met hod ini ada dua m acam , yait u GET dan POST. Met hod GET m engirim dat a
pada server dengan cara m elet akan dat a pada bagian akhir URL yang d t unj uk,
sedangkan m et hod POST m engirim dat anya secara t erpisah. Met hod ini m enent uk an
bagaim ana dat a input an dikirim dan diproses oleh PHP.
•
Synt ax : METHOD =”POST|GET”
ACTI ON
Act ion dari sebuah form m enent ukan lokasi dari script yang akan m em pr oses dat a dari
for m .Jik a act ion ini dik osongkan, m aka dianggap pr oses for m t erj adi di halam an yang
sam a. Jadi halam an for m dan halam an proses bisa saj a dipisah at au dij adik an sat u.
•
Synt ax : ACTION=”URL”
SUBM I T BUTTON
Subm it but t on m erupak an sebuah t om bol ( pada um um nya) yang berfungsi sebagai
t rigger pengirim an dat a dari form input an. Jika t om bol ini dit ekan, m aka dat a form akan
dikirim kan ( diproses) di halam an y ang sudah dit ent ukan pada at ribut act ion.
3 . M ETH OD POST D AN GET
Pada elem en for m t erdapat 2 ( dua) m et hod yang digunakan unt uk m engirim kan dat a dari
halam an for m ke serv er. GET dan POST adalah m et ode pengirim an dat a dari suat u client k e
server m elalui browser. Per bedaan dari dua m et hod t ersbut yang paling m endasar adalah
cara m engir im v ariabel saat kit a m enek an t om bol subm it .
Jik a POST, m ak a value dan variabel dari elem en- elem en yang ada di form dikirim kan secara
langsung ke page act ion dari for m k it a dengan t idak m enam pilkan value dan variabel dari
elem en- elem en t ersebut , hal ini t ent unya dat a- dat a yang dik irim kan akan lebih am an, karena
secara langsung dat a- dat a t ersebut t idak t am pak/ t am pil di halam an act ion, unt uk
m engam bilnya kit a perlu m enggunak an script ing/ server script
Sedangkan GET, v alue dan v ariabel dari elem en- elem en di form akan dikirim kan sem ua
m elalui query st ring sehingga orang akan t ahu, apa saj a dat a- dat a yang dik irim kan secara
langsung, hal ini y ang bisa m em buat web kit a rent an oleh serangan. Dengan j avascript pun
kit a dapat m enangkap dat a- dat a yang dik irim kan
Halaman39
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
3 .1 M e t ode Ge t
Met ode GET adalah sebuah fungsi y ang digunakan unt uk m engum pulkan nilai dari sebuah
for m yang dikirim k an dengan m et ode GET. Efek sam ping dari cara m engirim dat a adalah GET
t idak cocok dipakai unt uk m engirim dat a yang bersifat rahasia sepert i PI N, passwor d dan
sej enisnya. Efek sam ping lain, GET t idak cocok dipakai unt uk m engirim dat a dalam j um lah
besar. GET hanya cocok unt uk m engirim dat a dalam j um lah kecil, sedangkan post cocok
dipakai unt uk m engirim dat a dalam j um lah besar sepert i upload dat a, m enulis blog at au
art ikel dan sej enisny a.
Nam un, kelebihan dari GET adalah hasil dari proses GET bisa di bookm ark. Cont oh paling
t am pak adalah Google. Google m enggunakan m et hod GET dalam m engirim dat a sehingga
hasil pencarianny a bisa di Book m ark .
Berik ut adalah cont oh penggunaan m et ode GET :
ContohMethod Get
Name :
|
Tam pilan d br owser :
Halaman40
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
3 .2 M e t h od POST
Fungsi$_POSTdigunak an unt uk m engum pulk an nilai v ariable dari sebuah for m y ang dik irim k an
m enggunakan m et ode POST. I nfrom asi yang dikirim kan t idak dapat dilihat oleh orang lain
pada address bar di br owser dan t idak dapat m em ilik i bat asan pada banyaknya inform asi
y ang dikirim
Berik ut adalah cont oh penggunaan m et ode POST
Contoh Method Post
Name :
|
Tam pilan di Browser
Halaman41
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
4 . M AN I PULASI FORM
4 .1 Te x t Field
Text field adalah elem en input yang m em ungkinkan pengunj ung m em asukan t ext dalam sat u
baris. Lebar k arakt er t ext field default nya adalah 20 karakt er
Sy nt ax :
Cont oh penggunaan :
Contoh Text Field
Name :
|
Tam pilan di br owser
4 .2 Ra dio but t on
Radio But t on adalah suat u t om bol y ang digunakan unt uk m engam bil salah sat u pilihan dari
banyak pilihan yang t ersedia. Sepert i cont ohnya pem ilihan j enis gender ( m ale at au fem ale)
Sy nt ax :
Halaman42
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Cont oh Penggunaan :
Contoh Radio Button
Gender : Male
Female
Tam pilan di Browser :
4 .3 Ch e ck Box
Digunakan unt uk m em ilih beberapa pilihan dat a sekaligus at au lebih dari sat u pilihan dari
daft ar pilihan y ang ada
Sy nt ax :
Cont oh Penggunaan :
Contoh Check Box
Hoby : Reading
Shoping
Swimming
Halaman43
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Tam pilan di Browser :
4 .4 Com bo Box
Digunakan unt uk m em ilih beberapa pilihan dat a sekaligus at au lebih dari sat u pilihan dari
daft ar pilihan y ang ada
Sy nt ax :
……
Halaman44
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Cont oh Penggunaan :
Contoh Combo Box
Provinsi :
Sumatera Barat
Jambi
DKI Jakarta
DI Yogyakarta
Nusa Tenggara Barat
Tam pilan di Browser :
4 .5 Te x t Are a
Text Area adalah suat u k ot ak area y ang berisi t eks, yang apabila t eks t ersebut m elebihi
kapasit as dari area t ersebut ak an m em punyai fungsi scroll, at au dalam bahasa indonesiany a
adalah Area Teks at au Kot ak Teks. ini dim aksudkan agar m em inim alisasi t em pat agar t idak
m em akan t em pat unt uk penem pat an t eks at au t ulisan t ersebut .
Halaman45
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Sy nt ax :
Name = “name”
Cols = “number”
Rows=“number”>
……………
Cont oh Penggunaan :
Contoh Text Area
Address :
|
Tam pilan di Browser :
Halaman46
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
5 . CARA PEN AN GAN AN FORM
Pe ngga bun ga n a nt a r a For m da n Pr ose s
Proses pengolahan form dilak uk an di halam an yang sam a dengan form input anny a. Jik a
proses penanganan form berada di sat u halam an, m aka value
at ribut act ion pada t ag form dikosongk an. ( Cont oh sy nt ax diat as seluruhnya m eny at uk an
ant ara form dan proses)
Pe m isa ha n a nt a r a For m da n Pr ose s
Proses pengolahan form dilak uk an di halam an yang t erpisah dengan for m input anny a. Jik a
proses penanganan form berada dilakukan di halam an yangberbeda, m aka value at ribut
a ct ion pada t ag for m harus diisi dengan alam at halam an t em pat pr oses pengolahan form .
Cont oh :
Contoh Pemisahan Form dan Proses
Name :
|
Halaman47
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Tam pilan di Browser
Halaman48
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
REFEREN SI
Anonim . Modul Pengaj aran PPPGT Malang. 2006.
Saput ra, Ridwan S. Pem rogram an HTML. 2010
PROPAGASI
A. La t iha n da n D isk usi ( Pr opa ga si Ve r t ik a l da n H or izont al)
1.
2.
Apa saj a elem en yang t erdapat pada form !
Jelaskan perbedaan ant ara penggunaan m et ode get dan m et ode post !
B.
Tuga s ( Eva lua si m a ndir i)
Buat lah sebuah form Guest Book unt uk m enerim a input dari pengguna kem udian
t am pilkan pada halam an selanj ut nya.
Halaman49
Aryo Pinandito, ST, M.MT
Fajar Pradana, S.ST, M.Eng
Issa Arwani, S.Kom, M.Sc
1 . PEN D AH U LUAN
1.1 Pengant ar
1.2 Tuj uan
2.
3.
4.
5.
Pe nga nt a r For m
M e t hod Post da n Ge t
M a nipu la si Form
Ca ra Pe na n ga na n For m
1 . PEN D AH ULUAN
Form m erupakan salah sat u elem ent HTML yang digunakan unt uk
m enerim a input dari user. Halam an yang m engandung form m urni
( t idak ada script php) t idak harus disim pan dalam bent uk php, bisa
dalam bent uk ht m l. Melalui for m user dapat berint eraksi dengan web.
Pengunj ung dapat m em asuk an dat a m elalui elem en- elem en input
sepert i t ex t field, checkbox, radio but t on, t ext area, subm it but t on dan
m asih banyak lagi lainny a. Selain it u pengunj ung j uga dapat
m elakukan pem ilihan dat a m enggunak an elem en select list at au biasa
dikenal dengan ist ilah com bo box at au dropdown list . Form berfungsi
unt uk m em buat sebuah halam an web m enj adi int erakt if dan dinam is
1 .2 Tu j u a n
Tuj uan pem belaj aran pada bab ini adalah:
1. Mem aham i St ruk t ur Kont r ol Program
2. Mam pu m engim plem ent asik an st rukt ur percabangan
3. Mam pu m engim plem ent asik an st rukt ur perulangan
4. Mam pu m engim plem ent asik an st rukt ur perpindahan
4
SELF-PROPAGATING ENTREPRENEURIAL EDUCATION DEVELOPMENT
1 .1 Pe n ga n t a r
MODUL
Pemrograman Web / Penanganan Form
Brawijaya University
2012
2 . PEN GAN TAR FORM
Form m erupakan salah sat u elem ent HTML yang digunakan unt uk m enerim a input dari user.
Halam an yang m engandung for m m urni ( t idak ada script php) t idak harus disim pan dalam
bent uk php, bisa dalam bent uk ht m l. Melalui for m user dapat berint eraksi dengan web.
Pengunj ung dapat m em asuk an dat a m elalui elem en- elem en input sepert i t ext field, check box ,
radio but t on, t ex t area, subm it but t on dan m asih banyak lagi lainnya.
Selain it u pengunj ung j uga dapat m elakukan pem ilihan dat a m enggunakan elem en select list
at au biasa dikenal dengan ist ilah com bo box at au dropdown list . Form ber fungsi unt uk
m em buat sebuah halam an web m enj adi int erakt if dan dinam is
Unt uk m em buat sebuah for m , ada 3 hal pent ing yang harus dipaham i :
•
M ETH OD
Met hod dari sebuah form m enent ukan bagaim ana m et ode dat a input an form dik irim k e
t uj uan. Met hod ini ada dua m acam , yait u GET dan POST. Met hod GET m engirim dat a
pada server dengan cara m elet akan dat a pada bagian akhir URL yang d t unj uk,
sedangkan m et hod POST m engirim dat anya secara t erpisah. Met hod ini m enent uk an
bagaim ana dat a input an dikirim dan diproses oleh PHP.
•
Synt ax : METHOD =”POST|GET”
ACTI ON
Act ion dari sebuah form m enent ukan lokasi dari script yang akan m em pr oses dat a dari
for m .Jik a act ion ini dik osongkan, m aka dianggap pr oses for m t erj adi di halam an yang
sam a. Jadi halam an for m dan halam an proses bisa saj a dipisah at au dij adik an sat u.
•
Synt ax : ACTION=”URL”
SUBM I T BUTTON
Subm it but t on m erupak an sebuah t om bol ( pada um um nya) yang berfungsi sebagai
t rigger pengirim an dat a dari form input an. Jika t om bol ini dit ekan, m aka dat a form akan
dikirim kan ( diproses) di halam an y ang sudah dit ent ukan pada at ribut act ion.
3 . M ETH OD POST D AN GET
Pada elem en for m t erdapat 2 ( dua) m et hod yang digunakan unt uk m engirim kan dat a dari
halam an for m ke serv er. GET dan POST adalah m et ode pengirim an dat a dari suat u client k e
server m elalui browser. Per bedaan dari dua m et hod t ersbut yang paling m endasar adalah
cara m engir im v ariabel saat kit a m enek an t om bol subm it .
Jik a POST, m ak a value dan variabel dari elem en- elem en yang ada di form dikirim kan secara
langsung ke page act ion dari for m k it a dengan t idak m enam pilkan value dan variabel dari
elem en- elem en t ersebut , hal ini t ent unya dat a- dat a yang dik irim kan akan lebih am an, karena
secara langsung dat a- dat a t ersebut t idak t am pak/ t am pil di halam an act ion, unt uk
m engam bilnya kit a perlu m enggunak an script ing/ server script
Sedangkan GET, v alue dan v ariabel dari elem en- elem en di form akan dikirim kan sem ua
m elalui query st ring sehingga orang akan t ahu, apa saj a dat a- dat a yang dik irim kan secara
langsung, hal ini y ang bisa m em buat web kit a rent an oleh serangan. Dengan j avascript pun
kit a dapat m enangkap dat a- dat a yang dik irim kan
Halaman39
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
3 .1 M e t ode Ge t
Met ode GET adalah sebuah fungsi y ang digunakan unt uk m engum pulkan nilai dari sebuah
for m yang dikirim k an dengan m et ode GET. Efek sam ping dari cara m engirim dat a adalah GET
t idak cocok dipakai unt uk m engirim dat a yang bersifat rahasia sepert i PI N, passwor d dan
sej enisnya. Efek sam ping lain, GET t idak cocok dipakai unt uk m engirim dat a dalam j um lah
besar. GET hanya cocok unt uk m engirim dat a dalam j um lah kecil, sedangkan post cocok
dipakai unt uk m engirim dat a dalam j um lah besar sepert i upload dat a, m enulis blog at au
art ikel dan sej enisny a.
Nam un, kelebihan dari GET adalah hasil dari proses GET bisa di bookm ark. Cont oh paling
t am pak adalah Google. Google m enggunakan m et hod GET dalam m engirim dat a sehingga
hasil pencarianny a bisa di Book m ark .
Berik ut adalah cont oh penggunaan m et ode GET :
ContohMethod Get
Name :
|
Tam pilan d br owser :
Halaman40
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
3 .2 M e t h od POST
Fungsi$_POSTdigunak an unt uk m engum pulk an nilai v ariable dari sebuah for m y ang dik irim k an
m enggunakan m et ode POST. I nfrom asi yang dikirim kan t idak dapat dilihat oleh orang lain
pada address bar di br owser dan t idak dapat m em ilik i bat asan pada banyaknya inform asi
y ang dikirim
Berik ut adalah cont oh penggunaan m et ode POST
Contoh Method Post
Name :
|
Tam pilan di Browser
Halaman41
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
4 . M AN I PULASI FORM
4 .1 Te x t Field
Text field adalah elem en input yang m em ungkinkan pengunj ung m em asukan t ext dalam sat u
baris. Lebar k arakt er t ext field default nya adalah 20 karakt er
Sy nt ax :
Cont oh penggunaan :
Contoh Text Field
Name :
|
Tam pilan di br owser
4 .2 Ra dio but t on
Radio But t on adalah suat u t om bol y ang digunakan unt uk m engam bil salah sat u pilihan dari
banyak pilihan yang t ersedia. Sepert i cont ohnya pem ilihan j enis gender ( m ale at au fem ale)
Sy nt ax :
Halaman42
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Cont oh Penggunaan :
Contoh Radio Button
Gender : Male
Female
Tam pilan di Browser :
4 .3 Ch e ck Box
Digunakan unt uk m em ilih beberapa pilihan dat a sekaligus at au lebih dari sat u pilihan dari
daft ar pilihan y ang ada
Sy nt ax :
Cont oh Penggunaan :
Contoh Check Box
Hoby : Reading
Shoping
Swimming
Halaman43
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Tam pilan di Browser :
4 .4 Com bo Box
Digunakan unt uk m em ilih beberapa pilihan dat a sekaligus at au lebih dari sat u pilihan dari
daft ar pilihan y ang ada
Sy nt ax :
……
Halaman44
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Cont oh Penggunaan :
Contoh Combo Box
Provinsi :
Sumatera Barat
Jambi
DKI Jakarta
DI Yogyakarta
Nusa Tenggara Barat
Tam pilan di Browser :
4 .5 Te x t Are a
Text Area adalah suat u k ot ak area y ang berisi t eks, yang apabila t eks t ersebut m elebihi
kapasit as dari area t ersebut ak an m em punyai fungsi scroll, at au dalam bahasa indonesiany a
adalah Area Teks at au Kot ak Teks. ini dim aksudkan agar m em inim alisasi t em pat agar t idak
m em akan t em pat unt uk penem pat an t eks at au t ulisan t ersebut .
Halaman45
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Sy nt ax :
Name = “name”
Cols = “number”
Rows=“number”>
……………
Cont oh Penggunaan :
Contoh Text Area
Address :
|
Tam pilan di Browser :
Halaman46
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
5 . CARA PEN AN GAN AN FORM
Pe ngga bun ga n a nt a r a For m da n Pr ose s
Proses pengolahan form dilak uk an di halam an yang sam a dengan form input anny a. Jik a
proses penanganan form berada di sat u halam an, m aka value
at ribut act ion pada t ag form dikosongk an. ( Cont oh sy nt ax diat as seluruhnya m eny at uk an
ant ara form dan proses)
Pe m isa ha n a nt a r a For m da n Pr ose s
Proses pengolahan form dilak uk an di halam an yang t erpisah dengan for m input anny a. Jik a
proses penanganan form berada dilakukan di halam an yangberbeda, m aka value at ribut
a ct ion pada t ag for m harus diisi dengan alam at halam an t em pat pr oses pengolahan form .
Cont oh :
Contoh Pemisahan Form dan Proses
Name :
|
Halaman47
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
Tam pilan di Browser
Halaman48
Pemrograman Web / JavascriptdanjQuery
Brawijaya University
2012
REFEREN SI
Anonim . Modul Pengaj aran PPPGT Malang. 2006.
Saput ra, Ridwan S. Pem rogram an HTML. 2010
PROPAGASI
A. La t iha n da n D isk usi ( Pr opa ga si Ve r t ik a l da n H or izont al)
1.
2.
Apa saj a elem en yang t erdapat pada form !
Jelaskan perbedaan ant ara penggunaan m et ode get dan m et ode post !
B.
Tuga s ( Eva lua si m a ndir i)
Buat lah sebuah form Guest Book unt uk m enerim a input dari pengguna kem udian
t am pilkan pada halam an selanj ut nya.
Halaman49