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

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.


f. Selanjutnya Anda akan diminta untuk memilih aplikasi yang mau diinstal.

Centang saja semua pilihan dan klik tombol Next.


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.


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.


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.


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.


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.


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.

https://www.sublimetext.com/

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.


5. Lalu akan muncul tampilan seperti dibawah ini. Pilih next.


6. Lalu muncul tampilan berikut. Pilih install.


7. Tunggu hingga proses installasi selesai

8. Setelah itu buka aplikasi, dan aplikasi siap digunakan.


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">



<link href="libs/bootstrap/dist/css/bootstrap.min.css"

rel="stylesheet">



<link href="dist/css/offline-font.css" rel="stylesheet">

<link href="dist/css/custom.css" rel="stylesheet">



<link href="libs/font-awesome/css/font-awesome.min.css"

rel="stylesheet" type="text/css">



<script src="libs/jquery/dist/jquery.min.js"></script>







</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>

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

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


<input type="password" class="form-control" name="password"

placeholder="Password" required>

</div>


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


<input type="submit" class="btn btn-success btn-block" name="login"

value="Masuk">

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>



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



<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");

?>





<div id="page-wrapper">


<div class="row">


<h1 class="page-header">Beranda</h1>

</div>

</div>

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


<div class="panel panel-yellow">


<div class="row">


<i class="fa fa-plus-circle fa-3x"></i>

</div>


<div class="huge"><?php echo $wait; ?></div>

<div><h4>Menunggu Approval</h4></div>

</div>

</div>

</div>

<a href="app_wait.php">




right"></i></span>


</div>

</a>

</div>


</div>

</div>

</div>



<?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



$pagedesc = "Data Karyawan";


include("dist/function/format_tanggal.php");

include("dist/function/format_rupiah.php");

?>





<div class="row">


<h1 class="page-header">Data Karyawan</h1>

</div>

</div>

<div class="row">

<div class="col-lg-12"><?php include("layout_alert.php"); ?></div>

</div>

<div class="row">




<a href="karyawan_tambah.php" class="btn btn-success">Tambah</a>

</div>


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



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

</div>

</div>




<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


?>

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 :



<link rel="stylesheet" href="css/printing.css">

<?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>


</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>


</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>


</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>


</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>


</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>


</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>


</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>


</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>


</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>


</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


if(isset($_GET['npp'])) {

$sql = "SELECT * FROM employee WHERE npp='". $_GET['npp']

."'";


$data = mysqli_fetch_array($ress);

}



$menuparent = "master";


?>


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>





<div class="row">



</div>

</div>

<div class="row">


</div>

<div class="row">


<form class="form-horizontal" action="karyawan_update.php"

method="POST" enctype="multipart/form-data">


<div class="panel-heading"><h3>Edit Data</h3></div>



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


<label class="control-label col-sm-3">NPP Baru (Abaikan jika tidak

diubah)</label>


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


<label class="control-label col-sm-3">Nama</label>


<input type="text" name="nama" class="form-control"

placeholder="Nama" value="<?php echo $data['nama_emp'] ?>" required>

</div>

</div>


<label class="control-label col-sm-3">Jenis Kelamin</label>


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


<label class="control-label col-sm-3">Telepon</label>


<input type="number" name="telp" min="0" class="form-control"

placeholder="Telepon" value="<?php echo $data['telp_emp'] ?>"required>

</div>

</div>


<label class="control-label col-sm-3">Divisi</label>


<input type="text" name="divisi" class="form-control"

placeholder="Divisi" value="<?php echo $data['divisi'] ?>" required>

</div>

</div>


<label class="control-label col-sm-3">Jabatan</label>


<input type="text" name="jabatan" class="form-control"

placeholder="Jabatan" value="<?php echo $data['jabatan'] ?>" required>

</div>

</div>


<label class="control-label col-sm-3">Alamat</label>


<textarea name="alamat" class="form-control" placeholder="Alamat"

rows="3" required><?php echo $data['alamat'] ?></textarea>

</div>

</div>


<label class="control-label col-sm-3">Hak Akses</label>


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


<label class="control-label col-sm-3">Jumlah Cuti</label>


<input type="number" name="jml" min="0" class="form-control"

placeholder="Telepon" value="<?php echo $data['jml_cuti'] ?>"required>

