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

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 developer secara langsung) 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=“get“ 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-side) atau pada web server (server-side) atau kombinasi dari keduanya

21 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

22 Web Form GET requests can be cached POST requests are never 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

23 Web Form localhost/form_get.html

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

25 Web Form localhost/form_post.html

26 Web Form localhost/cgi-bin/hello_post.pl

27 Web Form GET POST 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

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

29 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

30 CGI

31 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

32 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”

33 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

34 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

35 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

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

37 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\”>”;

38 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’);

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

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

41 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’}

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

43 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}

44 Perl 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: undef ‘0’ ‘ ‘ ( )