1

KONSEP PEMROGRAMAN WEB

 2
Pemahaman Pemrograman Web
• Pemrograman: Suatu usaha menulis suatu perintah (program aplikasi) sehingga
komputer dapat menjalankan apa yang kita inginkan.
• Pemrograman web: Membuat program aplikasi berbasis web.
• Aplikasi berbasis web: Aplikasi yang dibuat dengan memanfaatkan mekanisme
dan aplikasi yang sudah ada pada sistem web (WWW).
 3
Membuat Aplikasi Berbasis Web
• 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.
4
Cara Kerja Web
Internet WWW Servers
HTTP
HTTP

WWW
Users (Client)
Browser

Resources
(HTML files)

Author write HTML

 5
Aplikasi Berbasis Web
• Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah sistem yang
dibangun dengan konsep rekayasa web (web engineering) dan diaplikasikan
secara online melalui media internet.

• Web Engineering adalah suatu proses yang digunakan untuk menciptakan suatu
sistem aplikasi berbasis web dengan menggunakan ilmu rekayasa, prinsip-
prinsip manajemen dan pendekatan sistematis sehingga dapat diperoleh sistem
dan aplikasi web dengan kualitas tinggi. Tujuannya untuk mengendalikan
pengembangan, meminimalisasi resiko, dan meningkatkan kualitas sistem
berbasis web (kmrg.itb.ac.id, 2005).
 6
Aplikasi Berbasis Web
• Ada banyak aplikasi berbasis web yang tersedia saat ini, antara lain: Chatting,
sistem informasi, email, milis, forum, penjualan online, dll.

• Keunggulan aplikasi berbasis web ini antara lain:

• Platform independent, artinya aplikasi ini dapat dijalankan dari sistem
operasi windows, linux, BSD, Mac.
• Tidak memerlukan instalasi software untuk menjalankan aplikasi di setiap
komputer. Untuk komputer lain yang ingin menjalankan program ini cukup
buka browsernya dan membuka alamat host server dimana program ini
disimpan.
• Aplikasi ini dapat dijalankan dari jarak jauh dengan menggunakan internet.
 7
Aplikasi Berbasis Web
• Berarsitektur client-server
• Software web browser di sisi client,
• Sofware web server di sisi server.

• Menggunakan protokol HTTP dalam komunikasi antara client dan server.

• Mempunyai fungsi untuk mengambil/ menjalankan isi file dokumen web di

server dan menampilkannya di sisi client.
 8
Aplikasi Berbasis Web
KEUNGGULAN KEKURANGAN
• Dapat diakses kapan pun dan dari • Antarmuka yang dapat dibuat
mana pun selama ada internet. terbatas sesuai spesifikasi standar
untuk membuat dokumen web.
• Dapat diakses hanya dengan
menggunakan web browser • Keterbatasan kemampuan web
(umumnya sudah tersedia di PC, browser untuk menampilkannya.
PDA, dan handphone terbaru).
• Terbatasnya kecepatan internet
• Tidak perlu menginstall aplikasi mungkin membuat respon aplikasi
client khusus. menjadi lambat.
 9
Web Statis vs. Web Dinamis
Web Statis
• Sebagian besar halaman web statis.
• Isi (teks/ link/ gambar) yang sama
setiap kali diakses HyperText
Markup Language (HTML)
digunakan untuk menentukan teks/
format gambar.
• Contoh: dokumen online,
kebanyakan homepage
Web Dinamis
• Sebagian web dinamis mengarah ke
layanan online/ e-commerce.
• Halaman web haruslah
menyediakan konten yang dinamis.
• Halaman harus update, berubah-
ubah (misal: berputar banner,
artikel ganti).
• Harus mampu bereaksi terhadap
tindakan info pengguna, permintaan
dan proses, pemesanan jasa, dll.
• Contoh: www.amazon.com,
www.thehungersite.com..
10 PRINSIP DASAR
PEMROGRAMAN WEB
11
Model Pemrograman Web

Klien (PC) Web Server

Request (URL) HTTP Server

Web Response (Content)

