Teknologi Web Disain & Pemrograman Web Teknik Elektro Universitas Brawijaya Herman Tolle, ST., MT - ([email protected])
Introduksi World Wide Web adalah layanan internet yang paling populer saat ini z Internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW z WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi z
z z
z
WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP) Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser Sintaks HTML mampu memuat konten gambar, audio, video dan animasi
Internet Web Browsers z
z
Browser adalah sebuah program aplikasi atau software yang merequest dokumen-dokumen dari komputer-komputer yg terkoneksi internet (server) di seluruh dunia, dan menampilkan informasi dari dokumen tersebut pd window browser. Browser menampilkan sesuai instruksi (format) HTML yg dibuat pd dokumen tsb.
Sejarah World Wide Web z z
z z
hypertext [Bush 1945, Nelson 1960’s] Awal 90’-an, Tim Berners-Lee, sarjana fisika pd riset Nuklir Swiss (CERN) menciptakan HyperText Markup Language (HTML) dan Browser teks pertama: Lynx Berners-Lee saat ini memimpin WWW Consorsium (W3C) lembaga yang menyusun standarisasi HTML dan dokumen web.
z
z
z z
1993: Browser grafis pertama: Mosaic dibuat oleh Andressen dan Eric Bina (mhs University of Illinois) 1994: Andressen kemudian bekerja untuk Netscape, dan membuat Netscape Navigator, browser grafis populer pertama 1995: Microsoft membuat Internet Explorer Browser saat ini: Mozilla FireFox, Opera, dll
Trend : Fakta Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari z Internet menjadi sumber informasi yang tak terhingga! (apalagi dengan adanya Om Yahoo! dan Mas Google) z Jutaan halaman web baru bermunculan setiap hari z Konten web semakin bervariasi dan dapat dikontribusi oleh siapa saja dimana saja z
Trend: Killer Application Internet: z Email z Online Games z Chat (mIRC, Yahoo Messenger) z Google Earth Web based: z Search Engine (Yahoo!, Google) z Web Blog z Web Komunitas: Friendster, MySpace, Multiply, Hi5, Yahoo 360°, YouTube
Web growth Dates
z z
Stats from Internet Valley, Inc.
Domains
Hosts
Web Sites
Sites/ Hosts
July 01
126,000,000
30,000,000
28,200,000
22.381%
July 98
37,000,000
4,300,000
4,270,000
12.000%
July 97
19,540,000
1,301,000
1,200,000
6.200%
July 96
12,881,000
488,000
300,000
2.300%
IE Netscape
July 95
6,642,000
120,000
25,000
0.400%
July 94
3,212,000
46,000
3,000
0.100%
Mosaic
July 93
1,776,000
26,000
150
0.010%
July 92
992,000
16,300
50
0.005%
July 89
130,000
3,900
July 81
210
1969
4
recent estimates suggest 40-50 M Web sites, with 4-5 B Web pages!
Kategori Web Berdasarkan keter-update-an isi web: 1. Web Statis : website yang isi tampilannya selalu sama dan tidak akan pernah berubah kapan pun kita melihatnya. (jika tidak diupdate) 2. Web Dinamis: website yang isi tampilannya tidak statis
1. 2. z z z
Web Statis Æ HTML (only) Web Dinamis HTML plus plus + Pemrograman Web (Scripting) + Animasi Interaktif (Mis: Flash, Java Applet)
HTML & XHTML z z z z
z z
HTML juga mengalami perkembangan Versi terakhir: HTML 4.1 XHTML adalah standar baru untuk HTML yang bertujuan: memungkinkan sebuah dokumen web dapat dibaca oleh divais baru seperti PDA, ponsel, dll Crossbrowser: ditampilkan sama untuk semua jenis browser Versi terakhir: XHTML 1.1
HTML z
z
z z z
Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi sintaks HTML harus dikuasai dengan baik. Membantu dalam mengembangkan fitur yang dinamis: script, applet, konten multimedia, dll. may want low-level control may care about size/readability of pages may want to "steal" page components and integrate into existing pages
Pemrograman Web Client Side Script : z Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client. z Javascript, VBScript Server Side Script: z Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client. z ASP/ASP.Net, PHP, CGI, JSP, dll
Cara Kerja Web
Pemrosesan Script Web Browser (Client side processing) HTML JavaScript Java Applets
Server Side Processing
HTTP
Web Server
CGI SSI Servlet PHP JSP ASP
Databases
Client Side Script z
z z z z z z
Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML. Penambahan script ini mempunyai tujuan tertentu. Misalnya: menampilkan jam dan tanggal yang upto-date, menu yang dinamis (mis: pull down menu), kontrol terhadap sebuah window, animasi sederhana, animasi mouse maupun untuk validasi form, dll
Client Side Script Advantage: z Waktu proses relatif cepat karena langsung dieksekusi oleh browser client z Tidak memerlukan web server untuk hosting z Dapat dieksekusi langsung oleh berbagai browser Disadvantage: z Script bisa dilihat oleh pengguna z Script dapat di copy-paste z Tidak cocok untuk akses data atau database
Tips Client Side Script: Gunakan untuk proses-proses sisi client z Script Javascript mudah untuk “dibajak” z Pelajari bagaimana cara “menambahkan” ke website kita z Source: z
http://www.dynamicdrive.com z http://www.javascriptsource.com z
Server Side Script z z z z z z
z
Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll PHP: open source dan banyak digunakan luas Active Server Pages (ASP) dan ASP.Net, teknologi yang dikembangkan oleh Microsoft ColdFusion (CFM), dikembangkan oleh Macromedia Java Server Pages dan Servlet dikembangkan oleh Sun Microsystem Common Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau Perl Server Side Include (SSI), seperti misalnya Frontpage Server Extension
Server Side Script Advantage: z Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste z Cocok untuk akses data atau aplikasi database z Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll Disadvantage: z Waktu proses relatif lebih lambat karena dieksekusi oleh server z Memerlukan web server untuk hosting
CSS (Cascading stylesheet) CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. z Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. z Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya. z
CSS z
z z
Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS
Penggunaan CSS saat ini Kontrol aspek visual keseluruhan halaman website z Membuat Layout yang standart (kolaborasi dengan XHTML) z
Teknik membuat layout HTML: z Frame Å cara lama, jarang digunakan z Tabel Å disukai oleh designer z CSS Å metode baru, menjadi standar
ActiveX adalah sebuah teknologi integrasi bukan sebuah bahasa pemrograman. ActiveX dapat disebut sebagai lem yang menyatukan berbagai macam kode bahasa pemrograman sehingga dapat bekerja sama menjadi sebuah aplikasi Internet. ActiveX mirip dengan OLE (Object Linking and Embedding). Ditandai dengan tag
