rekayasa web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... ·...
TRANSCRIPT
![Page 1: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/1.jpg)
Rekayasa WebAndronicus Riyono, M.T.
Universitas Kristen Duta Wacana
![Page 2: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/2.jpg)
• Andronicus Riyono
• http://facebook.com/riyono
• http://lecturer.ukdw.ac.id/riyono
![Page 3: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/3.jpg)
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.
![Page 4: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/4.jpg)
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
![Page 5: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/5.jpg)
Target
• Mahasiswa mampu membuat halaman web
• Mahasiswa mampu membuat website statis
• Mahasiswa mampu membuat website dinamis
• Mahasiswa mampu membuat aplikasi berbasis web
![Page 6: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/6.jpg)
Penilaian
• Tugas-Tugas 40%
• Praktikum 50%
• TTS 5%
• TAS 5%
• Tugas Tambahan Lain / Penilaian Subjektif
![Page 7: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/7.jpg)
Konsep Web, HTML, CSSRekayasa WebPertemuan 1
![Page 8: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/8.jpg)
Internet
• Apa itu Internet?
• Jumlah Penduduk Dunia : Pengguna Internet
![Page 9: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/9.jpg)
50 juta pengguna
Internet
Televisi
Radio
0 5 10 15 20 25 30 35 40
4 tahun
38 tahun
13 tahun
![Page 10: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/10.jpg)
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
![Page 11: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/11.jpg)
48%pengguna Internet di Indonesia adalah pengguna Facebook
![Page 12: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/12.jpg)
Teknologi Web
![Page 13: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/13.jpg)
Teknologi Web
![Page 14: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/14.jpg)
Teknologi Web
![Page 15: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/15.jpg)
Teknologi Web
![Page 16: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/16.jpg)
Teknologi Web
![Page 17: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/17.jpg)
Teknologi Web
![Page 18: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/18.jpg)
HyperText
• HTTP (HyperText Transfer Protocol)
• HTML (HyperText Markup Language)
• XHTML (eXtensible HyperText Markup Language)
Hyper... apa sih? Hiperaktif?
![Page 19: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/19.jpg)
Linear Media vs.
Hypermedia
![Page 20: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/20.jpg)
Linear media
• Media yang untuk mengakses informasi di dalamnya pengguna perlu melalui sebuah urutan tertentu yang linier
![Page 21: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/21.jpg)
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.
![Page 22: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/22.jpg)
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).
![Page 23: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/23.jpg)
Hypermedia
• Media yang untuk mengakses informasi di dalamnya pengguna dapat menuju secara langsung ke informasi yang diinginkan
![Page 24: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/24.jpg)
Contoh Hypermedia:
CDAnda bisa langsung
mendengarkan lagu ketiga dengan menekan tombol angka 3 pada
Remote Control CD Player
![Page 25: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/25.jpg)
Contoh Hypermedia:
Website!Sekumpulan link,
sebuah klik,dan Anda dibawa ke
halaman lain dari website tersebut, atau bahkan dari
website lain
![Page 26: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/26.jpg)
Hypermedia + Text
• Hypermedia + Text = Hypertext
• Hyperlink, untuk menghubungkan antara dokumen yang satu dengan dokumen yang lain
![Page 27: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/27.jpg)
![Page 28: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/28.jpg)
![Page 29: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/29.jpg)
![Page 30: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/30.jpg)
![Page 31: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/31.jpg)
Apa yang terjadi antara browser dan server?
• Kasus: Membuka halaman web UKDW
![Page 32: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/32.jpg)
Teknologi Web
1 2 3, 4
56
![Page 33: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/33.jpg)
Langkah 1:Mencari Alamat UKDW
• simulasi:nslookup www.ukdw.ac.id
![Page 34: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/34.jpg)
Teknologi Web
1 2 3, 4
56
![Page 35: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/35.jpg)
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
![Page 36: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/36.jpg)
Teknologi Web
1 2 3, 4
56
![Page 37: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/37.jpg)
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 '^]'.
![Page 38: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/38.jpg)
Teknologi Web
1 2 3, 4
56
![Page 39: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/39.jpg)
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
![Page 40: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/40.jpg)
Teknologi Web
1 2 3, 4
56
![Page 41: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/41.jpg)
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 ...
![Page 42: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/42.jpg)
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">...
![Page 43: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/43.jpg)
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>
![Page 44: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/44.jpg)
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 '^]'.
![Page 45: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/45.jpg)
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,...
...
![Page 46: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/46.jpg)
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 ...
![Page 47: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/47.jpg)
Teknologi Web
1 2 3, 4
56
![Page 48: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/48.jpg)
Langkah 6:Browser Menampilkan
Halaman lengkap setelah 8 HTTP Request/Response lainnya...
![Page 49: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/49.jpg)
![Page 50: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/50.jpg)
![Page 51: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/51.jpg)
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
![Page 52: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/52.jpg)
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
![Page 53: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/53.jpg)
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
![Page 54: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/54.jpg)
Struktur dasar halaman HTML
• <html>
• <head>
• <title></title>
• </head>
• <body>
• </body>
• <html>
![Page 55: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/55.jpg)
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
![Page 56: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/56.jpg)
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
![Page 57: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/57.jpg)
nested tags
• <p>
• Pada tanggal 7 November 2009,
• <a href="http://knastik.org/">
• KNasTIK 2009
• </a>
• akan diselenggarakan di UKDW
• </p>
nest = sarang?
atribut
![Page 58: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/58.jpg)
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
![Page 59: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/59.jpg)
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!
![Page 60: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/60.jpg)
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
![Page 61: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/61.jpg)
Keuntungan menggunakan standar
• Accessibility
• To software/machines
• To people
• Stability
* http://www.webstandards.org/learn/faq/#p3
![Page 62: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/62.jpg)
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
![Page 63: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/63.jpg)
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
![Page 64: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/64.jpg)
![Page 65: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/65.jpg)
![Page 66: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/66.jpg)
CSS
• Cascading Style Sheets
• Mengatur bagaimana elemen-elemen HTML yang ada pada sebuah halaman web ditampilkan oleh browser
![Page 67: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/67.jpg)
Site evolution
http://mboffin.com/post.aspx?id=1619
![Page 68: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/68.jpg)
Artikel-artikel
• http://wefunction.com/2009/04/quality-within-web-design/
• http://www.sitepoint.com/article/principles-beautiful-web-design/
![Page 69: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/69.jpg)
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
![Page 70: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/70.jpg)
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: [email protected]
![Page 71: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2010/08/rekayasa-web... · • Membahas arsitektur aplikasi berbasis web, ... • Mahasiswa mampu membuat website](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c7f293209d3f2c33f8c3720/html5/thumbnails/71.jpg)
Referensi
• Lowe, D., & Hall, W. (1998). Hypermedia and the web: An engineering approach.New York, NY: Wiley.