MySQL dengan Dreamweaver Dasar Isi

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

www.bunafit.com | www.nanangkristanto.com

Daftar Isi

3

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 www.bunafit.com | www.nanangkristanto.com

4


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 www.bunafit.com | www.nanangkristanto.com

Daftar Isi

5

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 www.bunafit.com | www.nanangkristanto.com

6


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.


2


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. www.bunafit.com | www.nanangkristanto.com

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. www.bunafit.com | www.nanangkristanto.com

4


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:



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. www.bunafit.com | www.nanangkristanto.com

6


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.



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.


2


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.


Langkah 2 : Menguasai Database MySQL

3

Gambar 2.3 Tampilan utama Command Prompt 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:


4


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: \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.



5

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


6


Gambar 2.7 Menjalankan mysql dengan cara klik ganda dari Explorer

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 www.bunafit.com | www.nanangkristanto.com


7

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:

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.


8


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.

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 www.bunafit.com | www.nanangkristanto.com


Nama Alamat

VARCHAR VARCHAR

9

30 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:

Atau :

2.3.6

Melihat Kembali Struktur Desain Tabel


10


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);

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', ...... ;



11

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:

2.3.9

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.


12


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

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.



13

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.

oooOooo


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:


2


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. www.bunafit.com | www.nanangkristanto.com

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.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 www.bunafit.com | www.nanangkristanto.com

4


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



5

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. www.bunafit.com | www.nanangkristanto.com

6


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: www.bunafit.com | www.nanangkristanto.com


7

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 www.bunafit.com | www.nanangkristanto.com

8


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 tag sampai dengan yang ada dibawahnya menyatakan satu baris. Jadi, semua tag 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. www.bunafit.com | www.nanangkristanto.com


9

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


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.. www.bunafit.com | www.nanangkristanto.com


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. www.bunafit.com | www.nanangkristanto.com

12


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

W

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

H

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



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


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.



15

Gambar 3.23 Mengubah tinggi baris dengan menggeser garis

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 jendela 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. www.bunafit.com | www.nanangkristanto.com

16


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. www.bunafit.com | www.nanangkristanto.com


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 www.bunafit.com | www.nanangkristanto.com

18


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. www.bunafit.com | www.nanangkristanto.com


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. www.bunafit.com | www.nanangkristanto.com

20


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 www.bunafit.com | www.nanangkristanto.com


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 www.bunafit.com | www.nanangkristanto.com

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 www.bunafit.com | www.nanangkristanto.com

2

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 www.bunafit.com | www.nanangkristanto.com

Langkah 4 : Menguasai Pembuatan Formulir Masukan Data

3

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: www.bunafit.com | www.nanangkristanto.com

4


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 www.bunafit.com | www.nanangkristanto.com


5

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. www.bunafit.com | www.nanangkristanto.com

6


