Pertemuan 1

Pemrograman Basis
WEB
Tim Dosen – TI – USD
 Apa itu Internet?
 Internet adalah sistem global dari jaringan komputer yang
saling terhubung menggunakan standar protokol Internet
(TCP/IP) untuk melayani milyaran pengguna di seluruh
dunia (worldwide).
– Merupakan jaringan dalam jaringan (network of network) yang
berisi jutaan jaringan publik, privat, akademi, bisnis, pemerintah
yang saling terhubung menggunakan teknologi interkoneksi
telekomunikasi elektronik.
– Internet menyalurkan sumber informasi dan layanan yang sangat
luas, seperti dokumen inter-linked hypertext, surat elektronik,
komunikasi teks elektronik, transaksi elektronik, audio-video digital
dan lain sebagainya.
– Tidak ada otoritas pusat dalam mengelola dan mengatur internet.
– Memiliki standar akses sendiri untuk setiap area kepemilikan
jaringan.
– Hanya dua bagian yang diatur oleh organisasi bersama; Internet
Corporation for Assigned Names and Numbers (ICANN) untuk
sistem alokasi alamat IP dan sistem penamaan domain; Internet
Engineering Task Force (IETF) untuk standarisasi core protocol
(IPv4 dan IPv6)
 Apa itu Web?
 World Wide Web adalah salah satu bagian dari Internet.

 World Wide Web (disingkat WWW atau W3, disebut juga Web),
adalah suatu sistem interlink dokumen hyperteks yang diakses
melalui internet.
– File publik pada sebuah komputer di internet dapat dibaca oleh remote
user.

 Dengan menggunakan Web Browser pengguna internet dapat

melihat halaman suatu web yang dapat berisi teks, gambar, video
atau multimedia lain yang dinavigasi menggunakan hyperlink.

 Menurut Berners-lee (inventor Web): "... to link and access

information of various kinds as a web of nodes in which the user
can browse at will“.
 Terminologi Web
 HTTP
– Hypertext Transfer Protocol, protokol yang digunakan oleh World
Wide Web untuk mengirim dan menerima halaman web.
– HTTP mendefinisikan bagaimana message di-format dan
ditransmisikan, dan bagaimana aksi dari web server dan browser
seharusnya dilakukan untuk merespon berbagai perintah dalam
sistem Web.
– HTTP disebut juga stateless protocol karena setiap perintah
dieksekusi secara independen, tanpa memperhatikan perintah yang
datang sebelumnya.
 HTML
– HyperText Markup Language, bahasa skrip yang
digunakan untuk membuat dokumen pada World Wide
Web.
– HTML mendefinisikan struktur dan layout dari dokumen
web dengan menggunakan vareasi tag dan attribute.
 Terminologi Web
 Static Web Page
– Merupakan halaman web yang berisi informasi yang ditulis dengan
HTML.
– Informasi pada halaman web tidak dapat diubah kecuali dengan
mengubah source code HTML yang membentuk halaman tersebut.
 Dynamic Web Page
– Merupakan halaman web yang di-generate pada setiap akses yang
diminta oleh user atau halaman web yang selalu berubah sebagai
hasil dari interaksi dengan user.
– Halaman web umumnya berupa template untuk menampilkan hasil
dari operasi kueri terhadap sumber informasi, misalnya database
(database driven) atau hasil kalkulasi dari suatu algoritma program.
 Terminologi Web
 Web Server
– Web server merupakan sebuah komputer yang memberikan layanan web
page.
– Setiap web server memiliki alamat IP dan/atau nama domain serta
perangkat lunak server web dan juga terkoneksi ke jaringan internet.
– Contoh perangkat lunak web server: Apache, GlassFish, NCSA, dan IIS.
 Browser
– Browser merupakan perangkat lunak aplikasi yang digunakan untuk
menemukan, mengambil dan menampilkan konten dari World Wide Web,
yang berupa halaman web, gambar, video, audio dan file multimedia
lainnya.
– Browser merupakan client dari server web yang dijalankan di sisi komputer
user untuk menghubungi dan meminta informasi dan server web.
– Contoh perangkat lunak browser: Internet Explorer, Netscape navigator,
Firefox, Google Chrome, Apple Safari dan Opera.
 Web Programming
