2

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

7 Langkah Menguasai Web

PHP/MySQL dengan Dreamweaver
Dasar Isi
Kata Pengantar
Daftar Isi Buku
Lampiran

Bab 1. Langkah 1 : Instalasi Paket PHP dan MySQL

dengan XAMPP
1.1
1.2
1.3
1.4

Pendahuluan
Instalasi Paket XAMPP
Mengenal Struktur Folder XAMPP
Menjalankan XAMPP

Bab 2. Langkah 2 : Menguasai Database MySQL

2.1
2.2

Pendahuluan
Mengenal dan Memulai MySQL
2.2.1
2.2.2
2.2.3
2.2.4

2.3

Memastikan Servis MySQL Telah Berjalan

Menjalankan Klien MySQL dari Command Prompt
Menjalankan Klien MySQL dari Windows Explorer
Mengetahui Letak Penyimpanan Database

Mengakses MySQL dengan Perintah SQL

2.3.1
2.3.2
2.3.3
2.3.4
2.3.5

Mengetahui Daftar Database yang Ada

Membuat Database Baru
Masuk Pada Database
Membuat Tabel Baru
Mengetahui Daftar Tabel yang Ada

Daftar Isi

2.3.6
2.3.7
2.3.8
2.3.9
2.3.10
2.3.11

Melihat Kembali Struktur Desain Tabel

Memasukkan Data Baru Ke Dalam Tabel
Menampilkan Data dari Dalam Tabel
Menampilkan Data Hanya Sebagian Kolom
Mengubah Nilai Data Pada Tabel
Menghapus Sebagian Baris Data

Bab 3. Langkah 3 : Menguasai Pembuatan Tabel

Untuk Desain Aplikasi
3.1
3.2

Pendahuluan
Mengenal Dreamweaver
3.2.1 Memahami Bagian Dreamweaver
3.2.2 Halaman Kerja Dreamweaver
3.2.3 Properti Pengaturan Data Objek
3.3
Dasar Mendesain Tabel
3.3.1 Memahami Ikon Untuk Membuat Tabel
3.3.2 Pertama Kali Membuat Tabel
3.3.3 Memahami Tag HTML Penyusun Tabel
3.3.4 Menyeleksi Tabel Secara Utuh
3.3.5 Menyeleksi Bagian Tabel
3.3.6 Mengatur Kembali Struktur Tabel
3.3.7 Mengatur Lebar Kolom dan Baris Secara Manual
3.4
Memodifikasi Struktur Tabel
3.3.1 Menambah Kolom Tabel
3.3.2 Menambah Baris Tabel
3.3.3 Menggabungkan Baris dan Kolom Tabel
3.3.4 Membagi Cell Menjadi Beberapa Baris dan Kolom

Bab 4. Langkah 4 : Menguasai Pembuatan Formulir

Masukan Data
4.1
4.2

Pendahuluan
Dasar Menggunakan Form
4.2.1 Menggunakan Objek Form

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

4.2.2 Menggunakan Objek Text Field

4.2.3 Menggunakan Objek TextArea
4.2.4 Menggunakan Objek Text Field
4.2.5 Menggunakan Objek List/Menu
4.2.6 Menggunakan Objek Radio Button
4.2.7 Menggunakan Objek CheckBox
4.2.8 Menggunakan Objek File Field
4.3
Mendesain Berbagai Formulir Aplikasi
4.3.1 Mendesain Formulir Masukan Kategori
4.3.2 Mendesain Formulir Masukan Data Barang
4.3.3 Mendesain Formulir Pendaftaran

Bab 5. Langkah 5 : Menguasai Pengkodean PHP

dengan Dreamweaver
5.1

Pendahuluan
5.2
Menggunakan Dreamweaver
5.2.1 Mengenal Dreamweaver
5.2.2 Mengetahui Folder Kerja Utama
5.2.3 Membuat Folder Kerja Baru
5.2.4 Membuat Skrip PHP Pertama Kali
5.2.5 Menulis Kode dengan Toolbar PHP
5.2.6 Menulis Kode PHP dengan Jendela Bantu
5.3
Dasar Pemrograman PHP
5.3.1 Mempersiapkan Folder Program
5.3.2 Dasar Menampilkan Data
5.3.3 Membuat Komentar dalam Program
5.3.4 Menampilkan Data dari Variabel
5.3.5 Menampilkan Data dari Variabel dan Operasi
5.3.6 Gabungan Tag HTML dan Kode PHP
5.4
Register Global PHP
5.5
Struktur Kontrol Program
5.5.1 Menggunakan IF
5.5.2 Menggunakan IF-ELSE

Daftar Isi

5.5.3
5.5.4

Menggunakan IF-ELSE-IF
Menggunakan SWITCH
5.6
Struktur Perulangan Program
5.6.1 Menggunakan While
5.6.2 Menggunakan For
5.7
Latihan Pemrograman PHP
5.7.1 Membuat Pilihan Tanggal Pada List/Menu
5.7.2 Membuat Pilihan Tanggal Maksimal Hari
5.7.3 Membuat Pilihan Tanggal Terpilih Hari ini
5.7.4 Membuat Pilihan Tanggal Dua Digit
5.7.5 Membuat Pilihan Tahun dalam List/Menu
5.7.6 Membuat Pilihan Tahun Minimal dan Maksimal
5.7.7 Membuat Pilihan Tahun Terpilih Saat ini
5.7.8 Membuat Pilihan Bulan Pada List/Menu
5.7.9 Membuat Pilihan Nama Bulan Pada List/Menu
5.7.10 Membuat Pilihan Nama Bulan Terpilih

Bab 6. Langkah 6 : Menguasai Pembuatan Program

cPanel
6.1
6.2

Pendahuluan
Mempersiapkan Tabel Data
6.2.1 Membuat Database dan Tabel
6.2.2 Membuat Koneksi Database MySQL
6.3
Membuat Program Masukan Data
6.3.1 Mendesain Formulir Masukan Data
6.3.2 Membuat Program Simpan Data Buku
6.3.3 Menjalankan Program Masukan Data
6.4
Membuat Program Tampil Data
6.5
Membuat Program Hapus Data
6.5.1 Membuat Halaman Utama Pilih Data
6.5.2 Membuat Program Hapus Data Terpilih
6.6
Membuat Program Ubah Data
6.6.1 Membuat Halaman Utama Pilih Data

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

6.6.2 Membuat Formulir Ubah Data

6.6.3 Membuat Program Simpan Perubahan

Bab 7. Langkah 7 : Menguasai Pembuatan Aplikasi

Database ber-Relasi
7.1

Pendahuluan

7.2

Mempersiapkan Tabel Relasi

7.2.1 Relasi Tabel

7.2.2 Mempersiapkan Tabel dan Data
7.2.3 Membuat Koneksi Database MySQL
7.3
Menyimpan Data dari Relasi
7.3.1 Membuat Program Masukkan Data Kabupaten
7.3.2 Membuat Program Simpan Data Kabupaten
7.3.3 Menjlanakan Program Masukkan Data
7.4
Menampilkan Data Berdasarkan Kelompok
7.4.1 Menampilkan Data Kabupaten Per Propinsi
7.4.2 Menampilkan Data Kabupaten Per Propinsi, Cara 2
7.5
Mengubah Data dari Relasi
7.5.1 Membuat Program Tampil Untuk Memilih Data
7.5.2 Membuat Program Tampil Untuk Mengubah Data
7.5.3 Membuat Program Simpan Data Hasil Modifikasi

Lampiran A : Tipe Data Dalam MySQL

Lampiran B : Fungsi Koneksi MySQL dari PHP
Lampiran C : Operator Program PHP

Langkah

1
Instalasi Paket PHP dan MySQL
dengan XAMPP

1.1

Pendahuluan

Pada bab ini Anda akan belajar dibimbing dari awal untuk menginstal program
PHP dan MySQL menggunakan paket XAMPP. Paket yang satu ini telah
kami ujicoba dan terbukti nyaman digunakan, walaupun bagi yang masih
awam dengan PHP.
Pada semua pelajaran buku ini, apabila Anda menggunakan paket phpTriad
kemungkinan tidak berjalan dengan baik, kecuali pada settingan Register
dibuat ON. Atau pada setiap skrip program contoh, semua parameter pembaca
variabel dihilangkan. Untuk itu, sebaiknya Anda uprgrade dengan XAMPP.

1.2

Instalasi Paket XAMPP

Untuk memulai penginstallan, sekarang masuklah ke dalam folder tempat

Anda menyimpan file xampp-win32-1.4.11-installer, atau apabila ingin
mendapatkan peket terbaru, Anda dapat mengambilnya dari halaman
http://www.apachefriends.org/en/xampp-windows.html. Sekarang, ikutilah
langkah mudah berikut untuk menginstal XAMPP.
1. Klik dua kali pada ikon file xampp-win32-1.4.11-installer. Sekarang Anda
akan mendapatkan jendela pertama proses installasi.
2. Pada jendela Installer Language, pilihlah bahasa Indonesia, kemudian
klik tombol OK.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 1.1 Memilih bahasa saat instalasi

3. Anda akan dihadapkan pada jendela Linsensi, bacalah apabila sempat,
kemudian klik tombol Saya Setuju untuk melanjutkannya.
4. Pada jendela Pilih Lokasi Install, Anda dapat memilih lokasi tempat
penginstallan XAMPP. Pada komputer Kami menggunakan drive
C:\XAMPP (ketiklah secara manual C:\XAMPP) untuk menginstalnya.

Gambar 1.2 Menentukan lokasi penginstallan XAMPP

5. Apabila ingin mengganti folder tujuan instalasi, ketikkan pada Folder

tujuan secara manual, atau klik tombol Browse untuk mencarinya.
6. Klik tombol Instal untuk melanjutkan proses instalasi.
7. Kemudian tunggulah beberapa menit sampai proses penginstallan selesai.

Langkah 1: Instalasi Paket PHP dan MySQL dengan XAMPP

Gambar 1.3 Proses penginstallan paket XAMPP

8. Selanjutnya, XAMPP akan secara otomatis melakukan penyetingan dari
halaman Command Prompt. Perhatikan gambar berikut.

Gambar 1.4 Konfigurasi otomatis XAMPP

9. Setelah proses konfigurasi selesai, maka Anda akan dihadapkan pada
halaman penutup yang menyatakan proses penginstallan telah selesai dan
sukses dilakukan.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 1.5 Jendela menandakan proses instalasi selesai

1.3

Mengenal Struktur Folder XAMPP

Setelah selesai instalasi, Anda akan menemukan shortcut Control Panel-nya

dari Start Menu, Anda dapat menggunakannya untuk menjalankan server
MySQL dan Apache.
Seperti pada langkah installasi sebelumnya, bahwa Kita membuat tempat
tersendiri untuk hasil instalasi, yaitu C:\XAMPP (atau di C:\Program
Files\xampp). Pada folder tersebut Anda akan menemukan semua paket yang
mendukung, termasuk PHP, MySQL, Apache maupun phpMyAdmin.
Untuk lebih jelasnya, Anda dapat melihat gambar berikut:

Langkah 1: Instalasi Paket PHP dan MySQL dengan XAMPP

Gambar 1.6 Struktur folder hasil penginstallan

Seperti paket-paket yang lain atau standar Web Server Apache, XAMPP juga
memiliki folder bernama htdocs sebagai tempat penyimpanan semua file
program web yang dibuat. Jadi, apabila Anda belajar PHP, maka semua file
latihan harus disimpan di dalam folder ini.

1.4

Menjalankan XAMPP Pertama Kali

Paket XAMPP telah menyediakan satu ikon yang dapat digunakan untuk
menjalankan (mengaktifkan) semua service yang dimilikinya. Untuk
menjalankannya, Anda dapat mengikuti langkah berikut:
1. Untuk mengaktifkan semua service yang ada dapat dilakukan hanya dari
menu Start Program Apachefriends CONTROL XAMPP
SERVER PANEL.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 1.7 Langkah menjalankan service XAMPP

2. Setelah menu CONTROL XAMPP SERVER PANEL diklik, maka
Anda akan segera dihadapkan pada jendela Control Panel XAMPP.
Berikut adalah tampilannya.

Gambar 1.8 Halaman Control Panel XAMPP

Dari Control Panel di atas, apabila Anda mendapati salah satu service tidak
memiliki status Running, maka Anda dapat menjalankannya dengan cara
mengklik tombol Start yang ada di samping kanannya.

Langkah 1: Instalasi Paket PHP dan MySQL dengan XAMPP

Gambar 1.9 Salah satu service tidak berjalan

Sebagai informasi, Anda dapat menyimpan semua file program PHP yang
telah dibuat pada subfolder bernama htdocs tepatnya pada
C:\XAMPP\xamppd\htdocs atau pada C:\Program Files\xampp\htdocs.
Berikut adalah gambar struktur folder secara lengkap:

Gambar 1.10 Tempat penyimpanan file latihan

oooOooo

Langkah

2
Menguasai Database MySQL

2.1

Pendahuluan

Bagi Anda yang benar-benar buta dengan database MySQL, maka materi yang
dibahas pada bab ini wajib Anda pelajari. Materi yang kami sajikan pada bab
ini sangat cocok bagi semua pembaca yang sebelumnya benar-benar belum
pernah menggunakan database MySQL, khususnya dari paket XAMPP.

2.2

Mengenal dan Memulai MySQL

Bagian pertama ini akan membimbing Anda untuk dapat mengakses server
MySQL dari klien Command Prompt. Sehingga, bagi yang masih awam
diperlukan ketelitian untuk mempelajarinya.

2.2.1

Memastikan Servis MySQL Telah Berjalan

Yang perlu Anda harus ingat, MySQL juga memiliki servis atau daemon yang
harus dijalankan saat Anda ingin mengakases databasenya. Pada bab
sebelumnya Anda sudah dijelaskan, bahwa untuk mengaktifkan atau
menonaktifkan dapat dilakukan dari CONTROL PANEL.
1. Dari Start menu Windows, klik tombol Start Programs/All Programs
apachefriends xampp CONTROL XAMPP SERVER PANEL.
2. Dari jendela Control Panel, periksalah status pada MySQL.
3. Jika pada MySQL belum memiliki status Running, klik tombol Start yang
ada di samping baris MySQL, sehingga tombol berubah menjadi Stop dan
muncul status Running.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 2.1 Status Running pada server MySQL

4. Setelah selesai, keluarlah jendela Control Panel dengan cara klik tombol
Exit.
5. Sekarang Anda telah siap menggunakan database MySQL.

2.2.2

Menjalankan Klien MySQL dari Command Prompt

Sekarang kita akan masuk pada server MySQL dari Command

Promnpt (DOS Prompt) menggunakan user Root atau tanpa user. Berikut
langkahnya:
1. Jalankan Command Prompt melalui menu Start Program
Accesories Command Prompt atau DOS Prompt. Selain itu, Anda
juga dapat mengaksesnya dari jendela Run, yaitu dengan menuliskan
alamat command atau cmd.

Gambar 2.2 Menjalankan Command dari Run

2. Berikut adalah contoh tampilan utama Command Prompt dari

Windows XP.

Gambar 2.3 Tampilan utama Command Prompt

Langkah 2 : Menguasai Database MySQL

3. Setelah masuk pada halaman Command Prompt atau MS DOS Prompt,

masuklah pada subfolder mysql\bin, dan jalankan mysql klien-nya,
berikut caranya:

Aatau:

4. Setelah berada di dalam folder mysql\bin, untuk masuk menggunakan user

tamu, Anda dapat langsung menuliskan perintah mysql saja atau
mysql.exe.
\MySQL\bin> mysql

5. Berikut adalah contohnya:

6. Saat masuk pada server MySQL tanpa menyebutkan nama usernya, atau
menggunakan user dan passwordnya salah, maka server biasanya akan
menolak dengan menampilkan pesan kesalahan. Berikut contohnya:

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

\MYSQL\bin> mysql
ERROR
1045
(28000):
Access
denied
'ODBC'@'localhost' (using password: N
O)

for

user

7. Untuk masuk menggunakan user, misalnya root. Maka pada perintah harus
didefinisikan nama usernya, kemudian diikuti dengan password yang
sesuai.
\MySQL\bin> mysql -u root p
Enter password: xxxxx

8. Jika saat instalasi Anda tidak memasukkan password, maka kita dapat
masuk pada MySQL menggunakan user root tanpa password. Berikut
adalah caranya:
\MySQL\bin> mysql -u root

9. Kita juga dapat masuk pada MySQL dengan menggunakan user lain,
syaratnya user tersebut sudah terdaftar di dalam server. Misalnya kita akan
masuk menggunakan user bunafit, maka perintahnya adalah:
\MySQL\bin> mysql -u bunafit p
Enter password: xxxxx

10. Sekarang, kita misalkan saja masuk pada server MySQL menggunakan
root yang dibuat tanpa password, maka perintah dan hasilnya dapat dilihat
pada contoh berikut.
\MySQL\bin> mysql -u root
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 5.0.19-nt
Type 'help;' or '\h' for help. Type '\c' to clear the
buffer.

Langkah 2 : Menguasai Database MySQL

mysql>

11. Dari Prompt MySQL di atas, Anda dapat menjalankan perintah-perintah

SQL termasuk membuat database dan tabel.
12. Untuk keluar dari MySQL Prompt, Anda dapat menuliskan perintah quit.
Berikut adalah contohnya.
mysql> quit
Bye
\MYSQL\bin>

13. Setelah kembali pada prompt C:\XAMPP\XAMPP\mysql\bin> atau

C:\Program Files\xampp\mysql\bin>, berarti Anda telah keluar dari
database MySQL.

2.2.3

Menjalankan Klien MySQL dari Windows Explorer

Sebetulnya kita dapat dengan mudah mengakses MySQL, sebagai user tamu
atau user tak dikenal, caranya adalah dengan mengklik ganda file klien yang
bernama mysql.exe dari halaman Windows Explorer. File tersebut terletak di
subfolder
C:\XAMPP\XAMPP\mysql\bin>
atau
C:\Program
Files\xampp\mysql\bin>, Berikut letaknya seperti tampak pada gambar:

Gambar 2.7 Menjalankan mysql dengan cara klik ganda dari Explorer

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

2.2.4

Mengetahui Letak Penyimpanan Database

Pada kondisi normal, MySQL memiliki sub subfolder yang bernama data
untuk menyimpan semua semua database dan tabel yang terbentuk. Sususan
dari database yang dihasilkan dari MySQL jika dilihat dari Windows
Explorer akan terlihat seperti subfolder biasa, kemudian di dalamnya akan
tersusun beberapa file dari tabel. Berikut gambarnya:

Gambar 2.8 Subfolder penyimpanan database

Dari gambar di atas, jika Anda baru pertama kali membuka folder tersebut dan
belum pernah membuat satu database-pun, maka yang ada hanyalah folder
mysql, test, phpmyadmin dan webauth.

2.3

Mengakses MySQL dengan Perintah SQL

Pada bagian kedua ini Anda akan belajar perintah-perintah dasar untuk
mengakses database MySQL. Perintah yang dipelajari termasuk melihat
informasi dan bagaimana membangun database baru dengan perintah.

2.3.1

Mengetahui Daftar Database yang Ada

Setelah masuk pada Prompt MySQL, untuk dapat melihat daftar database
yang telah terbuat dapat menggunakan perintah SHOW DATABASES.
Berikut adalah contohnya:

Langkah 2 : Menguasai Database MySQL

2.3.2

Membuat Database Baru

Untuk membuat database baru, perintah yang digunakan adalah CREATE

DATABASE. Berikut adalah contoh perintah membuat database sekolahdb.

Dari perintah di atas, parameter Query OK, 1 row affected (0.00 sec)
menyatakan perintah yang Anda ketikkan berhasil dijalankan. Sekarang
cobalah untuk melihat hasilnya dengan perintah SHOW.

2.3.3

Masuk Pada Database

Masuk pada suatu database juga berarti dengan mengaktifkan database,

caranya adalah dengan menuliskan perintah USE atau CONNECT. Berikut
adalah contoh perintah untuk masuk pada database sekolahdb.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

2.3.4

Membuat Tabel Baru

Syarat utama untuk dapat membuat tabel baru adalah Anda harus masuk atau
berada di dalam suatu database (gunakan perintah USE). Untuk membuat tabel
baru, perintah yang digunakan adalah CREATE TABLE. Berikut adalah
sintaks dasarnya:
SINTAKS :
CREATE TABLE [IF NOT EXISTS] nama_tabel
(kolom_a tipe(panjang), kolom_b tipe(panjang), ...)

Sebagai contoh, sekarang Anda dapat mencoba membuat tabel dengan sruktur
sebagai berikut:
Tabel 2.1 Desain tabel untuk menyimpan data siswa
Kolom
Tipe
Panjang Keterangan
Kode
CHAR
4
Primery Key
Nama
VARCHAR 30
Alamat
VARCHAR 100
Dengan sintaks dasar yang ada, perintah SQL untuk membuat tabel siswa
seperti yang telah didefinisikan dalam Tabel 2.1 adalah sebagai berikut:

2.3.5

Mengetahui Daftar Tabel yang Ada

Anda juga dapat menampilkan daftar tabel yang ada di dalam database,
perintahnya adalah SHOW TABLES. Berikut contohnya:

Langkah 2 : Menguasai Database MySQL

Atau :

2.3.6

Melihat Kembali Struktur Desain Tabel

Setelah tabel selesai dibuat, Anda dapat melihat kembali struktur desain awal
seperti pada Tabel 2.1 di atas. Perintah yang dapat digunakan adalah DESC
atau DESCRIBE. Berikut contohnya:

2.3.7

Memasukkan Data Baru Ke Dalam Tabel

Anda dapat memasukkan atau menyisipkan data baru ke dalam suatu tabel
dengan cara yang sangat mudah, yaitu dengan perintah INSERT. Ada dua
sintaks yang dapat digunakan, yaitu:
SINTAKS :
INSERT INTO nama_tabel (kolom_a, kolom_b, ...,z)
VALUES (data_kolom_a,data_kolom_b, ...,z);

10

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Dari sintaks di atas, berikut adalah contoh perintah SQL untuk memasukkan
satu data baru ke dalam tabel siswa.

Selain cara standar di atas, Anda juga dapat menggunakan cara kedua. Berikut
adalah sintaks dasarnya :
SINTAKS 2:
INSERT INTO nama_tbl SET
kolom_a = 'data_kolom_a',
kolom_b = 'data_kolom_b',
kolom_n = 'data_kolom_n',
...... ;

Dengan menggunakan sintaks di atas, berikut adalah contohnya:

2.3.8

Menampilkan Data dari Dalam Tabel

Menampilkan data juga dapat diartikan dengan mengambil, menyeleksi atau

memilih data dari dalam tabel. Perintah yang digunakan adalah SELECT,
kemudian dikuti tanda bintang (*) yang berarti untuk semua kolom atau
dengan menyebutkan nama kolomnya satu persatu.
SINTAKS :
SELECT kolom_a, kolom_b, ... FROM nama_tbl

Berikut contohnya:

Langkah 2 : Menguasai Database MySQL

2.3.9

11

Menampilkan Data Hanya Sebagian Kolom

Sebelumnya telah dikatakan, bahwa dengan perintah SELECT kita dapat

mengambil atau menampilkan data. Untuk mendapatkan sebagian data dari
kolom tertentu, Anda dapat menyebutkan nama kolomnya.

2.3.10 Mengubah Nilai Data Pada Tabel

Saat membuat program aplikasi database, mengubah nilai data tidak dapat
Anda tinggalkan, karena memiliki maksud untuk memperbaiki nilai yang salah
atau sudah tidak sesuai lagi dengan data saat ini. Untuk mengubah nilai,
perintah yang digunakan adalah UPDATE, kemudian menggunakan
parameter WHERE sebagai kondisi penentu.
SINTAKS :
UPDATE nama_tabel SET
kolom_a = datakolom_a,
kolom_b = datakolom_b,
..............
WHERE kondisi

12

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Dengan menggunakan tabel yang sama, Anda dapat mengubah nilai alamat
pada data siswa yang bernama Sariyanto. Alamat yang ada sebelumnya
adalah Manggarawan, dan akan diganti dengan Umbul Kacang.

Pada perintah di atas, Anda dapat menggunakan nilai kode sebagai kondisi.
Untuk melihat hasilnya, Anda dapat menggunakan perintah SELECT.

2.3.11 Menghapus Sebagian Baris Data

Untuk menghapus sebagian data, Anda dapat menggunakan perintah
DELETE. Dalam pemakaiannya, Anda juga harus menggunakan parameter
WHERE sebagai kondisi. Berikut contohnya:

