Download Dasar-dasar Web (v2015)

Pemrograman Berbasis WEB
Dasar-dasar Web
Objektif
Konsep Dasar Web
 Arsitektur Web
 HTTP
 HTML
 Komponen Dasar Teknologi Web
 Transformasi Web

Konsep Dasar Web
 Web?
 Internet?
 Jaringan
Komputer?
Konsep Dasar Web
 Jaringan Komputer
◦ Jaringan yang memungkinkan komputer untuk
saling bertukar informasi
◦ Dua buah komputer atau lebih yang
terhubung melalui media telekomunikasi
◦ Dalam pembelajaran sering digambarkan lewat
model OSI layer
Konsep Dasar Web

Jaringan Komputer
Konsep Dasar Web
 Internet
◦ Interconnected networks
◦ Network of networks
 Interoperable via standards (TCP/IP)
◦ Sejarah
 ARPANet (akhir 60-an, awal 70-an) – militer
 Diambil alih & didanai oleh NSF (1986)
 Commercial backbones (1996 - kini)
Konsep Dasar Web
 Internet
◦ Internet
vs Intranet
 Global, open, public
 Disebut juga “extranet” untuk membedakannya dari
intranet
◦ Intranet
 Jaringan pribadi untuk digunakan secara eksklusif
oleh sebuah organisasi
 Umumnya berada di belakang firewall
Konsep Dasar Web

Internetwork
Konsep Dasar Web

Internet
Konsep Dasar Web
 Web
◦ Ditemukan oleh Tim Berners-Lee
◦ Konsep dari universal readership:





any individual,
on any type of computer,
in any location,
should be able to access data
by using only one simple and common program
Konsep Dasar Web

Internet vs Web
◦ Internet menyediakan infrastruktur dari
transmisi informasi melalui jaringan
◦ Web berisi interlinked information (web pages)
Arsitektur Web
Arsitektur Web
Arsitektur Web

Sistem web merupakan aplikasi yang:
◦ Berarsitektur client-server
 Software web browser di sisi client
 Software web server di sisi server
◦ Menggunakan protokol HTTP dalam
komunikasi antara client dan server
 Mempunyai fungsi untuk mengambil/menjalankan isi
file dokumen web di server dan menampilkannya di
sisi client
Arsitektur Web

Client
◦ User-agent
◦ Program yang digunakan untuk melakukan
request ke server dan mengolah respon dari
server
◦ Menampilkan informasi yang berasal dari
server (teks dan gambar)
Arsitektur Web

Server
◦ Berbentuk software/program (daemon,
httpd) yang dijalankan pada komputer server
◦ Berfungsi agar dokumen web yang disimpan di
server dapat diakses oleh user melalui
internet/intranet
◦ Web server: server yang menyediakan layanan
web
◦ Web site = host + web server (software) +
information
Arsitektur Web

URL (Uniform Resource Locator)
◦ URL adalah sistem pengalamatan file yang
digunakan di Internet
◦ Format URL standar dideskripsikan di RFC
1738
Arsitektur Web

