1

Bab 4Lanjutan Membuat Program ManajemenMaster Data

Ini adalah lanjutan dari Bab 4 dalam Buku Panduan Proyek : Membuat Aplikasi WebKlinik Apotek dengan PHP, MySQL dan Dreamweaver, terbitan ALIF MEDIAYogyakarta, dengan penulis Bunafit Nugroho, tahun terbit 2014 edisi 1. Sengaja dibuatPDF untuk memandu Pemula yang belum mampu membuat Program Manajemen DataPetugas secara mandiri.

Meskipun di dalam CD Penyerta sudah kami berikan Source code lengkap, namun semuapembaca tetap harus mencoba mempraktekkan supaya kemampuan programming Andaterlatih.

4.5 Membuat Program Manajemen Data PetugasPetugas adalah bagian yang menggunakan Program Aplikasi Klinik dan Apotek yangKita buat ini, di dalamnya bisa sebagai Perawat, Kasir, ataupun Petugas Rekam Medikyang ada dalam lingkup Klinik. Di dalam data Petugas, terdapat User ID dan Passwordyang dipakai untuk login saat mengakses program. Untuk manajemen data Petugas, Kitananti akan membuat 4 file program, yaitu :

petugas_add.php : Form program untuk tambah data Petugas.

petugas_edit.php : Form program untuk memperbaiki data Petugas.

petugas_data.php : Halaman program untuk menampilkan data Petugas daridatabase, dari program ini terdapat menu Add Data untuk mengakses formprogram Tambah Data, menu Edit untuk memperbaiki data Petugas yangmungkin ada kesalahan, dan Delete untuk menghapus data.

petugas_delete.php : Berisi skrip program untuk menghapus data yang dipilihdari halaman petugas_data.php, yaitu dengan mengklik menu Delete.

4.5.1 Menu dan Kontrol Program PetugasLangkah pertama, Anda dapat membuat menu utama untuk mengakses form ProgramPetugas, link menu ini dibuat dalam file program menu.php, selanjutnya menambahkanskrip kontrol file program dalam file buka_file.php. Langkahnya:

1. Buka Windows Explorer.

2. Buka file menu.php lewat Dreamweaver.

3. Tambahkan menu Data Petugas, dan arahkan link-nya menuju ?page=Petugas-Data.

4. Buka file buka_file.php lewat Dreamweaver.

5. Dari halaman kode (Code view), tambahkan baris skrip program untuk menjalankanlink menu yang mengarah ke ?page=Petugas-Data :case 'Petugas-Data' :

if(!file_exists ("petugas_data.php")) die ("Empty Page!");include "petugas_data.php"; break;

6. Buat skrip buka file untuk menu yang alamatnya; ?page=Petugas-Add :case 'Petugas-Add' :

if(!file_exists ("petugas_add.php")) die ("Empty Page!");include "petugas_add.php"; break;

7. Buat skrip buka file untuk menu yang alamatnya; ?page=Petugas-Edit :case 'Petugas-Edit' :

if(!file_exists ("petugas_edit.php")) die ("Empty Page!");include "petugas_edit.php"; break;

8. Buat skrip buka file untuk menu yang alamatnya; ?page=Petugas-Delete :

2

case 'Petugas-Delete' :if(!file_exists ("petugas_delete.php")) die ("Empty Page!");include "petugas_delete.php"; break;

9. Setelah selesai, simpan programnya (Ctrl + S).

4.5.2 Tambah Data PetugasPertama Kita akan membuat form program Tambah Data Petugas, pengertiannya samadengan program Simpan Data. Perintah SQL yang digunakan untuk menyimpan datadari form input ke dalam database MySQL adalah adalah INSERT. Untuk data kodePetugas, akan dibuat otomatis dari program, yaitu; P001, P002, P003 dan seterusnya.Data password sebelum disimpan akan dienkrip (diacak) dengan memakai perintahenkripsi MD5 yang dimiliki MySQL. Berikut panduannya:

1. Buka Dreamweaver.

2. Buat dokumen baru (tekan Ctrl + N). Dari tab General, klik Dynamic Page, lalu kliktipe halaman PHP.

