Konsep Web dan Web Dinamis

Pemrograman Web
Konsep Web dan Web Dinamis
Gembong Edhi Setyawan, S.T.,M.T.
Sumber: http://resourceful.net
KONSEP WEB
Konsep Web
• Bagaimana sistem kerja web?
• Bagaimana menemukan dan mengambil
halaman web dari internet?
• Bagaimana data (halaman web) dikirimkan
melalui internet?
• Bagaimana tentang apa yang dilihat di
browser didefinisikan sebagai kumpulan data?
Client dan Server
Web adalah aplikasi client/server  web browser
adalah client yang mengirimkan permintaan ke web
server, kemudian web server mengirimkan tanggapan
untuk dikirimkan kembali ke client
Mengambil Halaman dari Internet
Internet terdiri dari kumpulan layer/lapisan,
dimana masing layer mempunyai fungsi khusus:
• Internet Layer  Menyampaikan paket ke
tujuan
• Transport Layer  Mengirimkan data
• Application Layer  Sebagai aplikasi layanan,
ex: web browser
Internet Protocol Layer
HTTP (Hypertext Transfer Protocol)
Menggunakan TCP untuk:
• Membuka koneksi antara client dan server
• Melewatkan permintaan dan tanggapan antara
client dan server
Ketika klik Link atau mengetik alamat URL:
• Koneksi TCP dibuka antara browser dan server
• Kemudian permintaan dan tanggapan dikirim bolakbalik menggunakan HTTP
/ response
HTTP
Hypertext Transfer Protocol
TCP
Transmission Control Protocol
IP
Internet Protocol
URL (Uniforms Resource Locators)
• Digunakan untuk mengidentifikasi halaman
web
• URL  Alamat Web
• URL memiliki 3 komponen:
– Prefix (http:// )
– Hostname: (www.ub.ac.id)
– Path: (seperti /ptiik/index.htm)
Contoh:
http://www.ub.ac.id/ptiik/index.htm
Path
Mengidentifikasi file dalam
struktur hierarki direktori di
Host name
server
Mengidentifikasi komputer di
internet
Prefix
Protokol transfer dibutuhkan
untuk meminta data dari
server
IP Address dan DNS
• Setiap komputer yang terkoneksi di internet harus
mempunyai alamat IP yang unik, tidak peduli client
atau server
• Alamat IP adalah nomor yang mengidentifikasi host
di internet. Contoh:
212.171.218.34 atau 144.214.5.218
• Domain Name System (DNS) adalah database nama
host yang sesuai alamat IP
Nama Domain
• Nama domain dan DNS digunakan untuk
menterjemahkan nama host menjadi alamat
IP
• Nama Domain  Unik
• Nama Domain diorganisir secara terstruktur
Top Level Domain
• www.nama.go.id
• www.nama.id
• www.nama.com
Top Level Domain
(TLD)
Dikelola negara:
.uk, .au, .hk, etc.
Generic Top Level Domain
(gTLD)
(.edu, .gov, .mil restricted to US only)
.com
.org
.net
.biz
.info
.name
.ws
.tv
Second Level Domain
• www.nama.go.id
• www.nama.id
• www.nama.com
Sebagai nama.
Berisi huruf
(a sampai z),
bilangan (0 to 9),
dashes ( - )
Third Level atau Sub Domain
• www.ptiik.ub.go.id
• www.simlitabmas.dikti.go.id
Menghubungkan Nama Domain dan
alamat IP
• Nama Domain setelah terdaftar, perlu dihubungkan dengan
alamat IP dari web server di internet
• Biasanya memasukkan minimal 2 nameserver
• Name Server adalah server internet khusus yang menerapkan
protokol layanan nama.
• Name Server disediakan oleh layanan web hosting atau
layanan pendaftaran domain
• Contoh Name Server:
ns0.directnic.com
ns1.directnic.com
WEB DINAMIS
Web dilihat dari Content/Isi
Dibedakan Menjadi:
• Web Statis
• Web Dinamis
Apa itu Web Statis?
• Content/Isi tidak berubah-ubah
• Pengaturan atau pemberharuan isi dilakukan secara
manual
• Pengguna tidak bisa mengubah content/isi
• Interaksi antara client dan server hanya berkaitan
dengan pemrosesan link.
• Tool yang digunakan untuk pengaturan/mengubah
web  Editor (text [notepad, Textedit], WYSIWYG
[macromedia dreamweaver, frontpage, dll])
Apa itu Web Dinamis?
• Content/Isi bisa berubah-ubah
• Perubahan tergantung dari
masukan/permintaan dari pengguna
• Halaman web merupakan hasil dari server
berdasarkan masukan/permintaan pengguna.
Artinya halaman web baru akan dibuat ketika
ada pengguna yang mengaksesnya.
Apa itu Web Dinamis?
• Halaman web dihasilkan berdasarkan program
yang dijalankan pada server side
– Browser mengirimkan permintaan HTTP Server
mendapatkan file yang diminta dengan
script/program  Server menjalankan
script/program dimana hasilnya berupa HTML
Server mengirimkan hasilnya ke browser/client
Kategori dalam Pemrograman Web
– Client – side Programming
•
•
•
•
HTML (HyperText Markup Language)
Java Script
VbScript
Flash
– Server – side Programming
•
•
•
•
ASP (Active Server Page)
JSP (Java Server Page)
CGI
PHP: Hypertext Prepocessor
Halaman Web Dinamis dibuat
menggunakan:
– Client – side Script yang tertanam dalam
HTML untuk diproses disisi client
– Server – side Program yang diproses pada sisi
server
– Perpaduan antara Client – side Script dan
Server – side Program
Client-side Dynamic Web
Embedding Interactive Content
Java Applets, ActiveX, .NET controls, Flash
Java Applets
 Program Java yang disatukan dengan dalam suatu file
HTML sehingga dapat dijalankan oleh browser
 Seperti program aplikasi namun tidak standalone
 Program dapat bereaksi dari masukan user dan dapat
berubah secara dinamis
 Pada applet, Java interpreter di-built pada browser
(java plug-in)
ActiveX Controls
 Teknologi berbasis pada arsitektur Microsoft
Component Object Model (COM)
 Digunakan untuk membuat komponen agar terdapat
interaksi dihalaman web  Internet Explorer
 Contoh : Memutar musik online, menampilkan
animasi, membuka dokumen pdf, dll
.NET Controls




Hampir sama dengan ActiveX Controls
Berbasis pada Microsoft .NET framework
Bisa multiplatform
Dapat dikembangkan dengan berbagai bahasa
FLASH





Teknologi animasi web
Dulunya Macromedia flash sekarang Adobe flash
Format flash: SWF
Untuk menjalankan di browser terdapat plugin
Dapat membuat website, cd-interaktif, animasi web, animasi
kartun, kartu elektronik, iklan TV, banner di web, presentasi
cantik, membuat permainan (game), aplikasi web dan
handphone
 Software: Adobe flash, SwishMax, Vecta 3D, Swift 3D, Amara,
Kool Moves, dll
Java Script
 dikembangkan oleh Brendan Eich dari Netscape dibawah
nama Mocha, yang nantinya namanya diganti
menjadiLiveScript, dan akhirnya menjadi JavaScript
 JavaScript and Java (similar syntax)
 JavaScript dapat ditulis di HTML atau ditulis dengan file
eksternal
 Contoh JavaScript: efek rollover baik di gambar maupun teks
Server-side Dynamic Web
Client dan Server Model
Web adalah aplikasi client/server  web browser
adalah client yang mengirimkan permintaan ke web
server, kemudian web server mengirimkan tanggapan
untuk dikirimkan kembali ke client
CGI (Common Gateway Interface)
 Interface yang dirancang untuk melakukan standardisasi
transfer data antara web server dan aplikasi
 Web server biasanya menggunakan aplikasi CGI untuk
menerima dan memproses informasi dari user
 Contoh: sebuah form yang disampai kan oleh user ke web
server akan melewati aplikasi CGI untuk pemrosesan
selanjutnya
Request
Server
HTML
Input/
Output
CGI Program
Tugas 2
•
•
•
•
Buatlah domain dan hosting
Integrasikan domain dengan hosting yang Anda buat
Install CMS, misal Wordpress
Kirimkan hasilnya ke email:
[email protected].
• Subject: Pemrograman Web-Tugas 2
• Isi Email: NIM, Nama dan domain.
• Waktu : 2 minggu.
감사합니 Grazias
Kiitos
다Danke Gratias
Terima
Kasih
‫ﺷﻜﺮﺍﹰ‬
谢谢
Merci
धन्यवाद
Thank You
ありがとうございます