WEB 05 Dynamic Web & CGI (v2015)

Pemrograman Berbasis
WEB
Dynamic Web - CGI

-Aurelio Rahmadian

Overview
Dynamic Web
 Static vs Dynamic
 Web Form
 CGI
 Perl


Dynamic Web
Dynamic berarti ‘interaktif’
 Handling web form
 Server-side programming


◦ CGI scripts - Perl, PHP, ASP



Client-side programming
◦ Javascript, Java

Database connectivity
 Security
 Personalisation


Dynamic Web – Why?
User memiliki kebutuhan/keinginan yang
berbeda-beda
 Registrasi atau kebutuhan terhadap informasi


◦ Memungkinkan pengguna untuk terdaftar dalam
suatu pertemuan, ingin bergabung dalam milis, …


Feedback atau survey
◦ Memungkinkan pengguna untuk memberi
komentar tentang layanan yang disediakan



Informasi dinamis
◦ Memungkinkan pengguna untuk memberi
pertanyaan yang spesifk

Dynamic Web – Why?


Ingin mendapatkan kontribusi dari
pengguna
◦ Situs anak-anak, memungkinkan pengguna
untuk mengirim cerita atau gambar
◦ Situs sejarah lokal, memungkinkan
pengguna untuk memberikan pengalaman
tentang suatu area atau masa tertentu

◦ Situs komunitas, memungkinkan pengguna
untuk memberikan detil dari layanan lokal
◦ Situs perpustakaan, memberi rekomendasi
buku, daftar bacaan, dll.

Static vs Dynamic

Static vs Dynamic


Static Web Page
◦ Page normal yang biasa dibuat
◦ Selalu terlihat sama
◦ Isi tidak pernah berubah, kecuali:
 Client membuka page baru
 Developer mengunggah versi baru dari
page ke web server

Static vs Dynamic


Dynamic Web Page
◦ Dapat berubah setiap kali dibuka
(tanpa campur tangan developer
secara langsung)
◦ Dapat mengubah isinya berdasarkan
yang dilakukan oleh user, seperti
mengklik suatu teks atau gambar
(tanpa membuka page baru)

Static vs Dynamic


Dynamic Web Page
◦ Diperkenalkan pertama kali pada
1995 dengan diciptakannya Javascript
◦ Menggunakan sejumlah teknologi
untuk mengirimkan isi yang interaktif
◦ Dua kategori umum dari teknologi ini:
 Server-side

 Client-side

Static vs Dynamic


Client-side Scripting
◦ Script dikirim dari komputer server
yang kemudian disimpan di
komputer client
◦ Browser pada komputer client
melakukan execute/run terhadap
script tersebut untuk memproduksi
dynamic web page

Static vs Dynamic


Client-side Scripting
◦ Web page mengandung isi yang dapat
berubah tanpa mengubah kode HTML yang

sebenarnya
◦ Isi dinamis dari client-side di-generate oleh
komputer client (browser)
◦ Juga disebut sebagai DHTML (dynamic
HTML) atau juga populer dengan istilah
DOM (document object model) scripting
◦ Contoh DHTML:
 Drop down menu, ‘foating’ image yang bergerak
diatas page, dll.

Static vs Dynamic


Client-side Scripting
◦ Seringkali menggunakan form untuk
validasi input
◦ Juga menggunakan model ‘event’ yang
sederhana, misalnya ‘onChange’ atau
‘onClick’ untuk validasi input sebelum
dikirim ke server

◦ Memeriksa alamat email memiliki ‘@’
◦ Memeriksa angka hanya terdiri atas digit
◦ Memeriksa apakah semua mandatory
feld telah terisi

Static vs Dynamic


Keterbatasan Client-side Scripting
◦ Download time
◦ Kompatibilitas browser
◦ Visible Code – kode javascript dan
VBScript dimasukkan dalam HTML
page, setiap orang dapat melihat
kode dengan memeriksa page
source
◦ Potensi keamanan bagi komputer
client

Static vs Dynamic



Server-side Scripting
◦ Database driven website programming
◦ Aksi yang memungkinkan web page
untuk terhubung ke database
sebenarnya terjadi pada server
◦ Setiap kali dynamic web page hendak
dikirim ke browser, server secara
otomatis membangun page dan
mengirim HTML page standar ke browser
◦ Server membangun page berdasarkan
instruksi yang disediakan programmer

Static vs Dynamic


Server-side Scripting
◦ Web page dihasilkan ‘on-the-fy’ oleh program di
sisi server, umumnya berdasarkan parameter