3. Simpan pada folder kerja (Klinik-Apotek) dengan nama petugas_add.php.

4. Masuk pada halaman kode (Code view), hapus semua kode HTML.

5. Masuk pada halaman desain (Design view), tambahkan area Form dari panel Forms,lalu atur alamat Action-nya dari panel Properties.

Action : <?php $_SERVER['PHP_SELF']; ?>

Target : _self

Method : POST

Pada bagian action, arti dari <?php $_SERVER['PHP_SELF']; ?> adalah alamattargetnya menuju form program itu sendiri. Cara lain, Anda dapat mengisi alamatAction-nya dengan alamat ?page=Petugas-Add, alamat ini yang nantinya akandijalankan dari file buka_file.php untuk mengakses nama file dari form program itusendiri, yaitu petugas_add.php.

6. Setelah pengaturan form, simpan lagi programnya, tekan Ctrl + S.

7. Dari panel Common, tambahkan tabel untuk desain form, sebanyak 8 baris dan 3kolom, lalu klik tombol Go. Seperti gambar berikut:

Gambar 4.1 Desain awal tabel kerangka untuk form Tambah Petugas

8. Masuklah pada halaman kode (Code view), sisipkan kode efek CSS pada tag table,seperti contoh berikut yang dicetak tebal.<table class="table-list" width="650" border="0" cellspacing="1"cellpadding="3">

9. Kembali ke halaman desain (Design view). Pada tabel yang sudah dibuat, gabungkan(merger) 3 kotak dari baris tabel paling atas (header). Caranya, pilih 3 kotak daribaris bagian atas, klik kanan pada area yang sudah terpilih (3), lalu klik menu MergeCells (4).

3

Gambar 4.2 Ilustrasi langkah menggabungkan (merger cell) area kolom tabel

10. Pada bagian header (baris paling atas) yang sudah digabung, tambahkan judul (misal;TAMBAH DATA PETUGAS).

11. Buat judul form isian data pada kolom bagian kiri, hasilnya seperti berikut:

Gambar 4.3 Desain tabel kerangka untuk form Tambah Petugas

12. Pada baris Kode bagian kanan, tambahkan form masukan berupa Text Field daripanel Forms, lalu atur nilainya dari panel Properties.

Char width : 10

Max chars : 10

Init Val : <?php echo $dataKode; ?>

Gambar 4.4 Membuat form masukan data Kode dan mengatur dari jendela Properties

Jika ditulis dari dalam halaman kode, skrip kode otomatis yang terbentuk padavariabel $dataKode ditulis seperti yang dicetak tebal berikut ini:<input name="textfield" value="<?php echo $dataKode; ?>" size="10"maxlength="10"/>

13. Pada baris Nama Petugas, tambahkan form masukan berupa Text Field daripanel Forms, lalu atur nilainya dari panel Properties.

TextField : txtNama

Char width : 70

Max chars : 100

Init Val : <?php echo $dataNama; ?>

4

Gambar 4.5 Membuat form masukan data Nama Petugas

14. Pada baris No. Telepon, tambahkan form masukan berupa Text Field dari panelForms, lalu atur nilainya dari panel Properties.

TextField : txtTelepon

Char width : 60

Max chars : 20

Init Val : <?php echo $dataTelepon; ?>

Gambar 4.6 Membuat form masukan data No. Telepon

15. Pada baris Username, tambahkan kotak masukan berupa Text Field dari panelForms, lalu atur nilainya dari panel Properties.

TextField : txtUsername

Char width : 60

Max chars : 20

Init Val : <?php echo $dataUsername; ?>

Gambar 4.7 Membuat form masukan data Username

16. Pada baris Password, tambahkan form masukan berupa Text Field dari panelForms, lalu atur nilai propertinya.

TextField : txtPassword

Char width : 60

Max chars : 20

5

Gambar 4.8 Membuat form masukan data Password

17. Pada baris Level, tambahkan form masukan berupa List/Menu , lalu atur nilaipropertinya.

List/Menu : cmbSatuan

Gambar 4.9 Membuat form masukan data Level login