5. Juga perlu Anda ketahui, bahwa objek Text Field disusun atas tag HTML seperti 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 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(


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

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

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.

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: www.bunafit.com | www.nanangkristanto.com

8


1. Dengan menggunakan editor Dreamweaver versi kesukaan Anda, bukalah halaman baru menggunakan tipe PHP. 2. Pada halaman desain, tambahkan objek Form(


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.

9

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

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 ( ). www.bunafit.com | www.nanangkristanto.com

10


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

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.

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:


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. www.bunafit.com | www.nanangkristanto.com


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. www.bunafit.com | www.nanangkristanto.com

12


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



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:


Gambar 4.25 Desain formulir untuk objek Radio Button


14


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

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.

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



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:


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. www.bunafit.com | www.nanangkristanto.com

16


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 :

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



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. "; } ?>

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:



18


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. Upload File :



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.


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 www.bunafit.com | www.nanangkristanto.com

20


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.


Gambar 4.39 Formulir telah ditambahkan dalam halaman kerja www.bunafit.com | www.nanangkristanto.com


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.


22


Gambar 4.42 Hasil desain kerangka masukan 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



23

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


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:


24



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.



25

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

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: www.bunafit.com | www.nanangkristanto.com

26


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.


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

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:



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.


28


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

Gambar 4.56 Hasil formulir masukan dari web oooOooo




29

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 www.bunafit.com | www.nanangkristanto.com

2


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. www.bunafit.com | www.nanangkristanto.com

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver

3

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: www.bunafit.com | www.nanangkristanto.com

4


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 www.bunafit.com | www.nanangkristanto.com


5

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.


6


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:

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

Gambar 5.9 Tampilam halaman kode dengan skrip PHP www.bunafit.com | www.nanangkristanto.com


7

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


8


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.

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

Keterangan Hasil kode “”



5.2.6

Variabels URL Variabels Session Variabels Cookie Variabels Include Require PHP Page Encoding Code Block Echo Comment

Hasil kode “” Hasil kode “” mb_http_input("iso-8859-1"); mb_http_output("iso-8859-1"); Hasil kode “” Hasil kode “” Hasil kode “/* */”

If Else

Hasil kode “ ” Hasil kode “”

9

Hasil kode “” Hasil kode “ ” Hasil kode “”

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 www.bunafit.com | www.nanangkristanto.com

10


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

5.3

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:

Atau : www.bunafit.com | www.nanangkristanto.com

Langkah 5 : Menguasai Pengkodean PHP dengan Dreamweaver 11

Atau :

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

12


/* Tahukah anda?, bahwa dengan PHP Anda dapat membuat Web dan Aplikasi berbasis Web.*/ ?>

Akhir Listing

5.3.4

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

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 www.bunafit.com | www.nanangkristanto.com


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. Listing Program Bab5/var_operator.php

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. www.bunafit.com | www.nanangkristanto.com

14


Listing Program Bab5/php_html.php Belajar PHP TENTANG SAYA
"; echo "Nama saya adalah : $nama
"; echo "Asal SD saya adalah: $sd
"; echo "Asal SMP saya adalah: $smp
"; echo "Asal SMA saya adalah: $smu
"; echo "Lulus S1 dari $ssatu"; ?>

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
yang digunakan untuk berganti baris, dan perintah untuk membuat huruf tebal. Berikut adalah contoh hasil skrip di atas:



Gambar 5.19 Hasil kolaborasi PHP dan HTML

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:


16


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: $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

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 Kontrol IF 50) { echo "Anda lulus, selamat yah!!"; }


18


?>

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.

Gambar 5.20 Hasil penggunakan parameter IF Untuk lebih mudah dalam menulis kode, parameter IF dapat disederhanakan dalam satu baris perintah. Berikut caranya: 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. Listing Program Bab5/if-else.php Kontrol IF-ELSE

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


20


Gambar 5.21 Hasil penggunaan paramter if-else

5.5.3

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 www.bunafit.com | www.nanangkristanto.com


50 – 60 30 – 50 1 – 30

Cukup Kurang 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 Kontrol IF-ELSE-IF = 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 } ?>

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

: SANGAT BURUK";

Akhir Listing


22


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

5.5.4

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 Kontrol SWITCH "; 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"; } ?>

Akhir Listing


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


24


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 Kontrol WHILE "; $angka = 1; while ($angka <= 12) { echo "Angka $angka
"; $angka++; } ?>

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
"; }

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


26


Kontrol FOR "; for ($angka=1; $angka <= 12; $angka++) { echo "Angka $angka
"; } ?>

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. 2. Dari toolbar Forms, klik ikon List/Menu ( objek ComboBox ke dalam dokumen.

) untuk menambahkan

Gambar 5.25 Hasil menambahkan objek List/Menu www.bunafit.com | www.nanangkristanto.com


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 ""; }

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


28


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 Tanggalan Pilih Tanggal : <select name="CmbTgl"> $tgl "; } ?>

Akhir Listing



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


30


Tanggalan Pilih Tanggal : <select name="CmbTgl"> $tgl "; } ?>

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 Tanggalan Pilih Tanggal : <select name="CmbTgl">


else { $pilih = ""; } echo ""; } ?>

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 Tanggalan


