0% menganggap dokumen ini bermanfaat (0 suara)

109 tayangan153 halaman

Modul Web - Teknokrat

Dokumen tersebut membahas pengenalan dasar tentang Internet, teknologi web, dan pemrograman berbasis web. Internet dijelaskan sebagai sistem komunikasi global yang menghubungkan komputer dan jaringan komputer di seluruh dunia menggunakan protokol TCP/IP. Dokumen ini juga membahas cara kerja teknologi web statis dan dinamis serta langkah-langkah pembuatan situs web mulai dari perencanaan, desain, pemrograman, pengujian, hingga

Diunggah oleh

Apri Jayadi

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

109 tayangan153 halaman

Modul Web - Teknokrat

Diunggah oleh

Apri Jayadi

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 153

PEMROGRAMAN

BERBASIS WEB

Disusun oleh :

Dedi Efendi, S.T.

Bandar Lampung
2007

Pemrograman Berbasis Web

Dedi Efendi, S.T.

KATA PENGANTAR
Teknologi Informasi di Indonesia kini sudah berkembang dengan baik.

Hal ini dapat

dilihat banyak bermunculan situs-situs web yang beroperasi dan menggunakan teknologi
Internet sebagai sarana komunikasi, informasi, dan edukasi.
Mencukupkan diri saja sebagai pengguna teknologi, tentu bukanlah pilihan yang tepat.
Satu-satunya cara agar kita dapat maju adalah menjadi bagian dari perkembangan
teknologi itu sendiri.
Panduan Praktikum Pemrograman Berbasis Web ini merupakan salah satu usaha
penyusun untuk pengajak pembaca, khususnya mahasiswa Perguruan Tinggi Teknokrat
untuk menjadi bagian dari perkembangan teknologi tersebut, dalam hal ini teknologi
web.
Penyusun berharap mudah-mudahan buku Panduan Praktikum ini dapat bermanfaat.
Saran dan kritik untuk perbaikan ke depan sangat penyusun harapkan.

Bandar Lampung, Maret 2007

Dedi Efendi, S.T.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

DAFTAR ISI
I.

PENGENALAN INTERNET
1.1 Internet
1.2 Keuntungan dan Kerugian Internet
1.3 Koneksi Ke Internet
1.4 Aplikasi Internet
1.4.1 WWW (World Wide Web)
1.4.2 Electronic Mail/Email/Messaging
1.4.3 File Transfer
1.4.4 Remote Login
1.4.5 IRC (Internet Relay Chat)
1.5 Surfing / Browsing
1.5.1 Istilah-Istilah Pada Web
1.5.2 Pengenalan Web Browser
1.5.3 Langkah-Langkah dalam Browsing
1.5.4 Menyimpan Halaman yang Aktif
1.5.4.1 Menyimpan Seluruh Infomasi
1.5.4.2 Menyimpan Sebagian Infomasi
1.5.4.3 Menyimpan Gambar/Images
1.5.5 Menemukan Informasi dengan Mesin Pencari (Search Engine)
1.6 Menggunakan Electronic Mail (E-mail)
1.6.1 Mendaftar di Yahoo
1.6.2 Membuka dan Mengirim Email
1.6.2.1 Membuka E-mail
1.6.2.2 Mengirim E-mail

1
1
2
2
3
3
4
5
6
7
7
7
8
9
10
10
10
11
11
13
13
14
15
16

II.

TEKNOLOGI WEB
2.1 Aplikasi Web
2.1.1 Web Statis
2.1.2 Web Dinamis
2.2 Teknologi Web Dinamis
2.2.1 Teknologi Web Pada Sisi Client (Client-Side Technology)
2.2.2 Teknologi Web pada Sisi Server (Server-Side Technology)

18
18
18
18
19
19
20

III.

PEMBANGUNAN SITUS WEB

3.1 Planning (Perencanaan)
3.1.1 Tujuan Pembuatan Situs Web
3.1.2 Pembuatan Sitemap (Peta Situs)
3.1.3 Pengumpulan Data
3.1.4 Pembuatan Jadwal Kerja (Time Schedule)
3.2 Designing (Perancangan)
3.3 Scripting (Pemrograman)
3.4 Testing (Pengujian)
3.5 Upload
3.6 Promoting (Promosi)
3.7 Maintenance (Pemeliharaan)

21
21
22
23
24
24
25
25
25
25
25
26

IV.

HTML
4.1 Pengenalan HTML
4.2 Tag
4.3 Struktur Dasar Dokumen HTML

27
27
27
27

Pemrograman Berbasis Web

4.4
4.5
4.6
4.7
4.8

4.9
4.10
4.11
4.12
4.13
4.14

4.15

4.16

4.17

Dedi Efendi, S.T.

Membuat Dokumen Web

Melihat Dokumen Web Pada Browser
Berpindah Ke Baris Berikutnya
Mengatur Peletakkan Teks
Mengatur Font
4.8.1 Mengatur Jenis Font
4.8.2 Mengatur Ukuran Font
4.8.3 Mengatur Warna Font
Memformat Teks
Membuat Garis Horisontal
Membuat Animasi Teks Berjalan
Mengatur Warna Latar Belakang
Membuat Paragraf
MEMBUAT LIST (DAFTAR ITEM)
4.14.1 Membuat List Dengan Bullet (Unordered-List)
4.14.2 Membuat List Dengan Nomor (Ordered-List)
4.14.3 List Berkalang
Menampilkan Gambar
4.15.1 Mengenal Jenis Gambar
4.15.2 Menampilkan Gambar
4.15.3 Mengatur Letak Gambar
4.15.4 Mengatur Ruang Gambar
4.15.5 Mengatur Gambar Latar Belakang
Menggunakan Tabel
4.16.1 Memberi Garis pada Tabel
4.16.2 Menentukan Warna Latar Belakang Tabel, Baris dan Sel
4.16.3 Mengatur Peletakkan Tabel dan Sel
4.16.4 Mengatur Lebar dan Tinggi Tabel dan Sel
4.16.5 Mengatur Jarak dalam Tabel
4.16.6 Menggabungkan Sel
Membuat Hyperlink
4.17.1 Hyperlink Ke Halaman Web
4.17.2 Hyperlink Kembali Ke Home Page
4.17.3 Hyperlink Antar Halaman
4.17.4 Hyperlink ke Situs Web Lain dan ke Alamat E-mail

28
29
30
30
31
31
32
32
33
34
35
36
37
38
38
39
41
43
43
43
45
46
46
47
47
48
49
50
51
52
54
54
55
56
58

CSS (CASCADING STYLE SHEETS)

5.1 Pengenalan CSS
5.2 Penulisan CSS
5.2.1 Inline Style
5.2.2 Internal Style
5.2.3 Eksternal Style
5.3 Penggunaan Kelas
5.4 Memformat Halaman Web Dengan CSS
5.4.1 Font Properties
5.4.2 Text properties
5.4.3 Background Properties
5.4.4 Margin Properties
5.4.5 Border Properties
5.4.6 Padding Properties

60
60
60
60
60
61
61
62
62
63
65
66
68
70

VI.

DESAIN WEB
6.1 Mengenal Macromedia Dreamweaver
6.2 Area Kerja Macromedia Dreamweaver MX 2004

72
72
72

Pemrograman Berbasis Web

VII.

Dedi Efendi, S.T.

6.3 Mendefinisikan Site

6.4 Merancang Halaman Web
6.5 Membuat Tabel

72
76
76

PENGENALAN PHP
7.1 Apa itu PHP ?
7.2 Instalasi
7.3 Penulisan Script PHP
7.3.1 Embedded Script
7.3.2 Non Embedded Script
7.4 Style Kode PHP

78
78
78
79
79
80
80

VIII. DASAR PEMROGRAMAN PHP

8.1 Variabel
8.2 Tipe Data
8.3 Konstanta
8.4 Operator
8.4.1 Operator Aritmetika
8.4.2 Operator Penugasan
8.4.3 Operator Pembanding
8.4.4 Operator Increment dan Decrement
8.4.5 Operator Logika
8.5 Struktur Kendali
8.6 Percabangan
8.6.1 Bentuk if
8.6.2 Bentuk if-else
8.6.3 Bentuk if-elseif
8.6.4 Bentuk switch
8.7 Pengulangan atau Looping
8.7.1 Pengulangan while
8.7.2 Pengulangan do-while
8.7.3 Pengulangan for
8.8 Array

82
82
82
83
84
86
86
87
87
87
88
88
88
89
91
92
87
93
94
95
96

IX.

PENANGANAN FORM DI PHP

9.1 Dasar Penggunaan Form
9.2 Memasukkan Data dengan Input
9.2.1 Memasukkan Data dengan Kotak Teks (Text Box)
9.2.2 Memasukkan Data dengan Kotak Password (Password Box)
9.2.3 Pemilihan Data dengan Tombol Radio (Radio Button)
9.2.4 Memasukkan Data dengan Kotak Cek (Checkbox)
9.3 Pemilihan Data dengan Kotak Combo (Combo Box)
9.4 Memasukkan Data dengan Textarea
9.5 Tombol Submit dan Reset
9.6 Penanganan Form

98
98
98
99
99
99
100
100
101
101
102

DATABASE MySQL
10.1 Pengenalan MySQL
10.2 Tipe Kolom Pada MySQL
10.2.1 Tipe Numerik
10.2.2 Tipe Tanggal dan Waktu
10.2.3 Tipe Data String

108
108
109
109
110
110

Pemrograman Berbasis Web

Dedi Efendi, S.T.

10.3 Manajemen Database MySQL dengan SQLyog

10.3.1 Koneksi ke MySQL Server
10.3.2 Menambah User Baru
10.3.3 Membuat Database Baru
10.3.4 Membuat Tabel dalam Database
10.3.5 Mengubah Struktur Tabel
10.3.6 Mengubah Nama Tabel
10.3.7 Menghapus Tabel
10.3.8 Menampilkan Data
10.3.9 Menipulasi Data

110
110
112
113
113
114
115
115
115
115

XI.

PHP dan DATABASE

11.1 Melakukan Koneksi Database MySQL
11.2 Pemilihan Database
11.3 Melakukan Query
11.4 Memproses Hasil
11.5 Menutup Koneksi
11.6 Contoh Aplikasi : Buku Tamu (Guest Book)
11.6.1 Membuat Database
11.6.2 Membuat Script untuk Koneksi ke Database MySQL
11.6.3 Membuat Form untuk Mengisi Buku Tamu
11.6.4 Menyimpan Isi Buku Tamu ke Database
11.6.5 Menampilkan Isi Buku Tamu

116
116
116
116
117
117
118
118
118
119
122
124

XII.

MANAJEMEN SESSION

128

12.1
12.2
12.3
12.4
12.5
12.6

Pengenalan Session
Membuat Session
Menyimpan Data dalam Session
Mendapatkan Data dalam Session
Menghapus Data dalam Session
Contoh Aplikasi : Sistem Login / Autentikasi
12.6.1 Membuat Tabel User pada Database
12.6.2 Koneksi ke Database MySQL
12.6.3 Membuat Form Login
12.6.4 Membuat Halaman untuk Memproses Form Login
12.6.5 Membuat Halaman untuk Menampilkan Pesan Login Salah
12.6.6 Membuat Script untuk Mengecek Apakah User Sudah Login
12.6.7 Membuat Halaman Menampilkan Daftar Isi Buku Tamu
yang Akan Dihapus
12.6.8 Membuat Halaman untuk Menampilkan Pesan Session
Salah
12.6.9 Membuat Halaman untuk Menampilkan Isi Buku Tamu
yang akan Dihapus
12.6.10 Membuat Halaman untuk Menghapus Isi Buku Tamu
12.6.11 Logout / Keluar dari Bagian Administrator

Daftar Pustaka

128
128
129
129
129
130
130
130
131
132
134
135
136
139
140
143
144
147

Pemrograman Berbasis Web

Dedi Efendi, S.T.

I. PENGENALAN INTERNET
1.1 Internet
Internet (Inter-Network) merupakan sistem komunikasi global yang menghubungkan
komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.

Internet

menyediakan akses untuk layanan telekomunikasi dan sumber daya informasi untuk
jutaan pemakainya yang tersebar di seluruh dunia.

Layanan Internet meliputi

komunikasi langsung (email, chat), diskusi (Usenet News, email, milis), sumber daya
informasi yang terdistribusi (World Wide Web, Gopher), remote login (Telnet), Lalu
lintas file (FTP), dan aneka layanan lainnya
Jaringan yang membentuk Internet bekerja berdasarkan suatu set protokol standar yang
digunakan untuk menghubungkan jaringan komputer dan mengalamati lalu lintas dalam
jaringan.

Protokol ini mengatur format data yang diijinkan, penanganan kesalahan

(error handling), lalu lintas pesan, dan standar komunikasi lainnya. Protokol standar
pada Internet dikenal sebagai TCP/IP (Transmission Control Protocol/Internet
Protocol).

Protokol ini memiliki kemampuan untuk bekerja diatas segala jenis

komputer, tanpa terpengaruh oleh perbedaan perangkat keras maupun sistem operasi
yang digunakan.

Gambar 1.1 Contoh Jaringan Internet

Sebuah sistem komputer yang terhubung secara langsung ke jaringan memiliki nama
domain dan alamat IP (Internet Protocol) dalam bentuk numerik dengan format tertentu
sebagai pengenal.

Internet juga memiliki gateway ke jaringan dan layanan yang

berbasis protokol lainnya.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

1.2 Keuntungan dan Kerugian Internet

Keuntungan Internet :
Menghubungkan jutaan komputer yang tersebar di seluruh dunia.
Tidak terikat dengan pada organisasi apapun.
Organisasi dapat bertukar informasi baik secara internal maupun eksternal.
Dapat digunakan untuk semua platform.
Dapat digunakan siapa saja untuk melakukan akses informasi apa saja dan bahkan
untuk melakukan transaksi bisnis.
Kerugian Internet :
Penipuan, perusakan informasi dan pengetahuan yang ada di Internet.
Pemasaran produk, layanan yang ilegal di Internet.
Pornografi.

1.3 Koneksi Ke Internet

Untuk tersambung ke jaringan Internet, pengguna harus mempunyai akses dengan cara
berlangganan ke perusahaan penyedia jasa Internet atau yang sering disebut dengan
Internet Service Provider (ISP). Media yang umum digunakan adalah melalui saluran
telepon (dikenal sebagai PPP, Point to Point Protocol).

Pengguna memanfaatkan

komputer yang dilengkapi dengan modem (modulator and demodulator) untuk

melakukan dial-up ke server milik ISP. Begitu tersambung ke server ISP, komputer si
pengguna sudah siap digunakan untuk mengakses jaringan Internet.

Pelanggan akan

dibebani biaya pulsa telepon plus layanan ISP yang jumlahnya bervariasi tergantung
lamanya koneksi.
Sambungan telepon via modem bukan satu-satunya cara untuk tersambung ke layanan
Internet.

Sambungan juga dapat dilakukan melalui ISDN (Integrated System Digital

Network), atau via satelit melalui VSAT (Very Small Aperture Terminal). Sayangnya,
kedua alternatif ini cukup mahal untuk ukuran pelanggan perorangan.
Dewasa ini saluran-saluran alternatif untuk akses Internet yang lebih terjangkau masih
terus dikembangkan. Diantara alternatif yang tersedia adalah melalui gelombang radio
(radio modem), lewat dedicated line (cable modem) atau lewat saluran TV kabel yang
saat ini sedang marak.

Alternatif lain yang saat ini sedang dikaji adalah dengan

menumpangkan aliran data pada saluran kabel listrik PLN. Di Indonesia, teknologi ini
sedang diuji cobakan oleh PLN di Jakarta, sementara di negara-negara maju konon
sudah mulai dimasyarakatkan.
2

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Belakangan, Internet juga dikembangkan untuk aplikasi wireless (tanpa kabel) dengan
memanfaatkan telepon seluler. Untuk ini digunakan protokol WAP (Wireless Aplication
Protocol).

WAP merupakan hasil kerjasama antar industri untuk membuat sebuah

standar yang terbuka (open standard) yang berbasis pada standar Internet, dan
beberapa protokol yang sudah dioptimasi untuk lingkungan wireless.

WAP bekerja

dalam modus teks dengan kecepatan sekitar 9,6 kbps.

Selain WAP, juga dikembangkan GPRS (General Packet Radio Service) sebagai salah satu
standar komunikasi wireless.

Dibandingkan dengan protokol WAP, GPRS memiliki

kelebihan dalam kecepatannya yang dapat mencapai 115 kbps dan adanya dukungan
aplikasi yang lebih luas, termasuk aplikasi grafis dan multimedia.

1.4 Aplikasi Internet

Internet sebenarnya mengacu kepada istilah untuk menyebut sebuah jaringan, bukannya
suatu aplikasi tertentu. Karenanya, Internet tidaklah memiliki manfaat apa-apa tanpa
adanya aplikasi yang sesuai. Internet menyediakan beragam aplikasi yang dapat
digunakan untuk berbagai keperluan. Setiap aplikasi berjalan diatas sebuah protokol
tertentu. Istilah "protokol" di Internet mengacu pada satu set aturan yang mengatur
bagaimana sebuah aplikasi berkomunikasi dalam suatu jaringan. Sedangkan software
aplikasi yang berjalan diatas sebuah protokol disebut sebagai aplikasi client.
1.4.1 WWW (World Wide Web)
Dewasa ini, WWW atau yang sering disebut sebagai "web" saja adalah merupakan
aplikasi Internet yang paling populer. Demikian populernya hingga banyak orang yang
keliru mengidentikkan web dengan Internet.
Secara teknis, web adalah sebuah sistem dimana informasi dalam bentuk teks, gambar,
suara, dan lain-lain yang tersimpan dalam sebuah Internet webserver dipresentasikan
dalam bentuk hypertext. Informasi di web dalam bentuk teks umumnya ditulis dalam
format HTML (Hypertext Markup Language). Informasi lainnya disajikan dalam bentuk
grafis (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek
multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).
Web dapat diakses oleh perangkat lunak web client yang secara populer disebut sebagai
browser. Browser membaca halaman-halaman web yang tersimpan dalam webserver
melalui protokol yang disebut HTTP (Hypertext Transfer Protocol).

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Gambar 1.3 Arsitektur Web

Sebagai

dokumen

hypertext,

dokumen-dokumen

web

dapat

memiliki

link

(sambungan) dengan dokumen lain, baik yang tersimpan dalam webserver yang sama
maupun di webserver lainnya. Link memudahkan para pengakses web berpindah dari
satu halaman ke halaman lainnya, dan "berkelana" dari satu server ke server lain.
Kegiatan penelusuran halaman web ini biasa diistilahkan sebagai browsing, ada juga
yang menyebutnya sebagai surfing (berselancar).
Seiring dengan semakin berkembangnya jaringan Internet di seluruh dunia, maka jumlah
situs web yang tersedia juga semakin meningkat. Hingga saat ini, jumlah halaman web
yang bisa diakses melalui Internet telah mencapai angka miliaran. Untuk memudahkan
penelusuran halaman web, terutama untuk menemukan halaman yang memuat topiktopik yang spesifik, maka para pengakses web dapat menggunakan suatu search engine
(mesin pencari). Penelusuran berdasarkan search engine dilakukan berdasarkan kata
kunci (keyword) yang kemudian akan dicocokkan oleh search engine dengan database
(basis data) miliknya. Dewasa ini, search engine yang sering digunakan antara lain
adalah Google (www.google.com) dan Yahoo (www.yahoo.com).
1.4.2 Electronic Mail/Email/Messaging
Email atau kalau dalam istilah Indonesia, surat elektronik, adalah aplikasi yang
memungkinkan para pengguna Internet untuk saling berkirim pesan melalui alamat
elektronik di Internet. Para pengguna email memilki sebuah mailbox (kotak surat)
elektronik yang tersimpan dalam suatu mailserver. Suatu Mailbox memiliki sebuah
alamat sebagai pengenal agar dapat berhubungan dengan mailbox lainnya, baik dalam
bentuk penerimaan maupun pengiriman pesan. Pesan yang diterima akan ditampung
dalam mailbox, selanjutnya pemilik mailbox sewaktu-waktu dapat mengecek isinya,
menjawab pesan, menghapus, atau menyunting dan mengirimkan pesan email.
4

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Dewasa ini, layanan email dapat dibedakan dalam dua basis, yaitu email berbasis client
dan email berbasis web. Bagi pengguna email berbasis client, aktifitas per-emailan
dilakukan dengan menggunakan perangkat lunak email client, misalnya Eudora atau
Outlook Express. Perangkat lunak ini menyediakan fungsi-fungsi penyuntingan dan
pembacaan email secara offline (tidak tersambung ke Internet), dengan demikian, biaya
koneksi ke Internet dapat dihemat. Koneksi hanya diperlukan untuk melakukan
pengiriman (send) atau menerima (recieve) email dari mailbox.
Sebaliknya, bagi pengguna email berbasis web, seluruh kegiatan peremailan harus
dilakukan melalui suatu situs web. Dengan demikian, untuk menggunakannya haruslah
dalam keadaan online. Alamat email dari ISP (Internet Service Provider) umumnya
berbasis client, sedangkan email berbasis web biasanya disediakan oleh penyelenggara
layanan

gratis

seperti

Hotmail

(www.hotmail.com)

atau

YahooMail

