TIM :
412013003
412013009
Hendrich Pangestu
KATA PENGANTAR
Puji syukur kepada Tuhan atas berkat dan rahmatNya sehingga laporan dan program
aplikasi web ini dapat diselesaikan. Terima kasih kepada ibu Esther yang telah membimbing
dalam pembuatan program dan laporan ini.
Kami berharap laporan ini dapat membantu pembaca agar dapat memahami bagaimana
pembuatan aplikasi web ini. Untuk itu kami mohon kritik dan saran dari pembaca agar
laporan ini dapat lebih disempurnakan.
Demikian laporan ini kami susun, kami ucapkan terima kasih dan selamat mempelajari
Jakarta , 16-12-2015
Penulis
DAFTAR ISI
1.
2.
3.
4.
5.
6.
Cover
Kata Pengantar
Daftar Isi
Daftar Gambar
Tujuan dan Manfaat Program
Pembahasan Program :
a. Use Case Diagram
b. Activity Diagram
c. Class Diagram
d. Code
e. Manual Program
7. Simpulan
DAFTAR GAMBAR
PEMAHASAN PROGRAM
1. Use Case Diagram
2. Activity Diagram
3. Class Diagram
ERD
Data Table
Tabel tJurusan
Tabel tRelation
<- Tabel tUser
4. Code
Berikut kami hanya menjelaskan code yang spesifik saja, bukan html atau css nya.
Berikut yg diperlukan dalam aplikasi karena menggunakan bootstrap.
Untuk koneksi ke database melalui koneksi.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbuorgchart");
?>
SECTION master.php
Pada master.php yang fungsinya adalah sebagai template master yang memiliki
header, navigasi dan footer untuk setiap website:
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet" />
<link href="assets/css/sweetalert.css" rel="stylesheet" />
<link href="assets/js/ui-lightness/jquery-ui-1.10.2.custom.css"
rel="stylesheet" />
<script src="assets/js/jquery-1.11.3.js"></script>
<script src="assets/js/sweetalert.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui1.10.2.custom.min.js"></script>
<script type="text/javascript" src="assets/js/primitives.min.js"></script>
<link href="assets/css/primitives.latest.css" media="screen"
rel="stylesheet"/>
<link href="assets/css/googleFonts.css" rel="stylesheet"/>
<link href="assets/js/dataTables/dataTables.bootstrap.css"
rel="stylesheet" />
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.metisMenu.js"></script>
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script src="assets/js/custom.js"></script>
Script dibawah untuk memunculkan fungsi dataTable yaitu table yang memiliki
fungsi pembatasan list data, dan pencarian data, serta penyortir data table
berdasarkan kolom :
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
Dibawah ini $content sebagai tempat yang nantinya akan menjadi isi website
dengan dicover ole h master.php :
<div id="page-wrapper">
<div id="page-inner">
<?php
include ($content);
?>
</div>
</div>
Untuk Aksi Logout lalu menggunakan sweetAlert (custom alert dari javaScript)
pada bagian swal, dan mengembalikan nya ke index.php :
if(isset($_POST['logout'])){
session_unset();
session_destroy();
echo '<script language="javascript">';
echo 'swal({title: "Good Bye!"},
function(){window.location.href="index.php"});';
echo '</script>';
}
SECTION home.php
Untuk membedakan apakah ada yang login atau tidak menggunakan:
<?php if(isset($_SESSION['user_id'])){ ?>
Login.php
Untuk verifikasi saat user melakukan login :
<?php
if(isset($_POST['login'])){
$id = $_POST['username'];
$password = $_POST['password'];
Users.php
Untuk memunculkan table data pegawai:
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped tablebordered table-hover" id="dataTables-example">
<?php
if(isset($_SESSION['user_id'])){if($baris['tipe'] == 'admin'){?>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Gender</th>
<th>Tempat Lahir</th>
<th>Tanggal
Lahir</th>
<th>Alamat</th>
<th>Nomor Kontak</th>
<th>Email</th>
<th>Divisi</th>
<th>Tipe User</th>
<th>Edit</th>
<th>Remove</th>
</tr>
</thead>
<?php }else{ ?>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Gender</th>
<th>Email</th>
<th>Divisi</th>
</tr>
</thead>
<?php }}else{?>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Gender</th>
<th>Email</th>
<th>Divisi</th>
</tr>
</thead>
<?php }?>
<tbody>
<?php
while($user =
mysql_fetch_array($h)){
$qry1 =
"Select * from tjurusan where kdjur='".$user['kdjur']."'";
$option =
mysql_fetch_array(mysql_query($qry1));
if(isset($_SESSION['user_id'])){if($baris['tipe'] == 'admin'){
if($user['id'] != $id){
<td><a
href=profil.php?id='.$user['id'].'>'.$user['id'].'</a></td>
<td>'.$user['nama'].'</td>
<td>'.$user['jk'].'</td>
<td>'.$user['tptl'].'</td>
<td>'.$user['tgll'].'</td>
<td>'.$user['alamat'].'</td>
<td>'.$user['kontak'].'</td>
<td>'.$user['email'].'</td>
<td>'.$option['jurusan'].'</td>
<td>'.$user['tipe'].'</td>
<td align="center"><a
href="reg.php?id='.$user['id'].'" class="btn btn-success btn-sm"><i
class="fa fa-edit"></i> Edit User</button></td>
<td align="center"><a
href="delete.php?id='.$user['id'].'" name="delete" class="btn btn-danger
btn-sm"><i class="fa fa-trash-o"></i> Delete User</a></td>
</tr>';
}else{
<td><a
href=profil.php?id='.$user['id'].'>'.$user['id'].'</a></td>
<td>'.$user['nama'].'</td>
<td>'.$user['jk'].'</td>
<td>'.$user['tptl'].'</td>
<td>'.$user['tgll'].'</td>
<td>'.$user['alamat'].'</td>
<td>'.$user['kontak'].'</td>
<td>'.$user['email'].'</td>
<td>'.$option['jurusan'].'</td>
<td>'.$user['tipe'].'</td>
</tr>';
}
}else{
echo '
<tr class="gradeA">
<td><a
href=profil.php?id='.$user['id'].'>'.$user['id'].'</a></td>
<td>'.$user['nama'].'</td>
<td>'.$user['jk'].'</td>
<td>'.$user['email'].'</td>
<td>'.$option['jurusan'].'</td>
</tr>';
}}else{
echo '
<tr class="gradeA">
<td><a
href=profil.php?id='.$user['id'].'>'.$user['id'].'</a></td>
<td>'.$user['nama'].'</td>
<td>'.$user['jk'].'</td>
<td>'.$user['email'].'</td>
<td>'.$option['jurusan'].'</td>
</tr>';
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
Reg2.php
Agar report warning dari php tidak muncul sehingga tidak merusak susunan
website :
error_reporting(E_ALL & ~E_WARNING);
Untuk memeriksa agar melakukan aksi register dengan input ke database, edit
dengan update ke database, dan mengecek jika ada id maka masuk ke form edit
profile, jika tidak maka form add employer :
if(isset($_POST['register'])){
$nama = $_POST['name'];
$dept = $_POST['dept'];
$gender = $_POST['gender'];
$tpt = $_POST['tpt'];
$tgl = $_POST['tgl'];
$add = $_POST['add'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$type = $_POST['type'];
$password = password_hash($_POST['password'],
PASSWORD_BCRYPT);
$tempmin = $dept*1000;
$tempmax = $dept*1000+999;
$query = "select * from tuser where id>$tempmin AND
id<$tempmax";
$id = $tempmin + mysql_num_rows(mysql_query($query))+1;
$fotoN = $_FILES['foto']['name'];
$fotoS = $_FILES['foto']['size'];
$fotoT = $_FILES['foto']['tmp_name'];
$sumber = $fotoT;
if($fotoS == 0){
$tujuan = "foto/default.png";
}else{
$tujuan = "foto/" . $id. ".jpg";
move_uploaded_file($sumber, $tujuan);
}
if(mysql_query($sql)){
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "User Telah
Terdaftar Dengan id='.$id.'", type: "success"},
function(){window.location.href="reg.php"});';
echo '</script>';
}
}else if(isset($_POST['edit'])){
$id = $_POST['id'];
$nama = $_POST['name'];
$gender = $_POST['gender'];
$tpt = $_POST['tpt'];
$tgl = $_POST['tgl'];
$add = $_POST['add'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$type = $_POST['type'];
if($_POST['chpas']=="yes"){
$password = $_POST['password'];
}else{
$password = $data['password'];
}
if($_POST['chpp']=="yes"){
$fotoN = $_FILES['foto']['name'];
$fotoS = $_FILES['foto']['size'];
$fotoT = $_FILES['foto']['tmp_name'];
$sumber = $fotoT;
if($data['foto']!="foto/default.png"){
unlink("foto/" . $id . ".jpg");
}
if($fotoS == 0){
$tujuan = "foto/default.png";
}else{
$tujuan = "foto/" . $id. ".jpg";
move_uploaded_file($sumber, $tujuan);
}
}else{
$tujuan = $data['foto'];
}
if(mysql_query($sql)){
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "Data User Dengan
id='.$id.' Berhasil Diganti!", type: "success"},
function(){window.location.href="reg.php?id='.$id.'"});';
echo '</script>';
}
}
if(isset($_GET['id'])){
$id = $_GET['id'];
$sql = " select * from tuser where id ='$id'";
$hasil = mysql_query($sql);
$baris = mysql_fetch_array($hasil);
}
Changepp.php
Script dibawah untuk membuat saat setelah user membrowse gambar, sehingga
munculkan gambar tersebut :
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
}
};
</script>
if($fotoS == 0){
$tujuan = "foto/default.png";
}else{
if($baris['foto'] != "foto/default.png"){
unlink("foto/" . $id . ".jpg");
}
$tujuan = "foto/" . $id . ".jpg";
move_uploaded_file($sumber, $tujuan);
}
editProf.php
Untuk editProf.php hampir sama dengan reg2.php hanya pada bagian edit saja
dan beberapa form hanya readonly dan tidak dimunculkan.
gantipass.php
Untuk validasi password dan update password ke database :
if(isset($_POST['gpas'])){
$id = $_GET['id'];
$sql = "select * from tuser where id = '$id'";
$hasil = mysql_query($sql);
$baris = mysql_fetch_array($hasil);
$new = $_POST['new'];
$old = $_POST['old'];
if(password_verify($_POST['old'], $baris['password'])){
$password = password_hash($new, PASSWORD_BCRYPT);
$sql = "update tuser set password='$password' where
id='$id'";
if(mysql_query($sql)){
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "Password
Berhasil Diganti!", type: "success"},
function(){window.location.href="index.php"});';
echo '</script>';
}
}else{
echo '<script language="javascript">';
echo 'swal({title: "Error...", text: "Password
Salah!", type: "error"}, function(){window.location.href="gpas.php"});';
echo '</script>';
}
}
del.php
Form ini untuk memastikan apakah data tersebut benar mau dihapus, dan
menangani bila user secara tidak sengaja masuk ke del.php tidak menggunakan
tombol sehingga dilempar kembali ke index.php:
if(isset($_GET['id'])){
$id = $_GET['id'];
$sql = " select * from tuser where id ='$id'";
$hasil = mysql_query($sql);
$baris = mysql_fetch_array($hasil);
}else{
header("location: index.php");
}
delete.php
Untuk menghapus data pegawai dari database:
<?php
include("koneksi.php");
$content = "del.php";
include("master.php");
if(isset($_GET['id'])){
$id = $_GET['id'];
if(isset($_POST['del'])){
$id = $_GET['id'];
$sql1 = " select * from tuser where id ='$id'";
$hasil1 = mysql_query($sql1);
$baris1 = mysql_fetch_array($hasil1);
if($baris1['foto'] != "foto/default.png"){
unlink("foto/" . $id . ".jpg");
}
$sql2 = " select * from trelation where id ='$id'";
$hasil2 = mysql_query($sql2);
if(mysql_num_rows($hasil2) > 0){
$asd = "DELETE FROM trelation WHERE id='$id'";
mysql_query($asd);
}
$sql = "DELETE FROM tuser WHERE id='$id'";
mysql_query($sql);
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "Data User
id='.$id.' Telah Dihapus!", type: "success"},
function(){window.location.href="user.php"});';
echo '</script>';
}
}else{
header("location: index.php");
}
?>
Jd2.php
Form untuk menambah serta mengedit deskjob berdasarkan pegawai yang telah
terdaftar, mekanisme nya sama dengan reg2.php hanya saja memasukkannya,
atau mengupatenya ke trelation:
<?php
include ("koneksi.php");
error_reporting(E_ALL & ~E_WARNING);
if(isset($_POST['add'])){
$id = $_POST['id'];
$desk = $_POST['desk'];
if($_POST['par'] == 'no'){
$parid = $id;
$tipe = 0;
}else{
$parid = $_POST['idparent'];
$tipe = $_POST['pos'];
}
if(mysql_query($sql)){
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "User id='.$id.'
Telah Terdaftar Di Job Desk!", type: "success"},
function(){window.location.href="jd.php"});';
echo '</script>';
}
}else if(isset($_POST['edit'])){
$id = $_POST['id'];
$desk = $_POST['desk'];
if($_POST['par'] == 'no'){
$parid = $id;
$tipe = 0;
}else{
$parid = $_POST['idparent'];
$tipe = $_POST['pos'];
}
if(mysql_query($sql)){
echo '<script language="javascript">';
echo 'swal({title: "Success!", text: "Data Job Desk
user id='.$id.' Telah Berhasil Diubah!", type: "success"},
function(){window.location.href="vjd.php"});';
echo '</script>';
}
}
if(isset($_GET['id'])){
$i = $_GET['id'];
$qrya = " select * from trelation where id ='$i'";
$now = mysql_fetch_array(mysql_query($qrya));
}
?>
viewjd.php
Form untuk melihat seluruh data deskjob pegawai, hampir sama dengan users.php
:
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped tablebordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>ID Parent</th>
<th>Nama Parent</th>
<th>Deskripsi
Job</th>
<th>Tipe</th>
<?php
if($baris['tipe'] == 'admin'){?>
<th>Edit</th>
<th>Remove</th>
<?php } ?>
</tr>
</thead>
<tbody>
<?php
while($jd =
mysql_fetch_array($h)){
$sql1 =
"Select * from tuser where id='".$jd['id']."'";
$nama1 =
mysql_fetch_array(mysql_query($sql1));
$sql2 =
"Select * from tuser where id='".$jd['idparent']."'";
$nama2 =
mysql_fetch_array(mysql_query($sql2));
if($baris['tipe'] == 'admin'){
echo '
<tr class="gradeA">
<td><a
href="profil.php?id='.$jd['id'].'">'.$jd['id'].'</a></td>
<td>'.$nama1['nama'].'</td>
<td><a
href="profil.php?id='.$jd['idparent'].'">'.$jd['idparent'].'</a></td>
<td>'.$nama2['nama'].'</td>
<td>'.$jd['deskjob'].'</td>';
if($jd['tipe'] == 0){
echo '<td>Root</td>';
echo '<td>Reguler</td>';
}else{
echo '<td>-</td>';
}
echo '
<td align="center"><a href="jd.php?id='.$jd['id'].'" class="btn btnsuccess btn-sm"><i class="fa fa-edit"></i> Edit Job Desk</button></td>';
<td><a
href="profil.php?id='.$jd['id'].'">'.$jd['id'].'</a></td>
<td>'.$nama1['nama'].'</td>
<td><a
href="profil.php?id='.$jd['idparent'].'">'.$jd['idparent'].'</a></td>
<td>'.$nama2['nama'].'</td>
<td>'.$jd['deskjob'].'</td>
<td>'.$jd['tipe'].'</td>';
if($jd['tipe'] == 0){
echo '<td>Root</td>';
echo '<td>Reguler</td>';
}else{
echo '<td>-</td>';
}
echo '
</tr>';
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
chart.php
Form untuk menampilkan susunan struktur organisasi secara visual dengan
menggunakan jquery-ui organization chart sehingga terlihat seperti tree
<script type='text/javascript'>
jQuery(window).load(function () {
var options = new
primitives.orgdiagram.Config();
var items = [
<?php while ($parent =
mysql_fetch_array($h1)){
$qry3 = "select * from tuser
where id=".$parent['id']."";
$h3 = mysql_query($qry3);
$user = mysql_fetch_array($h3);
$qry2 = "select * from tjurusan
where kdjur=".$user['kdjur']."";
$h2 = mysql_query($qry2);
$kdjur =
mysql_fetch_array($h2);
?>
new
primitives.orgdiagram.ItemConfig({
id: <?php echo $user['id'];?>,
parent: <?php if($parent['idparent']
== $user['id']){echo 'null';}else{echo
$parent['idparent'];}?>,
title: "<?php echo
$parent['deskjob']?> - <?php echo $kdjur['jurusan']?>",
description: "<?php echo
$user['id']?> - <?php echo $user['nama']?>",
options.items = items;
options.cursorItem = 0;
options.buttons = buttons;
options.hasButtons =
primitives.common.Enabled.True;
options.hasSelectorCheckbox =
primitives.common.Enabled.False;
options.onButtonClick = function (e,
data) {
window.location.href =
"profil.php?id=" + data.context.id;
};
jQuery("#strukturorganisasi").orgDiagram(options);
});
</script>
5. Manual Program
1. Pertama kali masuk ke website user akan menjadi free user yang hanya bisa
melihat data pegawai, lalu mengklik id pegawai untuk melihat profil pegawai
dan melihat struktur organisasi.
2. Saat user melakukan login jika form login belom terisi maka user diminta untuk
memasukan kembali, jika data tidak ada maka akan muncul notifikasi gagal,
jika sukses maka muncul notifikasi sukses lalu masuk ke index.php
3. Jika regular user :
a. User dapat melihat profil dia sendiri
b. User dapat mengubah profile picture pada tab settings, pada profile picture
jika dikonfirmasi tanpa browse picture akan membuat profile picture menjadi
default.png
c. User dapat mengubah password pada tab settings, pada kolom password jika
password kurang dari 6 character maka akan muncul notifikasi error, jika
password lama tidak cocok akan muncul notifikasi error, jika field kosong
diminta untuk memasukan lagi, jika sukses akan muncul notifikasi success
d. User dapat mengubah data profile pada tab settings, pada edit profile jika
salah satu field kosong akan muncul validasi untuk diisi dahulu, jika password
salah muncul notifikasi error, jika sukses muncul notifikasi sukses
e. User dapat melihat profil pegawai pada navigasi employer > view employer.
Lalu dapat melakukan sorting dengan mengklik salah satu judul table, dapat
melakukan searching pada kolom searching, dapat mengubah limit table,
dapat pindah pada index table selanjutnya, dapat melihat profil dengan cara
mengklik salah satu id pegawai
f. User dapat melakukan Log Out
4. Jika Admin :
SIMPULAN
Demikian laporan ini dibuat untuk membuat pembaca mengetahui program web aplikasi
struktur organisasi, dan penggunaan template bootstrap dan sweetAlert, dan
implementasi dari JavaScript, Html, css, jQuery, PHP, MySQL Database dan Query.
Untuk kritik dan saran dapat dikirim ke email penulis :
Edhy Wilieyanto : edhy.2013tin003@civitas.ukrida.ac.id
Hendrich Pangestu : hendrich.2013tin009@civitas.ukrida.ac.id