32


Pilih Tanggal : <select name="CmbTgl"> $tanggal "; } ?>

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. www.bunafit.com | www.nanangkristanto.com


Listing Program Bab5/LMTahun.php Tahun Pilih Tanggal : <select name="CmbThn"> $thn "; } ?>
Akhir Listing


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 www.bunafit.com | www.nanangkristanto.com

34


minimal dan maksimal tahun. Sebagai patokan, Anda akan menggunakan nilai 5 tahun sebelum tahun ini, dan sampai dengan 5 tahun setelah saat ini. Listing Program Bab5/LMTahun2.php Tahun Pilih Tahun : <select name="CmbThn"> $thn "; } ?>

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 Tahun Pilih Tahun :



<select name="CmbThn"> $thn "; } ?>

Akhir Listing


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.


36


Listing Program Bab5/LMBulan.php Nama Bulan Pilih Bulan : <select name="CmbBln"> $bulan[$bln] "; } ?>

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 Nama Bulan Pilih Bulan : <select name="CmbBln">


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

= = = = = = = = =

"April"; "Mei"; "Juni"; "Juli"; "Agustus"; "September"; "Oktober"; "November"; "Desember";

for ($bln=0; $bln < 12; $bln++) { echo ""; } ?>

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.


38


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 Nama Bulan Pilih Bulan : <select name="CmbBln">


$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 ""; } ?>

Akhir Listing

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


40


Gambar 5.35 Nilai terpilih saat dijalankan pada bulan Februari

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.


2


USE phpdreamdb;

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

"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

3

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.

4


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 (


Gambar 6.1 Menambahkan formulir ke dalam halaman www.bunafit.com | www.nanangkristanto.com


5

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:

6


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



7

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 Formulir Tambah Data Buku

sebagai susuan cell(sel) data. Berikut adalah skrip lengkapnya:

4. Dari skrip di atas, tag
yang ada didalamnya masuk ke dalam baris tersebut. 5. Dari skrip di atas, tag sampai dengan

8


<strong>MASUKAN DATA BUKU

Kode Buku

Judul Buku

Penerbit

Jumlah

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. www.bunafit.com | www.nanangkristanto.com


9

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
10


mysql_query($sql, $koneksi) or die ("SQL Error: ".mysql_error()); echo "Berhasil menyimpan judul: $TxtJudul"; 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"; }



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


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: $TxtJudul"; 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. www.bunafit.com | www.nanangkristanto.com


13

1. Menggunakan browser kesayangan, misalnya Internet Explorer (IE). 2. Jalankan program BukuTambah.php, yaitu http://localhost/DreamPHP/Bab6/BukuTambah.php.

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

14


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

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. www.bunafit.com | www.nanangkristanto.com


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


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.

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

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



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:

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

18


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



19

Menampilkan Data Buku

<strong>NO <strong>JUDUL BUKU <strong>PENERBIT

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


$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 :

Adalah kode penutup dari perulangan yang dilakukan sebelumnya, yaitu menggunakan perintah while. Kode :

Adalah kode yang digunakan untuk menampilkan informasi kode buku ke dalam halaman web. Parameter kd_buku diperoleh dari kolom di dalam tabel databuku. www.bunafit.com | www.nanangkristanto.com


21

Kode :

Adalah kode yang digunakan untuk menampilkan informasi judul buku ke dalam halaman web. Parameter judul diperoleh dari kolom di dalam tabel databuku. Kode :

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


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.



23

Gambar 6.21 Mengubah jumlah kolom dan ukuran 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=

Berikut visualisasinya:

24


Gambar 6.24 Visualisasi membuat hyperlink pada menu hapus 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 Halaman Utama Hapus Buku



25

<strong>KODE <strong>JUDUL BUKU <strong>PENERBIT <strong>PILIH

" target="_self">Hapus

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 : " target="_self">Hapus

Digunakan untuk membuat hyperlink (menu) bernama Hapus, menu ini diarahkan menuju file program bernama HapusJalankan.php. Karena

26


untuk memilih data, maka dibuat variabel URL bernama idhapus, dan diberi nilai data kode buku (kd_buku). 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:



27

Listing Program Bab6/HapusJalankan.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'";

28


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. 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 www.bunafit.com | www.nanangkristanto.com


29

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

30


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 Halaman Utama Ubah Buku



31

<strong>KODE <strong>JUDUL BUKU <strong>PENERBIT <strong>PILIH

" target="_self">Ubah

Akhir Listing

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

32


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.

)

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 , ketikkan perintah tampil data sebagai berikut.



