Rekayasa WebAndronicus Riyono, M.T.

Universitas Kristen Duta Wacana

• Andronicus Riyono

• http://facebook.com/riyono

• riyono@gmail.com

• ukdw@riyono.net

• http://lecturer.ukdw.ac.id/riyono

Silabus Singkat

• Matakuliah ini memberikan dasar-dasar pengetahuan tentang bagaimana merancang dan membangun aplikasi berbasis web.

• Membahas mengenai berbagai teknologi seputar Internet, dari konsep dasar hingga penerapannya.

• Membahas arsitektur aplikasi berbasis web, aspek keamanan, hingga tantangan-tantangan khusus yang dihadapi dalam mengembangkan aplikasi berbasis web.

Tujuan Pembelajaran

• Mahasiswa diharapkan:

• memiliki pengetahuan teoritis tentang aspek-aspek yang berpengaruh pada perancangan aplikasi berbasis web

• mampu mengaplikasikan teori yang dipelajarinya

• mampu membangun aplikasi berbasis web sederhana

Target

• Mahasiswa mampu membuat halaman web

• Mahasiswa mampu membuat website statis

• Mahasiswa mampu membuat website dinamis

• Mahasiswa mampu membuat aplikasi berbasis web

Penilaian

• Tugas-Tugas 40%

• Praktikum 50%

• TTS 5%

• TAS 5%

• Tugas Tambahan Lain / Penilaian Subjektif

Konsep Web, HTML, CSSRekayasa WebPertemuan 1

Internet

• Apa itu Internet?

• Jumlah Penduduk Dunia : Pengguna Internet

50 juta pengguna

Internet

Televisi

Radio

0 5 10 15 20 25 30 35 40

4 tahun

38 tahun

13 tahun

Pertumbuhan Pengguna Internet di Indonesia

0 juta

10 juta

20 juta

30 juta

40 juta

2000‡ 2001* 2002* 2003* 2004* 2005* 2006* 2007‡ 2008† 2009‡

*data tidak tersedia †data APJII - www.apjii.org ‡data ITU - www.itu.int

48%pengguna Internet di Indonesia adalah pengguna Facebook

Teknologi Web

Teknologi Web

Teknologi Web

Teknologi Web

Teknologi Web

Teknologi Web

HyperText

• HTTP (HyperText Transfer Protocol)

• HTML (HyperText Markup Language)

• XHTML (eXtensible HyperText Markup Language)

Hyper... apa sih? Hiperaktif?

Linear Media vs.

Hypermedia

Linear media

• Media yang untuk mengakses informasi di dalamnya pengguna perlu melalui sebuah urutan tertentu yang linier

Contoh Linear Media: Buku

Ada urutan tertentu dari awal hingga akhir. Ketika Anda diminta untuk membaca halaman tertentu

(misal, halaman 232) Anda perlu menelusuri halaman-

halaman buku tersebut.

Contoh Linear Media: Kaset

Ada urutan tertentu dari awal hingga akhir. Ketika Anda ingin

memutar lagu ketiga, Anda perlu menelusuri kaset

tersebut (dengan fast-forward, stop, play, rewind).

Hypermedia

• Media yang untuk mengakses informasi di dalamnya pengguna dapat menuju secara langsung ke informasi yang diinginkan

Contoh Hypermedia:

CDAnda bisa langsung

mendengarkan lagu ketiga dengan menekan tombol angka 3 pada

Remote Control CD Player

Contoh Hypermedia:

Website!Sekumpulan link,

sebuah klik,dan Anda dibawa ke

halaman lain dari website tersebut, atau bahkan dari

website lain

Hypermedia + Text

• Hypermedia + Text = Hypertext

• Hyperlink, untuk menghubungkan antara dokumen yang satu dengan dokumen yang lain

Apa yang terjadi antara browser dan server?

• Kasus: Membuka halaman web UKDW

Teknologi Web

1 2 3, 4

56

Langkah 1:Mencari Alamat UKDW

• simulasi:nslookup www.ukdw.ac.id

Teknologi Web

1 2 3, 4

56

Langkah 2:Jawaban DNS

• Server:! ! 4.2.2.1

Address:! 4.2.2.1#53

Non-authoritative answer:

Name: www.ukdw.ac.id

Address: 222.124.22.21

Teknologi Web

1 2 3, 4

56

Langkah 3:Membuka koneksi

• simulasi:telnet 222.124.22.21 80

Trying 222.124.22.21...

Connected to

21.subnet222-124-22.astinet.te

lkom.net.id.

Escape character is '^]'.

Teknologi Web

1 2 3, 4

56

Langkah 4:HTTP Request

• GET / HTTP/1.1

Host: www.ukdw.ac.id

User-Agent: Mozilla/5.0 ...

Accept: text/html, ...

Accept-Language: en-us, ...

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,...

Keep-Alive: 300

Connection: keep-alive

Teknologi Web

1 2 3, 4

56

Langkah 5:HTTP Response

• HTTP/1.x 200 OK

Date: Tue, 01 Sep 2009

22:13:40 GMT

Server: Apache/2.0.59 (Win32)

Set-Cookie:

PHPSESSID=d358af56d20c3ef070e9

e6583dd4699a; path=/

Expires: Thu, 19 Nov 1981

08:52:00 GMT ...

Langkah 5 (lanjutan):HTTP Response

• <HTML>

<HEAD>

<TITLE>UKDW Official Site</

TITLE>

<link href="http://

www.ukdw.ac.id//settings/

style/style.css"

rel="stylesheet" type="text/

css">...

Langkah 5 (lanjutan):HTTP Response

