panduan membuat program absensi karyawan
DESCRIPTION
Modul Pembuatan Program Absensi KaryawanTRANSCRIPT
1
Panduan Proyek:
Membuat Aplikasi WebPENGGAJIAN & ABSENSIKaryawan dengan PHP, MySQL dan
Dreamweaver
Penulis:
Bunafit Nugrohowww.BunafitKomputer.Com
Penerbit : ALIF MediaYogyakarta
2
Bab 7Panduan Membuat Program AbsensiKaryawan
Data absensi karyawan disimpan dalam database, yaitu tabel absensi, memiliki relasitabel langsung dengan data Karyawan. Dengan tabel yang sudah kita buat, absensikehadiran dapat dicatat mulai dari jam masuk dan jam keluar, juga tanggal dan statuskehadiran (tidak masuk, masuk, ijin dan cuti) . Program utama input absensi karyawanterdapat 4 file inti, yaitu :
absensi_add.php : Form untuk tambah data Absensi absensi_edit.php : Form 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 pernahAnda pelajari, yaitu seperti membuat Program Transaksi Penggajian, TransaksiPinjaman dan Lembur.Sebagai informasi, eBook Panduan Membuat Program Absensi Karyawan inimerupakan bab lanjutan dari buku cetak yang Anda pelajari, yaitu Bab 7. Jika Andamemperoleh eBook ini bukan dari CD Penyerta buku, maka sebagai informasipanduan lengkap dan skrip yang dipelajari ada di buku dengan judul; PanduanProyek Membuat Web Aplikasi Penggajian & Absensi Karyawan dengan PHP,MySQL dan Dreamweaver . Penulisnya adalah; Bunafit Nugroho, Penerbit; ALIFMedia, terbitan September 2013, info lanjut ada di www.bunafit-komputer.com.
7.1 Membuat Menu dan Kontrol Program AbsensiPekerjaan pertama, Anda harus membuat menu unt uk mengakses halaman utama dataAbsensi, yaitu dari file menu.php, selanjutnya menambahkan kontrol file programdalam 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 ?page=Absensi-
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 ?page=Absensi-Data :
Gambar 7.1 Contoh alamat URL yang dikirim oleh menu, lalu jalankan olehprogram 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?page=Absensi-Data, maka program buka_file.php akan mengeksekusi denganmemanggil file program absensi_data.php.
6. Buat kode kontrol jika ada menu yang mengarah ke URL; ?page=Absensi-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 ? page=Absensi-Add, maka filekontrol program buka_file.php akan mengeksekusi file pr ogramabsensi_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 EmptyPage!");
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 AbsensiSekarang kita akan membuat Program Tambah Data Absensi, perintah SQL yangdigunakan untuk menyimpan data adalah INSERT. Sebagai latihan, sebaiknya Andamencoba sendiri membuatnya tanpa harus membaca panduan ini . Jika memang masihbelum mampu, ikuti saja langkah berikut :
1. Buka Dreamweaver.
2. Buat dokumen baru (tekan Ctrl + N). Dari tab General, klik Dynamic Page, laluklik 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 programnyadari bagian Action, panel Properties.
Action : <?php $_SERVER['PHP_SELF']; ?>
Target : _self
Method : POST
Gambar 7.1 Membuat area form untuk formulir Tambah Data
Pada bagian action, arti dari <?php $_SERVER['PHP_SELF']; ?> adalahalamat targetnya menuju form itu sendiri. Cara lain yang dapat gunakan, mengaturalamat action-nya dengan alamat ?page=Absensi-Add. Seperti contoh di bawah:
5
Gambar 7.1 Mengatur alamat Action data pada form
Kenapa harus ?page=Absensi-Add ?, Ya, karna alamat tersebut akan diakses dihalaman kontrol buka_file.php untuk menjalankan file absensi_add.php , yaituform itu sendiri.
7. Klik pada area form lagi, lalu tekan Ctrl + S untuk menyimpan perubahanprogram.
8. Dari panel Common, tambahkan tabel untuk desain form, sebanyak 9 baris dan 3kolom, lalu klik tombol Go. Posisi tabel ini harus berada di dalam area form (garismerah 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 kotakmasukan. 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 tagtable, 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 aturnilai 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 ("GagalQuery".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 Karyawandari 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 aturnilainya pada panel Properties.
TextField : txtTanggal
Max chars : 12
Init Val : <?php echo $dataTanggal; ?>
Gambar 7.8 Membuat form masukan data tanggal absensi, dan mengatur variabeldari Properties
Sekarang masuk ke halaman kode untuk mengaktifkan TextField menjadikalender JavaScript. Caranya, sisipkan kode class="tcal" di dalam kodeTextField tanggal, seperti contoh:<input name="txtTanggal" type="text" class="tcal" value="<?phpecho $dataTanggal; ?>" maxlength="12" />
Kode class="tcal" adalah perintah yang berasal dari plugins/tigra_calendar ,sehingga hasilnya jika diklik akan muncul kotak kalender JavaScript sepertigambar berikut:
Gambar 7.8 Contoh kalender JavaScirpt dari tigra_calendar
13. Tambahkan form masukan berup a Text Field pada baris Jam Masuk, laluatur 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 Jam Keluar, laluatur 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 halamankode (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 Jenis Kerja, laluatur nilai propertinya.
List/Menu : cmbJenis
Gambar 3.20 Mengatur properti List/Menu, form masukan data Jenis Kerja
Masih pada List/Menu Jenis 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, laluatur 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 , laluatur nilai propertinya.
Button Name : btnSimpan
Value : SIMPAN
Action : Submit form
Gambar 7.10 Membuat tombol Submit, mengatur variabel dan label tombol menjadiSimpan
19. Simpan kembali programnya (Ctrl + S).
Setelah form masukan data selesai dibuat , sekarang Anda dapat melanjutkan membuatskrip PHP yang tugasnya mengeksekusi data yang diisi dari form, terdiri dari skriptemporary membaca variabel form, skirp validasi form dan skrip untuk menyimpandata 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.<?phpinclude_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 temporary untuk merekam data dari form masukkan, dan memberikannilai 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 v ariabel $dataKaryawan, data iniselanjutnya 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 nilaidata pada form, hasil datanya ditampung dalam variable $dataTanggal. Data iniselanjutnya ditampilkan ke form masukan Tanggal. Ilustrasi berikut dilihat darihalaman 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 dariform yang di-Submit, hasil datanya ditampung dalam $dataJamMasuk.Selanjutnya data ini ditampilkan ke form masukan Jam Masuk. Berikut ilustrasidilihat 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 JamKeluar, dan akan dikosongkan jika form belum pernah submit (klik tombolSimpan).
6. Sekarang buat skrip program di dalam blok kodeif(isset($_POST['btnSimpan'])){ ... }, yaitu untuk validasi form dan menyimpandata ke database.
7. Pertama membuat skrip validasi form masukan. Buat deklarasi array, untukvariabel $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 Jam 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 Jam 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 bolehkosong !";}
13. Buat skrip untuk memvalidasi jika data kosong pada form Jenis 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 disimpandengan 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 kalidalam absensi. Skripnya :$sqlCek="SELECT * FROM absensi WHERE kd_karyawan='$cmbKaryawan'AND tanggal='$txtTanggal'";$qryCek=mysql_query($sqlCek, $koneksidb) or die ("ErorQuery".mysql_error());if(mysql_num_rows($qryCek)>=1){
14
$pesanError[] = "<b>ABSENSI TANGGAL [ $txtTanggal ] SUDAHMASUK</b>, ganti dengan yang lain";}
16. Buat skrip program untuk menampilkan pesan error jika ditemukan dari bagianvalidasi, 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 " $noPesan. $pesan_tampil<br>";
}echo "</div> <br>";
}else { // SKRIP SIMPAN DATA KE DATABASE.}
Jika ada kotak form masukan yang lupa diisi, mak a pesan error yang semuaditampung pada variabel array $pesanError akan ditampilkan. Berikut adalahcontohnya:
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 adaerror atau kesalahan yang ditemukan pada variabel $pesanError, maka data padaform 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, $koneksidb) or die ("Gagalquery".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 haruslogin sebagai admin. Klik menu Data Absensi sebelah kiri, lalu klik link menuTambah (Add Data). Jika program Anda belum ada karna belum dibuat, langsungsaja diakses lewat alamat browser http://localhost/gaji-karyawan/?page=Absensi-Add.Berikut contoh tampilannya:
Gambar 7.15 Tampilan halaman program Tambah Absensi
7.3 Tampil Data AbsensiHalaman Tampil Data Absensi berguna untuk menampilkan semua data dari semuaabsensi kehadiran karyawan setiap harinya, datanya kita tampilkan dalam bentukhalaman, satu halaman ada 50 baris data. Dari halaman tampil data ini, kita berikantombol Tambah (Add Data) untuk mengakses program Tambah Data Absensi.Halaman tampil data juga sekaligus berisi menu Edit untuk megubah data, dan menuDelete 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 dimasing-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 5baris dan 1 kolom, lebarnya 750 pixels, pada bagian header pilih None.
6. Tambahkan judul dengan font header 1 (misal; DATA ABSENSI), dan judulpada baris paling bawah untuk paging (halaman) ditulis Jumlah Data.
7. Tambahkan gambar berlogo Tambah (btn_add_data.png) pada baris ke-2, filenyaada di folder images. Caranya, klik menu Insert, klik Image, lalu cari filegambarnya.
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 kealamat 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) dantutup PHP (?>) pada baris awal program.
21. Buat skrip program untuk memanggil file inc.sesadmin.php.<?phpinclude_once "library/inc.sesadmin.php";
?>
22. Buat skrip program yang berfungsi untuk paging, yaitu memecah jumlah dataAbsensi 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 ("errorpaging: ".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 datake layar) di dalam baris ke-3 dari tabel utama. Tabel baru disesuaikan data yangakan ditampilkan, yaitu dengan 2 baris dan 8 kolom data, lalu atur tampilannyaseperti contoh berikut:
Gambar 7.22 Desain tabel tampil data dan desain menunya
9. Dua kotak bagian kanan dijadikan satu (merger), lalu diberi judul Tools. Di bawahTools masih ada dua kotak, buat tulisan Edit dan Delete yang nantinya dipakaiuntuk link menu.
10. Masuklah pada halaman kode ( Code), butlah skrip program untuk menampilkandata Absensi ke layar. Tempatnya di bawah </tr> dan sebelum <tr> baris keduadari tabel tampil data. <?php$mySql = "SELECT absensi.*, karyawan.nik, karyawan.nm_karyawanFROM absensi
LEFT JOIN karyawan ONabsensi.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 inidiletakkan 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, dariPoin (2).
11. Di dalam kalang while poin (2), buat skrip program untuk membaca data ENUMstatus 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 tabelseperti Poin (5) dari gambar di atas, skripnya adalah:<?php } ?>
20
13. Pada baris kedua dari tabel tampil data kita gunakan untuk menampilkaninformasi data dari database. Sekarang, ganti perintah : <tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </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 Jumlah Data, buat kode berikut untuk menampilkan jumlah barisdata yang ditampilkan.<?php echo $jml; ?>
15. Sekarang kita akan membuat menu nomor halaman . Masuklah ke halamanDesign, klik kanan pada baris paling bawah (di samping teks Jumlah Data), klikmenu Table dan klik Split Cell.
21
Gambar 7.27 Langkah untuk memecah kolom
Dari jendela Split Cell yang tampil, pilih opsi Columns, masukkan jumlah kolomnyaadalah 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 :<?phpfor ($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 targetlink 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, p ilih pada tulisan Delete, lalu buat link menunya kealamat berikut:?page=Absensi-Delete&Kode=<?php echo $Kode; ?>
20. Simpan lagi programnya (Ctrl + S).
7.4 Ubah Data AbsensiSekarang kita akan membuat program Ubah Data Absensi, sehingga jika memangada kesalahan saat input bagian administrasi dapat men geditnya, bisa mengganti namajam masuk, jam keluar dan status kehadiran. Menu Edit untuk memilih data sudahdibuat, yaitu di halaman Tampil Data Absensi. Sekarang kita tinggal menyiapkanform 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 targetlink-nya mengarah ke ?page=Absensi-Edit&Kode=xxx, parameter xxx adalah kodedata atau Id yang dipilih untuk di-edit. Sekarang, kita akan membuat fileabsensi_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, panelProperties.
Action : <?php $_SERVER['PHP_SELF']; ?>
Target : _self
Method : POST
Pada bagian action, arti dari <?php $_SERVER['PHP_SELF']; ?> adalahalamat targetnya menuju form itu sendiri. Opsi lain, Anda dapat mengisi alamataction-nya dengan alamat ?page=Absensi-Edit (dari buka_file.php, alamattersebut 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 objek HiddenField untuk merekam data kode
6. Matikan form masukan Karyawan ( cmbKaryawan) dengan menambah perintahdisabled, supaya nilai datanya tidak dapat diganti. S eperti contoh:<select name="cmbKaryawan" disabled="disabled">
7. Matikan form masukan Tanggal (txtTanggal) dengan menambah perintahreadonly, 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 skripprogram untuk menampilkan data Absensi yang dipilih ke dalam variabel form,dengan cara membaca kode yang didapat dari URL (?page=Absensi-Edit&Kode=xxx), alamat URL tersebut dikirim saat mengklik menu Edit dihalaman 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 datakaryawan 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 formdi-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 yangakan diedit, variabel datanya akan dibaca di form txtJamMasuk untukditampilkan.
Kode :$dataJamKeluar= isset($_POST['txtJamKeluar']) ?$_POST['txtJamKeluar'] : $myData['jam_keluar'];
$dataKeluar diisi dengan data jam keluar kantor, datanya dari database yangakan diedit, variabel datanya akan dibaca di form txtJamKeluar untukditampilkan.
26
Kode :$dataStatus = isset($_POST['cmbStatus']) ? $_POST['cmbStatus']: $myData['status_kehadiran'];
$dataStatus diisi dengan data status absensi, datanya dari database yang akandiedit, variabel datanya akan dibaca di form list/Menu cmbStatus untukditampilkan.
Kode :$dataJenis = isset($_POST['cmbJenis']) ? $_POST['cmbJenis'] :$myData['jenis_kerja'];
$dataJenis diisi dengan data jenis hari kerja, datanya dari database yang akandiedit, variabel datanya akan dibaca di form list/Menu cmbJenis untukditampilkan.
Kode :$dataKeterangan= isset($_POST['txtKeterangan']) ?$_POST['txtKeterangan'] : $myData[' keterangan'];
$dataKeterangan diisi dengan data keterangan kehadiran, datanya dari databaseyang akan diedit, variabel datanya akan dibaca di form txtKeterangan untukditampilkan.
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 masukanKaryawan dan Tanggal, karna keduanya sudah dinonaktifkan.
Gambar 7.36 Dua skrip pembaca form yang telah dinonaktifkan harus dihapus
11. Gantilah query(perintah SQL) dari yang semula memakai INSERT menjadiUPDATE, yaitu perintah menyimpan kembal i data lama ke dalam databasesetelah 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 ("Gagalquery".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 AbsensiUntuk membuat program Hapus Data Absensi juga memerlukan menu untukmemilih record (baris data) mana yang akan dihapus. Kita akan menggunakan linkmenu 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:
<?phpinclude_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 Deletediklik, maka akan ada jendela konfirmasi perta nyaan “ Anda yakin akan menghapusdata ini ...? “, baru setelah klik OK/Yes, baru skrip program hapus di atas akandijalankan. 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('ANDAYAKIN AKAN MENGHAPUS DATA ABSENSI INI ... ?')">Delete</a>
4. Simpan lagi programnya, tekan Ctrl + S.