PEMROGRAMAN WEB

Minggu 1
 Konsep Pemrograman WEB

Pemrograman web diambil dari 2 suku kata yaitu

pemrograman dan web.
• Pemrograman : proses menulis, menguji dan
memperbaiki (debug), serta memelihara kode yang
membangun sebuah program komputer. Kode ini
ditulis dalam berbagai bahasa pemrograman.
• Web : suatu ruang informasi di mana sumber-
sumber daya yang berguna diidentifikasi oleh
pengenal global yang disebut Uniform Resource
Identifier (URI).
 Konsep Pemrograman WEB
Pemrograman Berbasis Web.
• Pemrograman : suatu kegiatan/cara membuat
program
• Berbasis : dasar
• Web : situs yang diakses di internet.
• Kesimpulannya : adalah suatu kegiatan/cara
membuat program yang menghasilkan program
yang dasarnya seperti situs yang diakses di internet
sehingga untuk mengakses/ membukanya harus
menggunakan web browser (contoh:
InternetExplorer, Mozilla, Opera, Safari dan lain2)
Konsep Pemrograman WEB
1. World Wide Web adalah bagian
dari internet. Web terdiri dari
sekumpulan besar dokumen yang
disimpan di komputer di seluruh
dunia. World Wide Web juga disebut
web. WWW atau W3
2. Web Page : adalah dokumen di
web yang dapat menyertakan teks,
suara gambar dan video
3. Web Site: Situs web yang
merupakan kumpulan halaman web
yang dikelola oleh perguruan tinggi,
lembaga pemerintah, perusahaan,
atau individu
4. Web Server adalah komputer
yang terhubung ke internet yang
membuat halaman web tersedia
untuk dunia
 Konsep Dasar WEB