• <TD ROWSPAN=3>

<img src="http://

www.ukdw.ac.id//client/images/

front_new/2.gif" width=185

height=238 alt="">

</TD>

Langkah 3 (lagi):Membuka koneksi (lagi)

• simulasi:telnet 222.124.22.21 80

Trying 222.124.22.21...

Connected to

21.subnet222-124-22.astinet.te

lkom.net.id.

Escape character is '^]'.

Langkah 4 (lagi):HTTP Request (lagi)

• GET /client/images/front_new/

2.gif HTTP/1.1

Host: www.ukdw.ac.id

User-Agent: Mozilla/5.0 ...

Accept: text/html, ...

Accept-Language: en-us, ...

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,...

...

Langkah 5 (lagi):HTTP Response (lagi)

• HTTP/1.x 200 OK

Date: Tue, 01 Sep 2009

22:13:45 GMT

Server: Apache/2.0.59 (Win32)

Last-Modified: Wed, 01 Nov

2006 01:24:52 GMT

Etag: "6842-728c-5ea8d43b"

Accept-Ranges: bytes

Content-Length: 29324 ...

Teknologi Web

1 2 3, 4

56

Langkah 6:Browser Menampilkan

Halaman lengkap setelah 8 HTTP Request/Response lainnya...

Apa perbedaannya?

• urutan pemanggilan file-file bisa berbeda

• waktu yang diperlukan untuk mendapatkan file-file bisa berbeda

• bahkan untuk mengambil file yang sama, waktu yang diperlukan bisa berbeda dalam kesempatan yang berbeda

• total waktu yang diperlukan untuk membuka sebuah halaman web tidak sama tiap kali

HyperText Markup Language

• mark = tanda, marker = penanda, marking = memberi tanda

• Main Entry: markup language *Function: noun Date: 1980: a system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page especially for electronic transmission and display

* http://www.merriam-webster.com/dictionary/markup

Memberi tanda (tag)

<p>

Informasi pendaftaran, jadwal tes dan biaya dapat dilihat detail di sini.

</p>

Berarti, bagian ini adalah isi paragrafnya.

ini adalah tanda (tag) p, menandai awal dari sebuah paragraf

ini adalah tanda penutup (closing tag) p, menandai akhir dari sebuah paragraf

{sebuahelemen

p

Struktur dasar halaman HTML

• <html>

• <head>

• <title></title>

• </head>

• <body>

• </body>

• <html>

Kepala dan Badan

• Head

• Berisi hal-hal selain isi (content) dari halaman web tersebut

• Body

• Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

Kepala dan Badan

• Head

• Berisi hal-hal selain isi (content) dari halaman web tersebut

• Body

• Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

nested tags

• <p>

• Pada tanggal 7 November 2009,

• <a href="http://knastik.org/">

• KNasTIK 2009

• </a>

• akan diselenggarakan di UKDW

• </p>

nest = sarang?

atribut

Tag Soup

• opening tags, tanpa closing tags

• tag yang hanya didukung browser tertentu

• marquee

• blink

• berkesan tidak rapi, semacam seonggok tags dan berbagai macam isi lainnya (teks), itulah mengapa disebut sebagai tag soup

Browser war

• Persaingan antar browser, masing-masing merasa diri lebih unggul dari yang lain

• Misal

• Proprietary Tags (marquee, blink, dll.)

• Rendering engine

• Akibatnya

• Tampilan berbeda antar browser!

Web Standard* (markup)

• XHTML 1.1 (2001, 2008)

• XHTML Basic 1.1 (2000, 2008)

• XHTML 1.0 (2000, 2002)

• HTML 4.01 (1999)

• HTML 3.2 (1997)

* http://www.w3.org/TR/#Recommendations

Keuntungan menggunakan standar

• Accessibility

• To software/machines

• To people

• Stability

* http://www.webstandards.org/learn/faq/#p3

XHTML 1.0 Transitional

• XHTML = HTML ditulis dengan kaidah XML

• Well-structured (properly nested tags)

• Case-sensitivity (all lowercased element)

• lebih baik dari HTML 4.01

• masih cukup fleksibel

• jika bisa, XHTML 1.1 lebih baik lagi

Validasi

• http://validator.w3.org/

• agar kita tahu yang kita buat sudah memenuhi standar atau belum

• kesalahan umum:

• tag img tanpa atribut alt

• lupa closing tag

CSS

• Cascading Style Sheets

• Mengatur bagaimana elemen-elemen HTML yang ada pada sebuah halaman web ditampilkan oleh browser

Site evolution

http://mboffin.com/post.aspx?id=1619

Artikel-artikel

• http://wefunction.com/2009/04/quality-within-web-design/

• http://www.sitepoint.com/article/principles-beautiful-web-design/

Tugas Pribadi

• Buatlah essay mengenai Internet

• Apa itu Internet

• Apa yang bisa Anda lakukan sekarang dengan adanya Internet

• Apa yang Anda bayangkan seputar Internet di masa depan

• Minimal 2 halaman, tidak ada maksimal

• Harus menyertakan referensi

Perhatian!

• Margin: (atas, kanan, bawah, kiri) 3, 3, 4, 4cm

• Font: Verdana 12pt, Spacing: 1,5 spasi

• Filetype: PDF

• Subject: REKWEB-TUGAS1

• Nama File: REKWEB-TUGAS1-22xxxxxx.pdf

• dikirim ke: ukdw@riyono.net

Referensi

• Lowe, D., & Hall, W. (1998). Hypermedia and the web: An engineering approach.New York, NY: Wiley.