Desain slide ini dadaptasi dari University of San Fransisco

2. Pengantar Pemrograman Internet

PTI15010

Pemrograman Web

Agi Putra Kharisma, S.T., M.T.

Genap 2014/2015

Prinsip Kerja Web

Bagaimanakah proses akses halaman web mulai dari server

hingga ditampilkan pada web browser

?

Hypertext Transfer Protocol

• HTTP adalah protokol (level aplikasi) untuk sistem

informasi hypermedia terdistribusi dan kolaboratif. [RFC-

2616]

• Saat ini spesifikasi HTTP terbaru adalah HTTP/1.1 (RFC-

2616). Versi HTTP selanjutnya adalah HTTP/2.0 (httpbis)

masih dalam bentuk draft.

• HTTPS = HTTP + SSL (Secure Sockets Layer) & TLS

(Transport Layer Security)

Format URL

(sumber: Stephen A. Thomas – HTTP Essentials)

Karakteristik HTTP

Stateless Setiap HTTP request ditangani oleh server sebagai

permintaan yang bersifat atomic dan independen.

HTTP is a stateless protocol. A stateless protocol does not

require the server to retain information or status about

each user for the duration of multiple requests.

Pull-based Interaksi hanya akan berjalan ketika ada request dari

client. Server tidak dapat ‘memanggil balik’ client.

Interaksi Client-Server Pada HTTP

(Sumber: Tim Downey – Guide To Web Development With Java)

Teknologi Web

• Teknologi Sisi Server

• Teknologi Sisi Klien

Teknologi Sisi Server

• Web Server • CGI (Common Gateway Interface) • Web Server Extension • Application Server • Cloud

Common Gateway Interface

Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web Applications

Web Server Extension

Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web Applications

Application Server

Sumber: Stefano Ceri, dkk. – Designing Data Intensive Web Applications

Teknologi Sisi Klien

• Java Applets

• Adobe Flash

• Microsoft Silverlight

• HTML, CSS, JavaScript

• ... dsb

HTML, CSS, JavaScript

HTML (Struktur Dokumen)

CSS (Tampilan Dokumen)

JavaScript (Perilaku Dokumen)

Belajar HTML & CSS

Learn to Code HTML & CSS

http://learn.shayhowe.com/html-css/

Learn CSS Layout

http://learnlayout.com/

HTML & CSS Best Practices

HTML Best Practices

https://github.com/hail2u/html-best-practices

Writing efficient CSS

https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/Writing_efficient_CSS

Web Statis

vs

Web Dinamis

Web Dinamis

Halaman web yang dibangun secara dinamis oleh klien

maupun server berdasarkan aksi pengguna* dan/atau kondisi

tertentu.

(*) aksi pengguna selain navigasi halaman

Berikan contoh aksi pengguna atau kondisi yang dapat

memengaruhi perilaku web dinamis:

1. User login (siapa yang mengakses)

2. Perubahan data

3. Koneksi internet

4. Device & Web Browser (user-agent)

5. Kapan diakses?

6. Dimana diakses?

7. ... ???

Tugas

• Pelajari HTML & CSS melaui referensi situs yang tercantum pada slide – slide sebelumnya.

• Buat sebuah halaman biodata saudara menggunakan HTML dan CSS (internal CSS).

• Biodata meliputi data diri dan riwayat pendidikan.

Tugas dikumpulkan via email dengan format subjek:

PW-IFD-01-NIM

Dan attachment dengan nama file:

PW-IFD-01-NIM.html