Masih pada List/Menu Level, sekarang masuklah pada halaman kode (Code view).Lengkapi kode programnya.<select name="cmbLevel"></select>

Menjadi :<select name="cmbLevel"> <option value="KOSONG">....</option> <?php $pilihan = array("Klinik", "Apotek", "Admin"); foreach ($pilihan as $nilai) {

if ($dataLevel==$nilai) {$cek=" selected";

} else { $cek = ""; }echo "<option value='$nilai' $cek>$nilai</option>";

} ?></select>

Skrip program PHP di atas dipakai untuk membuat pilihan pada form pilihan Level,yang berisi pilihan; Klinik, Apotek, dan Admin.

18. Pada baris paling bawah, tambahkan tombol dari objek Button , lalu atur nilaipropertinya.

Button Name : btnSimpan

Value : SIMPAN

Action : Submit form

Gambar 4.10 Membuat tombol Simpan, dan mengatur dari Properties

19. Simpan lagi programnya, tekan Ctrl + S.

6

Setelah selesai membuat form Tambah Data Petugas, Anda dapat melanjutkanmembuat skrip PHP yang berfungsi untuk menyimpan data yang telah dimasukan dariform ke dalam database MySQL. Di dalam skrip program simpan data ini, akandilengkapi dengan validasi form dan perintah SQL utamanya menggunakan INSERT.Berikut langkahnya:

1. Dari Dreamweaver, buka lagi file petugas_add.php.

2. Masuklah pada halaman kode (Code view), buatlah blok skrip buka tutup PHP padabaris awal program. Buat juga kode untuk memanggil file inc.seslogin.php. Lihatgambar di bawah, panah 1.<?phpinclude_once "library/inc.seslogin.php";?>

3. Buat blok kode saat tombol Simpan/ Submit (btnSimpan) diklik. Lihat gambar dibawah, panah 2. Skripnya :# Tombol Simpan diklikif(isset($_POST['btnSimpan'])){}

4. Buat skrip untuk membuat nilai pada form input, yaitu berupa nilai kosong saat formpertama kali dijalankan, dan berguna juga untuk memberi nilai data dari form saaterror setelah di-Submit. Kodenya :$dataKode = buatKode("petugas", "P");

$dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] : '';

$dataUsername = isset($_POST['txtUsername']) ?$_POST['txtUsername'] : '';

$dataPassword = isset($_POST['txtPassword']) ?$_POST['txtPassword'] : '';

$dataTelepon = isset($_POST['txtTelepon']) ? $_POST['txtTelepon']: '';

$dataLevel = isset($_POST['cmbLevel']) ? $_POST['cmbLevel'] : '';

Ilustrasi penempatan kode lihat pada panah nomor 3 :

Gambar 4.11 Membuat skrip program temporary untuk memberi nilai pada form

Kode $dataKode.$dataKode = buatKode("petugas", "P");

Pada skrip di atas berguna untuk membuat kode otomatis dari tabel petugas, denganinisial P. Perintah buatKode() adalah nama fungsinya, yang sudah dibuat dalam filelibrari bernama inc.library.php.Dari kode otomatis yang terbentuk, datanya dimasukkan ke dalam kotak formmasukan Kode petugas, yaitu;

7

<input name="textfield" value="<?php echo $dataKode; ?>" size="10"maxlength="10"/>

Dari skrip di atas, dari halaman desain cara membuatnya adalah:

Gambar 4.12 Contoh pemanfaatkan variable temporary dari data form, isinyadikembalikan ke form lagi

Kode $dataNama$dataNama= isset($_POST['txtNama']) ? $_POST['txtNama'] : '';

Pada skrip di atas, variabel $dataNama akan diisi dengan data dari form masukanNama Petugas (txtNama), atau akan diisi data kosong jika form belum pernah submit(klik tombol Simpan). Selanjutnya isinya akan ditampilkan ke form, seperti contohsebelumnya.

5. Selanjutnya An dapat membuat skrip program simpan data ke dalam database,skripnya dibuat dalam blok kode if(isset($_POST['btnSimpan'])){ ... }. Pertama,buat deklarasi variabel array bernama $pesanError untuk menyimpan pesan errordari form. Contoh:$pesanError = array();

