Pemrograman Berbasis WEBDasar-dasar Web dan HTML

-Aurelio Rahmadian-

ObjektifKonsep Dasar WebArsitektur WebHTTPWeb Server SoftwareHTMLKomponen Dasar Teknologi WebTransformasi Web

Konsep Dasar WebSejarah WebDitemukan oleh Tim Berners-LeeKonsep 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 WebInternetInterconnected 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 WebInternet vs IntranetInternet

◦Global, open, public◦Disebut juga “extranet” untuk

membedakannya dari IntranetIntranet

◦Jaringan pribadi untuk digunakan secara eksklusif oleh sebuah organisasi

◦Umumnya berada di belakang firewall

Konsep Dasar WebLAN

Konsep Dasar WebWAN

Konsep Dasar WebInternet

Konsep Dasar WebInternet vs WebInternet menyediakan

infrastruktur dari transmisi informasi melalui jaringan

Web berisi interlinked information (web pages)

Arsitektur Web

Arsitektur Web

Arsitektur WebSistem 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 WebClient

◦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 WebServer

◦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 servers : server yang menyediakan layanan web

◦Web site = host + Web server + information (file system)

Arsitektur WebURL (Uniform/Universal Resource

Locator)◦URL adalah sistem pengalamatan file

yang digunakan di internet◦Format URL standar dideskripsikan di

RFC 1738

Arsitektur Web URL’s notation

scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]

◦ Scheme - protocol to be used◦ Host - name or IP address for the web server being accessed.◦ port# - (optional)◦ Path - file system path from the ‘root’ directory of the server to

the desired document◦ url-params - this is for session identifiers in web servers

supporting the Java Servlet API◦ query-string - contains other dynamic parameters associated

with the request◦ anchor - a reference to a positional marker within the requested

document, like a bookmark

Arsitektur Webhttp://www.mywebsite.com/sj/test;id=8079?name=sviergn&x=true#stuff

SCHEME = httpHOST = www.mywebsite.comPATH = /sj/testURL PARAMS = id=8079QUERY STRING = name=sviergn&x=trueANCHOR = stuff

HTTPHTTP (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

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 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)

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

HTTPSejarahProtokol 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 tipe-tipe 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

HTTPHTTP 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

HTTPHTTP Proxy

HTTPContoh Transaksi

◦S = ServerC = Client

◦C : (Inisialisasi koneksi)C : GET /index.htm HTTP/1.1C : Host: www.wikipedia.orgS : 200 OKS : Mime-type: text/htmlS :S : -- data dokumen --S : (close connection)

HTTPStatus 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

Web Server Software

XAMPP is a free software package containing the Apache HTTP Server, MySQL database and necessary tools to use the PHP and Perl programming languages

The program is released under the GNU General Public License and serves as a free, easy-to-use web server, capable of serving dynamic pages. Currently, XAMPP is available for Windows, Linux, Sun Solaris and Mac OS X (the X in its name could stand for any one of these operating systems)

Web Server SoftwareXAMPP is widely named the "lazy man's

WAMP/LAMP installation," as it only requires one zip, tar, or exe file to be downloaded and run, and very little configuration of the various components that make up the web server is required

XAMPP is regularly updated to incorporate the latest releases of Apache/MySQL/PHP and Perl. It also comes with a number of other modules, including Open SSL and phpMyAdmin

HTMLAdalah 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)

HTMLHTML 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:<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>

Hasil tampilan:Hello world!Welcome to my first HTML page.

HTML28 Oktober 2014, W3C dan Web

Hypertext Application Technology Working Group (WHATWG) merilis standar HTML revisi ke-5 yang disebut HTML5

Komponen Dasar Teknologi WebHTML

◦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 WebA 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

Tugas 1 (Perorangan)Membuat tutorial instalasi software web

serverBerikan tampilan screenshot dan

penjelasan proses instalasiTugas dikirim ke

aurelio.rahmadian@gmail.com, diterima paling lambat Rabu, 18 Maret 2015 pukul 23.59

Plagiarisme dan keterlambatan berakibat pengurangan nilai atau tidak diterimanya tugas