Content
Browser
12
Yang perlu diingat
• Komunikasi antara web browser dan web server berdasarkan protokol HTTP.
• Dokumen dan semua sumber daya apapun di jaringan yang dikehendaki
diidentifikasi dengan Universal Resource Locator (URL) bagian dari URI.
• Dokumen web ditulis berdasarkan standar HTML.
• Pemrograman sisi klient (client-side scripting),
• Pemrograman sisi server (server-side scripting/ programming).
13
Client-side Scripting
• Pemrograman web sisi klien
• Bahasa pemrograman yang digunakan untuk mengaplikasikannya tidak
memerlukan web server.
• Bahasa pemrograman yang berjalan di sisi client.
• Cukup menggunakan web browser.
• Contoh: HTML, JavaScript, Java Applet, Flash.
14
Server-side Scripting
• Pemrograman web sisi server
• Bahasa pemrograman untuk mengaplikasikannya memerlukan web server, atau
bahasa pemrograman yang berjalan di sisi server.
• Contoh:
• ASP, memerlukan web server IIS.
• PHP, memerlukan web server Apache.
15
Client Side vs. Server Side
Client Side Programming Server Side Programming
• Dapat men-download program • Dapat menyimpan dan menjalankan
dengan halaman web di browser. program pada server web, link dari
• Dijalankan pada mesin klien halaman web.
sederhana, generik, tapi tidak aman. • Lebih kompleks, membutuhkan hak
• Menggunakan bahasa standar HTML. akses server, tetapi aman.
• Untuk penggunaan di localhost tidak • Di localhost memerlukan web
memerlukan webserver, cukup server lokal (misalnya: vertigo,
aplikasi editor teks dan browser. WAMP, dll) di samping aplikasi
editor dan browser.
 16
Client Side vs. Server Side
Client Side Programming Server Side Programming
• Diperkaya dengan bahasa skrip • Menggunakan pemrograman CGI
JavaScript • Program dapat ditulis agar sesuai
• Bahasa scripting untuk halaman dengan Common Gateway
web yang dikembangkan oleh Interface.
netscape pada tahun 1995. • Bila halaman web menyampaikan,
• Menggunakan sintaks mirip C + data dari halaman tersebut
+/ Java, begitu akrab untuk dikirim sebagai masukan untuk
programmer, tetapi sederhana. program CGI.
• Baik untuk menambahkan fitur • Mengeksekusi program CGI di
yang dinamis untuk halaman web, server, mengirimkan hasilnya
pengendalian bentuk, dan GUI. kembali ke browser sebagai
halaman web baik jika
perhitungan besar/ kompleks
atau membutuhkan akses ke data
pribadi.
17
Client Side vs. Server Side
Client Side Programming Server Side Programming
• Diperkaya dengan programming Java • Menggunakan pemrograman:
applet Active Server Pages (ASP),
• Dapat mendefinisikan hal-hal Servlets Java, PHP, dll
kecil, program dengan tujuan • Vendor-spesifik alternatif
khusus di java disebut applet. pengganti CGI.
• Memberikan kekuatan ekspresif • Menyediakan banyak
penuh. kemampuan yang sama
• Baik untuk tugas-tugas yang tetapi menggunakan tag
lebih kompleks atau tugas data mirip HTML.
berat, seperti grafik, dll.
18 WEB DEVELOPMENT TOOLS
19
Browser
• Merupakan sebuah software yang digunakan untuk mengakses/ menampilkan
halaman web.
• Berkomunikasi dengan server web melalui protokol HTTP.
• Mekanisme kerja pengaksesan dokumen web yang berbasis HTML adalah
sebagai berikut:
• Browser meminta sebuah halaman web ke suatu situs web melalui
protokol HTTP,
• Permintaan diterima oleh server,
• Web server mengirimkan dokumen HTML yang diminta ke client,
• Browser client menampilkan dokumen yang diterima berdasarkan kode
yang terdapat pada dokumen HTML.
20

Contoh Browser Populer

• Google Chrome
• Mozilla Firefox
• Opera
• Edge/Internet Explorer
• Tor Browser
21
Pengolah Grafis

• Adobe Photoshop
• Corel Draw
22
Pengolah Animasi/ Multimedia

• Adobe Flash
• Adobe Premiere
• Pinnacle Studio
23
Pengolah Web/Editor