6. Buat skrip validasi jika form Nama Petugas kosong (belum diisi data). Skripnya:if (trim($_POST['txtNama'])=="") {$pesanError[] = "Data <b>Nama Petugas</b> tidak boleh kosong!";}

Contoh ilustrasinya, lihat panah 2:

Gambar 4.13 Ilustrasi contoh membuat skrip validasi form

7. Buat skrip validasi jika form No. Telepon kosong (belum diisi data). Skripnya:if (trim($_POST['txtTelepon'])=="") {

$pesanError[] = "Data <b>No. Telepon</b> tidak boleh kosong !";}

8. Buat skrip validasi jika form Username kosong (belum diisi data). Skripnya:if (trim($_POST['txtUsername'])=="") {

$pesanError[] = "Data <b>Username</b> tidak boleh kosong !";}

9. Buat skrip validasi jika form Password kosong (belum diisi data). Skripnya:if (trim($_POST['txtPassword'])=="") {

$pesanError[] = "Data <b>Password</b> tidak boleh kosong !";

8

}

10. Buat skrip validasi jika form Level kosong (belum diisi data). Skripnya:if (trim($_POST['cmbLevel'])=="KOSONG") {

$pesanError[] = "Data <b>Level login</b> belum dipilih !";}

11. Buat skrip program untuk membaca semua form masukan, datanya disimpan dengannama variabel form. Skripnya :$txtNama = $_POST['txtNama'];$txtUsername= $_POST['txtUsername'];$txtPassword= $_POST['txtPassword'];$txtTelepon = $_POST['txtTelepon'];$cmbLevel = $_POST['cmbLevel'];

Keterangan: Skrip baca data form di atas nantinya dipakai dalam perintah SQLINSERT, yaitu saat membuat program simpan data ke database.

12. Buat skrip validasi supaya nama petugas yang sama tidak dimasukkan lagi. Jadi, jikadi database sudah ada, buat pesan error. Skripnya :$cekSql="SELECT * FROM petugas WHERE username='$txtUsername'";$cekQry=mysql_query($cekSql, $koneksidb) or die ("Eror Query".mysql_error());if(mysql_num_rows($cekQry)>=1){

$pesanError[] = "Username <b> $txtUsername </b> sudah ada, gantidengan yang lain";}

Keterangan: Dengan skrip di atas, maka tidak akan ada username yang dibuat samapersis. Jika sudah pernah dibuat, maka pesan error akan ditampilkan.

13. Buat skrip program untuk menampilkan pesan error jika ditemukan dari bagian skripvalidasi form. Skripnya :if (count($pesanError)>=1 ){

echo "<div class='mssgBox'>";echo "<img src='images/attention.png'> <br><hr>";

$noPesan=0;foreach ($pesanError as $indeks=>$pesan_tampil) {$noPesan++;

echo "&nbsp;&nbsp; $noPesan. $pesan_tampil<br>";}

echo "</div> <br>";}else {

# SKRIP SIMPAN DATA KE DATABASE.}

14. Buat skrip program berisi perintah SQL INSERT untuk menyimpan data dari form kedatabase. Jadi, jika sudah tidak ada error atau kesalahan data (form masukan terisisemua), data akan disimpan. Skripnya :$kodeBaru= buatKode("petugas", "P");$mySql = "INSERT INTO petugas (kd_petugas, nm_petugas,

no_telepon, username, password, level)VALUES ('$kodeBaru',

'$txtNama','$txtTelepon','$txtUsername',MD5('$txtPassword'),'$cmbLevel')";

$myQry=mysql_query($mySql, $koneksidb)or die ("Gagal query".mysql_error());

