Lec8 Pengantar Teknologi Web

(1)

PENGANTAR TEKNOLOGI WEB

(2)

KONSEP dasar WEB

Web



Internet

 Internet adalah seluruh jaringan komputer yang

saling terhubung menggunakan standar sistem global TCP/IP sebagai protokol pertukaran paket (packet switching communication protocol) untuk melayani miliaran pengguna di seluruh dunia.

 Web adalah salah satu aplikasi yang berisikan

dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertext Transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser.

Perbedaan Utama : Internet adalah hardware; Web adalah software Banyak aplikasi berbasis internet diantaranya :

(3)

Lanjutan

Pengertian Situs Web

 Situs web merupakan kumpulan dari halaman web

yang sudah di publikasikan di jaringan internet dan memiliki domain/URL yang dapat di akses semua pengguna Internet dengan cara mengetikkan alamatnya.

HTTP

 HTTP (HyperTextTransfer Protocol) adalah protokol

yang dipergunakan untuk mentransfer dokumen dalam World Wide Web(WWW).

WWW

 World Wide Web adalah halaman-halaman website

(4)

PENGERTIAN URL dan URI

URL

 Uniform Resource Locator adalah rangkaian

karakter menurut suatu format standar tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet.

URI

 Uniform Resource Identifer adalah sebuah untaian

(5)

Perbedaan URL dan URI

 URL (Uniform Resource Locator)

 _{URL digunakan oleh sebuah browser untuk}

mengidentifkasi sumber daya yang ada di internet yang dituliskan dalam satu baris teks.

 _{URL merupakan bagian dari URI}

 _{URL menunjuk ke suatu halaman web yang}

menggunakan “scheme” tanpa menggunakan code fragment.

 _{Contoh :}

(6)

LANJUTAN

 URI (Uniform Resurce Identifer)

 _{URI digunakan browser untuk mengidentifkasi}

dokumen tunggal dan dituliskan dalam satu baris teks.

 _{URI digunakan untuk mengidentifkasi suatu}

resource dengan lokasi atau nama, ataupun

(7)

Konsep web statis dan dinamis

Web berdasarkan teknologinya terbagi menjadi dua, yaitu :

Web Statis

 Web Statis adalah jenis Website yang mana

penggunanya tidak bisa merubah kontent dari Web tersebut secara langsung menggunakan Browser.

 Interaksi yang terjadi antara pengguna (client) dan

server hanyalah seputar pemrosesan link saja.

Web Dinamis

 Web dinamis adalah jenis Website dengan interaksi

(8)

Jenis pemrograman web

Client Side Scripting

 Client Side Scripting adalah salah satu jenis bahasa

pemrograman web yang proses pengolahannya dilakukan di sisi client. Proses pengolahan client side scripting dilakukan oleh web browser sebagai clientnya.

 Contoh : HTML, XHTML, CSS, Javascript,

XML(Extensible Markup Language).

Server Side Scripting

 Server Side Scripting adalah bahasa pemrograman

