Bab 4

Lanjutan Membuat Program Manajemen

Master Data
Ini adalah lanjutan dari Bab 4 dalam Buku Panduan Proyek : Membuat Aplikasi Web
Klinik Apotek dengan PHP, MySQL dan Dreamweaver, terbitan ALIF MEDIA
Yogyakarta, dengan penulis Bunafit Nugroho, tahun terbit 2014 edisi 1. Sengaja dibuat
PDF untuk memandu Pemula yang belum mampu membuat Program Manajemen Data
Petugas secara mandiri.
Meskipun di dalam CD Penyerta sudah kami berikan Source code lengkap, namun semua
pembaca tetap harus mencoba mempraktekkan supaya kemampuan programming Anda
terlatih.

4.5 Membuat Program Manajemen Data Petugas

Petugas adalah bagian yang menggunakan Program Aplikasi Klinik dan Apotek yang
Kita buat ini, di dalamnya bisa sebagai Perawat, Kasir, ataupun Petugas Rekam Medik
yang ada dalam lingkup Klinik. Di dalam data Petugas, terdapat User ID dan Password
yang dipakai untuk login saat mengakses program. Untuk manajemen data Petugas, Kita
nanti 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 dari
database, dari program ini terdapat menu Add Data untuk mengakses form
program Tambah Data, menu Edit untuk memperbaiki data Petugas yang
mungkin ada kesalahan, dan Delete untuk menghapus data.
petugas_delete.php : Berisi skrip program untuk menghapus data yang dipilih
dari halaman petugas_data.php, yaitu dengan mengklik menu Delete.

4.5.1 Menu dan Kontrol Program Petugas

Langkah pertama, Anda dapat membuat menu utama untuk mengakses form Program
Petugas, link menu ini dibuat dalam file program menu.php, selanjutnya menambahkan
skrip 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=PetugasData.
4. Buka file buka_file.php lewat Dreamweaver.
5. Dari halaman kode (Code view), tambahkan baris skrip program untuk menjalankan
link 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 :

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 Petugas

Pertama Kita akan membuat form program Tambah Data Petugas, pengertiannya sama
dengan program Simpan Data. Perintah SQL yang digunakan untuk menyimpan data
dari form input ke dalam database MySQL adalah adalah INSERT. Untuk data kode
Petugas, akan dibuat otomatis dari program, yaitu; P001, P002, P003 dan seterusnya.
Data password sebelum disimpan akan dienkrip (diacak) dengan memakai perintah
enkripsi MD5 yang dimiliki MySQL. Berikut panduannya:
1. Buka Dreamweaver.
2. Buat dokumen baru (tekan Ctrl + N). Dari tab General, klik Dynamic Page, lalu klik
tipe 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 alamat
targetnya menuju form program itu sendiri. Cara lain, Anda dapat mengisi alamat
Action-nya dengan alamat ?page=Petugas-Add, alamat ini yang nantinya akan
dijalankan dari file buka_file.php untuk mengakses nama file dari form program itu
sendiri, 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 3
kolom, 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 dari
baris bagian atas, klik kanan pada area yang sudah terpilih (3), lalu klik menu Merge
Cells (4).

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
panel Forms, lalu atur nilainya dari panel Properties.
Char width : 10
Max chars : 10
Init Val
: <?php echo $dataKode; ?>

dari

Gambar 4.4 Membuat form masukan data Kode dan mengatur dari jendela Properties
Jika ditulis dari dalam halaman kode, skrip kode otomatis yang terbentuk pada
variabel $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
panel Forms, lalu atur nilainya dari panel Properties.
TextField
: txtNama
Char width : 70
Max chars : 100
Init Val
: <?php echo $dataNama; ?>

dari

Gambar 4.5 Membuat form masukan data Nama Petugas

14. Pada baris No. Telepon, tambahkan form masukan berupa Text Field
Forms, lalu atur nilainya dari panel Properties.
TextField
: txtTelepon
Char width : 60
Max chars : 20
Init Val
: <?php echo $dataTelepon; ?>

dari panel

Gambar 4.6 Membuat form masukan data No. Telepon

15. Pada baris Username, tambahkan kotak masukan berupa Text Field
Forms, lalu atur nilainya dari panel Properties.
TextField
: txtUsername
Char width : 60
Max chars : 20
Init Val
: <?php echo $dataUsername; ?>

dari panel

Gambar 4.7 Membuat form masukan data Username

16. Pada baris Password, tambahkan form masukan berupa Text Field
Forms, lalu atur nilai propertinya.
TextField
: txtPassword
Char width : 60
Max chars : 20

dari panel

Gambar 4.8 Membuat form masukan data Password

17. Pada baris Level, tambahkan form masukan berupa List/Menu
propertinya.
List/Menu
: cmbSatuan

