7 Langkah Menguasai Web PHP - MySQL - Dreamweaver

7/24/2019 7 Langkah Menguasai Web PHP - MySQL - Dreamweaver

1/203


2/203

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 Pendahuluan

1.2

Instalasi Paket XAMPP

1.3 Mengenal Struktur Folder XAMPP

1.4 Menjalankan XAMPP

Bab 2. Langkah 2 : Menguasai Database MySQL

2.1 Pendahuluan

2.2 Mengenal dan Memulai MySQL

2.2.1

Memastikan Servis MySQL Telah Berjalan2.2.2 Menjalankan Klien MySQL dari Command Prompt

2.2.3 Menjalankan Klien MySQL dari Windows Explorer

2.2.4 Mengetahui Letak Penyimpanan Database

2.3 Mengakses MySQL dengan Perintah SQL

2.3.1 Mengetahui Daftar Database yang Ada

2.3.2 Membuat Database Baru

2.3.3 Masuk Pada Database

2.3.4

Membuat Tabel Baru

2.3.5 Mengetahui Daftar Tabel yang Ada


3/203

Daftar Isi 3

2.3.6 Melihat Kembali Struktur Desain Tabel

2.3.7 Memasukkan Data Baru Ke Dalam Tabel

2.3.8 Menampilkan Data dari Dalam Tabel

2.3.9 Menampilkan Data Hanya Sebagian Kolom

2.3.10 Mengubah Nilai Data Pada Tabel

2.3.11 Menghapus Sebagian Baris Data

Bab 3.

Langkah 3 : Menguasai Pembuatan TabelUntuk Desain Aplikasi

3.1 Pendahuluan

3.2 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

Pendahuluan4.2 Dasar Menggunakan Form

4.2.1 Menggunakan Objek Form


4/203


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 Dreamweaver5.1 Pendahuluan

5.2

MenggunakanDreamweaver5.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 RegisterGlobalPHP

5.5

StrukturKontrol Program5.5.1 Menggunakan IF

5.5.2 Menggunakan IF-ELSE


5/203

Daftar Isi 5

5.5.3 Menggunakan IF-ELSE-IF

5.5.4 Menggunakan SWITCH

5.6 StrukturPerulangan 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 Hari5.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

cPanel6.1 Pendahuluan

6.2 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 Terpilih6.6 Membuat Program Ubah Data

6.6.1 Membuat Halaman Utama Pilih Data


6/203


6.6.2

Membuat Formulir Ubah Data

6.6.3 Membuat Program Simpan Perubahan

Bab 7. Langkah 7 : Menguasai Pembuatan Aplikasi

Database ber-Relasi7.1 Pendahuluan

7.2 Mempersiapkan Tabel Relasi

7.2.1

Relasi Tabel7.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


7/203

Langkah

1Instalasi 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 Registerdibuat 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, ikutilahlangkah mudah berikut untuk menginstal XAMPP.

1. Klik dua kali pada ikon filexampp-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.
http://www.apachefriends.org/en/xampp-windows.htmlhttp://www.apachefriends.org/en/xampp-windows.html


8/203

2 amweaver7 Langkah Menguasai PHP dan MySQL dengan Editor Dre

Gambar 1.1Memilih bahasa saat instalasi

3. Anda akan dihadapkan pada jendela Linsensi, bacalah apabila sempat,

kemudian klik tombol Saya Setujuuntuk 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.2Menentukan lokasi penginstallan XAMPP

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

tujuansecara manual, atau klik tombol Browse untuk mencarinya.

6.

Klik tombol Instal untuk melanjutkan proses instalasi.

7. Kemudian tunggulah beberapa menit sampai proses penginstallan selesai.


9/203

Langkah 1: Instalasi Paket PHP dan MySQL dengan XAMPP

Gambar 1.3Proses penginstallan paket XAMPP

8. Selanjutnya, XAMPP akan secara otomatis melakukan penyetingan dari

halaman Command Prompt. Perhatikan gambar berikut.

Gambar 1.4Konfigurasi otomatis XAMPP

9. Setelah proses konfigurasi selesai, maka Anda akan dihadapkan pada

halaman penutup yang menyatakan proses penginstallan telah selesai dansukses dilakukan.


10/203

4 amweaver7 Langkah Menguasai PHP dan MySQL dengan Editor Dre

Gambar 1.5Jendela 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 yangmendukung, termasuk PHP, MySQL, Apache maupun phpMyAdmin.

Untuk lebih jelasnya, Anda dapat melihat gambar berikut:


11/203


Gambar 1.6Struktur folder hasil penginstallan

Seperti paket-paket yang lain atau standar Web Server Apache, XAMPP juga

memiliki folder bernama htdocs sebagai tempat penyimpanan semua fileprogram 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 darimenu Start Program Apachefriends CONTROL XAMPP

SERVER PANEL.


12/203

6 mweaver7 Langkah Menguasai PHP dan MySQL dengan Editor Drea

Gambar 1.7Langkah 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.8Halaman Control Panel XAMPP

Dari Control Paneldi atas, apabila Anda mendapati salah satu service tidak

memiliki status Running, maka Anda dapat menjalankannya dengan cara