– Aktivitas menulis source code aplikasi web yang dimaksudkan untuk
membuat fungsionalitas tertentu yang dijalankan pada web server dan
dapat diakses oleh berbagai user web dengan platform berbeda.
– Bahasa pemrograman web meliputi, PHP, ASP, JSP, Python, dll.
 Terminologi Web
 Client Side Scripting
– Source code aplikasi web yang dijalankan/di-render
oleh web browser atau plug-in browser.
– Aplikasi ini di-download dari server web dan di-
compile di client web.
– Contoh: JavaScript dan ActionScript.
 Server Side
– Source code aplikasi web yang dijalankan di web
server untuk membangkitkan dynamic web page.
– Hasil dari pemrosessan informasi di server dikirimkan
ke web browser dalam bentuk dokumen web.
– Contoh: JSP, ASP, ColdFusion, Perl dan PHP.
 Terminologi Web
 Web Application
– Aplikasi program basis web yang diakses melalui jaringan
komputer intranet atau internet dan diprogram menggunakan
bahasa pemrograman yang mendukung web.
– Contoh: Webmail, online retail sales, online auction, wiki, dll.
 Web Development
– Merupakan pembangunan dan pengembangan web site untuk
world wide web pada jaringan internet atau intranet.
– Dapat berisi: web design, web content development,
client/server-side scripting, konfigurasi web server, analisis yang
berhubungan dengan user dan e-commerce development.
– Jangkauan definisi dari pembuatan halaman web statik tunggal
sampai web dinamik yang kompleks (aplikasi internet, electronic
businesses, atau social network serveice).
 Arsitektur Web
 Two-tier client/server architecture
 Arsitektur Web
 Three-Tier Client/Server Architectures
 Teknologi Web

Internet/Intranet
/Extranet Server
HTML/XHTML HTTP utk
utk display transport

HTTP
Server

URL/URI utk PHP, python dll.

Client
Clients
(browsers)
pengalamatan utk interaksi
 URI dan URL
 URI: Uniform Resource Identifier
– Mekanisme penamaan universal untuk mengidentifikasi resource
dalam Web.
 Resource ada “segala hal yang dapat diberi identitas” (Web
page, image, anchor pada page, database record, dll.)
– Web merupakan suatu ruang informasi, URI merupakan kemudi
untuk mengarungi ruang informasi.
– Penamaan unik untuk Web/teknologi pengalamatan (HTML:
hanya merupakan format data, HTTP: protokol Web)
 URL: Uniform Resource Locator
– Subset dari URI untuk beberapa protokol internet yang eksis,
seperti: http, ftp, mailto, dll.
– Tidak digunakan lagi dalam membuat spesifikasi
 Sintak URI
 Bentuk Human-readable dari request URI adalah

<scheme>:<scheme-dependent-information>

 Scheme: memberitahukan ke aplikasi tipe dari resource dan

mekanisme yang digunakan untuk mengaksesnya.
– Contoh: http, ftp, news, mailto, telnet, file

 Umumnya scheme memerlukan informasi tambahan untuk

melokalisasi resource
– Contoh:
http://www.usd.ac.id/index.html
ftp://www.ti.usd.ac.id/pub/materi_web.pdf
mailto:herry@staff.usd.ac.id
 URI Untuk HTTP
 Sintaks
http://<host>:<port>/<path>?<searchpart>
http://<host>:<port>/<path>#<fragment>

IP port adalah optional (default-nya 80)

 Hierarchical path (elemen-elemen dipisahkan dengan '/')

– jka path kosong, "home page" sistem akan diberikan
– Path dan search part diterjemahkan (interpreted) oleh server

 Search part (optional) digunakan untuk melewatkan informasi

ke server

 Fragment berkoresponden dengan “named anchor” dalam

dokumen HTML
– Fragment tidak dikirimkan ke server (digunakan oleh client untuk display)
 URI Untuk HTTP
 Reserved symbol memiliki arti khusus dalam URI

; / ? : @ = &

 Unsafe symbol dapat memiliki arti khusus dalam

konteks (untuk dihindari)

< > " # % { } | \ ^ ~ [ ] `

 Special characters direpresentasikan dengan '%'

(escape) dan 2 digit hex
– Contoh: %20 (space), %25 (%), %26 (&), %2D (-),
%2F (/), %3D (=), %3F (?), dll.
 HTTP
 HTTP: HyperText Transfer Protocol
– Protocol utama dibalik WWW
– Cara komputer untuk berkomunikasi yang telah
distandarisasi
 Setiap Web client (browser) mengetahui bagaimana