, lalu atur nilai

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
propertinya.
Button Name : btnSimpan
Value
: SIMPAN
Action
: Submit form

, lalu atur nilai

Gambar 4.10 Membuat tombol Simpan, dan mengatur dari Properties

19. Simpan lagi programnya, tekan Ctrl + S.

Setelah selesai membuat form Tambah Data Petugas, Anda dapat melanjutkan
membuat skrip PHP yang berfungsi untuk menyimpan data yang telah dimasukan dari
form ke dalam database MySQL. Di dalam skrip program simpan data ini, akan
dilengkapi 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 pada
baris awal program. Buat juga kode untuk memanggil file inc.seslogin.php. Lihat
gambar di bawah, panah 1.
<?php
include_once "library/inc.seslogin.php";
?>

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

4. Buat skrip untuk membuat nilai pada form input, yaitu berupa nilai kosong saat form
pertama kali dijalankan, dan berguna juga untuk memberi nilai data dari form saat
error 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, dengan
inisial P. Perintah buatKode() adalah nama fungsinya, yang sudah dibuat dalam file
librari bernama inc.library.php.
Dari kode otomatis yang terbentuk, datanya dimasukkan ke dalam kotak form
masukan Kode petugas, yaitu;

<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, isinya
dikembalikan ke form lagi

Kode $dataNama

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

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

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 error
dari 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 !";

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 dengan
nama 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 SQL
INSERT, yaitu saat membuat program simpan data ke database.
12. Buat skrip validasi supaya nama petugas yang sama tidak dimasukkan lagi. Jadi, jika
di 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, ganti
dengan yang lain";
}

Keterangan: Dengan skrip di atas, maka tidak akan ada username yang dibuat sama
persis. Jika sudah pernah dibuat, maka pesan error akan ditampilkan.
13. Buat skrip program untuk menampilkan pesan error jika ditemukan dari bagian skrip
validasi 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 ke
database. Jadi, jika sudah tidak ada error atau kesalahan data (form masukan terisi
semua), 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=PetugasData'>";
}
exit;

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

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 harus
login sebagai Admin. Klik menu Data Petugas sebelah kiri, lalu klik ikon Add Data
(Tambah) yang ada di halaman program Tampil Data Petugas. Jika program Tampil
Data belum dibuat, Anda dapat menjalankan program tambah data lewat browser, ketik
alamat berikut; http://localhost/Klinik-Apotek/?page=Petugas-Add. Berikut contoh
tampilannya:

Gambar 4.15 Tampilan halaman program Tambah Petugas

Lihatlah pada kotak masukan Kode, di sana kotak masukannya tidak bisa diketik, atau
objeknya nonaktif (mati). Untuk membuat seperti itu, Anda dapat menambahkan kode
readonly="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 Petugas

Menu untuk menjalankan form program Tambah
halaman program Tampil Data Petugas, di sana
(Tambah). Halaman tampil data juga sekaligus berisi
program Ubah Data Petugas dan menu Delete
tampilannya:

Data Petugas berada di dalam

akan dibuat tombol Add Data
menu Edit untuk mengakses form
untuk menghapus data. Contoh

Gambar 4.16 Tampilan halaman Tampil Data Petugas, menampilkan semua data
Petugas
Dari tampilan di atas, perintah SQL yang digunakan untuk menampilkan data dari
database ke layar adalah SELECT, kemudian datanya diurai dalam kerangka tabel yang
didesain 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 nama
petugas_data.php.
5. Dari panel Common, tambahkan tabel untuk desain tampilan utama, sebanyak 5 baris
dan 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 pada
baris 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 file
gambarnya.

10

Gambar 4.18 Desain tabel utama untuk menampilkan data Petugas

16. Pilih atau klik pada gambar ikon Add Data/ Tambah, lalu buat target link menunya
ke 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 pada
baris awal program, kemudian buat skrip untuk memanggil file inc.seslogin.php.
<?php
include_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 untuk
menyusun 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 baris
dan 5 kolom data.

Gambar 4.20 Merancang tabel untuk menampilkan data Petugas ke layar

11

Gambar 4.21 Hasil menambahkan tabel untuk menampilkan data ke layar

9. Pada Tabel Tampil Data, tambahkan judul dengan font bold sesuai dengan data yang
akan ditampilkan, kemudian atur lebar kotaknya menyesuiakan datanya.
10. Pada 2 kolom bagian kanan digabung (merger), kemudian di bawah Tools, dibuat
label 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 melakukan
query ke database, yaitu dari tabel petugas dengan perintah SELECT. Skrip
programnya diletakkan di bawah </tr> dan sebelum <tr> baris kedua dari tabel
tampil data.
<?php
$mySql
$myQry