</div>

</div>


<label class="control-label col-sm-3">Aktif</label>


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


<label class="control-label col-sm-3">Password</label>


<input type="text" name="password" class="form-control"

placeholder="Password" value="<?php echo $data['password'] ?>" required>

</div>

</div>


<label class="control-label col-sm-3">Foto (Abaikan Jika Tidak

Diubah)</label>


<input type="file" name="foto" class="form-control" accept="image/*">

</div>

</div>

</div>


<button type="submit" name="perbarui" class="btn btn-

success">Update</button>

</div>

</div>

</form>

</div>

</div>




<?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


$id = $_GET['npp'];

$sql = "DELETE FROM employee WHERE npp='". $id ."'";


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




$menuparent = "master";


?>


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>





<div class="row">



</div>

</div>

<div class="row">


</div>

<div class="row">


<form class="form-horizontal" action="karyawan_insert.php"

method="POST" enctype="multipart/form-data">


<div class="panel-heading"><h3>Tambah Data</h3></div>



<label class="control-label col-sm-3">NPP</label>


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


<label class="control-label col-sm-3">Nama</label>


<input type="text" name="nama" class="form-control"

placeholder="Nama" required>

</div>

</div>


<label class="control-label col-sm-3">Jenis Kelamin</label>


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


<label class="control-label col-sm-3">Telepon</label>


<input type="number" name="telp" min="0" class="form-control"

placeholder="Telepon" required>

</div>

</div>


<label class="control-label col-sm-3">Divisi</label>


<input type="text" name="divisi" class="form-control"

placeholder="Divisi" required>

</div>

</div>


<label class="control-label col-sm-3">Jabatan</label>


<input type="text" name="jabatan" class="form-control"

placeholder="Jabatan" required>

</div>

</div>


<label class="control-label col-sm-3">Alamat</label>


<textarea name="alamat" class="form-control" placeholder="Alamat"

rows="3" required></textarea>

</div>

</div>


<label class="control-label col-sm-3">Jumlah Cuti</label>


<input type="number" name="jml" min="0" class="form-control"

placeholder="Jumlah Cuti" required>

</div>

</div>


<label class="control-label col-sm-3">Hak Akses</label>


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


<label class="control-label col-sm-3">Foto</label>


<input type="file" name="foto" class="form-control"

accept="image/*" required>

</div>

</div>

</div>


<button type="submit" name="simpan" class="btn btn-

success">Simpan</button>

</div>

</div>

</form>

</div>

</div>




<?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


$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);





?>





<div class="row">


<form class="form-horizontal">



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

</form>

</div>

</div>

<div class="row">




<div class="row">



</div>


<div class="huge"><?php echo $a; ?></div>

<div><h4>Approved</h4></div>

</div>

</div>

</div>

<a href="cuti_app.php">




right"></i></span>


</div>

</a>

</div>





<div class="row">



</div>


<div class="huge"><?php echo $b; ?></div>


</div>

</div>

</div>

<a href="cuti_waitapp.php">




right"></i></span>


</div>

</a>

</div>



<div class="panel panel-red">


<div class="row">


<i class="fa fa-minus-circle fa-3x"></i>

</div>


<div class="huge"><?php echo $c; ?></div>

<div><h4>Rejected</h4></div>

</div>

</div>

</div>

<a href="cuti_reject.php">




right"></i></span>


</div>

</a>

</div>


</div>




<?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



$pagedesc = "Buat Pengajuan";

$menuparent = "cuti";


$now = date('Y-m-d');

$npp = $sess_pegawaiid;

?>


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>





<div class="row">


<h1 class="page-header">Pengajuan Cuti</h1>

</div>

</div>

<div class="row">


</div>

<div class="row">


<form class="form-horizontal" name="cuti" action="cuti_insert.php"

method="POST" enctype="multipart/form-data" onSubmit="return valid();">


<div class="panel-heading"><h3>Form Pengajuan Cuti</h3></div>



<label class="control-label col-sm-3">Mulai Cuti</label>


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


<label class="control-label col-sm-3">Akhir Cuti</label>


<input type="date" name="akhir" class="form-control"

required>

</div>

</div>


<label class="control-label col-sm-3">Keterangan</label>


<textarea name="keterangan" class="form-control"

