Pemrograman Berbasis WEB

Presentasi berjudul: "Pemrograman Berbasis WEB"— Transcript presentasi:

1 Pemrograman Berbasis WEB
Dynamic Web - CGI -Aurelio Rahmadian-

2 Overview Dynamic Web Static vs Dynamic Web Form CGI Perl

3 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

4 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

5 Dynamic Web 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.

6 Static vs Dynamic

7 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

8 Static vs Dynamic Dynamic Web Page
Dapat berubah setiap kali dibuka (tanpa campur tangan client) Dapat mengubah isinya berdasarkan yang dilakukan oleh user, seperti mengklik suatu teks atau gambar (tanpa membuka page baru)

9 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

10 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

11 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.

12 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 memiliki Memeriksa angka hanya terdiri atas digit Memeriksa apakah semua mandatory field telah terisi

13 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

14 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

15 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: Menggunakan bahasa scripting (PHP, Perl, Coldfusion, dll.) yang terhubung dengan database

16 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

17 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

18 Web Form <html> <head><title>simple form</title></head> <body> <form name="simpleForm" method="put“ action="simpleHandler.php"> Your address: <input type="text" name=" "> <input type="submit" value="Submit"> </form> </body> </html>

19 Web Form

20 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-sede) atau pada web server (server-side) atau kombinasi dari keduanya

21 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)

22 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

23 CGI

24 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

25 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 case-sensitive”

26 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

27 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

28 Perl Skalar Variabel skalar menyimpan unit data yang paling mendasar. Apa yang dikandung skalar, itu jugalah yang bisa dikandung oleh array dan hash. Sebuah skalar hanya mengandung string atau angka. Ini juga berarti bahwa semua informasi—dari manapun asalnya—akan diperlakukan sebagai string atau angka. String dikutip menggunakan kutip ganda atau kutip tunggal. Angka bisa berupa bilangan bulat, oktal, heksadesimal, maupun pecahan desimal. $nama = ‘hasan’; $_nama2 = $nama . ‘t’; # hasant $tahun = 2001; $satu_dollar = ; $dua_tahun_lalu = $tahun - 2; # 1999

29 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. Dan untuk memasukkan \ itu sendiri, tambahkan \ satu lagi. Ini disebut meng-escape character. $putih = ‘#FFFFFF’; $body = “<body bgcolor=\”$putih\”>”;

30 Perl Array Array didefinisikan dengan memasukkan elemen-elemennya ke dalam tanda kurung dan dipisahkan dengan , (koma). Koma tidak wajib diletakkan pada elemen terakhir. Di Perl, ini sebenarnya sebuah konstruksi data yang disebut list. @minuman = (’kopi’, ‘teh’, ‘air’); 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);

31 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);

32 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’}. %aplikasi = (‘bahasa’, ‘perl’, ’server’, ‘apache’, ‘teks’, ‘vim’,); print $aplikasi{’bahasa’}; # perl

33 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 tidak punya jenis data boolean khusus. Nilai sebuah ekspresi adalah salah satu dari: tak terdefinisi (undefined), benar (true), atau, salah (false) Aturan Perl sederhana, semua nilai benar, kecuali yang undef, string kosong (“” atau ‘’), angka 0, dan string “0″