= "SELECT * FROM petugas ORDER BY kd_petugas ASC";

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

12

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, Nama
Petugas, 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 dari
perintah 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 data
dari 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
<td><?php echo
<td><?php echo
<td><?php echo
<td><?php echo
<td width="8%"
<td width="8%"
</tr>

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

Ilustrasi gambarnya :

13

Gambar 4.24 Ilustrasi meletakkan skrip program menampilkan data

14. Pada bagian Jumlah Data:, buat skrip berikut untuk menampilkan jumlah baris data
yang 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 tempat
baru di samping kanan Jumlah Data.
Masuklah ke halaman Design, klik kanan pada baris terakhir (di samping label
Jumlah 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 jumlah
kolomnya 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 (pembagian
halaman).
<strong>Halaman ke :</strong>
<?php
for ($h = 1; $h <= $max; $h++) {
$list[$h] = $row * $h - $row;
echo " <a href='?page=Petugas-Data&hal=$list[$h]'>$h</a> ";
}
?>

14

Ilustrasi gambarnya :

Gambar 4.27 Ilustrasi meletakkan skrip program untuk paging

18. Kembali ke halaman tampilan (Design view), pilih teks Edit, lalu buat target link
menunya 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 Petugas

Selanjutnya Kita akan membuat program Ubah Data Petugas, atau form program untuk
memperbaiki data Petugas. Menu Edit yang ada di setiap baris data dalam program
Tampil Data dipakai untuk memilih data yang akan diubah (diperbaiki), datanya akan
ditampilkan kembali pada form. Contoh ilustrasinya:

15

Gambar 4.30 Ilustrasi langkah memperbaiki data Petugas, klik menu Edit dari halaman
program 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 xxx
adalah kode data Petugas yang dipilih untuk di-edit. Sekarang, Anda dapat membuat file
program petugas_edit.php dengan cara memodifikasi dari file petugas_add.php. Untuk
perintah SQL yang dipakai, menyimpan data lama hasil modifikasi dapat dilakukan
dengan 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 bagian
header menjadi UBAH DATA PETUGAS.

Gambar 4.31 Membuat judul halaman program

4. Pada baris Kode, tambahkan form HiddenField
untuk merekam data kode
supaya bisa dieksekusi dalam perintah SQL, atur nilai propertinya.
TextField
: txtKode
Value
: <?php echo $dataKode; ?>

16

Gambar 4.32 Menambahkan form HiddenField untuk merekam data kode Petugas dari
database
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 seperti
kode berikut:
$cekSql="SELECT * FROM petugas WHERE username='$txtUsername'
AND NOT(username='".$_POST['txtUsernameLm']."')";

9. Gantilah query(perintah SQL) dari yang semula memakai INSERT menjadi

UPDATE, yaitu perintah untuk menyimpan kembali data lama ke dalam database
tabel petugas. Skripnya :
# Cek Password baru
if (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'
$sqlPasword
WHERE 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=PetugasData'>";
}
exit;

17

10. Pada bagian bawah program, buatlah skrip untuk mengambil data Petugas dari
database sesuai dengan kode yang didapat dari URL (?page=PetugasEdit&Kode=xxx), alamat URL tersebut dikirim saat mengklik menu Edit di halaman
Tampil 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), buat
skrip 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

18

4.5.5 Hapus Data Petugas

Untuk membuat program Hapus Data Petugas Anda memerlukan menu untuk memilih
record (baris data) data yang akan dihapus. Pada halaman program Tampil Data Kita
sudah membuat menu dengan teks Delete. Sekarang Anda bisa langsung membuat skrip
program dengan nama file petugas_delete.php, perintah SQL yang digunakan adalah
DELETE.
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:
<?php
include_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 halaman
echo "<meta http-equiv='refresh' content='0;
url=?page=Petugas-Data'>";
}
}
else {
// Jika tidak ada data Kode ditemukan di URL
echo "<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 perlu
menambahkan notifikasi peringatan. Jadi, saat menu Delete diklik, maka akan ada
jendela peringatan bertuliskan Anda yakin akan menghapus data ini ...? , baru setelah
klik OK/Yes maka file program petugas_delete.php akan dijalankan, dan data Petugas
akan dihapus dari database. Caranya:
1. Buka lagi file program petugas_data.php.
2. Masuklah pada halaman kode (Code view), carilah baris kode link untuk menu
Delete.
3. Sisipkan skrip perintah onClick, seperti berikut :
<a href="?page=Petugas-Delete&Kode=<?php echo $Kode; ?>"
target="_self" onclick="return confirm('ANDA YAKIN AKAN MENGHAPUS
DATA 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 Nugroho

www.bunafitKomputer.com
19