web yang pengolahannya dilakukan di sisi server. Maksud server di sini adalah web server yang didalamnya telah mengintegrasikan komponen web engine.

 Contoh : ASP(Active Server Pages), PHP(Hypertext

(9)

Arsitektur aplikasi berbasis web Client

side scripting

Web Documents R

Request HTML Response

HTML

CLIENT

(10)

(11)

Komponen penyusun web Statis

 Bahasa Pemrograman (Client Side Scripting dan

Server Side Scripting).

 Web Editor digunakan untuk mengetikkan

perintah-perintah dokumen web. Dibagi menjadi 3 yaitu : Editor Teks (Notepad), Editor WYSIWYG (Dreamweaver), Editor berbasis template (Rapidweaver dan iweb).

 Web Browser merupakan program yang berfungsi

untuk menampilkan dokumen-dokumen web dalam format HTML. Ex: Google Chrome, Mozilla Firefox, IE, Opera, dll.

 Image editor adalah program aplikasi yang

(12)

Perkembangan web

 Web 1.0, yaitu _{teknologi Web generasi pertama yang}

merupakan revolusi baru di dunia Internet karena telah mengubah cara kerja dunia industri dan media.

Contoh : Situs berita "cnn.com" atau situs belanja "Bhinneka.com".

 Web 2.0, yaitu _{pertama kalinya diperkenalkan oleh}

O’Reilly Media pada tahun 2004 sebagai teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara online. Contoh : Situs jejaring sosial facebook.com

 Web 3.0, yaitu _{teknologi web lebih ke arah Web Cerdas}

atau Web dengan Engine Kecerdasan Buatan, yang lebih memudahkan user dalam berinteraksi. Contoh :

(13)

Kategori website

 Website Personal, yaitu situs yang digunakan untuk

menceritakan tentang biograf diri, pengalaman pribadi, dll. Contoh : Blog Pribadi.

 Website Komersial (Company Profle / Online Shop),

yaitu situs yang dipakai untuk menunjukkan produk dan jasa suatu perusahaan, atau juga dapat melakukan transaksi penjualan online (dengan sistem shopping cart system). Domain yang biasa digunakan .com, .co.id, dll.

 Website Instansi/Pemerintahan situs jenis ini hanya

boleh dipakai untuk keperluan website pemerintahan yang resmi. Domain untuk negara Indonesia menggunakan .go.id.

 Website Non-Proft, website jenis-jenis ini biasanya

(14)

Lanjutan Kategori Website



_{Search Engine:}

Google, Bing



_{Social Media:}

Facebook, Twitter, Plurk, Instagram



_{Cloak URL/Short URL:}

Adf.ly, Bit.ly, Short.us



_{Social Bookmark:}

Feedburner, Lintas.me



_{Web directory:}

Dmoz.org, AboutUs.org



_{Web Portal:}

 _News:_{Detik, Yahoo, Kompas, CNN}  _Game:_{Lytogame, Gemscool, Prodigy}



_{Online Store:}

Amazon, Bhinneka, FastnCheap

(15)

Pengertian Domain dan dns

 Domain dalam Internet adalah nama unik yang

diberikan untuk mengidentifkasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web. Contohnya uns.ac.id.

 Nama domain kadang-kadang disebut pula dengan

istilah URL, atau alamat website.

 Sistem Penamaan Domain (Domain Name System

(16)

Top level domain (TLD)

Aturan Penamaan domain diatur oleh Organisasi Pengatur

Domain IANA (Internet Assigned Numbers Authority). IANA

mengatur pemakaian ranah internet tingkat atas yang

disebut dengan istilah Top Level Domain (TLD). Berikut

adalah klasifkasi TLD.

 Country Code Top Level Domains (ccTLD)

Digunakan untuk kode negara atau wilayah. Berikut adalah beberapa contoh ccTLD.

 _{.id = Indonesia}  _{.my = Malaysia}  _{.sg = Singapura}  _{.uk = Inggris}

 _{.us = Amerika Serikat}  _{.jp = Jepang}

(17)

LANJUTAN

 Generic Top Level Domains (gTLD)

Dipergunakan oleh macam-macam organisasi. Berikut adalah pengelompokan gTLD menurut kepentingannya.

 _{.com = Komersial}  _{.net = Jaringan}

 _{.gov = Pemerintah (eksklusif untuk pemerintah}

Amerika Serikat)

 _{.mil = Militer (eksklusif untuk militer Amerika}

Serikat)

 _{.info = Informasi}

 _{.aero = Industri pesawat terbang}

 Infrastructure Top Level Domains

Satu-satunya yang diterima adalah .arpa. Sementara domain .root ada tapi tanpa kejelasan mengenai

untuk

(18)

gTld generasi baru

 _{TLD baru telah dirilis}

ke internet di tahun 2014 ini. Ada banyak gTLD baru yang

diluncurkan untuk

memberi kesempatan bagi siapapun untuk membuat identitas baru.

 _{Contoh gTLD}

(19)

(20)

Pengertian hosting

 Hosting _{adalah jasa layanan internet yang}

menyediakan sumber daya server-server untuk

disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL, atau DNS.

 Jenis Hosting:

 _{Shared hosting}_{adalah server hosting yang digunakan}

bersama-sama dengan pengguna lain, satu server dipergunakan oleh lebih dari satu nama domain.

 _VPS_{(Virtual Private Server) atau}_VPS_(Virtual

Dedicated Server) merupakan proses virtualisasi dari lingkungan software sistem operasi yang dipergunakan oleh server. Satu Dedicated Server dapat dibagi menjadi beberapa VPS kecil.

 _{Dedicated server}_{adalah penggunaan satu server utuh}

yang tidak dibagi dengan klien lainnya.

 _{Colocation server}_{adalah layanan penyewaan tempat}

(21)

web vs desktop

WEB DESKTOP

(22)

(23)

 Saat mengetik ‘http://www.google.com’ pada browser,

kira-kira apa yang terjadi di belakang layar?

(24)

 Komputer kita melakukan request, lalu menterjemahkan

‘nama’ yang kita ketik ke dalam alamat IP / IP address dari website tersebut (google.com)

 Karena pada akhirnya yang kita akses adalah mesin (server),

(25)

IP Address?



_{Urutan angka yang menjadi alamat}

tiap-tiap komputer / server / terminal yang

terhubung ke internet



_w.x.y.z



_{Maksimal berapa angka untuk tiap-tiap}

huruf?



_{255.255.255.255 (maksimal 256 angka}

untuk tiap huruf)



_{Berapa bit yang diperlukan untuk}

merepresentasikan IP?

(26)

IP Address?



_{Berapa maksimal IP yang bisa dibuat}

dengan 32bit?



_{+ 4 milyar}



_Cukup?



_{Tidak, tahun ini habis!!!}



_{32bit = IPv4}



_{Teknologi terbaru?}



_IPv6



_{128bit = 2}

128

(27)

(28)



Kita tau bahwa ketika kita mengakses sebuah

website, yang kita akses adalah alamat IP



Sekarang, komputer / browser tau dari mana jika

google.com

itu IP-nya

w.x.y.z

(29)

DNS Server?



_{Sebuah server yang dapat mengkonversi IP}

menjadi sebuah nama (nama domain)



_Kenapa?



_{Karena kita tidak mungkin menghafal alamat ip}



_{DNS server berisi tabel pasangan ip dan nama}

domain



_{Yang punya server siapa? Komputer kita?}



_Bukan



_{Pemilik DNS server : server lokal (kampus,}

(30)

DNS Server?



_{Kenapa banyak?}



_{Karena seluruh internet ini terhubung ke}

pusat, DNS server yang pertama kali

diakses adalah yang terdekat, jika di

dalamnya tidak ada data yang dicari,

maka akan mencari ke DNS server yang

lebih tinggi secara hirarki



_{Kampus – ISP – Perusahaan Domain – Root}

(31)

(32)



IP google sudah diketahui



IP sudah diterjemahkan menggunakan DNS Server



Sebelum halaman tampil, apa yang terjadi?



Komputer / browser mengirimkan request / pesan

terlebih dahulu



Pesan yang dikirimkan disebut

HTTP Header



Salah satu pesan pada header :

GET /

HTTP/1.1



Artinya : “komputer meminta (GET) isi dari path ‘/’

menggunakan protokol HTTP versi 1.1”



Bisa dilihat menggunakan

Google Developer Tools

(33)

(34)

Ilustrasinya



_{Komputer mengirimkan paket data /}

‘amplop’ virtual



_{Isi dari amplop adalah pesan}

_“

_{GET / HTTP/}

1.1 “ tadi



_{Di depan amplop berisi alamat tujuan (IP}

Google)



_{Di belakang amplop berisi alamat pengirim (IP}

(35)

Ilustrasinya

(36)



Apakah amplop tadi langsung sampai ke tujuan?



Tidak



Melalui perantara-perantara



Anggap saja perantara seperti kantor pos – kantor

pos



Yang disebut dengan

router



Banyak router yang dilalui, mungkin bisa sampai

puluhan



Kampus – ISP – Kota – Provinsi – Negara – Benua,

dll



Tau dari mana tiap-tiap router harus mengirimkan

data ke router mana?

(37)

(38)

(39)



Amplop sampai ke servernya google



Google membaca pesan di dalam amplop



Menuliskan pesan jawaban



Menukar alamat ‘dari’ dan ‘kepada’



Mengirim kembali ke alamat kita



Sampai ke komputer kita



Komputer kita membaca isi pesan yang berupa

halaman HTML



Menterjemahkan halaman tersebut menggunakan

(40)

(41)

(42)

Apa fungsi ‘/’ pada paket data yang dikirim oleh

browser saat melakukan permintaan

GET /

(43)



‘/’ artinya meminta alamat root pada server google



Root adalah folder utama yang ada pada web

server



Pada saat melakukan request, yang diminta adalah

file / halaman web, bukan folder



Lalu kenapa hanya ‘/’ saja, tidak ‘/sebuahfile.html’



Karena secara otomatis browser menganggap jika

kita mengakses sebuah folder tanpa nama file, yang

diakses adalah file index.html / index.php /

index.apapun



Alamat yang kita akses di browser tersebut

(44)

URL



_{Alamat dari sebuah}

_resource

_{yang dapat}

diakses di Internet.



_{Contoh penulisan alamat lengkap}



_{https://www.facebook.com/index.html}



_{http://www.uns.ac.id/index.php}



_{URL secara umum terdiri dari :}

 _{Jenis Protokol}

 _{Host Name / Sub-Domain Name}  _{Domain Name}

(45)

(46)



Bagaimana caranya agar website kita bisa diakses

seluruh dunia?



Apakah cukup dengan Laptop & akses internet?



Tidak



Kita butuh Web Server &

IP Publik



Yang punya IP Publik adalah ISP



IP yang ada di laptop/komputer kita adalah

IP

(47)



1 cara lain agar website kita bisa diakses seluruh

dunia?



Web Hosting



Qwords.com



Masterwebnet.com

(48)

Tugas : Individu



_{Anda diminta untuk menginstal aplikasi CMS}

(Wordpress, e-cart, moodle, joomla atau

sejenisnya) di komputer/laptop anda, dengan

sebelumnya anda install terlebih dulu:

 _{Web Server}

 _{Database Server}



_{Buat blog di UNS, kustom blog yang anda buat}

semenarik mungkin dan buatlah satu posting

original dengan tema tentang teknologi CMS

yang anda gunakan.

