PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-

Presentasi berjudul: "PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-"— Transcript presentasi:

1 PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-

2 Agenda Pertemuan Sejarah dan perkembangan Web Konsep dasar internet
Konsep dasar WWW Istilah – istilah di internet Struktur dasar HTML Memformat dokumen HTML

3 Sejarah dan Perkembangan 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  generasi pertama web yang berfungsi sebagai pemberi informasi yang bersifat satu arah. Web 2.0  content tidak hanya dipegang oleh administrator sepenuhnya, namun pengunjung web dapat memberi andil pada content web dengan memberi comment, polling, foto dan lain sebagainya

4 Web 2.0 Arsitektur yang memampukan partisipasi
Mengumpulkan kekayaan intelektual bersama. Pengaruh jaringan menjadikan konten suatu web yang mulanya sedikit menjadi berlipat ganda dalam waktu singkat. . Sebelumnya konten web hanya menayangkan tanpa diikuti aplikasi yang memungkinkan pembaca secara langsung menanggapi dan menayangkan tanggapannya. Demikian pula halaman Web 1.0 tidak mengijinkan pembaca secara langsung menayangkan konten mereka sendiri. Pembaca yang menanggapi artikel dan menyumbangkan artikel tanpa harus tahu pemrograman HTML menjadikan semakin banyaknya konten yang bermanfaat jika dikumpulkan. Google, Yahoo, Flickr, Youtube, dan Wikipedia merupakan perusahaan-perusahaan yang awalnya kecil menjadi sangat besar dari mengumpulkan konten yang ada di internet. Ketika seseorang menayangkan artikel atau kontennya dan ditanggapi oleh orang lain yang juga mengakses konten, maka semakin banyak lalulintas pengakses. Hal itu terutama terjadi pada jaringan sosial seperti Facebook, Friendster, dan MySpace.

5 Konsep Dasar Internet Internet yang berasal dari kepanjangan Interconnected Network adalah sebuah sistem komunikasi global yang menghubungkan komputer - komputer dan jaringan - jaringan komputer di seluruh dunia Komputer yang terhubung menggunakan platform yang berbeda tetapi bekerja menggunakan protokol yang sama

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

7 Protokol HTTP (Hypertext Transfer Protocol), merupakan suatu protokol yang menentukan aturan yang perlu diikuti oleh Web Browser dalam meminta atau mengambil suatu dokumen dan oleh Web Server dalam menyediakan dokumen yang diminta web browser Protokol Transfer FTP (File Transfer Protocol), protokol ini untuk mengunduh (download) dan mengunggah (upload) suatu file di FTP server Telnet, protokol yang digunakan untuk login ke suatu server komputer

