PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-

PEMROGRAMAN WEB (IS 222)- PERTEMUAN 1-

Agenda Pertemuan • Sejarahdanperkembangan Web • Konsepdasar internet • Konsepdasar WWW • Istilah – istilahdi internet • Strukturdasar HTML • Memformatdokumen HTML

SejarahdanPerkembangan Web • ARPAnet (US Defense Advanced Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat • Web 1.0  generasipertama web yang berfungsisebagaipemberiinformasi yang bersifatsatuarah. • Web 2.0 content tidakhanyadipegangoleh administrator sepenuhnya, namunpengunjung web dapatmemberiandilpada content web denganmemberi comment, polling, fotodan lain sebagainya

Web 2.0 • Arsitektur yang memampukanpartisipasi • Mengumpulkankekayaanintelektualbersama. • Pengaruhjaringanmenjadikankontensuatu web yang mulanyasedikitmenjadiberlipatgandadalamwaktusingkat.

KonsepDasar Internet • Internet yang berasaldarikepanjanganInterconnected Networkadalahsebuahsistemkomunikasi global yang menghubungkankomputer - komputerdanjaringan - jaringankomputerdiseluruhdunia • Komputer yang terhubungmenggunakan platform yang berbedatetapibekerjamenggunakanprotokol yang sama

Layanan Internet • World wide web (HTTP) • E-mail (POP, SMTP, IMAP) • Chat (IRC) • File transfer (FTP) • Remote access (telnet) • VoIP, etc.

Protokol • HTTP (Hypertext Transfer Protocol), merupakansuatuprotokol yang menentukanaturan yang perludiikutioleh Web Browser dalammemintaataumengambilsuatudokumendanoleh Web Server dalammenyediakandokumen yang diminta web browser • Protokol Transfer • FTP (File Transfer Protocol), protokoliniuntukmengunduh (download) danmengunggah (upload) suatu file di FTP server • Telnet,protokol yang digunakanuntuk login kesuatu server komputer

Protokol - Lanjutan • Protokol Transfer • SSH (Secure Shell), didesainuntukmenggantikan telnet dengankelebihandalamkeamanan, beroperasimelalui TCP danmenyediakanautentifikasidankomunikasi yang aman • Gopher, protokoliniuntukmengakses server gopher yang menyediakaninformasidenganmengggunakansuatusistem menu ataumelaluihubunganke telnet • News (Network News Transfer Protocol ,

URL (Uniform Resource Locator) • URL adalahsuatusarana yang digunakanuntukmenentukanlokasiinformasipadasuatu Web Server • Terdiriatas : • Protokol yang digunakanolehsuatu browser untukmengambilinformasi. • Namadarikomputerdimanainformasitersebuttersedia. • Path serta nama file dari suatu informasi.

DNS (Domain Names System) • DNS dapatdiartikansebagai format penamaanstandaruntukmempermudahpengelolaan server komputerdi internet

KonsepDasar WWW • World Wide Web merupakansuatukumpulaninformasipadabeberapa server komputer yang terhubungsatusamalaindalamjaringan internet • WWW atausecarasingkatdisebut web mulanyaadalahaplikasiuntukmenyimpandanmenampilkanteks. Pertama kali diperkenalkandandikembangkanoleh Tim Berners-Lee padatahun 1989.

KonsepKerja WWW request response

Cara kerja web (1) • User memasukan URL dalam browser http://www.google.com • Browser men-translate URL kedalam IP address untukdikoneksikandengan server lewat TCP (Port 80:Http Service) connects to a computer with IP address 216.239.39.99 port 80 • Setelahterhubung, browser mengirim “Get Request” (Http Request) GET / HTTP/1.1

Cara kerja web (2) • Server memberikantanggapandengan Http Response, memberitahukan browser type yang digunakan (html, text, image dll) • File yang dipanggildalam “file html” (inline files), misalkan file image tidakdatangbersamaandengan file htmlnya, browser melakukan get request lagisebanyak inline files tersebut • Browser melakukan “renders” dari file yang diterimauntukditampilkanke user • Koneksidiputussaatsaatpengiriman data selesai (“Done”)

Istilah – Istilah Internet • E-mail (Electronic Mail), merupakansalahsatuaplikasiataufasilitas yang mempunyaikonsep yang samadengansuratdalambentukkertashanyasajauntukmengirimkannyatidakdiperlukanlayanankantor • Homepage, suatu web page pembukapada website

Web Browser • Adalahsebuah software • Berjalanpadakomputer user • Sebuah tool untukmelakukannavigasidi web • Dan, menampilkandokumen web Beberapa Web Browser: • MS Internet Explorer, runs on Windows platform • Netscape Navigator/Communicator, runs on multi platform • Opera, runs on multi platform • Konqueror, runs on Linux platform • lynx (text based), runs on Linux platform

Web server • Adalahsebuah software • Yang berjalanpadakomputer server • Sebagaitempatmenyimpan file-file dokumen web sehinggadapatdiaksesoleh internet users Beberapa Web Server: • Apache, runs on multi platform (best on Linux) • MS Internet Information Server (IIS), runs on Windows platform • Tomcat (for java), runs on multi platform

Web programming • Command Gatway Interface (PERL, C) Dieksekusidi web server, melakukankomunikasidengan browser seperti http response • Server Side Scripting (ASP, PHP) web server melakukanparsedaneksekusisehingga script embeddeddalamhalaman web • Client side scripting (JavaScript, JScript, VBScript) Web browser melakukanparsedaneksekusisehingga script embeddeddalamhalaman web

HTML (Hypertext Markup Language) • Dokumen HTML merupakansebuahdokumenteksbiasadandisebutsebagaiMarkup Languageyaknibahasa yang mengandungkodepenanda yang disebut tag • Tag HTML inimenggunakansimbolkhususuntukmenandakansuatukodeinstruksi, simboliniadalahkurungsiku, < dan > • Pada tag dimungkinkanuntukmemilikiatribut

StrukturDasar HTML • Semuadokumen HTML terdiridariduabagianlogikal, yaitu: • bagiankepala (head). Secaraumum, bagiankepaladaridokumen HTML berisiinformasiumummengenaidokumen • bagianbadan (body) yaituberisidokumen yang sebenarnya • Ekstensidokumen HTML : .htmatau .html

StrukturDasar HTML - lanjutan <html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> ContohHalaman Web

Penulisan Tag • Tag dibentuk oleh suatu kata ( keyword) yang diapit oleh tanda kurung lancip (<tag>) • Tag boleh ditulis dalam huruf kecil maupun kapital • Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal teks <hr> • Di antara tag awal dan tag akhir bisa terdapat tag lain • Penulisan Tag tidak boleh tumpang tindih <tag1><tag2> teks </tag1></tag2> -> penulisan yang salah < tag1><tag2> teks </tag2></tag1> -> penulisan yang benar Pemrograman Internet I Pengenalan HTML

Daftar Tag <Body> Paragraf Atribut Gantibaris Font <ul><li> Enumerasi <hr> Garismendatar <img> Gambar <a> Link (kaitan) <table> Tabel  Komentar <Pre> Format Text Pemrograman Internet I Pengenalan HTML

The BODY element • bgcolor • background • text • link • vlink • alink • Id, Class • dll Pemrograman Internet I Pengenalan HTML

Black = "#000000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Maroon = "#800000" Red = "#FF0000" Purple = "#800080" Fuchsia = "#FF00FF" Green = "#008000" Lime = "#00FF00" Olive = "#808000" Yellow = "#FFFF00" Navy = "#000080" Blue = "#0000FF" Teal = "#008080" Aqua = "#00FFFF" Color names and sRGB values Pemrograman Internet I Pengenalan HTML

FONTS • Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U • Font modifier elements: FONT and BASEFONT • Size {1 – 7} dapat bernilai Negatif (-2) • Color • Face Pemrograman Internet I Pengenalan HTML

List • Bentuk • ORDERED lists (daftar berurutan) • UNORDERED lists (daftar tak berurutan). • Definition list • Perintah • UL, OL, LI • DL, DT, DD Pemrograman Internet I Pengenalan HTML

MemformatDokumen HTML • Memformat body • Background • Bgcolor • Text • Link • Vlink • Alink • Membuat Heading, <H1> … <H6> • Membuatparagraf, • Membuatbarisbaru,

MemformatDokumen HTML- lanjutan • Teks Preformat, <pre> </pre> • Memformat Bentuk Tulisan

PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-