if($myQry){echo "<meta http-equiv='refresh' content='0; url=?page=Petugas-

Data'>";}exit;

Keterangan: Saat menyimpan data, dalam perintah SQL dilengkapi dengan perintahMD5, yaitu MD5(‘$txtPassword’), sehingga data password (kata kunci untuk login)yang diinput dari form akan dienkripsi menjadi kode acak.

9

15. Simpan kembali programnya, Ctrl + S.

Gambar 4.14 Tampilan hasil desain form program Tambah Data Petugas

Untuk menjalankan halaman form program Tambah Data Petugas di atas, Anda haruslogin sebagai Admin. Klik menu Data Petugas sebelah kiri, lalu klik ikon Add Data(Tambah) yang ada di halaman program Tampil Data Petugas. Jika program TampilData belum dibuat, Anda dapat menjalankan program tambah data lewat browser, ketikalamat berikut; http://localhost/Klinik-Apotek/?page=Petugas-Add. Berikut contohtampilannya:

Gambar 4.15 Tampilan halaman program Tambah Petugas

Lihatlah pada kotak masukan Kode, di sana kotak masukannya tidak bisa diketik, atauobjeknya nonaktif (mati). Untuk membuat seperti itu, Anda dapat menambahkan kodereadonly="readonly" pada tag input bagian kode: contoh:

<input name="textfield" value="<?php echo $dataKode; ?>" size="10"maxlength="10" readonly="readonly"/>

4.5.3 Tampil Data PetugasMenu untuk menjalankan form program Tambah Data Petugas berada di dalamhalaman program Tampil Data Petugas, di sana akan dibuat tombol Add Data(Tambah). Halaman tampil data juga sekaligus berisi menu Edit untuk mengakses formprogram Ubah Data Petugas dan menu Delete untuk menghapus data. Contohtampilannya:

10

Gambar 4.16 Tampilan halaman Tampil Data Petugas, menampilkan semua dataPetugas

Dari tampilan di atas, perintah SQL yang digunakan untuk menampilkan data daridatabase ke layar adalah SELECT, kemudian datanya diurai dalam kerangka tabel yangdidesain lewat Dreamweaver. Langkah membuat program di atas adalah:

1. Buka Dreamweaver.

2. Buat dokumen baru (tekan Ctrl + N), lalu buka tipe halaman PHP.

3. Masuk pada halaman kode (Code), hapus semua kode HTML.

4. Simpan programnya (Ctrl + S) pada folder utama kerja Klinik-Apotek dengan namapetugas_data.php.

5. Dari panel Common, tambahkan tabel untuk desain tampilan utama, sebanyak 5 barisdan 1 kolom, lebarnya 700 pixels, pada bagian header pilih None. Seperti berikut:

Gambar 4.17 Merancang tabel untuk program Tampil Data Petugas

6. Tambahkan judul dengan font header 1 (misal; DATA PETUGAS), dan judul padabaris paling bawah untuk paging (halaman).

7. Tambahkan gambar berlogo Add Data/ Tambah (btn_add_data.png) pada baris ke-2,filenya ada di folder images. Caranya, klik menu Insert, klik Image, lalu cari filegambarnya.

11

Gambar 4.18 Desain tabel utama untuk menampilkan data Petugas

16. Pilih atau klik pada gambar ikon Add Data/ Tambah, lalu buat target link menunyake alamat berikut:?page=Petugas-Add

Ilustrasi gambarnya :

Gambar 4.19 Membuat target menu pada gambar ikon Add Data

17. Masuklah pada halaman kode (Code view), buatlah blok skrip buka tutup PHP padabaris awal program, kemudian buat skrip untuk memanggil file inc.seslogin.php.<?phpinclude_once "library/inc.seslogin.php";

?>

18. Dalam kalang PHP (<?php dan ?>), buat skrip program yang berfungsi untuk paging,yaitu memecah jumlah data ke dalam bentuk halaman. Skripnya :$row = 20;$hal = isset($_GET['hal']) ? $_GET['hal'] : 0;$pageSql = "SELECT * FROM petugas";$pageQry = mysql_query($pageSql, $koneksidb)

or die ("error paging: ".mysql_error());$jml = mysql_num_rows($pageQry);$max = ceil($jml/$row);

8. Dari halaman tampilan desain (Design view). Tambahkan tabel baru, yaitu untukmenyusun tampilan data ke layar, tabel ini dibuat pada baris ke-3 dari tabel utama.Kolom dari tabel baru disesuaikan data yang akan ditampilkan, yaitu dengan 2 barisdan 5 kolom data.

Gambar 4.20 Merancang tabel untuk menampilkan data Petugas ke layar

12

Gambar 4.21 Hasil menambahkan tabel untuk menampilkan data ke layar

9. Pada Tabel Tampil Data, tambahkan judul dengan font bold sesuai dengan data yangakan ditampilkan, kemudian atur lebar kotaknya menyesuiakan datanya.

10. Pada 2 kolom bagian kanan digabung (merger), kemudian di bawah Tools, dibuatlabel Edit dan Delete, nanti akan dipakai untuk menu.

Gambar 4.22 Desain tabel untuk menampilkan data dan desain menu

11. Masuklah pada halaman kode (Code view), butlah skrip program untuk melakukanquery ke database, yaitu dari tabel petugas dengan perintah SELECT. Skripprogramnya diletakkan di bawah </tr> dan sebelum <tr> baris kedua dari tabeltampil data.<?php$mySql = "SELECT * FROM petugas ORDER BY kd_petugas ASC";$myQry = mysql_query($mySql, $koneksidb)

or die ("Query salah : ".mysql_error());$nomor = 0;while ($myData = mysql_fetch_array($myQry)) {

$nomor++;$Kode = $myData['kd_petugas'];

?>

Lihat ilustrasinya, skrip di atas letaknya ada pada panah nomor 2.

13

Gambar 4.23 Ilustrasi meletakkan skrip program query ke database, panah (2)

Untuk lebih jelasnya, berikut penjelasannya:

(1) : Baris pertama untuk judul kolom data yang ditampilkan; No, NamaPetugas, No. Telepon, Username, Level, dan Tools.

(2) : Skrip untuk mengambil data Petugas dari database (tabel petugas).

(3) : Kotak untuk menampilkan data Petugas ke layar.

(4) : Untuk membuat menu Edit dan Delete.

(5) : Akhir perulangan while (}) dari skrip query ke database, akhir dariperintah yang kami tandai dengan nomor (2).

12. Buat skrip penutup while (<?php } ?>) di bawah tag </tr>, seperti panah nomor (5)dari gambar di atas, skripnya adalah:<?php } ?>