Dengan perintah di atas, Anda menghapus data siswa yang memiliki kode
0203, sedangkan data selain itu tidak dihapus. Untuk melihat hasilnya, Anda
dapat menggunakan perintah SELECT.

Langkah 2 : Menguasai Database MySQL

oooOooo

13

Langkah

3
Menguasai Pembuatan Tabel Untuk
Desain Aplikasi

3.1

Pendahuluan

Tabel merupakan objek penting dalam membangun aplikasi Web. Selain

sebagai kerangka, tabel juga digunakan sebagai model desain dari aplikasi
yang Anda bangun. Dengan adanya tabel, Anda dapat membuat sekat-sekat
halaman, kemudian dari setiap daerah yang telah disekat dapat Anda pasang
berbagai objek lain seperti formulir, tombol, gambar maupun konten.

3.2

Mengenal Dreamweaver

Sebelum mendesain berbagai objek dengan Dreamweaver, ada baiknya Anda

pahami terlebih dahulu bagian utama dari aplikasi editor yang digunakan.
Berikut adalah pengetahuan dasar sebagai perkenalan awal Anda dengan editor
andalan Anda bernama Dreamweaver.

3.2.1

Memahami Bagian Dreamweaver

Pada versi terbaru ini yaitu Dreamweaver 8 dan CS3, sebenarnya tidak jauh
beda dengan versi sebelumnya yaitu versi 6 yang hanya dikenal dengan MX
atau MX 2004, atau versi sebelumnya Dreamweaver 4 dan 3, sehingga latihan
pada buku ini dapat Anda terapkan pada beberapa versi sebelumnya atau untuk
versi terbaru yang akan datang. Secara umum, halaman utama yang dimiliki
oleh Dreamweaver adalah sebagai berikut:

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 3.1 Standar halaman yang dimiliki oleh Dreamweaver

Semua versi Dreamweaver akan memiliki dua buah halaman kerja, yaitu
halaman kode (code) dan halaman desain (design). Sehingga dengan adanya
kedua halaman tersebut seorang pemrogram dapat menentukan pilihan
halaman yang akan digunakan.
Pada pilihan standar, editor ini telah mendukung banyak bahasa pemrograman,
khususnya pemrograman yang tergolong dalam Web Programming. Bentuk
dukungan tersebut dapat dibuktikan pada saat Anda masuk dan menggunakan
halaman baru dari menu File New.

3.2.2

Halaman Kerja Dreamweaver

Kemudahan yang disediakan oleh editor Dreamweaver adalah dengan

ketersediaan dua buah halaman yaitu halaman kode dan halaman desain,
dengan adanya halaman kode Anda dapat mengetikkan semua program yang
dikehendaki, karena adanya halaman ini pulalah maka Dreamweaver masuk
dalam kategori Editor Web. Selain itu juga memiliki fasilitas halaman yang
berbentuk WYSIWYG (waht you see is what you get), yang artinya semua yang
Anda buat akan tampil dan hasilnya akan sama jika dieksekusi, halaman
tersebut dikatakan sebagai halaman desain.

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

Gambar 3.2 Halaman kode dan desain

Untuk memepermudah pengguna, Dreamweaver memiliki 3 bentuk tampilan
halaman yang berbeda, yang pertama adalah halaman kode (Code), halaman
desain (Design) dan percampuran antara keduanya yaitu halaman desain dan
kode (Split).

Gambar 3.3 Letak ikon Code, Split dan Design

Dalam satu kali kerja Anda dapat menggunakan atau membuka beberapa
halaman, halaman tersebut akan ditampilkan per-layar mirip seperti pada
Sheet aplikasi Ms Excel. Tampilan dengan bentuk ini juga dapat diistilahkan
dengan bentuk tampilan desktop. Sehingga dengan kemampuan yang dimiliki
oleh MX versi (7, 2004, 8 dan CS3) ini akan sangat memudahkan dalam

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

pekerjaan yang melibatkan banyak halaman web. Untuk mengaktifkan

halaman kerja tersebut Anda dapat mengklik pada nama file yang ditampilkan
pada bagian atas halaman desain. Tampilan dengan 3 layar kerja dapat dilihat
pada gambar berikut.

Gambar 3.4 Tampilan dengan 3 buah halaman

3.2.3

Properti Pengaturan Data Objek

Untuk mempermudah dalam pengaturan objek yang ada pada halaman desain,
Dreamweaver memberikan fasilitas halaman Properties (properti) yang setiap
kali memiliki tampilan yang berbeda sesuai dengan objek yang Anda aktifkan
pada halaman desain. Halaman Properties tersebut berguna untuk
memberikan nilai pada setiap objek yang dimasukkan dalam halaman desain.
Untuk mengaktifkan halaman atau jendela Properties dapat melalui menu
Windows Properties, jendela properti akan ditampilkan pada halaman
desain bagian bawah. Secara standar jendela Properties akan ditampilkan
untuk mendukung data teks, berikut tampilannya:

Gambar 3.5 Contoh properties saat data teks aktif

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

Gambar properti di atas akan selalu berubah saat mengaktifkan objek web
yang berbeda. Untuk membuktikannya, cobalah untuk melihat perubahan saat
mengaktifkan komponen tabel, komponen form dan semua komponen yang
didukung oleh Dreamweaver MX atau 8. Berikut adalah contoh perubahan
ikon saat objek tabel diaktifkan.

Gambar 3.6 Contoh properties saat objek tabel aktif

3.3

Dasar Mendesain Tabel

Pada bagian ini Anda akan dibimbing dari dasar untuk dapat mengenali tabel
dan bagaimana membuat tabel dari Dreamweaver. Tidak hanya itu, Anda juga
akan diperkenalkan dengan tag HTML pembentuk dari tabel.

3.3.1

Memahami Ikon Untuk Membuat Tabel

Tidak seperti editor program web lainnya, dengan Dreamweaver Anda sangat
dimanja dalam segala hal, termasuk membuat tabel. Bayangkan saja, dengan
Dreamweaver hanya tinggal klik saja, maka tabel sudah terbuat secara
otomatis.
Untuk dapat membuat tabel baru, Anda dapat menggunakan ikon Table (
yang ada pada komponen atau toolbar Common.

Gambar 3.7 Ikon Table pada toolbar Common

Selain dari toolbar Common, Anda dapat mendesain tabel dengan fasilitas
yang ada pada toolbar Layout.

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 3.8 Ikon Table pada toolbar Layout

Selain dari kedua cara di atas (toolbar Common dan menu Insert), Anda juga
dapat membuat tabel dengan cara menekan tombol Ctrl + Alt + T atau dari
menu Insert Table.

Gambar 3.9 Alternatif lain untuk membuat tabel baru

3.3.2

Pertama Kali Membuat Tabel

Pada bagian ini Anda baru akan berlatih membuat tabel, termasuk mendesain
tampilannya. Sebenarnya sangat mudah, yaitu hanya meng-klik pada ikon dan
desain strukturnya, kemudian jadilah tabel. Untuk jelasnya, berikut
langkahnya:
1. Dengan menggunakan editor Dreamweaver, bukalah halaman baru
menggunakan tipe HTML atau PHP.
2. Klik ikon Tabel (

) dari toolbar Common atau tekan Ctrl + Alt + T.

3. Setelah muncul jendela pengaturan tabel, tentukan desain struktur tabel

yang diinginkan, termasuk jumlah kolom dan barisnya.
4. Pada latihan ini, Anda akan mebuat tabel dengan banyak baris (Rows)
sebanyak 2, banyak kolom (Coloumns) adalah 3, dan border = 1. Berikut
adalah model pengisiannya:

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

Gambar 3.10 Jendela utama pengaturan struktur tabel

5. Jika ingin menempatkan header (kepala) pada bagian yang berbeda, Anda
dapat memilih Left, Top atau Both pada bagian Header.
6. Dari desain struktur di atas, setelah selesai dapat mengklik OK.
7. Berikut adalah contoh tampilan hasil pembuatan tabel di atas.

Gambar 3.11 Hasil pembuatan tabel dua baris dan tiga kolom

3.3.3

Memahami Tag HTML Penyusun Tabel

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Dilihat dari halaman kode, tabel tersusun atas beberapa tag HTML. Susunan
baris ditandai dengan tag <TR>, sedangkan susunan cell (sel) atau kolom
ditandai dengan tag<TD>. Berikut adalah bedah skripnya:
1. Masih menggunakan tabel yang dibuat pada latihan sebelumnya.
2. Masuklah pada halaman kode dengan cara klik tombol Code, atau dari
menu View Code.
3. Pada halaman kode Anda akan melihat susunan dari tabel terdiri dari tag
<table> sebagai utamanya, dan <tr> sebagai penyusun baris, serta tag
<td> sebagai susuan cell(sel) data. Berikut adalah skrip lengkapnya:
<table width="300" border="1">
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>

4. Dari skrip di atas, tag <tr> sampai dengan </tr> yang ada dibawahnya
menyatakan satu baris. Jadi, semua tag <td> yang ada didalamnya masuk
ke dalam baris tersebut.
5. Dari skrip di atas, tag <td> sampai dengan </td> yang ada disampingnya
menyatakan satu cell (sell). Daerah ini berguna untuk meletakkan data
atau objek lain seperti gambar, form atau lainnya.
6. Karakter &nbsp; adalah data kosong atau whitespace yang ada pada
cell(sel) data.

3.3.4

Menyeleksi Tabel Secara Utuh

Menyeleksi tabel, sama artinya dengan memilih tabel atau mengaktifkan tabel
Caranya sangat mudah, berikut adalah beberapa cara yang paling mudah:
1. Dari area kosong disebelah tabel, klik (tahan) dan geserlah mouse menuju
objek tabel (proses drag). Sehingga objek tabel akan terseleksi.

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

Gambar 3.12 Cara pertama menyeleksi tabel

2. Klik pada pojok kiri atas tabel, atau pada bagian atas tabel, yaitu setelah
mendapatkan perubahan mouse (

).

Gambar 3.13 Cara kedua menyeleksi tabel

3. Klik pada garis vertical (beridiri), yaitu setelah Anda mendapatkan
).
perubahan pointer menjadi (

Gambar 3.14 Cara ketiga menyeleksi tabel

3.3.5

Menyeleksi Bagian Tabel

Selain menyeleksi tabel secara utuh, Anda juga dapat menyeleksi bagian tabel
tertentu, misalnya pada baris, kolom maupun pada cell. Berikut latihannya:
1. Untuk menyeleksi suatu baris penuh, letakkan pointer mouse di sebelah
kiri baris tertentu, klik kiri setelah mendapatkan pointer panah ( ).

10

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 3.15 Cara memilih baris tabel

2. Untuk menyeleksi suatu kolom penuh, letakkan pointer mouse di atas
baris tertentu, klik kiri setelah mendapatkan pointer panah ( ).

Gambar 3.16 Cara memilih kolom tabel

3. Untuk menyeleksi pada beberapa cell(sel) mendatar, klik (dan tahan) pada
cell pertama yang akan diseleksi, kemudian tarik menuju pada cell kedua
baik yang ada di sebelah kiri atau kanannya.

Gambar 3.17 Cara memilih beberapa cell

4. Untuk menyeleksi pada beberapa cell (sel) vertikal, klik (dan tahan) pada
cell pertama yang akan diseleksi, kemudian tarik menuju pada cell kedua
baik yang ada di atas atau di sebelah bawahnya..

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

11

Gambar 3.18 Cara memilih beberapa cell

3.3.6

Mengatur Kembali Struktur Tabel

Setelah tabel selesai dibuat, Anda boleh tidak menerima begitu saja struktur
yang ada. Jika struktur tabel masih banyak kekurangan, Anda dapat merestruktur atau mengatur kembali strukturnya. Caranya adalah dengan
menentukan properti dari jendela Properties.
1. Masih menggunakan tabel yang dibuat pada latihan sebelumnya.
2. Pilihlah (aktifkan) satu tabel penuh, maka pada bagian bawah
Dreamweaver Anda akan segera mendapatkan Properties.

Gambar 3.19 Jendela Properties saat tabel diaktifkan

3. Pada prinsipnya, tabel di atas sama dengan jendela pengaturan saat
pertama kali membuat tabel (Gambar 3.4).
4. Untuk mengubah struktur dan desain tabel, Anda dapat memasukkan nilai
pada kolom yang sesuai, kemudian tekan tombol Enter.

12

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

5. Setiap bagian yang ada disetiap jendela Properties dapat disebut atribut,
penjelasan setiap atribut dan bagiannya adalah sebagai berikut:
Tabel 3.1 Penjelasan bagian dari jendela Properties objek tabel
Atribut

Keterangan

Rows

) digunakan untuk mengatur

Bagian Rows (
jumlah baris tabel, ubah nilai ini untuk mengganti jumlah
barisnya.

Cols

Bagian Cols(
) digunakan untuk mengatur
jumlah kolom tabel, ubah nilai ini untuk mengganti
jumlah kolomnya

) digunakan untuk mengatur

