PEMROGRAMAN WEB (IS 222) - PERTEMUAN 1-

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

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

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.

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

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

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 ,

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.

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

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.

Konsep Kerja WWW request response

Cara kerja web (1) User memasukan URL dalam browser http://www.google.com 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 216.239.39.99 port 80 Setelah terhubung, browser mengirim “Get Request” (Http Request) GET / HTTP/1.1

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

Istilah – Istilah Internet E-mail (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

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

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

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

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

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

Struktur Dasar HTML - lanjutan <html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> Contoh Halaman 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 <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 info@abdrohim.com Pemrograman Internet I Pengenalan HTML

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 info@abdrohim.com Pemrograman Internet I Pengenalan HTML

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

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

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

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

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.