mengklik tombol Startyang ada di samping kanannya.


13/203


Gambar 1.9Salah 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.10Tempat penyimpanan file latihan

oooOooo


14/203

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 MySQLBagian 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 Stopdan

muncul status Running.


15/203


Gambar 2.1 Status Running pada server MySQL

4. Setelah selesai, keluarlah jendela Control Paneldengan 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 CommandPromnpt (DOS Prompt) menggunakan user Rootatau tanpa user. Berikutlangkahnya:

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 commandatau cmd.

Gambar 2.2Menjalankan Command dari Run

2. Berikut adalah contoh tampilan utama Command Prompt dari

Windows XP.

Gambar 2.3Tampilan utama Command Prompt


16/203

Langkah 2 : Menguasai Database MySQL 3

3. Setelah masuk pada halaman Command Promptatau 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\ bi n>mysql

5. Berikut adalah contohnya:

6.

Saat masuk pada server MySQL tanpa menyebutkan nama usernya, ataumenggunakan user dan passwordnya salah, maka server biasanya akan

menolak dengan menampilkan pesan kesalahan. Berikut contohnya:


17/203


\ MYSQL\ bi n>mysql

ERROR 1045 (28000) : Access deni ed f or user' ODBC' @' l ocal host ' ( usi ng password: NO)

7. Untuk masuk menggunakan user, misalnya root. Maka pada perintah harus

didefinisikan nama usernya, kemudian diikuti dengan password yang

sesuai.

\ MySQL\ bi n>mysql -u root pEnt er password: xxxxx

8. Jika saat instalasi Anda tidak memasukkan password, maka kita dapat

masuk pada MySQL menggunakan user root tanpa password. Berikutadalah caranya:

\ MySQL\ bi n>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\ bi n>mysql -u bunafit pEnt er 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\ bi n>mysql -u root

Wel come t o t he MySQL moni t or . Commands end wi t h ; or \ g.Your MySQL connect i on i d i s 1 t o server versi on: 5. 0. 19- nt

Type ' hel p; ' or ' \ h' f or hel p. Type ' \ c' t o cl ear t hebuf f er.


18/203


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\ bi n>

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 tamuatau user tak dikenal, caranya adalah dengan mengklik ganda file klien yang

bernama mysql.exedari halaman Windows Explorer. File tersebut terletak di

subfolder C:\XAMPP\XAMPP\mysql\bin> atau C:\ProgramFiles\xampp\mysql\bin>,Berikut letaknya seperti tampak pada gambar:

Gambar 2.7Menjalankan mysql dengan cara klik ganda dari Explorer


19/203


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.8Subfolder 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, phpmyadmindan 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 melihatinformasi 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:


20/203


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.


21/203


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 adalahsintaks dasarnya:

SINTAKS :

CREATE TABLE [ I F NOT EXI STS] nama_t abel( kol om_a t i pe( panj ang) , kol om_b t i pe( panj ang) , . . . )

Sebagai contoh, sekarang Anda dapat mencoba membuat tabel dengan sruktur

sebagai berikut:

Tabel 2.1Desain 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 siswaseperti yang telah didefinisikan dalam Tabel 2.1adalah 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:


22/203


Atau :

2.3.6 Melihat Kembali Struktur Desain Tabel

Setelah tabel selesai dibuat, Anda dapat melihat kembali struktur desain awal

seperti pada Tabel 2.1di 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 :I NSERT I NTO nama_t abel ( kol om_a, kol om_b, . . . , z)VALUES ( dat a_kol om_a , dat a_kol om_b , . . . , z) ;


23/203


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:

I NSERT I NTO nama_t bl SETkol om_a = ' dat a_kol om_a' ,kol om_b = ' dat a_kol om_b' ,kol om_n = ' dat a_kol om_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 kol om_a, kol om_b, . . . FROM nama_t bl

Berikut contohnya:


24/203


2.3.9

Menampilkan Data Hanya Sebagian KolomSebelumnya 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 menggunakanparameter WHEREsebagai kondisi penentu.

SINTAKS :

UPDATE nama_t abel SETkol om_a = dat akol om_a ,kol om_b = dat akol om_b ,. . . . . . . . . . . . . .WHERE kondi si


25/203


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

WHEREsebagai 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.


26/203


oooOooo


27/203

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:


28/203


Gambar 3.1Standar 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, halamantersebut dikatakan sebagai halaman desain.


29/203

Langkah 3 : Menguasai Pembuatan Tabel Untuk Desain Aplikasi 3

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.3Letak 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

Sheetaplikasi Ms Excel. Tampilan dengan bentuk ini juga dapat diistilahkandengan bentuk tampilan desktop. Sehingga dengan kemampuan yang dimiliki

oleh MX versi (7, 2004, 8 dan CS3) ini akan sangat memudahkan dalam


30/203


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.4Tampilan 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


31/203


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 tabeldan 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.7Ikon Tablepada toolbar Common

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


32/203


Gambar 3.8Ikon Tablepada toolbar Layout

Selain dari kedua cara di atas (toolbar Commondan menu Insert), Anda juga

dapat membuat tabel dengan cara menekan tombol Ctrl + Alt + Tatau dari