Bagian W atau W(
lebar tabel ke arah kiri. Untuk nilai, Anda dapat
menggunakna persen (full window dianggap 100%), atau
pixel (menyesuaikan resolusi layar).

) digunakan untuk
Bagian H atau Height(
mengatur tinggi tabel ke atas dan bawah. Untuk nilai,
sama
pixel(

CellPad

dengan

W,

yaitu

persen(

dan

).

) digunakan untuk
Bagian CellPad(
memberi jarak antara garis border dengan area data.

CellSpace Bagian CellSpace(

) digunakan untuk
memberikan nilai lebar pada border.
Border
Align

) digunakan untuk
Bagian Border(
memberikan nilai ketebalan pada border (garis pinggir).
Bagian Align(
) digunakan untuk
menentukan perataan objek tabel, pilihannya adalah:
Default (standar di kiri), Left (di kiri halaman), Center (di
tengah halaman), Right (di kanan halaman).

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

Brdr
color

Bagian Brdr color(

) digunakan
untuk menentukan warna pada border, Anda dapat
mengubah dengan mengklik

Bg color

) digunakan
Bagian Bg color(
untuk menentukan warna pada background atau latar
belakang tabel, klik

Bg Image

Class

13

untuk mengubah warnanya.

)
Bagian Bg Image(
digunakan untuk menentukan objek gambar sebagai latar
belakang tabel. Klik ikon Open ( ) untuk menentukan
file gambar dari explorer.
Bagian Class(
) digunakan untuk mengatur
desain tabel dengan format CSS.

6. Dengan menggunakan pengaturan Properties, Anda dapat mengubah

struktur tabelnya dengan sangat mudah. Berikut adalah contohnya:

Gambar 3.20 Mengatur kembali struktur tabel

7. Setelah jendela Properties dari tabel terpilih diatur, maka secara otomatis
desain tabel akan berubah. Berikut adalah hasilnya:

Gambar 3.21 Hasil pengaturan struktur dari jendela Properties

14

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

3.3.7

Mengatur Lebar Kolom dan Baris Secara Manual

Pada latihan di atas Anda sudah menguasai bagaiaman menyeleksi tabel secara
penuh, sehingga dapat mengatur lebar dan tinggi tabel dengan sangat mudah.
Sekarang bagaiamana jika Anda ingin mengubah lebar kolom atau tinggi baris
tertentu saja, berikut adalah caranya:
1. Arahkan pinter mouse pada salah satu garis kolom, setelah mendapatkan
), klik (dan tahan) dan geserlah kearah kiri
kursor panah kiri-kanan (
atau kanan sesuai keinginan.

Gambar 3.22 Mengubah lebar kolom dengan menggeser garis

2. Arahkan pinter mouse pada salah satu garis kolom, setelah mendapatkan
kursor panah atas-bawah ( ), klik (dan tahan) dan geserlah ke arah
bawah atau atas sesuai keinginan.

Gambar 3.23 Mengubah tinggi baris dengan menggeser garis

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

3.4

15

Modifikasi Struktur Tabel

Pada bagian sebelumnya dasar-dasar mengaktifkan tabel telah Anda pelajari,

sekarang pada bagian ini Anda akan belajar bagaimana caranya memodifikasi
struktur dan desain tabel.

3.3.1

Menambah Kolom Tabel

Seperti yang dijelaskan pada bagian sebelumnya, untuk menambah jumlah

) dari jendela
kolom dapat dilakukan dengan mengatur nilai Cols(
Properties. Berikut ini adalah cara standar menambah jumlah kolom dengan
cara menambah nilai pada jendela Properties.

Gambar 3.24 Kondisi awal struktur tabel

Gambar 3.25 Hasil penambahan kolom baru

Untuk keperluan tertentu, Anda dapat menyisipkan kolom diantara kolom
yang telah ada, berikut caranya:
) yang
1. Aktifkan tabel terlebih dahulu, kemudian klik ikon panah kecil (
ada di bawah kolom, kemudian pilih submenu Insert Column Left jika
ingin menambah kolom di sebelah kiri.
2. Sedangkan untuk menambah kolom di sebelah kanan cell terpilih, lakukan
cara yang sama dengan dan pilih submenu Insert Column Right.

16

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 3.26 Cara lain menambah kolom

3. Selain cara di atas, caranya adalah : klik kanan pada salah satu Cell(sel)
kolom yang ada, kemudian pilih submenu Table Insert Row atau
(Ctrl+ShiftA).

Gambar 3.27 Menu klik kanan untuk menambah kolom

Gambar 3.28 Hasil penambahan kolom baru

4. Selain kedua cara di atas, Anda juga dapat menambah kolom dari menu
Modify Table Insert Column.
5. Untuk menambah kolom, dapat dipercepat dengan menekan tombol Ctrl
+ Shift + A dari keyboard.

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

3.3.2

17

Menambah Baris Tabel

Seperti yang dijelaskan pada bagian sebelumnya, untuk menambah jumlah

) dari jendela
baris dapat dilakukan dengan mengatur nilai Rows (
Properties. Berikut ini adalah cara standar menambah jumlah baris dengan
cara menambah nilai pada jendela Properties.

Gambar 3.29 Struktur tabel awal sebelum diubah

Gambar 3.30 Hasil menambah baris dengan Properties

Untuk keperluan tertentu, Anda dapat menyisipkan baris diantara baris yang
telah ada, berikut caranya:
1. Untuk menambah baris di atas suatu baris tertentu, klik kanan pada salah
satu baris, kemudian pilih menu Table Insert Row atau dengan
menekan tombol Ctrl + M.

Gambar 3.31 Menu klik kanan untuk menyisipkan baris

18

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

Gambar 3.32 Hasil menyisipkan baris diantara baris

2. Selain cara di atas, Anda juga dapat menambah kolom dari menu Modify
Table Insert Row.
3. Untuk mempercepat dalam menyisipkan baris tabel, Anda dapat menekan
tombol Ctrl + M dari keyboard.

3.3.3

Menggabungkan Baris dan Kolom Tabel

Menggabungkan salam bahasa komputer disebut dengan Merger, yaitu

sebuah teknik menggabungkan atau menjadikan satu dari beberapa kolom atau
baris yang terpilih. Berikut adalah latihannya:
1. Untuk menggabungkan beberapa cell(sel) dari baris tertentu, Anda dapat
memilih beberapa cell yang akan di-merger.

Gambar 3.33 Memilih beberapa cell dari baris pertama

2. Kemudian dari menu Modify Table Merge Cells.
Selain dari menu Modify, dapat dilakukan dari menu klik kanan, pilih
Table Merge Cells.

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

19

Gambar 3.34 Menu Merge Cells untuk menggabung cell

Anda juga dapat menggunakan ikon Merge (
disediakan pada jendela Properties.

) yang telah

Gambar 3.35 Ikon Merge Cells untuk menggabung cell

Untuk mempercepat dalam menggabungkan beberapa cell tabel,
Anda dapat menekan tombol Ctrl + Alt + M dari keyboard.
3. Berikut adalah hasilnya:

Gambar 3.36 Hasil menggabungkan tiga cell

3.3.4

Membagi Cell Menjadi Beberapa Baris dan Kolom

Kebalikan dari fasilitas Merge Cells adalah Split Cells, yaitu membagi atau
memecah satu cell (sel) menjadi beberapa kolom dan baris.

20

7 Langkah Menguasai PHP dan MySQL dengan Editor Dreamweaver

1. Pada bagian ini, tabel latihan Anda masih seperti sebelumnya, yaitu terdiri
dari dua baris dan tiga kolom.

Gambar 3.37 Struktur awal tabel sebelum Split

2. Untuk memecah cell, klik menu Split Cell atau klik ikon
adalah beberapa cara yang dapat dilakukan:

, berikut

Untuk mendapatkan menu Split Cell, klik kanan pada salah satu Cell
yang diiginkan, kemudian pilih Table Split Cell.

Gambar 3.38 Mendapatkan menu Split Cell

Untuk mendapatkan menu Split Cell lain, klik pada menu Modify,
kemudian pilih Table Split Cell.
Anda juga dapat menggunakan ikon Split Cell(
disediakan pada jendela Properties.

) yang telah

Gambar 3.39 Ikon Split Cells untuk memecah cell

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi

21

Untuk mempercepat dalam memecah cell tabel, Anda dapat menekan

tombol Ctrl + Alt + S dari keyboard.
3. Setelah menu Split Cell(
Split Cell.

) diklik, Anda akan dihadapkan pada jendela

4. Selanjutnya, tentukan jumlah kolom (Coloumns) atau baris (Rows) yang

akan dibuat. Berikut adalah contoh kami memecah cell menjadi dua
kolom.

Gambar 3.40 Menentukan model pemecahan cell

5. Jika berhasil, berikut adalah hasil tabel setelah dipecah.

Gambar 3.41 Hasil memecah cell menjadi dua kolom

Dari langkah di atas (lihat Gambar 3.40), jika Anda memilih Split cell into:
Coloumns sebanyak 2, maka hasilnya adalah:

Gambar 3.42 Hasil memecah cell menjadi dua baris

oooOooo

Langkah

4
Menguasai Pembuatan Formulir
Masukan Data

4.1

Pendahuluan

Pada bab ini Anda akan belajar dasar-dasar pemakaian objek forms untuk
membuat formulir. Tentunya Anda sudah paham, bahwa formulir adalah
media isian atau masukan untuk suatu data tertentu. Dari bab ini, semua hal
yang terkait dengan desain formulir akan dibahas.

4.2

Dasar Menggunakan Form

Subbab ini akan mengajarkan kepada para awam untuk dapat mengenali dan
menggunakan setiap objek form. Dengan mengetahui nama objek dan
fungsinya, maka Anda dapat mendesain formulir dengan kebutuhan yang
tepat.

4.2.1

Mengaktifkan Objek Form

Di dalam membuat aplikasi berbasis Web, Anda tidak dapat meninggalkan

toolbar form, yaitu sebagai media masukan yang berasal dari klien atau
pengguna aplikasi. Di dalam Dreamweaver versi berapapun, toolbar ini telah
disediakan dan Anda tinggal menggunakannya tanpa harus menulis kodenya
secara manual.
Saat pertama kali Anda masuk pada aplikasi Dreamweaver, maka status
toolbar akan aktif pada Common sebagai standarnya. Jangan takut, karena
Anda dapat berpindah-pindah toolbar dengan sangat mudah.

Gambar 4.1 Toolbar standar bernama Common

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Dari bagian badan toolbar tersebut, Anda dapat berpindah antar toolbar dengan
cara mengklik tanda panah ( ) yang ada, kemudian pilihlah nama toolbar
yang akan diaktifkan.

Gambar 4.2 Berpindah toolbar Forms

Selain menggunakan toolbar Forms di atas, Anda juga dapat menggunakan
menu Insert Form. Berikut adalah contohnya:

Gambar 4.3 Menu untuk memanggil objek form

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

Dari cara di atas, jika Anda memilih nama toolbar Forms, maka semua objek
formulir akan ditampilkan. Berikut adalah tampilannya:

Gambar 4.4 Objek lengkap pada toolbar Forms

4.2.2

Menggunakan Objek Form

Objek form ( ) merupakan bagian terpenting saat dalam mendesain formulir,

objek ini harus ada dan harus dibuat pertama kali saat mendesain. Setelah
objek form( ) ditambahkan, baru Anda dapat menambahkan objek form
yang dibutuhkan atau dapat membuat tabel untuk kerangka desain.

Gambar 4.4 Objek form ditambahkan pada lembar kerja

Setelah objek form ditambahkan, Anda dapat mengukur alamat aksi yang
berguna untuk mengeksekusi data yang dikirimkan. Biasanya, akan
dialamatkan pada program simpan atau program tampil. Pengaturannya dapat
dilakukan pada jendela Properties.

Gambar 4.5 Jendela properties untuk objek form

Keterangan:
Dari tampilan gambar di atas, ada beberapa toolbar pengaturan yang perlu
Anda ketahui. Berikut adalah penjelasannya:

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Form name: Digunakan untuk menentukan variabel atau Name dari

objek, sehingga dari variabel ini nantinya dapat dibaca pada program.
Action
: Digunakan untuk menentukan alamat tujuan form, sehingga
saat dieksekusi atau saat tombol Submit diklik, maka program akan
menjalankan file program yang dimaksud.
Method : Digunakan untuk menentukan metode pengiriman data dari
form, yaitu menggunakan POST atau GET. Untuk aplikasi penyimpanan
database, Anda harus memilih POST.
Target : Digunakan untuk menentukan metode pemakaian browser.
Pilihannya adalah : _Self (dijalankan pada halaman yang sama), _blank
(dijalankan pada halaman baru), _parent dan _top.

Catatan:
Jika jendela Properties untuk objek Form tidak muncul, Anda
dapat mengaktifkannya dengan cara, klik pada garis merah
putus-putus (
), atau dengan cara klik sekali lagi pada
objek form( ).

4.2.3

Menggunakan Objek Text Field

Objek Text Field ( ) merupakan objek masukan utama yang biasa

digunakan dalam mendesain formulir. Pada aplikasi pemrograman yang lain,
objek ini sering disebut dengan TextBox. Dengan objek ini Anda dapat
memasukkan data teks dengan cara menuliskannya dari keyboard.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form(

) pada halaman kerja.

Gambar 4.6 Desain awal membuat formulir

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

3. Di sebelah label Data Nama, tambahkan objek Text Field dengan cara
mengklik ikon ( ) atau dari menu Insert Form Text Field.

Gambar 4.7 Tampilan objek Text Field di dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Text Field yang ada
di dalam halaman form, maka jendela Properties akan ditampilkan seperti
berikut:

Gambar 4.8 Jendela properties objek Text Field

Keterangan:
Dari tampilan gambar di atas, ada beberapa toolbar pengaturan yang perlu
Anda ketahui. Berikut adalah penjelasannya:
TextField : Digunakan untuk menentukan variabel atau Name dari
objek, sehingga dari variabel ini nantinya dapat dibaca pada program.
Char width: Digunakan untuk menentukan panjang objek yang terlihat
pada layar, ukuran panjang ini tidak berpengaruh pada kemampuan
dalam menampung data.
Max chars : Digunakan untuk menentukan maksimal panjang objek
untuk menampung teks. Jadi, jika disetting dengan nilai 4, maka Anda
hanya bisa memasukkan data sebanyak 4 digit.
Init Val : Digunakan untuk memberikan nilai standar pada objek
masukan. Biasanya kolom ini akan dipakai saat membuat program ubah
data.

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

5. Juga perlu Anda ketahui, bahwa objek Text Field disusun atas tag HTML
seperti kode berikut.
<input name="TxtNama" type="text" size="30"
maxlength="100">

4.2.4

Menggunakan TextArea

Objek Text Area ( ) merupakan pengembangan dari Text Field, yaitu

model masukan data yang mendukung banyak data berupa kalimat atau lebih.
Bedanya, pada Text Field tipenya untuk satu baris data saja (Single Line),
sedangkan untuk Text Area adalah Multi Line atau banyak baris.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form(

) pada halaman kerja.

Gambar 4.9 Desain formulir untuk objek Text Area

6. Di sebelah label Data Lengkap, tambahkan objek Text Area dengan cara
mengklik ikon ( ) atau dari menu Insert Form Textarea.

Gambar 4.10 Tampilan objek Text Area di dalam formulir

7. Objek ini juga dapat diatur, caranya klik pada objek Text Area yang ada
di dalam halaman form, maka jendela Properties akan ditampilkan.

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

Gambar 4.11 Jendela Properties untuk objek Text Area

Keterangan:
Dari tampilan gambar di atas, ada beberapa toolbar pengaturan yang perlu
Anda ketahui. Berikut adalah penjelasannya:
TextField : Digunakan untuk menentukan variabel atau Name dari
objek, sehingga dari variabel ini nantinya dapat dibaca pada program.
Char width: Digunakan untuk menentukan panjang objek yang terlihat
pada layar, ukuran panjang ini tidak berpengaruh pada kemampuan
dalam menampung data.
Num Lines : Digunakan untuk menentukan jumlah baris objek untuk
menampung teks. Jadi, jika disetting dengan nilai 4, maka Anda akan
melihat objek TextArea dengan lebar 4x objek TextField.
Init Val : Digunakan untuk memberikan nilai standar pada objek
masukan. Biasanya kolom ini akan dipakai saat membuat program ubah
data.
8. Juga perlu Anda ketahui, bahwa objek Text Area disusun atas tag HTML
seperti kode berikut.
<textarea name="TxtLengkap" cols="40" rows="4"></textarea>

4.2.5

Menggunakan Text Password

Objek Text Password( ) merupakan objek masukan form khusus untuk

data password. Pada dasarnya, objek ini sama dengan Text Field biasa, yang
membedakan hanya tipe datanya saja, yaitu disetting dengan Password.
Berikut adalah latihan dalam menggunakannya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form(

) pada halaman kerja.

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.12 Desain formulir untuk objek Text Password

9. Di sebelah label Data Lengkap, tambahkan objek Text Field dengan cara
mengklik ikon ( ) atau dari menu Insert Form Text Field.

Gambar 4.13 Tampilan objek Text Password di dalam formulir

3. Untuk memasang Text Field sebagai Text Password, Anda harus
mengubah tipe datanya menjadi Password. Untuk mengubahnya dapat
dilakukan dari jendela Properties.
4. Objek ini juga dapat diatur, caranya klik pada objek Text Field yang ada
di dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.14 Jendela Properties untuk objek Text Password

5.

Juga perlu Anda ketahui, bahwa objek Text Password disusun atas tag
HTML seperti kode berikut.

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

<input name="TxtPassword" type="password" size="30"

maxlength="30">

4.2.6

Menggunakan Hidden Field

Objek Hidden Field ( ) merupakan media masukan yang statusnya

disembunyikan, jadi fisik objeknya tidak akan terlihat dari halaman browser.
Biasanya, objek ini digunakan untuk merekam data kode atau data rahasia
untuk sementara waktu. Berikut latihannya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form(
lain pada halaman kerja, berikut contohnya:

) dan beberapa objek

Gambar 4.15 Desain formulir untuk objek Hidden Field

3. Di sebelah label Kode, tambahkan objek Hidden Field dengan cara
mengklik ikon ( ) atau dari menu Insert Form Hidden Field.

Gambar 4.16 Tampilan objek Hidden Field di dalam formulir

4. Setelah terbentuk, objek Hidden Field akan berubah bentuknya menjadi
warna kuning ( ).
5. Objek ini juga dapat diatur, caranya klik pada objek Hidden Field yang
ada di dalam halaman form, maka jendela Properties akan ditampilkan:

10

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.17 Jendela Properties untuk objek Hidden Field

6. Juga perlu Anda ketahui, bahwa objek Hidden Field disusun atas tag
HTML seperti kode berikut.
<input name="TxtKodeH" type="hidden" value="<? echo
$kodedata; ?>">

4.2.7

Menggunakan List/Menu

Objek List/Menu ( ) juga disebut dengan Combo Box, yiatu objek

masukkan yang berupa pilihan berupa kombo. Biasanya digunakan untuk
membuat pilihan data yang bersifat Single Choice (hanya boleh memilih satu),
misalnya : data golongan darah, agama, tanggal, bulan, tahun negara atau yang
lainnya. Berikut adalah latihannya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form(
lain pada halaman kerja, berikut contohnya:

) dan beberapa objek

Gambar 4.18 Desain formulir untuk objek List/Menu

3. Di sebelah label Data Bulan, tambahkan objek List/Menu dengan cara
mengklik ikon( ) atau dari menu Insert Form List/Menu.

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

11

Gambar 4.19 Tampilan objek List/Menu di dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek List/Menu yang ada
di dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.20 Jendela Properties untuk objek List/Menu

5. Pada objek List/Menu Anda dapat membuat daftar pilihan, caranya
dengan klik kanan pada objek, kemudian pilih List Values atau klik
tombol (
) yang ada pada jendela Properties.

Gambar 4.21 Menu klik kanan pada List/Menu

6. Dari klik kanan, setelah Anda memilih List Values, Anda akan
dihadapkan pada jendela List Values. Tambahkan beberapa daftar pilihan
dengan cara mengklik tombol Add ( ) atau Del( ) untuk menghapus.

12

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.22 Membuat daftar pilihan berupa data bulan

7. Setelah beberapa daftar ditambahkan, Anda dapat mengakhiri dengan
mengklik tombol OK. Berikut adalah contoh hasilnya:

Gambar 4.23 Tampilan akhir setelah menambah daftar

8. Juga perlu Anda ketahui, bahwa objek List/Menu disusun atas tag HTML
seperti kode berikut.
<select name="ListBulan">
<option value="KOSONG"> [ 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>

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

13

9. Dengan cara di atas, saat program dijalankan Anda akan mendapatkan

nilai isi setelah objek List/Menu diklik. Berikut contohnya:

Gambar 4.24 Tampilan hasil objek List/Menu dalam web

4.2.8

Menggunakan Radio Button

Objek Radio Button ( ) juga merupakan objek masukkan berupa pilihan

yang memiliki sifat Single Choice (hanya boleh memilih satu). Memiliki sifat
yang sama dengan List/Menu, hanya saja yang membedakan adalah bentuk
pilihan datanya terbuka diluar.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja, berikut contohnya:

) dan beberapa objek

Gambar 4.25 Desain formulir untuk objek Radio Button

3. Di sebelah label Kelamin:, tambahkan objek Radio Button dengan cara
mengklik ikon ( ) atau dari menu Insert Form Radio Button.

14

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.26 Tampilan objek Radio Button di dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Radio Button yang
ada di dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.27 Jendela Properties untuk objek Radio Button

5. Juga perlu Anda ketahui, bahwa objek Radio Button disusun atas tag
HTML seperti kode berikut.
<input name="RbKelamin" type="radio" value="P"
checked="checked">
<input name="RbKelamin" type="radio" value="W">

6. Dengan cara di atas, maka nilai checked akan membuat salah satu pilihan
menjadi aktif atau terpilih. Berikut contoh hasilnya:

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

15

Gambar 4.28 Halaman web dengan pilihan kelamin

4.2.9

Menggunakan Checkbox

Objek Checkbox ( ) adalah media masukan yang datanya bersifat Multiple

Choice (banyak pilihan). Berbeda dengan kedua objek masukan sebelumnya,
pada Checkbox Anda dapat membuat daftar, dan pengguna dapat memilih
salah satu atau semuanya. Biasanya digunakan untuk data pilihan seperti hobi,
makanan favorit atau yang lainnya.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja, berikut contohnya:

) dan beberapa objek

Gambar 4.29 Desain formulir untuk objek Checkbox

3. Di sebelah label Makanan Favorit:, tambahkan objek Checkbox dengan
cara mengklik ikon ( ) atau dari menu Insert Form Checkbox.

16

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.30 Tampilan objek Checkbox di dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Checkbox yang ada
di dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.31 Jendela Properties untuk objek Checkbox

5. Juga perlu Anda ketahui, bahwa objek Checkbox disusun atas tag HTML
seperti kode berikut.
Makanan Faforit : <br>
<input name="CbMakanan[]"
Gorengan<br>
<input name="CbMakanan[]"
Kue Bolu<br>
<input name="CbMakanan[]"
Ayam Goreng<br>
<input name="CbMakanan[]"
Es Cendol<br>
<input name="CbMakanan[]"
Es Campur<br>
<input name="CbMakanan[]"
Sambel Terong<br>

type="checkbox" value="Gorengan">
type="checkbox" value="Bolu">
type="checkbox" value="Gorengan">
type="checkbox" value="Cendol">
type="checkbox" value="Es Campur">
type="checkbox" value="Sambelan">

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

17

7. Dengan cara di atas, maka semua data dari daftar makanan yang ada dapat
Anda pilih salah satu, memilih dua atau memilih semuanya.

Gambar 4.32 Hasil penggunaan objek Checkbox

8. Di dalam program PHP, Anda dapat mengambil semua nilai dari pilihan
yang aktif dengan cara berikut.
<?php
$ArrayMasukan = count ($CbMakanan);
for ($i=0; $i < $ArrayMasukan; $i++) {
echo "$CbMakanan[$i] <br>";
}
?>

4.2.10 Menggunakan File Field

Objek File Field ( ) berguna untuk membuat masukan berupa file, yaitu
dengan sistem mengkopi dari suatu tempat menuju folder server. Biasanya
digunakan untuk membuat program upload atau pengiriman data berupa file.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja, berikut contohnya:

) dan beberapa objek

18

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.33 Desain formulir untuk objek File Field

3. Di sebelah label Upload File:, tambahkan objek File Field dengan cara
mengklik ikon ( ) atau dari menu Insert Form File Field.

Gambar 4.34 Tampilan objek File Field di dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek File Field yang ada di
dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.35 Jendela Properties untuk objek File Field

5. Juga perlu Anda ketahui, bahwa objek File Field disusun atas tag HTML
seperti kode berikut.
<form action="" method="post" enctype="multipart/form-data"
name="form1">
Upload File :
<input name="FileData" type="file" size="40"
maxlength="100">
</form>

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

19

9. Setelah program ini dijalankan, Anda dapat menentukan data file yang
akan dikirim dengan cara mengklik tombol Browse.

Gambar 4.36 Tampilan setelah program dijalankan

4.2.11 Menggunakan Objek Button

Objek Button ( ) berguna untuk membuat tombol, yaitu objek terakhir yang
harus Anda tambahkan dalam membuat formulir. Fungsinya adalah sebagai
pemicu formulir, sehingga semua isi data dari formulir akan dieksekusi pada
alamat yang telah ditentukan dalam aksi form.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja.

) dan beberapa objek

3. Di sebelah label User Login: dan Password:, tambahkan objek Text

Field dengan cara mengklik ikon ( ) atau dari menu Insert Form
Text Field.

Gambar 4.37 Tampilan objek Button di dalam formulir

20

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

4. Pada bagian bawah, tambahkan objek Button dengan cara mengklik ikon
( ) atau dari menu Insert Form Button.
5. Objek ini juga dapat diatur, caranya klik pada objek Button yang ada di
dalam halaman form, maka jendela Properties akan ditampilkan:

Gambar 4.38 Jendela Properties untuk pengaturan

4.3

Mendesain Berbagai Formulir Aplikasi

Dasar-dasar pemakaian formulir telah Anda pelajari, sekarang lanjutkan

dengan belajar memadukan beberapa objek form untuk kebutuhan tertentu.
Pada subbab ini, Anda akan menggunakan desain tabel sebagai kerangka
desain. Ikuti dan pahamilah berbagai teknik pada subbab ini.

4.3.1

Mendesain Formulir Masukan Kategori

Pada latihan pertama ini, Anda akan membuat formulir masukan untuk data
kategori, misalnya kategori buku atau yang lainnya. Untuk membuatnya, Anda
hanya memerlukan dua masukan data, yaitu kode dan nama kategori. Berikut
adalah langkahnya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja.

) dan beberapa objek

Gambar 4.39 Formulir telah ditambahkan dalam halaman kerja

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

21

3. Pastikan kursor berada di dalam lingkaran objek formulir (garis putusputus warna merah), kemudian tambahkan objek tabel (
ketentuan berikut.

) dengan

Gambar 4.40 Desain tabel untuk membuat formulir masukan

4. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan
objek formulir sesuai data buku yang akan dimasukkan. Berikut
contohnya:

Gambar 4.41 Hasil pembuatan tabel untuk kerangka

5. Desainlah tampilan kerangka tabel sebagus mungkin, yaitu dengan
membuat judul (dua kolom dimerger) dan keterangan data.

Gambar 4.42 Hasil desain kerangka masukan

22

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

6. Setelah desain selesai, Anda dapat menambahkan beberapa objek

masukkan berupa Text Field dan Button ke dalam kerangka.

Gambar 4.43 Hasil desain kerangka masukan

7. Dari desain formulir masukan di atas, setelah selesai Anda dapat mencoba
menjalankan, berikut adalah contoh hasilnya:

Gambar 4.44 Hasil formulir masukan data kategori

4.3.2

Mendesain Formulir Masukan Data Barang

Pada latihan kedua ini, Anda akan mendesain formulir masukan untuk data
barang. Formulir ini akang Anda temui saat membuat aplikasi sistem informasi
barang atau penjualan.

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

23

1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah

halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja.

) dan beberapa objek

Gambar 4.45 Formulir telah ditambahkan dalam halaman kerja

3. Pastikan kursor berada di dalam lingkaran objek formulir (garis putusputus warna merah), kemudian tambahkan objek tabel (
ketentuan berikut.

) dengan

Gambar 4.46 Desain tabel untuk membuat formulir masukan

4. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan
objek formulir sesuai data buku yang akan dimasukkan. Berikut
contohnya:

Gambar 4.47 Hasil pembuatan tabel untuk kerangka

24

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

5. Desainlah tampilan kerangka tabel sebagus mungkin, yaitu dengan

membuat judul (dua kolom dimerger) dan keterangan data.

Gambar 4.48 Hasil desain kerangka masukan

6. Setelah desain selesai, Anda dapat menambahkan beberapa objek
masukan berupa Text Field, Button atau yang lainnya ke dalam
kerangka. Tentunya saat memilih objek masukan harus ditentukan dengan
tipe data yang ada.

Gambar 4.49 Hasil desain kerangka masukan

7. Dari desain formulir masukan di atas, setelah selesai Anda dapat mencoba
menjalankan, berikut adalah contoh hasilnya:

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

25

Gambar 4.50 Hasil formulir masukan dari web

4.3.3

Mendesain Formulir Pendaftaran

Pada latihan ketiga ini, Anda akan belajar mendesain formulir masukan data
siswa atau untuk pendaftaran. Berikut adalah langkahnya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (
lain pada halaman kerja.

) dan beberapa objek

Gambar 4.51Formulir telah ditambahkan dalam halaman kerja

3. Pastikan kursor berada di dalam lingkaran objek formulir (garis putusputus warna merah), kemudian tambahkan objek tabel (
ketentuan berikut.

) dengan

26

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.52 Desain tabel untuk membuat formulir masukan

4. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan

objek formulir sesuai data buku yang akan dimasuki. Berikut contohnya:

Gambar 4.53 Hasil pembuatan tabel untuk kerangka

5. Desainlah tampilan kerangka tabel sebagus mungkin, yaitu dengan
membuat judul (dua kolom dimerger) dan keterangan data.

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

27

Gambar 4.54 Hasil desain kerangka masukan

6. Setelah desain selesai, Anda dapat menambahkan beberapa objek
masukan berupa Text Field, Button atau yang lainnya ke dalam
kerangka. Tentunya saat memilih objek masukan harus ditentukan dengan
tipe data yang ada.

Gambar 4.55 Hasil desain kerangka masukan

7. Dari desain formulir masukan di atas, setelah selesai Anda dapat mencoba
menjalankan, berikut adalah contoh hasilnya:

28

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 4.56 Hasil formulir masukan dari web

oooOooo

Langkah

5
Menguasai Pengkodean PHP dengan
Dreamweaver

5.1

Pendahuluan

Bab ini adalah pelajaran paling dasar dalam mempelajari pemrograman PHP
dengan menggunakan aplikasi Dreamweaver sebagai editor-nya. Pada bab ini,
semua materi dan latihan yang dibahas dibuat menggunakan bantuan
Dreamweaver versi 8. Sedangkan bagi Anda yang menggunakan versi MX/
MX 2004 ataupun CS3 tidak bermasalah, karena semuanya sama.

5.2

Menggunakan Dreamweaver

Subbab ini akan menjadi dasar dari Anda untuk dapat menggunakan
Dreamweaver sebagai editor pemrograman, khsusnya PHP. Bagi Anda yang
belum pernah sama sekali menggunakan aplikasi ini, maka subbab ini wajib
dibaca dan dipraktekkan.

5.2.1

Mengenal Dreamweaver

Sebagian pembaca pasti ada yang belum paham dengan Dreamweaver itu
sendiri, ada sebagian awam yang mengira bahwa Dreamweaver adalah bahasa
pemrograman. Wah....wah....! itu salah, Dreamweaver hanya Editor web yang
dapat Anda gunakan untuk menuliskan tag-tag HTML dan skrip PHP. Selain
itu, Dreamweaver juga memiliki kemampuan Visual.
Jadi, dengan menggunakan Dreamweaver, Anda sudah tidak lagi direpotkan
dengan penulisan tag HTML untuk mendesain suatu objek (tabel, gambar,
form, frame, dll).
Dengan Dreamweaver, Anda tinggal klik sana sini, dan semua yang Anda klik
akan langsung terlihat hasilnya. Kemampuan tersebut sering disebut dengan
WYSIWYG (What You See Is What You Get), atau apa yang Anda lihat, itulah

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

hasil yang akan didapatkan nantinya. Dengan kemampuan tersebut, maka tidak
ada alasan bagi Anda untuk meninggalkan editor ini.

5.2.2

Mengetahui Folder Kerja Utama

Semua web server pasti akan menyediakan sebuah folder kerja atau yang
disebut dengan Web Root atau Document Root. Folder ini difungsikan untuk
menyimpan semua file program web termasuk file aplikasi PHP.
Biasanya, web server akan menyediakan satu direktori kerja yang bernama
htdocs. Begitu juga dengan Apache yang ada di dalam paket XAMPP, Anda
dapat menemukan folder htdocs pada subfolder XAMPP, atau secara
lengkapnya C:\XAMPP\xampp\htdocs (karena kita menginstal di folder
C:\XAMPP). Sedangkan untuk instalasi standar, Anda akan menemukannya
di C:\Program Files\xampp\htdocs. Berikut adalah kondisi folder htdocs
yang masih asli.

Gambar 5.1 Keadaan awal pada folder htdocs

Pada folder tersebutlah semua file program hasil pekerjaan Anda akan
disimpan, dengan meletakkan program pada folder htdocs, maka Anda dapat
mengaksesnya dengan alamat http://localhost/ atau http://127.0.0.1/ atau
menggunakan nomor IP (Internet Protocol) Anda.

5.2.3

Membuat Folder Kerja Baru

Mungkin dengan banyaknya file dan subfolder yang ada di dalam folder kerja
(htdocs) Anda merasa bingung, oleh karena itu Anda perlu membuat folder
kerja yang khusus untuk proyek-proyek Anda. Caranya adalah dengan
membuat subfolder di dalam folder htdocs, dengan begitu semua file program
web nantinya akan disimpan pada folder baru tersebut.

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver

1. Masuklah pada folder C:\XAMPP\xampp\htdocs atau C:\Program

Files\xampp\htdocs, gunakan Windows Explorer.
2. Buatlah subfolder baru bernama DreamPHP di dalam htdocs, berikut
contohnya:

Gambar 5.2 Membuat folder bernama DreamPHP.

Sekarang, Anda sudah mempunyai folder yang bernama DreamPHP,
nantinya semua folder tersebut akan digunakan untuk menyimpan semua
file hasil latihan.
3. Dengan menggunakan web browser seperti Internet Explorer (IE) atau
Opera atau Firefox, Anda dapat mengakses folder DreamPHP dengan
cara menuliskan alamat berikut:
http://127.0.0.1/DreamPHP/

Setelah alamat /DreamPHP/, Anda dapat melanjutkan dengan

menyebutkan nama file yang akan diakses atau dengan menuliskan
terlebih dahulu subfolder yang ada didalamnya.
Selain alamat di atas, Anda juga dapat menggunakan alamat localhost
seperti contoh berikut:
http://localhost/DreamPHP/

4. Sehingga jika berhasil, Anda akan mendapatkan tampilan seperti gambar

berikut:

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 5.3 Mengakses folder DreamPHP

Jika Anda mendapatkan hasil seperti gambar di atas, maka instalasi PHP Anda
telah berhasil. Sedangkan pada tampilan di atas hanya menunjukkan halaman
kosong, karena Anda belum pernah membuat program sama sekali.

5.2.4

Membuat Skrip PHP Pertama Kali

Ini merupakan skrip PHP pertama Anda selama menggunakan Dreamweaver