placeholder="Keterangan" rows="3" required></textarea>

</div>

</div>


<label class="control-label col-sm-3">Leader</label>


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


<button type="submit" name="simpan" class="btn btn-

success">Simpan</button>

</div>

</div>

</form>

</div>

</div>




<?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


$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);





?>





<div class="row">





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

</form>

</div>

</div>

<div class="row">





<h2 align="center">Approval Pengajuan Cuti</h2>

</div>

</div>

</form>

</div>

</div>

<div class="row">




<div class="row">



</div>


<div class="huge"><?php echo $d; ?></div>

<div><h4>Menunggu diapprove</h4></div>

</div>

</div>

</div>

<a href="approval_cuti.php">




right"></i></span>


</div>

</a>

</div>





<div class="row">



</div>


<div class="huge"><?php echo $e; ?></div>

<div><h4>Semua Data</h4></div>

</div>

</div>

</div>

<a href="approval.php">




right"></i></span>


</div>

</a>

</div>


</div>

<div class="row">





<h2 align="center">Pengajuan Cuti Diri</h2>

</div>

</div>

</form>

</div>

</div>

<div class="row">




<div class="row">



</div>


<div class="huge"><?php echo $a; ?></div>

<div><h4>Approved</h4></div>

</div>

</div>

</div>

<a href="cuti_app.php">



<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>


</div>

</a>

</div>





<div class="row">



</div>


<div class="huge"><?php echo $b; ?></div>


</div>

</div>

</div>

<a href="cuti_waitapp.php">




right"></i></span>


</div>

</a>

</div>



<div class="panel panel-red">


<div class="row">


<i class="fa fa-minus-circle fa-3x"></i>

</div>


<div class="huge"><?php echo $c; ?></div>

<div><h4>Rejected</h4></div>

</div>

</div>

</div>

<a href="cuti_reject.php">




right"></i></span>


</div>

</a>

</div>


</div>




<?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



$pagedesc = "Approval Approval";




$id = $sess_leaderid;

?>





<div class="row">


<h1 class="page-header">Semua Data Approval Cuti</h1>

</div>

</div>

<div class="row">

<div class="col-lg-12"><?php

include("layout_alert.php"); ?></div>

</div>

<div class="row">




<?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);

?>


data">

<thead>

<tr>


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


</tr>

</thead>

<tbody>

<?php

$i=1;

while($data = mysqli_fetch_array($Qry)){

echo '<tr>';


echo '<td class="text-center">'. $data['no_cuti'] .'</td>';



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>';



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>


<div class="modal fade bs-example-modal" id="myModal"

tabindex="-1" role="dialog" aria-hidden="true">




<p>Sedang memproses…</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>







"responsive": true,

"processing": true,

"columnDefs": [

{ "orderable": false, "targets": [] }

]

});


});

</script>

<script>

var app = {

code: '0'

};


e.preventDefault();



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 npp = $this.data('load-npp');

if(npp) {


target')).load('karyawan_detail.php?code='+npp);

app.npp = npp;

}

});

</script>

<?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



$pagedesc = "Approval Cuti";




$id = $sess_leaderid;

?>





<div class="row">


<h1 class="page-header">Data Approval Cuti</h1>

</div>

</div>

<div class="row">


</div>

<div class="row">




<?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);

?>


data">

<thead>

<tr>


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


</tr>

</thead>

<tbody>

<?php

$i=1;

while($data = mysqli_fetch_array($Qry)){

echo '<tr>';


echo '<td class="text-center">'. $data['no_cuti'] .'</td>';



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>';



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>


<div class="modal fade bs-example-modal" id="myModal" tabindex="-

1" role="dialog" aria-hidden="true">




<p>Sedang memproses…</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>







"responsive": true,

"processing": true,

"columnDefs": [

{ "orderable": false, "targets": [] }

]

});


});

</script>

<script>

var app = {

code: '0'

};


e.preventDefault();



if(code) {


target')).load('cuti_detail.php?code='+code);

app.code = code;

}

});

$('[data-load-npp]').on('click',function(e) {

e.preventDefault();


var npp = $this.data('load-npp');

if(npp) {


target')).load('karyawan_detail.php?code='+npp);

app.npp = npp;

}

});

</script>

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

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

Documents