menuInsert Table.

Gambar 3.9Alternatif 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 Commonatau 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. Berikutadalah model pengisiannya:


33/203


Gambar 3.10Jendela utama pengaturan struktur tabel

5. Jika ingin menempatkan header (kepala) pada bagian yang berbeda, Anda

dapat memilihLeft, TopatauBothpada 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.11Hasil pembuatan tabel dua baris dan tiga kolom

3.3.3

Memahami Tag HTML Penyusun Tabel


34/203


Dilihat dari halaman kode, tabel tersusun atas beberapa tag HTML. Susunan

baris ditandai dengan tag , sedangkan susunan cell (sel) atau kolom

ditandai dengan tag. 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

sebagai utamanya, dan sebagai penyusun baris, serta tagsebagai susuan cell(sel) data. Berikut adalah skrip lengkapnya:

4. Dari skrip di atas, tag sampai dengan yang ada dibawahnya

menyatakan satu baris. Jadi, semua tag yang ada didalamnya masuk

ke dalam baris tersebut.

5. Dari skrip di atas, tag sampai dengan yang ada disampingnya

menyatakan satu cell (sell). Daerah ini berguna untuk meletakkan data

atau objek lain seperti gambar, form atau lainnya.

6. Karakter 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.


35/203


Gambar 3.12Cara 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 ( ).


36/203


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 keduabaik yang ada di sebelah kiri atau kanannya.

Gambar 3.17 Cara memilih beberapa cell

4. Untuk menyeleksi pada beberapacell(sel) vertikal, klik (dan tahan) pada

cell pertama yang akan diseleksi, kemudian tarik menuju pada cell keduabaik yang ada di atas atau di sebelah bawahnya..


37/203


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 me-

restruktur 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 Propertiessaat 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 nilaipada kolom yang sesuai, kemudian tekan tombol Enter.


38/203


5.

Setiap bagian yang ada disetiap jendela Propertiesdapat disebut atribut,

penjelasan setiap atribut dan bagiannya adalah sebagai berikut:

Tabel 3.1Penjelasan bagian dari jendela Properties objek tabel

Atribut Keterangan

RowsBagian Rows ( ) digunakan untuk mengatur

jumlah baris tabel, ubah nilai ini untuk mengganti jumlahbarisnya.

ColsBagian Cols( ) digunakan untuk mengatur

jumlah kolom tabel, ubah nilai ini untuk mengganti

jumlah kolomnya

WBagian Watau W( ) digunakan untuk mengatur

lebar tabel ke arah kiri. Untuk nilai, Anda dapat

menggunakna persen(full window dianggap 100%), atau

pixel(menyesuaikan resolusi layar).

H Bagian H atau Height( ) digunakan untuk

mengatur tinggi tabel ke atas dan bawah. Untuk nilai,

sama dengan W, yaitu persen( ) dan

pixel( ).

CellPad Bagian CellPad( ) digunakan untuk

memberi jarak antara garis border dengan area data.

CellSpace Bagian CellSpace( ) digunakan untuk

memberikan nilai lebar pada border.

Border Bagian Border( ) digunakan untuk

memberikan nilai ketebalan pada border (garis pinggir).

AlignBagian Align( ) digunakan untuk

menentukan perataan objek tabel, pilihannya adalah:

Default(standar di kiri),Left(di kiri halaman), Center (ditengah halaman),Right (di kanan halaman).


39/203


Brdr

colorBagian Brdr color( ) digunakan

untuk menentukan warna pada border, Anda dapat

mengubah dengan mengklik .

Bg colorBagian Bg color( ) digunakanuntuk menentukan warna pada background atau latar

belakang tabel, klik untuk mengubah warnanya.

Bg Image Bagian Bg Image( )

digunakan untuk menentukan objek gambar sebagai latar

belakang tabel. Klik ikon Open ( ) untuk menentukan

file gambar dari explorer.

ClassBagian Class( ) digunakan untuk mengatur

desain tabel dengan format CSS.

6.

Dengan menggunakan pengaturan Properties, Anda dapat mengubahstruktur tabelnya dengan sangat mudah. Berikut adalah contohnya:

Gambar 3.20 Mengatur kembali struktur tabel

7. Setelah jendela Propertiesdari tabel terpilih diatur, maka secara otomatis

desain tabel akan berubah. Berikut adalah hasilnya:

Gambar 3.21 Hasil pengaturan struktur dari jendela Properties


40/203


41/203


3.4

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

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

cara menambah nilai pada jendela Properties.

Gambar 3.24Kondisi awal struktur tabel

Gambar 3.25 Hasil penambahan kolom baru

Untuk keperluan tertentu, Anda dapat menyisipkan kolom diantara kolomyang telah ada, berikut caranya:

1. Aktifkan tabel terlebih dahulu, kemudian klik ikon panah kecil ( ) yang

ada di bawah kolom, kemudian pilih submenu Insert Column Leftjika

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.


42/203


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.27Menu 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 + Adari keyboard.


43/203


3.3.2 Menambah Baris Tabel

Seperti yang dijelaskan pada bagian sebelumnya, untuk menambah jumlah

baris dapat dilakukan dengan mengatur nilai Rows( ) dari jendela