33

5. Masih di dalam halaman kode, tambahkan parameter disabled pada perintah pembuat kolom masukan data kode, sehingga menjadi:

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

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

Nilai TxtKode 6 5 Kode buku TxtKodeH TxtJudul 40 150 Judul buku TxtPenerbit 40 100

34


Init Value

Text Field4

Button 1

Keterangan Name Char With Max Char Init Value Keterangan Label Action

Penerbit TxtJumlah 4 2 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


35

# 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); ?> Formulir Tambah Data Buku

36


<strong>MENGUBAH DATA BUKU

Kode Buku

Judul Buku

Penerbit

Jumlah

Akhir Listing

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);



37

Digunakan untuk menjalankan perintah SQL yang ada diatasnya, kemudian hasilnya disimpan dalam variabel $data. Kode :

Digunakan untuk menampilkan data kode ke dalam formulir yang dimatikan, sehingga data hanya ditampilkan dan tidak dapat diubah. Kode :

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 :

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


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


39

if (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 = "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: $TxtJudul"; 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


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.



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 www.bunafit.com | www.nanangkristanto.com

2


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,

3

'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
= = = =

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


4


$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). www.bunafit.com | www.nanangkristanto.com


5

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 (


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:

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


) dengan

6


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



7

$data[nm_propinsi] "; } ?>

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


8


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 Formulir Tambah Kabupaten



9

MASUKAN DATA KABUPATEN

Propinsi <select name="CmbPropinsi"> $data[nm_propinsi] "; } ?>

Nama Kabupaten

Komunitas

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. www.bunafit.com | www.nanangkristanto.com

10


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



11

or die ("SQL Error: ".mysql_error()); echo "Berhasil menyimpan Kabupaten:$TxtKabupaten"; 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"; }


12


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”. 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. www.bunafit.com | www.nanangkristanto.com


13

Kemudian parameter mysql_error() akan menampilkan pesan kesalahan asli yang didapatkan dari Server MySQL. Kode : echo "Berhasil menyimpan Kabupaten: $TxtKabupaten"; 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.


14


Gambar 7.10 Memasukkan data kabupaten dari formulir

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, www.bunafit.com | www.nanangkristanto.com


15

maka berapapun data yang dimasukkan, maka pada kode kabupaten akan terbuat secara urut dengan jumlah 4 digit.

7.4

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 (


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:


16


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

) dengan

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

Properti Action Name

Nilai KabupatenPerProp2.php CmbPropinsi



Button 1

Keterangan Label Action

17

Pilih Propinsi Tampil Submit Form

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 Data Kabupaten Per Propinsi

PILIH PROPINSI

Pilih Propinsi <select name="CmbPropinsi"> $data[nm_propinsi] "; } ?>


18


Akhir Listing

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.



19





20







21

Gambar 7.20 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:

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


22


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:

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



23

Menampilkan Semua Data Kabupaten

NO KABUPATEN KOMINITAS

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";


