83 Untuk membaca variable dalam metode POST dapat menggunakan variable
super global _POST[“nama_variable”]
2. GET
form action=proses.php method=GET input type=text name=name
input type=submit form
Untuk membaca variable dalam metode GET dapat menggunakan variable super global _GET[“nama_variable”]
Ada beberapa komponen field uang bias digunakan dalam form antara lain adalah:
o input, untuk inputan dalam bentuk field isian text, radio button,
check box, file, password, submit, button dan submit. o
textarea, untuk jenis inputan dalam bentuk multi baris. o
option, untuk jenis inputan pilihan combo box.
D. Aktifitas Pembelajaran
Dalam kegiatan ini peserta diklat akan menerapkan pengelolaan data menggunakan form dalam pemrograman PHP. Bentuk kelompok diskusi setiap
kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti.
1. Buat folder dalam derektori C:\xampp\htdocs dengan Nama topik2-4.
2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya.
2.1. Latihan 2-28 Penggunaan metoda GET
C:xampphtdocstopik2-4latihan2-28.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
DOCTYPE HTML html
head title
Metode GET title
head body
form action
= ?php
_SERVER [
PHP_SELF ];?
method =
GET Name:
input type
= text
name =
name br
E-mail: input
type =
text name
= email
br input
type =
submit form
?php if
isset _GET
[ name
]{ echo
brHallo, .
_GET [
name ];
} if
isset _GET
[ email
]{
84
17 18
19 20
21 22
23 24
25 26
27 28
echo brYour email,
. _GET
[ email
]; }
if isset
_REQUEST [
name ]{
echo brMethod,
. _SERVER
[ REQUEST_METHOD
]; }
if isset
_REQUEST [
email ]{
echo brMethod,
. _SERVER
[ REQUEST_METHOD
]; }
? body
html
C:xampphtdocstopik2-4proses.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 ?php
if isset
_GET [
name ]{
echo Hallo,
. _GET
[ name
]; }
if isset
_GET [
email ]{
echo Your email,
. _GET
[ email
]; }
if isset
_REQUEST [
name ]{
echo br Method,
. _SERVER
[ REQUEST_METHOD
]; }
if isset
_REQUEST [
email ]{
echo br Method,
. _SERVER
[ REQUEST_METHOD
]; }
?
Ganti action
?php _SERVER[PHP_SELF];?
menjadi proses.php , Amati kode tersebut, analisis hasilnya dan simpulkan
2.2. Latihan 2-29 Penggunaan metoda POST.
C:xampphtdocstopik2-4latihan2-29.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 DOCTYPE HTML
html head
title Metode POST
title head
body form
action =
?php _SERVER
[ PHP_SELF
];? method
= POST
Name: input
type =
text name
= name
br E-mail:
input type
= text
name =
email br
input type
= submit
form ?php
if isset
_POST [
name ]{
echo brHallo,
. _POST
[ name
]; }
if isset
_POST [
email ]{
echo brYour email,
. _POST
[ email
]; }
85
20 21
22 23
24 25
26 27
if isset
_REQUEST [
name ]{
echo brMethod,
. _SERVER
[ REQUEST_METHOD
]; }
if isset
_REQUEST [
email ]{
echo brMethod,
. _SERVER
[ REQUEST_METHOD
]; }
? body
html
2.3. Latihan 2-30 Penggunaan masukan Radio Buttom.
C:xampphtdocstopik2-4latihan2-30.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 DOCTYPE HTML
html head
title Inputan Radio Buttons
title head
body form
action =
?php _SERVER
[ PHP_SELF
];? method
= POST
Jenis Kelamin : input
type =
radio name
= sex
value =
Pria Pria
input type
= radio
name =
sex value
= Wanita
Wanita input
type =
submit form
?php if
isset _POST
[ sex
]{ echo
_POST [
sex ];
} ?
body html
2.4. Latihan 2-31 Penggunaan masukan seleksi
C:xampphtdocstopik2-4latihan2-31.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 DOCTYPE HTML
html head
title Inputan Seleksi
title head
body form
action =
?php _SERVER
[ PHP_SELF
]; ? method
= POST
Pekerjaan select
name =
job option
value =
Mahasiswa Mahasiswa
option option
value =
ABRI ABRI
option option
value =
PNS PNS
option option
value =
Swasta Swasta
option selectbr
input type
= submit
form ?php
if isset
_POST [
job ]{
echo _POST
[ job
];
86
20 21
22 23
} ?
body html
2.5. Latihan 2-32 Penggunaan masukan Data Chek box
C:xampphtdocstopik2-4latihan2-32.php
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
21 22
DOCTYPE html html
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 form
?php if
isset _POST
[ hobby
]{ foreach
_POST [
hobby ]
as key
= val
{ echo
key .
- .
val .
br ;
} }
? body
html
3. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan.
4. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor.
E. Studi Kasus
1. Idenifikasi perbedaan metode POST dan GET dalam form, dan jelaskan saat yang tepat menggunakan metode POST dan saat
yang tepat menggunakan metode GET 2. Buatlah dua halaman web Interface yang terdiri dari: 1 halaman
1 entry curriculum vitae. 2 Halaman 2konfirmasi data berisi detail data, tombol kirim data, tombol edit data. Komponen atau
obyek-obyek form yang digunakan meliputi input text, radio buttom, check box, command buttom, combo box, tabel dll. Data meliputi
87
Nama, alamat tanggal lahir, jenis kelamin radio buttom, kompetensi yang diminati check box, riwayat pendidikan, foto.
F. Rangkuman
Pemrosesan form form processing merupakan operasi mendasar pada aplikasi web. Form adalah antarmuka user interface agar user dapat
berkomunikasi dengan sistem aplikasi. Setiap permintaan dari user disebut dengan request dan setiap hasil dari pemrosesan oleh server disebut dengan
respons.From dalam aplikasi web menggunakan tag form dan diakhiri dengan form.
G. Umpan Balik
1. Apakah saudara sudah bisa membuat form dan memahami cara kerjanya?
2. Apakah saudara memahami metode POST dan Get dalam form?
H. Kunci jawaban
Idenifikasi perbedaan metode POST dan GET dalam form: •
Medote POST tidak menampikan nilai variable pada URL sedangkan metode GET menampilkan nilai variable yang dikirim.
• Metode GET dibatasi panjang string sedangkan metode POST
tidak. •
Metode POST digunakan untuk mengirim data yang bersifat rahasia sedangkan metode GET digunakan untuk mengirim data
yang bersifat tidak rahasia. •
Metode POST lebih aman daripada metode GET.
88
89
90
Mengenal Dasar Pemrograman JavaScript
A. Tujuan Pembelajaran
1. Melalui diskusi peserta diklat dapat membedakan tag-tag java script sesuai fungsi dan kegunaannya.
2. Melalui praktikum peserta diklat dapat menerapkan pemorgaman javascript event, object windows
B. Indikator Pencapaian Kompetensi
1. Membedakan tag-tag java script sesuai fungsi dan kegunaannya 2. Menerapkan pemorgaman javascript event, object windows
C. Uraian Materi 1. Pengertian JavaScript
JavaScript adalah bahasa pemograman web yang bersifat Client-Side Programming Language. Client-Side Programming Language adalah tipe
bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chromedan
Mozilla Firefox. Jenis bahasa pemograman Client-Side berbeda dengan bahasa pemograman Server Side seperti PHP, dimana untuk server side
seluruh kode program dijalankan di sisi server.Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser. JavaScript
memiliki fitur: high-level programming language, client-side, loosely tiped, dan berorientasi objek.
2. Fungsi JavaScript dalam Pemrograman Web
JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu
pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.
1. ECMAScript 5
JavaScript adalah bahasa pemrograman yang dibuat mengikuti spesifikasi standar yang disebut ECMA Script dan saat ini versi termodern dari ECMA
91 Script adalah versi 5. Sebagian besar browser modern sudah mendukung
ECMA Script 5 walaupun tidak ada implementasi yang 100 sama.
2. Testing Environment
Untuk menjalankan kode program dalam modul, kita menggunakan JavaScript console yang ada di browser Mozilla Firefox.
Kebanyakan kode kita tulis sebagai embedded script dalam blok
script script dalam file html kecuali jika ada keterangan bahwa kode
tersebut harus ditulis dalam file .js yang terpisah. Berikut ini contoh file html
untuk embedded script.
DOCTYPE html html lang=en
head meta charset=utf-8
titleContohtitle head
body script
kode script
body html
Berikut ini contoh file html untuk memuat file .js eksternal.
DOCTYPE html html lang=en
head meta charset=utf-8
titleContohtitle head
body script src=file_js.jsscript
script kode lain
script body
html
Dalam dasar teori ini tidak dijelaskan tentang konsep dasar pemrograman, karena semua konsep dasar pemrograman pada hakekatnya adalah sama
dan mengacu pada paradigmanya, untuk materi tentang dasar-dasar pemrograman seperti perulangan, percabangan, fungsi dan lain-lain sudah
dijelaskan pada bagian pemrograman PHP, bahasa pemrograman JavaScript dan PHP memiliki kesamaan paradigma pemrograman. Akan
Kategori