sebagai Editor-nya. Anda bebas menggunakan versi berapapun, karena pada
dasarnya sama dan tidak jauh berbeda.
1. Bukalah aplikasi Dreamweaver versi kesayangan Anda, pada latihan ini
kami menggunakan versi 8.
2. Bukalah dokumen baru melalui menu File, pilih menu New. Atau dapat
dipercepat dengan menekan tombol Ctrl + N.

Gambar 5.4 Menggunakan menu New

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver

3. Bukalah halaman baru dengan jenis PHP. Caranya, dari jendela New
Pages, pilih kategori Dynamic Pages, kemudian klik ganda PHP.

Gambar 5.5 Membuka halaman editor untuk PHP

4. Selanjutnya, masuklah pada halaman kode, caranya adalah melalui menu
View, kemudian pilih menu Code. Cara lain adalah dengan mengklik tab
Code yang ada pada bagian kiri atas halaman kerja.

Gambar 5.6 Mengaktifkan halaman kerje bentuk kode

5. Setelah berada pada halaman kode, hapuslah semua tag HTML yang telah
ada sebelumnya, karena pada pembuatan kode PHP Anda tidak
memerlukannya.

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 5.7 Tampilan awal saat Anda masuk halaman kode

6. Setelah semua tags dihapus, maka status halaman kerja Anda menjadi
kosong. Pada halaman kosong tersebut Anda dapat menuliskan skrip PHP
yang akan dibuat, berikut contohnya.

Gambar 5.8 Tampilan halaman kode dengan skrip PHP

7. Pada latihan awal, cobalah untuk membuat program yang dapat
menampilkan informasi PHP, yaitu dengan kode seperti berikut:
<?php
phpinfo();
?>

8. Berikut adalah contoh penulisan kode phpinfo() di dalam editor

Dreamweaver.

Gambar 5.9 Tampilam halaman kode dengan skrip PHP

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver

9. Program sederhana di atas harus Anda simpan di dalam folder DreamPHP

yang sebelumnya telah dibuat. Penyimpanan program ini harus
menggunakan ekstensi (akhiran file) berupa (.php), misalnya dengan nama
infophp.php. Perhatikan caranya seperti tampak gambar berikut:

Gambar 5.10 Menyimpan program

10. Sekarang Anda dapat mencoba melihat hasilnya dengan menjalankan
alamat http://localhost/DreamPHP/, maka Anda akan segera mendapatkan
nama file infophp.php pada Browser.

Gambar 5.11 File program phpinfo.php terlihat dalam browser

11. Untuk mengakses suatu file, klik infophp.php yang terlihat disana, jika
skrip yang dituliskan tidak ada kesalahan, maka browser akan
menampilkan hasil seperti gambar berikut.

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 5.12 Hasil program untuk melihat informasi PHP

5.2.5

Menulis Kode dengan Toolbar PHP

Saat membuat program, untuk menulis beberapa kode PHP dengan cepat dapat
menggunakan Toolbar PHP. Anda dapat mengaktifkan toolbar ini seperti cara
biasa, berikut adalah tampilannya:

Gambar 5.13 Tampilan toolbar PHP

Semua ikon yang ada pada toolbar PHP juga dapat Anda dapatkan melalui
menu Insert PHP Object. Fungsi dari ikon yang ada pada toolbar PHP
dapat dijelaskah pada tabel berikut.
Tabel 5.1 Ikon yang ada pada toolbar PHP
Ikon

Nama
Form
Variabels
URL Variabels
Session
Variabels

Keterangan
Hasil kode <?php $_POST[]; ?>
Hasil kode <?php $_GET[]; ?>
Hasil kode <?php $_SESSION[]; ?>

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver

5.2.6

Hasil kode <?php $_COOKIE[]; ?>

Cookie
Variabels
Include
Require
PHP
Page
Encoding
Code Block
Echo
Comment

Hasil kode <?php include(); ?>

Hasil kode <?php require(); ?>
mb_http_input("iso-8859-1");
mb_http_output("iso-8859-1");
Hasil kode <?php ?>
Hasil kode <?php echo ?>
Hasil kode /* */

If
Else

Hasil kode <?php if ?>

Hasil kode <?php else ?>

Menulis Kode PHP dengan Jendela Bantu

Selain toolbar PHP, Anda juga akan dipermudah dengan adanya jendela bantu
yang didapatkan saat menuliskan kode PHP. Pada jendela bantu, Anda akan
mendapatkan banyak perintah dan fungsi yang dimiliki oleh PHP. Jika tidak
tampil, Anda dapat memanggilnya dengan menekan tombol Ctrl + Space
(spasi) pada keyboard secara bersamaan.

Gambar 5.14 Tampilan jendela bantu PHP

Untuk mendapatkan suatu perintah yang sesuai, Anda dapat memancingnya
dengan menuliskan beberapa karakter awal dari perintah, misalnya mysql_,
kemudian diikuti dengan menekan tombol Ctrl + Space (spasi).

10

5.3

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Dasar Pemrograman PHP

Setelah membaca semua bagian dari subbab sebelumnya, maka saat ini Anda
telah siap untuk lebih jauh mengetahui kode-kode PHP. Pada bagian ini Anda
akan banyak berlatih menuliskan kode PHP, sehingga nantinya dapat menjadi
dasar dari latihan-latihan yang dibahas pada bab berikutnya.

5.3.1

Mempersiapkan Folder Program

Untuk mempermudah Anda dalam belajar, persiapkanlah subfolder untuk

menyimpan dari semua kode latihan yang dibahas pada bab ini, serta bab
selanjutnya. Untuk itu, buatlah subbab bernama Bab5, Bab6, Bab7 dan Bab8
di dalam DreamPHP yang telah dibuat sebelumnya.

Gambar 5.15 Tampilan folder dan subfolder latihan

5.3.2

Dasar Menampilkan Data

PHP memiliki dua perintah dasar untuk menampilkan data ke dalam browser,
yaitu echo dan print. Kedua perintah tersebut memiliki kemampuan sama,
yaitu mampu menampilkan data berupa teks, angka maupun operasi. Sebagai
contoh, saat Anda akan menampilkan teks Haloo dunia...!!! berikut:
<?php
echo "Halooo ... dunia!!!";
?>

Atau :
<?php
print "Halooo ... dunia!!!";
?>

Atau :

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 11

<?= "Halooo ... dunia!!!"; ?>

Pada contoh terakhir di atas adalah cara terakhir yang dapat Anda gunakan
untuk mempersingkat perintah, sehingga sangat efektif jika digunakan untuk
menampilkan suatu data dalam satu baris kode.

Gambar 5.16 Hasil menampilkan data teks ke layar

5.3.3

Membuat Komentar dalam Program

Di dalam blok program, Anda juga dapat menuliskan komentar yang berfungsi
untuk memberi keterangan pada setiap baris perintah. Untuk menulis
komentar, parameter yang digunakan adalah: //, # dan /* */. Berikut adalah
contoh pemakaiannya:
Listing Program Bab5/komentar.php
<?php
// Menampilkan pesan dengan echo
echo "Selamat datang di PHP";
# Menampilkan pesan dengan print
print "Selamat belajar";
/* Tahukah anda?, bahwa dengan PHP Anda
dapat membuat Web dan Aplikasi berbasis Web.*/
?>

Akhir Listing

12

5.3.4

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Menampilkan Data dari Variabel

Saat membuat program, Anda dapat membuat variabel tanpa harus repot-repot
mendeklarasikannya terlebih dahulu. Pengenalan variabel cukup ditandai
dengan parameter dolar ($) sebelum nama variabelnya.
Listing Program Bab5/variabel.php
<?php
$penulis = "BUNAFIT NUGROHO";
$saya = "Sariyanto";
echo "Selamat malam pak $penulis ";
echo "Saya $saya ingin belajar PHP ";
?>

Akhir Listing

Pada contoh di atas, Anda dapat membuat dua variabel, yaitu $penulis dan
$saya. Masing-masing dari kedua variabel memiliki isi teks, dan untuk
mengambil isi datanya dapat dipanggil langsung nama variabelnya.

Gambar 5.17 Hasil menampilkan data dari variabel

5.3.5

Menampilkan Data dari Variabel dan Operasi

Di dalam variabel, Anda dapat menghilangkan tanda petik ganda ( ) jika

nilai datanya berupa angka hidup(bukan teks). Dengan menghilangkan tanda
petik ganda, maka angka yang ada di dalamnya dapat ditampilkan atau dapat
Anda gunakan untuk operasi matematik.

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 13

Listing Program Bab5/var_operator.php

<?php
$nilaia = 4;
$nilaib = 5;
echo "HASIL $nilaia + $nilaib ADALAH = ";
echo $nilaia + $nilaib;
?>

Akhir Listing

Dari contoh program di atas, berikut adalah hasilnya:

Gambar 5.18 Operasi variabel bernilai angka

5.3.6

Gabungan Tag HTML dan Kode PHP

Untuk membuat aplikasi Web dan berbasis Web, Anda tidak dapat
menggunakan kode PHP secara mandiri, atau hanya tag HTML saja. Dalam
pemrogramman web, tag HTML dan kode PHP menyatu menjadi satu.
Listing Program Bab5/php_html.php
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>

14

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

<?php
// Variabel berisi data
$nama = "Bunafit Nugroho";
$sd
= "SDN 1 Labuhan Ratu 1, Way Jepara";
$smp = "SMPN 1, Way Jepara, Lampung Timur";
$smu = "SMU Teladan, Way Jepara, Lampung Timur";
$ssatu= "STMIK AKAKOM Jogjakarta";
// Menampilkan data
echo "<b> TENTANG SAYA </b><br>";
echo "Nama saya adalah : $nama <br>";
echo "Asal SD saya adalah: $sd <br>";
echo "Asal SMP saya adalah: $smp <br>";
echo "Asal SMA saya adalah: $smu <br>";
echo "Lulus S1 dari $ssatu";
?>
</body>
</html>

Akhir Listing

Dengan contoh program di atas dapat dibuktikan bahwa kode HTML tidak
dapat Anda tinggalkan dalam program PHP. Setiap bagian dari perintah PHP
masih memerlukan tags HTML untuk memoles tampilannya. Seperti
contohnya perintah <br> yang digunakan untuk berganti baris, dan perintah
<b> untuk membuat huruf tebal. Berikut adalah contoh hasil skrip di atas:

Gambar 5.19 Hasil kolaborasi PHP dan HTML

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 15

5.4

Register Global PHP

Register Global merupakan teknik pembacaan variabel yang dikenali oleh

interpreter PHP. Secara standar, PHP4 terinstal dengan Register Global
berstatus OFF, sedangkan pada PHP 5 dengan Register Global ON.
Untuk mengaktifkan atau mematikannya, Anda dapat membuka file php.ini
yang ada di dalam sub folder aplikasi PHP, gunakan Notepad untuk
membukanya. Kemudian hilangkan tanda titik koma yang ada disetiap setting.
Berikut adalah contohnya:
Register Global Mati :
; register_globals = off

Register Global Aktif :

register_globals = on

Jika Anda kesulitan dalam memperoleh parameter Register Global, Anda

dapat melakukan pencarian dengan fasilitas Find yang dimiliki NotePad.
Dengan mengaktifkan Register Global, maka sekarang setiap membaca data
yang tersimpan dalam variabel, Anda harus mendefinisikan terlebih dahulu
dengan parameter seperti tabel berikut:
Tabel 5.2 Parameter membaca variabel
Parameter
Fungsi
$_COOKIE['variabel'];
Membaca variabel Cookie
$_FILES['file'];
Membaca data File Field (objek form)
$_GET['variabell'];
Membaca variabel URL
$_POST['variabel'];
Membaca variabel form
$_REQUEST['variabel']; Membaca permintaan
$_SESSION['varsession']; Membaca variabel Session
$_SERVER['option];
Membaca data Server
Dari contoh parameter pembaca variabel di atas, jika Anda ingin membaca
data dari formulir masukan, maka perintah pendeklarasiannya adalah:

16

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$TxtNama
= $_POST['TxtNama'];
$TxtAlamat = $_POST['TxtAlamat'];
$TxtTelepon = $_POST['TxtTelepon'];

Sedangkan jika ingin membaca data dari variabel yang dikirimkan oleh URL,
maka perintah deklarasinya adalah:
$page = $_GET['page'];
$nomor = $_GET['nomor'];

Dari parameter $_POST dan $_GET, Anda dapat menggantinya dengan

parameter $_REQUEST. Parameter ini dapat terbaca pada semua versi PHP,
termasuk pada setting ON dan OFF dari REGISTER GLOBAL. Sehingga
penulisannya adalah:
$page
$nomor
$TxtNama
$TxtAlamat
$TxtTelepon

=
=
=
=
=

$_REQUEST['page'];
$_REQUEST['nomor'];
$_REQUEST['TxtNama'];
$_REQUEST['TxtAlamat'];
$_REQUEST['TxtTelepon'];

Catatan:
Teknik pendefinisian variabel di atas tidak berlaku pada
variabel hasil buatan sendiri, yaitu yang berasal dari halaman
yang sama. Misalnya :
$angka = 4;
$hasil = 2 * $angka;
echo Hasilnya adalah : $hasil ;

5.5

Struktur Kontrol Program

Pada bagian pertama ini Anda akan belajar struktur kontrol program, termasuk
diantaranya adalah IF, IF-ELSE dan IF-ELSE-IF. Dengan ketiga perintah
ini, Anda dapat mengontrol berjalannya program.

5.5.1

Menggunakan IF

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 17

Parameter IF digunakan untuk memeriksa suatu kondisi dengan satu pilihan

saja. Berikut adalah sintaks dasarnya:
Sintaks :
If(kondisi) {
perintah
}

Dari sintaks di atas, jika kondisi terpenuhi, maka perintah akan dijalankan, dan
jika kondisi tidak terpenuhi perintah tidak akan dijalankan.
Listing Program Bab5/if.php
<html>
<head>
<title>Kontrol IF</title>
</head>
<body>
<?php
$nilai = 56;
if ($nilai > 50) {
echo "Anda lulus, selamat yah!!";
}
?>
</body>
</html>

Akhir Listing

Dari contoh program di atas, nilai pada variabel $nilai adalah 56. Pada operasi
kondisi Anda melakukan memeriksaan, jika $nilai lebih dari (>) dari 50
terpenuhi perintah di dalam kalang dikerjakan.

18

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 5.20 Hasil penggunakan parameter IF

Untuk lebih mudah dalam menulis kode, parameter IF dapat disederhanakan
dalam satu baris perintah. Berikut caranya:
<?php
$nilai = 56;
if ($nilai > 50) echo "Anda lulus";
?>

5.5.2

Menggunakan IF-ELSE

Parameter IF-ELSE digunakan untuk membuat kondisi dengan dua pilihan,

yaitu jika pilihan benar dan pilihan tidak benar, sehingga hasil yang didapatkan
juga berjumlah dua. Berikut sintaksnya:
Sintaks :
If(kondisi) {
PerintahB
}
Else {
PerintahS
}

Dari sintaks di atas, jika kondisi bernilai benar, maka parameter PerintahB
akan dikerjakan. Sedangkan jika pada kondisi bernilai salah, maka pada
parameter PerintahS yang dikerjakan.

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 19

Listing Program Bab5/if-else.php

<html>
<head>
<title>Kontrol IF-ELSE</title>
</head>
<body>
<?php
$kelamin = "W";
if ($kelamin == "P") {
echo "Anda PRIA";
}
else {
echo "Anda WANITA";
}
?>
</body>
</html>

Akhir Listing

Pada contoh di atas, Anda memiliki variabel $kelamin dengan nilai W. Pada
pernyataan kondisi, jika $kelamin benar memiliki nilai P, maka hasilnya
adalah Anda PRIA. Sedangkan jika kondisi tidak terpenuhi ($kelamin tidak
bernilai P), maka hasilnya adalah Anda WANITA.

Gambar 5.21 Hasil penggunaan paramter if-else

20

5.5.3

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Menggunakan IF-ELSE-IF

Parameter IF-ELSE-IF digunakan untuk membuat kondisi dengan banyak

pilihan, yaitu jika pilihan pertama bernilai salah, maka program akan
melakukan pengecekkan pada pilihan kedua, ketiga dan seterusnya sampai
pilihan terakhir. Berikut sintaksnya:
Sintaks :
If(kondisi) {
PerintahA
}
elseif {
PerintahB
}
else{
PerintahS
}

Pada latihan ini, Anda akan belajar menggunakan bentuk pengkondisian pada
model penilaian mata kuliah. Supaya lebih gampang, berikut adalah tabel
aturan penilaiannya:
Tabel 5.3 Range aturan penilaian mata kuliah
Range
Nilai
80 100
Sangat Baik
60 80
Baik
50 60
Cukup
30 50
Kurang
1 30
Sangat buruk
Dengan aturan yang ada pada tabel, karena jumlah pilihannya lebih dari dua,
maka Anda harus menggunakan paramter IF-ELSE-IF. Berikut adalah contoh
implementasinya:
Listing Program Bab5/if-else-if.php
<html>
<head>
<title>Kontrol IF-ELSE-IF</title>
</head>

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 21

<body>
<?php
$nilai = 50;
if ($nilai >= 80) {
echo "NILAI ANDA
}
elseif ($nilai >= 60)
echo "NILAI ANDA
}
elseif ($nilai >= 50)
echo "NILAI ANDA
}
elseif ($nilai >= 30)
echo "NILAI ANDA
}
else {
echo "NILAI ANDA
}
?>
</body>
</html>

