Pemrograman Berbasis WEB Dynamic Web CGI Aurelio Rahmadian

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 spesifik

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, ‘floating’ 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 ‘on. Change’ atau ‘on. Click’ untuk validasi input sebelum dikirim ke server ◦ Memeriksa alamat email memiliki ‘@’ ◦ Memeriksa angka hanya terdiri atas digit ◦ Memeriksa apakah semua mandatory field 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-fly’ 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 file 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, memodifikasi file 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 <html> <head> <title>simple form</title> </head> <body> <form name="simple. Form" method=“get“ action="simple. Handler. php"> Your email address: <input type="text" name="email"> <input type="submit" value="Submit"> </form> </body> </html>

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 request-response antara client dan server: GET dan POST ◦ GET - Requests data from a specified resource ◦ POST - Submits data to be processed to a specified 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/cgibin/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 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 file �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 file 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 ◦ $nama = ‘hasan’; $_nama 2 = $nama. ‘t’; $tahun = 2001; $satu_dollar = 8500. 43; $dua_tahun_lalu = $tahun - 2; # hasant # 2001 # 8500. 43 # 1999

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 = “<body bgcolor=”$putih”>”;

Perl �Array ◦ Array didefinisikan 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 mendefinisikan 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 mendefinisikan sebuah array tanpa menggunakan tanda kutip dan koma, sebagai gantinya kita menggunakan operator quote word – qw( ) �@minuman = qw(kopi teh air);

Perl �Hash ◦ Definisi 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 satu dari: tak terdefinisi (undefined), benar (true), atau salah (false) �Aturan Perl sederhana, semua nilai benar, kecuali: ◦ undef ◦ 0 ◦ ‘ 0’ ◦ ‘‘ ◦ ()