PENDAHULUAN

PEMROGRAMAN WEB

M
O
K
T,M
K,S
RA
H B A
LE U
O M
Y
RO
POKOK DISKUSI
 Pengertian dan Sejarah Pemrograman Web
 Tools Yang Digunakan
 Aplikasi Dekstop vs Aplikasi Web
 Static vs Dynamic
 Istilah Dalam Pemrograman Web : WWW, HTML, HTTP, FTP, URL DOMAIN,
HOSTING, GET & POST, HTTP Response, Dynamic Over Static Pages
 Installasi Aplikasi:
 Paket Apache Web Server
 Instalasi Dreamweaver
 Testing Paket Apache Web Server
 Contoh HTML Code
Pengertian dan Sejarah Pemrograman Web
Web programming adalah proses pembuatan program yang outputnya disajikan oleh Web Browser.
Bahasa yang digunakan adalah bahasa HTML. HTML merupakan turunan atau pengembangan dari
SGML (Standar Generalized Markup Language).
HTML sendiri dikembangkan oleh Tim Berners-Lee sewaktu masih bekerja di CERN yang pertama
kali dipopulerkan oleh browser Mosaic yang dikembangkan NCSA. Selama awal tahun 1990an,
HTML terus mengalami kemajuan yang sangat cepat.
Tapi pengembangan resmi HTML ini baru dikeluarkan pada tahun 1995 yang dikembangkan oleh
Internet Engineering Task Force (IETF). HTML2 yang dikembangkan ini merupakan turunan dari
HTML+ pada tahun 1993. HTML3 yang juga dirilis pada tahun 1995 mempunyai kemampuan yang
jauh lebih bagus dari versi sebelumnya. Merupakan hasil usaha yang dikembangan oleh World Wide
Web Consortium's (W3C) dan kemudian menghasilkan HTML3.2 pada tahun 1996.
Dan akhirnya terbitlah HTML4 dan HTML4.1 pada akhir tahun 1997 dan 1998. HTML ini merupakan
sebuah text biasa yang dirancang untuk tidak tergantung pada sistem operasi apapun.
Secara umum pemrograman web dapat dibagi 2, yaitu: Client Side Scripting dan Server Side
Scripting. perbedaan dari kedua jenis script ini adalah pada bagaimana script tersebut di proses dan
tentu saja dari sintaks program yang digunakan.

Client Side Scripting

Merupakan jenis script yang pengolahannya dilakukan di sisi client. Pengolahan disini berarti “di
terjemahkan/ interpreted”. Yang memiliki tugas untuk menterjemahkan script jenis ini disisi client
adalah web browser. Agar semua script yang masuk kategori ini dapat diterjemahkan oleh web
browser maka didalam web browser terdapat sebuah komponen/ modul/ “engine” yang memiliki
daftar pustaka (library) yang mampu mengenali semua perintah-perintah yang terdapat pada kategori
client side scripting.
Contoh Web Browser yang populer digunakan: internet explorer, mozilla firefox, opera., safari.
Contoh Client Side Scripting: HTML (hypertext markup language), java script, XML (extensible
markup language), CSS (cascading style sheet). client side scripting merupakan script yang digunakan
untuk membuat halaman web statis.
Server Side Scripting
Merupakan script yang pengolahannya (baca: diterjemahkan) di sisi server. Server yang dimaksud
disini adalah sebuah komponen yang biasa disebut web server yang didalamnya terintegrasi dengan
sebuah mesin (engine)/ modul yang didalamnya terdapat daftar pustaka (library) yang mampu
menterjemahkan script-script tersebut yang kemudian setelah di terjemahkan di server kemudian
dikirim (ditampilkan) ke client (web browser) dalam format HTML (hypertext markup language).
Mesin (engine) tersebut harus di install terlebih dahulu karena mesin-mesin tersebut memiliki
karakteristik yang berbeda untuk tiap script (bahasa pemrograman) yang digunakan. Berikut contoh
server side scripting: PHP (Hypertext Pre Processor), ASP (active server pages), JSP (java server
pages). Server side scripting digunakan untuk membuat halaman web dinamis. hal ini disebabkan
karena server side scripting memiliki kelebihan, diantaranya: mampu berinteraksi dengan banyak
perangkat lunak basis data (database), mampu mengelola sumber daya yang terdapat di sistem operasi
dan perangkat keras komputer, mampu dijalankan di semua sistem operasi (multi plattform), aman
karena scriptnya di proses di server yang tidak dapat dilihat dari sisi client (web browser).
Tools Yang Digunakan