13. Pada baris kedua dari tabel tampil data digunakan untuk menampilkan informasi datadari database. Sekarang, lengkapi skrip di bawah: <tr>

<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td width="8%" align="center">Edit</td><td width="8%" align="center">Delete</td>

</tr>

Menjadi: <tr>

<td><?php echo $nomor; ?></td><td><?php echo $myData['nm_petugas']; ?></td><td><?php echo $myData['no_telepon']; ?></td><td><?php echo $myData['username']; ?></td><td><?php echo $myData['level']; ?></td><td width="8%" align="center">Edit</td><td width="8%" align="center">Delete</td>

</tr>

Ilustrasi gambarnya :

14

Gambar 4.24 Ilustrasi meletakkan skrip program menampilkan data

14. Pada bagian Jumlah Data:, buat skrip berikut untuk menampilkan jumlah baris datayang ditampilkan.<?php echo $jml; ?>

Ilustrasinya gambarnya :

Gambar 4.25 Ilustrasi meletakkan skrip program jumlah baris data

15. Untuk membuat menu nomor halaman data (Paging), Anda dapat membuat tempatbaru di samping kanan Jumlah Data.

Masuklah ke halaman Design, klik kanan pada baris terakhir (di samping labelJumlah Data), klik menu Table dan klik Split Cell.

Gambar 4.26 Split Cell untuk memecah kolom

Dari jendela Split Cell yang tampil, pilih opsi Columns, masukkan jumlahkolomnya adalah 2, lalu klik tombol OK.

16. Sekarang, masuklah ke halaman kode (Code view) lagi.

17. Pada bagian Halaman ke, buat skrip untuk menampilkan nomor paging (pembagianhalaman).<strong>Halaman ke :</strong><?phpfor ($h = 1; $h <= $max; $h++) {

$list[$h] = $row * $h - $row;echo " <a href='?page=Petugas-Data&hal=$list[$h]'>$h</a> ";

}?>

15

Ilustrasi gambarnya :

Gambar 4.27 Ilustrasi meletakkan skrip program untuk paging