(mail.yahoo.com).
Beberapa pengguna email dapat membentuk kelompok tersendiri yang diwakili oleh
sebuah alamat email. Setiap email yang ditujukan ke alamat email kelompok akan
secara otomatis diteruskan ke alamat email seluruh anggotanya. Kelompok semacam ini
disebut sebagai milis (mailing list). Milis biasanya dimanfaatkan untuk keperluan diskusi
atau pertukaran informasi. Sebuah milis biasanya didirikan atas dasar kesamaan minat
atau kepentingan diantara para anggotanya. Saat ini, salah satu server milis yang cukup
banyak digunakan adalah Yahoogroups (www.yahoogroups.com).
1.4.3 File Transfer
Fasilitas ini memungkinkan para pengguna Internet untuk melakukan pengiriman
(upload) atau menyalin (download) sebuah file antara komputer lokal dengan komputer
lain yang terhubung dalam jaringan Internet. Protokol standar yang digunakan untuk
keperluan ini disebut sebagai File Transfer Protocol (FTP)
FTP umumnya dimanfaatkan sebagai sarana pendukung untuk kepentingan pertukaran
maupun penyebarluasan sebuah file melalui jaringan Internet. FTP juga dimanfaatkan
untuk melakukan prose upload suatu halaman web ke webserver agar dapat diakses oleh
pengguna Internet lainnya.
Secara teknis, aplikasi FTP disebut sebagai FTP client, dan yang populer digunakan saat
ini antara lain adalah Cute FTP dan WS_FTP, Aplikasi-aplikasi ini umumnya
dimanfaatkan untuk transaksi FTP yang bersifat dua arah (active FTP). Modus ini

Pemrograman Berbasis Web

Dedi Efendi, S.T.

memungkinkan pengguna untuk melakukan baik proses upload maupun proses download.
Tidak semua semua server FTP dapat diakses dalam modus active. Untuk mencegah
penyalahgunaan yang dapat berakibat fatal bagi sebuah server FTP--maka pengguna FTP
untuk modus active harus memiliki hak akses untuk mengirimkan file ke sebuah server
FTP. Hak akses tersebut berupa sebuah login name dan password sebagai kunci untuk
memasuki sebuah sistem FTP server. Untuk modus passive, selama memang tidak ada
restriksi dari pengelola server, umumnya dapat dilakukan oleh semua pengguna dengan
modus anonymous login (log in secara anonim). Kegiatan mendownload software dari
Internet misalnya, juga dapat digolongkan sebagai passive FTP.
1.4.4 Remote Login
Layanan remote login mengacu pada program atau protokol yang menyediakan fungsi
yang memungkinkan seorang pengguna Internet untuk mengakses (login) sebuah
terminal (remote host) dalam lingkungan jaringan Internet. Dengan memanfaatkan
remote login, seorang pengguna Internet dapat mengoperasikan sebuah host dari jarak
jauh tanpa harus secara fisik berhadapan dengan host bersangkutan. Dari sana ia dapat
melakukan pemeliharaan (maintenance), menjalankan sebuah program atau malahan
menginstall program baru di remote host.
Protokol yang umum digunakan untuk keperluan remote login adalah Telnet
(Telecommunications Network). Telnet dikembangkan sebagai suatu metode yang
memungkinkan sebuah terminal mengakses resource milik terminal lainnya (termasuk
hard disk dan program-program yang terinstall didalamnya) dengan cara membangun
link melalui saluran komunikasi yang ada, seperti modem atau network adapter. Dalam
hal ini, protokol Telnet harus mampu menjembatani perbedaan antar terminal, seperti
tipe komputer maupun sistem operasi yang digunakan.
Aplikasi Telnet umumnya digunakan oleh pengguna teknis di Internet. Dengan
memanfaatkan Telnet, seorang administrator sistem dapat terus memegang kendali atas
sistem yang ia operasikan tanpa harus mengakses sistem secara fisik, bahkan tanpa
terkendala oleh batasan geografis.
Namun demikian, penggunaan remote login, khususnya Telnet, sebenarnya mengandung
resiko, terutama dari tangan-tangan jahil yang banyak berkeliaran di Internet. Dengan
memonitor lalu lintas data dari penggunaan Telnet, para cracker dapat memperoleh
banyak informasi dari sebuah host, dan bahkan mencuri data-data penting sepert login
name dan password untuk mengakses ke sebuah host. Kalau sudah begini, mudah saja
6

Pemrograman Berbasis Web

Dedi Efendi, S.T.

bagi mereka-mereka ini untuk mengambil alih sebuah host. Untuk memperkecil resiko
ini, maka telah dikembangkan protokol SSH (secure shell) untuk menggantikan Telnet
dalam melakukan remote login. Dengan memanfaatkan SSH, maka paket data antar host
akan dienkripsi (diacak) sehingga apabila "disadap" tidak akan menghasilkan informasi
yang berarti bagi pelakunya.
1.4.5 IRC (Internet Relay Chat)
Layanan IRC, atau biasa disebut sebagai "chat" saja adalah sebuah bentuk komunikasi di
intenet yang menggunakan sarana baris-baris tulisan singkat yang diketikkan melalui
keyboard. Dalam sebuah sesi chat, komunikasi terjalin melalui saling bertukar pesanpesan singkat. kegiatan ini disebut chatting dan pelakunya disebut sebagai chatter.
Kegiatan chatting membutuhkan software yang disebut IRC Client, diantaranya yang
paling populer adalah software mIRC.
Dalam sebuah sesi chatting, para chatter dapat saling berkomunikasi secara
berkelompok dalam suatu chat room dengan membicarakan topik tertentu atau
berpindah ke modus private untuk mengobrol berdua saja dengan chatter lain.
Belakangan, dengan semakin tingginya kecepatan akses Internet, maka aplikasi chat
terus dikembangkan hingga komunikasi terjadi tidak hanya melalui tulisan namun juga
melalui

suara

(teleconference),

bahkan

melalui

gambar

dan

suara

sekaligus

(videoconference).
1.5 Surfing / Browsing
Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web.
Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga
gambar-gambar yang di tata sedemikian rupa sehingga selalu membuat betah netter
untuk surfing berjam-jam. Karena itu para netter harus sangat memperhitungkan
rencana web mana saja yang akan dikunjungi atau batasi informasi yang ingin diakses,
karena bila tidak netter akan tersesat kedalam rimba informasi yang maha luas.
1.5.1 Istilah-Istilah Pada Web
Istilah-istilah yang sering digunakan pada Web adalah :
Halaman web (web page) adalah halaman yang digunakan untuk menampilkan
informasi-informasi yang terdapat di web.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Situs web (web site) adalah sekumpulan halaman web milik seseorang, perusahaan
atau instansi yang dikumpulkan dan diletakkan dalam web server.
Homepage adalah istilah untuk menyebut halaman pertama yang akan muncul jika
sebuah situs web diakses.
Hyperlink atau Link adalah penghubung antar halaman web.
URL (Uniform Resource Locator) adalah alamat suatu dokumen atau situs web yang
bersifat unik dan khas, contoh :
http://www.ilmukomputer.com
http://64.233.167.99
http://www.dipendalampung.org/ profil/sejarah.php
www.detik.com
1.5.2 Pengenalan Web Browser
Web Browser atau browser saja adalah sebuah program yang digunakan untuk
menampilkan halaman web.

Browser berkomunikasi dengan web server melalui

protokol HTTP, yang membaca dan menerjemahkan bahasa HTML dan data gambar
untuk ditampilkan secara visual sehingga informasi yang ada dapat dibaca.

Contoh

browser : Internet Explorer, Netscape, Opera, Mozilla, Firefox, Safari, Lynk, dll.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Perhatikan gambar diatas, secara umum jendela Internet explrorer terdiri dari empat
bagian utama, yaitu
Menu Bar, berisi sederetan menu yang akan membantu kita dalam proses surfing di
Internet. Setiap menu mempunyai sub menu dan fungsi sesua dengan nama
menunya.
Tool Bar, terdiri dari icon-icon standar yang akan sering digunakan disaat kita
mengakses Internet.
Back : kembali ke halaman sebelumnya yang telah diakses
Forward : bila telah kembali kehalaman sebelumnya dengan Button Back, maka
untuk Maju ke halaman berikutnya gunakan tombol ini.
Stop : digunakan untuk menghentikan proses penampilan situs web yang telah
diketik pada address bar.
Refresh : digunakan untuk mengulangi kembali proses penampilan situs web.
Home : digunakan untuk kembali ke halaman awal dari Internet explorer.
Search : digunakan untuk menampilkan jendela pencarian yang disediakan oleh
Internet explorer.
Favorites : digunakan untuk daftar alamat situs web yang kita sukai (sering
dikunjungi), agar memudahkan kita untuk membukanya kembali.
History : digunakan untuk melihat daftar alamat situs yang pernah dikunjungi.
Address Bar, digunakan untuk mengetikkan alamat situs web yang akan dikunjungi.
Status Bar, berfungsi untuk menampilkan alamat dari hyperlinks yang yang sedang
disorot.
1.5.3 Langkah-Langkah dalam Browsing
Langkah-langkah dalam browsing adalah :
1. Klik menu Start, sehingga muncul beberapa menu. Kemudian Pilih Program dan Klik
Internet Explorer.
2. Pastikan nama situs yang akan Anda browsing, misalnya elearning ilmu komputer.
3. Ketikkan nama situs tersebut (www.ilmukomputer.com) pada kolom address.

4. Tekan 'enter' atau klik tombol

5. Tunggu beberapa saat hingga tampilan keseluruhan selesai dan tertulis 'Done' di
Status Bar. Tampilannya akan seperti di bawah ini :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

6. Jika ingin membuka halaman baru dengan page yang sama, dapat dilakukan dengan
cara: klik File pada menu, klik New, dan klik Window atau dengan Menekan tombol
Ctrl+N.
7. Jika sudah selesai, Internet Explorer ditutup dengan cara mengklik Close'pada menu
file.
1.5.4 Menyimpan Halaman yang Aktif
1.5.4.1 Menyimpan Seluruh Infomasi
Untuk menyimpan seluruh informasi yang diperoleh dari suatu situs, dapat dilakukan
dengan cara :
1. Klik menu File dan pilih Save As, muncul kotak dialog Save As
2. Tentukan lokasi penyimpanannya, apakah diharddisk atau didisket
3. Pada kota Save As type, pilih web page, HTML only jika ingin menyimpan teksnya
saja atau pilih Web Page, Complete untuk menyimpan seluruh isi web site termasuk
images (ukuran file menjadi besar).
4. Klik tombol Save untuk melakukan proses penyimpanan
1.5.4.2 Menyimpan Sebagian Infomasi
Untuk menyimpan sebagian informasi pada suatu situs, dapat dilakukan dengan cara :
1. Bloklah terlebih dahulu data yang akan disimpan, dengan cara klik diawal data yang
akan disimpan dan geser tombol mouse ke akhir data.
2. Pilih Edit dan klik Copy (tekan Ctrl+C).

Pemrograman Berbasis Web

Dedi Efendi, S.T.

3. Aktifkan MS-Word.
4. Pilih Edit dan klik Copy (tekan Ctrl+V).
Maka data yang diblok tadi akan berpindah ke format MS-Word, kita bisa melakukan
pengeditan seperlunya. Simpanlah hasil pengeditan tersebut sebagaimana anda
menyimpan dokumen Word biasa.
1.5.4.3 Menyimpan Gambar/Images
Untuk menyimpan gambar pada suatu situs, dapat dilakukan dengan cara :
1. Klik kanan diatas gambar/image yang akan disimpan.
2. Klik pilihan Save Picture as.
3. Tentukan lokasi penyimpanan file tersebut.
4. Pada kotak file name, ketikkan nama file tersebut.
5. Pada Save as type, tentukan tipe file yang akan disimpan.
6. Klik tombol Save untuk melakukan proses penyimpanan.
1.5.5 Menemukan Informasi dengan Mesin Pencari (Search Engine)
Seperti telah dikemukakan diatas, Internet adalah gudangnya informasi, mulai dari halhal yang kecil sampai pada hal-hal yang diluar pikiran kita semuanya ada diInternet.
Tinggal bagaimana caranya kita memanfaatkannya. Diantara jutaan bahkan milyaran
informasi yang ada di Internet, tentu kita akan kesulitan untuk mencari informasi
tertentu.

Untuk itulah mesin pencari (Search Engine) sangat berperan dalam

mencarikan informasi yang dibutuhkan.

Banyak sekali situs yang berfungsi sebagai mesin pencari di Internet saat ini,
diantaranya

adalah

www.yahoo.com,

www.google.com,

www.catcha.co.id,

www.incari.com, www.excite.com, www.searchindonesia.com, www.looksmart.com,

www.naver.co.id, www.altavista.com dan masih banyak yang lainnya. Diantara sekian
banyak

mesin

pencari,

disarankan

anda

menggunakan

www.yahoo.com

atau

www.google.com, karena situs ini lebih padat informasi dan selalu diupdate.
Adapun cara menggunakan mesin pencari ini adalah sebagai berikut : (kita gunakan
www.google.com untuk mencari informasi tentang teknologi web).
1. Aktifkan browser Internet Explorer anda.
2. Pada kotak Address, ketikkan www.google.com
3. Tekan tombol ENTER atau Klik GO. Tunggu hingga tampil situs google tersebut.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4. Setelah tampil situs google, ketikkan kata kunci teknologi web pada kotak
berwarna, lalu tekan ENTER atau klik Google Search, lihat gambat berikut :

5. Tunggu beberapa saat, maka mesin pencari Google akan menampilkan daftar situs
dan link yang menggunakan kata teknologi web dalam situsnya.

Lihat hasil

berikut :

6. Gunakan vertikal scrol bar untuk menggeser layar kebawah, kliklah daftar link yang
anda inginkan, maka anda akan dibawa menuju ke alamat link tersebut.
Dengan cara yang sama, anda juga dapat mencari informasi tentang apa saja, misalnya
anda ditugaskan oleh dosen untuk mencari data keuangan atau profil suatu perusahaan
di Internet. Maka langkah pertama anda harus tahu alamat situs web dari perusahaan
tersebut, kalau tidak tahu, gunakanlah mesin pencari ini. Mesin pencari ini akan selalu
membantu anda kapan saja anda butuh.
12

Pemrograman Berbasis Web

Dedi Efendi, S.T.

1.6 Menggunakan Electronic Mail (E-mail)

Pada kesempatan ini, kita mencoba membuat e-mail berbasis web, dimana kita akan
memanfaatkan fasilitas email gratis dari www.yahoo.com.
1.6.1 Mendaftar di Yahoo
Langkah-langkah untuk membuat e-mail di Yahoo adalah :
1. Klik browser Internet Explorer atau
2. Ketik alamat yang diinginkan, yaitu http://mail.yahoo.com

3. Kemudian klik SIGN UP NOW.

4. Maka akan muncul halaman berikut :

5. Anda pilih Free Yahoo! Mail dan klik SIGN UP NOW.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

6. Setelah tampilan berikutnya terbuka anda dapat mengisi formulir yang telah
tersedia. Seperti gambar dibawah ini :

7. Kemudian setelah formulir terisi kliklah SUBMIT THIS FORM.

8. Apabila proses pendaftaran berhasil maka akan muncul halaman berikut :

1.6.2 Membuka dan Mengirim Email

Setelah anda mendaftar dan memiliki ID di Yahoo, anda dapat membuka dan mengirim
E-mail.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

1.6.2.1 Membuka E-mail

Langkah-langkah untuk membuka e-mail di Yahoo adalah :
1. Klik browser Internet Explorer.
2. Ketik alamat http://mail.yahoo.com.
3. Masukkan Yahoo ID dan Password lalu tekan Sign In. Maka akan muncul halaman
sebagai berikut :

4. Setelah itu klik Check E-mail.

5. Klik Inbox. Maka akan muncul halaman sebagai berikut :

6. Klik Subject E-mail yang ada pada inbox.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

1.6.2.2 Mengirim E-mail

Langkah-langkah untuk mengirim e-mail di Yahoo adalah :
1. Klik Compose
2. Apabila anda ingin mengirim email anda dapat mengisi kolom yang tersedia yaitu :

To : Alamat email yang dituju

CC : Alamat Lain (surat berantai) BCC : Alamat yang lain lagi
Subject : Hal Surat / E-mail
Isi E-mail
3. setelah anda selesai mengisi kolom-kolom tersebut anda dapat mengirimnya dengan
mengklik SEND.
4. Apabila anda menerima E-mail dan ingin mengirimnya dengan cepat tanpa membuka
tampilan sebelumnya dan mengklik Compose anda dapat menggunakan button
Replay ataupun Forward
Melalui E-mail kita juga bisa mengirim file yaitu dengan cara:
1. klik ATTACHMENTS, maka akan muncul tampilan seperti berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

2. klik Browse, pilih file yang diinginkan.

3. klik Attach file.
4. kemudian klik Done.
5. Akan ditampilkan window Compose, klik Send.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

II. TEKNOLOGI WEB

2.1 Aplikasi Web
Pada awalnya aplikasi Web dibangun hanya dengan menggunakan HTML, pada
perkembangan berikutnya, sejumlah script dan objek dikembangkan untuk memperluas
kemampuan HTML. Pada saat ini, banyak script seperti itu; antara lain yaitu PHP, JSP,
dan ASP, sedangkan contoh yang berupa objek adalah applet (Java).
Aplikasi Web sendiri dapat dibagi menjadi :
Web Statis
Web Dinamis
2.1.1 Web Statis
Web statis dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi ini terletak
pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti
setiap perubahan yang terjadi.

Gambar 1.5 Arsitektur web statis

2.1.2 Web Dinamis
Web dinamis tidak hanya dibentuk dengan menggunakan HTML saja tetapi menggunakan
perangkat lunak tambahan (middleware), perubahan informasi dalam halaman-halaman
web dapat ditangani melalui perubahan data, bukan melalui perubahan program.
Sebagai implementasinya, aplikasi Web dapat dikoneksikan ke database, dengan
demikian perubahan informasi dapat dilakukan oleh operator atau yang bertanggung
18

Pemrograman Berbasis Web

Dedi Efendi, S.T.

jawab terhadap kemutakhiran data, dan tidak menjadi tanggung jawab programmer
atau Webmaster.

Gambar 1.6 Arsitektur Web dinamis

Pengertian Web dinamis terkadang diartikan sebagai halaman yang dilengkapi dengan
animasi gambar, selain dapat berinteraksi dengan basis data.

2.2 Teknologi Web Dinamis

Dari sisi teknologi yang digunakan untuk membentuk Web dinamis, terdapat dua macam
pengelompokkan, yaitu :
2.2.1 Teknologi Web Pada Sisi Client (Client-Side Technology)
Teknologi Web pada sisi client diimplementasikan dengan mengirimkan kode perluasan
HTML atau program tersendiri dan HTML ke client. Client-lah yang bertanggung jawab
dalam melakukan proses terhadap seluruh kode yang diterima.
Kelebihan teknologi web pada sisi client adalah memungkinkan penampilan yang bersifat
dinamis, misalnya menampilkan jam yang terus-menerus berubah ataupun membuat
animasi gambar yang mengikuti gerakan penunjuk mouse.

Sedangkan kelemahannya

adalah terdapat kemungkinan bahwa browser pada client tidak mendukung fitur kode
perluasan HTML, sebagai contoh kode VBScript yang dilekatkan pada kode HTML tidak
akan berfungsi sekiranya browser yang digunakan client tidak mendukungnya.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Yang termasuk dalam teknologi web pada sisi klien adalah :

Control ActiveX
JavaScript
Java Applet
VBScript
2.2.2 Teknologi Web pada Sisi Server (Server-Side Technology)
Teknologi Web pada sisi server memungkinkan pemrosesan kode di dalam server,
kemudian server mengirimkan hasilnya pada client dan client hanya menampilkan
isinya.
Keuntungan menggunakan teknologi Web pada sisi server adalah :
Tingkat keamanan tinggi.
Mencegah masalah ketidakkompatibelan browser.
Dapat mengakses database.
Membuat tampilan web menjadi interaktif.
Mencegah client mengetahui rahasia kode karena kode yang diberikan ke klien
berbeda dengan kode asli pada server.
Sedangkan kelemahan pendekatan ini adalah beban kerja server menjadi lebih berat
sehingga memerlukan hardware dan sistem operasi yang yang powerful.
Contoh teknologi Web yang berjalan di server adalah :
Common Gateway Interafce (CGI)
Active Server Pages (ASP)
Java Servlet
Java Server Page (JSP)
PHP

Pemrograman Berbasis Web

Dedi Efendi, S.T.

III. PEMBANGUNAN SITUS WEB

Pembangunan suatu situs sama seperti pembangunan suatu aplikasi perangkat lunak
(Software). Ada tahapan-tahapan yang harus dilakukan untuk membuat suatu sistem
situs.
Setiap tahapan yang telah selesai dilakukan, harus dilakukan analisa apakah sistem yang
sedang dibangun sudah berjalan dengan baik, secara garis besar tahapan dalam
pembangunan situs sebagai berikut :

Gambar 2.1 Tahapan Pembangun Situs

Gambar anak panah pada Gambar 2.1 menunjukkan jika terjadi kesalahan atau masalah
pada sistem situs, tidak perlu mengulang dari tahapan awal, tetapi hanya mengulang
pada tahapan yang ingin diperbaiki saja.

3.1 Planning (Perencanaan)

Perencanaan adalah tahap yang harus dilakukan sebelum mulai membuat website atau
situs web. Perencanaan harus disiapkan jauh sebelum tahap perancangan dimulai dan
harus dipersiapkan dengan baik.

Karena dengan perencanaan dan persiapan yang

matang, tahap perancangan akan menjadi lebih mudah dilakukan.

Beberapa hal yang harus dipikirkan atau dipersiapkan pada tahap perencanaan adalah :
a. Menentukan tujuan dari situs web yang akan dibuat serta target yang akan dicapai
setelah situs web selesai dibuat.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

