Pemrograman Berbasis WEB

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 memilikikebutuhan/keinginan yang berbeda-beda • Registrasiataukebutuhanterhadapinformasi • Memungkinkanpenggunauntukterdaftardalamsuatupertemuan, inginbergabungdalammilis, … • Feedback atau survey • Memungkinkanpenggunauntukmemberikomentartentanglayanan yang disediakan • Informasidinamis • Memungkinkanpenggunauntukmemberipertanyaan yang spesifik

5. Dynamic Web • Inginmendapatkankontribusidaripengguna • Situsanak-anak, memungkinkanpenggunauntukmengirimceritaataugambar • Situssejarahlokal, memungkinkanpenggunauntukmemberikanpengalamantentangsuatu area ataumasatertentu • Situskomunitas, memungkinkanpenggunauntukmemberikandetildarilayananlokal • Situsperpustakaan, memberirekomendasibuku, daftarbacaan, dll.

6. Static vs Dynamic

7. Static vs Dynamic • Static Web Page • Page normal yang biasadibuat • Selaluterlihatsama • Isitidakpernahberubah, kecuali: • Client membuka page baru • Developer mengunggahversibarudari page ke web server

8. Static vs Dynamic • Dynamic Web Page • Dapatberubahsetiap kali dibuka(tanpacampurtangan client) • Dapatmengubahisinyaberdasarkan yang dilakukanoleh user, sepertimengkliksuatuteksataugambar (tanpamembuka page baru)

9. Static vs Dynamic • Dynamic Web Page • Diperkenalkanpertama kali pada 1995 dengandiciptakannyaJavascript • Menggunakansejumlahteknologiuntukmengirimkanisi yang interaktif • Duakategoriumumdariteknologiini: • Server-side • Client-side

10. Static vs Dynamic • Client-side Scripting • Script dikirimdarikomputer server yang kemudiandisimpandikomputer client • Browser padakomputer client melakukan execute/run terhadap script tersebutuntukmemproduksi dynamic web page

11. Static vs Dynamic • Client-side Scripting • Web page mengandungisi yang dapatberubahtanpamengubahkode HTML yang sebenarnya • Isidinamisdari client-side di-generate olehkomputer client (browser) • Jugadisebutsebagai DHTML (dynamic HTML) ataujugapopulerdenganistilah DOM (document object model) scripting • Contoh DHTML: • Drop down menu, ‘floating’ image yang bergerakdiatas page, dll.

12. Static vs Dynamic • Client-side Scripting • Seringkalimenggunakan form untukvalidasi input • Jugamenggunakan model ‘event’ yang sederhana, misalnya ‘onChange’ atau ‘onClick’ untukvalidasi input sebelumdikirimke server • Memeriksaalamat email memiliki ‘@’ • Memeriksaangkahanyaterdiriatas digit • Memeriksaapakahsemua mandatory field telahterisi

13. Static vs Dynamic • Keterbatasan Client-side Scripting • Download time • Kompatibilitas browser • Visible Code – kodejavascriptdan VBScript dimasukkandalam HTML page, setiaporangdapatmelihatkodedenganmemeriksa page source • Potensikeamananbagikomputer client

14. Static vs Dynamic • Server-side Scripting • Database driven website programming • Aksi yang memungkinkan web page untukterhubungke database sebenarnyaterjadipada server • Setiap kali dynamic web page hendakdikirimke browser, server secaraotomatismembangun page danmengirim HTML page standarke browser • Server membangun page berdasarkaninstruksi yang disediakan programmer

15. Static vs Dynamic • Server-side Scripting • Web page dihasilkan ‘on-the-fly’ oleh program disisi server, umumnyaberdasarkan 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 • Menggunakanbahasa scripting (PHP, Perl, Coldfusion, dll.) yang terhubungdengan database

16. Static vs Dynamic • Keuntungan Server-side Scripting • Program dijalankanpadakomputer yang dikenal – tidakmemilikiketergantunganpada browser • Fleksibilitas yang lebihtinggi – dapatmengakses database, memodifikasi file pada server • Kodetidakterlihatolehpengguna

17. Static vs Dynamic • Keterbatasan Server-side Scripting • Harusmemilikisituspadasebuah server yang memilikikemampuanuntukmenjalankan script, danmemilikiizinuntukmenciptakan script kitasendiri • Seringkalilebihlambatdibandingkan client-side karenamembutuhkanakseske server

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

19. Web Form

20. Web Form • Interaksidalambentuk web form digunakanuntuk: • Validasi input user • Memproses input user • Menciptakanrespon • Secaradinamis • Tigalangkahdiatasdapatdilakukanpada web browser (client-sede) ataupada web server (server-side) ataukombinasidarikeduanya

21. CGI • Common Gateway Interface • Mekanismeuntuk web browser mengirimkan data ke web server • Memungkinkan browser untuk ‘submit’ data ke program yang berjalandi server • Program inidisebut ‘CGI script’ • Umumnyaditulisdalam Perl, PHP, atau ASP • Dapatjugaberupa program ‘sebenarnya’ (misalnyaditulisdalam C)