Properties. Berikut ini adalah cara standar menambah jumlah baris dengan

cara menambah nilai pada jendela Properties.

Gambar 3.29Struktur 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


44/203


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 + Mdari 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.


45/203


Gambar 3.34Menu Merge Cells untuk menggabung cell

Anda juga dapat menggunakan ikon Merge ( ) yang telah

disediakan pada jendela Properties.

Gambar 3.35 Ikon Merge Cells untuk menggabung cell

Untuk mempercepat dalam menggabungkan beberapa cell tabel,

Anda dapat menekan tombol Ctrl + Alt + Mdari 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 Cellsadalah Split Cells, yaitu membagi ataumemecah satu cell (sel) menjadi beberapa kolom dan baris.


46/203


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 , berikut

adalah beberapa cara yang dapat dilakukan:

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( ) yang telahdisediakan pada jendela Properties.

Gambar 3.39 Ikon Split Cells untuk memecah cell


47/203


Untuk mempercepat dalam memecah cell tabel, Anda dapat menekan

tombol Ctrl + Alt + Sdari keyboard.

3. Setelah menu Split Cell( ) diklik, Anda akan dihadapkan pada jendela

Split Cell.

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:Coloumnssebanyak 2, maka hasilnya adalah:

Gambar 3.42Hasil memecah cell menjadi dua baris

oooOooo


48/203

Langkah

4Menguasai 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 FormSubbab 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.1Toolbar standar bernama Common


49/203

2 7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver

Dari bagian badan toolbar tersebut, Anda dapat berpindah antar toolbar dengancara mengklik tanda panah ( ) yang ada, kemudian pilihlah nama toolbar

yang akan diaktifkan.

Gambar 4.2Berpindah toolbar Forms

Selain menggunakan toolbar Formsdi atas, Anda juga dapat menggunakan

menu Insert Form. Berikut adalah contohnya:

Gambar 4.3Menu untuk memanggil objek form


50/203

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data 3

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

Gambar 4.4Objek lengkap pada toolbar Forms

4.2.2

Menggunakan Objek FormObjek 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.4Objek 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.5Jendela properties untuk objek form

Keterangan:

Dari tampilan gambar di atas, ada beberapa toolbar pengaturan yang perlu

Anda ketahui. Berikut adalah penjelasannya:


51/203


Form name: Digunakan untuk menentukan variabel atau Name dariobjek, 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), _parentdan _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.6Desain awal membuat formulir


52/203


3.

Di sebelah label Data Nama, tambahkan objek Text Fielddengan cara

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

Gambar 4.7Tampilan objek Text Fielddi dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Text Fieldyang ada

di dalam halaman form, maka jendela Properties akan ditampilkan seperti

berikut:

Gambar 4.8Jendela properties objek Text Field

Keterangan:



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 objekmasukan. Biasanya kolom ini akan dipakai saat membuat program ubah

data.


53/203


5.

Juga perlu Anda ketahui, bahwa objek Text Fielddisusun atas tag HTMLseperti kode berikut.

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 AreaadalahMulti Lineatau banyak baris.

1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalahhalaman baru menggunakan tipe PHP.


Gambar 4.9Desain 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.10Tampilan objek Text Areadi dalam formulir

7. Objek ini juga dapat diatur, caranya klik pada objek Text Areayang ada

di dalam halaman form, maka jendela Propertiesakan ditampilkan.


54/203


Gambar 4.11Jendela Properties untuk objek Text Area

Keterangan:



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 untukmenampung 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 Areadisusun atas tag HTML

seperti kode berikut.

4.2.5 Menggunakan Text Password

Objek Text Password( ) merupakan objek masukan form khusus untuk

data password. Pada dasarnya, objek ini sama dengan Text Fieldbiasa, yang

membedakan hanya tipe datanya saja, yaitu disetting dengan Password.

Berikut adalah latihan dalam menggunakannya:

1.

Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalahhalaman baru menggunakan tipe PHP.



55/203


Gambar 4.12Desain formulir untuk objek Text Password

9.

Di sebelah labe Data Lengkap, tambahkan objek Text Field dengan caral

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

Gambar 4.13Tampilan objek Text Passworddi dalam formulir

3. Untuk memasang Text Field sebagai Text Password, Anda harus

a klik pada objek Text Fieldyang ada

mengubah tipe datanya menjadi Password. Untuk mengubahnya dapat

dilakukan dari jendela Properties.

4. Objek ini juga dapat diatur, carany

di dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.14Jendela Properties untuk objek Text Password

. Juga perlu Anda ketahui, bahwa objek Text Passworddisusun atas tag5

HTML seperti kode berikut.


56/203


57/203


Gambar 4.17Jendela Properties untuk objekHidden Field

6. Juga perlu Anda ketahui, bahwa objek Hidden Field disusun atas tag



58/203


Gambar 4.19Tampilan objekList/Menudi dalam formulir

4.

Objek ini juga dapat diatur, caranya klik pada objek List/Menuyang adadi dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.20Jendela Properties untuk objekList/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.21Menu 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.


59/203

12 eamweaver7 Langkah Menguasai Web PHP dan MySQL dengan Dr