b. Menentukan siapa yang akan menjadi target pengunjung situs web dan apa saja yang
dapat pengunjung lakukan pada situs web tersebut.
c. Merencanakan sistem yang akan digunakan dengan matang, agar situs menjadi stabil,
andal, dan dapat digunakan dengan baik.
d. Menentukan arsitektur atau sitemap dari situs yang akan dibuat. Arsitektur atau
sitemap sangat tergantung pada tujuan situs yang akan di-publish.
e. Mengumpulan data-data yang dibutuhkan secara lengkap dan terstruktur, agar pada
saat tahap perancangan tidak diperlukan lagi persiapan data yang akan menyita
waktu ketika bekerja.
f. Membuat time schedule (jadwal kerja) yang akan mencatat berapa lama proses kerja
dalam membangun situs web.
3.1.1 Tujuan Pembuatan Situs Web
Dalam membuat sebuah situs, harus mempunyai tujuan yang jelas untuk apa situs itu
dibuat. Dengan mengetahui tujuan dan maksud situs web dibuat, maka perancangan
situs Web akan menjadi mudah.

Yang dimaksud dengan perancangan di sini adalah

rancangan layout, isi, menu, dan yang termasuk dalam isi (content) dari sebuah
halaman Web.
Perancangan suatu situs akan berbeda-beda sesuai dengan tujuan dari situs yang akan
dibuat. Tujuan pembuatan situs Web bisa bermacam-macam, berikut ini beberapa jenis
situs web yang dikelompokkan sesuai dengan tujuannya :
a. Marketing tool (alat pemasaran)
Situs web yang dibuat dengan tujuan untuk mempromosikan (memasarkan) sebuah
produk atau jasa pelayanan yang ada pada suatu perusahaan atau dapat berupa
company profile.
b. Value added (nilai tambah)
Situs web yang dibuat hanya sebagai nilai tambah.
c. Katalog
Situs web yang digunakan sebagai katalog elektronik yang menampilkan produkproduk yang akan dijual oleh suatu perusahaan.
d. E-Commerce
Situs web yang menyidiakan pelayanan dan transaksi yang dapat dilakukan secara
online. Dengan adanya e-Commerce diharapkan bisnis akan dapat dilakukan di mana
pun, kapan pun, dan lebih cepat.
e. Personal
Situs web yang tujuannya untuk mempromosikan diri sendiri.
22

Pemrograman Berbasis Web

Dedi Efendi, S.T.

f. E-learning
Situs web yang digunakan sebagai sekolah maya, dimana proses belajar mengajar
dilakukan dalam bentuk digital yang dijembati oleh teknologi Internet.
g. Komunitas
Situs

web

yang

dibuat

dengan

tujuan

untuk

memungkinkan

pengunjung

berkomunikasi secara bersamaan.

h. Portal
Portal adalah aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari
informasi online terdistribusi, seperti dokumen yang didapat melalui pencarian,
kanal berita, dan link ke situs khusus.
3.1.2 Pembuatan Sitemap (Peta Situs)
Sitemap adalah susunan menu atau hierarki menu dari suatu situs yang menggambarkan
isi dari setiap halaman dan link atau navigasi tiap halaman pada suatu situs web.
Susunan sitemap suatu situs sangat dipengaruhi oleh tujuan dari situs web yang akan
dibuat.
Sitemap dapat dibuat dalam bentuk flowchart atau biasanya dibuat dalam bentuk
seperti pohon yang bercabang-cabang. Sebagai contoh dapat dilihat pada Gambar 2.2
yaitu sitemap situs Darisa yang merupakan situs company profile yang menginformasikan
keberadaan perusahaan tersebut beserta produk-produknya.

Gambar 2.2 Contoh sitemap situs web

Pemrograman Berbasis Web

Dedi Efendi, S.T.

3.1.3 Pengumpulan Data

Pengumpulan data dimaksudkan untuk mendapatkan keterangan dari client mengenai
semua yang berhubungan dengan situs yang akan dibuat. Untuk mendapatkan informasi
yang diperlukan, terdapat beberapa metode yang dapat digunakan, seperti wawancara
langsung dengan client, pengisian kuesioner, dan memberikan contoh-contoh desain
situs yang ada.
3.1.4 Pembuatan Jadwal Kerja (Time Schedule)
Jadwal kerja digunakan untuk menentukan berapa lama waktu yang diperlukan untuk
membangun suatu situs web. Pembuatan jadwal kerja ini sangat membantu karena setiap
pekerjaan akan lebih teratur dan terencana dengan baik.
Contoh jadwal kerja :
Kegiatan
Perencanaan & Perancangan
Analisa Sistem
Pengumpulan data
Struktur situs
Desain
Tampilan layar
HTML Based
Review & Revisi
Penyelesaian Desain
Animasi Flash
Pembuatan animasi Flash
Review & revisi
Penyelesaian animasi
Programming
Analisa
Pemrograman
Review & Revisi
Penyelesaian pemrograman
Uji Coba
Uji coba sistem lokal & server
Koreksi dan revisi
Tes keseluruhan
Peluncuran
Online (HTML, animasi FLASH & Programming)
Total

Durasi (Hari)
4
1
2
1
10
5
3
1
1
5
4
1
1
31
2
25
3
1
6
3
2
1
1
1
57

Pemrograman Berbasis Web

Dedi Efendi, S.T.

3.2 Designing (Perancangan)

Dari informasi dan data yang dikumpulakan pada tahap perencanaan, tahap berikutnya
dilakukan desain terhadap tampilan halaman depan (homepage) dan halaman dalam
situs.

Desain diperlukan dalam masalah keindahan situs.

Hal ini dapat berupa

kombinasi warna-warna unik, tata letak, jenis huruf yang membuat isi situs memikat
dan mudah untuk dibaca.

Desain situs juga harus memberikan imej yang tak

terlupakan yang akan membedakan dengan situs saingan-saingan lainnya. Keputusan

bagaimana situs berinteraksi dengan para pengunjung sehingga memudahkan mereka
bernavigasi di situs dan bagaimana informasi dikategorikan sehingga para pengunjung
dapat mengakses informasi yang mereka kehendaki, secepat mungkin ditentukan dalam
tahap ini.

3.3 Scripting (Pemrograman)

Tahap ini merealisasikan ide-ide dari tahap-tahap sebelumnya ke situs.

Produksi

meliputi teknologi yang digunakan untuk menjadikan ide-ide dalam tahap desain
tersebut ke realitas.

Dari gambaran yang diperoleh dari tahap desain, selanjutnya

dilakukan scripting dari hasil desain tersebut ke dalam bahasa web sehingga bisa
diluncurkan di Internet.
3.4 Testing (Pengujian)
Pengujian dilakukan untuk menyakinkan jikalau semua halaman situs telah terhubung
dengan benar dan semua link eksternal situs web terjaga.

Tahap ini menguji

fungsionalitas dari formulir-formulir interaktif dan validasi penginputan data oleh

pengunjung.
3.5 Upload
Setelah dilakukan tahap development, tahap selanjutnya adalah memindahkan file dan
database situs web dari server lokal ke server hosting. Proses pemindahan atau transfer
file ini disebut upload.

3.6 Promoting (Promosi)

Setelah dilakukan tahap pengujian, saatnya diluncurkan situs web ke Internet untuk
mendeklarasikan keberadaannya kepada dunia. Promosi merupakan tahap yang sangat
penting untuk membuat situs dikenal, baik melalui media offline maupun online.
25

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Beberapa cara untuk mempromosikan suatu situs web adalah :

Melalui media bisnis yang ada, seperti kartu nama, brosur, kop surat dan lain-lain.
Memasukan situs ke search engine untuk membantu pengunjung-pengunjung baru
dalam mencari situs.
Mencari hubungan kerja sama pemasaran dengan situs lainnya sehingga dapat
ditampilakan link situs di situs mereka.

3.7 Maintenance (Pemeliharaan)

Setelah situs diluncurkan, maka diperlukan tahap pemeliharaan terhadap situs tersebut.
Pemeliharaan menjaga kesegaran situs dengan isi-isi yang baru.

Peninjauan dan

perbaikan situs harus dilakukan secara konstan.

Beberapa kegiatan yang dilakukan dalam pemeliharaan suatu situs web adalah :
Menambahkan informasi-informasi terbaru untuk menarik para pengunjung dan
membuang informasi-informasi yang sudah kadaluwarsa.
Memelihara Server yang digunakan agar kemanan situs terjaga dari serangan-serangan
hacker.
Mengubah struktur situs yang ada atau menambahan fitur-fitur baru sesuai dengan
perkembangan teknologi untuk menambah ketertarikan pengunjung.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

IV. HTML
4.1 Pengenalan HTML
HTML (HyperText Markup Language) merupakan bahasa standard yang di gunakan untuk
menampilkan dokumen web. Yang bisa dilakukan dengan HTML adalah :
Mengontrol tampilan dari halaman web dan content-nya.
Mempublikasikan dokumen secara online sehingga bisa di akses.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran dan
transaksi secara online.
Menambahkan objek-objek seperti gambar, audio, video, animasi dan juga java
applet dalam dokumen HTML.

4.2 Tag
Tag adalah kode-kode yang digunakan untuk men-setting dokumen web. Tag terdiri dari
tanda <, nama tag, dan tanda >. Nama tag ditulis di dalam tanda < dan > dan
untuk tag penutup ditambahkan tanda /. Nama tag boleh ditulis dengan huruf besar,
huruf kecil maupun kombinasi antara huruf besar dan huruf kecil. Namun umumnya
nama tag ditulis dengan huruf kecil saja atau huruf besar saja.
Tag umumnya ditulis berpasangan, contoh <form> dan </form>, namun ada beberapa
tag yang tidak ditulis secara berpasangan, contoh : <br>, <hr>, <img>, dan lain
sebagainya.
Beberapa tag dapat mengandung atribut, yaitu informasi tambahan yang ditambahkan di
dalam tag, contoh : <p align=center>. Pada contoh ini, p adalah nama tag, align
adalah nama atribut, dan center adalah nilai atribut.

4.3 Struktur Dasar Dokumen HTML

Struktur dasar dokumen HTML adalah :
<html>
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Keterangan :
Tag <html></html> berfungsi untuk menyatakan bahwa dokumen tersebut adalah
dokumen HTML.
Tag <head></head> berisi kode-kode untuk menuliskan keterangan/informasi
tentang dokumen HTML tersebut.
Tag <title></title> digunakan untuk membuat judul halaman Web (web page).
Tag <body></body> berisi tag-tag untuk isi atau layout tampilan halaman web.

4.4 Membuat Dokumen Web

Untuk membuat dokumen web yang bisa ditampilkan di browser, perlu menuliskan kode
HTML baik secara langsung misal pada editor Notepad atau EditPlus, maupun secara
tidak langsung misal pada Macromedia Dreamweaver atau Microsoft FrontPage.
Dokumen HTML harus disimpan dengan ekstensi .htm atau .html.
Langkah-langkah untuk membuat sebuah dokumen Web secara langsung dengan
menggunakan Notepad adalah :
1. Buka program Notepad dengan mengklik menu Start, kemudian Pilih Program,
kemudian Pilih Accessories dan klik Notepad.
2. Sebagai contoh, ketikkan kode berikut :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
PERGURUAN TINGGI TEKNOKRAT
</body>
</html>

3. Simpan file dengan mengklik menu File, kemudian pilih Save, maka akan muncul
sebuah kotak dialog penyimpanan yang menanyakan lokasi penyimpanan, nama file
dan tipe penyimpanan.
4. Tentukan lokasi penyimpanan pada drop-down list Save in.
5. Pilih All Files pada drop-down list Save as type.
6. Isikan nama lengkap file beserta ekstensinya, misalnya tekno.htm pada isian File
name. Lebih jelasnya, lihat gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

7. Klik tombol Save untuk menyimpan file.

4.5 Melihat Dokumen Web Pada Browser

Langkah-langkah untuk melihat tampilan dokumen Web pada browser adalah :
1. Buka browser Internet Explorer dengan mengklik menu Start, kemudian Pilih
Program dan klik Internet Explorer.
2. Klik menu File, kemudia pilih Open.
3. Ketika jendela Open muncul, klik tombol Browse. Ketika jendela baru muncul, cari
folder tempat menyimpan file HTML pada drop-down list Save in, kemudian pilih file
HTML yang akan dilihat tampilannya, misalnya tekno.htm.
4. Klik tombol Open, kemudian klik tombol OK. Maka di browser akan ditampilkan :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4.6 Berpindah Ke Baris Berikutnya

Untuk membuat baris baru atau berpindah baris, digunakan tag <br>, contoh :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
PERGURUAN TINGGI<br>
TEKNOKRAT<br>
STMIK - AMIK - STBA LPBM
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.7 Mengatur Peletakkan Teks

Untuk mengatur peletakkan teks digunakan tag <div> dan atribut align.

Nilai yang

dapat disikan adalah sebagai berikut :

Left, untuk mengatur teks rata kiri terhadap halaman.
Center, untuk mengatur teks diletakkan di tengah-tengah halaman.
Right, untuk mengatur teks rata kanan terhadap halaman
Justify, untuk mengatur teks rata kiri dan rata kanan terhadap halaman.
Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
PERGURUAN TINGGI<br>
TEKNOKRAT<br>
STMIK - AMIK - STBA LPBM
</div>
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

4.8 Mengatur Font

Untuk mengatur jenis, ukuran, maupun warna font digunakan pasangan tag
<font></font>.
4.8.1 Mengatur Jenis Font
Untuk menentukan jenis font/huruf, digunakan atribut face. Jenis huruf standart yang
digunakan pada Web adalah Times New Roman, Verdana, Arial, Helvetica, dan sansserif. Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
<font face="arial">PERGURUAN TINGGI</font><br>
<font face="verdana">TEKNOKRAT</font><br>
<font face="arial">STMIK-AMIK-STBA-LPBM</font>
</div>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4.8.2 Mengatur Ukuran Font

Untuk mengatur ukuran font, digunakan atribut size. Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
<font face="arial" size="6">
PERGURUAN TINGGI
</font>
<br>
<font face="verdana" size="7">
TEKNOKRAT
</font>
<br>
<font face="arial" size="5">
STMIK - AMIK - STBA - LPBM
</font>
</div>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.8.3 Mengatur Warna Font

Untuk mengatur warna font, digunakan atribut color. Nilai yang diberikan pada atribut
color tersebut dapat berupa :
1. Nama warna dalam bahasa inggris.
Contoh : red, blue, dll.
2. Nilai RGB (Red-Green-Blue) yang dinyatakan dengan #RRGGBB.
Contoh : #CC66AA, #FF1144, dll.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
<font face="arial" size="6" color="blue">
PERGURUAN TINGGI
</font>
<br>
<font face="verdana" size="7" color="#CC3300">
TEKNOKRAT
</font>
<br>
<font face="arial" size="5">
STMIK - AMIK - STBA - LPBM
</font>
</div>
</body>
</html>

Contoh nama warna dan nilai RGB-nya :

Black = #000000

Green = #008000

Silver = #C0C0C0

Lime = #00FF00

Gray = #808080

Olive = #808000

White = #FFFFFF

Yellow = #FFFF00

Maroon = #800000

Navy = #000080

Red = #FF0000

Blue = #0000FF

Purple = #800080

Teal = #008080

Untuk mengubah arah pergerakkan teks, digunakan atribut direction. Nilai yang dapat
disikan adalah sebagai berikut :
Right, teks berjalan dari kiri ke kanan.
Up, teks berjalan dari bawah ke atas.
Down, teks berjalan dari atas ke bawah.
Contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="blue">
<marquee direction="right">
<b>Selamat Datang di Website Perguruan Tinggi Teknokrat</b>
</marquee>
</font>
<hr color="#000000">
......

Atribut behavior dengan nilai alternate dapat digunakan jika ingin arah teks bolak-balik
dari kanan ke kiri dan sebaliknya, contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="blue">
<marquee behavior="alternate">
<b>Selamat Datang di Website Perguruan Tinggi Teknokrat</b>
</marquee>
</font>
<hr color="#000000">
......

Sedangkan jika ingin mengatur warna latar belakang teks yang dibuat animasi,
digunakan atribut bgcolor, contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="white">
<marquee behavior="alternate" bgcolor="blue">
<b>Selamat Datang di Website Perguruan Tinggi Teknokrat</b>
</marquee>
</font>
<hr color="#000000">
......

4.12 Mengatur Warna Latar Belakang

Untuk mengatur warna latar belakang digunakan atribut bgcolor pada tag <body>,
contoh:

Pemrograman Berbasis Web

Dedi Efendi, S.T.

......
<body bgcolor="#FFFF99">
......

4.13 Membuat Paragraf

Untuk membuat paragraf digunakan tag <p></p>.

Atribut align dapat digunakan

untuk mengatur peletakan teks. Nilai yang dapat disikan adalah sebagai berikut :
Left, untuk mengatur teks rata kiri terhadap halaman.
Center, untuk mengatur teks diletakkan di tengah-tengah halaman.
Right, untuk mengatur teks rata kanan terhadap halaman
Justify, untuk mengatur teks rata kiri dan rata kanan terhadap halaman.
Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p align="justify">
Persaingan global pada Milenium III akan sangat dipengaruhi oleh
kemampuan dalam memperoleh dan mengolah data menjadi informasi yang
selanjutnya dianalisa dengan cepat dan cermat untuk menghasilkan
keputusan yang tepat, terutama yang berhubungan dengan <i>E-Commerce and
Business</i> dalam <i>Cyber Marketing</i>.
</p>
<p align="justify">
Semua manajer/pimpinan dalam membuat keputusan sangat memerlukan
<i>Management Information System</i> yang didukung oleh <i>Decision
Support System</i> dan <i>Information Technology</i> yang canggih.
Untuk itu diperlukan SDM yang tangguh sebagai komponen sistem daya
dukung yang tidak dapat dipisahkan.
</p>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4.14 MEMBUAT LIST (DAFTAR ITEM)

4.14.1 Membuat List Dengan Bullet (Unordered-List)
Untuk membuat list dengan bullet digunakan tag <ul> dan pada akhir daftar diakhiri
dengan tag </ul>. Tag <li> digunakan untuk membuat setiap item dari list. Contoh
penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p>
Program studi yang ada di Perguruan Tinggi Teknokrat adalah sebagai
berikut :
<ul>
<li>S-1 Sistem Informasi</li>
<li>S-1 Teknik Informarmatika</li>
<li>D-3 Manajemen Informatika</li>
<li>D-3 Komputer Akuntansi</li>
<li>D-3 Teknik Komputer</li>
</ul>
</p>
</font>
</body>
1 </html>

Hasilnya akan terlihat seperti gambar berikut :

Jenis bullet dapat ditentukan melalui atribut type pada tag <ul>. Kemungkinan nilai
untuk atribut type :
Nilai untuk TYPE

Bentuk Bullet

DISC

CIRCLE

SQUARE

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p>
Program studi yang ada di Perguruan Tinggi Teknokrat adalah sebagai
berikut :
<ul type="square">
<li>S-1 Sistem Informasi</li>
<li>S-1 Teknik Informarmatika</li>
<li>D-3 Manajemen Informatika</li>
<li>D-3 Komputer Akuntansi</li>
<li>D-3 Teknik Komputer</li>
</ul>
</p>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.14.2 Membuat List Dengan Nomor (Ordered-List)

Untuk membuat daftar item dengan nomor digunakan tag <ol> dan pada akhir daftar
diakhiri dengan tag </ol>. Tag <li> digunakan untuk membuat setiap item dari list.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p>
Program studi yang ada di Perguruan Tinggi Teknokrat adalah sebagai
berikut :
<ol>
<li>S-1 Sistem Informasi</li>
<li>S-1 Teknik Informarmatika</li>
<li>D-3 Manajemen Informatika</li>
<li>D-3 Komputer Akuntansi</li>
<li>D-3 Teknik Komputer</li>
</ol>
</p>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Untuk mengganti nomor dalam daftar item, digunakan atribut type pada tag <ol>.
Kemungkinan nilai untuk atribut type adalah :
Nilai

Keterangan

Huruf kapital

Huruf kecil

Angka romawi dengan huruf kapital

Angka romawi dengan huruf kecil

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p>
Program studi yang ada di Perguruan Tinggi Teknokrat adalah sebagai
berikut :
<ol type="i">
<li>S-1 Sistem Informasi</li>
<li>S-1 Teknik Informarmatika</li>
<li>D-3 Manajemen Informatika</li>
<li>D-3 Komputer Akuntansi</li>
<li>D-3 Teknik Komputer</li>
</ol>
</p>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.14.3 List Berkalang

List juga bisa bersifat berkalang, artinya suatu list berada dalam list yang lain.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<font face="verdana" size="2">
<p>
Program studi yang ada di Perguruan Tinggi Teknokrat adalah sebagai
berikut :
<ul>
<li>STMIK (Sekolah Tinggi Manajemen Informatika dan Komputer)</li>
<ol>
<li>S-1 Sistem Informasi</li>
<li>S-1 Teknik Informarmatika</li>
</ol>
<li>AMIK (Akademi Manajemen Informatika dan Komputer)</li>
<ol>
<li>D-3 Manajemen Informatika</li>
<li>D-3 Komputer Akuntansi</li>
<li>D-3 Teknik Komputer</li>
</ol>
<li>STBA (Sekolah Tingi Bahasa Asing)</li>
<ol>
<li>S-1 Bahasa/Sastra Inggris</li>
<li>D-3 Bahasa/Sastra Inggris</li>
<li>D-3 Bahasa Jepang</li>
</ol>
</ul>
</p>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4.15 Menampilkan Gambar

