Pengantar Pemrograman Internet
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
1
Apa Itu Web Dinamis? • Kadang disebut juga aplikasi berbasis web • Halaman web yang berubah berdasarkan masukan/input dari pengguna (selain navigasi dari suatu halaman ke halaman lain). • Halaman web yang memiliki kemampuan untuk menentukan apa yang ditampilkan berdasarkan aksi pengguna dan/atau kondisi tertentu. • Halaman web yang dibangun secara dinamis oleh klien maupun server berdasarkan aksi pengguna dan/atau kondisi tertentu Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
2
KarakterisHk Web Dinamis • Memberi tanggapan terhadap parameter yang berbeda (misal: perbedaan user-‐agent) • Memiliki “memory” (misal: login, keranjang belanja pada e-‐commerce, pendaMaran anggota) • Pada umumnya memanfaatkan formulir html • Pada umumnya memiliki antarmuka yang dapat digunakan oleh administrator untuk mengelola konten situs • RelaHf mudah untuk dipelihara , di-‐upgrade, dan dibuat daripada web staHs. Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
3
Halaman Web Dinamis • Pertama kali diperkenalkan pada tahun 1995 bersamaan dengan dibuatnya JavaScript • Dua kategori utama pada teknologi yang digunakan: – Teknologi sisi server – Teknologi sisi klien
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
4
Teknologi Sisi Klien • • • •
Java Applets Adobe Flash MicrosoM Silverlight HTML, CSS, JavaScript
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
5
HTML, CSS, JavaScript HTML
(Struktur Dokumen)
CSS
(Tampilan Dokumen)
JavaScript
(Perilaku Dokumen)
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
6
HTML (Buku [1]) (1) • • • • • • • •
W3C HTML ValidaHon Service Headings Pranala/ tautan Gambar Lis Tabel Formulir Elemen meta (kata kunci dan deskripsi) Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
7
HTML (Buku [1]) (2) • Jenis Hpe masukan baru pada HTML5 (color, date, email, month, number, search, tel, dsb.) • Atribut autocomplete dan elemen datalist • Elemen struktur halaman (header, nav, figure, arHcle, summary, secHon, aside, meter, dsb.)
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
8
Contoh Layout HTML header nav section article
aside
article
footer Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
9
CSS • • • • • • • •
Universal selector Type selector Descendant selector Child selector Adjacent sibling Class selector ID selector Pseudo selector Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
10
Model Kotak CSS Margin Tepian Lapisan
Konten
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
11
Teknologi Sisi Server • • • • •
Web Server CGI (Common Gateway Interface) Web Server Extension ApplicaHon Server Cloud
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
12
Common Gateway Interface
Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web ApplicaHons Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
13
Web Server Extension
Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web ApplicaHons Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
14
ApplicaHon Server
Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web ApplicaHons Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
15
Hypertext Transfer Protocol • HTTP adalah protokol (level aplikasi) untuk sistem informasi hypermedia terdistribusi dan kolaboraHf. [RFC-‐2616] • Saat ini spesifikasi HTTP terbaru adalah HTTP/ 1.1 (RFC-‐2616). Versi HTTP selanjutnya adalah HTTP/2.0 (h+pbis) masih dalam bentuk draM. • HTTPS = HTTP + SSL (Secure Sockets Layer) & TLS (Transport Layer Security) Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
16
KarakterisHk HTTP • Stateless SeHap HTTP request ditangani oleh server sebagai permintaan yang bersifat atomic dan independen.
• Pull-‐based Interaksi hanya akan berjalan keHka ada request dari client. Server Hdak dapat ‘memanggil balik’ client.
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
17
URI/URL
(sumber: Stephen A. Thomas – HTTP EssenHals) Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
18
Interaksi Cient-‐Server Pada HTTP
(Sumber: Tim Downey – Guide To Web Development With Java) Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
19
Tugas Individu 1. Baca buku [2] chapter 3,4,5,6. Siapkan pertanyaan (jika ada) sebagai bahan diskusi pada pertemuan berikutnya. 2. Deploy halaman biodata yang telah dibuat ke alamat /biodata, kirimkan screenshot browser beserta HTTP request & response header pada firebug (format .JPG).
Pemrograman Web -‐ Pengantar Pemrograman Internet Agi Putra Kharisma, ST., MT.
20