Gambar 4.22Membuat daftar pilihan berupa data bulan

7. Setelah beberapa daftar ditambahkan, Anda dapat mengakhiri dengan

mengklik tombol OK. Berikut adalah contoh hasilnya:

Gambar 4.23Tampilan akhir setelah menambah daftar

8. Juga perlu Anda ketahui, bahwa objekList/Menu disusun atas tag HTML


[ Pi l i h Bul an ] J anuar i Februar i Maret Apr i l Mei J uni J ul i Agust us Sept ember Okt ober November Desember


60/203


9.

Dengan cara di atas, saat program dijalankan Anda akan mendapatkannilai isi setelah objek List/Menudiklik. Berikut contohnya:

Gambar 4.24Tampilan hasil objekList/Menudalam 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


2. Pada halaman desain, tambahkan objek Form ( ) dan beberapa objek

lain pada halaman kerja, berikut contohnya:

Gambar 4.25Desain formulir untuk objekRadio Button

3. Di sebelah label Kelamin:, tambahkan objek Radio Buttondengan cara

mengklik ikon ( ) atau dari menu Insert Form Radio Button.


61/203


Gambar 4.26Tampilan objekRadio Buttondi dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Radio Buttonyang

ada di dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.27Jendela Properties untuk objekRadio Button

5. Juga perlu Anda ketahui, bahwa objek Radio Button disusun atas tag


6.

Dengan cara di atas, maka nilai checkedakan membuat salah satu pilihan

menjadi aktif atau terpilih. Berikut contoh hasilnya:


62/203


Gambar 4.28Halaman 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.



2. Pada halaman desain, tambahkan objek Form ( ) dan beberapa objeklain pada halaman kerja, berikut contohnya:

Gambar 4.29Desain formulir untuk objek Checkbox

3.

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


63/203


Gambar 4.30Tampilan objek Checkboxdi dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek Checkboxyang ada

di dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.31Jendela Propertiesuntuk objek Checkbox

5. Juga perlu Anda ketahui, bahwa objek Checkboxdisusun atas tag HTML


Makanan Faf ori t :

Gor engan
Kue Bol u
Ayam Gor eng
Es Cendol
Es Campur
Sambel Terong


64/203


7.

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

Gambar 4.32Hasil penggunaan objek Checkbox

8. Di dalam program PHP, Anda dapat mengambil semua nilai dari pilihan

yang aktif dengan cara berikut.

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.



2. Pada halaman desain, tambahkan objek Form ( ) dan beberapa objeklain pada halaman kerja, berikut contohnya:


65/203


Gambar 4.33Desain formulir untuk objek File Field

3.

Di sebelah label Upload File:, tambahkan objek File Fielddengan cara

mengklik ikon ( ) atau dari menu Insert Form File Field.

Gambar 4.34Tampilan objek File Fielddi dalam formulir

4. Objek ini juga dapat diatur, caranya klik pada objek File Fieldyang ada di

dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.35Jendela Properties untuk objek File Field

5. Juga perlu Anda ketahui, bahwa objek File Fielddisusun atas tag HTML


Upl oad Fi l e :


66/203


9.

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

Gambar 4.36Tampilan 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 sebagaipemicu formulir, sehingga semua isi data dari formulir akan dieksekusi pada

alamat yang telah ditentukan dalam aksi form.




lain pada halaman kerja.

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

Fielddengan cara mengklik ikon ( ) atau dari menuInsert FormText Field.

Gambar 4.37Tampilan objek Button di dalam formulir


67/203


4.

Pada bagian bawah, tambahkan objek Button dengan cara mengklik ikon( ) atau dari menuInsert Form Button.

5. Objek ini juga dapat diatur, caranya klik pada objek Buttonyang ada di

dalam halaman form, maka jendela Propertiesakan ditampilkan:

Gambar 4.38Jendela 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:





Gambar 4.39Formulir telah ditambahkan dalam halaman kerja


68/203


3.

Pastikan kursor berada di dalam lingkaran objek formulir (garis putus-

putus warna merah), kemudian tambahkan objek tabel ( ) dengan

ketentuan berikut.

Gambar 4.40Desain 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.41Hasil pembuatan tabel untuk kerangka

5.

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

Gambar 4.42Hasil desain kerangka masukan


69/203


6. Setelah desain selesai, Anda dapat menambahkan beberapa objek

masukkan berupa Text Fielddan Buttonke dalam kerangka.


7. Dari desain formulir masukan di atas, setelah selesai Anda dapat mencoba

menjalankan, berikut adalah contoh hasilnya:

Gambar 4.44Hasil 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 informasibarang atau penjualan.


70/203


1.

Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalahhalaman baru menggunakan tipe PHP.




3. Pastikan kursor berada di dalam lingkaran objek formulir (garis putus-

putus warna merah), kemudian tambahkan objek tabel ( ) dengan

ketentuan berikut.

Gambar 4.46Desain tabel untuk membuat formulir masukan


objek formulir sesuai data buku yang akan dimasukkan. Berikut

contohnya:



71/203


5. Desainlah tampilan kerangka tabel sebagus mungkin, yaitu dengan