4.15.1

Mengenal Jenis Gambar

Jenis gambar yang dapat disajikan dalam halaman Web adalah :

a. GIF (Graphic Interchange Format)
Karakteristik dari jenis gambar GIF adalah :
Ekstensi .gif
GIF hanya mendukung warna 8 bit atau 256 warna.
Salah satu warna dapat bersifat transparan.
Dapat memasukkan gambar lebih dari satu dalam satu file dan menampilkannya
secara bergantian (animasi).
GIF cocok untuk membuat gambar yang melibatkan sedikit warna, misalnya logo,
gambar tombol, banner, icon, gambar latar belakang, dan lain-lain.
b. JPEG (Joint Photograph Experts Graphics)
Karakteristik dari jenis gambar JPEG adalah :
Ekstensi .jpg/.jpeg
JPEG mendukung warna hingga 24 bit atau lebih dari 16 juta.
JPEG tidak mendukung transparansi dan animasi.
JPEG cocok untuk menampilkan gambar-gambar real-scene atau gambar-gambar yang
nyata seperti foto
c. PNG (Portable Network Graphic)
Karakteristik dari jenis gambar PNG adalah :
Ekstensi .png
PNG merupakan format yang diciptakan khusus untuk Web.
Terdapat 2 jenis PNG, yaitu PNG-8 yang mendukung gambar 8 bit, dan PNG-24 yang
mendukung gambar 24 bit.
PNG mendukung animasi dan transpransi.
4.15.2

Menampilkan Gambar

Untuk menampilkan gambar, digunakan tag <img>.

Tag <img> mempunyai banyak

atribut, tetapi hanya satu yang harus disertakan, yaitu atribut src.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

4.15.3

Dedi Efendi, S.T.

Mengatur Letak Gambar

Tag <img> menyediakan atribut bernama align yang berfungsi untuk mengatur
penempatan gambar. Nilai atribut align adalah :
Nilai

Keterangan

bottom

Meratakan bagian bawah teks dengan bagian bawah gambar

top

Meratakan bagian atas gambar dengan bagian paling atas suatu item pada
baris saat ini

middle

Meratakan bagian tengah gambar dengan bagian bawah teks

left

Meletakkan gambar di sebelah kiri teks

right

Meletakkan gambar di sebelah kanan teks

baseline

Berfungsi seperti bottom, meratakan bagian bawah teks dengan bagian

bawah gambar

texttop

Meratakan bagian atas gambar dengan bagian atas teks

absmiddle

Meratakan bagian tengah baris saat ini dengan bagian tengah gambar

absbottom Meratakan bagian bawah baris saat ini dengan bagian bawah gambar
Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<img src="logo.gif" align="left">
<font face="arial" size="6" color="blue">
<b>PERGURUAN TINGGI</b>
</font><br>
<font face="verdana" size="7" color="#CC3300">
<b>TEKNOKRAT</b>
</font><br>
<font face="arial" size="5">
<b>STMIK - AMIK - STBA - LPBM</b>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

4.15.4

Dedi Efendi, S.T.

Mengatur Ruang Gambar

Atribut-atribut yang dimanfaatkan untuk mengatur jarak gambar terhadap teks adalah :
Vspace, akan memberikan ruang kosong sebanyak nilai yang disebutkan dalam atribut
ini (dalam satuan piksel) di atas dan di bagian bawah gambar.
Hspace, akan memberikan ruang kosong sebanyak nilai yang disebutkan dalam atribut
ini (dalam satuan piksel) di sebelah kiri dan di bagian kanan gambar.
Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body><img src="logo.gif" align="left" vspace="2" hspace="15">
<font face="arial" size="6" color="blue">
<b>PERGURUAN TINGGI</b>
</font><br>
<font face="verdana" size="7" color="#CC3300">
<b>TEKNOKRAT</b>
</font><br>
<font face="arial" size="5">
<b>STMIK - AMIK - STBA - LPBM</b>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.15.5

Mengatur Gambar Latar Belakang

Untuk menyertakan suatu gambar sebagai latar belakang, digunakan atribut background
pada tag <body>. Bentuk umumnya adalah sebagai berikut :
<body background = Nama_Berkas_Gambar>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh :
<body background = gambar/back.gif>
Gambar yang digunakan sebagai latar belakang cukup berukuran kecil, karena browser
akan mengulang gambar tersebut dengan model pengubinan.

4.16 Menggunakan Tabel

Tabel biasa digunakan dalam halaman web untuk memperindah tampilan ataupun untuk
mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Tag-tag
yang terkait dengan pembuatan tabel :
Tag

Keterangan

Mengawali dan mengakhiri sebuah tabel

Membuat sebuah baris dalam tabel

Membuat judul kolom

Membuat sebuah sel data

4.16.1

Memberi Garis pada Tabel

Untuk memberi garis pada tabel digunakan atribut border pada tag <table>, dengan
bentuk sebagai berikut :
<table border=bilangan>
Sedangkan untuk memberi warna garis digunakan atribut bordercolor.
Contoh penggunaan :
<html>
<head>
<title>Layanan Internet</title>
</head>
<body>
<font face="verdana">
<table border="1" bordercolor="#000000">
<tr>
<th>Tipe Layanan</th>
<th>Bandwidth</th>
<th>Rp/Bulan</th>
</tr>
<tr>
<td>Emas</td>
<td>512 Kbps</td>
<td>11.500.000</td>
</tr>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td>Perunggu</td>
<td>128 Kbps</td>
<td>5.000.000</td>
</tr>
<tr>
<td>Tembaga</td>
<td>64 kbps</td>
<td>3.500.000</td>
</tr>
</table>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Kalau atribut border tidak disertakan dalam tag <table>, nilai untuk border dianggap
sama dengan nol, dengan akibat garis tidak ditampilkan seperti gambar berikut :

4.16.2

Menentukan Warna Latar Belakang Tabel, Baris dan Sel

Untuk menentukan warna latar belakang tabel, digunakan atribut bgcolor pada tag
<table>. Contoh :
<table border=1 bgcolor=silver>
Apabila ingin mengatur warna latar belakang hanya untuk baris tertentu maka atribut
bgcolor diletakkan pada tag <tr>, contoh :
<tr bgcolor=silver>
48

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Sedangkan jika yang ingin diatur hanya sel tertentu saja, maka atribut bgcolor
diletakkan pada tag <th> atau <td>, contoh :
<td bgcolor=silver>
4.16.3

Mengatur Peletakkan Tabel dan Sel

Untuk mengatur peletekan tabel pada halaman, digunakan atribut align pada tag
<table>. nilai untuk atribut align dapat dilihat pada tabel berikut :
Align dan Nilainya
align=left
align=center
align=right

Keterangan
Tabel diletakkan di kiri halaman
Tabel diletakkan di tengah halaman
Tabel diletakkan di kanan halaman

Sedangkan atribut align pada tag <tr>, <th>, dan <td> dapat digunakan untuk mengatur
peletakkan teks dalam keadaan rata kiri, rata kanan, atau rata tengah. nilai untuk
atribut align dapat dilihat pada tabel berikut :
Align dan Nilainya
align=left
align=center
align=right

Keterangan
Teks diatur rata kiri
Teks ditengahkan
Teks diatur rata kanan

Sedangkan Atribut valign pada tag <tr>, <th>, dan <td> dapat digunakan untuk
mengatur peletakkan teks pada posisi vertikal apakah diletakkan di atas, di tengah,
atau di bawah. Nilai untuk atribut valign dapat dilihat pada tabel berikut :
Nilai Valign
valign=top
valign=middle
valign=bottom

Keterangan
Teks diletakkan di bagian atas pada sel
Teks diletakkan di bagian tengah pada sel
Teks diletakkan di bagian bawah pada sel

Contoh penggunaan :
<html>
<head>
<title>Layanan Internet</title>
</head>
<body>
<font face="verdana">
<table border="1" bordercolor="#000000" align="center">
<tr bgcolor="#66ccff">
<th>Tipe Layanan</th>
<th>Bandwidth</th>
<th>Rp/Bulan</th>
</tr>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td>Emas</td>
<td align="center">512 Kbps</td>
<td align="center">11.500.000</td>
</tr>
<tr>
<td>Perunggu</td>
<td align="center">128 Kbps</td>
<td align="center">5.000.000</td>
</tr>
<tr>
<td>Tembaga</td>
<td align="center">64 kbps</td>
<td align="center">3.500.000</td>
</tr>
</table>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.16.4

Mengatur Lebar dan Tinggi Tabel dan Sel

Atribut height dan width pada tag <table> dapat digunakan untuk mengatur tinggi dan
lebar tabel tanpa tergantung oleh ukuran jendela browser.

Nilai atribut height

dinyatakan dalam satuan piksel sedangakan nilai atribut width dapat dinyatakan dalam
satuan piksel atau persen.
Atribut height dan width juga dapat dikenakan pada sel tertentu, dengan cara
menyebutkannya pada tag <td> atau <th>.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>Layanan Internet</title>
</head>
<body>
<font face="verdana">
<table border="1" bordercolor="#000000" align="center" width="450">
<tr bgcolor="#66ccff" height="25">
<th width="40%">Tipe Layanan</th>
<th width="30%">Bandwidth</th>
<th width="30%">Rp/Bulan</th>
</tr>
<tr height="22">
<td>Emas</td>
<td align="center">512 Kbps</td>
<td align="center">11.500.000</td>
</tr>
<tr height="22">
<td>Perunggu</td>
<td align="center">128 Kbps</td>
<td align="center">5.000.000</td>
</tr>
<tr height="22">
<td>Tembaga</td>
<td align="center">64 kbps</td>
<td align="center">3.500.000</td>
</tr>
</table>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.16.5

Mengatur Jarak dalam Tabel

Atribut-atribut yang digunakan untuk mengatur jarak dalam tabel adalah :

Cellpadding, untuk mengatur jarak teks terhadap tepi kiri tabel.
Cellspacing, untuk mengatur jarak bagian sel terhadap tepi dalam bingkai tabel.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>Layanan Internet</title>
</head>
<body>
<font face="verdana">
<table border="1" bordercolor="#000000" cellpadding="2"
cellspacing="0" width="450" align="center">
<tr bgcolor="#66ccff" height="25">
<th width="40%">Tipe Layanan</th>
<th width="30%">Bandwidth</th>
<th width="30%">Rp/Bulan</th>
</tr>
<tr height="22">
<td>Emas</td>
<td align="center">512 Kbps</td>
<td align="center">11.500.000</td>
</tr>
<tr height="22">
<td>Perunggu</td>
<td align="center">128 Kbps</td>
<td align="center">5.000.000</td>
</tr>
<tr height="22">
<td>Tembaga</td>
<td align="center">64 kbps</td>
<td align="center">3.500.000</td>
</tr>
</table>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

4.16.6

Menggabungkan Sel

HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan,
atribut-atribut yang digunakan adalah :
Rowspan, untuk menggabungkan beberapa baris sel.
Colspan, untuk menggabungkan beberapa sel dalam satu baris.
Atribut-atribut ini digunakan pada tag <td> atau <th>.
52

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>Layanan Internet</title>
</head>
<body>
<font face="verdana">
<table border="1" bordercolor="#000000" cellpadding="2"
cellspacing="0" width="450" align="center">
<tr bgcolor="#66ccff" height="25">
<th width="60%" rowspan="2">SUBJEK</th>
<th width="40%" colspan="2">SKS</th>
</tr>
<tr bgcolor="#66ccff" height="25">
<th>Smt I</th>
<th>Smt II</th>
</tr>
<tr height="22">
<td width="60%">Speaking I & II</td>
<td width="20%" align="center">6</td>
<td width="20%" align="center">6</td>
</tr>
<tr height="22">
<td width="60%">Lab. Work I & II</td>
<td width="20%" align="center">2</td>
<td width="20%" align="center">2</td>
</tr>
<tr height="22">
<td width="60%">Structure I & II</td>
<td width="20%" align="center">4</td>
<td width="20%" align="center">4</td>
</tr>
<tr height="22">
<td width="60%">Business Writing I & II</td>
<td width="20%" align="center">2</td>
<td width="20%" align="center">2</td>
</tr>
</table>
</font>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

4.17 Membuat Hyperlink

Umumnya sebuah halaman web memiliki hyperlink atau link (penghubung) ke halamanhalaman web yang lain. Untuk membuat link, digunakan pasangan tag <a> </a> atau
yang biasa disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan
tag jangkar adalah :
<a href=url>label</a>
Dalam hal ini, URL (Uniform Resource Locator) dapat berupa :
Alamat suatu dokumen web
Berkas grafis
Protokol lain, misalnya FTP.
Contoh :
<a href="sambutan.htm">Sekapur Sirih</a>
Digunakan untuk membuat link dengan tulisan Sekapur Sirih pada jendela dan URL
yang dituju adalah sambutan.htm.
4.17.1

Hyperlink Ke Halaman Web

Contoh :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<img src="logo.gif" align="left" vspace="2" hspace="15">
<font face="arial" size="6" color="blue">
<b>PERGURUAN TINGGI</b>
</font><br>
<font face="verdana" size="7" color="#CC3300">
<b>TEKNOKRAT</b>
</font><br>
<font face="arial" size="5">
<b>STMIK - AMIK - STBA - LPBM</b>
</font><br><br>
<font face="verdana" size="2">
<hr color="#000000">
<div align="center">
<b>Home</b>
<font color="red"> | </font>
<a href="sambutan.htm">Sekapur Sirih</a>
<font color="red"> | </font>
<a href="stmik_amik.htm">STMIK-AMIK</a>
<font color="red"> | </font>
<a href="inggris.htm">Sastra Inggris</a>
<font color="red"> | </font>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<a href="jepang.htm">Bahasa Jepang</a>

</div>
<hr color="#000000">
<p align="justify">
Persaingan global pada Milenium III akan sangat dipengaruhi oleh
kemampuan dalam memperoleh dan mengolah data menjadi informasi yang
selanjutnya dianalisa dengan cepat dan cermat untuk menghasilkan
keputusan yang tepat, terutama yang berhubungan dengan <i>E-Commerce
and Business</i> dalam <i>Cyber Marketing</i>.
</p>
<p align="justify">
Semua manajer/pimpinan dalam membuat keputusan sangat memerlukan
<i>Management Information System</i> yang didukung oleh <i>Decision
Support System</i> dan <i>Information Technology</i> yang canggih.
Untuk itu diperlukan SDM yang tangguh sebagai komponen sistem daya
dukung yang tidak dapat dipisahkan.
</p>
</font>
</body>
</html>

Tampilannya akan terlihat seperti gambar berikut :

Jika diklik link Sastra Inggris, maka akan muncul halaman STBA - Bahasa/Sastra Inggris
pada browser.
4.17.2

Hyperlink Kembali Ke Home Page

Pada halaman STBA - Bahasa/Sastra Inggris dan halaman-halaman Web lainnya harus
dibuat untuk kembali ke home page, contoh :
<a href="index.html">Home</a>
55

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Tampilannya akan terlihat seperti gambar berikut :

V. CSS (Cascading Style Sheets)

5.1 Pengenalan CSS
CSS adalah kumpulan format yang digunakan untuk mengatur tampilan atau isi dari
sebuah halaman web menjadi lebih fleksibel. Elemen dasar CSS :
1. Selector adalah tag/elemen normal pada HTML
2. Deklarasi adalah satu atau beberapa perintah/nilai dari CSS yang menunjukkan
type/bentuk yang diaplikasikan pada selector, yang terdiri dari :
a. Properti (property)
b. Nilai Properti (value)
selector { property: value }

5.2 Penulisan CSS

CSS dapat dituliskan dengan tiga cara, yaitu :
5.2.1 Inline Style
Inline style merupakan CSS style yang disisipkan pada elemen web tertentu saja dalam
satu dokumen. Contoh :
......
<p style="font-family: verdana; color: blue">
Paragraph ini berwarna biru
</p>
......

5.2.2 Internal Style

Internal style merupakan CSS style yang disisipkan langsung pada header dokumen HTML
(diantara tag <head> .. </head>). Contoh :
<html>
<head>
<title>Internal CSS Style</title>
<style type="text/css">
table { font-family: verdana; font-size:10px }
</style>
</head>
<body>
......
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

5.2.3 Eksternal Style

Eksternal style merupakan CSS Style yang disimpan terpisah dengan dokumen HTML.
Contoh :
eksternal.css (nama file CSS)
/* CSS Document */
hr { color: sienna }
p { font-family: verdana; color: blue }
table { font-family: verdana; font-size: 10pt }
.judul { font-family: verdana; font-size: 14pt }

eksternal.htm (File HTML yang memanggil file CSS)

<html>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="eksternal.css">
</head>
<body>
......
</body>
</html>

5.3 Penggunaan Kelas

Kelas digunakan untuk mendefiniskan suatu style. Bentuk Pendefinisian kelas :
.nama_kelas { property: value }
Cara memberi nama kelas :
Dapat mengandung huruf, angka, atau karakter garis bawah.
Karakter pertama harus huruf atau karakter garis bawah.
Tidak boleh mengandung spasi.
Contoh :
<html>
<head>
<title>Penggunaan Kelas</title>
<style type="text/css">
.kapital { text-transform: uppercase }
.garis_bawah { text-decoration: underline }
</style>
</head>
<body>
<p class="kapital">Huruf Kapital</p>
<span class="garis_bawah">Garis Bawah</span>
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

5.4 Memformat Halaman Web Dengan CSS

5.4.1 Font Properties
Font properties digunakan untuk merubah jenis huruf, ketebalan, ukuran dan style pada
text.
Property

Keterangan

Nilai

font-family

Menentukan jenis huruf

Jenis huruf standar (Arial,

Verdana, Times New
Roman)

font-size

Menentukan ukuran font

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length

font-style

Mengatur teks agar dimiringkan atau tidak

italic

font-weight

Menebalkan atau menipiskan teks

bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh :
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.judul
{
font-family: verdana;
font-size: 20pt;
font-style: italic;
font-weight: bold
}
.paragraf { font-family: verdana; font-size: 10pt }
</style>
</head>
<body>
<div align="center" class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri-ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar
negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing
sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang
yang datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan internasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional
dan berkualitas internasional saja yang akan memenangkan persaingan
untuk karir kerja yang bermartabat.
</p>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

5.4.2 Text properties

Text properties digunakan untuk mengontrol segala bentuk dari text, seperti merubah
warna text, menambah atau mengurangi spasi diantara karakter pada teks, mengatur
peletekkan text, mendekorasi text, indent text pada baris awal dan lain-lain.

Pemrograman Berbasis Web

Property

Dedi Efendi, S.T.

Keterangan

Nilai

color

Untuk mengatur warna teks

nama warna
Kode RGB

letter-spacing

Menambah atau mengurangi spasi diantara karakter

pada teks

length

text-align

Mengatur peletekkan teks

left
right
center
justify

text-decoration

Mendekorasi teks

None
underline
overline
line-through
blink

text-indent

Membuat indent teks pada baris awal

length

text-transform

Untuk melakukan konversi terhadap teks

none
capitalize
uppercase
lowercase

Contoh :
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.judul
{
font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099; letter-spacing: 5px;
text-align: center; text-decoration: underline
}
.paragraf {font-family: verdana; font-size: 10pt; text-indent: 30px}
</style>
</head>
<body>
<div class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri-ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar
negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing
sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang
yang datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan internasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional
dan berkualitas internasional saja yang akan memenangkan persaingan
untuk karir kerja yang bermartabat.
</p>
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

5.4.3 Background Properties

Background properties digunakan untuk mengontrol warna latar belakang dari sebuah
elemen, set sebuah gambar menjadi latar belakang, mengulang gambar latar belakang
secara vertikal atau horizontal, dan memposisikan gambar latar belakang dalam sebuah
halaman.
Property

Keterangan

Nilai

background-color

Mengatur warna latar belakang

nama warna
kode RGB
Transparent

background-image

Menset sebuah gambar menjadi

latar belakang

url(nama_file_gambar)

background-repeat

Mengatur bagaimana gambar

background diulang

repeat
repeat-x
repeat-y
no-repeat

background-position

Mengatur posisi gambar latar

belakang dalam sebuah halaman
web

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh :
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.judul
{ font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099; background-color: #FFFF99
}
.paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px }
body {background-image: url(bk.gif)}
</style>
</head>
<body>
<div align="center" class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri-ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar
negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing
sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang
datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan internasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional
dan berkualitas internasional saja yang akan memenangkan persaingan
untuk karir kerja yang bermartabat.
</p>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

5.4.4 Margin Properties

Margin Properties digunakan untuk mendefinisikan margin disekitar elemen spasi.
Memungkinkan untuk menggunakan nilai negatif untuk saling melengkapi isi nilai.

Pemrograman Berbasis Web

Property

Dedi Efendi, S.T.

Keterangan

Nilai

margin-bottom

Mengatur margin bawah sebuah elemen

Length
%

margin-left

Mengatur margin kiri sebuah elemen

Length
%

margin-right

Mengatur margin kanan sebuah elemen

Length
%

margin-top

Mengatur margin atas sebuah elemen

Length
%

Contoh :
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.judul
{
font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099;
}
.paragraf { font-family: verdana; font-size: 10pt; text-indent:30px }
body
{
margin-top: 3cm; margin-right: 3cm;
margin-bottom: 3cm; margin-left: 3cm
}
</style>
</head>
<body>
<div align="center" class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
Era globalisasi pada Milenium III memberikan ciri-ciri sebagai
tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar
negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing
sesama SDM domestik, melainkan juga bersaing menghadapi SDM
yang datang dari negara lain. 3) Era tanpa batas <i>(borderless
country)</i> menghadapkan kita pada pergaulan internasional lintas
budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional
dan berkualitas internasional saja yang akan memenangkan persaingan
untuk karir kerja yang bermartabat.
</p>
</body>
</html>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

