laporan struktur organisasi

46
Struktur Organisasi TIM : 412013003 Edhy Wilieyanto (Leader) 412013009 Hendrich Pangestu Fakultas Teknik dan Ilmu Komputer Jurusan Teknologi Informatika Universitas Kristen Krida Wacana 2015

Upload: euodias-edhy-wilieyanto

Post on 16-Jul-2016

237 views

Category:

Documents


0 download

DESCRIPTION

aaaaaaaaaaaaaaaaaa

TRANSCRIPT

Page 1: Laporan Struktur Organisasi

Struktur Organisasi

TIM : 412013003 Edhy Wilieyanto (Leader)

412013009 Hendrich Pangestu

Fakultas Teknik dan Ilmu Komputer

Jurusan Teknologi Informatika

Universitas Kristen Krida Wacana

2015

Page 2: Laporan Struktur Organisasi

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

Page 3: Laporan Struktur Organisasi

DAFTAR ISI 1. Cover 2. Kata Pengantar 3. Daftar Isi 4. Daftar Gambar 5. Tujuan dan Manfaat Program 6. Pembahasan Program :

a. Use Case Diagram b. Activity Diagram c. Class Diagram d. Code e. Manual Program

7. Simpulan

Page 4: Laporan Struktur Organisasi

DAFTAR GAMBAR

Gambar halaman awal untuk free user

Gambar lihat pegawai untuk free user

Gambar lihat struktur organisasi untuk free user

Page 5: Laporan Struktur Organisasi

Gambar lihat profil pegawai untuk free user

Gambar halaman login

Gambar halaman awal untuk regular user, user profile

Page 6: Laporan Struktur Organisasi

Gambar halaman awal, user contact

Gambar halaman awal, user divisi

Gambar halaman awal, user setting

Page 7: Laporan Struktur Organisasi

Gambar ganti profil picture

Gambar ganti password

Gambar ganti profil

Page 8: Laporan Struktur Organisasi

Gambar lihat pegawai untuk regular user

Gambar lihat profil pegawai untuk regular user

Gambar lihat struktur organisasi untuk regular user

Page 9: Laporan Struktur Organisasi

Gambar tambah pegawai untuk admin

Gambar lihat pegawai untuk admin

Gambar edit data pegawai untuk admin

Page 10: Laporan Struktur Organisasi

Gambar konfirmasi hapus pegawai untuk admin

Gambar tambah deskjob pegawai untuk admin

Gambar lihat data deskjob untuk admin

Page 11: Laporan Struktur Organisasi

Gambar edit deskjob untuk admin

Gambar konfirmasi hapus deskjob untuk admin

Gambar login sukses

Page 12: Laporan Struktur Organisasi

Gambar login failed

Gambar halaman awal untuk admin

Gambar lihat struktur organisasi untuk admin

Page 13: Laporan Struktur Organisasi

Gambar Info setelah Log Out

Gambar Operasi Gagal

Gambar Operasi Sukses

Page 14: Laporan Struktur Organisasi

TUJUAN DAN MANFAAT Laporan ini dibuat untuk :

1. Memberikan pembaca wawasan pengetahuan tentang aplikasi web khususnya dalam struktur organisasi.

2. Memberikan pembaca pengetahuan penggunaan template bootstrap dan sweetAlert.

3. Memberikan pembaca pengetahuan tentang jQuery, PHP, HTML5 javascript, dan CSS3 serta MySQL Database dan Query.

4. Sebagai hasil dari projek tugas yang diberikan pada matakuliah “server base web design”.

Page 15: Laporan Struktur Organisasi

PEMAHASAN PROGRAM 1. Use Case Diagram

Page 16: Laporan Struktur Organisasi

2. Activity Diagram

Page 17: Laporan Struktur Organisasi
Page 18: Laporan Struktur Organisasi

3. Class Diagram ERD Data Table Tabel tJurusan Tabel tRelation

<- Tabel tUser

Page 19: Laporan Struktur Organisasi

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

?>

Lalu pada web untuk menghubungkan ke database disisipkan :

<?php

include("koneksi.php");

session_start();

?>

Page 20: Laporan Struktur Organisasi

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-ui-1.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>

Pemanggilan $content dilakukan sebagai berikut dimana isinya nanti adalah home.php :

<?php

$content = 'home.php';

include("master.php");

?>

Page 21: Laporan Struktur Organisasi

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

}

Untuk mendapatkan data dari tuser berdasarkan id yang login :

if(isset($_SESSION['user_id'])){

$id = $_SESSION['user_id'];

$sql = "select * from tuser where id = '$id'";

$hasil = mysql_query($sql);

$baris = mysql_fetch_array($hasil);

}

SECTION home.php

Untuk membedakan apakah ada yang login atau tidak menggunakan:

