BAB II PERANCANGAN APLIKASI · a. Bukalah aplikasi XAMPP, bisa melalui Start Menu atau Desktop, dan klik icon XAMPP. Atau, jika Anda membukanya begitu proses instalasi selesai maka
Post on 06-Aug-2020
9 Views
Preview:
Transcript
BAB II
PERANCANGAN APLIKASI
2.1. Installasi Software
Membuat sebuah aplikasi tidak terlepas dari software pendukung untuk dapat
membuat aplikasi yang kita bangun dapat berjalan sesuai dengan yang kita inginkan,
begitupun dalam pembuatan aplikasi yang kami rancang dalam buku ini. Ada dua
aplikasi dasar yang penulis gunakan dalam pembuatan aplikasi “SI CUPITA” ini,
yaitu Xampp sebagai software yang mendukung dalam pembuatan database dan
Sublime text yang berperan sebagai text editor yang mendukung dalam pembuatan
kode program dalam pembuatan aplikasi ini.
Adapun cara menginstall software tersebut, penulis mencoba memberikan sedikit
ulasan mengenai tatacara menginstall software yang kami gunakan dalam pembuatan
aplikasi ini. Caranya adalah sebagai berikut :
2.1.1 Cara Install XAMPP
Untuk menjalankan program “Si-Cupita” kita memerlukan suatu aplikasi server
localhost. Salah satu aplikasi yang paling banyak digunakan dan cukup familiar di
kalangan web developer saat ini adalah XAMPP.
Aplikasi XAMPP ini dibuat oleh Apache Friends dan installer-nya bisa langsung
diunduh dari situs mereka. Biasa nya dalam satu package berisi aplikasi sebagai
berikut:
• Apache
• MySQL
• PHP
• phpMyAdmin
• FileZilla FTP Server
• Tomcat
• XAMPP Control Panel
Berhubung penulis menggunakan Windows, maka panduan ini juga diperuntukkan
bagi pengguna PC Windows. Namun kurang lebih untuk sistem operasi lain, caranya
hampir sama,
Berikut ini tutorial Cara Instal XAMPP Di Windows:
a. Download aplikasi XAMPP terbaru, dapat diakses melalui
“https://webhostmu.com/cara-instal-xampp/.
b. Pilih dan download salah satu versi yang sesuai dengan komputer anda.
c. Dobel klik file XAMPP yang baru saja Anda download, nanti selanjutnya
akan muncul jendela “installer language” seperti di bawah ini:
Gambar 2.1 Instalasi XAMPP
d. Selanjutnya pilih bahasa. Pilihlah Bahasa Inggris (English). Klik OK.
e. Berikutnya akan muncul jendela yang isinya meminta Anda menutup
semua aplikasi yang sedang berjalan. Jika semua aplikasi sudah ditutup,
maka klik tombol Next.
Gambar 2.2 Instalasi XAMPP
f. Selanjutnya Anda akan diminta untuk memilih aplikasi yang mau diinstal.
Centang saja semua pilihan dan klik tombol Next.
Gambar 2.3 Instalasi XAMPP
g. Kemudian Anda akan diminta untuk menentukan lokasi folder
penyimpanan file-file dan folder XAMPP. Secara default akan diarahkan
ke lokasi c:\xampp. Namun jika Anda ingin menyimpannya di folder lain
bisa klik browse dan tentukan secara manual folder yang ingin digunakan.
Jika sudah selesai, lanjutkan dan klik tombol Install.
Gambar 2.4 Instalasi XAMPP
h. Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah muncul
jendela seperti di bawah ini, klik tombol Finish untuk menyelesaikannya.
i. Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini yang
menanyakan Anda apakah mau langsung menjalankan aplikasi XAMPP
atau tidak. Jika ya, maka klik YES dan XAMPP siap untuk di gunakan.
Gambar 2.5 Instalasi XAMPP
Cara Menjalankan Aplikasi XAMPP
a. Bukalah aplikasi XAMPP, bisa melalui Start Menu atau Desktop, dan klik
icon XAMPP. Atau, jika Anda membukanya begitu proses instalasi selesai
maka klik Yes seperti yang terlihat pada gambar di atas.
Gambar 2.6 Instalasi XAMPP
b. Setelah terbuka, silahkan klik tombol Start pada kolom Action sehingga
tombol tersebut berubah menjadi Stop. Dengan mengklik tombol tersebut,
artinya itulah aplikasi yang dijalankan. Biasanya jika saya menggunakan
XAMPP, yang saya start hanyalah aplikasi Apache dan MySQL, karena
saya tidak memerlukan aplikasi seperti Filezilla, dan lain-lain.
Gambar 2.7 Instalasi XAMPP
c. Sekarang bukalah browser kesukaan anda, dan coba ketikkan
http://localhost/xampp di address bar. Jika muncul tampilan seperti gambar
di bawah ini, instalasi telah berhasil.
Gambar 2.8 Instalasi XAMPP
Setelah melalui rangkaian proses diatas XAMPP-pun siap digunakan.
2.1.2 Cara Install SUBLIME TEXT
Sublime Text merupakan aplikasi text editor yang sudah sangat populer dikalangan
para programmer karena fleksibel dan mudah dalam penggunaannya. Sublime Text-
pun menjadi salah satu unsur penting dalam pembuatan dan perancangan program “Si-
Cupita” ini.
Adapun dalam hal penginstallan aplikasi ini kami telah membuat ulasan mengenai
bagaimana cara menginstall aplikasi ini. Adapun caranya adalah sebagai berikut :
1. Download terlebih dahulu aplikasi Sublime Text yang paling sesuai
dengan komputer atau PC yang anda miliki. Andapun dapat mendownload
aplikasi Sublime Text melalui link https://www.sublimetext.com .
2. Setelah anda mendownload aplikasi Sublime Text, double klik pada file
yang telah anda download.
3. Kemudian akan muncul tampilan seperti dibawah. Lalu tekan next.
Gambar 2.9 Instalasi Sublime Text 3
4. Lalu akan muncul tampilan yang memungkinkan anda untuk menentukan
tempat penyimpanan aaplikasi ini. Biasanya anda akan diarahkan pada
localdisk C pada PC anda sebagai default. Namun jika anda ingin
menyimpan file ditempat yang anda inginkan, maka anda dapat memilih
dimana file akan disimpan.
Gambar 2.10 Instalasi Sublime Text 3
5. Lalu akan muncul tampilan seperti dibawah ini. Pilih next.
Gambar 2.11 Instalasi Sublime Text 3
6. Lalu muncul tampilan berikut. Pilih install.
Gambar 2.12 Instalasi Sublime Text 3
7. Tunggu hingga proses installasi selesai
8. Setelah itu buka aplikasi, dan aplikasi siap digunakan.
Gambar 2.12 Instalasi Sublime Text 3
2.2. Rancangan Database
Dalam membuat sebuah aplikasi, perancangan database merupakan salah satu
komponen yang sangat penting karena kita dapat menentukan dimana data akan
disimpan dan proses penyimpanan data dalam sebuah aplikasi agar aplikasi dapat
menyimpan data secara maksimal.
Langkah pertama dalam pembuatan databse untuk aplikasi SI_CUPITA adalah
membuat databsae dengan nama db_cuti. Langkah selanjutnya, buatlah tabel sebagai
berikut :
1. Tabel admin
Gambar 2.13 Tabel Admin
2. Tabel cuti
Gambar 2.14 Tabel Cuti
3. Tabel employee
Gambar 2.15 Tabel Employee
2.3. Rancangan Aplikasi
Untuk memulai merancang aplikasi ini silahkan copy paste tamplate yang telah kita
sediakan dalam CD ROM yang terbundling dalam buku ini.
Berikut cara install aplikasi dari CD ROM:
1. Masukan CD pada PC anda
2. Buka File Tamplate yang tersedia
3. Copy file “Template”
4. Buka folder xampp yang telah anda install sebelumnya
5. Buka folder “htdocs”
6. Paste file template yang telah di copy pada folder “htdocs”
7. Ubah nama template menjadi “sicupita”
8. Selanjutnya, ikuti langkah sesuai tutorial pada buku ini
9. Selesai
2.4. Rancangan Form Login
Gambar 2.16 Form Login
Pada rancangan form login tersebut terdiri dari beberapa komponen, yaitu:
Username, Password, dan Hak akses. Selanjutnya, buatlah file baru pada sublime text
dengan nama “login.php” dan simpan pada folder sicupita. Tulislah kode berikut.
<?php $pagedesc = "Login"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"content="width=device-width, initial-
scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sistem Informasi Pengajuan Cuti Online - <?php echo $pagedesc
?></title>
<link href="libs/images/isk-logo.jpg" rel="icon" type="images/x-
icon">
<!-- Bootstrap Core CSS -->
<link href="libs/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/offline-font.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="libs/font-awesome/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="libs/jquery/dist/jquery.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and
media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file://
-->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-color: #f1f4f7">
<section id="main-wrapper" style="margin-top: 120px">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4"><?php
include("layout_alert.php"); ?></div>
</div><!-- /.row -->
<div class="row">
<div id="page-wrapper" class="col-lg-4 col-lg-offset-4 col-md-4 col-
md-offset-4" style="background-color: #ffffff; border-radius: 3px; webkit-
box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px
rgba(0,0,0,.05)">
<div class="row">
<div class="col-lg-12"><br/>
<center><img src="libs/images/isk-logo.jpg" width="120"
height="120"></center>
<h2 class="text-center">Sistem Informasi Pengajuan Cuti<br/> <b>PT.
ISK Indonesia</b></h2>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<form action="login_auth.php" method="post">
<div class="form-group">
<input type="text" class="form-control" name="username"
placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password"
placeholder="Password" required>
</div>
<div class="form-group">
<select class="form-control" name="akses" required>
<option value="">======= Login Sebagai =======</option>
<option value="Admin">Administrator/HRD</option>
<option value="Lead">Leader</option>
<option value="Mng">Manager</option>
<option value="Pgw">Pegawai</option>
<option value="Spv">Supervisor</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success btn-block" name="login"
value="Masuk">
</div>
</form>
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- footer-bottom -->
<div class="navbar navbar-inverse navbar-fixed-bottom footer-
bottom">
<div class="container text-center">
<p class="text-center" style="color: #D1C4E9; margin: 0 0 5px;
padding: 0"><small>Sistem Informasi Pengajuan Cuti Online PT. ISK
Indonesia</small></p>
</div>
</div><!-- /.footer-bottom -->
<!-- Bootstrap Core JavaScript -->
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
2.5. Rancangan Form Logout
Untuk membuat form logout silahkan buka aplikasi sublime text dan buat file baru
dengan nama “logout.php” dan simpan pada folder sicupita. Dengan cara pilih File > New
File (Ctrl+N) > ketik codding sebagai berikut:
<?php
// memulai session
session_start();
// menghancurkan session
$logout = session_destroy();
if($logout) {
// mengarahkan ke halaman login.php
header("location: login.php?login=out");
}
2.6. Rancangan Tampilan Antar Muka Admin
Gambar 2.18 Tampilan Antar Muka Admin
Untuk membuat form Tampilan Antar Muka Admin seperti gamabar diatas
silahkan buka aplikasi sublime text dan buat file baru dengan nama “index.php” dan
simpan pada folder sicupita. Dengan cara pilih File > New File (Ctrl+N) > ketik codding
sebagai berikut:
<?php
include("sess_check.php");
// query database mencari data admin
$sql_e = "SELECT npp FROM employee WHERE
active='Aktif'";
$ress_e = mysqli_query($conn, $sql_e);
$e = mysqli_num_rows($ress_e);
$sql_wait = "SELECT no_cuti FROM cuti WHERE
stt_cuti='Menunggu APproval HRD'";
$ress_wait = mysqli_query($conn, $sql_wait);
$wait = mysqli_num_rows($ress_wait);
// deskripsi halaman
$pagedesc = "Beranda";
include("layout_top.php");
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Beranda</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $e; ?></div>
<div><h4>Jumlah Karyawan Aktif</h4></div>
</div>
</div>
</div>
<a href="Karyawan.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-6 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-plus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $wait; ?></div>
<div><h4>Menunggu Approval</h4></div>
</div>
</div>
</div>
<a href="app_wait.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
Selanjutnya membuat form Data karyawan seperti gamabar dibawah silahkan buka
aplikasi sublime text dan buat file baru dengan nama “karyawan.php” dan simpan pada
folder sicupita.
Gambar 2.19 Form Data Karyawan
Berikut script kode yang perlu di ketik :
<?php
include("sess_check.php");
// deskripsi halaman
$pagedesc = "Data Karyawan";
include("layout_top.php");
include("dist/function/format_tanggal.php");
include("dist/function/format_rupiah.php");
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Data Karyawan</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<a href="karyawan_tambah.php" class="btn btn-success">Tambah</a>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover" id="tabel-
data">
<thead>
<tr>
<th width="1%">No</th>
<th width="10%">NPP</th>
<th width="10%">Nama</th>
<th width="5%">Telepon</th>
<th width="10%">Divisi</th>
<th width="10%">Akses</th>
<th width="10%">Opsi</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$sql = "SELECT * FROM employee ORDER BY nama_emp ASC";
$ress = mysqli_query($conn, $sql);
while($data = mysqli_fetch_array($ress)) {
echo '<tr>';
echo '<td class="text-center">'. $i .'</td>';
echo '<td class="text-center">'. $data['npp'] .'</td>';
echo '<td class="text-center">'. $data['nama_emp'] .'</td>';
echo '<td class="text-center">'. $data['telp_emp'] .'</td>';
echo '<td class="text-center">'. $data['divisi'] .'</td>';
echo '<td class="text-center">'. $data['hak_akses'] .'</td>';
echo '<td class="text-center">
<a href="#myModal" data-toggle="modal" data-load-
code="'.$data['npp'].'" data-remote-target="#myModal .modal-body" class="btn btn-
primary btn-xs">Detail</a>
<a href="karyawan_edit.php?npp='. $data['npp'] .'" class="btn btn-
warning btn-xs">Edit</a>';?>
<a href="karyawan_hapus.php?npp=<?php echo $data['npp'];?>"
onclick="return confirm('Apakah anda yakin akan menghapus <?php echo
$data['nama_emp'];?>?');" class="btn btn-danger btn-xs">Hapus</a></td>
<?php
echo '</td>';
echo '</tr>';
$i++;
}
?>
</tbody>
</table>
</div>
<!-- Large modal -->
<div class="modal fade bs-example-modal" id="myModal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
</div>
</div>
</div><!-- /.panel -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<script type="text/javascript">
$(document).ready(function() {
$('#tabel-data').DataTable({
"responsive": true,
"processing": true,
"columnDefs": [
{ "orderable": false, "targets": [6] }
]
});
$('#tabel-data').parent().addClass("table-responsive");
});
</script>
<script>
var app = {
code: '0'
};
$('[data-load-code]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var code = $this.data('load-code');
if(code) {
$($this.data('remote-target')).load('karyawan_detail.php?code='+code);
app.code = code;
}
});
</script>
<?php
include("layout_bottom.php");
?>
Selanjutnya membuat form Detail Karayawan seperti gamabar dibawah silahkan
buka aplikasi sublime text dan buat file baru dengan nama “karyawan_detail.php”.
Dengan cara pilih File > New File (Ctrl+N) > ketik codding sebagai berikut dan simpan
pada folder sicupita :
Gambar 2.20 Tampilan Detail
Berikut script kode yang perlu diketik :
<!-- Printing -->
<link rel="stylesheet" href="css/printing.css">
<?php
include("sess_check.php");
include("dist/function/format_tanggal.php");
if($_GET) {
$kode = $_GET['code'];
$sql = "SELECT * FROM employee WHERE npp='". $_GET['code'] ."'";
$query = mysqli_query($conn,$sql);
$result = mysqli_fetch_array($query);
}
else {
echo "Nomor Transaksi Tidak Terbaca";
exit;
}
?>
<html>
<head>
</head>
<body>
<div id="section-to-print">
<div id="only-on-print">
</div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Detail Karyawan</h4>
</div>
<div><br/>
<table width="100%">
<tr>
<td width="20%"><b>NPP</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['npp'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Nama</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['nama_emp'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Jenis Kelamin</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['jk_emp'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Telepon</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['telp_emp'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Divisi</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['divisi'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Jabatan</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['jabatan'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Alamat</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['alamat'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Jumlah Cuti</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php echo $result['jml_cuti'];?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Hak Akses</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><b><?php echo
$result['hak_akses'];?></b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Aktif</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><?php
if($result['active']=="Aktif"){
echo "Ya";
}else{
echo "Tidak";
}
?></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="20%"><b>Foto</b></td>
<td width="2%"><b>:</b></td>
<td width="78%"><img src="foto/<?php echo
$result['foto_emp'];?>" width="70px"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</body>
</html>
Selanjutnya, untuk membuat form Edit Karayawan seperti gamabar dibawah
silahkan buka aplikasi sublime text dan buat file baru dengan nama “karyawan_edit.php”.
Dengan cara pilih File > New File (Ctrl+N) > ketik codding sebagai berikut dan simpan
pada folder sicupita:
Gambar 2.21 Tampilan Edit Data Karyawan
Berikut script yang perlu diketik :
<?php
include("sess_check.php");
if(isset($_GET['npp'])) {
$sql = "SELECT * FROM employee WHERE npp='". $_GET['npp']
."'";
$ress = mysqli_query($conn, $sql);
$data = mysqli_fetch_array($ress);
}
// deskripsi halaman
$pagedesc = "Data Karyawan";
$menuparent = "master";
include("layout_top.php");
?>
<script type="text/javascript">
function checkNppAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_nppavailability.php",
data:'npp='+$("#npp").val(),
type: "POST",
success:function(data){
$("#user-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
</script>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Data Karyawan</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" action="karyawan_update.php"
method="POST" enctype="multipart/form-data">
<div class="panel panel-default">
<div class="panel-heading"><h3>Edit Data</h3></div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">NPP</label>
<div class="col-sm-4">
<input type="text" name="npplama" class="form-control"
placeholder="NPP" value="<?php echo $data['npp'] ?>" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">NPP Baru (Abaikan jika tidak
diubah)</label>
<div class="col-sm-4">
<input type="text" name="npp" onBlur="checkNppAvailability()"
class="form-control" placeholder="NPP Baru (Abaikan Jika Tidak Ada
Perubahan!)">
<span id="user-availability-status" style="font-size:12px;"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Nama</label>
<div class="col-sm-4">
<input type="text" name="nama" class="form-control"
placeholder="Nama" value="<?php echo $data['nama_emp'] ?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jenis Kelamin</label>
<div class="col-sm-3">
<select name="jk" id="jk" class="form-control" required>
<option value="<?php echo $data['jk_emp'] ?>" selected><?php
echo $data['jk_emp'] ?></option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Telepon</label>
<div class="col-sm-4">
<input type="number" name="telp" min="0" class="form-control"
placeholder="Telepon" value="<?php echo $data['telp_emp'] ?>"required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Divisi</label>
<div class="col-sm-4">
<input type="text" name="divisi" class="form-control"
placeholder="Divisi" value="<?php echo $data['divisi'] ?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jabatan</label>
<div class="col-sm-3">
<input type="text" name="jabatan" class="form-control"
placeholder="Jabatan" value="<?php echo $data['jabatan'] ?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Alamat</label>
<div class="col-sm-4">
<textarea name="alamat" class="form-control" placeholder="Alamat"
rows="3" required><?php echo $data['alamat'] ?></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Hak Akses</label>
<div class="col-sm-3">
<select name="akses" id="akses" class="form-control" required>
<option value="<?php echo $data['hak_akses'] ?>"
selected><?php echo $data['hak_akses'] ?></option>
<option value="Leader">Leader</option>
<option value="Manager">Manager</option>
<option value="Pegawai">Pegawai</option>
<option value="Supervisor">Supervisor</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jumlah Cuti</label>
<div class="col-sm-3">
<input type="number" name="jml" min="0" class="form-control"
placeholder="Telepon" value="<?php echo $data['jml_cuti'] ?>"required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Aktif</label>
<div class="col-sm-3">
<select name="aktif" id="aktif" class="form-control" required>
<option value="<?php echo $data['active']; ?>" selected><?php
echo $data['active']; ?></option>
<option value="Aktif">Aktif</option>
<option value="Tidak Aktif">Tidak Aktif</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Password</label>
<div class="col-sm-4">
<input type="text" name="password" class="form-control"
placeholder="Password" value="<?php echo $data['password'] ?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Foto (Abaikan Jika Tidak
Diubah)</label>
<div class="col-sm-3">
<input type="file" name="foto" class="form-control" accept="image/*">
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" name="perbarui" class="btn btn-
success">Update</button>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
Untuk membuat fungsi Hapus Data Karayawan seperti gamabar dibawah silahkan
buka aplikasi sublime text dan buat file baru dengan nama “karyawan_hapus.php” dan
simpan pada folder sicupita. Dengan cara pilih File > New File (Ctrl+N) > ketik skrip kode
sebagai berikut:
<?php
include("sess_check.php");
$id = $_GET['npp'];
$sql = "DELETE FROM employee WHERE npp='". $id ."'";
$ress = mysqli_query($conn, $sql);
header("location: karyawan.php?act=delete&msg=success");
?>
Selanjutnya, untuk membuat form Menambah Detail Karayawan seperti gamabar
dibawah silahkan buka aplikasi sublime text dan buat file baru dengan nama
“karyawan_tambah.php” simpan pada folder sicupita.
Gambar 2.23 Tampilan Tambah Data Karyawan
Berikut script yang perlu anda ketik :
<?php
include("sess_check.php");
// deskripsi halaman
$pagedesc = "Data Karyawan";
$menuparent = "master";
include("layout_top.php");
?>
<script type="text/javascript">
function checkNppAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_nppavailability.php",
data:'npp='+$("#npp").val(),
type: "POST",
success:function(data){
$("#user-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
</script>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Data Karyawan</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" action="karyawan_insert.php"
method="POST" enctype="multipart/form-data">
<div class="panel panel-default">
<div class="panel-heading"><h3>Tambah Data</h3></div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">NPP</label>
<div class="col-sm-4">
<input type="text" name="npp" onBlur="checkNppAvailability()"
class="form-control" placeholder="NPP" required>
<span id="user-availability-status" style="font-size:12px;"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Nama</label>
<div class="col-sm-4">
<input type="text" name="nama" class="form-control"
placeholder="Nama" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jenis Kelamin</label>
<div class="col-sm-3">
<select name="jk" id="jk" class="form-control" required>
<option value="" selected>--- Pilih Jenis Kelamin ---
</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Telepon</label>
<div class="col-sm-4">
<input type="number" name="telp" min="0" class="form-control"
placeholder="Telepon" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Divisi</label>
<div class="col-sm-4">
<input type="text" name="divisi" class="form-control"
placeholder="Divisi" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jabatan</label>
<div class="col-sm-4">
<input type="text" name="jabatan" class="form-control"
placeholder="Jabatan" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Alamat</label>
<div class="col-sm-4">
<textarea name="alamat" class="form-control" placeholder="Alamat"
rows="3" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Jumlah Cuti</label>
<div class="col-sm-3">
<input type="number" name="jml" min="0" class="form-control"
placeholder="Jumlah Cuti" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Hak Akses</label>
<div class="col-sm-3">
<select name="akses" id="akses" class="form-control" required>
<option value="" selected>--- Pilih Hak Akses ---</option>
<option value="Leader">Leader</option>
<option value="Manager">Manager</option>
<option value="Pegawai">Pegawai</option>
<option value="Supervisor">Supervisor</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Foto</label>
<div class="col-sm-3">
<input type="file" name="foto" class="form-control"
accept="image/*" required>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" name="simpan" class="btn btn-
success">Simpan</button>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
2.7. Rancangan Tampilan Antarmuka Pegawai
Untuk membuat form Tampilan Antarmuka Pegawai, seperti gambar diatas
silahkan buka aplikasi sublime text dan buat file baru didalam folder pegawai yang
terdapat pada folder sicupita dengan nama “index.php” dan simpan pada folder pegawai.
Gambar 2.24 Tampilan Antarmuka Pegawai
Berikut script yang perlu diketik :
<?php
include("sess_check.php");
$id=$sess_pegawaiid;
$sql_g = "SELECT * FROM employee WHERE npp='$id'";
$ress_g = mysqli_query($conn, $sql_g);
$res = mysqli_fetch_array($ress_g);
$sqlb = "SELECT * FROM cuti WHERE npp='$id' AND
stt_cuti!='Rejected'";
$ressb = mysqli_query($conn, $sqlb);
$b = mysqli_num_rows($ressb);
$sqlc = "SELECT * FROM cuti WHERE npp='$id' AND stt_cuti='Rejected'";
$ressc = mysqli_query($conn, $sqlc);
$c = mysqli_num_rows($ressc);
$sqla = "SELECT * FROM cuti WHERE npp='$id' AND hrd_app=1";
$ressa = mysqli_query($conn, $sqla);
$a = mysqli_num_rows($ressa);
// deskripsi halaman
$pagedesc = "Beranda";
include("layout_top.php");
include("dist/function/format_rupiah.php");
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-body">
<h2 align="center">Selamat Datang, <?php echo
$res['nama_emp'];?>!</h2>
<hr/>
<center><img src="../foto/<?php echo $res['foto_emp']?>"
width="120px"></center>
<hr/>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $a; ?></div>
<div><h4>Approved</h4></div>
</div>
</div>
</div>
<a href="cuti_app.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-4 col-md-4">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-plus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $b; ?></div>
<div><h4>Menunggu Approval</h4></div>
</div>
</div>
</div>
<a href="cuti_waitapp.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-4 col-md-4">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-minus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $c; ?></div>
<div><h4>Rejected</h4></div>
</div>
</div>
</div>
<a href="cuti_reject.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
Selanjutnya membuat form Pengajuan Cuti seperti gamabar dibawah silahkan buka
aplikasi sublime text dan buat file baru dengan nama “cuti_create.php” dan simpan pada
folder pegawai pada folder sicupita. Dengan cara pilih File > New File (Ctrl+N) > ketik
dan simpan codding berikut pada folder pegawai:
Gambar 2.25 Pengajuan Cuti
Berikut script yang perlu diketik:
<?php
include("sess_check.php");
// deskripsi halaman
$pagedesc = "Buat Pengajuan";
$menuparent = "cuti";
include("layout_top.php");
$now = date('Y-m-d');
$npp = $sess_pegawaiid;
?>
<script type="text/javascript">
function valid()
{
if(document.cuti.akhir.value < document.cuti.mulai.value){
alert("Tanggal akhir harus lebih besar dari tanggal mulai
cuti!");
return false;
}
if(document.cuti.mulai.value < document.cuti.now.value){
alert("Tanggal mulai cuti tidak valid!");
return false;
}
return true;
}
</script>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Pengajuan Cuti</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" name="cuti" action="cuti_insert.php"
method="POST" enctype="multipart/form-data" onSubmit="return valid();">
<div class="panel panel-default">
<div class="panel-heading"><h3>Form Pengajuan Cuti</h3></div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">Mulai Cuti</label>
<div class="col-sm-4">
<input type="date" name="mulai" class="form-control"
required>
<input type="hidden" name="now" class="form-control"
value="<?php echo $now;?>" required>
<input type="hidden" name="npp" class="form-control"
value="<?php echo $npp;?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Akhir Cuti</label>
<div class="col-sm-4">
<input type="date" name="akhir" class="form-control"
required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Keterangan</label>
<div class="col-sm-4">
<textarea name="keterangan" class="form-control"
placeholder="Keterangan" rows="3" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Leader</label>
<div class="col-sm-4">
<select name="leader" id="leader" class="form-control"
required>
<option value="" selected>======== Pilih Leader ========</option>
<?php
$mySql = "SELECT * FROM employee WHERE hak_akses='Leader'
AND active='Aktif' ORDER BY nama_emp";
$myQry = mysqli_query($conn, $mySql);
$dataLeader = $result['npp'];
while ($leaderData =
mysqli_fetch_array($myQry)) {
if ($leaderData['npp']== $dataLeader)
{
$cek = " selected";
} else { $cek=""; }
echo "<option
value='$leaderData[npp]' $cek>".$leaderData[nama_emp]."</option>";
}
?>
</select>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" name="simpan" class="btn btn-
success">Simpan</button>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
2.8. Rancangan Tampilan Antarmuka Leader
Untuk membuat form Tampilan Antarmuka leader, seperti gambar dibawah
silahkan buka aplikasi sublime text dan buat file baru didalam folder leader dengan nama
“index.php” kemudian simpan di folder leader pada folder sicupita.
Gambar 2.26 Tampilan Antarmuka Leader
Berikut script kode yang perlu diketik :
<?php
include("sess_check.php");
$id=$sess_leaderid;
$sql_g = "SELECT * FROM employee WHERE npp='$id'";
$ress_g = mysqli_query($conn, $sql_g);
$res = mysqli_fetch_array($ress_g);
$sqlb = "SELECT * FROM cuti WHERE npp='$id' AND stt_cuti!='Rejected'";
$ressb = mysqli_query($conn, $sqlb);
$b = mysqli_num_rows($ressb);
$sqlc = "SELECT * FROM cuti WHERE npp='$id' AND stt_cuti='Rejected'";
$ressc = mysqli_query($conn, $sqlc);
$c = mysqli_num_rows($ressc);
$sqla = "SELECT * FROM cuti WHERE npp='$id' AND hrd_app=1";
$ressa = mysqli_query($conn, $sqla);
$a = mysqli_num_rows($ressa);
$sqld = "SELECT * FROM cuti WHERE leader='$id' AND stt_cuti='Menunggu
Approval Leader'";
$ressd = mysqli_query($conn, $sqld);
$d = mysqli_num_rows($ressd);
$sqle = "SELECT * FROM cuti WHERE leader='$id'";
$resse = mysqli_query($conn, $sqle);
$e = mysqli_num_rows($resse);
// deskripsi halaman
$pagedesc = "Beranda";
include("layout_top.php");
include("dist/function/format_rupiah.php");
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-body">
<h2 align="center">Selamat Datang, <?php echo
$res['nama_emp'];?>!</h2>
<hr/>
<center><img src="../foto/<?php echo $res['foto_emp']?>"
width="120px"></center>
<hr/>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-body">
<h2 align="center">Approval Pengajuan Cuti</h2>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-plus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $d; ?></div>
<div><h4>Menunggu diapprove</h4></div>
</div>
</div>
</div>
<a href="approval_cuti.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-6 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $e; ?></div>
<div><h4>Semua Data</h4></div>
</div>
</div>
</div>
<a href="approval.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-body">
<h2 align="center">Pengajuan Cuti Diri</h2>
</div>
</div><!-- /.panel -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $a; ?></div>
<div><h4>Approved</h4></div>
</div>
</div>
</div>
<a href="cuti_app.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-4 col-md-4">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-plus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $b; ?></div>
<div><h4>Menunggu Approval</h4></div>
</div>
</div>
</div>
<a href="cuti_waitapp.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
<div class="col-lg-4 col-md-4">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-minus-circle fa-3x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $c; ?></div>
<div><h4>Rejected</h4></div>
</div>
</div>
</div>
<a href="cuti_reject.php">
<div class="panel-footer">
<span class="pull-left">Lihat Rincian</span>
<span class="pull-right"><i class="fa fa-arrow-circle-
right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div><!-- /.panel-green -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<?php
include("layout_bottom.php");
?>
Selanjutnya membuat form Semua Data Pengajuan Cuti, silahkan buka aplikasi
sublime text dan buat file baru dengan nama “approval.php” simpan pada folder leader
yang ada pada folder sicupita. Berikut script kode yang perlu diketik :
<?php
include("sess_check.php");
// deskripsi halaman
$pagedesc = "Approval Approval";
include("layout_top.php");
include("dist/function/format_tanggal.php");
include("dist/function/format_rupiah.php");
$id = $sess_leaderid;
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Semua Data Approval Cuti</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php
include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<?php
$Sql = "SELECT cuti.*, employee.* FROM cuti, employee WHERE
cuti.npp=employee.npp AND cuti.leader='$id' ORDER BY cuti.tgl_pengajuan DESC";
$Qry = mysqli_query($conn, $Sql);
?>
<table class="table table-striped table-bordered table-hover" id="tabel-
data">
<thead>
<tr>
<th width="1%">No</th>
<th width="10%">No Cuti</th>
<th width="10%">Nama Pemohon</th>
<th width="5%">Tgl Pengajuan</th>
<th width="5%">Tgl Awal</th>
<th width="5%">Tgl Akhir</th>
<th width="5%">Opsi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($data = mysqli_fetch_array($Qry)){
echo '<tr>';
echo '<td class="text-center">'. $i .'</td>';
echo '<td class="text-center">'. $data['no_cuti'] .'</td>';
echo '<td class="text-center">
<a href="#myModal" data-toggle="modal" data-load-
npp="'.$data['npp'].'" data-remote-target="#myModal .modal-
body">'.$data['nama_emp'].'</a>
</td>';
echo '<td class="text-center">'.
IndonesiaTgl($data['tgl_pengajuan']) .'</td>';
echo '<td class="text-center">'. IndonesiaTgl($data['tgl_awal'])
.'</td>';
echo '<td class="text-center">'. IndonesiaTgl($data['tgl_akhir'])
.'</td>';
echo '<td class="text-center">
<a href="#myModal" data-toggle="modal" data-load-
code="'.$data['no_cuti'].'" data-remote-target="#myModal .modal-body" class="btn
btn-primary btn-xs">Detail</a>
';
if($data['hrd_app']==1){
?>
<a href="app_cetak.php?no=<?php echo $data['no_cuti'];?>"
target="_blank" class="btn btn-warning btn-xs">Cetak</a>
<?php
}
echo '</td>';
echo '</tr>';
$i++;
}
?>
</tbody>
</table>
</div>
<!-- Large modal -->
<div class="modal fade bs-example-modal" id="myModal"
tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<p>Sedang memproses…</p>
</div>
</div>
</div>
</div>
</div><!-- /.panel -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<script type="text/javascript">
$(document).ready(function() {
$('#tabel-data').DataTable({
"responsive": true,
"processing": true,
"columnDefs": [
{ "orderable": false, "targets": [] }
]
});
$('#tabel-data').parent().addClass("table-responsive");
});
</script>
<script>
var app = {
code: '0'
};
$('[data-load-code]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var code = $this.data('load-code');
if(code) {
$($this.data('remote-
target')).load('cuti_detail.php?code='+code);
app.code = code;
}
});
$('[data-load-npp]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var npp = $this.data('load-npp');
if(npp) {
$($this.data('remote-
target')).load('karyawan_detail.php?code='+npp);
app.npp = npp;
}
});
</script>
<?php
include("layout_bottom.php");
?>
Selanjutnya membuat form Approval Cuti, silahkan buka aplikasi sublime text
dan buat file baru dengan nama “approval_cuti.php”, kemudian simpan pada folder
leader yang terdapat pada folder sicupita.
<?php
include("sess_check.php");
// deskripsi halaman
$pagedesc = "Approval Cuti";
include("layout_top.php");
include("dist/function/format_tanggal.php");
include("dist/function/format_rupiah.php");
$id = $sess_leaderid;
?>
<!-- top of file -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Data Approval Cuti</h1>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<?php
$Sql = "SELECT cuti.*, employee.* FROM cuti, employee WHERE
cuti.npp=employee.npp AND cuti.leader='$id' AND cuti.stt_cuti='Menunggu Approval
Leader' ORDER BY cuti.tgl_pengajuan DESC";
$Qry = mysqli_query($conn, $Sql);
?>
<table class="table table-striped table-bordered table-hover" id="tabel-
data">
<thead>
<tr>
<th width="1%">No</th>
<th width="10%">No Cuti</th>
<th width="10%">Nama Pemohon</th>
<th width="5%">Tgl Pengajuan</th>
<th width="5%">Tgl Awal</th>
<th width="5%">Tgl Akhir</th>
<th width="5%">Opsi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($data = mysqli_fetch_array($Qry)){
echo '<tr>';
echo '<td class="text-center">'. $i .'</td>';
echo '<td class="text-center">'. $data['no_cuti'] .'</td>';
echo '<td class="text-center">
<a href="#myModal" data-toggle="modal" data-load-
npp="'.$data['npp'].'" data-remote-target="#myModal .modal-
body">'.$data['nama_emp'].'</a></td>';
echo '<td class="text-center">'.
IndonesiaTgl($data['tgl_pengajuan']) .'</td>';
echo '<td class="text-center">'. IndonesiaTgl($data['tgl_awal'])
.'</td>';
echo '<td class="text-center">'. IndonesiaTgl($data['tgl_akhir'])
.'</td>';
echo '<td class="text-center">
<a href="#myModal" data-toggle="modal" data-load-
code="'.$data['no_cuti'].'" data-remote-target="#myModal .modal-body" class="btn
btn-warning btn-xs">Detail</a>';?>
<a href="approval_review.php?no=<?php echo
$data['no_cuti'];?>" class="btn btn-primary btn-xs">Review</a></td>
<?php
echo '</td>';
echo '</tr>';
$i++;
}
?>
</tbody>
</table>
</div>
<!-- Large modal -->
<div class="modal fade bs-example-modal" id="myModal" tabindex="-
1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<p>Sedang memproses…</p>
</div>
</div>
</div>
</div>
</div><!-- /.panel -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /#page-wrapper -->
<!-- bottom of file -->
<script type="text/javascript">
$(document).ready(function() {
$('#tabel-data').DataTable({
"responsive": true,
"processing": true,
"columnDefs": [
{ "orderable": false, "targets": [] }
]
});
$('#tabel-data').parent().addClass("table-responsive");
});
</script>
<script>
var app = {
code: '0'
};
$('[data-load-code]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var code = $this.data('load-code');
if(code) {
$($this.data('remote-
target')).load('cuti_detail.php?code='+code);
app.code = code;
}
});
$('[data-load-npp]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var npp = $this.data('load-npp');
if(npp) {
$($this.data('remote-
target')).load('karyawan_detail.php?code='+npp);
app.npp = npp;
}
});
</script>
<?php
include("layout_bottom.php");
?>
2.9. Rancangan Tampilan Antarmuka Supervisor dan Manager
Pada rancangan antarmuka supervisor dan manager, langkah pembuatannya sama seperti
membuat tampilan antarmuka pada leader. Perbedaan pembuatan tampilan antarmukanya
hanya pada proses penyimpanan file yang akan dibuat, yaitu penyimpanan file antarmuka
supervisor disimpan pada folder “supervisor” dan untuk file antarmuka manager
disimpan pada folder “manager” yang keduanya ada pada folder sicupita yang
sebelumnya sudah di copy melalui CD ROM.
top related