22. CGI • Seringdigunakanuntuk form submission • Dapatdigunakanuntuk upload local file • URL dari CGI seringmengandungkarakter ‘?’ dan ‘&’ – tapitidakharus • Output dari CGI biasanyadinamissehinggatidakdisimpandalam cache

23. CGI

24. Perl • Perl merupakansingkatandari Practical Extraction and Report Language, dibuatoleh Larry Wall • Perl adalahbahasa interpreter sekaliguskompiler, artinya Perl akanmendeteksisetiapbarisuntukmencari 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 memilikitigatipe data: skalar, array, danhash • Skalarmenyimpannilaitunggal, array menyimpannilaiskalardenganurutantertentu, sedangkan hash menyimpankumpulanskalarberpasangan • Sebuahvariabeldinyatakandengantandaawalantertentu yang merujukpadatipe data yang dikandungnya, sertanama yang berfungsisebagaipengenal

27. Perl • Tandapengenaladalah $ untukskalar, @ untuk array, dan % untuk hash • Namavariabelterdiriatasalfanumerik (karakter ‘_’ dianggapsebagaihuruf) • Namavariabeltidakbolehdimulaidenganangka • Tidakadaketentuanmengikattentangpanjangnamavariabel yang bolehdigunakan

28. Perl • Skalar • Variabelskalarmenyimpan unit data yang paling mendasar. Apa yang dikandungskalar, itujugalah yang bisadikandungoleh array dan hash. Sebuahskalarhanyamengandung string atauangka. Inijugaberartibahwasemuainformasi—darimanapunasalnya—akandiperlakukansebagai string atauangka. String dikutipmenggunakankutipgandaataukutiptunggal. Angkabisaberupabilanganbulat, oktal, heksadesimal, maupunpecahandesimal. • $nama = ‘hasan’;$_nama2 = $nama . ‘t’; # hasant$tahun = 2001;$satu_dollar = 8500.43;$dua_tahun_lalu = $tahun - 2; # 1999

29. Perl • Untukmemasukkankutiptunggaldalam string yang dikutiptunggaldigunakan \ (garis miring terbalik) didepannya. Begitupununtukmemasukkankutipgandadalam string yang dikutipganda. Dan untukmemasukkan \ itusendiri, tambahkan \ satulagi. Inidisebutmeng-escape character. • $putih = ‘#FFFFFF’;$body = “<body bgcolor=\”$putih\”>”;

30. Perl • Array • Array didefinisikandenganmemasukkanelemen-elemennyakedalamtandakurungdandipisahkandengan, (koma). Komatidakwajibdiletakkanpadaelementerakhir. Di Perl, inisebenarnyasebuahkonstruksi data yang disebut list. • @minuman = (’kopi’, ‘teh’, ‘air’); • Kadang-kadangkeduaistilahini, array dan list, bisadipertukarkan, danmemilikimakna yang sama. Namun, harusdisadaribahwakeduanyatetapberbedasecaralogika.Array adalahjenisvariabel, sementara list adalahkonstruksi data. Dalampengertiansingkat, bisadikatakanbahwa array adalah list yang bernama. Semua array berisi list, tapitidaksemua list berupa array. Denganpengertianinikitabisamendefinisikansekumpulanvariabelskalardalam list. • ($satu, $dua, $tiga) = (1, 2, 3);

31. Perl • Elemen array diaksesdengansintaks $array[0], angkadidalam “[]” menujukkanindekselemendimulaidari 0, yang berartielemenpertama. Indeksnegatif (dimulaidari -1) menghitungelemendaribelakang. • $minuman[0] # berisi “kopi”$minuman[2] # berisi “air”$minuman[-1] # sama, berisi air • Jikakebetulansemuaelemen array tidakada yang mengandungspasi, makakitabisamendefinisikansebuah array tanpamenggunakantandakutipdankoma. Sebagaigantinyakitamenggunakan operator quote word – qw(). • @minuman = qw(kopi teh air);

32. Perl • Hash • Definisi hash miripdengan array. Setiapelemen hash terdiriataspasanganindeks (key) dannilai (value). Berbedadengan array, indeksdi hash menggunakan string, dannilainyabisadiaksesdengansintaks $hash{’indeks’}. • %aplikasi = (‘bahasa’, ‘perl’, ’server’, ‘apache’, ‘teks’, ‘vim’,); print $aplikasi{’bahasa’}; # perl

33. Perl • Indeks yang mengandungkaraktersederhanatidakperludikutipkarenaotomatisdianggapsebagai string. Namunjikaindeksmengandungkarakterselainhurufdanangka, kutipharusdigunakan. Hal inijugaberlakuketikamengakseselemen. Jadi, $aplikasi{’bahasa’} bisaditulissebagai $aplikasi{bahasa} • Perl tidakpunyajenis data booleankhusus. Nilaisebuahekspresiadalahsalahsatudari: takterdefinisi (undefined), benar (true), atau, salah (false) • AturanPerl sederhana, semuanilaibenar, kecuali yang undef, string kosong (“” atau ‘’), angka 0, dan string “0″