pada URL atau form HTML
 1)The browser sends an HTTP request
 2)The server retrieves the requested fle with the script
 3)The server executes the script or program which
typically outputs an HTML web page
 4)The server sends the HTML output to the client's
browser
 5)Example: www.google.com

◦ Menggunakan bahasa scripting (PHP, Perl,
Coldfusion, dll.) yang terhubung dengan database

Static vs Dynamic


Keuntungan Server-side Scripting
◦ Program dijalankan pada komputer
yang dikenal – tidak memiliki
ketergantungan pada browser
◦ Fleksibilitas yang lebih tinggi – dapat

mengakses database, memodifkasi
fle pada server
◦ Kode tidak terlihat oleh pengguna

Static vs Dynamic


Keterbatasan Server-side
Scripting
◦ Harus memiliki situs pada sebuah
server yang memiliki kemampuan
untuk menjalankan script, dan
memiliki izin untuk menciptakan
script kita sendiri
◦ Seringkali lebih lambat dibandingkan
client-side karena membutuhkan
akses ke server

Web Form

simple form



Your email address:






Web Form

Web Form


Interaksi dalam bentuk web form
digunakan untuk:
◦ Validasi input user
◦ Memproses input user
◦ Menciptakan respon

Secara dinamis
 Tiga langkah diatas dapat dilakukan
pada web browser (client-side) atau
pada web server (server-side) atau
kombinasi dari keduanya


Web Form


Ada 2 metode yang umum
digunakan dalam requestresponse antara client dan
server: GET dan POST
◦ GET - Requests data from a specifed
resource
◦ POST - Submits data to be processed
to a specifed resource

Web Form
GET requests can be
cached
 GET requests remain in
the browser history
 GET requests can be
bookmarked
 GET requests should
never be used when
dealing with sensitive
data
 GET requests have
length restrictions
 GET requests should be
used only to retrieve
data


POST requests are
never cached
 POST requests do
not remain in the
browser history
 POST requests
cannot be
bookmarked
 POST requests have
no restrictions on
data length


Web Form
localhost/form_get.html

Web Form

localhost/cgi-bin/hello_get.pl?
first_name=John&last_name=Smith

Web Form
localhost/form_post.html

Web Form

localhost/cgi-bin/hello_post.pl

Web Form


GET
◦ Appends form-data into the URL in name/value pairs
◦ The length of a URL is limited (about 3000 characters)
◦ Never use GET to send sensitive data! (will be visible in the
URL)
◦ Useful for form submissions where a user want to
bookmark the result
◦ GET is better for non-secure data, like query strings in
Google



POST
◦ Appends form-data inside the body of the HTTP request
(data is not shown is in URL)
◦ Has no size limitations
◦ Form submissions with POST cannot be bookmarked

CGI
Common Gateway Interface
 Mekanisme untuk web browser
mengirimkan data ke web server
 Memungkinkan browser untuk ‘submit’
data ke program yang berjalan di
server


◦ Program ini disebut ‘CGI script’
◦ Umumnya ditulis dalam Perl, PHP, atau ASP
◦ Dapat juga berupa program ‘sebenarnya’
(misalnya ditulis dalam C)

CGI
Sering digunakan untuk form
submission
 Dapat digunakan untuk upload local
fle
 URL dari CGI sering mengandung
karakter ‘?’ dan ‘&’ – tapi tidak harus
 Output dari CGI biasanya dinamis
sehingga tidak disimpan dalam
cache


CGI

Perl
Perl merupakan singkatan dari
Practical Extraction and Report
Language, dibuat oleh Larry Wall
 Perl adalah bahasa interpreter
sekaligus kompiler, artinya Perl
akan mendeteksi setiap baris
untuk mencari syntax error
sebelum program dijalankan


Perl
“When referring to the language,
the name is normally capitalized
(Perl) as a proper noun. When
referring to the interpreter
program itself, the name is often
uncapitalized (perl) because most
Unix-like fle systems are casesensitive”

Perl
Perl memiliki tiga tipe data: skalar,
array, dan hash
 Skalar menyimpan nilai tunggal, array
menyimpan nilai skalar dengan urutan
tertentu, sedangkan hash menyimpan
kumpulan skalar berpasangan
 Sebuah variabel dinyatakan dengan
tanda awalan tertentu yang merujuk
pada tipe data yang dikandungnya,
serta nama yang berfungsi sebagai
pengenal