membuat judul (dua kolom dimerger) dan keterangan data.



masukan berupa Text Field, Button atau yang lainnya ke dalam

kerangka. Tentunya saat memilih objek masukan harus ditentukan dengan

tipe data yang ada.





72/203


Gambar 4.50Hasil 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:



2. Pada halaman desain, tambahkan objek Form ( ) dan beberapa objeklain pada halaman kerja.


3. Pastikan kursor berada di dalam lingkaran objek formulir (garis putus-

putus warna merah), kemudian tambahkan objek tabel ( ) denganketentuan berikut.


73/203

26 reamweaver7 Langkah Menguasai Web PHP dan MySQL dengan D

Gambar 4.52 Desain tabel untuk membuat formulir masukan


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


5.

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


74/203




masukan berupa Text Field, Button atau yang lainnya ke dalam

kerangka. Tentunya saat memilih objek masukan harus ditentukan dengan

tipe data yang ada.





75/203

28 reamweaver7 Langkah Menguasai Web PHP dan MySQL dengan D

Gambar 4.56Hasil formulir masukan dari web

oooOooo


76/203

Langkah

5

Menguasai Pengkodean PHP denganDreamweaver

5.1 PendahuluanBab ini adalah pelajaran paling dasar dalam mempelajari pemrograman PHPdengan menggunakan aplikasi Dreamweaver sebagai editor-nya. Pada bab ini,semua materi dan latihan yang dibahas dibuat menggunakan bantuanDreamweaver versi 8. Sedangkan bagi Anda yang menggunakan versi MX/

MX 2004 ataupun CS3 tidak bermasalah, karena semuanya sama.

5.2 Menggunakan DreamweaverSubbab ini akan menjadi dasar dari Anda untuk dapat menggunakanDreamweaver sebagai editor pemrograman, khsusnya PHP. Bagi Anda yangbelum pernah sama sekali menggunakan aplikasi ini, maka subbab ini wajibdibaca dan dipraktekkan.

5.2.1 Mengenal Dreamweaver

Sebagian pembaca pasti ada yang belum paham dengan Dreamweaver itusendiri, ada sebagian awam yang mengira bahwa Dreamweaver adalah bahasapemrograman. Wah....wah....! itu salah, Dreamweaver hanya Editor web yangdapat Anda gunakan untuk menuliskan tag-tag HTML dan skrip PHP. Selainitu, Dreamweaver juga memiliki kemampuan Visual.

Jadi, dengan menggunakan Dreamweaver, Anda sudah tidak lagi direpotkandengan 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 denganWYSIWYG (What You See Is What You Get),atau apa yang Anda lihat, itulah


77/203


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

5.2.2 Mengetahui Folder Kerja Utama

Semua web server pasti akan menyediakan sebuah folder kerja atau yangdisebut dengan Web Rootatau Document Root. Folder ini difungsikan untukmenyimpan semua file program web termasuk file aplikasi PHP.

Biasanya, web server akan menyediakan satu direktori kerja yang bernamahtdocs. Begitu juga dengan Apache yang ada di dalam paket XAMPP, Andadapat menemukan folder htdocs pada subfolder XAMPP, atau secaralengkapnya C:\XAMPP\xampp\htdocs (karena kita menginstal di folderC:\XAMPP). Sedangkan untuk instalasi standar, Anda akan menemukannyadi C:\Program Files\xampp\htdocs. Berikut adalah kondisi folder htdocsyang masih asli.

Gambar 5.1Keadaan awal pada folder htdocs

Pada folder tersebutlah semua file program hasil pekerjaan Anda akandisimpan, dengan meletakkan program pada folder htdocs, maka Anda dapatmengaksesnya dengan alamat http://localhost/ atau http://127.0.0.1/ ataumenggunakan 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 folderkerja yang khusus untuk proyek-proyek Anda. Caranya adalah denganmembuat subfolder di dalam folder htdocs, dengan begitu semua file programweb nantinya akan disimpan pada folder baru tersebut.
http://localhost/http://127.0.0.1/http://127.0.0.1/http://localhost/


78/203

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 3

1. Masuklah pada folder C:\XAMPP\xampp\htdocs atau C:\ProgramFiles\xampp\htdocs, gunakan Windows Explorer.

2. Buatlah subfolder baru bernama DreamPHP di dalam htdocs, berikutcontohnya:

Gambar 5.2Membuat folder bernamaDreamPHP.

Sekarang, Anda sudah mempunyai folder yang bernama DreamPHP,nantinya semua folder tersebut akan digunakan untuk menyimpan semuafile hasil latihan.

3. Dengan menggunakan web browser seperti Internet Explorer (IE) atauOpera atau Firefox, Anda dapat mengakses folder DreamPHP dengancara menuliskan alamat berikut:

ht t p: / / 127. 0. 0. 1/ DreamPHP/

Setelah alamat /DreamPHP/, Anda dapat melanjutkan denganmenyebutkan nama file yang akan diakses atau dengan menuliskanterlebih dahulu subfolder yang ada didalamnya.

Selain alamat di atas, Anda juga dapat menggunakan alamat localhostseperti contoh berikut:

ht t p: / / l ocal host / DreamPHP/

4.