: SANGAT BAIK";
{
: BAIK";
{
: CUKUP";
{
: KURANG";

: SANGAT BURUK";

Akhir Listing

Dari contoh program di atas, jika Anda memiliki nilai 50, maka akan masuk
pada range 50-60, yaitu bernilai CUKUP. Berikut adalah hasil dari skrip
program di atas:

Gambar 5.22 Hasil penggunaan program IF-ELSE-IF

22

5.5.4

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Menggunakan SWITCH

Pada keperluan tertentu, parameter IF-ELSE-IF dapat digantikan dengan

SWITCH. Dengan menggunakan aturan seperti pada Tabel 5.1, maka
penulisan kodenya dapat diubah menjadi:
Listing Program Bab5/switch.php
<html>
<head>
<title>Kontrol SWITCH</title>
</head>
<body>
<?php
$nilai = 15;
echo "Nilai Angka : $nilai <br>";
switch ($nilai) {
case $nilai >= 80 :
echo "NILAI ANDA : SANGAT BAIK";
break;
case $nilai >= 60 :
echo "NILAI ANDA : BAIK";
break;
case $nilai >= 50 :
echo "NILAI ANDA : CUKUP";
break;
case $nilai > 30 :
echo "NILAI ANDA : KURANG";
break;
default :
echo "NILAI ANDA : SANGAT BURUK";
}
?>
</body>
</html>

Akhir Listing

Dari contoh program di atas, berikut adalah hasilnya:

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 23

Gambar 5.23 Hasil program menggunakan SWITCH

5.6

Struktur Perulangan Program

Perulangan program di dalam bahasa pemrograman disebut dengan looping,

yaitu teknik mengulangi suatu perintah supaya dapat dijalankan terus sampai
batas yang Anda tentukan. Untuk membuatnya, Anda dapat menggunakan
perintah WHILE maupun FOR.

6.3.1

Menggunakan WHILE

Parameter WHILE akan mengulangi suatu proses selama kondisinya bernilai

benar, sedangkan jika menemukan kondisi yang bernilai salah maka proses
perulangan berhenti. Berikut adalah contohnya:
Listing Program Bab5/while.php
<html>
<head>
<title>Kontrol WHILE</title>
</head>
<body>
<?php
echo "MENGGUNAKAN WHILE<br>";
$angka = 1;
while ($angka <= 12) {
echo "Angka $angka <br>";
$angka++;
}
?>

24

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

</body>
</html>

Akhir Listing

Pada perintah di dalam program di atas, Anda membuat perulangan angka

yang dimulai dari $angka bernilai 1, dan diulangi sampai nilai 12 sebagai
batasnya. Berikut adalah contoh hasilnya:

Gambar 5.24 Hasil program menggunakan WHILE

Dengan menggunakan logika yang sama, untuk mendapatkan nilai angka dari
1 sampai 12 dapat dibuat dengan program berikut:
$angka = 0;
while ($angka < 12) {
$angka++;
echo "Angka $angka <br>";
}

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 25

6.3.2

Menggunakan FOR

Parameter FOR juga memiliki fungsi yang sama dengan WHILE, yaitu dapat
Anda gunakan untuk mengulangi suatu perintah sebelum kondisi bernilai
benar. Berikut adalah contoh programnya:
Listing Program Bab5/for.php
<html>
<head>
<title>Kontrol FOR</title>
</head>
<body>
<?php
echo "MENGGUNAKAN FOR<br>";
for ($angka=1; $angka <= 12; $angka++) {
echo "Angka $angka <br>";
}
?>
</body>
</html>

Akhir Listing

Dari program di atas, jika dijalankan akan mendapatkan nilai mulai dari 1
sampai dengan 12.

5.7

Latihan Pemrograman PHP

Setelah Anda selesai mempelajari parameter kontrol program dan perulangan,

maka Anda perlu mengasah kemampuan tersebut dengan mempelajari
beberapa latihan yang dibahas pada subbab ini.

5.7.1

Membuat Pilihan Tanggal Pada List/Menu

Pada latihan ini, Anda akan belajar membuat perulangan angka dari mulai 1
sampai dengan 31, fungsinya adalah untuk data tanggal. Setiap nilai data hasil
perulangan akan dimasukkan pada objek List/Menu.
1. Bukalah dokumen baru dari Dreamweaver kesayangan Anda.

26

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

2. Dari toolbar Forms, klik ikon List/Menu (

objek ComboBox ke dalam dokumen.

) untuk menambahkan

Gambar 5.25 Hasil menambahkan objek List/Menu

3. Untuk nilai standar, Anda dapat memasukkan label [ TGL ] dengan nilai
NULL dari jendela List Values. Caranya, klik kanan pada objek
List/Menu, kemudian pilih submenu List Values.

Gambar 5.26 Membuat nilai default pada List/Menu

4. Di dalam blok kode List/Menu, untuk memasukkan data perulangan dari
angka 1 sampai dengan 31 dapat ditulis dengan kode berikut:
for ($tgl=1; $tgl <=31; $tgl++) {
echo "<option value='$tgl'> $tgl </option>";
}

5. Dari contoh skrip di atas, berikut adalah tampilan visualnya:

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 27

Gambar 5.27 Tampilan visual dari halaman kode

6. Untuk mempermudah dalam belajar, Anda dapat melihat kode program
lengkapnya seperti listing berikut:
Listing Program Bab5/LMTanggal.php
<html>
<head>
<title>Tanggalan</title>
</head>
<body>
Pilih Tanggal :
<select name="CmbTgl">
<option value="NOLL">[ TGL ]</option>
<?php
for ($tgl=1; $tgl <=31; $tgl++) {
echo "<option value='$tgl'> $tgl </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

28

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

7. Setelah Anda membuat seperti kode program di atas, simpanlah dengan

nama LMTanggal.php. Tempatkan file penyimpanan pada folder Bab6
yang telah dibuat sebelumnya.

Gambar 5.28 Tampilan program dari halaman desain

8. Berikut adalah hasil program setelah dijalankan.

Gambar 5.29 Data dalam List/Menu sebagai input tanggal

5.7.2

Membuat Pilihan Tanggal Maksimal Hari

Pada latihan ini, Anda akan belajar memodifikasi skrip program yang telah
dibuat sebelumnya. Tujuannya adalah, supaya angka maksimal yang
ditampilkan tidak selalu 31, akan tetapi menyesuaikan tanggal maksimal pada
bulan yang berjalan (saat ini). Untuk membuatnya, Anda dapat menggunakan
fungsi date(t) untuk mendapatkan nilai maksimal bulan, berikut contohnya:
Listing Program Bab5/LMTanggal2.php
<html>
<head>

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 29

<title>Tanggalan</title>
</head>
<body>
Pilih Tanggal :
<select name="CmbTgl">
<option value="NOLL">[ TGL ]</option>
<?php
$maks = date('t');
for ($tgl=1; $tgl <= $maks; $tgl++) {
echo "<option value='$tgl'> $tgl </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

5.7.3

Membuat Pilihan Tanggal Terpilih Hari ini

Pada latihan ini, Anda akan belajar memodifikasi skrip program yang telah
dibuat sebelumnya. Tujuan adalah supaya nilai defaultnya adalah angka yang
sesuai dengan tanggal hari ini. Untuk itu, Anda dapat menggunakan parameter
kondisi dan melakukan perbandingan nilai dengan fungsi date(d), fungsi
tersebut akan menghasilkan nilai tanggal hari ini. Berikut adalah
perubahannya:
Listing Program Bab5/LMTanggal3.php
<html>
<head>
<title>Tanggalan</title>
</head>
<body>
Pilih Tanggal :
<select name="CmbTgl">
<option value="NOLL">[ TGL ]</option>
<?php
$sekarang = date('d');
for ($tgl=1; $tgl <=31; $tgl++) {
if ($tgl == $sekarang) {
$pilih = "selected";
}
else {

30

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$pilih = "";
}
echo "<option value='$tgl' $pilih> $tgl </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

Dari skrip program di atas, berikut adalah tampilan hasilnya:

Gambar 5.30 Hasil saat dijalankan pada tanggal 5

5.7.4

Membuat Pilihan Tanggal Dua Digit

Pada latihan ini, Anda akan belajar memodifikasi skrip program

LMTanggal1.php yang telah dibuat sebelumnya. Tujuannya adalah membuat
dua digit pada semua angka dari mulai 1 sampai dengan 9, sehingga semua
tanggal akan ditampilkan dalam 2 digit. Berikut adalah perubahan skripnya:
Listing Program Bab5/LMTanggal4.php
<html>
<head>
<title>Tanggalan</title>
</head>
<body>
Pilih Tanggal :

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 31

<select name="CmbTgl">
<option value="NOLL">[ TGL ]</option>
<?php
for ($tgl=1; $tgl <=31; $tgl++) {
if (strlen($tgl) == 1 ) {
$tanggal = "0".$tgl;
}
else {
$tanggal = $tgl;
}
echo "<option value='$tanggal'> $tanggal </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

Dari contoh perubahan skrip di atas, berikut adalah hasilnya:

Gambar 5.31 Semua nilai tanggal ditulis dalam 2 digit

5.7.5

Membuat Pilihan Tahun dalam List/Menu

Pada latihan ini Anda akan belajar membuat daftar tahun ke dalam objek
List/Menu. Pada dasarnya untuk membuat masukan data tahun hampir sama
dengan masukan tanggal, yang membedakan hanyalah nilai angkanya.

32

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Listing Program Bab5/LMTahun.php

<html>
<head>
<title>Tahun</title>
</head>
<body>
Pilih Tanggal :
<select name="CmbThn">
<option value="NOLL">[ THN ]</option>
<?php
for ($thn=2005; $thn <= 2010; $thn++) {
echo "<option value='$thn'> $thn </option>";
}
?>
</select>
</body>
</html

Akhir Listing

Dari contoh program di atas, berikut adalah hasilnya:

Gambar 5.32 Hasil membuat masukan data tahun

5.7.6

Membuat Pilihan Tahun Minimal dan Maksimal

Pada latihan ini, Anda akan belajar memodifikasi skrip program LMTahun.php
yang telah dibuat sebelumnya. Tujuannya adalah membuat batasan pada nilai
minimal dan maksimal tahun. Sebagai patokan, Anda akan menggunakan nilai
5 tahun sebelum tahun ini, dan sampai dengan 5 tahun setelah saat ini.

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 33

Listing Program Bab5/LMTahun2.php

<html>
<head>
<title>Tahun</title>
</head>
<body>
Pilih Tahun :
<select name="CmbThn">
<option value="NOLL">[ THN ]</option>
<?php
$thn_min = date('Y') - 5;
$thn_max = date('Y') + 5;
for ($thn=$thn_min; $thn <= $thn_max; $thn++) {
echo "<option value='$thn'> $thn </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

5.7.7

Membuat Pilihan Tahun Terpilih Saat ini

Pada latihan ini, Anda akan belajar memodifikasi skrip program LMTahun.php
yang telah dibuat sebelumnya. Tujuannya adalah untuk membuat nilai tahun
terpilih (mengubah nilai default) sesuai dengan tahun yang berjalan pada saat
program dijalankan. Untuk mendapatkan nilai tahun saat ini, anda dapat
menggunakan fungsi date(Y). Berikut caranya:
Listing Program Bab5/LMTahun3.php
<html>
<head>
<title>Tahun</title>
</head>
<body>
Pilih Tahun :
<select name="CmbThn">
<option value="NOLL">[ THN ]</option>
<?php
$sekarang = date('Y');

34

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

for ($thn=2005; $thn <= 2010; $thn++) {

if ($thn == $sekarang) {
$pilih = "selected";
}
else {
$pilih = "";
}
echo "<option value='$thn' $pilih> $thn </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

Dari contoh program di atas, berikut adalah hasilnya:

Gambar 5.33 Nilai terpilih saat dijalankan tahun 2008

5.7.8

Membuat Pilihan Bulan Pada List/Menu

Pada latihan ini Anda akan belajar membuat objek masukan berupa pilihan
bulan menggunakan objek List/Menu. Pada dasarnya teknik penulisan
skripnya sama saja dengan data tanggal dan tahun, hanya saja pada kasus ini
Anda melakukan perulangan dari angka 1 sampai dengan 12.
Listing Program Bab5/LMBulan.php
<html>
<head>
<title>Nama Bulan</title>

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 35

</head>
<body>
Pilih Bulan :
<select name="CmbBln">
<option value="NOLL">[ BULAN ]</option>
<?php
for ($bln=0; $bln < 12; $bln++) {
echo "<option value='$bln'> $bulan[$bln] </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

5.7.9

Membuat Pilihan Nama Bulan Pada List/Menu

Pada latihan ini, Anda akan belajar memodifikasi skrip program LMBulan.php
yang telah dibuat sebelumnya. Pada modifikasi ini, Anda akan menggunakan
data array untuk menyimpan informasi nama bulan (Janurai, Februari, ...,
Desember), sehingga informasi bulan yang ditampilkan tidak lagi berupa
angka. Berikut adalah contohnya:
Listing Program Bab5/LMBulan2.php
<html>
<head>
<title>Nama Bulan</title>
</head>
<body>
Pilih Bulan :
<select name="CmbBln">
<option value="NOLL">[ BULAN ]</option>
<?php
$bulan
= array();
$bulan[] = "Januri";
$bulan[] = "Februari";
$bulan[] = "Maret";
$bulan[] = "April";
$bulan[] = "Mei";
$bulan[] = "Juni";
$bulan[] = "Juli";
$bulan[] = "Agustus";

36

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$bulan[]
$bulan[]
$bulan[]
$bulan[]

=
=
=
=

"September";
"Oktober";
"November";
"Desember";

for ($bln=0; $bln < 12; $bln++) {

echo "<option value='$bln'> $bulan[$bln] </option>";
}
?>
</select>
</body>
</html>

Akhir Listing

Pada contoh program di atas, daftar nama-nama bulan didefinisikan ke dalam

variabel array bernama $bulan[]. Karena kita tidak mendefinisikan nilai
indeks-nya, maka secara otomatis akan terurut mulai dari 0 sampai dengan 11.
Berikut analoginya:
$bulan[0] = "Januri";
$bulan[1] = "Februari";
$bulan[2] = "Maret";
....
$bulan[11] = "Desember";

Dengan data array tersebut, Anda dapat menampilkannya dalam kalang

perulangan, sehingga perintahnya cukup menggunakan $bulan[$bln],
parameter $bln adalah nilai yang didapat dari perulangan.

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 37

Gambar 5.34 Hasil mengubah nilai angka menjadi nama bulan

5.7.10 Membuat Pilihan Nama Bulan Terpilih

Pada latihan ini, Anda akan belajar memodifikasi skrip program
LMBulan2.php yang telah dibuat sebelumnya. Tujuannya adalah untuk
menambah kode terpilih pada bulan yang berjalan saat ini. Pada dasarnya sama
dengan data tanggal dan tahun, hanya saja fungsi yang akan digunakan kali ini
adalah date(m). Berikut adalah hasil perubahannya:
Listing Program Bab5/LMBulan3.php
<html>
<head>
<title>Nama Bulan</title>
</head>
<body>
Pilih Bulan :
<select name="CmbBln">
<option value="NOLL">[ BULAN ]</option>
<?php
$bulan
= array();

38

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]
$bulan[]

=
=
=
=
=
=
=
=
=
=
=
=

"Januri";
"Februari";
"Maret";
"April";
"Mei";
"Juni";
"Juli";
"Agustus";
"September";
"Oktober";
"November";
"Desember";

$terpilih = date('m');
for ($bln=0; $bln < 12; $bln++) {
if ($bln == $terpilih-1) {
$pilih = "selected";
}
else {
$pilih = "";
}
echo "<option value='$bln' $pilih> $bulan[$bln]
</option>";
}
?>
</select>
</body>
</html>

Akhir Listing

Dari contoh program di atas, berkut adalah hasil setelah dijalankan:

Gambar 5.35 Nilai terpilih saat dijalankan pada bulan Februari

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 39

oooOooo

Langkah

6
Menguasai Pembuatan Program
cPanel
6.1

Pendahuluan

cPanel dapat diartikan sebagai Control Panel, yaitu aplikasi utama yang
dikhususkan untuk Administrator atau pengelola dari aplikasi Web. Sebagai
latihan, Anda akan menggunakan data buku. Anda akan belajar bagaimana
membuat program masukan data, membuat program tampil data, membuat
program hapus dan membuat program ubah data buku.

6.2

Mempersiapkan Database dan Koneksi

Pada bagian pertama, sebelum berlatih membuat program masukan, Anda

harus mempersiapkan database dan tabelnya terlebih dahulu. Pada latihan bab
ini, Anda akan menggunakan database phpdreamdb yang didalamnya
terdapat tabel databuku.

6.2.1

Membuat Database dan Tabel

Database dan tabel merupakan objek penting yang perlu ada dalam membuat
aplikasi berbasis database. Berikut adalah langkah untuk mempersiapkan
kebutuhan database dan tabel pada bab ini.
1. Masuklah pada database MySQL,
phpdreamdb dengan perintah berikut.

kemudian

buatlah

database

CREATE DATABASE phpdreamdb;

2. Setelah database selesai dibuat, aktifkan atau masuklah pada database

phpdreamdb dengan perintah berikut.
USE phpdreamdb;

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

3. Sekarang Anda dapat membuat tabel di dalam database aktif, tabel yang
diperlukan saat ini adalah databuku. Berikut perintahnya:
CREATE TABLE databuku (
kd_buku char(5) NOT NULL,
judul varchar(150) NOT NULL,
penerbit varchar(100) NOT NULL,
jumlah int(2) NOT NULL,
PRIMARY KEY (kd_buku)
);

4. Setelah tabel selesai dibuat, Anda dapat memastikan keberadaan tabel

databuku dengan menuliskan perintah SHOW TABLES;.

6.2.2

Membuat Koneksi Database MySQL

Untuk dapat membuat program berbasis database, maka Anda harus membuat
file koneksi yang berfungsi menghubungkan aplikasi dengan database
MySQL. Berikut adalah skrip yang perlu Anda buat.
1. Masuklah pada editor Dreamweaver kesayangan Anda, kemudian buatlah
halaman baru dengan tipe PHP.
2. Masuklah pada halaman kode (menu View Code), hapuslah semua
kode standar yang ada disana.
3. Tuliskan listing program berikut.
Listing Program Bab6/inc.koneksidb.php
<?PHP
$db_host
$db_user
$db_pass
$db_data

=
=
=
=

"localhost";
"root";
"smartsel";
"phpdreamdb";

$koneksi = mysql_connect($db_host, $db_user, $db_pass)

or die ("Koneksi gagal".mysql_error());
mysql_select_db($db_data, $koneksi)
or die ("Baca DB gagal".mysql_error());
?>

Langkah 6 : Menguasai Pembuatan Program cPanel

Akhir Listing

4. Simpanlah menggunakan nama inc.koneksidb.php.

Penjelasan Kode :
Dari listing program inc.koneksidb.php di atas, kemungkinan dari pembaca
masih ada yang belum paham. Berikut adalah penjelasan setiap kode penting
yang digunakan:
Kode :
$db_host
$db_user
$db_pass
$db_data

=
=
=
=

"localhost";
"root";
"smartsel";
"phpdreamdb";

Digunakan untuk membuat nilai standar saat koneksi, pada variabel

$db_user dan $db_pass Anda dapat menggantinya dengan user dan
password yang sesuai dengan MySQL komputer.
Pada setting standar, Anda dapat mengosongkan nilai pada variabel
$db_user dan $db_pass. Sehingga bentuk setting-nya tampak seperti
berikut:
$db_host
$db_user
$db_pass
$db_data

=
=
=
=

"localhost";
" ";
" ";
"phpdreamdb";

=
=
=
=

"localhost";
"root";
" ";
"phpdreamdb";

atau
$db_host
$db_user
$db_pass
$db_data

Kode :
$koneksi = mysql_connect($db_host, $db_user, $db_pass)
or die ("Koneksi gagal".mysql_error());

Digunakan untuk menghubungkan dengan MySQL server, yaitu

menggunakan host = localhost, user = root dan password = smartsel.

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Parameter or die dalam perintah di atas menyatakan jika gagal,

sehingga jika perintah SQL yang dijalankan gagal, maka peryataan error
akan ditampilkan.
Kemudian parameter mysql_error() akan menampilkan pesan kesalahan
asli yang didapatkan dari Server MySQL.
Kode :
mysql_select_db($db_data, $koneksi)
or die ("Baca DB gagal".mysql_error());

Setelah berhasil membuka hubungan dengan server MySQL, perintah di

atas berguna untuk mengaktifkan database. Dalam hal ini, database yang
dibuka adalah phpdreamdb.

6.3

Membuat Program Masukan Data

Setelah database dan tabel selesai dibuat, Anda dapat melanjutkan pelajaran
pada subbab ini, yaitu membuat program masukan data buku. Pada latihan
nanti, Anda akan diajarkan membuat formulir masukan dan program
penyimpan ke dalam tabel, berikut pembahasan lengkapnya.

6.3.1

Mendesain Formulir Masukan Data

Untuk membuat program masukan data, langkah pertama yang harus

dilakukan adalah mendesain formulir. Halaman program ini disimpan dengan
nama BukuTambah.php, yaitu berisi objek form untuk menuliskan data buku.
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (

) pada halaman kerja.

Gambar 6.1 Menambahkan formulir ke dalam halaman

Langkah 6 : Menguasai Pembuatan Program cPanel

3. Masukkan alamat di dalam kolom Action yang ada pada jendela

Properties, jika belum muncul klik garis merah ( ) atau klik ikon Form
( ) sekali lagi.

Gambar 6.2 Menentukan program penyimpan data

4. Pastikan kursor berada di dalam kalang objek formulir (garis putus
merah), sekarang tambahkan objek tabel (

) dengan ketentuan berikut.

Gambar 6.3 Desain tabel untuk membuat formulir masukan

5. Berikut adalah tampilan awal saat tabel berhasil ditambahkan di dalam
kalang objek form.

Gambar 6.4 Tampilan awal tabel di dalam formulir

6. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan
objek formulir sesuai data buku yang akan dimasuki. Berikut contohnya:

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.5 Desain awal formulir masukan data buku

7. Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut.
Tabel 6.1 Pengaturan properti formulir masukan data buku
Komponen
Form
Text Field1

Hidden Field
Text Field2

Text Field3

Text Field4

Button 1

Properti
Action
TextField Name
Char With
Max Char
Keterangan
Name
TextField Name
Char With
Max Char
Keterangan
TextField Name
Char With
Max Char
Keterangan
TextField Name
Char With
Max Char
Keterangan
Label
Action

Nilai
BukuTambahSim.php
TxtKode
6
5
Kode buku
TxtKodeH
TxtJudul
40
150
Judul buku
TxtPenerbit
40
100
Penerbit
TxtJumlah
4
2
Jumlah
Simpan
Submit Form

Langkah 6 : Menguasai Pembuatan Program cPanel

8. Setelah desain formulir selesai dibuat, simpanlah halaman program di atas

menggunakan nama BukuTambah.php.
9. Berikut adalah kode lengkap yang didapat dari desain form masukan di
atas, kode yang dihasilkan kurang lebih akan tampak seperti berikut.
Listing Program Bab6/BukuTambah.php
<html>
<head>
<title>Formulir Tambah Data Buku</title>
</head>
<body>
<form action="BukuTambahSim.php" method="post" name="form1"
target="_self">
<table width="450" border="1" cellspacing="1"
cellpadding="2">
<tr>
<td colspan="2"><strong>MASUKAN DATA BUKU</strong></td>
</tr>
<tr>
<td width="108">Kode Buku </td>
<td width="325"><input name="TxtKode" type="text"
size="6" maxlength="5">
</td>
</tr>
<tr>
<td>Judul Buku </td>
<td><input name="TxtJudul" type="text" size="40"
maxlength="150"></td>
</tr>
<tr>
<td>Penerbit</td>
<td><input name="TxtPenerbit" type="text" size="40"
maxlength="100"></td>
</tr>
<tr>
<td>Jumlah</td>
<td><input name="TxtJumlah" type="text" size="4"
maxlength="2"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Simpan">
</td>
</tr>

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

</table>
</form>
</body>
</html>

Akhir Listing

10. Berikuta dalah tampilan setelah dijalankan dari browser, yaitu dari alamat
http://localhost/DreamPHP/Bab6/BukuTambah.php.

Gambar 6.6 Tampilan formulir masukan dari browser

6.3.2

Membuat Program Simpan Data Buku

Dari program utama masukan data yang telah dibuat sebelumnya, pada
formulir diarahkan (Action) pada halaman BukuTambahSim.php. Pada bagian
ini Anda akan membuat program tersebut, yaitu berisi kode untuk menyimpan
data ke dalam database.
1. Masih menggunakan Editor Dreamweaver kesayangan Anda.
2. Bukalah halaman baru menggunakan tipe Dynamic Page PHP.
3. Masuklah pada halaman kode (dari menu View Code), kemudian
hapuslah semua kode HTML standar yang ada.

Langkah 6 : Menguasai Pembuatan Program cPanel

4. Mulailah menuliskan kode PHP pembuka dan penutup, berikut adalah

contohnya:

Gambar 6.7 Halaman kode untuk membuat program simpan

5. Supaya lebih mudah, Anda dapat menuliskan kode program simpan secara
lengkap seperti listing berikut.
Listing Program Bab6/BukuTambahSim.php
<?php
include "inc.koneksidb.php";
# Baca variabel Form (If Register Global ON)
$TxtKode
= $_POST['TxtKode'];
$TxtJudul
= $_POST['TxtJudul'];
$TxtPenerbit= $_POST['TxtPenerbit'];
$TxtJumlah = $_POST['TxtJumlah'];
# Validasi Form
if (trim($TxtKode)=="") {
echo "Kode masih kosong, ulangi kembali";
}
elseif (trim($TxtJudul)=="") {
echo "Judul masih kosong, ulangi kembali";
}
elseif (trim($TxtPenerbit)=="") {
echo "Penerbit masih kosong, ulangi kembali";
}
elseif (trim($TxtJumlah)=="") {
echo "Jumlah masih kosong, ulangi kembali";
}
else {
$sql = "INSERT INTO databuku SET
kd_buku ='$TxtKode',
judul ='$TxtJudul',
penerbit='$TxtPenerbit',
jumlah ='$TxtJumlah'";

10

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
echo "Berhasil menyimpan judul: <b>$TxtJudul</b>";
include "BukuTambah.php";
}
?>

Akhir Listing

6. Kemudian simpan dengan nama BukuTambahSim.php.

Penjelasan Kode :
Dari listing program BukuTambahSim.php di atas, kemungkinan dari
pembaca masih ada yang belum paham. Berikut adalah penjelasan setiap
kode penting yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$TxtKode
$TxtJudul
$TxtPenerbit
$TxtJumlah

=
=
=
=

$_POST['TxtKode'];
$_POST['TxtJudul'];
$_POST['TxtPenerbit'];
$_POST['TxtJumlah'];

Digunakan untuk membaca variabel yang dikirimkan dari Form..

Teknik ini harus dilakukan jika pada php.ini disetting ON pada
REGISTER GLOBAL. Jika tidak (OFF), maka ke-4 baris kode di atas
dapat dihapus.
Kode :
if (trim($TxtJudul)=="") {
echo "Judul masih kosong, ulangi kembali";
}

Langkah 6 : Menguasai Pembuatan Program cPanel

11

Digunakan untuk memeriksa (mem-validasi) keberadaan data di dalam

kolom masukan kode buku. Jika datanya masih kosong, maka pesan
error akan ditampilkan.
Kode :
elseif (trim($TxtJudul)=="") {
echo "Judul masih kosong, ulangi kembali";
}

Digunakan untuk memeriksa(mem-validasi) keberadaan data di dalam

kolom masukan judul buku. Jika datanya masih kosong, maka pesan
error akan ditampilkan.
Kode :
elseif (trim($TxtPenerbit)=="") {
echo "Penerbit masih kosong, ulangi kembali";
}

Digunakan untuk memeriksa kolom masukan data penerbit, jika masih

kosong, maka program akan menampilkan pesan error. Kode validasi di
atas akan dilakukan setelah data kode dan judul dinyatakan tidak
kosong.
Kode :
elseif (trim($TxtJumlah)=="") {
echo "Jumlah masih kosong, ulangi kembali";
}

Digunakan untuk memeriksa kolom masukkan data jumlah buku, jika

masih kosong, maka program akan menampilkan pesan error. Kode di
atas akan dikerjakan setelah semua data terisi, atau semua validasi
sebelumnya telah sukses dilewati.
Kode :
$sql = "INSERT INTO databuku SET
kd_buku ='$TxtKode',
judul ='$TxtJudul',
penerbit='$TxtPenerbit',

12

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

jumlah

='$TxtJumlah'";

Adalah perintah SQL yang berguna untuk menyimpan data buku yang
dimasukkan lewat formulir. Selain teknik di atas, Anda juga dapat
menggunakan teknik SQL berikut:
$sql = "INSERT INTO databuku
(kd_buku,judul,penerbit,jumlah)
VALUES ('$TxtKode','$TxtJudul',
'$TxtPenerbit','$TxtJumlah')";

Kode :
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());

Digunakan untuk menjalankan perintah SQL ($sql) yang ada di atasnya,

sehingga data yang ada di dalam form akan disimpan ke dalam
database.
Parameter or die dalam perintah di atas menyatakan jika gagal,
sehingga jika perintah SQL yang dijalankan gagal, maka pernyataan
error akan ditampilkan.
Kemudian parameter mysql_error() akan menampilkan pesan kesalahan
asli yang didapatkan dari Server MySQL.
Kode :
echo "Berhasil menyimpan judul: <b>$TxtJudul</b>";
include "BukuTambah.php";

Setelah perintah SQL dijalankan dan data berhasil masuk di dalam

database, maka pesan keberhasilan akan ditampilkan. Selanjutnya
halaman utama tambah data akan dipanggil kembali menggunakan
perintah include.

6.3.3

Menjalankan Program MasukanData

Setelah program utama masukan data dan program simpan selesai dibuat,
Anda dapat mencoba menggunakannya untuk memasukkan data. Berikut
adalah panduan mudah yang dapat digunakan.
1. Menggunakan browser kesayangan, misalnya Internet Explorer (IE).

Langkah 6 : Menguasai Pembuatan Program cPanel

2. Jalankan program BukuTambah.php, yaitu

http://localhost/DreamPHP/Bab6/BukuTambah.php.

13

dengan

alamat

3. Setelah terbuka, masukkanlah data-data buku baru ke dalam form. Berikut

adalah contohnya.

Gambar 6.8 Memasukkan data dari formulir

4. Setelah data dimasukkan ke dalam form, klik tombol Simpan untuk
menyimpan data ke dalam database.
5. Berikut adalah tampilan saat data berhasil disimpan.

Gambar 6.9 Konfirmasi keberhasilan memasukkan data

6. Berikut adalah tampilan data pada database dilihat dari phpMyAdmin.

14

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.10 Tampilan data di dalam tabel databuku

7. Setelah data tersimpan, Anda tidak dapat melakukan refresh browser,
karena akan melakukan eksekusi ulang pada perintah simpan, sehingga
pesan error akan ditampilkan.

Gambar 6.11Gagal perintah saat data sudah ada di dalam database

6.4

Membuat Program Tampil Data

Untuk mempelajari pembahasan bab ini, tentunya Anda sudah harus

menyelesaikan pembuatan program tambah data. Kenapa? Karena pada bagian
ini Anda akan membuat program tampil yang berfungsi untuk menampilkan
semua data buku dari database.
1. Menggunakan editor Dreamweaver versi kesayangan Anda, bukalah
halaman baru dengan tipe PHP.
2. Dari halaman desain, tambahkan objek tabel ke dalam halaman kerja.
Kemudian desain tabel (baris dan kolom) seperti pada gambar berikut.

Langkah 6 : Menguasai Pembuatan Program cPanel

15

Gambar 6.12 Desain tabel untuk menampilkan data

3. Jika tabel berhasil dibuat, Anda akan segera mendapatkan tampilannya
seperti gambar berikut:

Gambar 6.13 Tabel untuk menampilkan data

4. Modifikasilah tabel di atas supaya lebih menarik, yaitu dengan
menambahkan nama kolom dan mengatur lebar setiap kolomnya.

Gambar 6.14 Desain awal tabel untuk menampilkan data

5. Dari desain tabel di atas, Anda akan menggunakan baris kedua sebagai
media untuk menampilkan data dari database. Jadi, pada baris kedua akan
dibuat perulangan untuk menampilkan semua data yang ada.

16

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.15 Posisi baris kedua yang akan digunakan

6. Masuklah pada halaman kode (menu View Code), kemudian buatlah
kode tampil di atas kode HTML baris kedua. Berikut adalah skrip yang
dapat digunakan.
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM databuku ORDER BY kd_buku";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
while ($data=mysql_fetch_array($qry)) {
?>

7. Karena pada kode di atas Anda membuat perulangan dengan while, maka
Anda harus menutupnya pada bagian akhir baris kedua.
<?php
}
?>

8. Berikut adalah gambar hasil dari kedua langkah di atas:

Langkah 6 : Menguasai Pembuatan Program cPanel

17

Gambar 6.16 Contoh penulisan perintah tampil data

9. Masih di dalam halaman kode, Anda dapat menampilkan setiap informasi
dari kolom tabel databuku pada setiap cell (sel) yang ada. Yaitu dengan
cara menuliskan dengan perintah $data[nama_kolom];, berikut adalah
contoh kodenya:
<tr>
<td> <? echo $data['kd_buku']; ?> </td>
<td> <? echo $data['judul']; ?> </td>
<td> <? echo $data['penerbit']; ?> </td>
</tr>

10. Dari perintah penampil informasi data di atas, berikut adalah gambar
visualisasinya :

18

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.17 Visualisasi perintah lengkap menampilkan data

11. Sekarang masuklah pada halaman desain, maka secara otomatis setiap
kode yang Anda buat pada cell (sel) tabel akan berubah menjadi simbol
php( ), berikut contohnya:

Gambar 6.18 Hasil penulisan kode PHP dilihat dari halaman desain
12. Sekarang simpanlah halaman program tampil data di atas menggunakan
nama BukuTampil.php.
13. Dari beberapa langkah visualisasi di atas, Anda juga dapat langsung
membuat program tampil data buku dengan cara menuliskan kode lengkap
berikut.
Listing Program Bab6/BukuTampil.php
<html>

Langkah 6 : Menguasai Pembuatan Program cPanel

19

<head>
<title>Menampilkan Data Buku</title>
</head>
<body>
<table width="450" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="31"><strong>NO</strong></td>
<td width="289"><strong>JUDUL BUKU </strong></td>
<td width="106"><strong>PENERBIT</strong></td>
</tr>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM databuku ORDER BY kd_buku";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
while ($data=mysql_fetch_array($qry)) {
?>
<tr>
<td> <? echo $data['kd_buku']; ?> </td>
<td> <? echo $data['judul']; ?> </td>
<td> <? echo $data['penerbit']; ?> </td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Akhir Listing

Penjelasan Kode :
Dari listing program BukuTampil.php di atas, kemungkinan dari pembaca
masih ada yang belum paham. Berikut adalah penjelasan setiap kode penting
yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :

20

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$sql = "SELECT * FROM databuku ORDER BY kd_buku";

Adalah perintah SQL yang berfungsi untuk menampilkan semua

informasi dari tabel databuku.
Kode :
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());

Digunakan untuk menjalankan perintah SQL ($sql) yang ada di atasnya,

sehingga data yang ada di dalam form akan disimpan ke dalam
database.
Kode :
while ($data=mysql_fetch_array($qry)) {
....

Adalah kode perulangan yang berfungsi memasukkan semua informasi

data dari tabel databuku ke dalam variabel $data. Perintah di atas juga
akan mengakibatkan jumlah baris (kedua) dari desain tabel akan
bertambah banyak sesuai dengan jumlah data yang ada.
Kode :
<?php
}
?>

Adalah kode penutup dari perulangan yang dilakukan sebelumnya, yaitu

menggunakan perintah while.
Kode :
<? echo $data['kd_buku']; ?>

Adalah kode yang digunakan untuk menampilkan informasi kode buku

ke dalam halaman web. Parameter kd_buku diperoleh dari kolom di
dalam tabel databuku.

Langkah 6 : Menguasai Pembuatan Program cPanel

21

Kode :
<? echo $data['judul']; ?>

Adalah kode yang digunakan untuk menampilkan informasi judul buku

ke dalam halaman web. Parameter judul diperoleh dari kolom di dalam
tabel databuku.
Kode :
<? echo $data['penerbit']; ?>

Adalah kode yang digunakan untuk menampilkan informasi penerbit

buku ke dalam halaman web.
14. Setelah semuanya selesai, untuk menjalankan dapat dipanggil file
BukuTamu.php, yaitu dengan alamat http://localhost/DreamPHP/
Bab6/BukuTampil.php. Berikut contoh tampilannya:

Gambar 6.19 Hasil program tampil data buku dari database

22

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

6.5

Membuat Program Hapus Data

Pada bagian ini Anda akan belajar membuat program yang memiliki
kemampuan untuk memilih dan menghapus data. Sebagai dasar, Anda harus
menguasai teknik menampilkan data terlebih dahulu, karena sebagai halaman
utamanya adalah program tampil yang disetiap informasi datanya diberi menu
untuk aksi penghapusan. Pada latihan ini, Anda akan membuat dua file
program, yaitu HapusUtama.php dan HapusJalankan.php, berikut
langkahnya:

7.5.1

Membuat Halaman Utama Pilih Data

Langkah awal untuk membuat program hapus adalah menampilkan seluruh

data yang ada, kemudian dari setiap informasi data yang ditampilkan ditambah
menu untuk menghapus. Berikut adalah panduan mudahnya.
1. Bukalah file program tampil yang bernama BukuTampil.php, kemudian
simpan ulang (Ctrl+Sift+S) dengan nama HapusUtama.php.
2. Tambahkan 1 kolom pada tabel yang telah ada, caranya dengan memblok
(mengaktifkan) tabel, kemudian ubah nilai Widh (
menjadi 4 (

) dan Cols

).

Gambar 6.20 Mengaktifkan tabel yang akan dimodifikasi

3. Setelah tabel dipilih (diblok) atau diaktifkan, Anda dapat mengubah
jumlah kolom dan lebarnya dari jendela Properties.

Gambar 6.21 Mengubah jumlah kolom dan ukuran

Langkah 6 : Menguasai Pembuatan Program cPanel

23

4. Setelah menambah nilai kolom dari 3 menjadi 4, maka secara otomatis

jumlah kolom akan terbentuk pada sebelah kanan.

Gambar 6.22 Hasil penambahan kolom

5. Aturlah kolom baru yang terbentuk dengan menambahkan judul dan menu
Hapus didalamnya, berikut adalah contoh hasilnya:

Gambar 6.23 Menambahkan judul kolom dan menu

6. Sekarang Anda akan belajar membuat hyperlink untuk menu, caranya
dengan memblok tulisan Hapus, kemudian memasukkan alamat pada
Link yang ada di dalam jendela Properties.
HapusJalankan.php?idhapus=<? echo $data['kd_buku']; ?>

Berikut visualisasinya:

Gambar 6.24 Visualisasi membuat hyperlink pada menu hapus

24

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

7. Dengan cara di atas, maka Anda akan mendapatkan perintah baru di

dalam halaman kode. Berikut contohnya:

Gambar 6.25 Perintah yang dihasilkan dari pembuatan menu

8. Setelah selesai, simpanlah kembali (Ctrl+S) file program di atas.
9. Dari beberapa langkah di atas, jika tidak bisa memahami setiap
langkahnya, Anda dapat langsung menuliskan skrip berikut.
Listing Program Bab6/HapusUtama.php
<html>
<head>
<title>Halaman Utama Hapus Buku</title>
</head>
<body>
<table width="450" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="46"><strong>KODE</strong></td>
<td width="250"><strong>JUDUL BUKU </strong></td>
<td width="113"><strong>PENERBIT</strong></td>
<td width="60"><strong>PILIH</strong></td>
</tr>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM databuku ORDER BY kd_buku";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
while ($data=mysql_fetch_array($qry)) {
?>
<tr>
<td> <? echo $data['kd_buku']; ?> </td>
<td> <? echo $data['judul']; ?> </td>
<td> <? echo $data['penerbit']; ?> </td>

Langkah 6 : Menguasai Pembuatan Program cPanel

25

<td> <a href="HapusJalankan.php?idhapus=<? echo

$data['kd_buku']; ?>" target="_self">Hapus</a>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Akhir Listing

Penjelasan Kode :
Pada dasarnya, program HapusUtama.php di atas hampir sama dengan
program BukuTampil.php. Yang membedakan dari keduanya hanya adanya
penambahan menu hapus, berikut adalah penjelasannya.
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$sql = "SELECT * FROM databuku ORDER BY kd_buku";
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());

Adalah perintah SQL dan fungsi untuk menjalankan, gunanya adalah

untuk menampilkan semua informasi dari tabel databuku.
Kode :
<a href="HapusJalankan.php?idhapus=<? echo
$data['kd_buku']; ?>" target="_self">Hapus</a>

Digunakan untuk membuat hyperlink (menu) bernama Hapus, menu ini

diarahkan menuju file program bernama HapusJalankan.php. Karena
untuk memilih data, maka dibuat variabel URL bernama idhapus, dan
diberi nilai data kode buku (kd_buku).

26

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

10. Setelah selesai, Anda dapat menjalankan program utama hapus data di atas
dengan
menuliskan
alamat
http://localhost/DreamPHP/Bab6/HapusUtama.php.

Gambar 6.26 Halaman utama untuk memilih data yang dihapus

7.5.2

Membuat Program Hapus Data Terpilih

Dari program utama yang telah dibuat sebelumnya, saat ingin menghapus
salah satu data buku dapat dilakukan dengan memilih menu Hapus yang ada
pada kolom sebelah kanan. Dari menu yang dipilih, penghapusan akan
dilakukan pada file program HapusJalankan.php sesuai dengan kode buku
yang dibawa oleh variabel idhapus.
1. Masih menggunakan editor Dreamweaver versi kesukaan Anda, sekarang
bukalah halaman baru dengan tipe PHP.
2. Masuklah pada halaman kode(dari menu View Code), kemudian
hapuslah semua tag HTML standar yang ada di sana.
3. Selanjutnya, tuliskan skrip lengkap yang berfungsi untuk menghapus data
buku terpilih. Berikut skrip lengkapnya:
Listing Program Bab6/HapusJalankan.php
<?php

Langkah 6 : Menguasai Pembuatan Program cPanel

27

include "inc.koneksidb.php";
# Baca variabel URL (If Register Global ON)
$idhapus = $_GET['idhapus'];
$sql = "DELETE FROM databuku WHERE kd_buku='$idhapus'";
mysql_query($sql, $koneksi)
or die ("SQL Error".mysql_error());
echo "Data buku berhasil dihapus";
include "HapusUtama.php";
?>

Akhir Listing

Penjelasan Kode :
Dari listing program HapusUtama.php di atas, kemungkinan dari pembaca
masih ada yang belum paham. Berikut adalah penjelasan setiap kode penting
yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$idhapus = $_GET['idhapus'];

Digunakan untuk membaca variabel yang dikirimkan dari URL.. Teknik

ini harus dilakukan jika pada php.ini disetting ON pada REGISTER
GLOBAL. Jika tidak (OFF), maka baris kode di atas dapat dihapus.
Kode :
$sql = "DELETE FROM databuku WHERE kd_buku='$idhapus'";

Adalah perintah SQL yang berguna untuk menghapus data buku di

dalam database. Proses penghapusan menggunakan kondisi kode buku
(kd_buku) yang nilai kodenya didapat dari variabel URL.

28

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Kode :
echo "Data buku berhasil dihapus";
include "HapusUtama.php";

Digunakan untuk memberikan konfirmasi saat proses penghapusan

berhasil dilakukan. Selanjutnya halaman utama akan ditampilkan
kembali setelah data terhapus.
4. Setelah semua skrip program di atas dibuat, simpanlah menggunakan
nama HapusJalankan.php.
5. Dari halaman utama (HapusUtama.php), cobalah untuk menghapus salah
satu data dengan mengklik menu Hapus. Berikut adalah contoh
konfirmasi saat data buku berhasil dihapus.

Gambar 6.27 Menghapus data buku berhasil

6.6

Membuat Program Ubah Data

Pada bagian ini Anda akan berlatih untuk dapat membuat program ubah data
yang ada di dalam tabel databuku. Untuk mempelajari subbab ini, Anda
semua harus sudah menguasai dan mempraktekkan dua subbab sebelumnya,
yaitu tambah dan hapus data.

7.6.1

Membuat Halaman Utama Pilih Data

Hampir sama dengan program hapus data, Anda juga perlu membuat halaman
utama yang berfungsi untuk menampilkan semua data dari tabel, sehingga
Anda dapat memilih data yang akan diubah. Jika pada latihan sebelumnya

Langkah 6 : Menguasai Pembuatan Program cPanel

29

Anda menggunakan menu hapus, maka pada latihan ini akan diganti dengan
menu ubah.
1. Bukalah file program HapusUtama.php, kemudian simpan ulang
menggunakan UbahUtama.php.
2. Ubahlah menu Hapus menjadi Ubah, kemudian gantilah alamat
hyperlink-nya mengarah pada UbahTampil.php.

Gambar 6.28 Desain halaman utama ubah data

3. Selain mengganti nama file program tujuan, Anda juga harus mengganti
nama variabel URL yang digunakan, yaitu dari idhapus menjadi idubah.

Gambar 6.29 Visualisasi mengubah alamat menu

4. Dari langkah di atas, Anda pasti akan mendapatkan perubahan pada
halaman kode. Berikut adalah perubahan alamat menu jika dilihat dari
halaman kode.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

47

Gambar 7.48 Tampilan formulir ubah dan siap dimodifikasi

7.5.3

Membuat Program Simpan Data Hasil Modifikasi

Dari halaman KabupatenEditFm.php, Anda dapat mengubah nilai data yang

ditampilkan kedalam formulir. Untuk menyimpan kembali data yang telah
dirubah, program menggunakan file KabupatenEditSim.php.
1. Dari editor Dreamweaver kesayangan Anda, bukalah halaman baru
(Ctrl+N) menggunakan tipe PHP.
2. Masuklah pada halaman kode (menu View Code), kemudian ketikkan
perintah lengkapnya seperti listing berikut.
Listing Program Bab7/KabupatenEditSim.php
<?php
include "inc.koneksidb.php";
# Baca variabel
$TxtKdKabH
=
$CmbPropinsi =
$TxtKabupaten =
$TxtKomunitas =

Form (If Register Global ON)

$_POST['TxtKdKabH'];
$_POST['CmbPropinsi'];
$_POST['TxtKabupaten'];
$_POST['TxtKomunitas'];

# Validasi Form
if (trim($CmbPropinsi)=="NULL") {

30

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.30 Program dilihat dari halaman kode

5. Dari beberapa langkah di atas, Anda dapat memastikan hasil pembuatan
kodenya dengan melihat listing program lengkap berikut:
Listing Program Bab6/UbahUtama.php
<html>
<head>
<title>Halaman Utama Ubah Buku</title>
</head>
<body>
<table width="500" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="46"><strong>KODE</strong></td>
<td width="250"><strong>JUDUL BUKU </strong></td>
<td width="127"><strong>PENERBIT</strong></td>
<td width="46"><strong>PILIH</strong></td>
</tr>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM databuku ORDER BY kd_buku";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
while ($data=mysql_fetch_array($qry)) {
$no++;
?>
<tr>
<td> <? echo $data['kd_buku']; ?> </td>
<td> <? echo $data['judul']; ?> </td>
<td> <? echo $data['penerbit']; ?> </td>
<td>
<a href="UbahTampil.php?kdubah=<? echo $data['kd_buku']; ?>"
target="_self">Ubah</a> </td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Akhir Listing

Langkah 6 : Menguasai Pembuatan Program cPanel

31

6. Setelah selesai, simpanlah kembali hasil perubahan kode di atas.

7. Jalankan
dari
browser

http://localhost/DreamPHP/Bab6/
UbahUtama.php . Berikut adalah hasilnya:

Gambar 6.31 Hasil menampilkan data buku dan menu Ubah

7.6.2

Membuat Formulir Ubah Data

Dari halaman utama UbahUtama.php, maka semua data buku yang ada di
dalam tabel akan dtampilkan. Selain itu pada kolom sebelah kanan terdapat
menu Ubah untuk memilih data yang akan diubah. Saat salah satu menu Ubah
diklik, maka data yang bersangkutan akan ditampilkan kembali dalam
program formulir bernama UbahTampil.php, berikut cara pembuatannya:
1. Bukalah file program BukuTambah.php yang telah dibuat sebelumnya,
kemudian simpan ulang (Ctrl+Shift+S) menjadi UbahTampil.php.
2. Dari halaman desain, klik garis merah ( ) atau klik ikon Form (
untuk mengubah alamat Action form menjadi UbahSimpan.php.

32

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.32 Menentukan alamat eksekusi formulir

3. Dari halaman desain, tambahkan objek Hidden Field ( ) tepat di
samping objek masukan kode buku. Kemudian berilah nama variabelnya
dengan TxtKodeH.

Gambar 6.33 Hasil menambahkan objek Hidden Field

4. Masuklah pada halaman kode (dari menu View Code), kemudian di
atas tag <html>, ketikkan perintah tampil data sebagai berikut.
<?php
include "inc.koneksidb.php";
# Baca variabel URL (If Register Global ON)
$kdubah = $_GET['kdubah'];
# Penyimpanan
$sql = "SELECT * FROM databuku WHERE kd_buku='$kdubah'";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
$data=mysql_fetch_array($qry);
?>

5. Masih di dalam halaman kode, tambahkan parameter disabled pada

perintah pembuat kolom masukan data kode, sehingga menjadi:
<input name="TxtKode" type="text" size="6" maxlength="5"
disabled >

Langkah 6 : Menguasai Pembuatan Program cPanel

33

6. Sekarang masuklah pada halaman desain ( dari menu View Desain ),

kemudian tambahkan perintah tampil dari setiap kolom tabel databuku ke
dalam Init Val yang ada pada jendela Properties.

Gambar 6.34 Membuat kode tampil data pada objek form

7. Seperti pada langkah di atas, Anda dapat menerapkannya untuk semua
kolom tabel ke dalam kolom tampil yang sesuai. Berikut adalah tabel
aturan lengkapnya.
Tabel 6.2 Pengaturan properti form ubah data
Komponen
Text Field1

Hidden Field

Text Field2

Text Field3

Text Field4

Properti
Name
Char With
Max Char
Init Value
Keterangan
Name
Init Value
Name
Char With
Max Char
Init Value
Keterangan
Name
Char With
Max Char
Init Value
Keterangan
Name
Char With
Max Char

Nilai
TxtKode
6
5
<? echo
$data['kd_buku']; ?>
Kode buku
TxtKodeH
<? echo
$data['kd_buku']; ?>
TxtJudul
40
150
<? echo $data['judul'];
?>
Judul buku
TxtPenerbit
40
100
<? echo
$data['penerbit']; ?>
Penerbit
TxtJumlah
4
2

34

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Init Value

Button 1

Keterangan
Label
Action

<? echo $data['jumlah'];

?>
Jumlah
Simpan
Submit Form

8. Dari pengaturan yang dilakukan seperti tabel di atas, maka tampilan

formulir tampil akan menjadi seperti gambar berikut.

Gambar 6.35 Kondisi formulir setelah ditambahi kode pada init val
9. Dari beberapa langkah di atas, pastikan hasil kode programnya kurang
lebih akan tampak seperti listing berikut.
Listing Program Bab6/UbahTampil.php
<?php
include "inc.koneksidb.php";
# Baca variabel URL (If Register Global ON)
$kdubah = $_GET['kdubah'];
# Penyimpanan
$sql = "SELECT * FROM databuku WHERE kd_buku='$kdubah'";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
$data=mysql_fetch_array($qry);
?>
<html>

Langkah 6 : Menguasai Pembuatan Program cPanel

35

<head>
<title>Formulir Tambah Data Buku</title>
</head>
<body>
<form action="UbahSimpan.php" method="post" name="form1"
target="_self">
<table width="450" border="1" cellspacing="1"
cellpadding="2">
<tr>
<td colspan="2"><strong>MENGUBAH DATA BUKU</strong></td>
</tr>
<tr>
<td width="108">Kode Buku </td>
<td width="325"><input name="TxtKode" type="text"
size="6" maxlength="5" value="<? echo $data['kd_buku']; ?>"
disabled>
<input name="TxtKodeH" type="hidden"
value="<? echo $data['kd_buku']; ?>">
</td>
</tr>
<tr>
<td>Judul Buku </td>
<td><input name="TxtJudul" type="text" maxlength="150"
size="40" value="<? echo $data['judul']; ?>"></td>
</tr>
<tr>
<td>Penerbit</td>
<td><input name="TxtPenerbit" type="text" size="40"
maxlength="100" value="<? echo $data['penerbit']; ?>">
</td>
</tr>
<tr>
<td>Jumlah</td>
<td><input name="TxtJumlah" type="text" maxlength="2"
value="<? echo $data['jumlah']; ?>" size="4"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Simpan">
</td>
</tr>
</table>
</form>
</body>
</html>

Akhir Listing

36

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Penjelasan Kode :
Dari listing program UbahTampil.php di atas, kemungkinan dari pembaca
masih ada yang belum paham. Berikut adalah penjelasan setiap kode penting
yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$kdubah = $_GET['kdubah'];

Digunakan untuk membaca variabel kdubah yang dikirimkan dari

URL. Teknik ini harus dilakukan jika pada php.ini disetting ON pada
REGISTER GLOBAL. Jika tidak (OFF), maka baris kode di atas dapat
dihapus.
Kode :
$sql = "SELECT * FROM databuku WHERE kd_buku='$kdubah'";

Digunakan untuk menampilkan data buku berdasarkan data yang

dipilih, yaitu dari nilai kode yang tersimpan dalam variabel URL.
Kode :
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
$data=mysql_fetch_array($qry);

Digunakan untuk menjalankan perintah SQL yang ada diatasnya,

kemudian hasilnya disimpan dalam variabel $data.
Kode :
<input name="TxtKode" type="text"
size="6" maxlength="5" value="<? echo $data['kd_buku'];?>"

Langkah 6 : Menguasai Pembuatan Program cPanel

37

disabled>

Digunakan untuk menampilkan data kode ke dalam formulir yang

dimatikan, sehingga data hanya ditampilkan dan tidak dapat diubah.
Kode :
<input name="TxtKodeH" type="hidden"
value="<? echo $data['kd_buku']; ?>">

Digunakan untuk menampilkan data kode ke dalam formulir yang terhidden, sehingga data tidak dapat terlihat. Teknik ini berfungsi sebagai
data kondisi saat akan merekam data, karena pada kolom kode pertama
telah dimatikan.
Kode :
<input name="TxtJudul" type="text" maxlength="150"
size="40" value="<? echo $data['judul']; ?>">

Digunakan untuk menampilkan data judul buku ke dalam formulir,

dengan cara ini, maka data yang ada dapat diubah.
10. Setelah beberapa perubahan kode selesai, Anda harus menyimpannya
(Ctrl + S) sebelum melanjutkan pada program berikutnya.
11. Berikut contoh hasilnya:

38

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 6.36 Tampilan data buku saat ditampilkan untuk diubah

7.6.3

Membuat Program Simpan Perubahan

Dari halaman UbahTampil.php, Anda dapat mengubah nilai data yang

ditampilkan ke dalam formulir. Untuk menyimpan kembali data yang telah
diubah, program menggunakan file UbahSimpan.php.
1. Dari editor Dreamweaver kesayangan Anda, bukalah halaman baru
(Ctrl+N) menggunakan tipe PHP.
2. Masuklah pada halaman kode (menu View Code), kemudian ketikkan
perintah lengkapnya seperti listing berikut.
Listing Program Bab6/UbahSimpan.php
<?php
include "inc.koneksidb.php";
# Baca variabel Form (If Register Global ON)
$TxtKodeH
= $_POST['TxtKodeH'];
$TxtJudul
= $_POST['TxtJudul'];
$TxtPenerbit= $_POST['TxtPenerbit'];
$TxtJumlah = $_POST['TxtJumlah'];
# Validasi Form
if (trim($TxtJudul)=="") {

Langkah 6 : Menguasai Pembuatan Program cPanel

39

echo "Judul masih kosong, ulangi kembali";

}
elseif (trim($TxtPenerbit)=="") {
echo "Penerbit masih kosong, ulangi kembali";
}
elseif (trim($TxtJumlah)=="") {
echo "Jumlah masih kosong, ulangi kembali";
}
else {
$sql = "UPDATE databuku SET
judul ='$TxtJudul',
penerbit='$TxtPenerbit',
jumlah ='$TxtJumlah'
WHERE kd_buku ='$TxtKodeH'";
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
echo "Berhasil mengubah judul: <b>$TxtJudul</b>";
include "UbahUtama.php";
}
?>

Akhir Listing

Penjelasan Kode :
Dari listing program UbahSimpan.php di atas, kemungkinan dari pembaca
masih ada yang belum paham. Berikut adalah penjelasan setiap kode penting
yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$TxtKodeH
=
$TxtJudul
=
$TxtPenerbit=
$TxtJumlah =

$_POST['TxtKodeH'];
$_POST['TxtJudul'];
$_POST['TxtPenerbit'];
$_POST['TxtJumlah'];

40

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Digunakan untuk membaca variabel yang dikirimkan dari Form..

Teknik ini harus dilakukan jika pada php.ini disetting ON pada
REGISTER GLOBAL. Jika tidak (OFF), maka ke-4 baris kode di atas
dapat dihapus.
Kode :
if (trim($TxtJudul)=="") {
echo "Judul masih kosong, ulangi kembali";
}

Digunakan untuk memeriksa keberadaan data di dalam kolom masukan

judul buku. Jika datanya masih kosong, maka pesan error akan
ditampilkan.
Kode :
$sql = "UPDATE databuku SET
judul ='$TxtJudul',
penerbit='$TxtPenerbit',
jumlah ='$TxtJumlah'
WHERE kd_buku ='$TxtKodeH'";

Adalah perintah SQL yang berguna untuk menyimpan kembali hasil

perubahan data dari form.
Kode :
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());

Digunakan untuk menjalankan perintah SQL yang ada di atasnya,

sehingga data hasil perubahan akan disimpan dalam database.
3. Setelah kode simpan di atas dibuat, simpanlah (Ctrl+S) menggunakan
nama UbahSimpan.php.
4. Berikut adalah pesan saat data berhasil disimpan.

Langkah 6 : Menguasai Pembuatan Program cPanel

Gambar 6.37 Informasi saat data berhasil disimpan

oooOooo

41

Bab

7
Membuat Program Untuk Database
Relasional

7.1

Pendahuluan

Kami harap para pembaca semua telah selesai mempelajari semua materi yang
dibahas pada Bab 7, karena sebagai dasar dari segala dasar. Jika pada latihan
sebelumnya Anda hanya menggunakan satu tabel, maka sekarang Anda akan
belajar menggunakan dua tabel yang berhubungan (relasi).

7.2

Mempersiapkan Tabel Relasi

Pada bab ini Anda akan berlatih membuat program manajemen database
dengan dua tabel yang berelasi. Untuk mempermudah pemahaman, kami
menggunakan data propinsi yang berelasi dengan data kabupaten.

7.2.1

Relasi Tabel

Tentunya Anda sudah tahu, bahwa letak dari kabupaten adalah pada suatu
propinsi, sehingga Anda dapat membuat hubungan data seperti gambar
berikut.

Gambar 7.1 Hubungan tabel kabupaten dan propinsi

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Jadi, dari gambar di atas, Anda akan membuat daftar data propinsi dan juga
menyimpan data kabupaten yang ada pada suatu propinsi. Semua kabupaten
yang ada di Indonesia akan dicatat, tentunya pencatatan berdasarkan letak
propinsi.

7.2.2

Mempersiapkan Tabel dan Data

Setelah Anda memahami struktur hubungan kedua tabel di atas, maka pada
bagian ini Anda dapat menerapkannya pada database MySQL. Perlu diketahui,
bahwa pada latihan bab ini Anda hanya akan membuat program masukan pada
data kabupaten saja, sedangkan pada tabel propinsi tidak.
1. Masuklah pada database MySQL,
phpdreamdb dengan perintah berikut.

kemudian

buatlah

database

CREATE DATABASE IF NOT EXISTS phpdreamdb;

2. Setelah database selesai dibuat, aktifkan atau masuklah pada database

phpdreamdb dengan perintah berikut.
USE phpdreamdb;

3. Sekarang Anda dapat membuat tabel di dalam database aktif, tabel

pertama yang diperlukan adalah propinsi. Berikut perintahnya:
CREATE TABLE propinsi (
kd_propinsi INT(3)
unsigned zerofill NOT NULL auto_increment,
nm_propinsi VARCHAR(60) NOT NULL,
PRIMARY KEY (kd_propinsi)
);

4. Setelah tabel propinsi selesai dibuat, masukkanlah beberapa data standar

ke dalam tabel propinsi. Hal ini harus dilakukan karena pada latihan nanti
Anda hanya akan membuat program masukan data kabupaten. Berikut
contoh perintahnya:
INSERT INTO propinsi VALUES (001, 'Lampung');

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

INSERT
INSERT
INSERT
INSERT
INSERT
INSERT

INTO
INTO
INTO
INTO
INTO
INTO

propinsi
propinsi
propinsi
propinsi
propinsi
propinsi

VALUES
VALUES
VALUES
VALUES
VALUES
VALUES

(002,
(003,
(004,
(005,
(006,
(007,

'Sumatra Selatan');
'Riau');
'Jambi');
'Sumatra Utara');
'Sumatra Barat');
'Banda Aceh');

5. Sekarang Anda dapat membuat tabel untuk relasinya, yaitu untuk

menyimpan data kabupaten. Berikut perintahnya:
CREATE TABLE kabupaten (
kd_kabupaten INT(4) unsigned zerofill
NOT NULL AUTO_INCREMENT,
kd_propinsi CHAR(3) NOT NULL,
nm_kabupaten VARCHAR(60) NOT NULL,
komunitas TEXT NOT NULL,
PRIMARY KEY (kd_kabupaten)
);

6. Setelah tabel selesai dibuat, Anda dapat memastikan keberadaan tabel

propinsi dan kabupaten dengan perintah SHOW TABLES;.

7.2.3

Membuat Koneksi Database MySQL

Untuk dapat membuat program berbasis database, maka Anda harus membuat
file koneksi yang berfungsi menghubungkan aplikasi dengan database
MySQL. Berikut adalah skrip yang perlu Anda buat.
1. Masuklah pada editor Dreamweaver kesayangan Anda, kemudian buatlah
halaman baru dengan tipe PHP.
2. Masuklah pada halaman kode (menu View Code), hapuslah semua
kode standar yang ada di sana.
3. Tuliskan listing program berikut.
Listing Program Bab7/inc.koneksidb.php
<?PHP
$db_host
$db_user
$db_pass
$db_data

=
=
=
=

"localhost";
"root";
"";
"phpdreamdb";

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

$koneksi = mysql_connect($db_host, $db_user, $db_pass)

or die ("Koneksi gagal".mysql_error());
mysql_select_db($db_data, $koneksi)
or die ("Baca DB gagal".mysql_error());
?>

Akhir Listing

4. Simpanlah skrip program di atas pada folder Bab8, jika belum ada, maka
Anda harus membuatnya terlebih dahulu.

7.3

Menyimpan Data dari Relasi

Hampir sama dengan latihan yang dibahas pada bab sebelumnya, untuk
membuat program masukan data, setidaknya Anda akan memerlukan dua buah
file program. Pada latihan ini, Anda akan membuat program bernama
KabupatenAddFm.php sebagai formulir masukan, dan program
KabupatenAddSim.php sebagai eskekutor atau skrip penyimpan data.

Gambar 7.2 Analogi membuat program simpan data

Dari gambar analogi di atas, maka di dalam file KabupatenAddFm.php hanya
berisi formulir masukan saja, yang nantinya formulir ini juga akan
dihubungkan dengan data propinsi sebagai data relasi.

7.3.1

Membuat Program Masukkan Data Kabupaten

Dari struktur tabel kabupaten di atas, di dalamnya terdapat kolom

kd_propinsi yang berasal dari tabel propinsi, kolom tersebut merupakan garis
yang menandakan hubungan atau relasi antar tabel. Dari Gambar 7.1 di atas
ditandai dengan garis yang memiliki panah 2 mengarah pada tabel kabupaten,
hal ini berarti hubungan satu ke banyak (One to Many).

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

Karena tabel kabubapten memiliki kunci tamu dari tabel propinsi, maka Anda
juga harus membuat hubungan pada formulir masukan. Untuk mempermudah
dalam memanggil data propinsi dalam formulir masukan, Anda dapat
menggunakan objek List/Menu. Berikut adalah langkahnya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (

) pada halaman kerja.

Gambar 7.3 Menambahkan formulir ke dalam halaman

3. Masukkan alamat di dalam kolom Action yang ada pada jendela
Properties, jika belum muncul klik garis merah ( ) atau klik ikon Form
( ) sekali lagi.

Gambar 7.4 Menentukan program penyimpan data

4. Selain cara di atas, Anda juga dapat menuliskan alamat aksinya dari
halaman kode, berikut contohnya:
<form action="KabupatenAddSim.php" method="post" name="form1"
target="_self">

5. Pastikan kursor berada di dalam lingkaran objek formulir (garis putusputus warna merah), kemudian tambahkan objek tabel (
ketentuan berikut.

) dengan

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.5 Desain tabel untuk membuat formulir masukan

6. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan

objek formulir sesuai data buku yang akan dimasuki. Berikut contohnya:

Gambar 7.6 Desain awal formulir masukan data buku

7. Pada bagian masukkan propinsi, Anda dapat menggunakan objek
List/Menu yang nantinya menampilkan semua data dari tabel propinsi.
Untuk membuatnya, berikut adalah kodenya:
<select name="CmbPropinsi">
<option value="NULL">[ Pilih Propinsi ]</option>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
echo "<option value='$data[kd_propinsi]'>

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

$data[nm_propinsi] </option>";
}
?>
</select>

Dari skrip di atas akan menghasilkan tampilan berikut:

Gambar 7.7 List/Menu berisi daftar propinsi dari database

8. Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut.
Tabel 7.1 Pengaturan properties formulir masukan data kabupaten
Komponen
Form
List/Menu
Text Field1

Text Field2
(Multiline)

Button 1

Properti
Action
Name
Keterangan
Name
Char With
Max Char
Keterangan
Name
Char With
Num Line
Keterangan
Label
Action

Nilai
KabupatenAddSim.php
CmbPropinsi
Propinsi
TxtKabupaten
40
60
Nama Kabupaten
TxtKomunitas
35
3
Komunitas
Simpan
Submit Form

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

9. Setelah desain formulir selesai dibuat, simpanlah halaman program di atas

menggunakan nama KabupatenAddFm.php.
10. Berikut adalah kode lengkap yang didapat dari desain form masukan di
atas, kode yang dihasilkan kurang lebih akan tampak seperti berikut.
Listing Program Bab7/KabupatenAddFm.php
<html>
<head>
<title>Formulir Tambah Kabupaten</title>
</head>
<body>
<form action="KabupatenAddSim.php" method="post" name="form1"
target="_self">
<table width="450" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td colspan="2"><b>MASUKAN DATA KABUPATEN</b></td>
</tr>
<tr>
<td width="118">Propinsi</td>
<td width="315">
<select name="CmbPropinsi">
<option value="NULL">[ Pilih Propinsi ]</option>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
echo "<option value='$data[kd_propinsi]'>
$data[nm_propinsi] </option>";
}
?>
</select></td>
</tr>
<tr>
<td>Nama Kabupaten</td>
<td>
<input name="TxtKabupaten" type="text" size="40"
maxlength="60">
</td>
</tr>
<tr>
<td>Komunitas</td>
<td><textarea name="TxtKomunitas" cols="35" rows="3" >
</textarea></td>

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Simpan"></td>
</tr>
</table>
</form>
</body>
</html>

Akhir Listing

11. Berikut adalah tampilan setelah dijalankan dari browser, yaitu dari alamat
http://localhost/DreamPHP/Bab7/KabupatenAddFm.php.

Gambar 7.8 Tampilan formulir masukan dari browser

7.3.2

Membuat Program Simpan Data Kabupaten

Dari program utama masukan data yang telah dibuat sebelumnya, pada
formulir diarahkan (Action) pada halaman KabupatenAddSim.php. Pada
bagian ini Anda akan membuat program tersebut, yaitu berisi kode untuk
menyimpan data ke dalam database.
1. Masih menggunakan Editor Dreamweaver kesayangan Anda.
2. Bukalah halaman baru menggunakan tipe Dynamic Page PHP.

10

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

3. Masuklah pada halaman kode (dari menu View Code), kemudian

hapuslah semua kode HTML standar yang ada.
4. Mulailah menuliskan kode PHP pembuka dan penutup, berikut adalah
contohnya:

Gambar 7.9 Halaman kode untuk membuat program simpan

5. Supaya lebih mudah, Anda dapat menuliskan kode program simpan secara
lengkap seperti listing berikut.
Listing Program Bab7/KabupatenAddSim.php
<?php
include "inc.koneksidb.php";
# Baca variabel
$CmbPropinsi =
$TxtKabupaten =
$TxtKomunitas =

Form (If Register Global ON)

$_POST['CmbPropinsi'];
$_POST['TxtKabupaten'];
$_POST['TxtKomunitas'];

# Validasi Form
if (trim($CmbPropinsi)=="NULL") {
echo "Propinsi belum dipilih, ulangi kembali";
}
elseif (trim($TxtKabupaten)=="") {
echo "Kabupaten masih kosong, ulangi kembali";
}
elseif (trim($TxtKomunitas)=="") {
echo "Komunitas masih kosong, ulangi kembali";
}
else {
$sql = "INSERT INTO kabupaten SET
kd_propinsi ='$CmbPropinsi',
nm_kabupaten ='$TxtKabupaten',
komunitas='$TxtKomunitas'";
mysql_query($sql, $koneksi)

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

11

or die ("SQL Error: ".mysql_error());

echo "Berhasil menyimpan Kabupaten:<b>$TxtKabupaten</b>";
include "KabupatenAddFm.php";
}
?>

Akhir Listing

6. Kemudian simpan dengan nama KabupatenAddSim.php.

Penjelasan Kode :
Dari listing program KabupatenAddSim.php di atas, kemungkinan dari
pembaca masih ada yang belum paham. Berikut adalah penjelasan setiap
kode penting yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$CmbPropinsi
$TxtKabupaten
$TxtKomunitas

= $_POST['CmbPropinsi'];
= $_POST['TxtKabupaten'];
= $_POST['TxtKomunitas'];

Digunakan untuk membaca variabel yang dikirimkan dari Form. Teknik

ini harus dilakukan jika pada php.ini disetting ON pada REGISTER
GLOBAL. Jika tidak (OFF), maka ke-empat baris kode di atas dapat
dihapus.
Kode :
if (trim($CmbPropinsi)=="NULL") {
echo "Propinsi belum dipilih, ulangi kembali";
}

Digunakan untuk memeriksa (mem-validasi) apakah Anda sudah

memilih data propinsi atau belum. Pada nilai standar, maka informasi
yang terpilih adalah [ Pilih Propinsi ] dengan nilai NULL.

12

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Kode :
elseif (trim($TxtKabupaten)=="") {
echo "Kabupaten masih kosong, ulangi kembali";
}

Digunakan untuk memeriksa (mem-validasi) keberadaan data di dalam

kolom masukan nama kabupaten. Jika datanya masih kosong, maka
pesan error akan ditampilkan.
Kode :
$sql = "INSERT INTO kabupaten SET
kd_propinsi ='$CmbPropinsi',
nm_kabupaten ='$TxtKabupaten',
komunitas='$TxtKomunitas'";

adalah perintah SQL yang berguna untuk menyimpan data kabupaten ke

dalam database, datanya berasal dari data yang dimasukkan lewat
formulir. Selain teknik di atas, Anda juga dapat menggunakan teknik
SQL berikut:
$sql = "INSERT INTO kabupaten
(kd_propinsi,nm_kabupaten,komunitas)
VALUES ('$CmbPropinsi','$TxtKabupaten',
'$TxtKomunitas')";

Kode :
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());

Digunakan untuk menjalankan perintah SQL ($sql) yang ada di atasnya,

sehingga data yang ada di dalam form akan disimpan ke dalam
database.Parameter or die dalam perintah di atas menyatakan jika
gagal, sehingga jika perintah SQL yang dijalankan gagal, maka
peryataan error akan ditampilkan.
Kemudian parameter mysql_error() akan menampilkan pesan kesalahan
asli yang didapatkan dari Server MySQL.
Kode :

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

13

echo "Berhasil menyimpan Kabupaten: <b>$TxtKabupaten</b>";

include "KabupatenAddFm.php";

Setelah perintah SQL dijalankan dan data berhasil masuk di dalam

database, maka pesan keberhasilan akan ditampilkan. Selanjutnya
halaman utama tambah data akan dipanggil kembali menggunakan
perintah include.

7.3.3

Menjalankan Program Masukan Data

Setelah program utama (formulir) masukan data dan program simpan selesai
dibuat, Anda dapat mencoba menggunakannya untuk memasukkan data-data
kabupaten. Berikut adalah panduan mudah yang dapat digunakan.
1. Menggunakan browser kesayangan, misalnya Internet Explorer (IE).
2. Jalankan program utamanya, yaitu dengan alamat http://localhost/
DreamPHP/Bab7/KabpupatenAddFm.php.
3. Setelah terbuka, masukkanlah data-data buku baru ke dalam form. Berikut
adalah contohnya.

Gambar 7.10 Memasukkan data kabupaten dari formulir

14

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

4. Saat memasukkan, pilihlah data propinsi dengan cara memilih dari

List/Menu yang ada.
5. Setelah data dimasukkan ke dalam form, klik tombol Simpan untuk
menyimpan data ke dalam database.
6. Berikut adalah tampilan saat data berhasil disimpan.

Gambar 7.11 Memasukan data kabupaten dari formulir

7. Berikut adalah tampilan data pada database dilihat dari phpMyAdmin.

Gambar 7.12 Tampilan data di dalam tabel kabupaten

Dari database yang dibuat, Anda memasang kd_kabupaten dengan tipe data
Integer dan Auto Increment, sehingga saat membuat program simpan tidak
perlu mendefinisikan data apa yang akan dimasukkan. Dengan cara seperti ini,
maka berapapun data yang dimasukkan, maka pada kode kabupaten akan
terbuat secara urut dengan jumlah 4 digit.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

7.4

15

Menampilkan Data Berdasarkan Kelompok

Pada bagian ini Anda akan berlatih menampilkan data kabupaten berdasarkan
kelompok, yaitu data propinsi. Ada dua cara mudah yang perlu Anda ketahui,
berikut adalah pembahasannya.

7.4.1

Menampilkan Data Kabupaten Per Propinsi

Karena akan membuat program tampil kabupaten berdasarkan kelompok

propinsi, maka Anda akan membuat dua halaman program. Untuk membuat
program ini, yang perlu dilakukan adalah membuat program tampil data
propinsi, kemudian program tampil kabupaten.

Langkah 1 :
Pada langkah pertama ini Anda akan belajar membuat program tampil semua
data propinsi ke dalam semuah List./Menu, dimana nantinya Anda dapat
memilih salah satu data di sana. Berikut caranya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form (

) pada halaman kerja.

3. Masukkan alamat di dalam kolom Action yang ada pada jendela

Properties, jika belum muncul klik garis merah ( ) atau klik ikon Form
( ) sekali lagi.

Gambar 7.13 Menentukan program penampil data kabupaten

4. Selain cara di atas, Anda juga dapat menuliskan alamat aksinya dari
halaman kode, berikut contohnya:
<form action=" KabupatenPerProp2.php" method="post"
name="form1" target="_self">

5. Pastikan kursor berada di dalam lingkaran objek formulir (garis putusputus warna merah), kemudian tambahkan objek tabel (
ketentuan seperti gambar berikut.

) dengan

16

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.14 Desain tabel untuk membuat formulir masukan

6. Di dalam tabel yang telah terbentuk, tambahkan beberapa keterangan dan
objek formulir seperti gambar berikut:

Gambar 7.15 Desain awal formulir masukan data buku

7. Dari formulir yang tampak di atas, Anda menggunakan objek List/Menu
yang menampilkan semua data dari tabel propinsi.
8. Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut.
Tabel 7.2 Pengaturan properti formulir pilih data propinsi
Komponen
Form
List/Menu
Button 1

Properti
Action
Name
Keterangan
Label
Action

Nilai
KabupatenPerProp2.php
CmbPropinsi
Pilih Propinsi
Tampil
Submit Form

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

17

9. Setelah desain formulir selesai dibuat, simpanlah halaman program di atas

menggunakan nama KabupatenPerProp1.php.
10. Berikut adalah kode lengkap yang didapat dari desain form masukan di
atas, kode yang dihasilkan kurang lebih akan tampak seperti berikut.
Listing Program Bab7/KabupatenPerProp1.php.php
<html>
<head>
<title>Data Kabupaten Per Propinsi</title>
</head>
<body>
<form action="KabupatenPerProp2.php" method="post"
name="form1" target="_self">
<table width="300" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td colspan="2"><b>PILIH PROPINSI</b></td>
</tr>
<tr>
<td width="88">Pilih Propinsi</td>
<td width="195">
<select name="CmbPropinsi">
<option value="NULL">[ Pilih Propinsi ]</option>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
echo "<option value='$data[kd_propinsi]'>
$data[nm_propinsi] </option>";
}
?>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Tampil"></td>
</tr>
</table>
</form>
</body>
</html>

Akhir Listing

18

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

11. Berikut adalah tampilan setelah dijalankan dari browser, yaitu dari alamat
http://localhost/DreamPHP/Bab7/KabupatenAddFm.php.

Gambar 7.16 Tampilan formulir pilih data propinsi

Langkah 2 :
Pada langkah kedua ini Anda akan membuat program tampil data kabupaten
berdasarkan data yang dikirimkan dari program pertama. Sehingga data
kabupaten akan ditampilkan per propinsi yang dipilih.
1. Menggunakan editor Dreamweaver versi kesayangan Anda, bukalah
halaman baru dengan tipe PHP.
2. Dari halaman desain, tambahkan objek tabel ke dalam halaman kerja.
Kemudian desain tabel (baris dan kolom) seperti pada gambar berikut.

Gambar 7.17 Desain tabel untuk menampilkan data

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

19

3. Jika tabel berhasil dibuat, Anda akan segera mendapatkan tampilannya

seperti gambar berikut:

Gambar 7.18 Tabel untuk menampilkan data

4. Modifikasilah tabel di atas supaya lebih menarik, yaitu dengan
menambahkan nama kolom dan mengatur lebar setiap kolomnya.

Gambar 7.18 Desain awal tabel untuk menampilkan data

5. Dari desain tabel di atas, Anda akan menggunakan baris kedua sebagai
media untuk menampilkan data dari database. Jadi, pada baris kedua akan
dibuat perulangan untuk menampilkan semua data yang ada.

Gambar 7.19 Posisi baris kedua yang akan digunakan

20

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

6. Masuklah pada halaman kode (menu View Code), kemudian buatlah

kode tampil di atas kode HTML baris kedua. Berikut adalah skrip yang
dapat digunakan.
<?php
include "inc.koneksidb.php";
$CmbPropinsi = $_POST['CmbPropinsi'];
$sql = "SELECT * FROM kabupaten WHERE
kd_propinsi='$CmbPropinsi' ";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
$no++;
?>

7. Karena pada kode di atas Anda membuat perulangan dengan while, maka
Anda harus menutupnya pada bagian akhir baris kedua.
<?php
}
?>

8. Berikut adalah gambar hasil dari kedua langkah di atas:

Gambar 7.20 Contoh penulisan perintah tampil data

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

21

9. Masih di dalam halaman kode, Anda dapat menampilkan setiap informasi

dari kolom tabel kabupaten pada setiap cell (sel) yang ada. Yaitu dengan
cara menuliskan dengan perintah $data[nama_kolom];, berikut adalah
contoh kodenya:
<tr>
<td> <? echo $no; ?> </td>
<td> <? echo $data['nm_kabupaten']; ?> </td>
<td> <? echo $data['komunitas']; ?> </td>
</tr>

10. Dari perintah tampilan informasi data di atas, berikut adalah gambar
visualisasinya :

Gambar 7.21 Visualisasi perintah lengkap menampilkan data

11. Sekarang masuklah pada halaman desain, maka secara otomatis setiap
kode yang dibuat pada cell (sel) tabel akan berubah menjadi simbol
php( ), berikut contohnya:

22

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.22 Hasil penulisan kode PHP dilihat dari halaman desain
12. Sekarang simpanlah halaman program tampil data di atas menggunakan
nama KabupatenPerProp2.php.
13. Dari beberapa langkah visualisasi di atas, Anda juga dapat langsung
membuat program tampil data buku dengan cara menuliskan kode lengkap
berikut.
Listing Program Bab7/KebupatenPerProp2.php
<html>
<head>
<title>Menampilkan Semua Data Kabupaten</title>
</head>
<body>
<table width="450" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td width="25"><b>NO</b></td>
<td width="137"><b>KABUPATEN</b></td>
<td width="264"><b>KOMINITAS</b></td>
</tr>
<?php
include "inc.koneksidb.php";
$CmbPropinsi = $_POST['CmbPropinsi'];
$sql = "SELECT * FROM kabupaten
WHERE kd_propinsi='$CmbPropinsi' ";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
$no++;
?>
<tr>
<td> <? echo $no; ?> </td>
<td> <? echo $data['nm_kabupaten']; ?> </td>
<td> <? echo $data['komunitas']; ?> </td>
</tr>

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

23

<?php
}
?>
</table>
</body>
</html>

Akhir Listing

Penjelasan Kode :
Dari listing program KabupatenPerProp2.php di atas, kemungkinan dari
pembaca masih ada yang belum paham. Berikut adalah penjelasan setiap
kode penting yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$CmbPropinsi = $_POST['CmbPropinsi'];

Digunakan untuk membaca variabel yang dikirimkan dari Form. Teknik

ini harus dilakukan jika pada php.ini disetting ON pada REGISTER
GLOBAL. Jika tidak (OFF), maka ke-empat baris kode di atas dapat
dihapus.
Kode :
$sql = "SELECT * FROM kabupaten
WHERE kd_propinsi='$CmbPropinsi' ";
$qry = mysql_query($sql, $koneksi);

Adalah perintah SQL yang berfungsi untuk menampilkan semua data

kabupaten yang terdapat pada propinsi terpilih. Dari perintah SQL di
atas, kemudian dijalankan dan hasilnya disimpan dalam variabel $qry.
Kode :

24

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

while ($data=mysql_fetch_array($qry)) {
....

Adalah kode perulangan yang berfungsi memasukkan semua informasi

data dari tabel kabupaten ke dalam variabel $data.
Kode :
<?php
}
?>

Adalah kode penutup dari perulangan yang dilakukan sebelumnya, yaitu

menggunakan perintah while.
Kode :
<? echo $no; ?>

Adalah kode yang digunakan untuk menampilkan nomor urut yang

dibentuk dari penambahan otomatis ($no++) diatasnya, sehingga
hasilnya terurut (1, 2, 3, 4, dan seterusnya)..
Kode :
<? echo $data['nm_kabupaten']; ?>

Adalah kode yang digunakan untuk menampilkan informasi nama

kabupaten ke dalam halaman web. Parameter nm_kabupaten didapat
dari kolom di dalam tabel kabupaten.
Kode :
<? echo $data['komunitas']; ?>

Adalah kode yang digunakan untuk menampilkan informasi komunitas

atau penghasilan dari kabupaten ke dalam halaman web.

Menjalankan Program :
Setelah selesai membuat kedua program di atas, maka untuk mendapatkan
informasi kabupaten berdasarkan nama propinsi caranya adalah:

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

25

1. Bukalah browser kesayangan Anda, misalnya Internet Explorer (IE).

2. Setelah semuanya selesai, untuk menjalankan dapat menuliskan alamat
Berikut
http://localhost/DreamPHP/Bab7/KabupatenPerProp1.php.
contoh tampilannya:

Gambar 7.23 Memilih nama propinsi dari List/Menu

3. Dari daftar propinsi yang ada, pilihlah salah satu nama propinsi yang Anda
ingin tampilkan.
4. Klik tombol Tampil, jika propinsi yang bersangkutan memiliki data
kabupaten, maka akan menampilkan datanya seperti gambar berikut.

26

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.24 Hasil tampil data kabupaten berdasarkan propnsi

7.4.2

Menampilkan Data Kabupaten Per Propinsi, Cara 2

Jika pada bagian sebelumnya menggunakan List/Menu untuk memilih data

propinsi, maka sekarang Anda hanya akan menampilkan semua data propinsi
pada halaman web, kemudian setiap datanya akan dipasangi menu.

Langkah 1 :
Pada langkah pertama ini, Anda akan membuat program tampil semua data
propinsi ke dalam bentuk tabel, dimana nantinya Anda dapat memilih salah
satu data disana. Berikut caranya:
1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah
halaman baru menggunakan tipe PHP.
2. Dari halaman desain, tambahkan objek tabel ke dalam halaman kerja.
Kemudian desain tabel (baris dan kolom) seperti pada gambar berikut.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

27

Gambar 7.25 Desain tabel untuk menampilkan data

3. Jika tabel berhasil dibuat, Anda akan segera mendapatkan tampilannya
seperti gambar berikut:

Gambar 7.26 Tabel untuk menampilkan data

4. Modifikasilah tabel di atas supaya lebih menarik, yaitu dengan
menambahkan nama kolom dan mengatur lebar setiap kolomnya.

Gambar 7.23 Desain awal tabel untuk menampilkan data

5. Dari desain tabel di atas, Anda akan menggunakan baris kedua sebagai
media untuk menampilkan data dari database. Jadi, pada baris kedua akan
dibuat perulangan untuk menampilkan semua data yang ada.

28

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.28 Posisi baris kedua yang akan digunakan

6. Masuklah pada halaman kode (menu View Code), kemudian buatlah
kode tampil di atas kode HTML baris kedua. Berikut adalah skrip yang
dapat digunakan.
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
?>

7. Karena pada kode di atas Anda membuat perulangan dengan while, maka
Anda harus menutupnya pada bagian akhir baris kedua.
<?php
}
?>

8. Pada baris ketiga, kolom pertama, tambahkan kode untuk menampilkan

data propinsi. Berikut adalah kodenya:
<tr>
<td> <? echo $data[nm_propinsi]; ?></td>
<td> </td>
</tr>

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

29

9. Berikut adalah gambar hasil dari ketiga langkah terakhir di atas:

Gambar 7.29 Contoh penulisan perintah tampil data

10. Dari langkah di atas, kode yang dibuat pada cell (sel) tabel akan berubah
menjadi simbol php( ), berikut contohnya:

Gambar 7.30 Hasil penulisan kode PHP dilihat dari halaman desain
11. Sekarang simpanlah halaman program tampil data di atas menggunakan
nama KabupatenPProp1.php.
12. Di bawah kolom Pilih, tambahkan teks bernama Tampil. Teks ini
nantinya akan Anda gunakan untuk menu tampil data.

30

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

13. Sekarang Anda akan membuat hyperlink untuk menu, caranya dengan
memblok tulisan Tampil, kemudian memasukkan alamat pada Link yang
ada di dalam jendela Properties.
KabupatenPProp2.php?kdprop=<? echo $data['kd_propinsi'];
?>

Berikut visualisasinya:

Gambar 7.31 Visualisasi membuat hyperlink pada menu Tampil

14. Dengan cara di atas, maka Anda akan mendapatkan perintah baru di
dalam halaman kode. Berikut contohnya:

Gambar 7.32 Perintah yang dihasilkan dari pembuatan menu

15. Setelah selesai, simpanlah kembali (Ctrl+S) file program di atas.
16. Dari beberapa langkah di atas, jika tidak bisa memahami setiap
langkahnya, Anda dapat langsung menuliskan skrip berikut.
Listing Program Bab7/KabupatenPProp1.php
<html>
<head>

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

31

<title>Data Kabupaten Per Propinsi</title>

</head>
<body>
<table width="300" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td colspan="2"><b>PILIH PROPINSI</b></td>
</tr>
<tr>
<td width="208">Propinsi</td>
<td width="75">Pilih</td>
</tr>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
?>
<tr>
<td> <? echo $data[nm_propinsi]; ?></td>
<td> <a href="KabupatenPProp2.php?kdprop=
<? echo $data['kd_propinsi']; ?>"
target="_self">Tampil</a> </td>
</tr>
</table>
</body>
</html>

Akhir Listing

Penjelasan Kode :
Dari listing program KabupatenPProp1.php di atas, kemungkinan dari
pembaca masih ada yang belum paham. Berikut adalah penjelasan setiap
kode penting yang digunakan:
Kode :
include "inc.koneksidb.php";

Digunakan untuk memanggil file koneksi, yaitu berisi kode untuk

menghubungkan program dengan database MySQL.
Kode :
$sql = "SELECT * FROM propinsi";

32

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

mysql_query($sql, $koneksi);

Adalah perintah SQL dan fungsi untuk menjalankan, gunanya adalah

untuk menampilkan semua informasi dari tabel databuku.
Kode :
<a href="KabupatenPProp2.php?kdprop=<? echo
$data['kd_propinsi']; ?>" target="_self">Tampil</a>

Digunakan untuk membuat hyperlink (menu) bernama Tampil, menu

ini diarahkan menuju file program bernama KabupatenPProp.hp.
Karena untuk memilih data, maka dibuat variabel URL bernama
kdprop, dan diberi nilai data kode buku (kd_propinsi).
17. Setelah selesai, Anda dapat menjalankan program utama hapus data di atas
dengan
menuliskan
alamat
http://localhost/DreamPHP/Bab7/
KabupatenPProp.php.

Gambar 7.33 Halaman utama untuk memilih data propinsi

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

33

Langkah 2 :
Pada langkah kedua ini Anda akan membuat program tampil data kabupaten
berdasarkan data yang dikirimkan dari program pertama. Sehingga data
kabupaten akan ditampilkan per propinsi yang dipilih.
Untuk
mempermudah,
Anda
dapat
menggunakan
program
KabupatenPerProp2.php yang telah dibuat sebelumnya. berikut adalah cara
dan modifikasinya:
1. Menggunakan editor Dreamweaver versi kesayangan Anda.
2. Bukalah file KabupatenPerProp2.php, kemudian simpan ulang dengan
nama KabupatenPProp2.php.
3. Masuklah pada halaman kode, modifikasilah skrip tampil. Berikut skrip
yang perlu dirubah:
$CmbPropinsi = $_POST['CmbPropinsi'];
$sql = "SELECT * FROM kabupaten
WHERE kd_propinsi='$CmbPropinsi' ";

Menjadi
$kdprop = $_GET['kdprop'];
$sql = "SELECT * FROM kabupaten
WHERE kd_propinsi='$kdprop' ";

4. Dari perintah penampil informasi data di atas, berikut adalah gambar

visualisasinya :

34

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.34 Visualisasi perintah lengkap menampilkan data

5. Setelah selesai, simpanlah kembali (Ctrl+S) file program di atas.
6. Dari beberapa langkah di atas, jika tidak bisa memahami setiap
langkahnya, Anda dapat langsung menuliskan skrip berikut.
Listing Program Bab7/KabupatenPProp2.php
<html>
<head>
<title>Menampilkan Semua Data Kabupaten</title>
</head>
<body>
<table width="450" border="1" cellspacing="1"
cellpadding="2">
<tr bgcolor="#00FFFF">
<td width="25"><b>NO</b></td>
<td width="137"><b>KABUPATEN</b></td>
<td width="264"><b>KOMINITAS</b></td>
</tr>
<?php
include "inc.koneksidb.php";
$kdprop = $_GET['kdprop'];
$sql = "SELECT * FROM kabupaten
WHERE kd_propinsi='$kdprop' ";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

35

$no++;
?>
<tr>
<td> <? echo $no; ?> </td>
<td> <? echo $data['nm_kabupaten']; ?> </td>
<td> <? echo $data['komunitas']; ?> </td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Akhir Listing

7. Dengan cara di atas, maka jika Anda menjalankan kedua program di atas,
maka hasilnya sama dengan program sebelumnya.

7.5

Mengubah Data dari Relasi

Pada subbab ini Anda akan membuat program ubah data kabupaten, adapun
analogi perjalanan program dapat dilihat pada gambar berikut:

Gambar 7.35 Analogi perjalanan program ubah data

Dari tampilan gambar di atas, berarti Anda nanti akan membuatuhkan tiga
skrip program, yaitu : KabupatenEditPilih.php, KabupatenEditFm.php dan
KabupatenEditSim.php. Dari ketiga skrip program tersebut, berikut adalah cara
pembuatan dan langkahnya:

7.5.1

Membuat Program Tampil Untuk Memilih Data

36

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Pada bagian ini Anda akan membuat skrip program KabupatenEditPilih.php

yang berguna sebagai halaman utama. Di dalam program ini, Anda akan
menampilkan semua data kabupaten, dan di setiap baris datanya dipasang
menu untuk mengubah data.
1. Menggunakan editor Dreamweaver versi kesayangan Anda, bukalah
halaman baru dengan tipe PHP.
2. Dari halaman desain, tambahkan objek tabel kedalam halaman kerja.
Kemudian desain tabel (baris dan kolom) seperti pada gambar berikut.

Gambar 7.36 Desain tabel untuk menampilkan data

3. Jika tabel berhasil dibuat, Anda akan segera mendapatkan tampilannya
seperti gambar berikut:

Gambar 7.36 Tabel untuk menampilkan data

4. Modifikasilah tabel di atas supaya lebih menarik, yaitu dengan
menambahkan nama kolom dan mengatur lebar setiap kolomnya.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

37

Gambar 7.37 Desain awal tabel untuk menampilkan data

5. Dari desain tabel di atas, Anda akan menggunakan baris kedua sebagai
media untuk menampilkan data dari database. Jadi, pada baris kedua akan
dibuat perulangan untuk menampilkan semua data yang ada.

Gambar 7.38 Posisi baris kedua yang akan digunakan

6. Masuklah pada halaman kode (menu View Code), kemudian buatlah
kode tampil di atas kode HTML baris kedua. Berikut adalah skrip(1) yang
dapat digunakan.
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM kabupaten ORDER BY kd_propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
$no++;
?>

7. Karena pada kode di atas Anda membuat perulangan dengan while, maka
Anda harus menutupnya pada bagian akhir baris kedua. Berikut skrip (3):
<?php
}
?>

8. Berikut adalah gambar hasil dari kedua langkah di atas:

38

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.39 Contoh penulisan perintah tampil data

9. Masih di dalam halaman kode, Anda dapat menampilkan setiap informasi
dari kolom tabel kabupaten pada setiap cell (sel) yang ada. Yaitu dengan
cara menuliskan dengan perintah $data[nama_kolom];, berikut adalah
contoh kodenya:
<tr>
<td> <? echo $no; ?> </td>
<td> <? echo $data['nm_kabupaten']; ?> </td>
<td align="center"> Edit </td>
</tr>

10. Pada menu Edit, Anda dapat membuat hyperlink secara langsung dari
halaman kode. Caranya, tulis kode berikut pada baris ketiga:
<a href="KabupatenEditFm.php?kdubah=<? echo
$data['kd_kabupaten']; ?>" target="_self"> Edit </a>

11. Dari beberapa penulisan kode di atas, jika dilihat Anda akan mendapatkan
skrip seperti gambar berikut:

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

39

Gambar 7.40 Hasil penulisan beberapa kode

12. Sekarang simpanlah halaman program tampil data di atas menggunakan
nama KabupatenEditPilih.php.
13. Sekarang masuklah pada halaman desain, maka secara otomatis setiap
kode yang dibuat pada cell(sel) tabel akan berubah menjadi simbol
php( ), berikut contohnya:

Gambar 7.41 Hasil penulisan kode PHP dilihat dari halaman desain
14. Dari beberapa langkah visualisasi di atas, Anda juga dapat langsung
membuat program tampil data buku dengan cara menuliskan kode lengkap
berikut.
Listing Program Bab7/KebupatenEditPilih.php
<html>
<head>
<title>Menampilkan Semua Data Kabupaten</title>

40

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

</head>
<body>
<table width="400" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td width="24"><b>NO</b></td>
<td width="286"><b>KABUPATEN</b></td>
<td width="66" align="center"><b>PILIH</b></td>
</tr>
<?php
include "inc.koneksidb.php";
$sql = "SELECT * FROM kabupaten ORDER BY kd_propinsi";
$qry = mysql_query($sql, $koneksi);
while ($data=mysql_fetch_array($qry)) {
$no++;
?>
<tr>
<td> <? echo $no; ?> </td>
<td> <? echo $data['nm_kabupaten']; ?> </td>
<td align="center">
<a href="KabupatenEditFm.php?kdubah=
<? echo $data['kd_kabupaten']; ?>" target="_self">
Edit </a>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Akhir Listing

15. Setelah selesai, simpanlah kembali (Ctrl+S) hasil perubahan kode di atas.
16. Jalankan
dari
browser

http://localhost/DreamPHP/Bab7/
KabupatenEditPilih.php . Berikut adalah hasilnya:

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

41

Gambar 7.42 Hasil program dilihat dari browser

7.5.2

Membuat Program Tampil Untuk Mengubah Data

Setelah program tampil data dibuat, Anda dapat membuat program kedua yang
berguna untuk menampilkan data terpilih ke dalam formulir, sehingga Anda
dapat memodifikasi datanya. Program ini nantinya akan disimpan dalam file
bernama KabupatenEditFm.php, berikut adalah langkahnya:
1. Bukalah file program KabupatenAddFm.php yang telah dibuat
sebelumnya, kemudian simpan ulang (Ctrl+Shift+S) menjadi
KabupatenEditFm.php.
2. Dari halaman desain, klik garis merah ( ) atau klik ikon Form (
untuk mengubah alamat Action form menjadi KabupatenEditSim.php.

Gambar 7.43 Menentukan alamat eksekusi formulir

3. Dari halaman desain, tambahkan objek Hidden Field ( ) tepat di
samping objek masukan propinsi, atau dimana saja juga boleh. Kemudian
berilah nama variabelnya dengan TxtKdKabH.

42

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.44 Hasil menambahkan objek Hidden Field

4. Masuklah pada halaman kode (dari menu View Code), kemudian di
atas tag <html>, ketikkan perintah tampil data.

Gambar 7.45 Tempat menuliskan kode tampil

5. Berikut adalah kode lengkap untuk menampilkan data terpilih.
<?php
include "inc.koneksidb.php";
$kdubah = $_GET['kdubah'];
# Penampilkan data
$sql = "SELECT * FROM kabupaten WHERE kd_kabupaten='$kdubah'";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
$data=mysql_fetch_array($qry);
?>

6. Sekarang masuklah pada halaman desain lagi ( dari menu View Desain
), kemudian tambahkan perintah tampil dari setiap kolom tabel ke dalam
Init Val yang ada pada jendela Properties.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

43

Gambar 7.46 Membuat kode tampil data pada objek form

7. Seperti pada langkah di atas, Anda dapat menerapkannya untuk semua

kolom tabel ke dalam kolom tampil yang sesuai. Berikut adalah tabel
aturan lengkapnya.
Tabel 7.2 Pengaturan properti formulir masukan data kabupaten
Komponen
Form
Hidden Field

Properti
Action
Name
Value

Text Field1

Name
Init Val

Text Field2
(Multiline)

Button 1

Keterangan
Name
Init Val
Keterangan
Label
Action

Nilai
KabupatenEditSim.php
TxtKdKabH
<?
echo
$data['kd_kabupaten']; ?>
TxtKabupaten
<?
echo
$data['nm_kabupaten'];
?>
Nama Kabupaten
TxtKomunitas
<?
echo $data['komunitas'];
?>
Komunitas
Simpan
Submit Form

8. Dari pengaturan yang dilakukan seperti tabel di atas, maka tampilan

formulir tampil akan menjadi seperti gambar berikut.

44

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Gambar 7.47 Kondisi formulir setelah ditambahi kode pada init val
12. Supaya pada List/Menu data propinsi dapat terpilih sesuai dengan kode
yang ditampilkan, maka Anda dapat memodifikasi kodenya menjadi
seperti kode berikut:
<select name="CmbPropinsi">
<option value="NULL">[ Pilih Propinsi ]</option>
<?php
include "inc.koneksidb.php";
$sql_prop = "SELECT * FROM propinsi";
$qry_prop = mysql_query($sql_prop, $koneksi);
while ($data_prop=mysql_fetch_array($qry_prop)) {
if ($data_prop['kd_propinsi'] == $data['kd_propinsi']) {
$pilih = " selected";
}
else {
$pilih = "";
}
echo "<option value='$data_prop[kd_propinsi]' $pilih>
$data_prop[nm_propinsi] </option>";
} ?>
</select>

13. Berikut adalah kode lengkap yang didapat dari desain form masukan di
atas, kode yang dihasilkan kurang lebih akan tampak seperti berikut.

Langkah 7 : Menguasai Pembuatan Aplikasi Database Ber-Relasi

45

Listing Program Bab7/KabupatenEditFm.php

<?php
include "inc.koneksidb.php";
# Baca variabel URL (If Register Global ON)
$kdubah = $_GET['kdubah'];
# Tampil data
$sql = "SELECT * FROM kabupaten
WHERE kd_kabupaten='$kdubah'";
$qry = mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
$data=mysql_fetch_array($qry);
?>
<html>
<head>
<title>Formulir Tambah Kabupaten</title>
</head>
<body>
<form action="KabupatenEditSim.php" method="post"
name="form1" target="_self">
<table width="450" border="1" cellspacing="1" cellpadding="2">
<tr bgcolor="#00FFFF">
<td colspan="2"><b>MENGUBAH DATA KABUPATEN</b></td>
</tr>
<tr>
<td width="118">Propinsi</td>
<td width="315">
<select name="CmbPropinsi">
<option value="NULL">[ Pilih Propinsi ]</option>
<?php
include "inc.koneksidb.php";
$sql_prop = "SELECT * FROM propinsi";
$qry_prop = mysql_query($sql_prop, $koneksi);
while ($data_prop=mysql_fetch_array($qry_prop)) {
if ($data_prop['kd_propinsi'] ==
$data['kd_propinsi']) {
$pilih = " selected";
}
else {
$pilih = "";
}
echo "<option value='$data_prop[kd_propinsi]' $pilih>
$data_prop[nm_propinsi] </option>";
}
?>

46

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

</select>
<input name="TxtKdKabH" type="hidden"
value="<? echo $data['kd_kabupaten']; ?>"> </td>
</tr>
<tr>
<td>Nama Kabupaten</td>
<td><input name="TxtKabupaten" type="text"
value="<? echo $data['nm_kabupaten']; ?>"
size="40" maxlength="60"></td>
</tr>
<tr>
<td>Komunitas</td>
<td><textarea name="TxtKomunitas" cols="35" rows="3" >
<? echo $data['komunitas']; ?></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Simpan"></td>
</tr>
</table>
</form>
</body>
</html>

Akhir Listing

14. Berikut adalah tampilan setelah dijalankan dari browser, yaitu setelah
Anda memilih salah satu menu Edit yang ada pada halaman program
KabupatenEditPilih.php.

48

7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

echo "Propinsi belum dipilih, ulangi kembali";

}
elseif (trim($TxtKabupaten)=="") {
echo "Kabupaten masih kosong, ulangi kembali";
}
elseif (trim($TxtKomunitas)=="") {
echo "Komunitas masih kosong, ulangi kembali";
}
else {
$sql = "UPDATE kabupaten SET
kd_propinsi ='$CmbPropinsi',
nm_kabupaten ='$TxtKabupaten',
komunitas ='$TxtKomunitas'
WHERE kd_kabupaten ='$TxtKdKabH'";
mysql_query($sql, $koneksi)
or die ("SQL Error: ".mysql_error());
include "KabupatenEditPilih.php";
}
?>

Akhir Listing

oooOooo