Notasi URL
scheme:[//[user:password@]host[:port]][/]
path[?query][#fragment]
◦
◦
◦
◦
scheme - protocol to be used
host - name or IP address for the web server being accessed.
port - (optional for specific process/service)
path - file system path from the ‘root’ directory of the server to
the desired document
◦ query-string - contains other dynamic parameters associated
with the request
◦ fragment - a reference to a positional marker within the
requested document, like a bookmark
Arsitektur Web
http://www.mywebsite.com/sj/test
?name=sviergn&x=true#stuff
◦
◦
◦
◦
◦
scheme = http
host = www.mywebsite.com
path = /sj/test
query string = name=sviergn&x=true
fragment = stuff
HTTP
HTTP (HyperText Transfer Protocol)
adalah protokol yang dipergunakan untuk
mentransfer dokumen dalam World Wide
Web (WWW)
 Protokol ini ringan, tidak berstatus dan
generik yang dapat dipergunakan berbagai
macam tipe dokumen

HTTP
Pengembangan HTTP dikoordinasi oleh
Konsorsium World Wide Web (W3C) dan
Internet Engineering Task Force (IETF), bekerja
dalam publikasi satu seri RFC, yang paling terkenal
RFC 2616, yang menjelaskan HTTP/1.1, versi
HTTP yang digunakan umum sekarang ini
 HTTP adalah sebuah protokol meminta/menjawab
antara client dan server. Sebuah client HTTP
seperti web browser, biasanya memulai
permintaan dengan membuat hubungan TCP/IP ke
port tertentu di server (biasanya port 80)

HTTP
Sebuah server HTTP yang mendengarkan di port
tersebut menunggu client mengirim kode permintaan
(request), seperti "GET / HTTP/1.1" (yang akan
meminta halaman yang sudah ditentukan), diikuti
dengan pesan MIME yang memiliki beberapa informasi
kode kepala yang menjelaskan aspek dari permintaan
tersebut, diikut dengan badan dari data tertentu
 Beberapa header juga bebas ditulis atau tidak,
sementara beberapa lainnya diperlukan oleh protokol
HTTP/1.1. Begitu menerima kode permintaan (dan
pesan, bila ada), server mengirim kembali kode
jawaban, seperti "200 OK", dan sebuah pesan yang
diminta, atau sebuah pesan error atau pesan lainnya

HTTP

Contoh Transaksi
◦ S = Server
C = Client
◦ C : (inisialisasi koneksi)
C : GET /index.htm HTTP/1.1
C : host: www.wikipedia.org
S : 200 OK
S : Mime-type: text/html
S:
S : -- data dokumen -S : (close connection)
HTTP
HTTP

Sejarah
◦ Protokol HTTP pertama kali dipergunakan dalam
WWW pada tahun 1990 (versi 0.9.) berupa protokol
transfer dokumen secara mentah, data dokumen
dikirim sesuai dengan isi dari dokumen tersebut tanpa
memandang tipe dari dokumen
◦ Kemudian pada tahun 1996 protokol HTTP diperbaiki
menjadi HTTP versi 1.0 untuk mengakomodasi tipetipe dokumen yang hendak dikirim beserta enkoding
yang dipergunakan dalam pengiriman data dokumen
◦ Sesuai dengan perkembangan infrastruktur internet
maka pada tahun 1999 dikeluarkan HTTP versi 1.1
untuk mengakomodasi proxy, cache dan koneksi yang
persisten
HTTP

HTTP servers, browsers & proxies
◦ Web server dan browser bertukar informasi
menggunakan HTTP, oleh karena itu web server
sering disebut sebagai HTTP server
◦ Web browser seringkali disebut sebagai HTTP
client, tetapi fungsi/kemampuannya tidak terbatas
pada HTTP saja
◦ HTTP proxy adalah program yang berperan
sebagai server dan client, yakni meminta request
pada web server atas nama client yang lain
 Proxy memungkinkan pengiriman HTTP melalui firewall,
mendukung caching dari pesan HTTP, serta filtering dari
request HTTP
HTTP

HTTP Proxy
HTTP

Status code adalah tiga digit integer, dan
digit pertama menentukan kategori umum
dari respon:
◦
◦
◦
◦
1xx indicates an informational message
2xx indicates success of some kind
3xx redirects the client to another URL
4xx indicates an error on the client's part
 Yes, the system blames it on the client if a resource
is not found (i.e., 404)
◦ 5xx indicates an error on the server's part
HTML


Adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di
dalam sebuah browser Internet
Bermula dari sebuah bahasa yang sebelumnya
banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML,
HTML adalah sebuah standar yang digunakan
secara luas untuk menampilkan halaman web
dan HTML kini merupakan standar Internet
yang saat ini dikendalikan oleh World Wide
Web Consortium (W3C)
HTML
HTML berupa kode-kode tag yang
menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang
diinginkan
 Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan web browser
seperti Mozilla Firefox, Microsoft Internet
Explorer, Opera, dll.
 HTML juga dapat dikenali oleh aplikasi
pembuka email dan program lain yang
memiliki kemampuan browser

HTML

HTML adalah format standar untuk menulis dokumen web

Spesifikasi HTML standar (HTML 4.01) terdapat id
http://www.w3.org/TR/html4/
Contoh dokumen HTML:
Hasil tampilan:
<html>
<head>
<title>
My first HTML document
</title>
</head>
<body>
<p>
Hello world!<br>Welcome to my
<b>first</b> HTML page.
</p>
</body>
</html>
Hello world!
Welcome to my first HTML page.
HTML

28 Oktober 2014, W3C dan Web
Hypertext Application Technology
Working Group (WHATWG) merilis
standar HTML revisi ke-5 yang disebut
HTML5
Komponen Dasar Teknologi Web

HTML
◦ A markup language for formatting hypertext
documents

URL
◦ A uniform notation scheme for addressing
accessible resources over the network

HTTP
◦ A protocol for transporting messages over
the network
Transformasi Web
Transformasi Web

A Web site is more than just a group of
Web pages that happen to be connected
to each other through hypertext links
◦ Content-related concerns
◦ Aesthetic concerns
◦ Architectural concerns