Sehingga jika berhasil, Anda akan mendapatkan tampilan seperti gambarberikut:


79/203


Gambar 5.3Mengakses folderDreamPHP

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

5.2.4 Membuat Skrip PHP Pertama Kali

Ini merupakan skrip PHP pertama Anda selama menggunakan Dreamweaversebagai Editor-nya. Anda bebas menggunakan versi berapapun, karena padadasarnya sama dan tidak jauh berbeda.

1. Bukalah aplikasi Dreamweaver versi kesayangan Anda, pada latihan inikami menggunakan versi 8.

2. Bukalah dokumen baru melalui menu File, pilih menu New. Atau dapat

dipercepat dengan menekan tombol Ctrl + N.

Gambar 5.4Menggunakan menu New


80/203


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

Gambar 5.5Membuka halaman editor untuk PHP

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

Gambar 5.6Mengaktifkan halaman kerje bentuk kode

5. Setelah berada pada halaman kode, hapuslah semua tag HTML yang telahada sebelumnya, karena pada pembuatan kode PHP Anda tidakmemerlukannya.


81/203


Gambar 5.7Tampilan awal saat Anda masuk halaman kode

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

Gambar 5.8Tampilan halaman kode dengan skrip PHP

7. Pada latihan awal, cobalah untuk membuat program yang dapatmenampilkan informasi PHP, yaitu dengan kode seperti berikut:

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

Dreamweaver.

Gambar 5.9Tampilam halaman kode dengan skrip PHP


82/203


9. Program sederhana di atas harus Anda simpan di dalam folderDreamPHPyang sebelumnya telah dibuat. Penyimpanan program ini harusmenggunakan ekstensi (akhiran file) berupa (.php), misalnya dengan namainfophp.php. Perhatikan caranya seperti tampak gambar berikut:

Gambar 5.10Menyimpan program

10.

Sekarang Anda dapat mencoba melihat hasilnya dengan menjalankanalamat http://localhost/DreamPHP/, maka Anda akan segera mendapatkannama file infophp.phppada Browser.

Gambar 5.11File programphpinfo.phpterlihat dalam browser

11.

Untuk mengakses suatu file, klik infophp.php yang terlihat disana, jikaskrip yang dituliskan tidak ada kesalahan, maka browser akanmenampilkan hasil seperti gambar berikut.
http://localhost/PHP-Dream/http://localhost/PHP-Dream/


83/203


Gambar 5.12Hasil program untuk melihat informasi PHP

5.2.5 Menulis Kode dengan Toolbar PHP

Saat membuat program, untuk menulis beberapa kode PHP dengan cepat dapatmenggunakan Toolbar PHP. Anda dapat mengaktifkan toolbar ini seperti cara

biasa, berikut adalah tampilannya:

Gambar 5.13Tampilan toolbar PHP

Semua ikon yang ada pada toolbar PHP juga dapat Anda dapatkan melaluimenu InsertPHP Object. Fungsi dari ikon yang ada pada toolbar PHPdapat dijelaskah pada tabel berikut.

Tabel 5.1Ikon yang ada pada toolbar PHP

Ikon Nama KeteranganFormVariabels

Hasil kode

URL Variabels Hasil kode SessionVariabels

Hasil kode


84/203


CookieVariabels

Hasil kode

Include Hasil kode

Require Hasil kode

PHP PageEncoding

mb_http_input("iso-8859-1");mb_http_output("iso-8859-1");

Code Block Hasil kode

Echo Hasil kode

Comment Hasil kode /* */

If Hasil kode

Else Hasil kode

5.2.6 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 akanmendapatkan banyak perintah dan fungsi yang dimiliki oleh PHP. Jika tidaktampil, Anda dapat memanggilnya dengan menekan tombol Ctrl + Space(spasi)pada keyboard secara bersamaan.

Gambar 5.14Tampilan jendela bantu PHP

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


85/203


5.3 Dasar Pemrograman PHPSetelah membaca semua bagian dari subbab sebelumnya, maka saat ini Andatelah siap untuk lebih jauh mengetahui kode-kode PHP. Pada bagian ini Andaakan banyak berlatih menuliskan kode PHP, sehingga nantinya dapat menjadidasar 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 babselanjutnya. Untuk itu, buatlah subbab bernama Bab5, Bab6, Bab7dan Bab8di dalam DreamPHPyang telah dibuat sebelumnya.

Gambar 5.15Tampilan 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. Sebagaicontoh, saat Anda akan menampilkan teks Haloo dunia...!!! berikut:

Atau :

Atau :


86/203


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

Gambar 5.16Hasil menampilkan data teks ke layar

5.3.3 Membuat Komentar dalam Program

Di dalam blok program, Anda juga dapat menuliskan komentar yang berfungsiuntuk memberi keterangan pada setiap baris perintah. Untuk menuliskomentar, parameter yang digunakan adalah: //, # dan /* */. Berikut adalahcontoh pemakaiannya:

Listing Program Bab5/komentar.php

Akhir Listing


87/203


5.3.4 Menampilkan Data dari Variabel

Saat membuat program, Anda dapat membuat variabel tanpa harus repot-repotmendeklarasikannya terlebih dahulu. Pengenalan variabel cukup ditandaidengan parameter dolar ($) sebelum nama variabelnya.