24


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 : while ($data=mysql_fetch_array($qry)) { ....

Adalah kode perulangan yang berfungsi memasukkan semua informasi data dari tabel kabupaten ke dalam variabel $data. Kode :

Adalah kode penutup dari perulangan yang dilakukan sebelumnya, yaitu menggunakan perintah while. Kode : www.bunafit.com | www.nanangkristanto.com


25

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 :

Adalah kode yang digunakan untuk menampilkan informasi nama kabupaten ke dalam halaman web. Parameter nm_kabupaten didapat dari kolom di dalam tabel kabupaten. Kode :

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


26


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.



27

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.


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. www.bunafit.com | www.nanangkristanto.com

28






29


8. Pada baris ketiga, kolom pertama, tambahkan kode untuk menampilkan data propinsi. Berikut adalah kodenya:

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:


30


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

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: www.bunafit.com | www.nanangkristanto.com


31

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 Data Kabupaten Per Propinsi

PILIH PROPINSI

Propinsi Pilih

" target="_self">Tampil


32


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"; mysql_query($sql, $koneksi);

Adalah perintah SQL dan fungsi untuk menjalankan, gunanya adalah untuk menampilkan semua informasi dari tabel databuku. Kode : " target="_self">Tampil

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.



33

Gambar 7.33 Halaman utama untuk memilih 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. 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: www.bunafit.com | www.nanangkristanto.com

34


$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 :

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



35

Menampilkan Semua Data Kabupaten

NO KABUPATEN KOMINITAS

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:


36


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

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.




37



Gambar 7.38 Posisi baris kedua yang akan digunakan


38


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.

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


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 www.bunafit.com | www.nanangkristanto.com


39

cara menuliskan dengan perintah $data[‘nama_kolom’];, berikut adalah contoh kodenya: Edit

10. Pada menu Edit, Anda dapat membuat hyperlink secara langsung dari halaman kode. Caranya, tulis kode berikut pada baris ketiga: " target="_self"> Edit

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

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:


40


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 Menampilkan Semua Data Kabupaten



41

NO KABUPATEN PILIH

" target="_self"> Edit

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:

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. www.bunafit.com | www.nanangkristanto.com

42


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.

Gambar 7.44 Hasil menambahkan objek Hidden Field 4. Masuklah pada halaman kode (dari menu View Æ Code), kemudian di atas tag , ketikkan perintah tampil data.

Gambar 7.45 Tempat menuliskan kode tampil 5. Berikut adalah kode lengkap untuk menampilkan data terpilih. www.bunafit.com | www.nanangkristanto.com


43

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.

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)

Keterangan Name Init Val

Nilai KabupatenEditSim.php TxtKdKabH TxtKabupaten Nama Kabupaten TxtKomunitas


44


Button 1

Keterangan Label Action

Komunitas Simpan Submit Form

8. Dari pengaturan yang dilakukan seperti tabel di atas, maka tampilan formulir tampil akan menjadi seperti gambar berikut.

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


45

echo ""; } ?>

13. Berikut adalah kode lengkap yang didapat dari desain form masukan di atas, kode yang dihasilkan kurang lebih akan tampak seperti berikut. Listing Program Bab7/KabupatenEditFm.php Formulir Tambah Kabupaten

MENGUBAH DATA KABUPATEN

Propinsi <select name="CmbPropinsi">

46


} else { $pilih = ""; } echo ""; } ?>

Nama Kabupaten

Komunitas <? echo $data['komunitas']; ?>

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.



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
Form (If Register Global ON) $_POST['TxtKdKabH']; $_POST['CmbPropinsi']; $_POST['TxtKabupaten']; $_POST['TxtKomunitas'];

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


48


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


<strong>KODE	<strong>JUDUL BUKU	<strong>PENERBIT	<strong>PILIH
			" target="_self">Hapus

MASUKAN DATA KABUPATEN
Propinsi	<select name="CmbPropinsi"> $data[nm_propinsi] "; } ?>
Nama Kabupaten
Komunitas

PILIH PROPINSI
Pilih Propinsi	<select name="CmbPropinsi"> $data[nm_propinsi] "; } ?>

MENGUBAH DATA KABUPATEN
Propinsi	<select name="CmbPropinsi"> www.bunafit.com \| www.nanangkristanto.com 46 7 Langkah Menguasai Web PHP dan MySQL dengan Dreamweaver } else { $pilih = ""; } echo ""; } ?>
Nama Kabupaten
Komunitas	<? echo $data['komunitas']; ?>

MySQL dengan Dreamweaver Dasar Isi

Recommend Documents