Anda di halaman 1dari 28

1

Panduan Proyek:
Membuat ApIikasi Web
PENGGAJIAN & ABSENSI
Karyawan dengan PHP, MySQL dan
Dreamweaver
PenuIis:
Bunafit Nugroho
www.BunafitKomputer.Com
Penerbit : ALIF Media
Yogyakarta
2
Bab 7
Panduan Membuat Program Absensi
Karyawan
Data absensi karyawan disimpan dalam database, yaitu tabel absensi, memiliki relasi
tabel langsung dengan data Karyawan. Dengan tabel yang sudah kita buat, absensi
kehadiran dapat dicatat mulai dari jam masuk dan jam keluar, juga tanggal dan status
kehadiran (tidak masuk, masuk, ijin dan cuti) . Program utama input absensi karyawan
terdapat 4 file inti, yaitu :
absensi_add.php : Eorm untuk tambah data Absensi
absensi_edit.php : Eorm untuk mengubah data Absensi
absensi_data.php : Halaman untuk menampilkan data Absensi, terdapat
menu Add Data, Edit dan Delete.
absensi_delete.php : Berisi skrip program untuk menghapus data Absensi
yang dipilih dari halaman absensi_data.php, klik link menu Delete.
Anda dapat membuat ke-4 file program di atas seperti cara sebel umnya yang pernah
Anda pelajari, yaitu seperti membuat Program Transaksi Penggajian, Transaksi
Pinjaman dan Lembur.
Sebagai informasi, eBook Panduan Membuat Program Absensi Karyawan ini
merupakan bab lanjutan dari buku cetak yang Anda pelajari, yaitu Bab 7. Jika Anda
memperoleh eBook ini bukan dari CD Penyerta buku, maka sebagai informasi
panduan lengkap dan skrip yang dipelajari ada di buku dengan judul; Panduan
Proyek Membuat Web Aplikasi Penggajian & Absensi Karyawan dengan PHP,
MySQL dan Dreamweaver. Penulisnya adalah; Bunafit Nugroho, Penerbit; ALIF
Media, terbitan September 2013, info lanjut ada di www.bunafit-komputer.com.
7.1 Membuat Menu dan Kontrol Program Absensi
Pekerjaan pertama, Anda harus membuat menu unt uk mengakses halaman utama data
Absensi, yaitu dari file menu.php, selanjutnya menambahkan kontrol file program
dalam file buka_file.php. Caranya:
1. Buka Windows Explorer.
2. Buka file menu.php lewat Dreamweaver.
3. Tambahkan menu Data Absensi, dan arahkan link-nya menuju ?pageAbsensi-
Data. Seperti contoh:
3
Gambar 7.1 Membuat menu Data Absensi
4. Selanjutnya, buka file buka_file.php lewat Dreamweaver.
5. Dari halaman kode (Code), tambahkan baris kode program untuk menjalankan
link menu yang mengarah ke ?pageAbsensi-Data :
Gambar 7.1 Contoh alamat URL yang dikirim oleh menu, lalu jalankan oleh
program kontrol di dalam file buka_file.php
case 'Absensi-Data' :
if(!file_exists ("absensi_data.php")) die ("Sorry Empty
Page!");
include "absensi_data.php"; break;
Skrip di atas, jika dari menu utama link menu mengarah ke alamat
?pageAbsensi-Data, maka program buka_file.php akan mengeksekusi dengan
memanggil file program absensi_data.php.
6. Buat kode kontrol jika ada menu yang mengarah ke URL; ?pageAbsensi-Add :
case 'Absensi-Add' :
if(!file_exists ("absensi_add.php")) die ("Sorry Empty Page!");
include "absensi_add.php"; break;
Jika ada menu yang mengarah ke alamat URL ? pageAbsensi-Add, maka file
kontrol program buka_file.php akan mengeksekusi file pr ogram
absensi_add.php, file ini berisi form untuk memasukan data absensi karyawan.
7. Buat kode kontrol jika ada menu yang mengarah ke URL; ?page Absensi-Edit,
yaitu untuk menjalankan form program Ubah Data:
case 'Absensi-Edit' :
if(!file_exists ("absensi_edit.php")) die ("Sorry Empty
Page!");
include "absensi_edit.php"; break;
8. Buat kode kontrol jika ada menu yang mengarah ke URL; ?page Absensi-
Delete, yaitu untuk menjalankan program Hapus Data:
4
case 'Absensi-Delete' :
if(!file_exists ("absensi_delete.php")) die ("Sorry Empty
Page!");
include "absensi_delete.php"; break;
9. Setelah selesai, simpan programnya ( Ctrl + S).
7.2 Tambah Data Absensi
Sekarang kita akan membuat Program Tambah Data Absensi, perintah SQL yang
digunakan untuk menyimpan data adalah INSERT. Sebagai latihan, sebaiknya Anda
mencoba sendiri membuatnya tanpa harus membaca panduan ini . Jika memang masih
belum mampu, ikuti saja langkah berikut :
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 utama dengan nama absensi_add.php.
4. Masuk pada halaman kode ( Code), hapus semua kode HTML.
5. Masuk pada halaman tampilan ( Design), tambahkan area form dari panel Forms.
6. Pada area form yang sudah ditambahk an, atur alamat pemrosessan programnya
dari bagian Action, panel Properties.
Action : ?php $SERVER|'PHPSELE']; ?~
Target : self
Method : POST
Gambar 7.1 Membuat area form untuk formulir Tambah Data
Pada bagian action, arti dari <?php $_SERVER'PHP_SELF']; ?> adalah
alamat targetnya menuju form itu sendiri. Cara lain yang dapat gunakan, mengatur
alamat action-nya dengan alamat ?pageAbsensi-Add. Seperti contoh di bawah:
5
Gambar 7.1 Mengatur alamat Action data pada form
Kenapa harus ?pageAbsensi-Add ?, Ya, karna alamat tersebut akan diakses di
halaman kontrol buka_file.php untuk menjalankan file absensi_add.php, yaitu
form itu sendiri.
7. Klik pada area form lagi, lalu tekan Ctrl + S untuk menyimpan perubahan
program.
8. Dari panel Common, tambahkan tabel untuk desain form, sebanyak 9 baris dan 3
kolom, lalu klik tombol Go. Posisi tabel ini harus berada di dalam area form (garis
merah putus-putus).
9. Sekarang atur tata letak tabel dengan menambah teks judul form di bagian atas
(lakukan merger 3 kolom dari baris paling atas), di bagian kiri untuk judul kotak
masukan. Seperti gambar berikut:
Gambar 7.4 Desain kerangka tabel untuk form Tambah Data Absensi
10. Masuklah pada halaman kode ( Code view), sisipkan kode efek CSS pada tag
table, seperti contoh berikut yang dicetak tebal.
<table class="table-list" width="100%" border="0" cellspacing="1"
cellpadding="4">
Ilustrasinya adalah:
Gambar 7.5 Kode untuk mengaktifkan efek CSS pada tabel
6
11. Tambahkan form masukan berupa List/Menu pada baris Karyawan, lalu atur
nilai propertinya.
List/Menu : cmbKaryawan
Gambar 3.20 Mengatur properti List/Menu, form masukan untuk data Karyawan
Masih pada List/Menu Karyawan, sekarang masuklah pada halaman kode
(Code). Lengkapi kode programnya.
<select name="cmbKaryawan">
</select>
Menjadi :
<select name="cmbKaryawan">
<option value="BLANK">....</option>
<?php
$dataSql = "SELECT * FROM karyawan ORDER BY kd_karyawan";
$dataQry = mysql_query($dataSql, $koneksidb) or die ("Gagal
Query".mysql_error());
while ($dataRow = mysql_fetch_array ($dataQry)) {
if ($dataKaryawan == $dataRow['kd_karyawan']) {
$cek = " selected";
} else { $cek=""; }
echo "<option value='$dataRow[kd_karyawan]' $cek>[
$dataRow[nik] ] $dataRow[nm_karyawan]</option>";
}
$sqlData ="";
?>
</select>
Kode program PHP di atas adalah untuk menampilkan semua isi data Karyawan
dari tabel karyawan, semua isi datanya menjadi pilihan saat form combo
(List/Menu) diklik.
Gambar 7.8 Data Karyawan tampil dalam List/Menu atau comboBox
7
12. Tambahkan form masukan berupa Text Field pada baris Tanggal, lalu atur
nilainya pada panel Properties.
TextField : txtTanggal
Max chars : 12
Init Val : ?php echo $dataTanggal; ?~
Gambar 7.8 Membuat form masukan data tanggal absensi, dan mengatur variabel
dari Properties
Sekarang masuk ke halaman kode untuk mengaktifkan TextField menjadi
kalender JavaScript. Caranya, sisipkan kode class="tcal" di dalam kode
TextField tanggal, seperti contoh:
<input name="txtTanggal" type="text" class="tcal" value="<?php
echo $dataTanggal; ?>" maxlength="12" />
Kode class"tcal" adalah perintah yang berasal dari plugins/tigra_calendar,
sehingga hasilnya jika diklik akan muncul kotak kalender JavaScript seperti
gambar berikut:
Gambar 7.8 Contoh kalender JavaScirpt dari tigra_calendar
13. Tambahkan form masukan berupa Text Field pada baris 1am Masuk, lalu
atur nilainya pada panel Properties.
TextField : txtJamMasuk
Char width : 5
Max chars : 5
Init Val : ?php echo $dataJamMasuk; ?~
8
Gambar 7.9 Membuat form masukan Jam Masuk
14. Tambahkan form masukan berupa Text Field pada baris 1am Keluar, lalu
atur nilainya pada panel Properties.
TextField : txtJamKeluar
Char width : 5
Max chars : 5
Init Val : ?php echo $dataJamKeluar; ?~
Gambar 7.9 Membuat form masukan Jam Keluar
15. Tambahkan form masukan berupa List/Menu pada baris Status Kehadiran,
lalu atur nilai propertinya.
List/Menu : cmbStatus
Gambar 3.20 Mengatur properti List/Menu, form masukan data Status Kehadiran
Masih pada List/Menu Status Kehadiran, sekarang masuklah pada halaman
kode (Code). Lengkapi kode programnya.
<select name="cmbStatus">
</select>
Menjadi :
9
<select name="cmbStatus">
<option value="BLANK">....</option>
<?php
$pilihan = array("0" => "Tidak Masuk", "1" => "Masuk", "2" =>
"Izin", "3" => "Cuti");
foreach ($pilihan as $nilai => $isi) {
if ($dataStatus==$nilai) {
$cek=" selected";
} else { $cek = ""; }
echo "<option value='$nilai' $cek>$nilai -> $isi</option>";
}
?>
</select>
16. Tambahkan form masukan berupa List/Menu pada baris 1enis Kerja, lalu
atur nilai propertinya.
List/Menu : cmbJenis
Gambar 3.20 Mengatur properti List/Menu, form masukan data Jenis Kerja
Masih pada List/Menu 1enis Kerja, sekarang masuklah pada halaman kode
(Code). Lengkapi kode programnya.
<select name="cmbJenis">
</select>
Menjadi :
<select name="cmbJenis">
<option value="BLANK">....</option>
<?php
$pilihan = array("Wajib", "Lembur");
foreach ($pilihan as $nilai) {
if ($dataJenis==$nilai) {
$cek=" selected";
} else { $cek = ""; }
echo "<option value='$nilai' $cek>$nilai</option>";
}
?>
</select>
17. Tambahkan form masukan berupa Text Field pada baris Keterangan, lalu
atur nilainya pada panel Properties.
TextField : txtKeterangan
Char width : 80
Max chars : 100
Init Val : ?php echo $dataKeterangan; ?~
10
Gambar 7.9 Membuat form masukan Keterangan
18. Pada baris paling bawah, tambahkan objek tombol dari berupa Button , lalu
atur nilai propertinya.
Button Name : btnSimpan
Value : SIMPAN
Action : Submit form
Gambar 7.10 Membuat tombol Submit, mengatur variabel dan label tombol menjadi
Simpan
19. Simpan kembali programnya (Ctrl + S).
Setelah form masukan data selesai dibuat , sekarang Anda dapat melanjutkan membuat
skrip PHP yang tugasnya mengeksekusi data yang diisi dari form, terdiri dari skrip
temporarv membaca variabel form, skirp validasi form dan skrip untuk menyimpan
data ke database MySQL. Berikut langkahnya:
1. Dari Dreamweaver, buka lagi file absensi_add.php.
2. Pada baris kode paling atas (baris pertama), buat kode buka tutup PHP.
3. Buat baris kode untuk memanggil file inc.sesadmin.php. Lihat gambar di bawah,
poin (1) gambar di bawah.
<?php
include_once "library/inc.sesadmin.php";
?>
4. Buat blok kode saat tombol Simpan ( btnSimpan) diklik. Skripnya :
if(isset($_POST['btnSimpan'])){
//Simpan data ke database
}
11
5. Buat variabel temporarv untuk merekam data dari form masukkan, dan memberikan
nilai kosong pada kondisi form normal (belum pernah di -Submit). Kodenya :
$dataKaryawan = isset($_POST['cmbKaryawan']) ?
$_POST['cmbKaryawan'] : '';
$dataTanggal = isset($_POST['txtTanggal']) ?
$_POST['txtTanggal'] : date('d-m-Y');
$dataJamMasuk = isset($_POST['txtJamMasuk']) ?
$_POST['txtJamMasuk'] : date('H:i');
$dataJamKeluar = isset($_POST['txtJamKeluar']) ?
$_POST['txtJamKeluar'] : '';
$dataStatus = isset($_POST['cmbStatus']) ? $_POST['cmbStatus']
: '';
$dataJenis = isset($_POST['cmbJenis']) ? $_POST['cmbJenis'] :
'';
$dataKeterangan= isset($_POST['txtKeterangan']) ?
$_POST['txtKeterangan'] : '';
Ilustrasi penempatan kode pada poin (3) gambar di bawah:
Gambar 7.13 Membuat kode program temporary untuk form
Penjelasannya adalah:
Kode :
$dataKaryawan = isset($_POST['cmbKaryawan']) ?
$_POST['cmbKaryawan'] : '';
Kode di atas diapakai untuk menampung data dari form masukan Karyawan
(list/Menu), datanya disimpan dalam variabel $dataKaryawan, data ini
selanjutnya dibaca kembali pada form masukan Karyawan.
Kode :
$dataTanggal = isset($_POST['txtTanggal']) ?
$_POST['txtTanggal'] : date('d-m-Y');
12
Kode program di atas dipakai untuk mendapatkan tanggal sekarang, atau nilai
data pada form, hasil datanya ditampung dalam variable $dataTanggal. Data ini
selanjutnya ditampilkan ke form masukan Tanggal. Ilustrasi berikut dilihat dari
halaman desain, yaitu pada kotak Init Val dari jendela Properties.
Gambar 7.13 Menampilkan data $dataTanggal pada form masukan
Kode :
$dataJamMasuk = isset($_POST['txtJamMasuk']) ?
$_POST['txtJamMasuk'] : date('H:i');
Dipakai untuk mendapatkan jam yang berjalan saat ini, atau nilainya diambil dari
form yang di-Submit, hasil datanya ditampung dalam $dataJamMasuk.
Selanjutnya data ini ditampilkan ke form masukan Jam Masuk. Berikut ilustrasi
dilihat dari halaman kode, diletakkan pada tag Value:.
Gambar 7.13 Menampilkan data $dataJamMasuk pada form masukan
Kode :
$dataJamKeluar = isset($_POST['txtJamKeluar']) ?
$_POST['txtJamKeluar'] : '';
Variabel $dataJamKeluar akan diisi dengan data dari form masukan Jam
Keluar, dan akan dikosongkan jika form belum pernah submit (klik tombol
Simpan).
6. Sekarang buat skrip program di dalam blok kode
if(isset($_POST'btnSimpan'])){ ... ], yaitu untuk validasi form dan menyimpan
data ke database.
7. Pertama membuat skrip validasi form masukan. Buat deklarasi arrav, untuk
variabel $pesanError.
$pesanError = array();
13
8. Buat skrip untuk memvalidasi jika data kosong pada form Karyawan. Skripnya :
if (trim($_POST['cmbKaryawan'])=="BLANK") {
$pesanError[] = "Data <b>Karyawan</b> tidak boleh kosong !";
}
9. Buat skrip untuk memvalidasi jika data kosong pada form Tanggal. Skripnya :
if (trim($_POST['txtTanggal'])=="") {
$pesanError[] = "Data <b>Tanggal Absensi</b> tidak boleh kosong
!";
}
10. Buat skrip untuk memvalidasi jika data kosong pada form 1am Masuk. Skripnya :
if (trim($_POST['txtJamMasuk'])=="") {
$pesanError[] = "Data <b>Jam Masuk</b> tidak boleh kosong !";
}
11. Buat skrip untuk memvalidasi jika data kosong pada form 1am Keluar. Skripnya :
if (trim($_POST['txtJamKeluar'])=="") {
$pesanError[] = "Data <b>Jam Keluar</b> tidak boleh kosong !";
}
12. Buat skrip untuk memvalidasi jika data kosong pada form Status Kehadiran.
Skripnya :
if (trim($_POST['cmbStatus'])=="BLANK") {
$pesanError[] = "Data <b>Status Kehadiran</b> tidak boleh
kosong !";
}
13. Buat skrip untuk memvalidasi jika data kosong pada form 1enis Kerja. Skripnya :
if (trim($_POST['cmbJenis'])=="BLANK") {
$pesanError[] = "Data <b>Jenis Kerja</b> tidak boleh kosong !";
}
14. Buat skrip program untuk membaca data dari form masukan, datanya disimpan
dengan nama variabel form. Skripnya :
$cmbKaryawan = $_POST['cmbKaryawan'];
$txtTanggal = InggrisTgl($_POST['txtTanggal']);
$txtJamMasuk = $_POST['txtJamMasuk'];
$txtJamKeluar = $_POST['txtJamKeluar'];
$cmbStatus = $_POST['cmbStatus'];
$cmbJenis = $_POST['cmbJenis'];
$txtKeterangan = $_POST['txtKeterangan'];
15. Buat skrip untuk memvalidasi supaya karyawan hanya dapat diinput satu kali
dalam absensi. Skripnya :
$sqlCek="SELECT * FROM absensi W HERE kd_karyawan='$cmbKaryawan'
AND tanggal='$txtTanggal'";
$qryCek=mysql_query($sqlCek, $koneksidb) or die ("Eror
Query".mysql_error());
if(mysql_num_rows($qryCek)>=1){
14
$pesanError[] = "<b>ABSENSI TANGGAL [ $txtTanggal ] SUDAH
MASUK</b>, ganti dengan yang lain";
}
16. Buat skrip program untuk menampilkan pesan error jika ditemukan dari bagian
validasi, yaitu pada variabel $pesanError. 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.
}
Jika ada kotak form masukan yang lupa diisi, maka pesan error yang semua
ditampung pada variabel arrav $pesanError akan ditampilkan. Berikut adalah
contohnya:
Gambar 7.14 Pesan error saat ada form masukan yang belum diisi
17. Buat skrip program untuk menyimpan data ke database. Jadi, jika sudah tidak ada
error atau kesalahan yang ditemukan pada variabel $pesanError, maka data pada
form akan disimpan ke database. Skripnya :
.....
else {
# SIMPAN DATA KE DATABASE
$mySql = "INSERT INTO absensi (kd_karyawan, tanggal,
jam_masuk, jam_keluar, status_kehadiran,
jenis_kerja, keterangan)
VALUES ('$cmbKaryawan',
'$txtTanggal',
'$txtJamMasuk',
'$txtJamKeluar',
15
'$cmbStatus',
'$cmbJenis',
'$txtKeterangan')";
$myQry=mysql_query($mySql, $kone ksidb) or die ("Gagal
query".mysql_error());
if($myQry){
echo "<meta http-equiv='refresh' content='0;
url=?page=Absensi-Add'>";
}
exit;
}
18. Simpan kembali programnya, tekan tombol Ctrl + S.
Untuk menjalankan halaman program Tambah Data Absensi di atas, Anda harus
login sebagai admin. Klik menu Data Absensi sebelah kiri, lalu klik link menu
Tambah (Add Data). Jika program Anda belum ada karna belum dibuat, langsung
saja diakses lewat alamat browser http://localhost/gaji -karyawan/?pageAbsensi-Add.
Berikut contoh tampilannya:
Gambar 7.15 Tampilan halaman program Tambah Absensi
7.3 Tampil Data Absensi
Halaman Tampil Data Absensi berguna untuk menampilkan semua data dari semua
absensi kehadiran karyawan setiap harinya, datanya kita tampilkan dalam bentuk
halaman, satu halaman ada 50 baris data. Dari halaman tampil data ini, kita berikan
tombol Tambah (Add Data) untuk mengakses program Tambah Data Absensi.
Halaman tampil data juga sekaligus berisi menu Edit untuk megubah data, dan menu
Delete untuk menghapus data. Contoh tampilannya:
16
Gambar 7.16 Tampilan halaman Data Absensi, menampilkan semua data
Dari tampilan di atas, semua data hasil absensi ditampilkan ke layar, kemudian di
masing-masing baris data diberikan menu untuk mengubah data ( Edit) dan hapus data
(Delete). 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 dengan nama absensi_data.php.
5. Dari panel Common, tambahkan tabel untuk desain tampilan utama, sebanyak 5
baris dan 1 kolom, lebarnya 750 pixels, pada bagian header pilih None.
6. Tambahkan judul dengan font header 1 (misal; DATA ABSENSI), dan judul
pada baris paling bawah untuk paging (halaman) ditulis 1umlah Data.
7. Tambahkan gambar berlogo Tambah (btnadddata.png) pada baris ke-2, filenya
ada di folder images. Caranya, klik menu Insert, klik Image, lalu cari file
gambarnya.
17
Gambar 7.18 Desain tabel utama untuk menampilkan data Absensi
19. Pilih atau klik pada gambar ikon Add Data, lalu buat target link menunya ke
alamat berikut:
?page=Absensi-Add
Ilustrasi gambarnya :
Gambar 7.19 Membuat target menu pada gambar ikon Add Data
20. Masuklah pada halaman kode ( Code view), buatlah blok kode buka (<?php) dan
tutup PHP (?>) pada baris awal program.
21. Buat skrip program untuk memanggil file inc.sesadmin.php.
<?php
include_once "library/inc.sesadmin.php";
?>
22. Buat skrip program yang berfungsi untuk paging, yaitu memecah jumlah data
Absensi yang akan ditampilkan ke dalam bentuk halaman. Skripnya :
$row = 50;
$hal = isset($_GET['hal']) ? $_GET['hal'] : 0;
$pageSql = "SELECT * FROM absensi";
$pageQry = mysql_query($pageSql, $koneksidb) or die ("error
paging: ".mysql_error());
$jml = mysql_num_rows($pageQry);
$max = ceil($jml/$row);
18
Gambar 7.19 Membuat skrip untuk halaman data ( paging)
8. Kembali ke halaman tampilan ( Design). Tambahkan tabel baru (tabel tampil data
ke layar) di dalam baris ke-3 dari tabel utama. Tabel baru disesuaikan data yang
akan ditampilkan, yaitu dengan 2 baris dan 8 kolom data, lalu atur tampilannya
seperti contoh berikut:
Gambar 7.22 Desain tabel tampil data dan desai n menunya
9. Dua kotak bagian kanan dijadikan satu (merger), lalu diberi judul Tools. Di bawah
Tools masih ada dua kotak, buat tulisan Edit dan Delete yang nantinya dipakai
untuk link menu.
10. Masuklah pada halaman kode ( Code), butlah skrip program untuk menampilkan
data Absensi ke layar. Tempatnya di bawah </tr> dan sebelum <tr> baris kedua
dari tabel tampil data.
<?php
$mySql = "SELECT absensi.*, karyawan.nik, karyawan.nm_karyawan
FROM absensi
LEFT JOIN karyawan ON
absensi.kd_karyawan=karyawan.kd_karyawan
ORDER BY absensi.tanggal DESC LIMIT $hal, $row";
$myQry = mysql_query($mySql, $koneksidb) or die ("Query salah
: ".mysql_error());
$nomor = 0; $status = "";
while ($kolomData = mysql_fetch_array($myQry)) {
$nomor++;
$Kode = $kolomData['id'];
?>
19
Lihat ilustrasinya, kode di atas ada pada Poin (2) gambar di bawah:
Gambar 7.24 Ilustrasi meletakkan skrip program query ke database, Poin (2)
Untuk lebih jelasnya, berikut penjelasannya:
(1) : Baris pertama dari tabel tampil data, berisi judul kolom; No,
Tanggal, Nik, Nama Karyawan, Status, Keterangan dan Tools.
(2) : Skrip program untuk mengambil data Absensi dari database, kode ini
diletakkan sebelum tag <tr> baris kedua yang dipakai menampilkan data .
(3) : Kotak untuk menampilkan informasi data ke layar.
(4) : Gambar ikon Edit dan Delete.
(5) : Akhir dari while (,) yang kita buat untuk menampilkan data, dari
Poin (2).
11. Di dalam kalang while poin (2), buat skrip program untuk membaca data ENUM
status kerja. Skripnya:
// Baca Status Kerja
$statusKerja = $kolomData['status_kehadiran'];
if($statusKerja==0) { $status = "Tidak Masuk"; }
elseif($statusKerja==1) { $status = "Masuk"; }
elseif($statusKerja==2) { $status = "Izin"; }
elseif($statusKerja==3) { $status = "Cuti"; }
else { $status = ""; }
12. Buat skrip penutup kalang ( <?php ] ?>) di bawah tag /tr~ sebelum akhir tabel
seperti Poin (5) dari gambar di atas, skripnya adalah:
<?php } ?>
20
13. Pada baris kedua dari tabel tampil data kita gunakan untuk menampilkan
informasi data dari database. Sekarang, ganti perintah :
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="44" align="center">Edit</td>
<td width="52" align="center">Delete</td>
</tr>
Menjadi:
<tr>
<td><?php echo $nomor; ?></td>
<td><?php echo IndonesiaTgl($kolomData['tanggal']); ?></td>
<td><?php echo $kolomData['nik']; ?></td>
<td><?php echo $kolomData['nm_karyawan']; ?></td>
<td><?php echo $status; ?></td>
<td><?php echo $kolomData['keterangan']; ?></td>
<td width="44" align="center">Edit</td>
<td width="52" align="center">Delete</td>
</tr>
Ilustrasi gambarnya adalah :
Gambar 7.25 Membuat skrip program tampil data ke layar
14. Pada bagian 1umlah Data, buat kode berikut untuk menampilkan jumlah baris
data yang ditampilkan.
<?php echo $jml; ?>
15. Sekarang kita akan membuat menu nomor halaman . Masuklah ke halaman
Design, klik kanan pada baris paling bawah (di samping teks 1umlah Data), klik
menu Table dan klik Split Cell.
21
Gambar 7.27 Langkah untuk memecah kolom
Dari jendela Split Cell yang tampil, pilih opsi Columns, masukkan jumlah kolomnya
adalah 2, lalu klik tombol OK.
Gambar 7.27 Split Cell untuk memecah kolom
16. Sekarang, masuklah ke halaman kode ( Code view) lagi.
17. Pada bagian Halaman ke, buat kode untuk menampilkan nomor paging
(halaman), nomornya juga dibuat link menuju nomor halaman.
<strong>Halaman ke :
<?php
for ($h = 1; $h <= $max; $h++) {
$list[$h] = $row * $h - $row;
echo " <a href='?page=Absensi-Data&hal=$list[$h]'>$h</a> ";
}
?> </strong>
Ilustrasi gambarnya :
Gambar 7.29 Ilustrasi meletakkan skrip program untuk nomor halaman
22
18. Kembali ke halaman tampilan ( Design), pilih pada tulisan Edit, lalu buat target
link menunya ke alamat berikut:
?page=Absensi-Edit&Kode=<?php echo $Kode; ?>
Ilustrasi gambarnya :
Gambar 7.30 Ilustrasi meletakkan kode untuk target link menu Edit
19. Seperti cara sebelumnya, pilih pada tulisan Delete, lalu buat link menunya ke
alamat berikut:
?page=Absensi-Delete&Kode=<?php echo $Kode; ?>
20. Simpan lagi programnya (Ctrl + S).
7.4 Ubah Data Absensi
Sekarang kita akan membuat program Ubah Data Absensi, sehingga jika memang
ada kesalahan saat input bagian administrasi dapat men geditnya, bisa mengganti nama
jam masuk, jam keluar dan status kehadiran. Menu Edit untuk memilih data sudah
dibuat, yaitu di halaman Tampil Data Absensi. Sekarang kita tinggal menyiapkan
form untuk menampilkan kembali data yang dipilih ke form. Contoh ilustrasinya:
23
Gambar 7.32 Ilustrasi langkah mengubah data Absensi, klik ikon Edit
Dari halaman Tampil Data Absensi, setiap baris data dibuat link menu yang target
link-nya mengarah ke ?pageAbsensi-Edit&Kodexxx, parameter xxx adalah kode
data atau Id yang dipilih untuk di -edit. Sekarang, kita akan membuat file
absensi_edit.php, dengan cara memodifikasi dari file absensi_add.php. Caranya:
1. Buka file absensi_add.php yang sudah dibuat sebelumnya.
2. Simpan ulang dengan nama baru, yaitu; absensi_edit.php.
3. Masuk ke halaman desain (Design view), lalu perbarui informasi judul pada
bagian header menjadi UBAH DATA ABSENSI.
4. Pada area form, atur alamat pemrosessan programnya dari bagian Action, panel
Properties.
Action : ?php $SERVER|'PHPSELE']; ?~
Target : self
Method : POST
Pada bagian action, arti dari <?php $_SERVER'PHP_SELF']; ?> adalah
alamat targetnya menuju form itu sendiri. Opsi lain, Anda dapat mengisi alamat
action-nya dengan alamat ?pageAbsensi-Edit (dari buka_file.php, alamat
tersebut juga akan mengakses form itu sendiri, yaitu absensi_edit.php).
Gambar 7.32 Mengatur alamat Action pada form
24
5. Pada baris Kode, tambahkan objek HiddenField , lalu atur nilai propertinya.
TextField : txtKode
Value : ?php echo $dataKode; ?~
Gambar 7.34 Menambahkan obj ek HiddenField untuk merekam data kode
6. Matikan form masukan Karyawan ( cmbKaryawan) dengan menambah perintah
disabled, supaya nilai datanya tidak dapat diganti. S eperti contoh:
<select name="cmbKaryawan" disabled="disabled">
7. Matikan form masukan Tanggal (txtTanggal) dengan menambah perintah
readonlv, supaya nilai datanya tidak dapat diubah. S eperti contoh:
<input name="txtTanggal" type="text" value="<?php echo
$dataTanggal; ?>" maxlength="12" readonly="readonly"/>
8. Pada bagian kode PHP paling bawah (sebe lum penutu PHP (?~)), buatlah skrip
program untuk menampilkan data Absensi yang dipilih ke dalam variabel form,
dengan cara membaca kode yang didapat dari URL (?pageAbsensi-
Edit&), alamat URL tersebut dikirim saat mengklik menu Edit di
halaman Tampil Data. Skripnya :
if($_GET) {
# TAMPILKAN DATA DARI DATABASE
$Kode= isset($_GET['Kode']) ? $_GET['Kode'] :
$_POST['txtKode'];
$mySql = "SELECT * FROM absensi WHERE id='$Kode'";
$myQry = mysql_query($mySql, $koneksidb) or die ("Query ambil
data salah : ".mysql_error());
// Baca data
$myData = mysql_fetch_array($myQry);
// Masukkan data ke dalam variabel
$dataKode = $myData['id'];
$dataKaryawan= isset($_POST['cmbKaryawan']) ?
$_POST['cmbKaryawan'] : $myData['kd_karyawan'];
$dataTanggal= isset($_POST['txtTanggal']) ?
$_POST['txtTanggal'] : IndonesiaTgl($myData['tanggal']);
$dataJamMasuk= isset($_POST['txtJamMasuk']) ?
$_POST['txtJamMasuk'] : $myData['jam_masuk'];
25
$dataJamKeluar= isset($_POST['txtJamKeluar']) ?
$_POST['txtJamKeluar'] : $myData['jam_keluar'];
$dataStatus = isset($_POST['cmbStatus']) ?
$_POST['cmbStatus'] : $myData['status_kehadiran'];
$dataJenis = isset($_POST['cmbJenis']) ?
$_POST['cmbJenis'] : $myData['jenis_kerja'];
$dataKeterangan= isset($_POST['txtKeterangan']) ?
$_POST['txtKeterangan'] : $myData['keterangan'];
}
Penjelasan skrip program di atas adalah:
Kode :
$dataKode = $myData['id'];
$dataKode diisi dengan data kode/Id, datanya dari database yang akan diedit,
variabel datanya akan dibaca di form hidden txtKode untuk ditampilkan.
Kode :
$dataKaryawan= isset($_POST['cmbKaryawan']) ?
$_POST['cmbKaryawan'] : $myData['kd_karyawan'];
$dataKaryawan diisi dengan data kode karyawan yang berasal dari database,
variabel datanya akan dibaca di form masukan cmbKaryawan, supaya ada data
karyawan yang terpilih saat diedit.
Kode :
$dataTanggal= isset($_POST['txtTanggal']) ? $_POST['txtTanggal'] :
IndonesiaTgl($myData['tanggal']);
$dataTanggal diisi dengan data tanggal, datanya dari database yang akan diedit,
variabel datanya akan dibaca di form txtTanggal untuk ditampilkan. Jika form
di-Submit, maka isi datanya diambil dari form masukan itu sendiri.
Kode :
$dataJamMasuk= isset($_POST['txtJamMasuk']) ?
$_POST['txtJamMasuk'] : $myData['jam_masuk'];
$dataJamMasuk diisi dengan data jam masuk kerja, datanya dari database yang
akan diedit, variabel datanya akan dibaca di form txtJamMasuk untuk
ditampilkan.
Kode :
$dataJamKeluar= isset($_POST['txtJamKeluar']) ?
$_POST['txtJamKeluar'] : $myData['jam_keluar'];
$dataKeluar diisi dengan data jam keluar kantor, datanya dari database yang
akan diedit, variabel datanya akan dibaca di form txtJamKeluar untuk
ditampilkan.
26
Kode :
$dataStatus = isset($_POST['cmbStatus']) ? $_POST['cmbStatus']
: $myData['status_kehadiran'];
$dataStatus diisi dengan data status absensi, datanya dari database yang akan
diedit, variabel datanya akan dibaca di form list/Menu cmbStatus untuk
ditampilkan.
Kode :
$dataJenis = isset($_POST['cmbJenis']) ? $_POST['cmbJenis'] :
$myData['jenis_kerja'];
$dataJenis diisi dengan data jenis hari kerja, datanya dari database yang akan
diedit, variabel datanya akan dibaca di form list/Menu cmbJenis untuk
ditampilkan.
Kode :
$dataKeterangan= isset($_POST['txtKeterangan']) ?
$_POST['txtKeterangan'] : $myData[' keterangan'];
$dataKeterangan diisi dengan data keterangan kehadiran, datanya dari database
yang akan diedit, variabel datanya akan dibaca di form txtKeterangan untuk
ditampilkan.
Berikut ilustrasinya :
Gambar 7.36 Posisi skrip program membaca data Absensi dari database
9. Pada skrip validasi form, hapus validasi form masukan Karyawan
(cmbKaryawan) dan Tanggal (txtTanggal).
27
Gambar 7.36 Dua skrip validasi form yang telah dinonaktifkan harus dihapus
10. Pada pembacaan variabel form, hapus 2 baris pembacaan form masukan
Karyawan dan Tanggal, karna keduanya sudah dinonaktifkan.
Gambar 7.36 Dua skrip pembaca form yang telah dinonaktifkan harus dihapus
11. Gantilah querv(perintah SQL) dari yang semula memakai INSERT menjadi
UPDATE, yaitu perintah menyimpan kembal i data lama ke dalam database
setelah adanya perubahan. Skrip lengkapnya adalah :
else {
# SIMPAN DATA KE DATABASE
$mySql = "UPDATE absensi SET jam_masuk='$txtJamMasuk',
jam_keluar='$txtJamKeluar',
status_kehadiran='$cmbStatus',
jenis_kerja='$cmbJenis', keterangan='$txtKeterangan'
WHERE id='".$_POST['txtKode']."'";
$myQry=mysql_query($mySql, $koneksidb) or die ("Gagal
query".mysql_error());
if($myQry){
echo "<meta http-equiv='refresh' content='0;
url=?page=Absensi-Data'>";
}
exit;
}
12. Simpan kembali programnya, tekan Ctrl + S.
28
7.5 Hapus Data Absensi
Untuk membuat program Hapus Data Absensi juga memerlukan menu untuk
memilih record (baris data) mana yang akan dihapus. Kita akan menggunakan link
menu Delete yang ada di halaman tampil data. Caranya:
1. Buka Dreamweaver.
2. Buat dokumen baru dengan tipe PHP, lalu masuklah ke halaman kode ( Code
view).
3. Hapus semua kode HTML yang ada, lalu ketikkan kode program berikut:
<?php
include_once "library/inc.sesadmin.php";
if($_GET) {
if(empty($_GET['Kode'])){
echo "<b>Data yang dihapus tidak ada</b>";
}
else {
// Hapus data
$mySql = "DELETE FROM absensi WHERE
id='".$_GET['Kode']."'";
$myQry = mysql_query($mySql, $koneksidb) or die ("Eror
hapus data".mysql_error());
if($myQry){
echo "<meta http-equiv='refresh' content='0;
url=?page=Absensi-Data'>";
}
}
}
?>
4. Simpan file program di atas dengan nama absensi_delete.php.
Tambahkan kotak konfirmasi saat akan menghapus data. Jadi, saat link menu Delete
diklik, maka akan ada jendela konfirmasi perta nyaan ' Anda vakin akan menghapus
data ini ...? ', baru setelah klik OK/Yes, baru skrip program hapus di atas akan
dijalankan. Caranya:
1. Buka lagi file program absensi_data.php.
2. Masuklah pada halaman kode ( Code view), carilah skrip menu Delete.
3. Sisipkan skrip perintah onClick, seperti berikut :
<a href="?page=Absensi-Delete&Kode=<?php echo $Kode; ?>"
target="_self" alt="Delete Data" onclick="return confirm('ANDA
YAKIN AKAN MENGHAPUS DATA ABSENSI INI ... ?')">Delete</a>
4. Simpan lagi programnya, tekan Ctrl + S.