5.4.5 Border Properties

Border properties digunakan

untuk menspesifikasikan style, warna, dan lebar pada

sebuah elemen border.

border-left-width

Mengatur ketebalan border pada sisi kiri

border-width
68

Pemrograman Berbasis Web

Dedi Efendi, S.T.

border-right-color

Mengatur warna border pada sisi kanan

border-color

border-right-style

Mengatur style border pada sisi kanan

border-style

border-right-width

Mengatur ketebalan style pada sisi kanan

border-width

border-top-color

Mengatur warna border pada sisi atas

border-color

border-top-style

Mengatur style border pada sisi atas

border-style

border-top-width

Mengatur ketebalan border pada sisi atas

border-width

Contoh :
<html>
<head>
<title>CSS Border</title>
<style type="text/css">
table {font-family: verdana; font-size: 10pt}
.garis1 { border-bottom: solid 1px red;
border-top: solid 1px red;
background-color:#FFFF99 }
.garis2 { border-bottom: solid 1px red }
</style>
</head>
<body>
<table bordercolor="#000000" width="350" cellpadding="3"
cellspacing="0" border="0">
<tr>
<th width="40%" class="garis1">Tipe Layanan</th>
<th width="30%" class="garis1">Bandwidth</th>
<th width="30%" class="garis1">Rp/Bulan</th>
</tr>
<tr>
<td class="garis2">Emas</td>
<td align="center" class="garis2">512 Kbps</td>
<td align="center" class="garis2">11.500.000</td>
</tr>
<tr>
<td class="garis2">Perunggu</td>
<td align="center" class="garis2">128 Kbps</td>
<td align="center" class="garis2">5.000.000</td>
</tr>
<tr>
<td class="garis2">Tembaga</td>
<td align="center" class="garis2">64 kbps</td>
<td align="center" class="garis2">3.500.000</td>
</tr>

<tr>
<td class="garis2">Tembaga</td>
<td align="center" class="garis2">64 kbps</td>
<td align="center" class="garis2">3.500.000</td>
</tr>
</table>
</body>
</html>
69

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

5.4.6 Padding Properties

Padding Properties digunakan untuk mengatur spasi antara border dengan elemennya
dan elemen dengan isi. Nilai Negatif tidak diijikan.
Property

Keterangan

Pemrograman Berbasis Web

Dedi Efendi, S.T.

VI. DESAIN WEB

6.1 Mengenal Macromedia Dreamweaver
Dulu orang membuat sebuah situs web masih menggunakan HTML dan sering menghafal
tag-tag HTML. Mereka yang tak paham teknik pemrograman akan merasa tersiksa ketika
mendesain web. Namun lambat laun software desain web bermunculan dan saat ini
jumlahnya sangat banyak, diantaranya adalah Macromedia Dreamweaver, Microsoft
FrontPage, Adobe GoLive, Netscape Composer, Cute HTML, CoffeCup HTML Editor dan
lain-lain.
Pada buku ini akan digunakan Macromedia Dreamweaver sebagai tool untuk membuat
halaman web atau menulis kode bahasa pemrograman (coding). Alasannya karena selain
mudah digunakan dan tampilannya yang user friendly juga memiliki banyak kemampuan
yang tidak dimiliki software desain web lainnya. Dreamweaver menyertakan banyak
perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, Javascript,
PHP, ASP, Coldfusion dan XML.
Macromedia Dreamweaver menawarkan cara mendesain situs dengan dua langkah
sekaligus dalam satu waktu, yaitu mendesain dan memprogram.

Setiap kali kita

mendesain halaman web seperti menulis kata-kata, meletakkan gambar, membuat tabel
dan proses lainnya, maka kode HTML dan hasilnya dapat langsung dilihat dilayar.

6.2 Area Kerja Macromedia Dreamweaver MX 2004

Macromedia Dreamweaver yang digunakan adalah versi 7 atau yang dikenal dengan
Dreamweaver MX 2004. Pada versi ini, tampilannya mengalami perubahan yang menjadi
kaya akan warna dan area kerjanya menjadi lebih ringkas dan efesien. Ini dapat dilihat
dengan peletakan tombol dan panel-panel weindows yang dapat di-minimize
(disembunyikan) untuk menghemat area kerja.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Tampilan area kerja (work area) Macromedia Dreamweaver MX 2004 adalah sebagai
berikut :

1
6

Keterangan tiap angka pada gambar diatas adalah sebagai berikut :

Simbol 1 adalah Menu Utama dan Insert Bar. Menu utama berisi semua perintah untuk
bekerja dengan Dreamweaver. Sedangkan Insert Bar berisi sekumpulan tombol yang
berfungsi sebagai perangkat kerja untuk membuat sebuah halaman web.
Simbol 2 adalah Document Toolbar, yang berisi tombol dan popup menu yang dapat
digunakan untuk berpindah antar-dokumen kerja windows dan mengatur tampilan
area kerja.

Pada Dokumen Toolbar juga terdapat tombol yang digunakan untuk

preview area kerja di browser.

Simbol 3 adalah area kerja Dreamweaver, disinilah semua objek diletakkan, seperti
teks, gambar, tabel, tombol dan lain sebagainya.
Simbol 4 adalah Tag Selector. Tag selector adalah tag-tag HTML yang terpilih sesuai
dengan objek yang ada di area kerja.
Simbol 5 adalah Property Inspector, digunakan untuk melihat dan mengubah properti
dari tiap objek terpilih yang ada di area kerja. Setiap objek memiliki properti yang
berbeda-beda.
Simbol 6 adalah Panel Groups, merupakan kumpulan dari panel-panel windows
pembantu yang digunakan untukmembantu bekerja dengan Dreamweaver.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

6.3 Mendefinisikan Site

Dalam membuat situs web pasti terdapat puluhan bahkan ratusan file yang
digunakan, seperti file HTML, gambar, database, script pemrograman, folderfolder, dan beragam jenis file lainnya. Untuk memudahkan dalam manajemen
file-file yang digunakan, maka perlu dilakukan pendefinisian site agar
Dreamweaver mengenali file-file tersebut.
Langkah-langkah untuk mendefinisikan site baru adalah :
1. Klik menu Site > Manage Site maka akan muncul tampilan berikut :

2. Setelah itu klik New > Site untuk menampilkan jendela yang berisi
pengaturan site yang akan dibuat.

3. Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder
tempat file yang akan digunakan dalam membuat halaman web.
74

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Berikut ini keterangannya :

Pada isian Site name, isikan nama project atau nama situs.
Local root folder merupakan folder utama. Beri centang pada Refresh
local file list Automatically agar file terbaru muncul di Dreamweaver.
Default image folder merupakan folder tempat file-file gambar disimpan.
Default image folder harus berada di dalam local root folder.
Jika sudah mempunyai domain, isikan alamat domain di isian HTTP
address agar semua link yang ada pada halaman web selalu dicek.
Enable Cache memungkiknkan Dreamweaver menggunakan file temporary
ketika mengetes halaman web (Preview in Browser) pada Browser di
komputer local. Fungsinya untuk mempercepat proses pengeksekusian file
di browser.
4. Jika sudah selesai klik OK, maka akan muncul kembali jendela Manage Sites
seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

5. Klik Done, maka hasil dari manajemen site akan tampil di Panel Files seperti gambar
berikut :

6.4 Merancang Halaman Web

Dalam merancang halaman web, tidak terlepas dari rancangan tabel, karena tabel
merupakan rangka dari sebuah halaman web.

Rancangan tabel yang baik akan

menentukan hasil akhir dari sebuah halaman web.

Setelah rancangan tabel sudah ditentukan, lengkapi halaman web dengan image, link
dan animasi jika ingin hasil rancangan halaman web menjadi menarik.

Dedi Efendi, S.T.

7.3.2 Non Embedded Script

Non embedded script merupakan pembuatan program murni PHP, di mana tag-tag HTML
yang diletakkan di dalamnya. Contoh :
<?
echo
echo
echo
echo
echo
echo
echo
echo
?>

"<html>";
"<head>";
"<title>Non Embedded Script</title>";
"</head>";
"<body>";
"Ini adalah contoh non embedded script";
"</body>";
"</html>";

Hasilnya akan terlihat seperti gambar berikut :

7.4 Style Kode PHP

Penulisan program PHP dapat dilakukan dengan menggunakan berbagai tag. Semua itu
tidak mempengaruhi hasil program yang akan dibuat. Terdapat empat macam mode
penulisan tag yang mengidentifikasikan program PHP, yaitu :
a. Style Standar
Style standar PHP mirip dengan penulisan dokumen XML (Extensible Markup Language),
yakni diawali dengan <?php dan diakhiri dengan ?>. Penggunaan style ini sangat
disarankan. Contoh :
<?php
echo "Ini adalah contoh style PHP";
?>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

b. Short Style
Style ini lumayan praktis untuk digunakan, cukup diawali dengan <? dan diakhiri
dengan ?>. Contoh :
<?
echo "Ini adalah contoh short style";
?>

Meskipun praktis digunakan, dianjurkan untuk menghindari penggunaan short style

dalam menulis kode program PHP karena ada kemungkinan server yang tidak mendukung
style ini.
c. Style Script
Cara penulisan style ini tidak jauh berbeda dengan penulisan kode program JavaScript
atau VBScript. Contoh :
<script language='php'>
echo "Ini adalah style javascript";
</script>

d. Style ASP
Sebelum membuat program dengan style ASP, terlebih dulu harus mengaktifkan
asp_tags pada file php.ini, dengan cara memberikan nilai On pada baris berikut :
; Allow ASP-style <% %> tags.
asp_tags = On

Tanda On pada baris di atas, berarti memperbolehkan penggunaan tag ASP. Contoh :
<%
echo "Ini adalah contoh style asp";
%>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

VIII.DASAR PEMROGRAMAN PHP

8.1 Variabel
Variabel adalah sebuah tempat di memori untuk menyimpan data yang nilainya dapat
diubah-ubah. Variabel dalam PHP harus memiliki nama dan tidak perlu dideklarasikan
tipe datanya terlebih dahulu sebelum digunakan.
Dalam penamaan variabel, beberapa hal yang harus diperhatikan adalah :
Variabel dimulai dengan tanda dolar ($) dan diikuti nama variabelnya.
Harus dimulai dengan huruf atau underscore (_).
Tidak boleh menggunakan tanda baca.
Tidak boleh mengandung spasi.
Case sensitive atau huruf besar dan huruf kecil dibedakan.
Contoh-contoh penulisan variabel :
Benar

Salah

$variabel

$var!abel

$pilih

$-pilih

$te98

$98te

$bulan_1

$bulan 1

8.2 Tipe Data

PHP mengenal beberapa macam tipe data, antara lain boolean, integer, float dan
string. Float lebih dikenal dengan nama double. Penulisan string selalu dawali dengan
tanda petik ganda() atau tanda petik tunggal ().
Contoh penulisan tipe data adalah sebagai berikut :
Tipe Data

Contoh

Keterangan

Boolean

$kondisi = TRUE;
$ada = FALSE;

Bilangan logik (hanya bernilai

benar atau salah)

Integer

$jumlah = 10;
$nilai = -5;

Bilangan bulat

Double

$skor = 90.00;
$bunga = 12.50;

Bilangan pecahan/real

String

$kota = Bandar Lampung;

$motto = Nyaman;

Karakter, kalimat
82

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh :
<?
$nama_barang = "Prosesor Intel Pentium-4 3,2GHz";
$harga_barang = 2500000;
$jumlah_barang = 5;
$total_bayar = $harga_barang*$jumlah_barang;
?>
<html>
<head>
<title>Pembelian Barang</title>
<style type="text/css">
.style1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; }
.style2 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; color: #FF0000; }
.style3 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; font-size: 10pt; color: #0000FF; }
</style>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF99">
<div align="center">
<span class="style2">TeknoCom</span> <span class="style3">Toko Komputer Online</span>
</div>
</td>
</tr>
<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="5" colspan="3"></td>
</tr>
<tr>
<td width="29%" height="22" class="style1">Nama Barang</td>
<td width="4%" height="22" align="center" class="style1">:</td>
<td width="67%" height="22" class="style1"><?=$nama_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Harga Barang</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1">Rp. <?=$harga_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Jumlah Pembelian</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1"><?=$jumlah_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Total Bayar</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1">Rp. <?=$total_bayar?></td>
</tr>
<tr>
<td height="5" colspan="3"></td>
</tr>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

</table>
</td>
</tr>
</table>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

8.3 Konstanta
Konstanta adalah sebuah tempat di memori untuk menyimpan data yang nilainya tetap.
Konstanta didefinisikan dengan menggunakan define. Contoh :
<?
define("harga_barang",500000);
$nama_barang = "Harddisk Seagate Barracuda 40GB";
$jumlah_barang = 5;
$total_bayar = harga_barang*$jumlah_barang;
?>
<html>
<head>
<title>Pembelian Barang</title>
<style type="text/css">
.style1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; }
.style2 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; color: #FF0000; }
.style3 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; font-size: 10pt; color: #0000FF; }
</style>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF99">
<div align="center">
<span class="style2">TeknoCom</span> <span class="style3">Toko Komputer Online</span>
</div>
</td>
</tr>

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="5" colspan="3"></td>
</tr>
<tr>
<td width="29%" height="22" class="style1">Nama Barang</td>
<td width="4%" height="22" align="center" class="style1">:</td>
<td width="67%" height="22" class="style1"><?=$nama_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Harga Barang</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1">Rp. <?=harga_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Jumlah Pembelian</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1"><?=$jumlah_barang?></td>
</tr>
<tr>
<td height="22" class="style1">Total Bayar</td>
<td height="22" align="center" class="style1">:</td>
<td height="22" class="style1">Rp. <?=$total_bayar?></td>
</tr>
<tr>
<td height="5" colspan="3"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

8.4 Operator
8.4.1 Operator Aritmetika
Operator aritmetika digunakana untuk operasi perhitungan.

Tabel di bawah ini

menunjukkan operator aritmetika pada PHP :

Operator

Operasi

$a * $b

Perkalian

$a / $b

Pembagian

$a % $b

Modulus (Sisa Pembagian)

$a + $b

Penambahan

$a $b

Pengurangan

Urutan pengerjaan dari operator aritmetika dapat dilihat pada tabel,

makin keatas

maka akan lebih dulu dikerjakan.

8.4.2 Operator Penugasan
Operator penugasan digunakan untuk penugasan atau pengisian nilai kedalam suatu
variabel. Berikut ini merupakan operator yang tergolong sebagai operator penugasan :
Operator
=
+=

Kegunaan
Penugasan atau pengisian nilai variabel
Menambahkan variabel di sisi kiri dengan nilai
di sisi kanan

Mengurangi variabel di sisi kiri dengan nilai di

sisi kanan

Mengalikan variabel di sisi kiri dengan nilai di

sisi kanan

Membagi variabel di sisi kiri dengan nilai di sisi

kanan

Memperoleh sisa pembagian antara variabel di

sisi kiri dengan nilai di sisi kanan

Melakukan operasi and terhadap variabel di

sisi kiri dengan nilai di sisi kanan

Melakukan operasi or terhadap variabel di

sisi kiri dengan nilai di sisi kanan

Melakukan operasi xor terhadap variabel di

sisi kiri dengan nilai di sisi kanan

Contoh
$X = 2;
$X += 2;
identik dengan :
$X = $X + 2;
$X -= 2;
identik dengan :
$X = $X 2;
$X *= 2;
identik dengan :
$X = $X * 2;
$X /= 2;
identik dengan :
$X = $X / 2;
$X %= 2;
identik dengan :
$X = $X % 2;
$X &= 2;
identik dengan :
$X = $X & 2;
$X |= 2;
identik dengan :
$X = $X | 2;
$X ^= 2;
identik dengan :
$X = $X ^ 2;
86

Pemrograman Berbasis Web

Dedi Efendi, S.T.

8.4.3 Operator Pembanding

Operator pembanding atau dikenal juga sebagai operator relasional adalah operator
yang digunakan untuk melakukan pembandingan dua buah variabel atau operand dan
menghasilkan nilai benar atau salah.

Yang termasuk dalam kelompok operator

pembanding adalah sebagai berikut :

Operator

Operasi

Keterangan

$a == $b

Sama dengan

Bernilai benar jika nilai $a sama dengan $b

$a === $b

Identik

Bernilai benar jika nilai dan tipe data $a

sama dengan $b

$a < $b

Lebih kecil dari

Bernilai benar jika $a lebih kecil dari $b

$a > $b

Lebih besar dari

Bernilai benar jika $a lebih besar dari $b

$a <= $b

Lebih kecil atau sama dengan

$a >= $b

Lebih besar atau sama dengan

$a != $b
$a <> $b

Tidak sama dengan

$a! == $b

Tidak Identik

Bernilai benar jika $a lebih kecil atau

sama dengan $b
Bernilai benar jika $a lebih besar atau
sama dengan $b
Bernilai benar jika nilai $a tidak sama
dengan $b
Bernilai benar jika nilai atau tipe data $a
tidak sama dengan $b

8.4.4 Operator Increment dan Decrement

Operator ini hanya bekerja pada tipe data integer (bilangan bulat), karena fungsinya
yang menaikkan bilangan (increment) dan menurunkan bilangan (decrement) terhadap
nilai tertentu.

Yang termasuk dalam kelompok operator increment dan decrement

adalah sebagai berikut :

Operator

Operasi

Keterangan

++$a

Pre-increment

$a ditambah satu, baru mengembalikan $a

$a++

Post-increment

Mengembalikan $a, baru $a ditambah satu

--$a

Pre-decrement

$a dikurang satu, baru mengembalikan $a

$a++

Post-decrement

Mengembalikan $a, baru $a dikurang satu

8.4.5 Operator Logika

Operator logika digunakan untuk menggabungkan kondisi berganda dan menghasilkan
sebuah ekspresi yang bernilai benar (nilai 1) atau salah (nilai 0). Yang tergolong sebagai
operator kelompok ini adalah :

Pemrograman Berbasis Web

Operator

Dedi Efendi, S.T.

Operasi

Keterangan

$a and $b

And

Benar jika keduanya bernilai benar

$a or $b

Benar jika salah satu atau keduanya bernilai benar

$a xor $b

Xor

Benar jika salah satu bernilai benar

!$a

Not

Benar jika $a bernilai salah

$a && $b

And

Benar jika keduanya bernilai benar

$a xor $b

Benar jika salah satu atau keduanya bernilai benar

Berikut adalah tabel kebenaran operasi logika :

$a
Benar
Benar
Salah
Salah

$b
Benar
Salah
Benar
Salah

$a and $b
Benar
Salah
Salah
Salah

$a or $b
Benar
Benar
Benar
Salah

$a xor $a
Salah
Benar
Benar
Salah

!$a
Salah
Salah
Benar
Benar

8.5 Struktur Kendali

Struktur kendali merupakan pengatur aliran program, mempunyai rangkaian perintah
yang harus ditulis untuk memenuhi beberapa keadaan, yaitu :
Mengulang suatu perintah jika suatu kondisi terpenuhi.
Melanjutkan sebuah pernyataan bila kondisi terpenuhi.
Memilih sebuah pilihan dari beberapa alternatif bila kondisi terpenuhi.
Struktur kendali dapat dibagi menjadi dua jenis, yaitu struktur kendali percabangan
(pengambilan keputusan) dan pengulangan (looping).

8.6 Percabangan
Struktur kendali percabangan adalah struktur kendali yang memungkinkan pemilihan
atas perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada empat macam
perintah percabangan dalam PHP, yaitu if, if-else, if-elseif dan switch.
8.6.1 Bentuk if
Bentuk if yang paling sederhana adalah sebagai berikut :
if (kondisi) Pernyataan;

Pada bentuk ini, bagian pernyataan akan dijalankan bila kondisi bernilai benar.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Sekiranya jumlah pernyataan yang akan dijalankan lebih dari satu, maka penulisannya
adalah seperti berikut :
if (kondisi)
{
pernyataan_1;
...
Pernyataan_n;
}

Berikut contoh penggunaan :

<html>
<head>
<title>Contoh Struktur Kendali if</title>
<style type="text/css">
<!-.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
-->
</style>
</head>
<body>
<?
$kode_hari = date("w");
$ket = "Sekarang bukan hari minggu, saatnya bekerja !";
if ($kode_hari==0) $ket = "Sekarang hari minggu, selamat berlibur !";
?>
<div align="center" class="style1"><?=$ket?></div>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

8.6.4 Bentuk switch

Perintah ini digunakan sebagai alternatif pengganti dari bentuk if-elseif.

Dengan

perintah ini program percabangan akan semakin mudah dibuat dan dipelajari. Bentuk
umumnya adalah sebagai berikut :
switch (variabel)
{
case konstanta_1:
pernyataan_1;
break;
case konstanta_2:
pernyataan_2;
break;
case konstanta_3:
pernyataan_3;
break;
...
default:
pernyataan_n;
}

Perintah switch akan membandingkan nilai variabel dengan konstanta-konstanta yang

berada di case.
terakhir.

Pembandingan akan dimulai dari konstanta 1 sampai konstanta

Jika nilai variabel sama dengan nilai konstanta tertentu, misalnya

konstanta_1, maka pernyataan_1 akan dijalankan sampai ditemukan pernyataan break.