8 Protokol - Lanjutan Protokol Transfer
SSH (Secure Shell), didesain untuk menggantikan telnet dengan kelebihan dalam keamanan, beroperasi melalui TCP dan menyediakan autentifikasi dan komunikasi yang aman Gopher, protokol ini untuk mengakses server gopher yang menyediakan informasi dengan mengggunakan suatu sistem menu atau melalui hubungan ke telnet News (Network News Transfer Protocol ,

9 URL (Uniform Resource Locator)
URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu Web Server Terdiri atas : Protokol yang digunakan oleh suatu browser untuk mengambil informasi. Nama dari komputer dimana informasi tersebut tersedia. Path serta nama file dari suatu informasi.

10 DNS (Domain Names System)
DNS dapat diartikan sebagai format penamaan standar untuk mempermudah pengelolaan server komputer di internet Nama Domain Jenis Organisasi com Organisasi komersial edu, ac.id Lembaga Pendidikan gov, go.id Lembaga Pemerintah int Lembaga Internasional mil Organisasi militer net Provider internet org Organisasi umum

11 Konsep Dasar WWW World Wide Web merupakan suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan internet WWW atau secara singkat disebut web mulanya adalah aplikasi untuk menyimpan dan menampilkan teks. Pertama kali diperkenalkan dan dikembangkan oleh Tim Berners-Lee pada tahun 1989.

12 Konsep Kerja WWW request response

13 Cara kerja web (1) User memasukan URL dalam browser
Browser men-translate URL ke dalam IP address untuk dikoneksikan dengan server lewat TCP (Port 80:Http Service) connects to a computer with IP address port 80 Setelah terhubung, browser mengirim “Get Request” (Http Request) GET / HTTP/1.1

14 Cara kerja web (2) Server memberikan tanggapan dengan Http Response, memberitahukan browser type yang digunakan (html, text, image dll) File yang dipanggil dalam “file html” (inline files), misalkan file image tidak datang bersamaan dengan file htmlnya, browser melakukan get request lagi sebanyak inline files tersebut Browser melakukan “renders” dari file yang diterima untuk ditampilkan ke user Koneksi diputus saat saat pengiriman data selesai (“Done”)

15 Istilah – Istilah Internet
(Electronic Mail), merupakan salah satu aplikasi atau fasilitas yang mempunyai konsep yang sama dengan surat dalam bentuk kertas hanya saja untuk mengirimkannya tidak diperlukan layanan kantor Homepage, suatu web page pembuka pada website

16 Web Browser Adalah sebuah software Berjalan pada komputer user
Sebuah tool untuk melakukan navigasi di web Dan, menampilkan dokumen 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

17 Web server Adalah sebuah software Yang berjalan pada komputer server
Sebagai tempat menyimpan file-file dokumen web sehingga dapat diakses oleh 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

18 Web programming Command Gatway Interface (PERL, C)
Dieksekusi di web server, melakukan komunikasi dengan browser seperti http response Server Side Scripting (ASP, PHP) web server melakukan parse dan eksekusi sehingga script embedded dalam halaman web Client side scripting (JavaScript, JScript, VBScript) Web browser melakukan parse dan eksekusi sehingga script embedded dalam halaman web

19 HTML (Hypertext Markup Language)
Dokumen HTML merupakan sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung kode penanda yang disebut tag Tag HTML ini menggunakan simbol khusus untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan > Pada tag dimungkinkan untuk memiliki atribut Atribut : data yang terdapat pada tag

20 Struktur Dasar HTML Semua dokumen HTML terdiri dari dua bagian logikal, yaitu: bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML berisi informasi umum mengenai dokumen bagian badan (body) yaitu berisi dokumen yang sebenarnya Ekstensi dokumen HTML : .htm atau .html

21 Struktur Dasar HTML - lanjutan
<html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> Contoh Halaman Web

22 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 <p> teks </p> <br> <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 U. Abd. Rohim Pemrograman Internet I Pengenalan HTML

23 Daftar Tag <Body>
<p> Paragraf <b> <i> <u> <sup> <sub> Atribut <br> Ganti baris <font> Font <ul><li> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan) <table> Tabel <!-- --> Komentar <Pre> Format Text U. Abd. Rohim Pemrograman Internet I Pengenalan HTML

24 The BODY element bgcolor background text link vlink alink Id, Class
dll U. Abd. Rohim Pemrograman Internet I Pengenalan HTML

25 Color names and sRGB values
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" U. Abd. Rohim Pemrograman Internet I Pengenalan HTML

26 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 <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS"> U. Abd. Rohim Pemrograman Internet I Pengenalan HTML

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

28 Memformat Dokumen HTML
Memformat body Background Bgcolor Text Link Vlink Alink Membuat Heading, <H1> … <H6> Membuat paragraf, <p> </p> Membuat baris baru, <br>

29 Memformat Dokumen HTML - lanjutan
Teks Preformat, <pre> </pre> Memformat Bentuk Tulisan <B> Bold text <I> Italic text <U> Underscore <TT> Typewriter <S> Strikeout - draws a line through the text <BLINK> Text berkedip (lebih baik jangan digunakan) <CITE> Digunakan untuk quoting text <BIG> Ukuran teks akan lebih besar satu ukuran <SMALL> Ukuran teks akan lebih kecil satu ukuran <SUP> Membuat tekssuperscript <SUB> membuat tekssub script <ABBREV> Abbreviations <ACRONYM> Untuk akronim <PERSON> Digunakan untuk indexing <Q> Membuat short inline quotation <VAR> Membuat variable name, selalu dalam italics.