<?php if(isset($_SESSION['user_id'])){ ?>

Untuk mendapatkan tanggal sekarang dengan format tanggal-bulan-tahun dari sistem:

<?php echo(date('d-M-Y'));?>

Page 22: Laporan Struktur Organisasi

Login.php

Untuk verifikasi saat user melakukan login :

<?php

if(isset($_POST['login'])){

$id = $_POST['username'];

$password = $_POST['password'];

$sql = "select * from tuser where id = '$id'";

$hasil = mysql_query($sql);

$fetch = mysql_fetch_array($hasil);

if(password_verify($password, $fetch['password'])){

$_SESSION['user_id'] = $fetch['id'];

echo '<script language="javascript">';

echo 'swal({title: "Hello !", text: "Welcome Back '.$fetch['nama'].'", type: "success"}, function(){window.location.href="index.php"});';

echo '</script>';

}else{

echo '<script>';

echo 'sweetAlert("Error...", "Wrong ID or Password!", "error");';

echo '</script>';

}

}

?>

Page 23: Laporan Struktur Organisasi

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 table-bordered 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{?>

Page 24: Laporan Struktur Organisasi

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

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['tptl'].'</td>

<td>'.$user['tgll'].'</td>

<td>'.$user['alamat'].'</td>

<td>'.$user['kontak'].'</td>

<td>'.$user['email'].'</td>

<td>'.$option['jurusan'].'</td>

Page 25: Laporan Struktur Organisasi

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

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['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="editProfil.php?" class="btn btn-success btn-sm"><i class="fa fa-edit"></i> Edit Profil</button></td>

<td align="center"><button disabled="disabled" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> Unable to Delete</button></td>

</tr>';

}

}else{

Page 26: Laporan Struktur Organisasi

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

Page 27: Laporan Struktur Organisasi

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

Page 28: Laporan Struktur Organisasi

move_uploaded_file($sumber, $tujuan);

}

$sql = "insert into tuser values ('$id', '$nama', '$gender', '$tpt', '$tgl', '$add', '$phone', '$email', '$dept', '$tujuan', '$password', '$type');";

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

$query = "select * from tuser where id = $id";

$data = mysql_fetch_array(mysql_query($query));

if($_POST['chpas']=="yes"){

$password = $_POST['password'];

}else{

$password = $data['password'];

}

if($_POST['chpp']=="yes"){

$fotoN = $_FILES['foto']['name'];

Page 29: Laporan Struktur Organisasi

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

}

$sql = "update tuser set nama='$nama', jk='$gender', tptl='$tpt', tgll='$tgl', alamat='$add', kontak='$phone', email='$email', tipe='$type', password='$password', foto='$tujuan' where id='$id'";

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

}

Page 30: Laporan Struktur Organisasi

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.onload = function (e) {

$('#photo')

.attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

}

};

</script>

Untuk melakukan aksi update foto ke database :

if(isset($_POST['pp'])){

$id = $_GET['id'];

$sql = "select * from tuser where id = '$id'";

$baris = mysql_fetch_array(mysql_query($sql));

$fotoN = $_FILES['foto']['name'];

$fotoS = $_FILES['foto']['size'];

$fotoT = $_FILES['foto']['tmp_name'];

$sumber = $fotoT;

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

}

Page 31: Laporan Struktur Organisasi

$sql = "update tuser set foto='$tujuan' where id='$id'";

if(mysql_query($sql)){

echo '<script language="javascript">';

echo 'swal({title: "Success!", text: "Foto Profil Berhasil Diganti!", type: "success"}, function(){window.location.href="index.php"});';

echo '</script>';

}

}

editProf.php

Untuk editProf.php hampir sama dengan reg2.php hanya pada bagian edit saja dan beberapa form hanya readonly dan tidak dimunculkan.

Page 32: Laporan Struktur Organisasi

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

}

}

Page 33: Laporan Struktur Organisasi

Untuk validasi password pada form dengan notifikasi dari sweetAlert :

<script>

function validation(form){

if(form.old.value.length < 6){

sweetAlert("Error...", "Password Harus 6 Karakter Atau Lebih!", "error");

form.old.focus();

return(false);

}else if(form.new.value.length < 6){

sweetAlert("Error...", "Password Harus 6 Karakter Atau Lebih!", "error");

form.new.focus();

return(false);

}else if(form.new.value != form.renew.value){

sweetAlert("Error...", "Password Tidak Cocok!", "error");

form.renew.focus();

return(false);

}

return(true);

}

</script>

Page 34: Laporan Struktur Organisasi

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

}

Page 35: Laporan Struktur Organisasi

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

}

?>

Page 36: Laporan Struktur Organisasi

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

}

$sql = "insert into trelation values ('$id', '$parid', '$desk', '$tipe');";

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;

Page 37: Laporan Struktur Organisasi

}else{

$parid = $_POST['idparent'];

$tipe = $_POST['pos'];

}