menggunakan HTTP untuk berkomunikasi dengan Web
server
 HTTP tidak dibatasi untuk membawa HTML payload
– Client/server protocol, selalu diawali oleh client
 Request message dari client ke server
 Response message dari server ke client
– HTTP/1.1 – Formal Standard pada tahun 2001
 HTTP in Action

DNS query DNS

http://origin/..
http://origin/.. server

Origin
Client Establish TCP connection server

HTTP request
HTTP
HTTP response transaction

HTML Optional parallel connections

 HTTP Transaction
 HTTP transaction merupakan interaksi request/reply antara Web
client (mis., browser) dan web server, menggunakan protokol HTTP

GET
GET // HTTP/1.1
HTTP/1.1
Accept:
Accept: image/gif,
image/gif, image/x-xbitmap,
image/x-xbitmap,
image/
image/ jpeg,
jpeg, image/pjpeg,
image/pjpeg, */*
*/*
Accept-Language:
Accept-Language: en-us
en-us
Accept-Encoding:
Accept-Encoding: gzip,
gzip, deflate
deflate
User-Agent:
User-Agent: Mozilla/4.0
Mozilla/4.0 (compatible;
(compatible;
Client MSIE
MSIE 5.01;
5.01; Windows
Windows NT)
NT)
Host:
Host: www.usd.ac.id
www.usd.ac.id
Connection:
Connection: Keep-Alive
Keep-Alive

HTTP/1.1
HTTP/1.1 200
200 OK
OK
Date:
Date: Mon,
Mon, 15
15 Jul
Jul 2002
2002 08:49:00
08:49:00 GMT
GMT
Server:
Server: Apache/1.3.26
Apache/1.3.26 (Unix)
(Unix) PHP/4.2.1
PHP/4.2.1
Last-Modified:
Last-Modified: Wed,
Wed, 12
12 Jun
Jun 2002
2002
Origin
08:49:49
08:49:49 GMT
GMT server
ETag:
ETag: "2a-50ea-3d070b2d"
"2a-50ea-3d070b2d"
Accept-Ranges:
Accept-Ranges: bytes
bytes
Content-Length:
Content-Length: 20714
20714
Keep-Alive:
Keep-Alive: timeout=15,
timeout=15, max=100
max=100
Connection:
Connection: Keep-Alive
Keep-Alive
Content-Type:
Content-Type: text/html
text/html

<html>
<html>
...
...
HTML
HTML
 HTML
 HyperText Markup Language
 Bukan merupakan bahasa pemrograman.
– Tidak dapat digunakan untuk mendiskripsikan komputasi.
– Untuk mendiskripsikan layout dan form dokumen yang akan
ditampilkan oleh browser.
 Berupa “Content” dan “Control”
 Dokumen HTML adalah text-based yang
direpresentasikan melalui struktur susunan tree dari tag.
 Spesifikasi terkini: HTML 5.0
– Future : XHTML
 Standar dikelola oleh W3C.
– HTML, CSS, XML, XHTML, …
 HTML evolution
 HTML 1 [awal 90-an]
– Diperkenalkan oleh Tim Berners-Lee (CERN)
 Ditujukan sebagai format standar untuk
memfasilitasi kolaborasi antar fisikawan.
– Berbasis pada SGML framework
 Standar ISO (lama) untuk struktur documen
– Tag untuk paragraph, heading, list, dll.
 HTML menambahkan hyperlink, sehingga
menciptakan dokumen web
– Dirender pada prototipe formatter
 HTML evolution
 HTML+ [pertengahan 94]
– Didefinisikan oleh grup peneliti (kecil)
– Beberapa tag baru ditambahkan
 contoh, IMG untuk menempelkan imej pada
dokumen
– Banyak browser dibuat
 Browser text-based pertama (Lynx) dirilis 03/93
 Browser graphical pertama (Mosaic) dirilis 04/93
 Konferensi W3 pertama [5/94]
– HTML+ dipresentasikan
 HTML evolution
 HTML 2 [7/94 - 11/95]
– Banyak variasi untuk browser yang berbeda,
mis. Nescape dan IE.
– Perluasan penggunaan tag
 misal, form
– Tidak mendukung custom style
 misal, tanpa pewranaan (color)
 W3 consortium dibentuk [akhir 94]
– Misi: Open standard untuk web
 HTML evolution
 Netscape dibentuk [11/94]