Listing Program Bab5/variabel.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 untukmengambil isi datanya dapat dipanggil langsung nama variabelnya.

Gambar 5.17Hasil 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 tandapetik ganda, maka angka yang ada di dalamnya dapat ditampilkan atau dapatAnda gunakan untuk operasi matematik.


88/203


Listing Program Bab5/var_operator.php

Akhir Listing

Dari contoh program di atas, berikut adalah hasilnya:

Gambar 5.18Operasi variabel bernilai angka

5.3.6 Gabungan Tag HTML dan Kode PHP

Untuk membuat aplikasi Web dan berbasis Web, Anda tidak dapatmenggunakan kode PHP secara mandiri, atau hanya tag HTML saja. Dalampemrogramman web, tag HTML dan kode PHP menyatu menjadi satu.

Listing Program Bab5/php_html.php

Bel aj ar PHP


89/203


Akhir Listing

Dengan contoh program di atas dapat dibuktikan bahwa kode HTML tidakdapat Anda tinggalkan dalam program PHP. Setiap bagian dari perintah PHPmasih memerlukan tags HTML untuk memoles tampilannya. Seperticontohnya perintah
yang digunakan untuk berganti baris, dan perintah untuk membuat huruf tebal. Berikut adalah contoh hasil skrip di atas:

Gambar 5.19Hasil kolaborasi PHP dan HTML


90/203


5.4 Register Global PHPRegister Global merupakan teknik pembacaan variabel yang dikenali olehinterpreter PHP. Secara standar, PHP4 terinstal dengan Register Globalberstatus OFF, sedangkan pada PHP 5 dengan Register Global ON.

Untuk mengaktifkan atau mematikannya, Anda dapat membuka file php.iniyang ada di dalam sub folder aplikasi PHP, gunakan Notepad untukmembukanya. Kemudian hilangkan tanda titik koma yang ada disetiap setting.Berikut adalah contohnya:

Register Global Mati :; regi ster _gl obal s = of f

Register Global Aktif :regi ster _gl obal s = on

Jika Anda kesulitan dalam memperoleh parameter Register Global, Andadapat melakukan pencarian dengan fasilitas Findyang dimiliki NotePad.

Dengan mengaktifkan Register Global, maka sekarang setiap membaca datayang tersimpan dalam variabel, Anda harus mendefinisikan terlebih dahuludengan parameter seperti tabel berikut:

Tabel 5.2Parameter 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 membacadata dari formulir masukan, maka perintah pendeklarasiannya adalah:


91/203


$Txt Nama = $_POST[ ' Txt Nama' ] ;$Txt Al amat = $_POST[ ' Txt Al amat ' ] ;$Txt Tel epon = $_POST[ ' Txt Tel epon' ] ;

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 denganparameter $_REQUEST. Parameter ini dapat terbaca pada semua versi PHP,termasuk pada setting ON dan OFF dari REGISTER GLOBAL. Sehinggapenulisannya adalah:

$page = $_REQUEST[ ' page' ] ;$nomor = $_REQUEST[ ' nomor' ] ;$Txt Nama = $_REQUEST[ ' TxtNama' ] ;

$TxtAl amat = $_REQUEST[ ' TxtAl amat ' ] ;$TxtTel epon = $_REQUEST[ ' TxtTel epon' ] ;

Catatan:Teknik pendefinisian variabel di atas tidak berlaku padavariabel hasil buatan sendiri, yaitu yang berasal dari halamanyang sama. Misalnya :

$angka = 4;$hasi l = 2 * $angka;echo Hasi l nya adal ah : $hasi l ;

5.5 Struktur Kontrol Program

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

5.5.1 Menggunakan IF


92/203


Parameter IF digunakan untuk memeriksa suatu kondisi dengan satu pilihansaja. Berikut adalah sintaks dasarnya:

Sintaks :

I f (kondi si ) {per i nt ah

}

Dari sintaks di atas, jika kondisi terpenuhi, maka perintah akan dijalankan, danjika kondisi tidak terpenuhi perintah tidak akan dijalankan.

Listing Program Bab5/if.php

Kont rol I F

Akhir Listing

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


93/203


Gambar 5.20Hasil penggunakan parameter IF

Untuk lebih mudah dalam menulis kode, parameter IF dapat disederhanakandalam satu baris perintah. Berikut caranya:

5.5.2 Menggunakan IF-ELSE

Parameter IF-ELSEdigunakan untuk membuat kondisi dengan dua pilihan,yaitu jika pilihan benar dan pilihan tidak benar, sehingga hasil yang didapatkanjuga berjumlah dua. Berikut sintaksnya:

Sintaks :

I f (kondi si ) {Per i nt ahB

}El se {

Per i nt ahS}

Dari sintaks di atas, jika kondisi bernilai benar, maka parameter PerintahBakan dikerjakan. Sedangkan jika pada kondisi bernilai salah, maka pada

7 Langkah Menguasai Web PHP - MySQL - Dreamweaver

Documents

Transcript of 7 Langkah Menguasai Web PHP - MySQL - Dreamweaver