• World Wide Web adalah layanan internet yang
paling populer saat ini
• Internet mulai dikenal dan digunakan secara luas
setelah adanya layanan WWW
• WWW adalah halaman-halaman website yang
dapat saling terkoneksi satu dengan lainnya
(hyperlink) yang membentuk samudra belantara
informasi
• Web : jaringan komputer yang terdiri dari kumpulan
situs internet yang menawarkan teks, grafik dan
suara serta sumber daya animasi melalui protokol
transfer hypertext.
(http://www.artikata.com/arti‐201588‐web.php)
 Konsep Dasar WEB
• Hiperteks dilihat dengan sebuah program bernama
browser web yang mengambil informasi (disebut
"dokumen" atau “halaman web") dari server web
dan menampilkannya, biasanya di sebuah monitor.
Lalu dapat mengikuti pranala di setiap halaman
untuk pindah ke dokumen lain atau bahkan
mengirim informasi kembali ke server untuk
berinteraksi. Ini disebut "surfing" atau "berselancar"
. Halaman web biasanya diatur dalam koleksi
material yang berkaitan yang disebut “situs web".
 Konsep Dasar WEB

• WWW berjalan dengan protokol HyperText Transfer

Protokol
• Sintaks HTML mampu memuat konten text, gambar,
audio, video dan animasi
• Halaman Web merupakan file teks murni (plain text)
yang berisi sintaks‐sintaks HTML yang dapat
dibuka/dilihat/ diterjemahkan dengan Internet
Browser
 Konsep Dasar WEB

• Selain Aplikasi Berbasis Web juga dikenal Aplikasi

Berbasis Desktop, perbandingannya diantaranya:

WEB DESKTOP
Intepreter Compiler
Markup Script
Browser Exe File
 Keunggulan Aplikasi Berbasis Desktop

• Dapat berjalan dengan independen, tanpa perlu

menggunakan browser.
• Tidak perlu koneksi internet, karena semua file yang
diperlukan untuk menjalankan aplikasi sudah
terinstall sebelumnya.
• Dapat dengan mudah memodifikasi settingan.
• Prosesnya lebih cepat.
 Kekurangan Aplikasi Berbasis Desktop

• Apabila akan menjalankan aplikasi, harus diinstal

terlebih dahulu di komputer.
• Bermasalah dengan lisensi. Hal ini membutuhkan
lisensi yang banyak pada setiap computer
• Aplikasi tidak dapat dibuka di computer lain, jika
belum diinstall
• Biasanya memerlukan hardware dengan spesifikasi
tinggi.
 Keunggulan Aplikasi Berbasis web
• Informasi mudah diakses ; aplikasi berbasis web dapat
diakses dimanapun kapanpun
• Tidak memerlukan lisensi ketika menggunakan
webbased application.
• Dapat dijalankan di system operasi manapun.
• Dapat diakses lewat banyak media (umumnya sudah
tersedia di PC, PDA, dan handphone terbaru) hanya
dapat menggunakan web browser, tidak perlu
menginstall aplikasi client khusus
• Tidak perlu spesifikasi computer yang tingggi, karena di
beberapa kasus, sebagian besar proses dilakukan di web
server penyedia aplikasi berbasis web ini.
 Kekurangan Aplikasi Berbasis web
• Butuh koneksi intranet dan internet yang handal dan
stabil, hal ini bertujuan agar pada saat aplikasi
dijalankan akan berjalan dengan baik dan lancer.
• Dibutuhkan system keamanan yang baik dikarenakan
aplikasi dijalankan secara terpusat, sehingga apabila
server di pusat down maka system aplikasi tidak bias
berjalan.
• Antarmuka yang dapat dibuat terbatas sesuai spesifikasi
standar untuk membuat dokumen web dan keterbatasan
kemampuan web browser untuk menampilkannya
 Konsep Dasar Internet
• INTERnational NETworking
Merupakan 2 komputer atau lebih yang saling berhubungan
membentuk jaringan komputer hingga meliputi jutaan
komputer di dunia (internasional), yang saling berinteraksi dan
bertukar informasi.
• INTERconnected NETworking
Sebuah sistem komunikasi global yang menghubungkan
komputer-komputer dan jaringan-jaringan komputer di seluruh
dunia.
• Adalah kumpulan dari berbagai jaringan komputer yang saling
interkoneksi yang mencakup seluruh dunia (jaringan global)
dengan melalui jalur telekomunikasi seperti telepon, fiber-optic,
wireless dan lainnya
 Konsep Dasar 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.
 Kini internet identik dengan web, karena kepopuleran web
sebagai standar interface pada lanyanan yang ada di internet,
dari awalnya sebagai penyedia informasi, ini digunakan juga
untuk komunikasi dari email sampai dengan chatting, sampai
dengan melakukan transaksi ecommerce (Betha Sidik)
 Konsep Pemrograman Internet
• Pemrograman Internet: pemrograman aplikasi berbasis
internet (aplikasi internet)
• Aplikasi internet merupakan suatu jenis aplikasi yang
menerapkan arsitektur sistem terdistribusi dengan
menggunakan internet sebagai media komunikasi antar
komponen
• Komunikasi menggunakan Protokol.
• Protokol: aturan yang disepakati client dan server
mengenai bagaimana cara berkomunikasi
• Protokol aplikasi (tergantung aplikasi) : client dan
server saling berbalas pesan dalam format/sintaks
dan urutan tertentu
• Protokol transmisi (TCP/IP)
 Konsep Pemrograman Internet
Contoh Aplikasi berbasis Internet (Layanan Internet)
•Web (protocol aplikasi: HTTP)
•E‐mail (IMAP, POP, SMTP)
•Chatting
•File transfer (FTP)
•Remote terminal (telnet)
•Directory service (LDAP)
•Network monitoring (NMAP)
•Web service (SOAP)
•Voice (VoIP)
 Konsep Pemrograman Internet
 Web  Internet
 Perbedaan utama :
Internet adalah hardware;

Web adalah software

 Berbasis Internet Vs Berbasis Web
Aplikasi berbasis Internet
• Protokol aplikasi yang sudah ada atau mendefinisikan
protokol sendiri
• Aplikasi disisi server berkomunikasi langsung dengan client
• Aplikasi disisi client dapat berupa aplikasi yang berdiri sendiri
atau ditempelkan dalam aplikasi lain

• Aplikasi berbasis Web

• Menggunakan protokol HTTP
• Aplikasi disisi server berkomunikasi dengan client melalui web
server
• Aplikasi disisi client umumnya berupa web browser
 Berbasis Internet Vs Berbasis Web

Aplikasi berbasis Web (client/server‐side script)

berjalan diatas
Aplikasi berbasis Internet (web client/server software)
 Konsep Pemrograman Web
Pemrograman web: membuat aplikasi berbasis web
Aplikasi berbasis web: Aplikasi yang dibuat dengan memanfaatkan
mekanisme dan aplikasi yang sudah ada pada sistem web (WWW)
Sistem web sebenarnya merupakan aplikasi yang:
• Berarsitektur client-server
 Software web browser di sisi client
 Software web server di sisi server
• Menggunakan protokol HTTP dalam komunikasi antara client
dan server
• Mempunyai fungsi utk mengambil/menjalankan isi file dokumen
web di server &menampilkannya di sisi client
 Konsep Pemrograman Web
Membuat aplikasi berbasis web berarti:
• Memperkaya fungsi web server dengan cara
menambahkan program pada dokumen web yang akan
dieksekusi oleh server ketika file dokumen web tersebut
diakses oleh web server
Misalnya, program yang mengambil data ke basis data
untuk ditampilkan ke web browser
• Memperkaya interaktivitas dokumen dengan cara
menambahkan program pada dokumen web yang akan
dieksekusi oleh web browser ketika file dokumen tersebut
ditampilkan oleh web browser
Misalnya, program yang memvalidasi data masukan
pada form sebelum disubmit ke web server
Konsep Pemrograman Web
Konsep Pemrograman Web
Konsep Pemrograman Web
 Cara Kerja Web

•user mengetikURL dibrowser

•browser menghubungi server yang tersebut pada URL
•setelah terhubung, browser mengirimkan HTTP request
•server menjawab dengan mengirim HTTP response (berisi
header danisi dokumen)
•untuk dokumen yang terdiri atas beberapa file (misalnya
dokumen bergambar), browser harus mengirimkan HTTP request
lagi untuk setiap file
•browser menampilkan semua isi dokumen kepada user
 Yang Perlu Dipelajari Untuk Membuat
Aplikasi Berbasis Web
Di sisi client:
 Sintaks pembuatan dokumen web (HTML & CSS)
 Client side scripting (JavaScript)
Di sisi server
 Mekanisme pemanggilan program dan pengambilan
output program oleh web server (CGI)
 Server side scripting (PHP, JSP, ASP, dll.)
Penghubung
 Sintaks pengalamatan dokumen web (URL)
 Protokol komunikasi (HTTP)
 Teknologi Pembangun Aplikasi
Berbasis Web
• Web client (web browser) dan Web server
• URL : Uniform Resource Locator
• HTTP : HyperTextTransfer Protocol
• HTML : HyperTextMarkup Language
• CSS : Cascading Style Sheet
• PemrogramanWeb
• CGI, eksekusi program disisi server
• server side scripting
• client side scripting
• –plug‐in, eksekusi program disisi client
 Teknologi Pembangun Aplikasi
Berbasis Web
1. Web client (web browser)
• merupakan suatu software
• Dijalankan pada komputer user
• Sebuah perangkat navigasi di dalam web
• Menampilkan dokument web
• Perangkat lunak web browser yang popular
MS Internet Explorer (Windows), Netscape
Navigator Communicator (Windows & Linux)
Mozilla Firefox (Windows & Linux)
Opera (Windows & Linux), Konqueror (Linux)
lynx, berbasis text (Linux)
Teknologi Pembangun Aplikasi
Berbasis Web
Teknologi Pembangun Aplikasi
Berbasis Web

Web Client (Browser)

Web
 Teknologi Pembangun Aplikasi
Berbasis Web
2. Web Server
•Merupakan suatu software
•Dijalankan pada komputer server
•Berfungsi agar dokumen web yang disimpan
diserver, dapat diakses oleh user di internet
•Perangkat lunak web server yang populer saat ini
‐ Apache (Linux & Windows)
‐ MS Internet Information Server/IIS (Windows)
‐ Tamcat untuk Java (Linux & Windows)
 Teknologi Pembangun Aplikasi
Berbasis Web

3.URL Uniform/Universal Resource Locator

 Uniform Resource Locator adalah rangkaian karakter
menurut suatu format standar tertentu, yang digunakan
untuk menunjukkan alamat suatu sumber seperti dokumen
dan gambar di Internet.
 URL digunakan oleh sebuah browser untuk mengidentifikasi
sumber daya yang ada di internet yang dituliskan dalam
satu baris teks.
 Teknologi Pembangun Aplikasi
Berbasis Web
3.URL Uniform/Universal Resource Locator
 digunakan untuk menentukan lokasi informasi pada suatu
web server, dapat diibaratkan sebagai suatu alamat, yang
terdiri dari:
• Protokol yang digunakan oleh suatu browser untuk
mengambil informasi
• Nama komputer (server) dimana informasi tersebut
berada
• Jalur/path serta nama file dari suatu informasi
 Teknologi Pembangun Aplikasi
Berbasis Web
3.URL Uniform/Universal Resource Locator
 URL merupakan bagian dari URI
 URL menunjuk ke suatu halaman web yang menggunakan
“scheme” tanpa menggunakan code fragment.
 Contoh : http://amikom.ac.id/profile.html
• URL kadang disebut Alamat internet atau alamat sebuah web
• URL adalah sistem pengalamatan file yang digunakan di
internet
• Format URL standar dideskripsikan di RFC 1738
(hhtp://www.ietf.org/rfc1738.txt)
 Teknologi Pembangun Aplikasi
Berbasis Web

• Contoh alamat URL :

- http://www.if.itb.ac.id/
‐ mailto:elfan@informatika.org
‐ ftp://ftp.informatika.org/
‐ http://www.dikmenjur.net/
 Teknologi Pembangun Aplikasi
Berbasis Web
• Alamat URL yang digunakan dalam web : Alamat
diawali dengan http://, diikuti nama domain dan
informasi direktori
• Contoh alamat URL untuk Web
http://www.itb.ac.id/campus_life/index.html
http://www.google.com/search?hl=en&g=URL+RFC
http://www.indymedia.org/
 Teknologi Pembangun Aplikasi
Berbasis Web
URI (Uniform Resurce Identifier)
 Uniform Resource Identifier adalah sebuah untaian
karakter yang digunakan untuk mengidentifikasi
nama, sumber, atau layanan di Internet.
 URI digunakan browser untuk mengidentifikasi
dokumen tunggal dan dituliskan dalam satu baris
teks.
 URI digunakan untuk mengidentifikasi suatu
resource dengan lokasi atau nama, ataupun
keduanya.
 URI menunjuk ke suatu halaman web, termasuk
lokasi code fragmentnya (apabila ada) dan “scheme”.
Teknologi Pembangun Aplikasi Berbasis
Web
• Domain Adalah suatu sistem penamaan standar
komputer-komputer di internet dengan tujuan untuk
mempermudah pengelolaan server komputer internet.
• Merupakan suatu tingkat-tingkat domain, yang
merupakan kelompok komputer-komputer yang
terhubung ke internet.
 Domain dalam Internet adalah nama unik yang diberikan
untuk mengidentifikasi 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
gunadarma.ac.id.
Teknologi Pembangun Aplikasi Berbasis
Web
 Nama domain kadang-kadang disebut pula dengan
istilah URL, atau alamat website.
 Sistem Penamaan Domain (Domain Name System –
DNS) adalah sebuah sistem yang menyimpan
informasi tentang nama host ataupun nama domain
dalam bentuk basis data tersebar (distributed
database) di dalam jaringan komputer. Menurut
browser Google Chrome, DNS adalah layanan
jaringan yang menerjemahkan nama situs web
menjadi alamat internet.
Teknologi Pembangun Aplikasi Berbasis
Web
Teknologi Pembangun Aplikasi Berbasis
Web
 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 klasifikasi 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
Teknologi Pembangun Aplikasi Berbasis
Web
 Infrastructure Top Level Domains
Satu-satunya yang diterima adalah .arpa. Sementara
domain .root ada tapi tanpa kejelasan mengenai untuk
apa keberadaannya.
 Generic Top Level Domains (GTLD)
Dipergunakan oleh macam-macam organisasi. Berikut
adalah pengelompokan gTLD menurut kepentingannya.
• .com = Komersial, .info = Informasi, .net = Jaringan
• .gov = Pemerintah (eksklusif untuk pemerintah Amerika
Serikat), .mil = Militer (eksklusif untuk militer Amerika
Serikat), .aero = Industri pesawat terbang
Teknologi Pembangun Aplikasi Berbasis
Web
• 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 : .tips, .voyage, .club,
.diamonds, .enterprises,.buzz,
.coffee, .florist, .house, .solar,
.international, .holiday,
.marketing
Teknologi Pembangun Aplikasi Berbasis
Web
• GTLD generasi baru .guru: 49,1%, .gallery: 9,5%
.photography:7,16%,
.holdings: 6,26%,
.estate: 5,37%
.clothing: 3,7%
.ventures: 3,96%,
.bike: 4,34%,
.singles: 2,55%,
.graphics: 1,27%
.camera: 1,02%
.equipment: 2,04%,
.lighting: 1,66%
.plumbing: 1,44%.
Teknologi Pembangun Aplikasi Berbasis
Web
4. Protokol Transfer
• adalah protokol yang digunakan untuk pengiriman
informasi di internet.
• Beberapa protokol transfer:
• HTTP  protokol standar untuk suatu dokumen
web
• FTP (File Transfer Protocol)  digunakan untuk
mentransfer file dalam format text atau binary
dalam suatu server komputer diinternet.
Teknologi Pembangun Aplikasi Berbasis
Web
4. Protokol Transfer
• Gopher  digunakan untuk mengakses server gopher
yang menyediakan informasi dengan menggunakan
suatu sistem menu atau melalui hubungan telnet.
• News NNTP (Network News Transfer Protocol) 
digunakan untuk mendistribusikan berita di USENet.
USENet adalah suatu sistem yang dirancang sebagai
forum diskusi dengan berdasarkan pada topik-topik
yang disebut news-group.
• Telnet  digunakan untuk login ke suatu server
komputer.
Teknologi Pembangun Aplikasi Berbasis
Web
4. Protokol Transfer
HTTP= Hypertext Transfer Protocol
• HTTP adalah protokol komunikasi yang digunakan dalam
web
• spesifikasi HTTP standar (HTTP 1.1) dideskripsikan di RFC
2616
• (http://www.ietf.org/rfc/rfc2616.txt)
• contoh “obrolan” komunikasi antara browser dan server
untuk menghantarkan sebuah dokumen web yang disisipin
gambar
Teknologi Pembangun Aplikasi Berbasis
Web
Teknologi Pembangun Aplikasi Berbasis
Web

5. HTML (HyperText Markup Language)

• HTML merupakan format standar untuk menulis dokumen
web
• Spesifikasi HTML standar (HTML 4.01) terdapat di
http://w3.org/TR/html4/
• Contoh dokumen HTML
Teknologi Pembangun Aplikasi Berbasis
Web
Teknologi Pembangun Aplikasi Berbasis
Web
5. CGI (Common Gateway Intetface
Jika dokumen web yang diminta oleh web browser
merupakan file program atau file HTML yang disisipi
program, maka web server akan menjalankan (run) file
tersebut dengan bantuan interpreter atau sistem operasi
Informasi yang diberikan oleh web server kepada
program:
 Server variables : berbagai informasi yang ada pada
HTTP requestyang sedang diterima, nama dan path file
program, kapabilitas web server, dll
Teknologi Pembangun Aplikasi Berbasis
Web

5. CGI (Common Gateway Intetface

 Environment variables : informasi yang telah diset
(mungkin oleh aplikasi lain) pada lingkungan sistem
operasi
 Cookie : isi cookie yang disimpan di web browser
 Request parameter : input dari user yang dikirimkan
bersamaan dengan HTTP requestoleh web browser
Hasil output program ke standard output(screen) akan diambil
oleh web server untuk dikirimkan kepada web browser sebagai
HTTP response
Teknologi Pembangun Aplikasi Berbasis
Web
5. CGI (Common Gateway Intetface
Pada PHP:
–Server variables diletakkan pada predefined
variable $_SERVER
•$_SERVER[“PHP_SELF”] = path dan nama file yang
sedang dieksekusi
•$_SERVER[“SERVER_NAME”] = nama host/server
•$_SERVER[“REQUEST_METHOD”] = jenis metode
request
•$_SERVER[“HTTP_USER_AGENT”] = identitas web
browser yang melakukan request
Teknologi Pembangun Aplikasi Berbasis
Web
5. CGI (Common Gateway Intetface
•$_SERVER[“REMOTE_ADDR”] = nomor IP user
•dl
–Environment variables diletakkan pada predefined variable
$_ENV
–Cookie diletakkan pada predefined variable $_COOKIE
–Request parameter diletakkan pada predefined variable
$_GET, $_POST, $_FILES
–Output menggunakan perintah echo
Teknologi Pembangun Aplikasi Berbasis
Web
6. 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).
Teknologi Pembangun Aplikasi Berbasis
Web

7. 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
Preprocessor, JSP(Java Server Pages).
 Arsitektur Aplikasi Berbasis Web Client
Side Scripting
•CLIENT
•Response
•HTML

•Request
•HTML

•SERVER
Web Documents
Arsitektur Aplikasi Berbasis Web
Server Side Scripting
•Intepreter •Response •CLIENT
•PHP •HTML

•Request
•PHP

•SERVER
 Web Dinamis dan Statis

1. Web Dinamis
• Bukannya web yang bergerak‐gerak dengan bantuan
flash dan komponen lainnya, kalau itu adalah
pengertian dari web dinamis adalah salah besar.
• Adalah website yang kontennya berubah–rubah
artinya data yang didalam web itu dapat diubah
tanpa harus coding ulang , contoh web dinamis
adalah web berita, web perdagangan (e‐commerce).
 Web Dinamis dan Statis

.1. Web Dinamis

• Halaman web dinamis memiliki database. Web dinamis,
memiliki data dan informasi yang berbeda‐beda tergantung
input apa yang disampaikan client.
• Adanya program yang berjalan disisi server untuk memanage
perubahan data yang ditampilkan
• Web dinamis dapat digunakan untuk membentuk aplikasi
interaktif, yang memungkinkan pemakai tak hanya
memperoleh informasi terkini tetapi juga dapat
melakukan perubahan data. Misalnya: Untuk pengisian
KRS, Perubahan data pribadi, Pengisian berita baru
 Web Dinamis dan Statis

1. Web Dinamis
• Terjadi interaksi antara pengguna dan server sangat
kompleks.
• Web dinamis selalu memiliki program yang bekerja
disisi server karena dalam rentang waktu tertentu
konten dari website tersebut berubah.
• Web dinamis dibentuk dengan menambahkan
perangkat lunak tambahan, seperti PHP
 Web Dinamis dan Statis

1. Web Dinamis
• Di mana seseorang (Client) dapat mengubah Content dari
halaman tertentu dengan menggunakan Browser. Request
yang dikirimkan oleh pengguna dapat diproses oleh
server untuk kemudian ditampilkan dalam isi yang
berbeda-beda menurut alur programnya.
• Contoh dari web dinamis adalah portal berita dan jejaring
sosial.
 Web Dinamis dan Statis
2. Web Statis
• Website statis ini persis seperti koran, majalah, dan
brosur. Bedanya koran, majalah, dan brosur adalah
sebuah media cetak sedangkan website statis dihost dan
diakses melalui internet.
• Contoh dari web statis adalah web yang berisi profil
perusahaan. Di sana hanya ada beberapa halaman saja
dan kontennya hampir tidak pernah berubah karena
konten langsung diletakan dalam file HTML saja.
 Web Dinamis dan Statis

2. Web Statis
• Aplikasi dari website statis seringkali ditemukan diwebsite
personal profile, website penawaran
produk, dan semua website yang bertujuan melakukan
komunikasi satu arah dari pemilik website ke pengunjung
tanpa diperlukan interaksi

• Web statis terletak pada keharusan untuk memelihara

halaman Web secara terus‐menerus setiap ada
perubahan informasi
 Perbedaan Web Statis dan Web
Dinamis
1. Interaksi antara pengunjung dan pemilik web
Web statis tidak dimungkinkan terjadinya interaksi antara
pengunjung dengan pemilik web.
Web dinamis terdapat interaksi antara pengunjung dengan
pemilik web seperti memberikan komentar, transaksi online,
forum, dll.
2. Bahasa Script
Web statis hanya menggunakan HTML saja, atau paling
tidak bisa ditambah dengan CSS.
Web dinamis menggunakan bahasa pemrograman web
yang lebih kompleks seperti PHP, ASP dan JavaScript.
 Perbedaan Web Statis dan Web
Dinamis
3. Penggunaan Database
Web statis tidak menggunakan database karena
tidak ada data yang perlu disimpan dan diproses.
Web dinamis menggunakan database seperti MySQL,
Oracle, dll untuk menyimpan dan memroses data.
 Komponen Penyusun Web

1. Web server, merupakan perangkat lunak wajib jika

membuat sebuah halaman web dinamis. dalam web server
semua script‐script web yang dibuat biasanya diletakkan
dalam “document root” dalam web server tersebut. Dengan
menggunakan web server maka pembuat web dapat
melakukan uji coba terhadap halaman‐halaman web yang
dibuat tanpa harus mencobanya di internet langsung
(localhost). berikut contoh web server: IIS (internet
information services) terdapat pada windows NT/ XP/ 2000
Server untuk ASP dan PHP,
 Komponen Penyusun Web

2. Web Browser, merupakan perangkat lunak wajib

yang harus terdapat di komputer. karena untuk
menjalankan aplikasi web harus menggunakan web
browser. beberapa contohnya: internet explorer,
mozilla firefox, opera, safari.
3. Script, merupakan script yang digunakan. untuk
membuatweb statis menggunakan client side scripting
(HTML, XML, CSS style sheet, java script). untuk
membuat web dinamis menggunakan server side
scripting (ASP, PHP, JSP).
 Komponen Penyusun Web

4. Database server, merupakan tempat penyimpan

data dalam sebuah web. contohnya: MySQL, Microsoft
SQL Server, Oracle, DB2 (IBM), PostgreSQL.
5. Image editor, merupakan perangkat lunak yang
digunakanuntuk mengelola gambar-gambar dan
animasi yang nantinya akan digunakan didalam
halaman web yang akan dibuat. contohnya: adobe
photoshop, corell draw, macromedia flash
 Komponen Penyusun Web
6.Web editor, merupakan perangkat lunak yang
digunakan untuk mengetikkan perintah-perintah script
yang digunakan baik itu client side scripting ataupun
server side scripting bahkan beberapa web editor
dapat digunakan untuk mengatur layout/ tampilan
halaman web secara instant. contoh web editor:
Notepad, Macromedia Dreamweaver, NetBean. Dibagi
menjadi 3 yaitu : Editor Teks (Notepad), Editor
WYSIWYG (Dreamweaver), Editor berbasis template
(Rapidweaver dan iweb).
 Komponen penyusun web
7. Penghubung. Dalam berkomunikasi antar client dan
server membutuhkan penghubung yaitu protokol HTTP.
Juga membutuhkan sintaks pengalamatan dokumen
web yaitu Uniform Resource Lacator (URL) . URL ini
merupakan sistem pengalamatan file yang digunakan
di internet
 Kondisi Web
Kondisi Offline Kondisi Online
Editor Hosting
Web Browser Domain
Web Server FTP
Database
Bahasa Pemrograman
• Client Side  HTML, CSS, Jquery, JavaSCript,
Ajax, Ext JS.
• Server Side  PHP, ASP, JSP. Perl, Phyton,
C#.
 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.
 Pengertian hosting

 Jenis Hosting:
• 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
untuk meletakkan server yang dipergunakan untuk
hosting.
 Perkembangan Web
Pembagian website berdasarkan teknologi dan cara
penggunaannya dibagi menjadi :
1.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".
 Komunikasi 1 arah
 Bersifat read
 Bahasa yang digunakan hanya HTML (Tampilan)
 Perkembangan Web
2. 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
 Mengutamakan interaksi antar user, baik user dengan
user maupun admin atau webmaster
 Merupakan kemajuan dari teknologi pemrograman web
terutama client side ( Ajax, Js, Json, Jquery )
 Wikipedia, Facebook, Framework, Friendster,
 RSS ( Really Simple Syndicated)
 Web as Platform  googlespreadsheet
 Perkembangan Web

3.Web 3.0, yaitu teknologi web lebih ke arah Web Cerdas

atau Web dengan Engine Kecerdasan Buatan, yang lebih
memudahkan user dalam berinteraksi. Contoh : Web
Semantik dan Cloud Computing.
 Manusia dapat berkomunikasi dengan mesin
 User dapat mencari suatu data spesifik tanpa bersusah-
susah mencari satu per satu dalam situ-situs web
 Sematic Wb ( Ontologi)
 3D Web
 Kategori website
 Website Personal, yaitu situs yang digunakan untuk
menceritakan tentang biografi diri, pengalaman pribadi,
dll. Contoh : Blog Pribadi.
 Website Komersial (Company Profile / 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-Profit, website jenis-jenis ini biasanya
digunakan hanya untuk yayasan, sekolahan, dll. Domain
yang biasa digunakan .org, .edu, dll.
 Contoh 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
• Forum: Ads-id, Kaskus, Kampoeng,
Pemrogramanweb
 Contoh Kategori Website

 Web Bisnis yaitu aplikasi web yang di dalamnya terdapat

proses bisnis seperti jual beli, sewa menyewa, penggunaan
jasa, lelang, dan sebagainya.
 Web Berita dan Informasi yaitu aplikasi web yang
menyediakan konten informasi berbayar maupun gratis.
 Web Social Networking yaitu aplikasi web yang memberikan
fasilitas pertemanan tempat berkumpul dan dapat juga
menjadi tempat/wadah suatu kelompok
 Web Banking yaitu aplikasi web yang di dalamnya terdapat
proses transaksi keuangan pada perbankan secara umum,
seperti transfer dana, pembayaran, pembelian, dan lainnya.
 Contoh Kategori Website
 Web Profile yaitu aplikasi web yang mendeskripsikan tentang
profil suatu perusahaan, lembaga ataupun orang personal.
Aplikasi web ini biasanya digunakan untuk memperkenalkan
profil perusahaan, lembaga atau orang personal kepada
umum.
 Web Services yaitu aplikasi web yang menyediakan layanan
pengolahan data dan sebagainya. Perbedaan umum aplikasi
web service dan aplikasi web lain pada umunya adalah
aplikasi web service tidak memilki antarmuka, namun dapat
diakses melalui internet
 Web Search Engine Optimize (SEO) yaitu aplikasi web
yang di dalamnya terdapat proses pencarian pada internet.
 Contoh Kategori Website
Pemrogrman Web di bagi menjadi 2 sisi

Client Side Scripting adalah salah satu jenis bahasa

pemrograman web yang proses pengolahannya
dilakukan di sisi client.

Server Client Side Scripting bahasa pemrograman

web yang pengolahannya (diterjemahkan) dilakukan di
sisi server (web server yang di dalamnya telah
mengintegrasikan komponen web engine).
 Client Side Scripting
• Proses pengolahan client side scripting dilakukan
oleh web browser sebagai client-nya.
• Di dalam web browser terdapat library yang mampu
menerjemahkan semua perintah di halaman web
yang menggunakan client side scripting.
• Library ini secara teknis disebut sebagai web engine.
• Masing-masing web browser memiliki web engine
yang berbeda-beda. Itulah mengapa script yang
sama dapat ditampilkan dengan layout yang
berbeda-beda di web browser yang berbeda.
 Kelebihan Client Side Scripting
• Pada client side scripting pemrosesannya dilakukan
di sisi client yang dalam hal ini komponen client-nya
adalah web browser dan komponnen servernya
adalah web server.
• Mudah untuk dipelajari dan digunakan
• Tidak membutuhkan pengetahuan pemrograman
yang tinggi atau pengalaman pemrograman yang
cukup ahli.
 Kelebihan Client Side Scripting
• Perubahan dan pemrosesan kode programnya lebih
cepat karena dilakukan di sisi client/komputer host
tanpa perlu melakukan proses di sisi server melalui
jaringan internet. Artinya kode sumber tersebut tidak
perlu dikirim ke server melalui jaringan internet
untuk diproses cukup dilakukan di browser yang
terinstal di komputer client.
• Mampu menampilkan layout dan desain halaman
web yang lebih interaktif dan user friendly. User
dapat berinteraksi dengan halaman web melalui
form isian yang disediakan.
Kelemahan Client Side Scripting
• Kode programnya dapat dilihat melalui browser
• Karena pemrosesannya dilakukan disisi client/komputer
host maka sumber daya yang ada di komputer host tersebut
(memory, CPU usage) akan digunakan secara maksimal. Hal
ini mengakibatkan client side scripting sangat tergantung pada
spesifikasi komputer host (machine dependent). Jika spesifikasi
komputer host rendah (memory, CPU, storage media) maka
dokumen web yang menggunakan client side scripting akan
lambat diproses. Begitu pula sebaliknya.
Kelemahan Client Side Scripting
• Masalah kompatibilitas web browser menjadi isu yang perlu
diperhatikan karena beberapa web browser menggunakan
web engine yang berbeda maka ada kemungkinan client side
scripting akan diterjemahkan berbeda oleh masing-masing
web browser tersebut.
• Minim fitur untuk pengaksesan ke sumber daya komputer.
Misal: untuk menulis ke sebuah file di komputer, membaca
isi file, membuat file/direktori di hardisk komputer, dan
mengakses port-port di komputer tidak dapat dilakukan oleh
client side scripting.
 Server Side Scripting
• Tugas web engine adalah memproses semua script
yang termasuk kategori client side scripting di dalam
dokumen web.
• Server side scripting adalah HTML embeded, artinya
adalah semua server side scripting dapat disisipkan
ke dalam dokumen web yang menggunakan HTML
atau sebaliknya.
• Contoh server side scripting:
Active Server Pages (ASP)
PHP (Hypertext Preprocessor)
Java Server Pages (JSP)
Kelebihan Server Side Scripting

• Kode Program Aman, karena kode sumber server side

scripting disimpan di web server yang ada di sisi server,
sehingga user/pengunjung tidak dapat melihat kode
sumber server side scripting dari sisi client/ web browser.
• Pemrosesannya lebih cepat karena spesifikasi hardware
untuk mesin server biasanyalebih tinggi.
• Mampu mendukung banyak program basis data/DBMS,
Mampu dijalankan di semua sistem operasi komputer.
 Kelebihan Server Side Scripting
• Mampu mengelola sumber daya yang ada di komputer
baik perangkat keras maupun perangkat lunak lainnya.
• Tidak bergantung pada jenis web browser yang akan
digunakan, karena semua script dikelola di sisi
server/web server.
• Meminimalkan traffic di jaringan. Pada saat user
melakukan request ke server maka yang dikirimkan ke
server adalah hasil perosesannya saja. Karena
pemrosesan dokumen sudah dilakukan di sisi server,
maka data yang mengalir dari client ke server atau
sebaliknya adalah relatif kecil dan tidak membebani
bandwith di jaringan.
 Kelemahan Server Side Scripting

• Karena semua perosesan dilakukan di sisi server

maka dibutuhkan spesifikasi komputer server yang
cukup tinggi agar dapat memproses server side
scripting secara cepat.
• Dibutuhkan kemampuan pemrograman yang baik
untuk mempelajari server side scripting.
• Tidak memiliki kemampuan untuk membuat
layout/desain halaman web yang menarik.
 Karakteristik Server dan Client Side
Scripting

Karakteristik client side programming :

• Kode program dapat dilihat oleh user
• Dapat langsung diterjemahkan oleh browser
• Model eksekusinya simple dan skrip dapat dijadikan
satu dengan HTML
Karakteristik server side programming :
• Ada client yang meminta request
• Eksekusi program dilakukan di server
• Mengirimkan hasil ke client
 Perbedaan Server dan Client Side
Scripting
Client
• Waktu eksekusi relative lebih cepat dari script sisi
server
• Dalam hal tertentu kita lebih memerlukan client side
daripada server side misalnya untuk menu, control
elemen halaman web dan validasi form.
 Keamanan kurang terjamin karena script bisa dibaca
dan dilihat oleh orang lain sehingga script bisa di
copy-paste dan diubah oleh orang lain.
 tempat mengeksekusi pada client server
programming dieksekusi di browser
 Perbedaan Server dan Client Side
Scripting
• Server
• Proses transfer data lebih lama karena hanya hasil
eksekusi server yang dikirim ke client. Tetapi untuk
saat ini kekurangan tersebut bisa diatasi dengan
adanya peningkatan performa computer
dan komunikasi jaringan yang lebih baik.
• tempat mengeksekusi skrip pada server
programming, dieksekusi di client (web browser)
 Perbedaan Server dan Client Side
Scripting

• Perbedaan utama
adalah tempat mengeksekusi skripnya. Pada client
server programming, skrip dieksekusi di browser
sedangkan server side programming dieksekusi di
client (web browser)
 Cara Kerja Client dan Server Side
Scripting

Cara kerja Client Side:

• Pengunjung web memilih salah satu link dari web lalu browser
langsung membaca perintah tersebut untuk memanggil alamat
web yang dituju. Setelah itu browser akan mengalihkan ke
halaman yang dituju oleh pengunjung web
Cara kerja Server side :
• Jika kita melakukan interaksi dengan halaman web maka
browser akan mengirimkan perintah ke server, kemudian server
akan merespon dan melakukan perintah yang diberi, kemudian
server akan mengirimkan kembali data/ perintah dari browser,
dan browser akan menampilkan data/ perintah tersebut