Pernyataan break akan membawa proses keluar dari perintah switch. Jika nilai variabel
tidak ada yang sama dengan konstanta-konstanta yang diberikan maka pernyataan pada
default akan dijalankan.
Berikut contoh sruktur kendali dengan switch :
<html>
<head>
<title>Contoh Struktur Kendali switch</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
</style>
</head>
<body>
<?
$kode_hari = date("w");
switch ($kode_hari)
{
case 0 :
$hari = "minggu";
break;
case 1 :
$hari = "senin";
break;

Pemrograman Berbasis Web

case 2 :
$hari =
break;
case 3 :
$hari =
break;
case 4 :
$hari =
break;
case 5 :
$hari =
break;
default :
$hari =

Dedi Efendi, S.T.

"selasa";

"rabu";

"kamis";

"jumat";

"sabtu";

}
?>

Hasilnya akan terlihat seperti gambar berikut :

8.7 Perulangan Atau Looping

Pengulangan atau looping dalam PHP dapat menggunakan for, while, dan do-while.
8.7.1 Pengulangan for
Bentuk umum pengulangan for :
for (inisialisasi; kondisi; step)
{
pernyataan_pernyataan
}

Pengulangan for melakukan inisialisasi sebelum iterasi/loop pertama, kemudian

melakukan test terhadap kondisi dan pada akhir tiap iterasi melakukan penambahan
atau pengurangan pada variabel (step) yang digunakan sebagai pengkondisian untuk
perulangan.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh :
<html>
<head>
<title>Perulangan for</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
</style>
</head>
<body>
<?
for ($i=1; $i<=5; $i++)
{
?>
<div align="center" class="style1"><?=$i?></div>
<?
}
?>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

8.7.2 Pengulangan while

Bentuk umum pengulangan while :
inisialisasi;
while (kondisi)
{
pernyataan_pernyataan;
step;
}

Pengulangan while akan memeriksa kondisi terlebih dahulu. Jika bernilai benar, maka
pernyataan-pernyataan yang terdapat dalam { } akan dijalankan dan kemudian kondisi
dievaluasi lagi. Proses ini diulang terus-menerus sampai kondisi bernilai salah.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Contoh penggunaan :
<html>
<head>
<title>Perulangan while</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
</style>
</head>
<body>
<?
$x = 1;
while ($x<=5)
{
?>
<div align="center" class="style1">TEKNOKRAT</div>
<?
$x++;
}
?>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

8.7.3 Pengulangan do-while

Bentuk umum pengulangan while :
inisialisasi;
do {
pernyataan_pernyataan
step;
} while (kondisi);

Pengulangan akan berakhir jika kondisi (yang diuji sesudah pernyataan-pernyataan

dijalankan) bernilai salah.

Pemrograman Berbasis Web

Dedi Efendi, S.T.

