1 Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana2 Andronicus Riyono3 Silabus Singkat Matakuliah ini memberikan dasar-dasar penge...
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 aspekaspek 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, CSS Rekayasa Web Pertemuan 1
Internet
• Apa itu Internet? • Jumlah Penduduk Dunia : Pengguna Internet
50 juta pengguna Internet
4 tahun
Televisi
13 tahun
Radio
38 tahun
0
5
10
15
20
25
30
35
40
Pertumbuhan Pengguna Internet di Indonesia 40 juta
30 juta
20 juta
10 juta
0 juta
2000‡
2001*
*data tidak tersedia
2002*
2003*
2004*
2005*
2006*
†data APJII - www.apjii.org
2007‡
2008†
2009‡
‡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 halamanhalaman 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: CD Anda 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
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) sebuah elemen p
{
ini adalah tanda (tag) p, menandai awal dari sebuah paragraf Berarti, bagian ini adalah isi paragrafnya.
Informasi pendaftaran, jadwal tes dan biaya dapat dilihat detail di sini. ini adalah tanda penutup (closing tag)
p, menandai akhir dari sebuah paragraf
Struktur dasar halaman 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 nest = sarang?
•
• Pada tanggal 7 November 2009, • • KNasTIK 2009 • • akan diselenggarakan di UKDW •
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