– Menjadi penengah dalam memimpin pasar
 Dukungan home user
– Form menjadi standar de-facto
 menggunakan “Netscape proprietary tags”
– Sulit direplikasi ke browser lain
– Document direnderi dengan cara berbeda
 Tambahan stylistic tags
– misal, font color dan size, background, image alignment
 HTML evolution
 Draft HTML 3.0 diusulkan
– TErlalu banyak tambhan pada bahasa
 Table, math, footnote, dll
 Mendukung style sheet
– Browser sangat sulit untuk beradaptasi
 Setiap browser mengimplementasikan subset yang
berbeda
– Tetapi mengklaim mendukung standar
 Dan menambahkan tag baru…
 Standar dibatalkan
– Perubahan dimulai dari sini ….
 HTML evolution
 Microsoft memperkenalkan Internet explorer [8/95]
– Berkompetisi (war) dengan Netscape
– Mulai memperkenalkan tag sendiri
 misal, MARQUEE
 Memecah website menjadi halaman Microsoft dan Netscape.
– Banyak situs memiliki dua versi
 Microsoft memulai dukungan “interactive application
embedding” dengan ActiveX
– Netscape merespon dengan memunculkan teknologi Java
– Memulai dukungan JavaScript
 Microsoft memperkenalkan VBScript
 HTML evolution
 HTML 3.2 [1/97]
– Mengimplementasikan beberapa usulan HTML
3.0
 Secara mendasar mengambil beberapa fitur yang
banyak digunakan.
– Mendukung applet
– Memdukung scripting dan stylesheet
 HTML evolution
 HTML 4 [12/97]
– Banyak perubahan
 Dukungan Stylesheet
 Tag identifier attribute
 Internationalization dan bidirectional text
 Accessibility
 Frame dan inline frame
 <object> tag untuk multimedia dan embedded objects
– Diadaptasi oleh IE (pemimpin pasar)
 Netscape lambat mengadaptasi
 XML 1.0 standard [2/98]
 XHTML 1.0 [1/00, 8/02]
 Batasan HTML
 Tidak mendukung accessibility sampai HTML 4
 Tidak mendukung internationalization sampai HTML 4
 Tidak dynamic content pada definisi awal
 Tidak mendukung inherent untuk konfigurasi display
yang berbeda (misal., grayscale screen)
– Kecuali tag alt untuk imej
– Ditambahkan pada CSS2
 Tidak ada separasi data, struktur dan pemformatan
– Sampai versi 4
 Wireless Markup Language
(WML)
 Markup language untuk WAP browser
– WAP = Wireless Application Protocol
– Berbasis pada limited HTML, menggunakan notasi
XML
– Menggunakan WMLScript scripting language, berbasis
pada JavaScript
 Halaman disebut “deck”, ditampilkan pada
bagian tersendiri yang disebut “cards”
– Task digunakan untuk membentuk event
– Variable digunakan untuk mengelola state antar card
 HTML Tag
 Minimal Dokumen HTML (4 elemen dasar)
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>Hello World!
</body>
</html>

 Dokumen HTML berisi nested tag dan teks

– Start tag (<tag>) dan end tag (</tag>) adalah case-insensitive
dan membentuk single-rooted tree
– Beberapa start tag tidak membutuhkan end tag (mis., <p>, <br>)
– Tag memformat informasi, teks adalah konten aktual
– Spesifikasi HTML mendefinisikan valid tag dan konstrain pada
urutan dan nesting tag
 Attribute dan Value
 Tag dapat diparameterisasi dengan attribute
<html>
<head>
<title>Title</title>
</head>
<body BGCOLOR=black TEXT=white>
<p>Hello World!
</body>
</html>

 Attribute berupa pasangan name/value

– Attribute dapat tanpa value
 Attribute biasanya optional
– Spesifikasi HTML mendefinisikan valid attribute
 Elemen pada Head
 Elemen Optional
<html>
<head>
<title>Title</title>
<base href="..."> Path for relative URLs
<script>...</script> Embedded script program
<style>...</style> Cascading style sheet
<link...> File associations
<meta...> Document information
<meta Name=“B. Herry S” Content=“Modul 1”>
</head>
<body>
</body>
</html>
 Heading
 Bagian title/header
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
 Paragraph
 Control formatting
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>
Line 1<br>
Line 2
</p>
<p align=center>Paragraph (centered)</p>
<p align=right>Paragraph (left aligned)</p>
<pre>Pre-formatted text (spaces and line breaks
are preserved)</pre>
<hr>
</body>
</html>
 Logical Style Tag
 Mengubah style dari teks
