2. Pengantar Pemrograman Internet - Universitas Brawijayaagipk.lecture.ub.ac.id/files/2015/02/PW-20142015-2-02-Pengantar-Pe... · Desain slide ini dadaptasi dari University of San

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