• Notepad++
• Sublime
• Visual Studio Code
• Adobe Dreamweaver
• PHP Designer
24
Bahasa Pemrograman Web
Client Side Server Side
• HTML • Platform Windows
• CSS • ASP (bahasa pemrograman)
• JavaScript • Ms. Access/ SQL Server
• JavaApplet (database)
• ActiveXControl • Platform Linux
• PHP (bahasa pemrograman)
• MySQL/ PosgreeSQL (database)
25 PROFESI BIDANG WEB
26
Desainer Web
• Bertanggung jawab kepada tampilan visual sebuah situs web, meliputi tipografi,
grafis, animasi, tata letak, warna, dll.
• Kemampuan utama: seni, desain grafis, imajinasi dan kreasi.
• Software yang harus dikuasai:
• Pengolah grafis (Adobe Photoshop, CorelDraw, dll)
• Pengolah animasi (Macromedia Flash, Swish, dll)
• Pengolah multimedia (CoolEdit Pro, Xara3D, dll)
27
Master Web
• Bertanggung jawab atas kelancaran dan jalannya sebuah situs web.
• Kemampuan yang harus dimiliki meliputi desain, pemrograman, dan
maintenance sebuah situs web.
• Tidak mencampuri profesi yang ada, hanya memberi arahan kepada desainer
maupun programmer mengenai apa yang harus dilakukan dalam membangun
situs.
28
Programmer Web
• Bertanggung jawab membuat halaman web interaktif dan dinamis dengan
sebuah bahasa scripting menyangkut dengan transaksi, input dan output data,
dan database.
• Kemampuan yang harus dimiliki:
• HTML
• Pemrograman Server (misal: PHP & MySQL)
• Pemrograman Client (misal: CSS, JavaScript/ JavaApplet)
29
Web Administrator
• Me-maintenance suatu server aga situs yang dikelola senantiasa online.
• Kemampuan yang harus dimiliki:
• Menguasai sistem operasi server (Windows NT/ Server, Linux, dll)
• Jaringan komputer (LAN, Intranet, dll)
• Keamanan komputer dan internet
30 JENIS DAN FUNGSI WEB
31
Jenis Web
• Katalog
• Menampilkan daftar produk yang dijual oleh suatu perusahaan yang
biasanya memiliki produk dalam jumlah yang besar.
• Harus mempertimbangkan update katalog dengan mudah, efisien, dan
continue.

• E-Commerce
• Suatu kumpulan yang dinamis antara teknologi, aplikasi, dan proses bisnis
yang menghubungkan perusahaan, konsumen, dan komunitas tertentu
melalui transaksi elektronik.
• Secara umum transaksi yang dilakukan: find it (mencari produk), explore it
(mempelajari produk), select it (memilih produk), buy it (membeli
produk), ship it (pengiriman barang).
32
Jenis Web
• E-Learning
• Media pengajaran dan pembelajaran yang menggunakan rangkaian
elektronik (LAN, WAN, atau internet) untuk menyampaikan isi
pembelajaran, interaksi, atau bimbingan.
• Tiga hal yang wajib dipenuhi:
• Sederhana (memudahkan peserta didik dalam memanfaatkan
teknologi),
• Personal (guru dapat berinteraksi dengan peserta didik layaknya
pembelajaran yang konvensional),
• Cepat (mengatasi rasa jenuh dan bosan).

• Komunitas
• Memungkinkan pengunjung berkomunikasi secara bersamaan.
• Contoh: friendster, blog, facebook, dll.
33
Jenis Web
• Portal
• Aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari
informasi online terdistribusi, seperti dokumen yang didapat dari
pencarian, kanal berita, dan link ke situs tertentu.
• Contoh: portal sekolah, portal kampus, portal dakwah, dll.

• Personal
• Bertujuan untuk mempromosikan tentang seseorang.
• Biasanya berisi: biodata, portofolio (kumpulan hasil karya), prestasi, atau
kegiatan sehari-hari.
34
Fungsi Web
• Fungsi komunikasi
• Berupa web dinamis karena melibatkan server dan pengelolaan data
sehingga memungkinkan terjadinya interaksi dengan user.
• Fungsi komunikasi: webmail, form contact, chatting, forum, dll.

• Fungsi informasi
• Lebih ditekankan pada kualitas bagian konten karena tujuannya adalah
menyampaikan informasi.
• Berisi teks dan grafik yang mudah di-download.
• Fungsi informasi: news, profile company, library, reference, dll.

• Fungsi entertainment/ hiburan

• Menekankan pada penggunaan animasi gambar dan elemen bergerak.
• Fungsi hiburan: game online, film online, musik online, dll.
35
Fungsi Web
• Fungsi transaksi
• Sebagai sarana transaksi bisnis baik barang, jasa, ataupun lainnya.
• Menghubungkan perusahaan, konsumen, dan komunitas tertentu.
• Pembayaran dapat menggunakan kartu kredit, transfer, paypal, dll.

• Fungsi ekonomi
• Alat pemasaran
• Bertujuan untuk mempromosikan dan memasarkan produk atau jasa
layanan suatu perusahaan.
• Dapat juga berupa company profile.
• Nilai tambah
• Nilai tambah dari sekedar promosi atau pemasaran secara online.
• Misal: trend perusahaan modren, branding image, dll.