18. Kembali ke halaman tampilan (Design view), pilih teks Edit, lalu buat target linkmenunya ke alamat berikut:?page=Petugas-Edit&Kode=<?php echo $Kode; ?>

Ilustrasi gambarnya :

Gambar 4.28 Ilustrasi meletakkan kode untuk target link menu Edit

19. Seperti cara sebelumnya, pilih teks Delete, lalu buat link menunya ke alamat berikut:?page=Petugas-Delete&Kode=<?php echo $Kode; ?>

20. Simpan kembali programnya, tekan Ctrl + S.

Gambar 4.29 Tampilan hasil desain program Tampil Data Petugas

4.5.4 Ubah Data PetugasSelanjutnya Kita akan membuat program Ubah Data Petugas, atau form program untukmemperbaiki data Petugas. Menu Edit yang ada di setiap baris data dalam programTampil Data dipakai untuk memilih data yang akan diubah (diperbaiki), datanya akanditampilkan kembali pada form. Contoh ilustrasinya:

16

Gambar 4.30 Ilustrasi langkah memperbaiki data Petugas, klik menu Edit dari halamanprogram Tampil Data

Dari halaman program Tampil Data Petugas dibuat menu Edit pada setiap baris data,target link-nya mengarah ke alamat ?page=Petugas-Edit&Kode=xxx, parameter xxxadalah kode data Petugas yang dipilih untuk di-edit. Sekarang, Anda dapat membuat fileprogram petugas_edit.php dengan cara memodifikasi dari file petugas_add.php. Untukperintah SQL yang dipakai, menyimpan data lama hasil modifikasi dapat dilakukandengan perintah UPDATE. Caranya:

1. Buka file petugas_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang dengan nama baru, yaitu; petugas_edit.php.

3. Masuk ke halaman desain (Design view), lalu perbarui informasi judul pada bagianheader menjadi “UBAH DATA PETUGAS”.

Gambar 4.31 Membuat judul halaman program

4. Pada baris Kode, tambahkan form HiddenField untuk merekam data kodesupaya bisa dieksekusi dalam perintah SQL, atur nilai propertinya.

TextField : txtKode

Value : <?php echo $dataKode; ?>

17

Gambar 4.32 Menambahkan form HiddenField untuk merekam data kode Petugas daridatabase

5. Pada baris Username, tambahkan form HiddenField , lalu atur nilai propertinya.

TextField : txtUsernameLm

Value : <?php echo $myData['username']; ?>

Gambar 4.33 HiddenField untuk merekam Username dari database

6. Pada baris Password, tambahkan objek HiddenField , lalu atur nilai propertinya.

TextField : txtPassLama

Value : <?php echo $myData['password']; ?>

Gambar 4.34 HiddenField untuk merekam data Password dari database

7. Simpan lagi programnya (tekan Ctrl + S), lalu masuklah ke halaman kode (Code).

8. Pada skrip program validasi nama petugas, ganti perintah SQL-nya menjadi sepertikode berikut:$cekSql="SELECT * FROM petugas WHERE username='$txtUsername'

AND NOT(username='".$_POST['txtUsernameLm']."')";

9. Gantilah query(perintah SQL) dari yang semula memakai INSERT menjadiUPDATE, yaitu perintah untuk menyimpan kembali data lama ke dalam databasetabel petugas. Skripnya :# Cek Password baruif (trim($txtPassword)=="") {

$sqlPasword = ", password='$txtPassLama'";}else {

$sqlPasword = ", password ='".md5($txtPassword)."'";}

# SIMPAN DATA KE DATABASE$mySql = "UPDATE petugas SET nm_petugas='$txtNama',username='$txtUsername',

no_telepon='$txtTelepon', level='$cmbLevel'$sqlPaswordWHERE kd_petugas='".$_POST['txtKode']."'";

$myQry=mysql_query($mySql, $koneksidb)or die ("Gagal query".mysql_error());