<html>
<head>
<title>Title</title>
</head>
<body>
<em>Emphasis</em><br>
<strong>Strong</strong><br>
<cite>Citation</cite><br>
<code>Code</code><br>
</body>
</html>
 Physical Style Tag
 Mengubah physical
<html>
<head>
<title>Title</title>
</head>
<body>
<i>Italic</i><br>
<b>Bold</b><br>
<u>Underline</u><br>
<tt>Typewriter</tt><br>
A_i^j<br>
<font size="+3">Relative</font> size<br>
<font size=24>Absolute</font> size<br>
<font color=blue face="Helvetica,Arial">
Face/color</font>
</body>
</html>
 List
 numbered atau unnumbered list
<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<li>Apples
<li>Oranges
<li>Bananas
</ul>
<ol>
<li>First
<li>Second
<li>Third
</ol>
</body>
</html>
 Imej
 Menyisipkan imej pada dokumen HTML
(imej terpisah pada transaksi HTTP!)
<html>
<head>
<title>Title</title>
</head>
<body>
<p>This is a GIF image<br>
<img src="valid-html401.gif"
alt="Valid HTML 4.01!" height="31" width="88">
</body>
</html>
 Tabel
 membuat tabel dari row dan cell data/header
<html>
<head>
<title>Title</title>
</head>
<body>
<table border cellpadding=6>
<tr>
<th>1</th>
<td>2</td>
<td rowspan=2 colspan=2> 3,4,7,8</td>
</tr>
<tr>
<th>5</th>
<td>6</td>
</tr>
</table>
</body>
</html>

 Tabel dapat di-nested

 Link (Anchor)
 Teks dan imej dapat
digunakan sebagai link
<html>
<head>
<title>Title</title>
</head>
<body>
See <a href="1-9.html">previous</a> example<br>
See <a href="#bottom">part II</a><br>
...
<a name=bottom>Part II</a><br>
...
</body>
</html>
 Form
 Form memberikan kemampuan user untuk meng-input teks

<html>
<head><title>Title</title></head>
<body>
<form method=GET action="http://www.usd.ac.id ”>
<p>Name: <input type=text name=name>
<p>Sex:
<input type=radio name=sex value="M"> M
<input type=radio name=sex value="F"> F
<p>Marital status:
<input type=checkbox name=ms value="m"> Married
<input type=checkbox name=ms value="c"> Children

<p>Income:
<select name=income>
<option>Under $50k
<option>Over $50k
</select>
<p><input type=submit value="Validate">
</form>
</body>
</html>
<!-- Contoh GET request: "http://www.staff.usd.ac.id/cgi-bin/echo.pl?
name=Herry+Suharto&sex=M&ms=m&income=Over+%2450k" -->
 Text Input Fields
 Used when you want the  Output
user to type letters,
number, etc. First name:
<form> Last name:
First name: <input
type="text"
name="firstname">
<br>
Last name: <input
type="text"
name="lastname">
</form>
 Submission Button
 When user clicks on the  Output
“Submit” button, the
content of the form is
sent to another file. Username:
<form name="input"
action="html_form_action
.asp" method="get">
Username: <input
type="text"
name="user">
<br>
<input type="submit"
value="Submit">
</form>
 Checkboxes
 Used when you want the  Output
user to select one or more
options of a limited number
of choices. I have a bike
<form> I have a car
<input type="checkbox"
name="bike“
value=“bike”> I have a
bike
<br>
<input type="checkbox"
name="car“ value=“car”> I
have a car </form>
 Radio Buttons
 Used when you want the  Output
user to select one of a
limited number of choices.
Male
<form>
Female
<input type="radio"
name="sex"
value="male"> Male
<br>
<input type="radio"
name="sex"
value="female"> Female
</form>
 Text Box
 Used when you want to • Output
get input from user. •
<form> • Please provide your
<p>Please provide your suggestion in the text box
suggestion in the text box below:
below:</p>
•
<textarea row=“10”
cols=“30”>
</textarea>
</form>
 Pull-down Menu
 Used when you want user • Output
to respond with one •
specific answer with • Select a fruit:
choices you given.
•
<p>Select a fruit:</p>
<select name"Fruit">
<option selected> Apples
<option> Bananas
< option > Oranges
</select>