Pemrograman Berbasis
WEB
Dynamic Web - CGI
Rahmadian-Overview
Dynamic Web
Static vs Dynamic
Web Form
CGI
Dynamic Web
Dynamic berarti ‘interaktif’
Handling web form
Server-side programming
◦ CGI scripts - Perl, PHP, ASP
Client-side programming
◦ Javascript, Java
Database connectivity
Security
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
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
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
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
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:
Static vs Dynamic
Client-side Scripting
◦ Script dikirim dari komputer server yang kemudian disimpan di
komputer client
◦ Browser pada komputer client
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:
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
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
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
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,
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
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
Web Form
<html><head>
<title>simple form</title> </head>
<body>
<form name="simpleForm" method=“get“ action="simpleHandler.php">
Your email address:
<input type="text" name="email">
<input type="submit" value="Submit"> </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
Web Form
Ada 2 metode yang umum
digunakan dalam
request
-response
antara
client
dan
server
:
GET
dan
POST
◦ GET - Requests data from 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
Web Form
Web Form
Web Form
Web Form
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
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
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
Perl
Perl merupakan singkatan dari
P
ractical
E
xtraction and
R
eport
L
anguage, dibuat oleh Larry Wall
Perl adalah bahasa interpreter
sekaligus kompiler, artinya Perl
akan mendeteksi setiap baris
untuk mencari syntax error
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
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
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
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
Perl
◦ $nama = ‘hasan’; # hasan
$_nama2 = $nama . ‘t’; # hasant
$tahun = 2001; # 2001
$satu_dollar = 8500.43; # 8500.43
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’;
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
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.
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( )
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
Perl
◦ %aplikasi = (‘bahasa’, ‘perl’,
’server’, ‘apache’, ‘teks’, ‘vim’,);
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
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,