Beberapa tools yang digunakan untuk membangun aplikasi berbasis web ( web development )
1.Macromedia Dreamweaver
2.MS Visual Studio
3.Netbeans
4.Dll

Beberapa tools pendukung lain:

1.Web Server, contoh: Apache, ISS, dll
2.Web Browser, contoh : Internet Explorer, Mozila Firefox, Google Chrome, dll
3.Database, contoh: MS SQL Server, Mysql, Postgresql, Firebird, dll
Aplikasi Dekstop vs Aplikasi Web

Aplikasi Dekstop 
Merupakan aplikasi klien server
Aplikasi disimpan di masing-masing klien
Database biasanya di sisi server
Data tidak otomatis real time, jika jarak antara klein dengan server berjauhan, contohnya
berbeda kota.
Ablikasi Web 
Aplikasi dan Database biasanya disimpan si sisi server
Semua klien menjalankan aplikasi menggunakan web browser
Bisa dibangun dengan multi platform pada sisi klien
Kebutuhan data dapat real time karena terpusat
Kelebihan Aplikasi Dekstop 
Pada aplikasi dekstop ada proses compile, jadi lebih aman ( source code tidak terbuka ).
Dari sisi tampilan ( user interface ) lebih menarik.
Kelemahan Aplikasi Dekstop 
Maintenance aplikasi lebih sulit, karena jika ada bugs atau update aplikasi, harus diinstall ke semua klien.
Pengembangan aplikasi biasanya lama.

Kelebihan Aplikasi Web 

Pengembangan aplikasi cepat karena tidak perlu adanya proses kompilasi ( contoh pada php ).
Maintenance aplikasi lebih mudah, cukup update pada sisi server saja.
Kelemahan Aplikasi Web
Source code terbuka ( pada php ), kurang aman ( walaupun ada teknologi decode ).
Dari sisi tampilan, tidak semenarik aplikasi dekstop.
Web Statis vs Web Dinamis

Web Statis
Adalah sebuah website dimana tampilan halamannya tidak berubah-ubah. Website statis ini biasanya
jarang di update/diperbaharui, baik isi maupun tampilannya. Kalaupun di update, itu sangat jarang dan
dalam waktu-waktu tertentu saja. Biasanya website statis ini tidak menyediakan kolom untuk
berkomentar bagi para pengunjungnya.
Dari segi jumlah halamannya, website statis ini juga sangat terbatas halamannya. Informasi yang ada
pada halamannya hanya informasi yang sudah tetap. Jadi dapat disimpulkan, website statis ini hampir
sama dengan brosur. Namun yang membedakannya adalah, brosur berupa cetakan dan biasanya
disebarkan, sedangkan website statis hanya dapat diakses melalui internet.
Website statis biasanya dipergunakan untuk website company profile, personal profile, penawaran
produk.
Web Dinamis
Adalah kebalikan dari website statis. Website dinamis berarti halaman dan isinyapun dapat berubah–
ubah. Kebanyakan website saat ini adalah website dinamis karena isinya dapat di update setiap hari.
Sebagai contohnya adalah website-website berita, blog, tutorial, situs social networking, dll.
Dari keterangan diatas, dapat diambil kesimpulan, website dinamis itu mempunyai ciri-ciri sebagai
berikut :
•Isi/konten selalu di update sehingga jumlah halamannya terus bertambah
•Mudah dalam menambahkan konten baru karena memang ini yang diutamakan
•Konten terbaru selalu berada di urutan pertama karena untuk memperjelas konten yang
diupdate.
•Pengunjung dapat memberikan komentar pada sebuah konten yang di sajikan. apalagi
kalau berisi tutorial maka pengunjung bisa bertanya ketika ada yang belum paham
HTML & HTTP