Perl
Tanda pengenal adalah $ untuk skalar,
@ untuk array, dan % untuk hash
 Nama variabel terdiri atas alfanumerik
(karakter ‘_’ dianggap sebagai huruf)
 Nama variabel tidak boleh dimulai
dengan angka
 Tidak ada ketentuan mengikat tentang
panjang nama variabel yang boleh
digunakan


Perl


Skalar
◦ Variabel skalar menyimpan unit data yang
paling mendasar, apa yang dikandung
skalar juga dapat dikandung array dan hash
◦ Sebuah skalar hanya mendandung string
atau angka, artinya semua informasi dari
manapun asalnya akan diperlakukan
sebagai string atau angka
◦ String dikutip menggunakan kutip
ganda/tunggal, angka dapat berupa
bilangan bulat, oktal, heksadesimal,
ataupun pecahan desimal

Perl
# hasan
$_nama2 = $nama . ‘t’;
# hasant
$tahun = 2001;
# 2001
$satu_dollar = 8500.43;
# 8500.43
$dua_tahun_lalu = $tahun - 2;
# 1999

◦ $nama = ‘hasan’;

Perl
◦ Untuk memasukkan kutip tunggal
dalam string yang dikutip tunggal
digunakan \ (garis miring terbalik) di
depannya, begitupun untuk
memasukkan kutip ganda dalam string
yang dikutip ganda
◦ Untuk memasukkan \ itu sendiri,
tambahkan \ satu lagi (meng-escape
character)
◦ $putih = ‘#FFFFFF’;
$body = “”;

Perl


Array
◦ Array didefnisikan dengan
memasukkan elemen-elemennya ke
dalam tanda kurung dan dipisahkan
dengan ,
◦ Koma tidak wajib diletakkan pada
elemen terakhir
◦ Di Perl, ini sebenarnya sebuah
konstruksi data yang disebut list
 @minuman = (’kopi’, ‘teh’, ‘air’);

Perl


Array
◦ Kadang-kadang kedua istilah ini, array dan list, bisa
dipertukarkan, dan memiliki makna yang sama
◦ Namun, harus disadari bahwa keduanya tetap
berbeda secara logika, array adalah jenis variabel,
sementara list adalah konstruksi data
◦ Dalam pengertian singkat, bisa dikatakan bahwa
array adalah list yang bernama
◦ Semua array berisi list, tapi tidak semua list berupa
array
◦ Dengan pengertian ini kita bisa mendefnisikan
sekumpulan variabel skalar dalam list.
 ($satu, $dua, $tiga) = (1, 2, 3);

Perl
◦ Elemen array diakses dengan sintaks $array[0],
angka di dalam “[ ]” menujukkan indeks elemen
dimulai dari 0, yang berarti elemen pertama
◦ Indeks negatif (dimulai dari -1) menghitung elemen
dari belakang
 $minuman[0] # berisi “kopi”
$minuman[2] # berisi “air”
$minuman[-1] # sama, berisi “air”

◦ Jika kebetulan semua elemen array tidak ada yang
mengandung spasi,maka kita bisa mendefnisikan
sebuah array tanpa menggunakan tanda kutip dan
koma, sebagai gantinya kita menggunakan operator
quote word – qw( )
 @minuman = qw(kopi teh air);

Perl


Hash
◦ Defnisi hash mirip dengan array,
setiap elemen hash terdiri atas
pasangan indeks (key) dan nilai
(value)
◦ Berbeda dengan array, indeks di
hash menggunakan string, dan
nilainya bisa diakses dengan sintaks
$hash{’indeks’}

Perl
◦ %aplikasi = (‘bahasa’, ‘perl’,
’server’, ‘apache’, ‘teks’, ‘vim’,);
print $aplikasi{’bahasa’};

# perl

Perl


Indeks yang mengandung karakter
sederhana tidak perlu dikutip karena
otomatis dianggap sebagai string,
namun jika indeks mengandung
karakter selain huruf dan angka,
kutip harus digunakan



Hal ini juga berlaku ketika
mengakses elemen, jadi
$aplikasi{’bahasa’} bisa ditulis
sebagai $aplikasi{bahasa}

Perl


Perl tidak punya jenis data boolean khusus,
nilai sebuah ekspresi adalah salah satu dari:
tak terdefnisi (undefned), benar (true), atau
salah (false)



Aturan Perl sederhana, semua nilai benar,
kecuali:
◦ undef
◦0
◦ ‘0’
◦‘‘
◦()