$sql = "update trelation set idparent='$parid', deskjob='$desk', tipe='$tipe' where id=$id";

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

}

?>

Page 38: Laporan Struktur Organisasi

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

Page 39: Laporan Struktur Organisasi

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

}else if($jd['tipe'] == 1){

echo '<td>Reguler</td>';

}else if($jd['tipe'] == 2){

echo '<td>Adviser Right</td>';

}else if($jd['tipe'] == 3){

echo '<td>Adviser Left</td>';

}else if($jd['tipe'] == 4){

echo '<td>Assistant Right</td>';

}else if($jd['tipe'] == 5){

echo '<td>Assistant Left</td>';

}else{

echo '<td>-</td>';

}

echo ' <td align="center"><a href="jd.php?id='.$jd['id'].'" class="btn btn-success btn-sm"><i class="fa fa-edit"></i> Edit Job Desk</button></td>';

if(mysql_num_rows(mysql_query("select * from trelation where idparent='".$jd['id']."' AND NOT tipe=0"))>0){

Page 40: Laporan Struktur Organisasi

echo'<td align="center"><button class="btn btn-danger btn-sm" disabled><i class="fa fa-trash-o"></i> Unable Delete Job Desk</button></td>';

}else{

echo'<td align="center"><a href="deletejob.php?id='.$jd['id'].'" name="delete" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete Job Desk</a></td>';

}

echo '</tr>';

}else{

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>

<td>'.$jd['tipe'].'</td>';

if($jd['tipe'] == 0){

echo '<td>Root</td>';

}else if($jd['tipe'] == 1){

echo '<td>Reguler</td>';

}else if($jd['tipe'] == 2){

echo '<td>Adviser Right</td>';

}else if($jd['tipe'] == 3){

echo '<td>Adviser Left</td>';

}else if($jd['tipe'] == 4){

Page 41: Laporan Struktur Organisasi

echo '<td>Assistant Right</td>';

}else if($jd['tipe'] == 5){

echo '<td>Assistant Left</td>';

}else{

echo '<td>-</td>';

}

echo ' </tr>';

}

}

?>

</tbody>

</table>

</div>

</div>

</div>

<!--End Advanced Tables -->

Page 42: Laporan Struktur Organisasi

deletejob.php & deljob.php

Form untuk menampilkan konfirmasi hapus deskjob pegawai, dengan mekanisme yang sama seperti delete.php, dan del.php

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']?>",

Page 43: Laporan Struktur Organisasi

image: "<?php echo $user['foto']; ?>",<?php if($parent['tipe'] == 2){

echo 'ItemType: primitives.orgdiagram.ItemType.Adviser, adviserPlacementType:primitives.common.AdviserPlacementType.Right';

}else if($parent['tipe'] == 3){

echo 'ItemType: primitives.orgdiagram.ItemType.Adviser, adviserPlacementType:primitives.common.AdviserPlacementType.Left';

}else if($parent['tipe'] == 4){

echo 'ItemType: primitives.orgdiagram.ItemType.Assistant, adviserPlacementType:primitives.common.AdviserPlacementType.Right';

}else if($parent['tipe'] == 5){

echo 'ItemType: primitives.orgdiagram.ItemType.Assistant, adviserPlacementType:primitives.common.AdviserPlacementType.Left';

}else{

echo null;

}

if(++$counter == $numResults){echo '})';}else{ echo '}),';} ?>

<?php }?>

];

var buttons = [];

buttons.push(new primitives.orgdiagram.ButtonConfig("properties", "ui-icon-gear", "Info"));

Page 44: Laporan Struktur Organisasi

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>

Page 45: Laporan Struktur Organisasi

5. Manual Program a. ID : 3001 (ADMIN) SISANYA DAPAT MELIHAT ID DI TABEL USER b. SELURUH PASSWORD : 123456

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 :

a. Dapat melakukan semua yang regular user dapat lakukan b. Pada lihat pegawai ada tambahan tombol edit dan hapus c. Dapat menambah pegawai dengan validasi form yang sama dengan form edit

profil namun field akan terisi kosong, dan semua dapat diisi serta memiliki beberapa field tambahan

d. Dapat mengedit data pegawai dengan validasi form yang sama dengan form edit profil, dengan field tambahan ingin mengganti password, dan profile picture atau tidak.

e. Dapat menghapus pegawai kecuali id dia sendiri, dengan meminta konfirmasi terlebih dahulu. Jika data pegawai yang memilii data deskjob dihapus maka data deskjob ikut terhapus

f. Dapat menambah user deskjob dengan formvalidasi jika kosong, maka disuruh memasukkan, dan pilihan ada parent atau tidak.

g. Dapat melihat seluruh data deskjob h. Dapat mengedit data deskjob i. Dapat menghapus data deskjob yang berada pada posisi child saja

Page 46: Laporan Struktur Organisasi

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 : [email protected]

Hendrich Pangestu : [email protected]