HTML
(Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari
sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut
dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang
digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet
yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai
dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan
browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh
aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa
memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh
jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya
dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi
cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk
menonaktifkan cetak tebal tersebut.
HTML ( Lanjutan )
Secara garis besar, terdapat 4 jenis elemen dari HTML:
Structural: tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan
memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan
sebagai Heading 1
Presentational: tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks
tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai
digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
Hypertext: tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke
dokumen lain (contoh, <a href="http://www.ilmukita.com/">IlmuKita</a> akan menampilkan
IlmuKita sebagai sebuah hyperlink ke URL tertentu),
Elemen widget: yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis
horizontal (<hr>).
HTML ( Lanjutan )
Beberapa hal yang merupakan dasar dari HTML adalah:
Hypertext
Tags dan elements
Text formatting
Lists, hyperlinks, images
Table, frames
Cascanding style sheets
HTTP ( Hypertext Transfer Protocol )
Merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser.
Protokol ini mentransfer data-data web yang ditulis atau berformat HTML. Protocol ini memiliki
fitur-fitur Web-specific yang berjalan pada bagian teratas dari dua lapisan protokol lain, TCP dan IP.
TCP adalah sebuah protokol yang bertanggung jawab memastikan file telah dikirim dari akhir network
telah lengkap dikirmkan, berhasil pada tujuannya. IP merupakan sebuah protokol yang mengarahkan
(routing) file dari satu host ke host lain pada jalannya untuk tujuan. HTTP mengguanakan dua
protokol ini untuk memastikan bahwa permintaan dan respon telah lengkap dikirimkan diantara
masing-masing akhir komunikasi.
HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser
sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda
mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan
mengirimkan perintah HTTP ke web server.
Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah
yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil
aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
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. URL pertama kali diciptakan oleh Tim
Berners-Lee pada tahun 1991 agar penulis-penulis dokumen dokumen dapat mereferensikan pranala
ke World Wide Web. Sejak 1994, konsep URL telah dikembangkan menjadi istilah Uniform Resource
Identifier (URI) yang lebih umum sifatnya.

FTP( File Transfer Protocol )

Adalah suatu protokol yang berfungsi untuk tukar-menukar file dalam suatu network yang
menggunakan TCP koneksi bukan UDP.
Dua hal yang penting dalam FTP adalah FTP Server dan FTP Client.
FTP server adalah suatu server yang menjalankan software yang berfungsi untuk memberikan layanan
tukar menukar file dimana server tersebut selalu siap memberikan layanan FTP apabila mendapat
permintaan (request) dari FTP client.
FTP ( Lanjutan )
FTP client adalah computer yang merequest koneksi ke FTP server untuk tujuan tukar menukar file.
Setelah terhubung dengan FTP server, maka client dapat men-download, meng-upload, merename,
men-delete, dll sesuai dengan permission yang diberikan oleh FTP server.
Tujuan dari FTP server adalah sebagai berikut :
Untuk tujuan sharing data
Untuk menyediakan indirect atau implicit remote computer
Untuk menyediakan tempat penyimpanan bagi user
Untuk menyediakan transfer data yang reliable dan efisien
FTP ( Lanjutan )
FTP sebenarnya cara yang tidak aman dalam mentransfer suatu file karena file dikirimkan tanpa di-
enkripsi terlebih dahulu tetapi melalui clear text. Mode text yang dipakai untuk transfer data adalah
format ASCII atau format binary. Secara default, FTP menggunakan mode ASCII dalam transfer data.
Karena pengirimannya tanpa enkripsi, username, password, data yang di transfer, maupun perintah
yang dikirim dapat di sniffing oleh orang dengan menggunakan protocol analyzer (sniffer). Solusi
yang digunakan adalah dengan menggunakan SFTP (SSH FTP) yaitu FTP yang berbasis pada SSH
atau menggunakan FTPS (FTP over SSL) sehingga data yang dikirim terlebih dahulu di enkripsi.
Domain
Nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau
email server di jaringan komputer ataupun internet. Nama domain berfungsi untuk mempermudah
pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama
server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP
address. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti
contohnya “wikipedia.org”. Nama domain kadang-kadang disebut pula dengan istilah URL, atau
alamat website.
Sederhananya domain merupakan nama unik/alamat untuk website anda, domain biasanya diakhiri
dengan .com, .net, .org, .biz, .asia, .us dan lain-lain.
Hosting
Biasa disebut dengan Web-Hosting, adalah perusahaan yang menyediakan layanan dan penyimpanan
Web bagi perorangan atau perusahaan. Dengan kata lain Hosting adalah salah satu bentuk layanan
penyewaan ruang simpan data (space) yang digunakan untuk menyimpan data – data website agar
halaman website tersebut bisa diakses dari mana saja. Data web tersebut meliputi file – file html, php
script, cgi script, css, image, database, dan file lain yang dibutuhkan untuk menampilkan halaman
web.
Sebuah server web hosting akan online 24 jam sehari, sehingga memungkinkan kita bisa membuka
web site yang dihosting kapanpun. Seperti biasa bila ada pertanyaan mengenai Domain dan Hosting
ini silahkan diskusikan di form komentar.
GET & POST
GET adalah method HTTP paling sederhana dan digunakan sebagian besar untuk meminta resource
tertentu dari server, apakah berupa halaman web, file gambar grafis, atau sebuah dokumen, dan lain-
lain.
GET dapat juga digunakan untuk mengirim data di atas server, meskipun demikian hal itu mempunyai
batasan-batasan. Jumlah total karakter yang dapat dienkapsulasi ke dalam permintaan GET adalah
terbatas, sehingga untuk situasi dimana banyak data perlu dikirimkan ke server, tidak semua pesan
dapat disampaikan.
Batasan lain method permintaan GET ketika mengirim data adalah data yang Anda kirim
menggunakan method ini ditambahkan pada URL yang Anda kirim ke server. (Untuk sekarang,
asumsikan URL sebagai alamat unik yang akan Anda kirim ke server sebagai penandaan lokasi yang
Anda minta). Salah satu permasalahannya adalah URL dari beberapa permintaan yang Anda inginkan
ditampilkan pada bar browser pada beberapa browser. Hal ini berarti, bahwa beberapa data sensitif
seperti password atau informasi kontak (contact information) dapat diterlihat oleh siapapun.
Keuntungan dari penggunaan GET dalam pengiriman data di atas server adalah permintaan URL dari
permintaan GET dapat dibookmark oleh browser. Hal ini berarti bahwa user dapat dengan mudah
membookmark permintaannya dan mengakses setiap saat dari pada melalui proses tiap waktu. Hal ini
juga dapat membahayakan; jika bookmark secara fungsional bukan merupakan sesuatu yang Anda
inginkan pada user Anda, sebagai gantinya menggunakan method lain.
Pada permintaan GET, parameters disandikan sebagai nama dan nilai. Anda tidak mengirim nilai data
ke server tanpa mengetahui secara spesifik untuk apakah nilai tersebut. Nama dan nilai disandikan
sebagai berikut :
name=value
Dan juga, jika terdapat lebih dari satu kumpulan parameter, akan dipisahkan menggunakan tanda
ampersand (&). Sehingga , dalam hal ini, nama-nama parameter yang kita spesifikkan ke server adalah
newsItemID dan filter, dengan nilai 2359 dan true, berturut-turut.
POST . Jenis lain dari method permintaan yang pasti akan digunakan adalah permintaan POST. Jenis
permintaan ini didesain seperti browser dapat membuat permintaan kompleks dari server. Mereka
didesain sehingga user, melalui browser, dapat mengirim banyak data ke server. Form kompleks
secara umum dicapai dengan menggunakan permintaan POST, sebagaimana form sederhana yang
memelukan proses upload file ke server.
Satu perbedaan yang nyata antara method GET dan POST terletak pada cara mengirimkan data ke
server. Seperti yang dinyatakan sebelumnya, GET hanya menambahkan data ke URL yang akan
mengirim. POST, di sisi lain, mengenkapsulasi atau menyembunyikan data di dalam body pesan
(message body) yang dikirim. Ketika server menerima permintaan dan menentukan bahwa itu
merupakan sebuah permintaan POST, dapat dilihat dari body pesan data tersebut.
HTTP Response
HTTP merespon dari server yang berisi headers dan body pesan, seperti yang permintaan HTTP
lakukan. Mereka menggunakan kumpulan header yang berbeda, meskipun demikian disini kita tidak
perlu terlalu dalam membahasnya secara detail. Cukup dengan mengatakan bahwa headers berisi
informasi tentang protokol HTTP yang digunakan pada server, sebagaimana tipe dari isi yang
dienkapsulasi ke dalam body pesan. Nilai dari tipe isi adalah MIME-type. Ini akan memberitahu
browser jika pesan berisi HTML, gambar, atau tipe lainnya.
Paket Instalasi

1.Install Paket Apache Web Server

2.Install Macromedia Dreamweaver
3.Testing run Apache dan Database
Contoh HTML Code

Struktur Dasar HTML

Contoh HTML Code

Menampilkan Link
Contoh HTML Code

Menampilkan List
Contoh HTML Code

Menampilkan Table
Contoh HTML Code

Menampilkan Gambar
TERIMA KASIH