`Contoh penggunaan :
<html>
<head>
<title>Perulangan do_while</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
</style>
</head>
<body>
<?
$x = 0;
do
{
?>
<div align="center" class="style1">PHP</div>
<?
$x++;
} while ($x<=4);
?>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

8.8 Array
Array adalah struktur data yang dapat menyimpan sekumpulan data yang bertipe sama.
Masing-masing data diakses dengan melalui indeks atau juga biasa disebut subscript.
Dalam hal ini, indeks berupa bilangan bulat yang dimulai dengan nol.
Array pada PHP dibuat dengan bentuk sebagai berikut :
$namaArray = array(elemen_1, , elemen_N);

Contoh :
$hasil = array(70,80,75,90,65);
$musik = array(Jazz, Rock,Keroncong, Dangdut, Pop);

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Array juga dapat dibuat dengan bentuk berikut :

$kota[]
$kota[]
$kota[]
$kota[]
$kota[]

=
=
=
=
=

Medan;
Jakarta;
Bandung;
Denpasar;
Makassar;

Kelima pernyataan tersebut dapat juga ditulis menjadi :

$kota[0]
$kota[1]
$kota[2]
$kota[3]
$kota[4]

=
=
=
=
=

Medan;
Jakarta;
Bandung;
Denpasar;
Makassar;

Contoh penggunaan :
<html>
<head>
<title>Tanggal dalam Bahasa Indonesia</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
</style>
</head>
<body>
<?
$hari = array("Minggu","Senin","Selasa","Rabu","Kamis",
"Jumat","Sabtu");
$bulan = array("Januari","Februari","Maret","April","Mei","Juni",
"Juli","Agustus","September","Oktober","November",
"Desember");
$kode_hari = date("w");
$tgl = date("d");
$kode_bln = date("m")-1;
$thn = date("Y");
$tgl_lengkap = "$hari[$kode_hari], $tgl $bulan[$kode_bln] $thn";
?>
<div align="center" class="style1"><?=$tgl_lengkap?></div>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pemrograman Berbasis Web

Dedi Efendi, S.T.

IX. PENANGANAN FORM DI PHP

Form merupakan elemen yang penting dalam pemrograman web, karena sangat berguna
untuk mendapatkan input dari user.

9.1 Dasar Penggunaan Form

Form dibentuk dengan menggunakan pasangan tag <form> dan </form>. Dua atribut
yang umum digunakan pada tag <form> adalah ACTION dan METHOD.
ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada
form. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan
halaman web itu sendiri.
METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang
disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST.
POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET
akan membuat informasi dikirim menjadi satu dengan URL.
Contoh :

<form name=form_registrasi action=simpan.php method=post>

...
</form>

9.2 Memasukkan Data Dengan Input

Tag <input> digunakan untuk melakukan pemasukan data dan letaknya berada dalam
pasangan tag <form> dan </form>. Ada bermacam-macam tipe pemasukan data, antara
lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT
dan RESET.
Tag <input> memiliki sejumlah atribut, yaitu :
Atribut
NAME
SIZE
MAXLENGTH
VALUE
CHECKED
TYPE

Keterangan
Menentukan nama data. Atribut ini diperlukan oleh semua jenis
masukan, kecuali SUBMIT dan RESET.
Menentukan ukuran kotak masukan yang tertampil untuk teks dan
password
Menentukan jumlah karakter yang dapat dimasukkan dalam kotak
password dan kotak teks.
Menentukan nilai awal untuk kotak masukan
Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal.
Menentukan tipe kotak masukan
98

Pemrograman Berbasis Web

Dedi Efendi, S.T.

9.2.1 Memasukkan Data dengan Kotak Teks (Text Box)

Kotak teks dibuat dengan menggunakan tag <input> dengan atribut type diberi nilai
text.

Kotak teks bermanfaat untuk memasukkan data seperti nama orang atau

alamat seseorang. Contoh pemakaian :

Nama : <input type="text" name="nama_mhs" size="20" maxlength="20">

Pada kode diatas, kotak teks yang dibentuk diberi nama nama_mhs, dengan panjang
tampilan sebanyak 20 karakter dan jumlah karakter maksimal yang dapat diisi oleh
pemakai sebanyak 20 buah. Tampilannya akan terlihat seperti gambar berikut :

9.2.2 Memasukkan Data dengan Kotak Password (Password Box)

Kotak password dibuat dengan menggunakan tag <input> dengan atribut type diberi
nilai password. Kotak password akan membuat setiap karakter yang diketikkan oleh
pemakai disembunyikan, misalnya dengan diganti tanda * untuk setiap karakter yang
diketikkan pemakai. Contoh penggunaan :
Password : <input type="password" name="passwd" size="15" maxlength="15">

Pada kode diatas, kotak password diberi nama passwd, dengan panjang tampilan
sebanyak 15 karakter dan jumlah karakter maksimal yang dapat diisi oleh pemakai
sebanyak 15 buah. Tampilannya akan terlihat seperti gambar berikut :

9.2.3 Pemilihan Data dengan Tombol Radio (Radio Button)

Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai
hanya dapat memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan
menggunakan tag <input> dengan atribut type diberi nilai radio. Untuk membentuk
sekelompok radio dinyatakan sebuah pilihan, atribut name perlu diisi dengan nama yang
sama. Contoh penggunaan :
<input type="radio" name="kelamin" value=pria checked>pria
<input type="radio" name="kelamin" value=wanita>wanita

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Pada kode diatas, sekelompok tombol radio diberi nama kelamin dan dilengkapi
dengan atribut checked, yang artinya bahwa tombol radio inilah yang secara bawaan
dalam keadaan terpilih.

Atribut value digunakan untuk memberikan nilai terhadap

masing-masing tombol. Tampilannya akan terlihat seperti gambar berikut :

9.2.4 Memasukkan Data dengan Kotak Cek (Checkbox)

Kotak cek dibuat dengan menggunakan tag <input> dengan atribut type diberi nilai
checkbox. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai
mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat
petunjuk mouse menunjuk kotak cek.
Kotak cek paling tidak melibatkan atribut name dan value. Adapun atribut checked
bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang.
Contoh penggunaan :
<input
<input
<input
<input
<input

type="checkbox"
type="checkbox"
type="checkbox"
type="checkbox"
type="checkbox"

name="hobi1"
name="hobi2"
name="hobi3"
name="hobi4"
name="hobi5"

value="makan">makan
value="mancing">mancing
value="olah raga">olah raga
value="membaca">membaca
value="main musik">main musik

Hasilnya akan terlihat seperti gambar berikut :

9.3 Pemilihan Data dengan Kotak Combo (Combo Box)

Kotak combo (drop-down menu) atau daftar pilihan dibuat dengan menggunakan
pasangan tag <select> dan </select>. Contoh penggunaan :
<select name="agama">
<option value="0" selected>[pilih agama]</option>
<option value="islam">islam</option>
<option value="protestan">protestan</option>
<option value="katolik">katolik</option>
<option value="hindu">hindu</option>
<option value="budha">budha</option>
<option value="lain-lain">lain-lain</option>
</select>

Pada kode diatas, kotak combo memiliki 7 pilihan. Masing-masing pilihan ditentukan
melalui tag <option>. Nilai pada value menyatakan nilai-nilai pilihan. Atribut selected
pada tag <option> menyatakan bahwa nilai pada option inilah yang menjadi nilai
bawaan.
100

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Tampilannya akan terlihat seperti gambar berikut :

9.4 Memasukkan Data dengan TEXTAREA

Pasangan tag <textarea> DAN </textarea> berguna untuk membentuk suatu masukan
yang panjang yang bisa mencakup banyak baris. Atribut-atribut yang digunakan pada
tag <textarea> dapat dilihat pada tabel berikut :
Atribut

Keterangan

NAME

Menentukan nama untuk textarea

ROWS

Menentukan jumlah baris yang tertampil pada layar

COLS

Menentukan jumlah kolom yang tertampil pada layar

Contoh penggunaan :
Komentar : <BR> <TEXTAREA NAME="komentar" rows="5" cols="40"></TEXTAREA>

Pada kode diatas, jumlah baris yang disediakan dalam tampilan mencakup 5 baris,
sedangkan jumlah karakter per baris sebesar 40 buah.

Perlu diketahui, teks yang

berada antara <textarea> dan </textarea> akan dijadikan sebagai nilai bawaan.
Tampilannya akan terlihat seperti gambar berikut :

9.5 Tombol Submit dan Reset

Type sumbit pada tag <input> akan membentuk tombol Submit, yaitu tombol yang
menyebabkan URL yang disebutkan pada action pada tag <form> akan dimuat.
Sedangkan Type reset pada tag <input> akan membentuk tombol Reset, yaitu tombol
yang berfungsi untuk mengosongkan atau mengembalikan nilai kotak teks ke nilai
bawaan. Contoh penggunaan :
<INPUT TYPE="submit" VALUE="Kirim">
<INPUT TYPE="reset" VALUE="Batal">

101

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Pada kode diatas, tombol submit akan ditampilkan dengan tulisan Kirim dan tombol
reset akan ditampilkan dengan tulisan Batal.

Tampilannya akan terlihat seperti

gambar berikut :

9.6 Penanganan Form

Pertama-tama perlu dituliskan kode HTML untuk membuat form (form_registrasi.htm),
yaitu :
<html>
<head>
<title>Form Registrasi</title>
<style>
table { font-size :10pt; font-family : verdana }
.style1 { font-size: 12pt; font-weight: bold; color: #0000FF; }
</style>
</head>
<body>
<form name="biodata" method="post" action="tampil.php">
<div align="center">
<table width="700" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF99" align="center" class="style1">
FORM REGISTRASI
</td>
</tr>
<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="25"> </td>
<td> </td>
<td height="25"> </td>
</tr>
<tr>
<td width="21%" height="25">Nama Lengkap </td>
<td width="3%" align="center">:</td>
<td width="76%" height="25">
<INPUT TYPE="text" NAME="nama" size="40">
</td>
</tr>
<tr>
<td width="21%" height="75">Alamat</td>
<td width="3%" height="75" align="center">:</td>
<td width="76%" height="75">
<TEXTAREA NAME="alamat" rows="3" cols="57"></TEXTAREA>
</td>
</tr>

102

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td height="25">Tanggal Lahir </td>
<td align="center">:</td>
<td height="25">
<input name="tanggal" type="text" id="tanggal" size="2">
<select name="bulan" id="bulan">
<option value="0" selected>[Pilih Bulan]</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<input name="tahun" type="text" id="tahun" size="4">
</td>
</tr>
<tr>
<td width="21%" height="25">Agama</td>
<td width="3%" align="center">:</td>
<td width="76%" height="25">
<SELECT NAME="agama">
<option value="0" selected>[Pilih Agama]</option>
<option value="Islam">Islam</option>
<option value="Protestan">Protestan</OPTION>
<option value="Katolik">Katolik</OPTION>
<option value="Hindu">Hindu</OPTION>
<option value="Budha">Budha</OPTION>
<option value="Lain-lain">Lain-lain</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td width="21%" height="25">Pekerjaan</td>
<td width="3%" align="center">:</td>
<td width="76%" height="25">
<INPUT TYPE="radio" NAME="pekerjaan" VALUE="Mahasiswa"
checked>Mahasiswa
<INPUT TYPE="radio" NAME="pekerjaan" VALUE="Karyawan">
Karyawan
<INPUT TYPE="radio" NAME="pekerjaan" VALUE="Wiraswasta">
Wiraswasta
<INPUT TYPE="radio" NAME="pekerjaan" VALUE="Pengangguran">
Pengangguran
<INPUT TYPE="radio" NAME="pekerjaan" VALUE="Lain-lain">
Lain-lain
</td>
</tr>

103

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td width="21%" height="25">Hobi</td>
<td width="3%" align="center">:</td>
<td width="76%" height="25">
<INPUT TYPE="checkbox" NAME="hobi1" VALUE="Makan">Makan
<INPUT TYPE="checkbox" NAME="hobi2" VALUE="Mancing">
Mancing
<INPUT TYPE="checkbox" NAME="hobi3" VALUE="Olah Raga">
Olah Raga
<INPUT TYPE="checkbox" NAME="hobi4" VALUE="Membaca">
Membaca
<INPUT TYPE="checkbox" NAME="hobi5" VALUE="Main Musik">
Main Musik
</td>
</tr>
<tr>
<td height="49" colspan="3" align="center">
<INPUT name="submit" TYPE="submit" VALUE="Simpan">
<INPUT name="reset" TYPE="reset" VALUE="Batal">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Hasilnya akan terlihat seperti gambar berikut :

Pada kode diatas, dapat dilihat bahwa nilai atribut ACTION pada tag <FORM> adalah
tampil.php.

104

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Kode program untuk halaman tampil.php adalah sebagai berikut :

<html>
<head>
<title>Proses Data yang Dimasukkan</title>
<style>
table { font-size :10pt; font-family : verdana }
.style1 { font-size: 12pt; font-weight: bold; color: #0000FF; }
</style>
</head>
<body>
<?
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
$tgl = $_POST["tanggal"];
$bln = $_POST["bulan"];
$thn = $_POST["tahun"];
$tgl_lahir = "$tgl/$bln/$thn";
$agama = $_POST["agama"];
$pekerjaan = $_POST["pekerjaan"];
if (!empty($_POST["hobi1"])) $hobi[] = $_POST["hobi1"];
if (!empty($_POST["hobi2"])) $hobi[] = $_POST["hobi2"];
if (!empty($_POST["hobi3"])) $hobi[] = $_POST["hobi3"];
if (!empty($_POST["hobi4"])) $hobi[] = $_POST["hobi4"];
if (!empty($_POST["hobi5"])) $hobi[] = $_POST["hobi5"];
?>
<table width="700" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF99" align="center" class="style1">
DATA MEMBER
</td>
</tr>
<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td colspan="3" height="10" align="center"></td>
</tr>
<tr>
<td width="18%" height="24">Nama Lengkap </td>
<td width="3%" height="24" align="center">:</td>
<td width="79%" height="24"><?=$nama?></td>
</tr>
<tr>
<td width="18%" height="24">Alamat</td>
<td width="3%" height="24" align="center">:</td>
<td width="79%" height="24"><?=$alamat?></td>
</tr>
<tr>
<td height="24">Tanggal Lahir</td>
<td height="24" align="center">:</td>
<td height="24"><?=$tgl_lahir?></td>
</tr>
<tr>
<td width="18%" height="24">Agama</td>
<td width="3%" height="24" align="center">:</td>
<td width="79%" height="24"><?=$agama?></td>
</tr>

105

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td width="18%" height="24">Pekerjaan</td>
<td width="3%" height="24" align="center">:</td>
<td width="79%" height="24"><?=$pekerjaan?></td>
</tr>
<tr>
<td width="18%" height="24" valign="top">Hobi</td>
<td width="3%" height="24" valign="top" align="center">:</td>
<td width="79%" height="24">
<?
if (!empty($hobi)) foreach($hobi as $elemen)
echo "<LI>$elemen";
?>
</td>
</tr>
<tr>
<td height="10" colspan="3" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Penjelasan :
Pada kode program diatas, terdapat kode berikut :
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
$tgl = $_POST["tanggal"];
$bln = $_POST["bulan"];
$thn = $_POST["tahun"];
$agama = $_POST["agama"];
$pekerjaan = $_POST["pekerjaan"];

Kode tersebut berguna untuk mendapatkan nilai dari elemen form bernama nama,
alamat, tanggal, bulan, tahun, agama, dan pekerjaan.
kemudian disimpan dalam variabel $nama,
$pekerjaan.

Nilai tersebut

$alamat, $tgl, $bln, $thn, $agama, dan

Jadi perintah $_POST[] dapat digunakan untuk mendapatkan data dari

kotak text, kotak password, kotak combo, kotak cek, tombol radio, dan textarea.
Pada kode program diatas, juga terdapat kode berikut :
if
if
if
if
if

(!empty($_POST["hobi1"]))
(!empty($_POST["hobi2"]))
(!empty($_POST["hobi3"]))
(!empty($_POST["hobi4"]))
(!empty($_POST["hobi5"]))

$hobi[]
$hobi[]
$hobi[]
$hobi[]
$hobi[]

=
=
=
=
=

$_POST["hobi1"];
$_POST["hobi2"];
$_POST["hobi3"];
$_POST["hobi4"];
$_POST["hobi5"];

106

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Kode tersebut berguna untuk mendapatkan nilai dari kotak cek dengan nama elemen
form hobi1, hobi2, hobi3, hobi4, hobi5. Nilai tersebut kemudian disimpan
dalam array yang dinamai $hobi.
Sedangkan kode berikut :
if (!empty($hobi)) foreach($hobi as $elemen)
echo "<LI>$elemen";

Digunakan untuk menampilkan isi dari array $hobi.

Setelah data dimasukkan pada form dan mengklik tombol Simpan, maka akan muncul
halaman berikut :

107

Pemrograman Berbasis Web

Dedi Efendi, S.T.

X. DATABASE MYSQL
10.1 Pengenalan MySQL
Database sangatlah penting dalam pembuatan software, karena memungkinkan
pengolahan dan penyimpanan data yang terorganisasi secara optimal. Situs-situs web
yang menyimpan dan menampilkan informasi dalam jumlah besar memerlukan database
supaya informasi yang ada dapat diolah, disimpan dan terorganisasi dengan baik.
MySQL

merupakan

Relational

Database

Management

System

(RDBMS)

yang

dikembangkan oleh sebuah perusahaan pengembangan perangkat lunak dan konsultan

database bernama MySQL AB yang bertempat di Swedia. MySQL didistribusikan secara
gratis di bawah lisensi GPL (General Public License), dimana setiap orang bebas
menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closed
source atau komersial.
Suatu sistem relational database menyimpan data pada tabel berbeda dan tidak
meletakkannya pada satu tabel saja. Hal ini meningkatkan kecepatan dan fleksibilitas.
Tabel-tabel tersebut dihubungkan dengan suatu relasi yang didefiniskan sehingga dapat
mengkombinasikan data dari beberapa tabel pada suatu saat.

MySQL menggunakan

standar SQL (Structures Query Language), yaitu bahasa standar yang paling banyak
digunakan untuk mengakses database.
Sebagai database server yang memiliki konsep database modern, MySQL memiliki banyak
sekali keistimewaan. Berikut ini beberapa keistimewaan yang dimiliki MySQL :
a. Portability
MySQL dapat berjalan stabil pada berbagai sistem operasi di antaranya adalah
Windows, Linux, FreeBSD, Mac OS X Server, Solaris, Amiga, HP-UX dan masih banyak
lagi.
b. Open Source
MySQL didistribusikan secara open source di bawah lisensi GPL sehingga dapat
digunakan secara gratis.
c. Multiuser
MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa
mengalami masalah atau konflik. Hal ini memungkinkan MySQL dapat diakses client
secara bersamaan.

108

Pemrograman Berbasis Web

Dedi Efendi, S.T.

d. Performace Tuning
MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana,
dengan kata lain dapat memproses lebih banyak query per satuan waktu.
e. Column Types
MySQL memiliki tipe kolom yang sangat kompleks, seperti signed/unsigned integer,
float, double, char, varchar, text, blob, date, time, datetime, timestamp, year, set
serta enum.
f. Command dan Functions
MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah SELECT
dan WHERE dalam query.
g. Security
MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask, nama host,
dan izin akses user dengan sistem perizinan yang mendetail serta password
terenkripsi.
h. Scalability dan Limits
MySQL mampu menangani basis data dalam skala besar, dengan jumlah records lebih
dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu, batas indeks yang
dapat ditampung mencapai 32 indeks pada tiap tabelnya.
i. Connectivity
MySQL dapat melakukan koneksi dengan client menggunakan protokol TCP/IP, Unix
socket (Unix), atau Named Piped (NT).
j. Client dan Tools
MySQL melengkapi dengan berbagai tool yang dapat digunakan untuk administrasi
database, dan pada setiap tool yang ada disertakan petunjuk online.
k. Struktur Tabel
MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE
dibandingkan DBMS lainnya semacam PostgreSQL ataupun Oracle.

10.2 Tipe Kolom Pada MySQL

10.2.1

Tipe Numerik

Tipe Kolom

Penggunaan Memori

Range Data

TINYINT

1 byte

0 255

SMALLINT

2 byte

0 65535

MEDIUMINT

3 byte

0 16777215

INT, INTEGER

4 byte

0 4294967295

109

Pemrograman Berbasis Web

Dedi Efendi, S.T.

0 18446744073709551615

BIGINT

8 byte

FLOAT(p)

4 byte jika 0 <= p <= 24,

8 byte jika 25 <= p <= 53

FLOAT

4 byte

DOUBLE [PRECISION],
item REAL

8 byte

DECIMAL(M,D),
NUMERIC(M,D)

M+2 bytes jika D > 0,

M+1 bytes jika D = 0
(D+2, jika M < D)

10.2.2

1.175494351E-38
3.402823466E+38.
2.2250738585072014E-308
1.7976931348623157E+308

Tipe Tanggal dan Waktu

Tipe Kolom

Penggunaan Memori

Range Data

DATE

3 byte

'1000-01-01' '9999-12-31'

DATETIME

8 byte

'1000-01-01 00:00:00' '9999-12-31 23:59:59'

TIMESTAMP

4 byte

'1970-01-01 00:00:00' '2037-01-01 00:00:00'

TIME

3 byte

'-838:59:59' '838:59:59'

YEAR

1 byte

1901 2155

10.2.3

Tipe Data String

Tipe Kolom

Penggunaan Memori

Range Data

CHAR(M)

M byte, 0 <= M <= 255

0 255 karakter

VARCHAR(M)

L+1 byte, dimana L <= M

dan 0 <= M <= 255

0 255 karakter

TINYBLOB, TINYTEXT

L+1 byte, dimana L < 2^8

0 255 karakter

BLOB, TEXT

L+2 byte, dimana L < 2^16

0 65,535 karakter

MEDIUMBLOB, MEDIUMTEXT

L+3 byte, dimana L < 2^24

0 16,777,215 karakter

LONGBLOB, LONGTEXT

L+4 byte, dimana L < 2^32

0 4GB karakter

10.3 Manajemen Database MySQL Dengan Sqlyog

SQLyog merupakan tool untuk manajemen database MySQL yang memiliki tampilan
grafis. SQLyog hanya berjalan pada sistem operasi Windows.
10.3.1

Koneksi ke MySQL Server

Untuk dapat menggunakan SQLyog, database server MySQL harus dalam keadaan aktif.
Jika server yang akan dihubungkan tidak aktif, maka server harus dijalankan terlebih
dahulu.
110

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Ketika SQLyog dipanggil, maka akan muncul jendela untuk koneksi ke MySQL server
seperti gambar berikut :

Berikut informasi yang harus diisi untuk melakukan koneksi ke database server MySQL :
MySQL Host Address diisi dengan nama host atau IP address dari MySQL server yang
akan dihubungkan. Nilai defaultnya adalah localhost.
User Name diisi dengan nama pemakai untuk melakukan koneksi ke MySQL server.
Nama pemakai yang dimasukan adalah nama pemakai MySQL, bukan nama pemakai
FTP atau Web Server. User defaultnya adalah root.
Password diisi dengan password untuk nama pemakai MySQL.
Port diisi dengan nomor port TCP/IP untuk melakukan koneksi ke MySQL server.
Nomor port defaultnya adalah 3306.
Setelah koneksi ke database server MySQL berhasil, maka akan muncul jendela utama
SQLyog seperti gambar berikut :

111

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Jendela utama SQLyog dibagi menjadi 3 panel, yaitu object browser, SQL window, dan
result window :
Object Browser menampilkan secara detail semua database, tabel, kolom, dan
indeks yang tedapat pada MySQL server.
SQL Window merupakan jendela tempat mengetikkan perintah SQL yang ingin
dieksekusi.
Result Window menampilkan hasil query yang dieksekusi.

Jendela ini juga

menampilkan informasi tentang database, tabel, kolom, dan indeks yang dipilih pada
object browser.
10.3.2

Menambah User Baru

Pada database server MySQL yang bertindak sebagai super user adalah root sehingga
root-lah yang berkuasa dalam mengelola manajemen database. Sangat tidak dianjurkan
untuk selalu mengakses database dengan user root, karena dapat berakibat fatal jika
memberikan perintah yang keliru. Oleh karena itu perlu ditambahkan user baru pada
database MySQL.
Berikut ini langkah-langkah untuk menambah user baru :
1. Klik menu Tools, kemudian pilih User Manager dan klik Add User.

Maka akan

muncul jendela seperti gambar berikut :

2. Masukkan username, host, dan password untuk user baru, serta pilih privilege yang
akan diberikan.

Host dapat Anda isi dengan % atau localhost, apabila diisi

dengan % maka user baru tersebut dapat mengakses database server MySQL dari
mana saja sedangkan apabila diisi dengan localhost maka user baru tersebut hanya
dapat mengakses database MySQL secara local. Kemudian tekan tombol Create.
112

Pemrograman Berbasis Web

10.3.3

Dedi Efendi, S.T.

Membuat Database Baru

Langkah-langkah untuk membuat database baru adalah sebagai berikut :

1. Klik menu DB dan pilih Create Database, maka akan muncul jendela seperti gambar
berikut :

2. Masukkan nama database, kemudian klik tombol Create.

3. Database baru tersebut akan langsung terpilih pada object browser.
10.3.4

Membuat Tabel dalam Database

Langkah-langkah untuk membuat tabel dalam database adalah sebagai berikut :

1. Pilih database yang akan digunakan pada object browser, kemudian klik menu DB
dan pilih Create Table, maka akan muncul jendela seperti gambar berikut :

2. Setelah dimasukkan nilai untuk masing-masing kolom/field, kemudian klik tombol

Create Table untuk menyimpan tabel yang dibuat, maka akan muncul jendela untuk
memberi nama tabel seperti gambar berikut :

113

Pemrograman Berbasis Web

Dedi Efendi, S.T.

3. Masukkan nama tabel, kemudian klik tombol OK, maka akan muncul pesan bahwa
tabel berhasil dibuat seperti gambar berikut :

4. Klik tombol OK dan akan muncul jendela konfirmasi seperti gambar berikut :

5. Klik tombol Yes jika ingin membuat tabel yang lain atau klik No jika Anda ingin
kembali ke jendela utama SQLyog.
10.3.5

Mengubah Struktur Tabel

Langkah-langkah untuk mengubah struktur tabel adalah sebagai berikut :

1. Pilih tabel yang akan diubah strukturnya pada object browser, kemudian klik menu
Table dan pilih Alter Table, maka akan muncul jendela seperti gambar berikut :

2. Setelah struktur tabel diubah, kemudian klik tombol Alter Table untuk menyimpan
perubahan.

114

Pemrograman Berbasis Web

10.3.6

Dedi Efendi, S.T.

Mengubah Nama Tabel

Untuk mengubah nama tabel, pilih tabel yang akan diubah namanya pada object
browser, kemudian klik menu Table dan pilih Rename Table atau tekan tombol F2.
10.3.7

Menghapus Tabel

Untuk menghapus tabel, pilih tabel yang akan dihapus pada object browser, kemudian
klik menu Table dan pilih Drop Table atau tekan tombol Delete.
10.3.8

Menampilkan Data

Untuk menampilkan data, pilih tabel yang datanya akan ditampilkan pada object
browser, kemudian klik menu Table dan pilih View Data atau tekan tombol Enter, maka
data akan ditampilkan pada Result Window.
10.3.9

Menipulasi Data

Untuk menambah, meng-update, atau menghapus data pada tabel, pilih tabel yang akan
dimanipulasi pada object browser, kemudian klik menu Table dan pilih Insert/Update
Data for the table, maka sekarang data dapat ditambah, di-update atau dihapus pada
Result Windows.

115

Pemrograman Berbasis Web

Dedi Efendi, S.T.

XI. PHP DAN DATABASE

11.1 Melakukan Koneksi Ke Database Mysql
Sebelum melakukan pengolahan data pada database, langkah pertama yang harus
dilakukan adalah melakukan koneksi ke database, perintah yang digunakan adalah
sebagai berikut :
$link = mysql_connect("mysql_host", "mysql_user", "mysql_password")
or die("Koneksi Gagal");

Contoh :
$db_host = "localhost";
$db_user = "tekno";
$db_password = "web"
$link = mysql_connect($db_host,$db_user,$db_host) or die("Koneksi Gagal");

Atau :
$db_host = "192.168.10.237";
$db_user = "tekno";
$db_password = "web";
$link = mysql_connect($db_host,$db_user,$db_host) or die("Koneksi Gagal");

11.2 Pemilihan Database

Setelah melakukan koneksi ke database MySQL, kemudian dilakukan pemilihan database
yang akan digunakan, perintah yang digunakan adalah sebagai berikut :
mysql_select_db("mysql_database") or die("Database Tidak Ditemukan");

Contoh :
$db_name = "teknokrat";
mysql_select_db($db_name) or die("Database Tidak Ditemukan");

11.3 Melakukan Query

Setelah kita memilih database yang digunakan, kita dapat mengirimkan query dan
mengeksekusinya, perintah yang digunakan adalah seperti contoh berikut :

116

Pemrograman Berbasis Web

Dedi Efendi, S.T.

$kueri = "SELECT * FROM mahasiswa";

$hasil = mysql_query($query) or die("Query gagal");

11.4 Memproses Hasil

Untuk memproses hasil query dan menampilkannya ke halaman web, digunakan perintah
seperti contoh berikut :
...
<?
while ($data = mysql_fetch_array($hasil)
{
$npm = $data[0];
$nama = $data[1];
$alamat = $data[2];
?>
<tr>
<td><?=$npm?></td>
<td><?=$nama?></td>
<td><?=$alamat?></td>
</tr>
<?
}
?>
...

Fungsi mysql_fetch_array digunakan untuk menampilkan data dalam bentuk array atau
perkolom. Sedangkan while digunakan untuk memproses baris demi baris hasil query
sehingga apabila hasil query masih memiliki data baris berikutnya, akan terjadi proses
looping hingga semua baris diproses.

11.5 Menutup Koneksi

Sebelum menutup koneksi database, kita perlu me-release atau melepaskan semua hasil
query dengan perintah berikut :
mysql_free_result($hasil);

Untuk menutup koneksi database dapat dilakukan dengan perintah berikut :

mysql_close($link);

117

Pemrograman Berbasis Web

Dedi Efendi, S.T.

11.6 Contoh Aplikasi : Buku Tamu (Guest Book)

Buku tamu (guest book) merupakan salah satu aplikasi web yang sering digunakan dalam
website.

Aplikasi web ini digunakan untuk mendapatkan masukan berupa saran dan

kritik dari pengunjung website.

Aplikasi buku tamu terdiri dari 3 buah halaman web, yaitu halaman untuk mengisi buku
tamu, halaman ucapan terima kasih, dan halaman untuk menampilkan isi buku tamu.
10.6.1

Membuat Database

Untuk aplikasi buku tamu ini, digunakan database untuk menyimpan isi buku tamu.
Buat sebuah database dengan nama teknokrat dan sebuah tabel dengan nama
buku_tamu, struktur tabelnya adalah sebagai berikut :
Field

Type

Panjang

Keterangan

int

Primary key, auto increment

tgl_kirim

datetime

pengirim

varchar

pesan

varchar

255

ip_pengirim

varchar

10.6.2

Membuat Script untuk Koneksi ke Database MySQL

Karena sebagian besar script PHP untuk aplikasi ini akan melakukan koneksi ke database
MySQL, maka sebaiknya dibuat script khusus untuk melakukan koneksi. Script untuk
melakukan koneksi ke database MySQL (koneksi.php) adalah sebagai berikut :
<?
// koneksi ke database mysql
$db_host = "localhost";
$db_user = "tekno";
$db_password = "web";
$db_name = "teknokrat";
mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($db_name);
?>

118

Pemrograman Berbasis Web

10.6.3

Dedi Efendi, S.T.

Membuat Form untuk Mengisi Buku Tamu

Form untuk mengisi buku tamu dibuat dengan kode HTML dan JavaScript. Kode HTML
digunakan untuk membuat form beserta tampilannya, sedangkan kode JavaScript
digunakan untuk validasi input.
Berikut kode untuk membuat form (isi_bukutamu.htm) :
<html>
<head>
<title>Isi Buku Tamu</title>
<style type="text/css">
.style1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; font-size: 10pt;
}
.style2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
<script language="JavaScript">
function validasi()
{
valid = 1;
// valid 1 = elemen form sudah terisi.
// valid 0 = elemen form masih kosong.
// validasi nama pengirim
if (form.pengirim.value=="")
{
alert("Nama belum diisi");
form.pengirim.focus();
return false;
}
else
{
for(i=0;i<form.pengirim.value.length;i++)
{
c = form.pengirim.value.charAt(i);
if ((c<'a' || c>'z') && (c<'A' || c>'Z') && (c!=' '))
{
form.pengirim.focus();
form.pengirim.select();
alert("Nama harus berupa karakter");
valid = 0;
return false;
}
if (valid==0) break;
}
}

119

Pemrograman Berbasis Web

Dedi Efendi, S.T.

// validasi alamat email pengirim

if (valid==1)
{
if (form.email.value=="")
{
alert("Email harus diisi");
form.email.focus();
return false;
}
else
{
text =form.email.value;
at=text.indexOf('@');
dot =text.indexOf('.');
emailvalid=1;
if (at==-1 || dot==-1 || text.indexOf(' ')!=-1)
emailvalid=0;
if (dot==text.length-1)
emailvalid=0;
if (at==0)
emailvalid=0;
if (at==dot-1)
emailvalid=0;
if (at>dot)
emailvalid=0;
if (emailvalid==0)
{
alert("alamat Email tidak benar ( contoh : [email protected] )");
form.email.focus();
form.email.select();
return false;
}
}
}
// validasi pesan pengirim
if (valid==1)
{
if (form.pesan.value=="")
{
alert("Pesan belum diisi");
form.pesan.focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="form" method="post" action="simpan_bukutamu.php">
<table width="600" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF66" class="style1">
  BUKU TAMU
</td>
</tr>

120

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td colspan="3" class="style2">
Silakan isi form buku tamu berikut :
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td width="93" class="style2">Nama Anda</td>
<td width="14" align="center" >:</td>
<td width="463">
<input name="pengirim" type="text" id="pengirim" size="40">
</td>
</tr>
<tr>
<td class="style2">E-mail Anda</td>
<td align="center">:</td>
<td>
<input name="email" type="text" id="email" size="40">
</td>
</tr>
<tr>
<td valign="top" class="style2">Pesan Anda</td>
<td valign="top" align="center">:</td>
<td>
<textarea name="pesan" cols="56" rows="4" id="pesan">
</textarea>
</td>
</tr>
<tr>
<td height="50" colspan="3">
<input type="submit" name="Submit" value="Isi Buku Tamu"
onClick="javascript: return validasi();">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>

121

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

10.6.4

Menyimpan Isi Buku Tamu ke Database

Setelah dibuat form untuk mengisi buku tamu, kemudian dibuat halaman untuk
menyimpan isi buku yang telah disikan dari form ke database (simpan_bukutamu.php).
Halaman ini juga berfungsi menampilkan ucapan terima kasih kepada pengunjung
karena telah mengisi buku tamu.
Untuk menyimpan data ke database digunakan perintah SQL, perintah-perintah yang
digunakan adalah :
INSERT INTO namatabel VALUES(nilaikolom, nilaikolom, ...)

Perintah SQL ini digunakan untuk menyimpan data pada semua kolom/field.
INSERT INTO namatabel (namakolom, namakolom, ...) VALUES(nilaikolom,
nilaikolom, ...)

Perintah SQL ini digunakan untuk menyimpan data pada kolom/field tertentu.
Kode untuk menyimpan isi buku tamu ke database adalah sebagi berikut :
<html>
<head>
<title>Simpan Isi Buku Tamu</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; font-size: 10pt;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt
}
</style>

122

Pemrograman Berbasis Web

Dedi Efendi, S.T.

</head>
<body>
<?
// ambil data yang diisi dari form
$pengirim = $_REQUEST["pengirim"];
$email = $_REQUEST["email"];
$pesan = strip_tags($_REQUEST["pesan"]);
// menentukan data untuk tanggal kirim dan ip address pengunjung
$tglkirim = date("Y-m-d H:i:s");
$ip = gethostbyname($_SERVER['REMOTE_ADDR']);
// simpan isi buku tamu ke database
include "koneksi.php";
$kueri = "INSERT INTO buku_tamu(tgl_kirim,pengirim,email,pesan,ip_pengirim)
VALUES ('$tglkirim','$pengirim','$email','$pesan','$ip')";
mysql_query($kueri);
?>
<table width="600" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="30" bgcolor="#FFFF66" class="style1">
  BUKU TAMU
</td>
</tr>
<tr>
<td>
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="570" height="10"></td>
</tr>
<tr>
<td align="center" class="style2">
Terima kasih Anda telah mengisi buku tamu kami
</td>
</tr>
<tr>
<td height="10" align="center" class="style2">
Silahkan klik di [<a href="tampil_bukutamu.php">SINI</a>]
untuk melihat isi buku tamu
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

123

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Hasilnya akan terlihat seperti gambar berikut :

10.6.5

Menampilkan Isi Buku Tamu

Setelah form untuk mengisi buku tamu dan halaman untuk menyimpan isi buku tamu ke
database selesai dibuat, berikutnya dibuat halaman untuk menampilkan isi buku tamu
(tampil_bukutamu.php). Isi buku tamu yang akan ditampilkan, diambil dari database
yang telah diisi pada halaman sebelumnya.
Sama seperti menyimpan data ke database, menampilkan data dari database juga
menggunakan perintah SQL, perintah-perintah yang digunakan adalah :
SELECT * FROM namatabel

Perintah SQL ini digunakan untuk menampilkan data dari semua kolom/field.
SELECT namakolom, namakolom, ... FROM namatabel

Perintah SQL ini digunakan untuk menampilkan data dari kolom/field tertentu.
SELECT * FROM namatabel WHERE namakolom = nilaikondisi

Perintah SQL ini digunakan untuk menampilkan data dari semua kolom/field dengan
syarat kolom memiliki nilai tertentu.
SELECT namakolom, namakolom, ... FROM namatabel WHERE kolom=nilaikondisi

perintah SQL ini digunakan untuk menampilkan data dari kolom/field tertentu dengan
syarat kolom memiliki nilai tertentu.
Selain perintah SQL di atas, masih banyak kemungkinan perintah SQL lain yang dapat
digunakan untuk menampilkan data yang tidak mungkin dijelaskan secara mendetail di
sini.

124

Menyimpan Data dalam Session

Apabila ingin meyimpan data dalam session, dilakukan dengan kode berikut :
$_SESSION["nama_variabel_session"] = data_yang_akan_disimpan;

Contoh :
$_SESSION["ses_user"] = "Tekno";

12.4

Mendapatkan Data dalam Session

Apabila ingin mendapatkan kembali data dalam session, dilakukan dengan kode berikut :
variabel = $_SESSION["nama_variabel_session"];

Contoh :
$user = $_SESSION["ses_user"];

12.5

Menghapus Data dalam Session

Untuk menghapus semua data pada variabel session, dilakukan dengan kode berikut :
$_SESSION = array();

Sedangkan untuk mengakhiri session, dapat dilakukan dengan fungsi berikut :

session_destroy();

129

Pemrograman Berbasis Web

Dedi Efendi, S.T.

12.6 Contoh Aplikasi : Sistem Login / Autentikasi

Sistem login yang akan dibuat, digunakan untuk autentikasi ke bagian administrator
buku tamu.

Bagian administrator merupakan halaman yang digunakan administrator

website untuk menghapus pesan-pesan yang tidak baik dalam buku tamu.
12.6.1

Membuat Tabel User pada Database

Untuk sistem login ini, diperlukan tabel untuk menyimpan data user. Pada database
teknokrat yang telah dibuat sebelumnya, buat sebuah tabel baru dan beri nama tabel
tersebut user, struktur tabelnya adalah sebagai berikut :
Field

Type

Panjang
-

Keterangan

int

Primary key, auto increment

nama_user

varchar

password

varchar

Untuk meningkatkan security, password dienkripsi dengan menggunakan md5.

Input tabel user tersebut dengan memasukkan nama user dan passwordnya. Password
yang dimasukkan harus telah diekripsi dengan md5, contoh :
nama user : tekno
password : 2567a5ec9705eb7ac2c984033e06189d (enkripsi untuk password web)
12.6.2

Koneksi ke Database MySQL

Pada aplikasi ini, untuk koneksi ke database MySQL tetap menggunakan file koneksi.php
yang telah dibuat sebelumnya. Kode untuk koneksi ke database MySQL adalah :
<?
// koneksi ke database mysql
$db_host = "localhost";
$db_user = "tekno";
$db_password = "web";
$db_name = "teknokrat";
mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($db_name);
?>

130

Pemrograman Berbasis Web

12.6.3

Dedi Efendi, S.T.

Membuat Form Login

Form login digunakan untuk memasukkan nama user dan password dari administrator
website. Berikut kode untuk form login (form_login.php) :
<?
// menghapus semua session yang ada
session_name("AUTHEN");
session_start();
session_destroy();
?>
<html>
<head>
<title>Login Ke Menu Administrator</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<form name="form1" method="post" action="proses_login.php">
<table width="350" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" bgcolor="#FFFF66" align="center" class="style1">
LOGIN
</td>
</tr>
<tr>
<td>
<table width="280" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr class="style2">
<td width="81" height="22">Nama User </td>
<td width="16" height="22" align="center">:</td>
<td width="153" height="22">
<input name="username" type="text" id="username2">
</td>
</tr>
<tr class="style2">
<td height="22">Password</td>
<td height="22" align="center">:</td>
<td height="22">
<input name="passwd" type="password" id="passwd">
</td>
</tr>

131

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Pada kode diatas, terdapat perintah-perintah berikut :

<?
session_name("AUTHEN");
session_start();
session_destroy();
?>

Perintah-perintah tersebut berfungsi untuk menghapus semua session yang ada. Hal ini
dilakukan untuk mencegah user yang telah masuk ke bagian administrator buku tamu
kemudian kembali lagi ke form login dengan tombol BACK, dapat kembali lagi ke bagian
administrator buku tamu hanya dengan menggunakan tombol Forward pada browser.
Tampilan dari form login akan terlihat seperti gambar berikut :

12.6.4

Membuat Halaman untuk Memproses Form Login

Setelah form login selesai dibuat, kemudian dibuat halaman baru yang berisi script
untuk memproses form login tersebut. Script pada halaman ini akan mengecek apakah
nama user dan password yang dimasukkan itu benar.

Pengecekan dilakukan dengan

membandingkan nama user dan password yang dimasukkan dari form login dengan nama
user dan password yang ada di database.
132

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Kode untuk memproses form login (proses_login.php) adalah :

<?
// memulai session
session_name("AUTHEN");
session_start();
// mengambil nama user dan password yang diisikan
// password dienkripsi dengan md5
$username = $_REQUEST["username"];
$password = md5($_REQUEST["passwd"]);
// membandingkan nama user dan password yang diisikan dengan nama user
// dan password yang ada di database
include "koneksi.php";
$kueri1 = "SELECT nama_user,password FROM user where
nama_user='$username' and password='$password'";
$hasil = mysql_query($kueri1);
$data = mysql_fetch_array($hasil);
$USERNAME = $data[0];
$PASSWORD = $data[1];
if ($USERNAME == $username && $PASSWORD == $password)
{
// dilaksanakan jika nama user dan password benar
// membuat dua buah variabel session,yaitu SES_USERNAME dan SES_PASSWORD
$_SESSION["SES_USERNAME"] = $USERNAME;;
$_SESSION["SES_PASSWORD"] = $PASSWORD;
// mengalihkan halaman ke bagian administrator buku tamu
// (admin_bukutamu.php)
header("Location: admin_bukutamu.php");
}
else
{
// dilaksanakan jika nama user atau password salah
// mengalihkan halaman ke halaman login error (login_error.php)
header("Location: login_error.php");
}
?>

Pada kode diatas terdapat perintah berikut :

$password = md5($_REQUEST["passwd"]);

Perintah tersebut digunakan untuk mengenkripsi password yang diisikan dari form login
dengan menggunakan fungsi md5(). Hal ini dilakukan karena password yang disimpan di
database telah diekripsi dengan md5. Jadi untuk mengetahui apakah password yang
disikan itu benar, dilakukan dengan membandingkan password yang diisi dari form dan
telah dienkripsi dengan password yang telah dienkripsi pada database.
Pada kode diatas juga terlihat bahwa, jika nama user dan password yang dimasukkan
benar maka akan dibuat dua buah variabel session yaitu SES_USERNAME dan

133

Pemrograman Berbasis Web

Dedi Efendi, S.T.

SES_PASSWORD, kemudian halaman dialihkan ke bagian administrator buku tamu

(admin_bukutamu.php).

Tetapi jika nama user atau password salah, maka halaman

akan dialihkan ke halaman login error (login_error.php).

12.6.5

Membuat Halaman untuk Menampilkan Pesan Login Salah

Pada kode memproses login (login_proses.php) terlihat bahwa jika nama user atau
password salah maka halaman akan dialihkan ke halaman login error.

Kode untuk

halaman login error (login_error.php) adalah :

<html>
<head>
<title>Login Error</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<table width="350" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" bgcolor="#FFFF66" align="center" class="style1">
PESAN
</td>
</tr>
<tr>
<td height="60">
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Nama User atau Password Anda salah
</td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Silahkan klik di [<a href='form_login.php'>SINI</a>]
untuk login kembali
</td>
</tr>
<tr><td> </td></tr>
</table>
</div>
</td>
</tr>
</table></body></html>

134

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Tampilannya akan terlihat seperti gambar berikut :

12.6.6

Membuat Script untuk Mengecek Apakah User Sudah Login

Karena sebagian besar script PHP untuk aplikasi ini akan melakukan pengecekan apakah
user sudah login, maka sebaiknya dibuat script khusus untuk melakukan pengecekan
tersebut. Script untuk mengecek apakah user sudah login (authentication.php) adalah:
<?
// mulai session
session_name("AUTHEN");
session_start();
// fungsi untuk mengecek apakah terdapat variabel session
SES_USERNAME
// dan SES_PASSWORD
// dikembalikan nilai logik TRUE jika terdapat variabel session dan
// nilai logika FALSE jika tidak terdapat variabel session
function authen()
{
if(!empty($_SESSION["SES_USERNAME"]) and !empty($_SESSION["SES_PASSWORD"]))
return TRUE;
else
return FALSE;
}

Keterangan :
Pada kode diatas terdapat fungsi yang bernama authen() yang akan mengecek apakah
terdapat variabel session SES_USERNAME dan SES_PASSWORD. Pengecekan dilakukan
dengan menggunakan fungsi empty(). Jika terdapat kedua variabel session tersebut,
berarti user telah login dan dikembalikan nilai logika TRUE. Tetapi jika tidak terdapat
kedua variabel session tersebut, berarti user belum login dan dikembalikan nilai logika
FALSE.

135

Pemrograman Berbasis Web

12.6.7

Dedi Efendi, S.T.

Membuat Halaman Menampilkan Daftar Isi Buku Tamu yang Akan Dihapus

Setelah user login dengan benar, maka akan ditampilkan bagian administrator buku
tamu. Halaman ini menampilkan daftar isi buku tamu yang akan dihapus. Kode untuk
menampilkan daftar isi buku tamu yang akan dihapus (admin_bukutamu.php) adalah :
<?
// pengecekan autentikasi user
include "authentication.php";
if(!authen())
{
// jika session error, halaman dialihkan ke halaman session_error.php
header("location: session_error.php");
}
else
{
?>
<html>
<head>
<title>Administrasi Buku Tamu</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<table width="750" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" bgcolor="#FFFF66" class="style1">
  Hapus Isi Buku Tamu
</td>
</tr>
<tr>
<td height="60">
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="7"></td>
</tr>
<tr>
<td height="22" class="style2">
Silahkan pilih isi buku tamu yang akan dihapus :
</td>
</tr>

136

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td height="10">
<table width="100%" border="1" cellpadding="2"
cellspacing="0" bordercolor="#333333" class="style2">
<tr>
<td width="36" align="center"><b>No.</b></td>
<td width="191" height="18" align="center">
<b>Tanggal-Waktu</b></td>
<td width="113" height="18" align="center">
<b>Pengirim</b></td>
<td width="149" height="18" align="center">
<b>E-Mail</b></td>
<td width="147" height="18" align="center">
<b>Pesan</b></td>
<td width="66" height="18" align="center">
<b>Hapus</b></td>
</tr>
<?
//Tampilkan daftar isi buku tamu yang akan dihapus
include "koneksi.php";
$kueri = "SELECT id,YEAR(tgl_kirim),MONTH(tgl_kirim),
DAYOFMONTH(tgl_kirim),HOUR(tgl_kirim),
minute(tgl_kirim),second(tgl_kirim), pengirim,
email,pesan FROM buku_tamu ORDER BY id DESC";
$hasil = mysql_query($kueri);
$i = 0;
while ($data = mysql_fetch_array($hasil))
{
$id = $data[0];
$thn = $data[1];
$bln = $data[2];
$tgl = $data[3];
$jam = $data[4];
$mnt = $data[5];
$dtk = $data[6];
$tgl_kirim = "$tgl/$bln/$thn $jam:$mnt:$dtk WIB";
$pengirim = $data[7];
$email = $data[8];
$pesan = $data[9];
$i++;
?>
<tr>
<td valign="top" align="center"><?=$i?></td>
<td valign="top" align="center"><?=$tgl_kirim?></td>
<td valign="top"><?=$pengirim?></td>
<td valign="top"><?=$email?></td>
<td valign="top"><?=$pesan?></td>
<td valign="top" align="center">
<a href="hapus_tampil.php?id=<?=$id?>">hapus</a>
</td>
</tr>
<?
}
?>
</table>
</td>
</tr>

137

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td width="570" height="30" class="style2">
<a href="logout.php">Logout</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<?
}
?>

Pada kode diatas terlihat bahwa dilakukan autentikasi dengan memanggil file
authentication.php.

Jika nilai yang dikembalikan fungsi authen adalah FALSE maka

halaman dialihkan ke halaman session error (sesion_error.php). Tetapi jika nilai yang
dikembalikan fungsi authen bernilai TRUE ditampilkan halaman yang berisi daftar isi
buku tamu yang akan dihapus.
Pada kode diatas juga terdapat perintah berikut :
<a href="hapus_tampil.php?id=<?=$id?>">hapus</a>

Perintah link tersebut digunakan untuk memilih isi buku tamu yang akan dihapus.
Setelah dipilih, maka akan dipanggil halaman untuk menampilkan isi buku tamu yang
akan dihapus (hapus_tampil.php). Bersamaan dengan pemanggilan ini, dikirimkan juga
id dari isi buku tamu yang akan dihapus.
Tampilan halaman daftar isi buku yang akan dihapus terlihat seperti gambar berikut :

138

Pemrograman Berbasis Web

12.6.8

Dedi Efendi, S.T.

Membuat Halaman untuk Menampilkan Pesan Session Salah

Halaman ini digunakan untuk menampilkan pesan session error jika user mencoba
mengakses bagian administrator buku tamu tanpa login terlebih dahulu. Kode untuk
menampilkan pesan session error (session_error.php) adalah :
<html>
<head>
<title>Session Error</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<table width="350" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" align="center" bgcolor="#FFFF66" class="style1">
PESAN
</td>
</tr>
<tr>
<td height="60">
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Anda tidak berhak mengakses halaman ini
</td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Silahkan Anda [<a href='form_login.php'>LOGIN</a>]
Terlebih Dahulu
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

139

Pemrograman Berbasis Web

Dedi Efendi, S.T.

Tampilannya akan terlihat seperti gambar berikut :

12.6.9

Membuat Halaman untuk Menampilkan Isi Buku Tamu yang akan Dihapus

Setelah user memilih isi buku tamu yang akan dihapus, maka isi buku tamu tersebut
akan ditampilkan pada halaman menampilkan isi buku tamu yang akan dihapus
(hapus_tampil.php). Kode untuk halaman tersebut adalah :
<?
// pengecekan autentikasi user
include "authentication.php";
if(!authen())
{
// jika session error, halaman dialihkan ke halaman
session_error.php
header("location: session_error.php");
}
else
{
?>
<html>
<head>
<title>Hapus Isi Buku Tamu</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<form name="form1" method="post" action="hapus_proses.php">
<table width="750" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" bgcolor="#FFFF66" class="style1">
  Hapus Isi Buku Tamu
</td>
</tr>

Dedi Efendi, S.T.

Membuat Halaman untuk Menghapus Isi Buku Tamu

Setelah halaman untuk menampilkan isi buku tamu yang akan dihapus selesai dibuat,
kemudian dibuat halaman untuk menghapus isi buku tamu dari database.
Untuk menghapus data dari database, digunakan perintah SQL berikut :
DELETE from namatabel WHERE syarat1, syarat2, ...

Kode untuk menghapus isi buku tamu (hapus_proses.php) adalah :

<?
// pengecekan autentikasi user
include "authentication.php";
if(!authen())
{
// jika session error, halaman dialihkan ke halaman session_error.php
header("location: session_error.php");
}
else
{
?>
<html>
<head>
<title>Hapus Isi Buku Tamu</title>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<?
// ambil id isi buku tamu yang akan dihapus
$id = $_REQUEST["id"];
// hapus isi buku tamu
include "koneksi.php";
$kueri = "DELETE FROM buku_tamu WHERE id='$id'";
mysql_query($kueri);
?>
<table width="500" border="1" align="center" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<tr>
<td height="25" bgcolor="#FFFF66" align="center" class="style1">
PESAN
</td>
</tr>

143

Pemrograman Berbasis Web

Dedi Efendi, S.T.

<tr>
<td height="60">
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Isi buku tamu telah dihapus
</td>
</tr>
<tr>
<td height="30" align="center" class="style2">
Silahkan klik di <a href="admin_bukutamu.php">[SINI]</a>
untuk menghapus isi buku tamu yang lain
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<?
}
?>

Tampilannya akan terlihat seperti gambar berikut :

12.6.11

Logout / Keluar dari Bagian Administrator

Apabila user telah selesai menghapus isi buku tamu yang berisi pesan yang tidak benar,
maka user dapat logout / keluar dari bagian administrator.

144

Pemrograman Berbasis Web

Anda mungkin juga menyukai

Manual Book
Belum ada peringkat
Manual Book
20 halaman
Bahan Ajar Pemrograman Web
Belum ada peringkat
Bahan Ajar Pemrograman Web
140 halaman
Laporan Praktikum Web PDF
Belum ada peringkat
Laporan Praktikum Web PDF
42 halaman
Pengatar Sistem Informasi Watermark
Belum ada peringkat
Pengatar Sistem Informasi Watermark
171 halaman
Konsep Dasar Pemrograman Website Dengan PHP (Elgamar, S.kom., M.kom.)
Belum ada peringkat
Konsep Dasar Pemrograman Website Dengan PHP (Elgamar, S.kom., M.kom.)
90 halaman
Ferra Fernanda (43A87006150593) PDF
Belum ada peringkat
Ferra Fernanda (43A87006150593) PDF
145 halaman
Tutorial PHP MVC Ebook
100% (1)
Tutorial PHP MVC Ebook
94 halaman
Modul Pengantar Internet Dan HTML
Belum ada peringkat
Modul Pengantar Internet Dan HTML
112 halaman
Modul Web Programming 3
Belum ada peringkat
Modul Web Programming 3
48 halaman
Laporan Akhir Praktikum Pemrograman Web Fakhri Nurcahyo (1970231135) A2
100% (2)
Laporan Akhir Praktikum Pemrograman Web Fakhri Nurcahyo (1970231135) A2
53 halaman
Modul 5
Belum ada peringkat
Modul 5
135 halaman
Buku Bahan Belajar CRUD Menggunakan PHP & MySQL
Belum ada peringkat
Buku Bahan Belajar CRUD Menggunakan PHP & MySQL
106 halaman
Pemrograman Web I
Belum ada peringkat
Pemrograman Web I
49 halaman
Pemrograman Web Dengan PHP MySQL PDF
Belum ada peringkat
Pemrograman Web Dengan PHP MySQL PDF
98 halaman
Pemrograman Berbasis Web II PDF
Belum ada peringkat
Pemrograman Berbasis Web II PDF
60 halaman
Paper Project Web Programing 1 - 2021 - Final
100% (1)
Paper Project Web Programing 1 - 2021 - Final
19 halaman
Modul 1 Praktikum PWL - ClientServerSideScripting
Belum ada peringkat
Modul 1 Praktikum PWL - ClientServerSideScripting
18 halaman
Hamsyah Modul
Belum ada peringkat
Hamsyah Modul
101 halaman
Gunawan Daud Sanjaya Tandawuya - IF-1 - Lap5
Belum ada peringkat
Gunawan Daud Sanjaya Tandawuya - IF-1 - Lap5
21 halaman
Program Tahunan Basis Data
Belum ada peringkat
Program Tahunan Basis Data
6 halaman
Silabus Web Disain
Belum ada peringkat
Silabus Web Disain
12 halaman
Materi 3 Membangun Website Dari HTML
Belum ada peringkat
Materi 3 Membangun Website Dari HTML
99 halaman
Multiuser
Belum ada peringkat
Multiuser
17 halaman
Aplikasi Pemrograman Web Dinamis Dengan PHP Dan MySQL
Belum ada peringkat
Aplikasi Pemrograman Web Dinamis Dengan PHP Dan MySQL
13 halaman
Lampiran I 42
Belum ada peringkat
Lampiran I 42
224 halaman
PHP Web Programming Basic Dan Lanjut
Belum ada peringkat
PHP Web Programming Basic Dan Lanjut
84 halaman
Laporan Website Perpustakaan
Belum ada peringkat
Laporan Website Perpustakaan
14 halaman
Modul Project-PEMROGRAMAN Web 3
Belum ada peringkat
Modul Project-PEMROGRAMAN Web 3
15 halaman
Pemrogramanwebjunainim 160827070501
Belum ada peringkat
Pemrogramanwebjunainim 160827070501
83 halaman
Makalah Basis Data
Belum ada peringkat
Makalah Basis Data
25 halaman
Pemrograman Web 1: Pertemuan 1
Belum ada peringkat
Pemrograman Web 1: Pertemuan 1
25 halaman
Membuat Website Sekolah Sederhana Dengan Dreamweaver Dan PHP MYSQL Edisi Pemula
Belum ada peringkat
Membuat Website Sekolah Sederhana Dengan Dreamweaver Dan PHP MYSQL Edisi Pemula
33 halaman
Pertemuan 2-3 PDF
Belum ada peringkat
Pertemuan 2-3 PDF
35 halaman
Laporan Sistem Informasi Management
Belum ada peringkat
Laporan Sistem Informasi Management
11 halaman
BUKU
Belum ada peringkat
BUKU
114 halaman
Modul 1
Belum ada peringkat
Modul 1
3 halaman
B.silabus Web
Belum ada peringkat
B.silabus Web
2 halaman
Modul Web Programming
Belum ada peringkat
Modul Web Programming
119 halaman
Bagian 2
Belum ada peringkat
Bagian 2
50 halaman
Sufardi Madoa IF2
Belum ada peringkat
Sufardi Madoa IF2
12 halaman
Uas Tool Ti
Belum ada peringkat
Uas Tool Ti
24 halaman
Cara Cepat Membangun Website Dari Nol Studi Kasus Web Dealer Motor Digabungkan
Belum ada peringkat
Cara Cepat Membangun Website Dari Nol Studi Kasus Web Dealer Motor Digabungkan
100 halaman
Tutorial Dasar Menggunakan Framework CakePHP
Belum ada peringkat
Tutorial Dasar Menggunakan Framework CakePHP
15 halaman
Buku Ajar Pemrograman Web
Belum ada peringkat
Buku Ajar Pemrograman Web
66 halaman
Web Programming
100% (1)
Web Programming
34 halaman
Pemerograman Web - P01
Belum ada peringkat
Pemerograman Web - P01
14 halaman
Laporan Projek Uas DPW Ihsan
Belum ada peringkat
Laporan Projek Uas DPW Ihsan
18 halaman
Modul Pemrograman Web 01
Belum ada peringkat
Modul Pemrograman Web 01
91 halaman
Sampul Buku Ajar
Belum ada peringkat
Sampul Buku Ajar
12 halaman
RPS PEmrograman Web
Belum ada peringkat
RPS PEmrograman Web
7 halaman
Buku Ajar Pemrograman Internet
Belum ada peringkat
Buku Ajar Pemrograman Internet
133 halaman
Projek Belajar Back-End Programing
Belum ada peringkat
Projek Belajar Back-End Programing
3 halaman
Makalah WP - 1
Belum ada peringkat
Makalah WP - 1
12 halaman
Analisis Instruksional: Pemrograman Web I
Belum ada peringkat
Analisis Instruksional: Pemrograman Web I
12 halaman
Uas PW2 Andinurhikmah (701220064)
Belum ada peringkat
Uas PW2 Andinurhikmah (701220064)
7 halaman
Chapter 1 - Konsep Dasar Web
Belum ada peringkat
Chapter 1 - Konsep Dasar Web
4 halaman
RPS Pemrograman Web
Belum ada peringkat
RPS Pemrograman Web
6 halaman
Ekomomi, Bisnis, Regulasi & Kebijakan Telekomunikasi
Dari Everand
Ekomomi, Bisnis, Regulasi & Kebijakan Telekomunikasi
Sigit Haryadi
4/5 (77)
Pemrograman Python untuk Pemula: Pemrograman
Dari Everand
Pemrograman Python untuk Pemula: Pemrograman
JUD
5/5 (10)
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Dari Everand
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Risal
4/5 (16)