if($myQry){echo "<meta http-equiv='refresh' content='0; url=?page=Petugas-

Data'>";}exit;

18

10. Pada bagian bawah program, buatlah skrip untuk mengambil data Petugas daridatabase sesuai dengan kode yang didapat dari URL (?page=Petugas-Edit&Kode=xxx), alamat URL tersebut dikirim saat mengklik menu Edit di halamanTampil Petugas. Skripnya :# TAMPILKAN DATA DARI DATABASE$Kode = isset($_GET['Kode']) ? $_GET['Kode'] :$_POST['txtKode'];$mySql = "SELECT * FROM petugas WHERE kd_petugas='$Kode'";$myQry = mysql_query($mySql, $koneksidb)

or die ("Query ambil data salah : ".mysql_error());$myData = mysql_fetch_array($myQry);

Berikut ilustrasinya, lihat panah nomor 1 :

Gambar 4.35 Posisi skrip program membaca data petugas dari database

11. Setelah skrip program membaca database (lihat gambar di atas, panah nomor 2), buatskrip program untuk membaca data dari database untuk ditampung ke variabel form,hasilnya akan ditampilkan pada form input. Skripnya :// Data Variabel Temporary (sementara)$dataKode = $myData['kd_petugas'];

$dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] :$myData['nm_petugas'];

$dataUsername = isset($_POST['txtUsername']) ?$_POST['txtUsername'] : $myData['username'];

$dataTelepon = isset($_POST['txtTelepon']) ? $_POST['txtTelepon']: $myData['no_telepon'];

$dataLevel = isset($_POST['cmbLevel']) ?$_POST['cmbLevel'] : $myData['level'];

12. Simpan kembali programnya, tekan Ctrl + S.

Gambar 4.36 Tampilan hasil desain form program Ubah Data Petugas

19

4.5.5 Hapus Data PetugasUntuk membuat program Hapus Data Petugas Anda memerlukan menu untuk memilihrecord (baris data) data yang akan dihapus. Pada halaman program Tampil Data Kitasudah membuat menu dengan teks Delete. Sekarang Anda bisa langsung membuat skripprogram dengan nama file petugas_delete.php, perintah SQL yang digunakan adalahDELETE.

1. Buka Dreamweaver.

2. Buat dokumen baru dengan tipe PHP, lalu masuklah ke halaman kode (Code).

3. Hapus semua kode yang ada di dalamnya, lalu ketikkan skrip program berikut:<?phpinclude_once "library/inc.seslogin.php";

// Periksa ada atau tidak variabel Kode pada URL (alamat browser)if(isset($_GET['Kode'])){

// Hapus data sesuai Kode yang didapat di URL$mySql = "DELETE FROM petugas

WHERE kd_petugas='".$_GET['Kode']."'";

$myQry = mysql_query($mySql, $koneksidb)or die ("Eror hapus data".mysql_error());

if($myQry){// Refresh halamanecho "<meta http-equiv='refresh' content='0;

url=?page=Petugas-Data'>";}

}else {

// Jika tidak ada data Kode ditemukan di URLecho "<b>Data yang dihapus tidak ada</b>";

}?>

4. Simpan file program di atas dengan nama petugas_delete.php.

Supaya pada saat menu Delete diklik datanya tidak langsung terhapus, maka Anda perlumenambahkan notifikasi peringatan. Jadi, saat menu Delete diklik, maka akan adajendela peringatan bertuliskan “ Anda yakin akan menghapus data ini ...? “, baru setelahklik OK/Yes maka file program petugas_delete.php akan dijalankan, dan data Petugasakan dihapus dari database. Caranya:

1. Buka lagi file program petugas_data.php.

2. Masuklah pada halaman kode (Code view), carilah baris kode link untuk menuDelete.

3. Sisipkan skrip perintah onClick, seperti berikut :<a href="?page=Petugas-Delete&Kode=<?php echo $Kode; ?>"target="_self" onclick="return confirm('ANDA YAKIN AKAN MENGHAPUSDATA PETUGAS INI ... ?')"> Delete</a>

Berikut contoh tampilannya:

Gambar 4.37 Kotak notifikasi saat ada data Petugas akan dihapus

4. Simpan lagi programnya, tekan Ctrl + S.

Penulis : Bunafit Nugrohowww.bunafitKomputer.com