BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN

(1)

29

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisa Kebutuhan Software A. Tahap Analisis

Sistem pengajuan cuti di Bank BTN Syariah Cabang Harmoni akan menganalisis setiap proses bisnis yang berjalan sehari-hari pada Bank BTN Syariah Cabang Harmoni lalu dikembangakan kedalam sistem. Dalam sistem pengajuan cuti ini penulis membagi batasan halaman akses, berikut ini rincian akses halaman yang ada pada sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni.

Halaman Karyawan Umum:

A1. Karyawan dapat login kesistem pengajuan cuti.

A2. Karyawan dapat mengajukan pengajuan cuti secara online.

A2. Karyawan dapat mengirim email form pengajuan cuti yang sudah di approval.

A3. Karyawan dapat mengolah data pribadi.

Halaman Supervisor :

B1

.

Supervisor dapat login kesistem pengajuan cuti.

B2

.

Supervisor dapat melihat data pengajuan cuti.

B3. Supervisor dapat mengirim email form pengajuan cuti.

B4. Supervisor dapat melihat data karyawan.

B5. Supervisor dapat memberi approval atau reject pengajuan cuti karyawan.

(2)

Halaman Administrator :

C1

.

Administrator dapat login kesistem pengajuan cuti.

C2

.

Administrator dapat mengolah data jabatan.

C3. Administrator dapat mengolah data karyawan.

C4. Administrator dapat mengolah data cuti.

C5. Administrator dapat mengolah data pengguna sistem.

C6. Administrator dapat mengolah data pengajuan cuti supervisor.

C7. Administrator dapat mengirim email form cuti yang sudah diapproval

Dalam artian level Administrator ini bisa dipegang oleh Branch Manager yang mempunyai tanggung jawab penuh dalam memegang kantor utama Bank BTN kantor cabang Harmoni Jakarta.

B. Use Case Diagram.

Use Case diagram berikut akan menggambarkan proses bisnis yang terjadi pada setiap halaman pengguna sistem. Berikut adalah rancangan Use Case diagram pada rancangan sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni.

Penggambaran Use Case Diagram Model Pertama :

Penggambaran dengan melihat secara keseluruhan fungsi-fungsi yang ada pada sistem yang berjalan berdasarkan hak akses level pengguna sisstem, berikut rancangan use case sistem pengajuan cuti.

(3)

1. Use Case Diagram Halaman Karyawan

uc Use Case Hal. Karyawan

Karyawan

Login

Pengajuan Cuti

Kirim Email

Mengolah Data pribadi

«extend»

Gambar IV.1.

Use Case Diagram Halaman Karyawan a. Deskripsi Use Case karyawan pegajuan cuti.

Tabel IV.1

Deskripsi Use Case Karyawan pengajuan cuti.

Use Case Name Karyawan dapat mengajuakan pengajuan cuti secara online.

Requirements A1

Goal Berhasil mengajukan cuti secara online Pre-Conditions Karyawan memilih menu pengajuan cuti

Post-Conditions Sistem berhasil menampilkan form pengajuan cuti Failed end condition Gagal mengirim pengajuan cuti online

(4)

Primary Actors Karyawan

Main Flow / Basic patch 1. Karyawan login kesistem pengajuan cuti.

2. Karyawan memilih menu pengajuan cuti 3. Sistem menampilkan form pengajuan cuti.

4. Sistem berhasil mengirim pengajuan cuti.

b. Deskripsi Use Case Karyawan Kirim email Tabel IV.2

Deskripsi Use Case karyawan Kirim Email

Use Case Name Karyawan dapat mengirim email form pengajuan cuti yang sudah di approval.

Requirements A2

Goal Karyawan berhasil mengirim email pengajuan cuti.

Pre-Conditions Karyawan memilih menu email Post-Conditions Sistem menampilkan form email Failed end condition Sistem gagal mengirim email Primary Actors Karyawan

2. Karyawan memilih menu email.

3. Sistem menampilkan form email.

4. Email berhasil terkirim.

c. Deskripsi Use Case Karyawan Mengolah Data Pribadi Tabel IV.3

Deskripsi Use Case Karyawan Mengolah Data Pribadi Use Case Name Karyawan dapat mengolah data pribadi.

Requirements A3

Goal Karyawan berhasil mengolah data pribadi miliknya.

Pre-Conditions Karyawan memilih menu Account

Post-Conditions Sistem menampilkan detail account milik karyawan.

Failed end condition Sistem gagal mengupdate profil account karyawan.

(5)

Primary Actors Karyawan

2. Karyawan memilih button account.

3. Sistem menampilkan detail account milik karyawan.

4. Karyawan memilih tombol edit.

5. Sistem berhasil mengupdate data account karyawan.

2. Use Case Diagaram Halaman Supervisor

uc Use Case Hal. Supervisor

Supervisor

Login

Permohonan cuti

Kirim email

Mengolah Data Karyawan

Approval

Reject

«extend»

Gambar IV.2.

Use Case Diagram Halaman Supervisor d. Deskripsi Use Case Supervisor Mengolah Data Pengajuan Cuti

Tabel IV.4.

Deskripsi Use Case Supervisor Mengolah Data Pengajuan Cuti

Use Case Name Supervisor dapat melihat data pengajuan cuti.

Requirements B1

Goal Supervisor berhasil mengupdate data pengajuan

(6)

cuti

Pre-condition Supervisor memilih menu pengajuan cuti.

Post-condition Sistem menampilkan data pengajuan cuti Failed end condition Gagal mengupdate data pengajuan cuti Primary Actors Supervisor

Main Flow / Basic Path a. Supervisor login ke halaman sistem pengajuan cuti

b. Supervisor memilih menu pengajuan cuti.

c. Sistem menapilkan data pengajuan cuti d. Supervisor mengupdate data pengajuan cuti e. Sistem berhasil mengupdate pengajuan cuti.

Invariant B4 a. Supervisor melihat data pengajuan cuti.

b. Supervisor memberikan apporval atau reject pengajuan cuti karyawan.

e. Deskripsi Use Case Diagram Mengirim Email Tabel IV.5.

Deskripsi Use Case Diagram Mengirim Email

Use Case Name Supervisor dapat mengirim email form pengajuan cuti.

Requirements B2

Goal Supervisor berhasil mengirim email pengajuan cuti.

Pre-Conditions Supervisor memilih menu email Post-Conditions Sistem menampilkan form email Failed end condition Sistem gagal mengirim email Primary Actors Supervisor

Main Flow / Basic patch 5. Supervisor login kesistem pengajuan cuti.

6. Supervisor memilih menu email.

(7)

f. Deskripsi Use Case Diagram Supervisor Data Karyawan Tabel IV.6.

Deskripsi Use Case Diagram Supervisor Data Karyawan

Use Case Name Supervisor dapat melihat data karyawan

Requirements B3

Goal Sistem berhasil menampilkan data karyawan Pre-condition Supervisor memilih menu data karyawan Post-condition Sistem menampilkan data karyawan Failed end condition Sistem gagal menampilkan data karyawan Primary Actors Supervisor

Main Flow / Basic Path 1. Supervisor berhasil login kesistem pengajuan cuti 2. Supervisor memilih menu data karyawan.

3. Sistem menampilkan data karyawan.

(8)

3. Use Case Diagaram Halaman Administrator

uc Use Cae hal. Administrator

Administrator

Login

Mengolah Data jabatan

Mengolah Data karyawan

Mengolah Data Cuti

Mengolah Data Pengguna

Sistem Mengolah Data

Permohonan Cuti Kirim email

Form Cuti ACC

«extend»

Gambar IV.3.

Use Case Diagram Halaman Administrator

g. Deskripsi Use Case Diagram Administrator Mengolah Data Jabatan Tabel IV.7.

Deskripsi Use Case Diagram Administrator Mengolah Data Jabatan Use Case Name Administrator dapat mengolah data jabatan

Requirements C1

Goal Administrator berhasil mengolah data jabatan.

Pre-Conditions Administrator memilih menu data jabatan.

Post-Conditions Sistem menampilkan data jabatan Failed end condition Sistem gagal mengolah data jabatan Primary Actors Administrator

Main Flow / Basic patch 1. Administrator berhasil login kesistem pengajuan cuti

2. Administrator memilih menu data jabatan.

(9)

3. Sistem menampilka data jabatan.

4. Administrator berhasil menambah, mengupdate atau mendelete data jabatan.

h. Deskripsi Use Case Diagram Administrator Mengolah Data Karyawan Tabel IV.8.

Deskripsi Use Case Diagram Administrator Mengolah Data Karyawan Use Case Name Administrator dapat mengolah data karyawan.

Requirements C2

Goal Adminstrator Berhasil mengolah data karyawan.

Pre-Conditions Administrator memilih menu data karyawan Post-Conditions Sistem menampilkan data karyawan

Failed end condition Administrator gagal mengolah data karyawan karyawan

Primary Actors Administrator

Main Flow / Basic patch 1. Administrator berhasil login kesistem pengajuan cuti.

2. Administrator memilih menu karyawan.

3. Sistem menampilkan data karyawan.

4. Administrator berhasil menambah, mengupdate dan menghapus data karyawan.

i. Deskripsi Use Case Diagram Administrator Mengolah Data Cuti Tabel IV.9.

Deskripsi Use Case Diagram Administrator Mengolah Data Cuti Use Case Name Administrator dapat mengolah data cuti

Requirements C3

Goal Administrator berhasil mengolah data cuti Pre-Conditions Administrator memilih menu cuti

Post-Conditions Sistem menampilkan data cuti Failed end condition Sistem gagal menampilkan data cuti Primary Actors Administrator

Main Flow / Basic patch 1. Administrator berhasil login kesistem pengajuan cuti.

2. Administrator memilih menu data cuti 3. Sistem menampilkan data cuti.

4. Administrator berhasi menambah, menupdate dan menghapus data cuti.

(10)

j. Deskripsi Use Case Diagram Administrator Mengolah Data Pengguna Sistem Tabel IV.10.

Deskripsi Use Case Diagram Administrator Mengolah Data Pengguna Sistem Use Case Name Administrator dapat mengolah data pengguna

sistem.

Requirements C4

Goal Administrator berhasil mengolah data pengguna sistem

Pre-Conditions Administrator memilih menu pengguna sistem Post-Conditions Sistem menampilkan data pengguna sistem Failed end condition Sistem gagal menampilkan data pengguna sistem Primary Actors Administrator

Main Flow / Basic patch 5. Administrator berhasil login kesistem pengajuan pengguna sistem.

6. Administrator memilih menu data pengguna sistem

7. Sistem menampilkan data pengguna sistem.

8. Administrator berhasi menambah, menupdate dan menghapus data pengguna sistem.

k. Deskripsi Use Case Diagram Administrator Mengolah Pengajuan cuti Tabel IV.11.

Deskripsi Use Case Diagram Administrator Mengolah Data Pengajuan cuti Use Case Name Administrator dapat mengolah data

pengajuan cuti supervisor.

Requirements C5

Goal Administrator berhasil mengupdate data pengajuan cuti

Pre-condition Administrator memilih menu pengajuan cuti.

Post-condition Sistem menampilkan data pengajuan cuti Failed end condition Gagal mengupdate data pengajuan cuti Primary Actors Administrator

Main Flow / Basic Path 1. Administrator login ke halaman sistem

(11)

pengajuan cuti

2. Administrator memilih menu pengajuan cuti.

3. Sistem menapilkan data pengajuan cuti 4. Administrator mengupdate data pengajuan

cuti

5. Sistem berhasil mengupdate pengajuan cuti.

Invariant B4 1 Administrator melihat data pengajuan cuti.

2 Administrator memberikan apporval atau reject pengajuan cuti karyawan.

l. Deskripsi Use Case Diagram Mengirim Email Tabel IV.12.

Deskripsi Use Case Diagram Mengirim Email

Use Case Name Administrator dapat mengirim email form pengajuan cuti.

Requirements C6

Goal Administrator berhasil mengirim email pengajuan cuti.

Pre-Conditions Administrator memilih menu email Post-Conditions Sistem menampilkan form email Failed end condition Sistem gagal mengirim email Primary Actors Administrator

Main Flow / Basic patch 1. Administrator login kesistem pengajuan cuti.

2. Administrator memilih menu email.

C. Activity Diagram

Activity diagram menggambarkan dari proses bisnis dari sistem pengajuan cuti Bank BTN Syariah Cabang Harmoni. Berikut merupkan gambaran dari Diagaram Activity Bank BTN Syariah Cabang Harmoni dengan menggunakan Partisi Actor.

(12)

1. Activity Diagram Pengajuan Cuti

act Pengajuan Cuti

Sistem Pengajuan Cuti Karyaw an

Start

Login

Menu Pengajuan Cuti

Form Pengajuan Cuti Input pengajuan cuti

Pengajuan cuti tersimpan

End Login Sukses Login gagal

sukses Gagal tersimpan

Gambar IV.4.

Activity Diagram Pengajuan Cuti

(13)

2. Activity Diagram Approval Pengajuan cuti

act Approval Pengajuan Cuti

Sistem Pengajuan Cuti Supervisor

Start

Login

Menu Pengajuan Cuti

Data Pengajuan Cuti Karyaw an Approval pengajuan

cuti

Pengajuan cuti di ACC

End Gagal login

Gambar IV.5.

Activity Diagram Approval Pengajuan Cuti

(14)

3. Activity Diagram Kirim Email

act Kirim Email

Sistem Pengajuan Cuti Karyawan

Start

Login

Menu Email Input data email

Form Email

Email terkirim

End Gagal login

Sukses Login

Gambar IV.6.

Activity Diagram Kirim Email

(15)

4. Activity Diagram Mengolah Profil Account

act Mengolah Profil Acount

Sistem Pengajuan Cuti Karyawan

Start

Login

Acount Karyawan

Update data Account

Detail Acount

Acount behasil diupdate

End Sukses login Gagal Login

Gambar IV.7.

Activity Diagram Mengolah Profil Account

(16)

5. Activity Diagram Mengolah Data Karyawan

act Mengolah Data Karyawan

Sistem Pengajuan Cuti Administrator

Start

Login

Menu Data Karyawan

Kelola data karyawan

Data karyawan berhasil dikelola (tambah, update

dan delete)

End Gagal Login

Login Sukses

Gambar IV.8.

Activity Diagram Mengolah Data Karyawan

(17)

6. Activity Diagram Mengolah Data Jabatan

Start

Login

Menu Data Jabatan

Kelola data jabatan

Data jabatanberhasil dikelola (tambah, update dan delete)

End Gagal Login

Login Sukses

Gambar IV.9.

Activity Diagram Mengolah data Jabatan

(18)

7. Activity Diagram Mengolah Data Cuti

Start

Login

Menu Data Cuti

Kelola data cuti

Data cuti berhasil dikelola (tambah, update dan delete)

End Gagal Login

Login Sukses

Gambar IV.10.

Activity Diagram Mengolah Data Cuti

(19)

8. Activity Diagram Mengolah Pengguna Sistem

Start

Login

Menu Data Pengguna Sistem

Kelola data pengguna sistem

Data pengguna sistem berhasil dikelola (tambah, update dan delete)

End Gagal Login

Login Sukses

Gambar IV.11.

Activity Diagram Mengolah Data Pengguna Sistem

(20)

4.2. Desain System

Dalam membuat sebuah sistem pengajuan cuti pada Bank BTN Syariah Kantor Cabang Harmoni, dibutuhkan tahapan desain data yang akan menggambarkan design database, desain software architecthure dan disain interface dari sistem yang akan di buat.

4.2.1. Database

Di dalam database terdapat beberapa tabel yang saling berelasi (berhubungan) maka dari itu penulis mencoba menggambarkanya menggunakan ERD. Diagram hubungan entitas merupakan diagram yang berfungsi untuk menggambarkan hubungan antara entitas dalam suatu sistem, dimana diagram menjelaskan hubungan antara entitas yang ada melalui atribut yang dimiliki oleh entitas tersebut. Penggambaran database pada sistem pengajuan cuti di Bank BTN Syariah Cabang Harmoni menggunakan Entity Relationship Diagram adalah sebagai berikut:

(21)

1. Entity Relationship Diagram (ERD)

Btn_karyawan

Btn_pengajuan _cuti

btn_jabatan btn_user

btn_cuti memiliki mengajuka

n

memiliki

memiliki 1

1

M 1

1 Id_cuti

Password Username

Id_Usergrou p_User nip

jabatan Id_jabatn Tgl_masuk

alamat telp email

jk Nama

nip Id_Jabatan

alasan Sampai_tgl Dari_tgl

Jatah_cuti nip

nip

Ket_tolak Edited_by Edited_dat

e Created_da

te

Foto Edited_by Created_da

te

Aktif_siste m

Edited_dat e

Approval_a dm Approval_s

pv status Created_by

Id_pengaju an

Gambar IV.12.

Entity Relationship Diagram Pengajuan cuti Bank BTN Syariah Kantor Cabang Harmoni

(22)

2. Logical Record Structure (LRS)

btn_cuti id_cuti*

nip jatah_cuti

btn_pengajuan_cuti id_pengajuan*

nip**

dari_tgl sampai_tgl alasan created_date edited_date edited_by

btn_user nip

Id_Usergroup_User**

Username Password Foto

btn_jabatan id_jabatan*

jabatan btn_karyawan

nip*

id_jabatan**

nama jk email telp alamat tgl_masuk created_date aktif_sistem edited_by edited_date created_by

nip

Id_jabatan nip

Gambar IV.13.

Logical record Structure Pengajuan Cuti Bank BTN Syariah Kantor Cabang Harmoni

3. Spesifikasi File a. Spesifikasi File Cuti

Nama Database : cutibtn.db Nama file : cuti

Akronim : btn_cuti.myd

Fungsi : Untuk mengola data cuti Tipe File : File master

(23)

Organisasi File :Index seequential

Akses File : Random

Media : Harddisk

Panjang Record : 19 Byte Kunci Field : id_cuti

Software : PhpMyadmin

Tabel IV.8 Spesifikasi File Cuti

No Elemen data Nama Field Tipe Size Keterangan

1 Id cuti id_cuti int

5 Primary Key dan Auto_increment

2 nip nip varchar

11 Foreign key

3 Jatah cuti jatah_cuti int 3

b. Spesifikasi File Jabatan Nama Database : cutibtn.db Nama file : jabatan

Akronim : btn_jabatan.myd

Fungsi : Untuk menyipan data jabatan Tipe File : File master

Organisasi File :Index sequential

Akses File : Random

Media : Harddisk

Panjang Record : 22 Byte

(24)

Kunci Field : id_jabatan

Software : PhpMyadmin

Tabel IV.9 Spesifikasi File Jabatan

1 Id jabatan id_jabatan int 2 Primary Key dan

Auto_increment

2 jabatan jabatan Varchar 20

c. Spesifikasi File Karyawan Nama Database : cutibtn.db Nama file : karyawan

Akronim : btn_karyawan.myd

Fungsi : Untuk menyimpan data karyawan

Tipe File : File Master Organisasi File :Index sequential

Akses File : Random

Media : Harddisk

Panjang Record : 130 byte Kunci Field : nip

(25)

Tabel IV.10

Spesifikasi File Karyawan

1 Nip nip varchar 11 Primary Key

2 Nama nama varchar 40

3 Jenis kelamin jk int 1

4 Email email varchar 40

5 Telepon telp varchar 14

6 Tanggal lahir tgl_lahir date

7 Alamat alamat text

8 Tanggal masuk tgl_masuk date

9 Regis regis int 1

10 Tanggal buat created_date date

11 Dibuat oleh created_byt int 11

12 Diedit oleh edited_by int 11

13 Tanggal diedit edited_date date

14 Aktif sistem aktif_sistem int 1

15 Id jabatan id_jabatan int 1 Foreign key

d. Spesifikasi File Pengajuan Cuti Nama Database : cutibtn.db Nama file : pengajuan cuti

Akronim : btn_pengajuan_cuti.myd

Fungsi : Untuk menyimpan data pengajuan cuti Tipe File : file Transaksi

(26)

Organisasi File :index sequential

Akses File : Random

Media : Harddisk

Panjang Record : 36 Byte Kunci Field : id_pengajuan

Tabel IV.11

Spesifikasi File Pengajuan Cuti

1 Id pengajuan id_pengajuan Int

11 Primary key dan Auto_increment

2 Nip nip varchar 11 Foreign key

3 Dari tanggal dari_tgl date

4 Sampai tanggal sampai_tgl date

5 Alasan alasan text

6 Tanggal buat created_date datetime

7 Diedit oleh edited_by varchar 11

8 Tanggal diedit edited_date datetime

9 Status status int 1

10 Diapproval

supervisor approval_spv int

1

11 Diapproval

administrator approval_adm int

1

12 Keterangan tolak ket_tolak text

e. Spesifikasi File User

Nama Database : cutibtn.db

(27)

Nama file : user

Akronim : btn_user.myd

Fungsi : Untuk menyimpan data user login Tipe File : file Master

Organisasi File :index sequential

Akses File : Random

Media : Harddisk

Panjang Record : 172 Byte Kunci Field :

Tabel IV.12 Spesifikasi File User

f. Spesifikasi File User Group

Nama Database : cutibtn.db Nama file : usergroup

Akronim : usergroup cuti.myd

Fungsi : Untuk menyimpan data user berdasarkan group atau level

1 nip nip Varchar 11

2 Id user group Id_Usergroup_User int 11

3 Username Username Varchar 50

4 Password Password Varchar 50

5 foto Foto Varchar 50

(28)

Tipe File :File Master Organisasi File : index sequential

Akses File : Random

Media : Harddisk

Panjang Record : 61 byte Kunci Field : id_usergroup

Tabel IV.13

Spesifikasi File user group

1 Id user group Id_Usergroup int 11 Primary Key

2 Nama

usergroup Nama_Usergroup varchar 50

4.2.2. Software Architecture

Didalam merancang sebuah sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni, Bahasa program yang digunakan penulis adalah PHP secara terstruktur atau prosedural. Maka Software Architecture yang digunakan untuk menggabarkan program adalah sebagai berikut :

A. Component Diagram

Component diagaram menggambarkan struktur dan hubungan antar komponen piranti lunak, termasuk ketergantungan diantaranya yang ada di dalam sistem informasi pengajuan cuti pada Bank BTN Syariah Cabang Harmoni.

(29)

Component Diagram juga dapat berupa interface yang berupa kumpulan layanan yang disediakan oleh komponen untuk komponen lainnya

cmp Component Diagram

User aplication

Aplication Database

Jquery.j s

Style.css

Apache 2 serv er

MySql Database

Admin Aplication

Gambar IV.12.

Component Diagram Sistem Pengajuan cuti

B. Deployment Diagram

Menggambarkan tata letak sistem secara fisik, yang menampakan bagian- bagian software yang berjalan pada hardware yang digunakan untuk mengimplementasi sebuah sistem dan keterhubungan antar hardware-hardware tersebut.

(30)

deployment depelopmnet

w eb serv er

user sistem

j Query.j s style.css

xampp database serv er

aplikasi database

MySql Database

client PC

w eb brow ser port: 80

port : 3306

Gambar IV.13.

Deployment Diagram Sistem Pengajuan cuti

4.2.3. User Interface

Merupakan gambaran sistem yang sudah berjalan. Berikut detail tampilan- tampilan tiap halaman sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni:

(31)

1. Tampilan Halaman Login Sistem

Gambar IV. 14.

Tampilan Halaman Login Sistem

2. Tampilan Halaman Beranda Sistem

Gambar IV. 15.

Tampilan Halaman Beranda Sistem

(32)

3. Tampilan Halaman Data Karyawan

Gambar IV. 16.

Tampilan Menu Halaman Data Karyawan

4. Tampilan Halaman Tambah Data Karyawan

Gambar IV. 17.

Tampilan Halaman Tambah Data Karyawan

(33)

5. Tampilan Halaman Data Jabatan

Gambar IV. 18.

Tampilan Halaman Data Jabatan

6. Tampilan Halaman Data Cuti

Gambar IV. 19

Tampilan Halaman Data Cuti

(34)

7. Tampilan Halaman Pengajuan Cuti

Gambar IV. 20

Tampilan Halaman Pengajuan Cuti

8. Tampilan Halaman Kirim Mail

Gambar IV. 21

Tampilan Halaman Kirim Mail

(35)

4.3. Code Generation

Berikut merupakan kode generation dari sistem informasi sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni dengan pemograman terstruktur:

A. Form Pengajuan Cuti

<?php

session_start();

include "../koneksi.php";

include "../library.php";

include "auth_user.php";

?>

<!DOCTYPE html>

<html>

<head>

<?php

include "bundle_css.php";

?>

</head>

<?php

include 'content_header.php';

?>

<p></p>

</div>

</div>

<?php include("menu3.php");?>

</section>

</aside>

(36)

<h1>

Pengajuan Cuti

</h1>

<li><i class="fa fa-calendar"></i> Data Pengajuan Cuti</li>

</ol>

</section>

</div>

<a href="#"><button class="btn btn-success" type="button" data-

target="#ModalAdd" data-toggle="modal"><i class="fa fa-plus"></i> Add Pengajuan Cuti</button></a>

<?php

include "dt_pengajuan_cuti.php";

?>

</table>

</div>

</div>

</div>

</div>

</section>

<h4 class="modal-title">Form Pengajuan Cuti</h4>

</div>

<form action="pengajuan_cuti_add.php" name="modal_popup"

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

</div>

(37)

<input name="nip" type="text" class="form-control" placeholder="Nomor Induk Pegawai" value="<?= $_SESSION['nip'];?>" maxlength="7" readonly/>

</div>

</div>

<input name="nama" type="text" class="form-control" placeholder="Nama Pengajuan Cuti" value="<?= $_SESSION['Nama'];?>"readonly/>

</div>

<label>Dari Tanggal</label>

</div>

<input id="tgl_awal" name="tgl_awal" type="text" class="form-control"

placeholder="Tanggal mulai cuti">

</div>

<label>Sampai Tanggal</label>

</div>

<input id="tgl_akhir" name="tgl_akhir" type="text" class="form-control"

placeholder="Sampai Tanggal">

</div>

<label>Keterangan Cuti</label>

</div>

<textarea name="keterangan" type="text" class="form-control" cols="5"

placeholder="Ketergan pengambilan cuti"></textarea>

</div>

Add

</button>

(38)

Cancel

</button>

</div>

</form>

</div>

<div id="ModalEditPengajuanCuti" class="modal fade" tabindex="-1"

role="dialog"></div>

<h4 class="modal-title" style="text-align:center;">Are you sure to delete this information ?</h4>

</div>

<a href="#" class="btn btn-danger" id="delete_link">Delete</a>

<button type="button" class="btn btn-success" data- dismiss="modal">Cancel</button>

</div>

</div>

<?php

include "content_footer.php";

?>

</div>

<?php

include "bundle_script.php";

?>

</body>

</html>

(39)

B. Form Approval Cuti Supervisor

<?php

session_start();

?>

<!DOCTYPE html>

<html>

<head>

<?php

?>

</head>

<?php

?>

<p></p>

</div>

</section>

</aside>

<h1>

Pengajuan Cuti

</h1>

<li><i class="fa fa-calendar"></i> Data Pengajuan Cuti</li>

</ol>

</section>

(40)

target="#ModalAdd" data-toggle="modal"><i class="fa fa-plus"></i> Add Pengajuan Cuti</button></a>

<?php

include "dt_pengajuan_cuti.php";

?>

</table>

</div>

</div>

</div>

<h4 class="modal-title">Form Pengajuan Cuti</h4>

</div>

<form action="pengajuan_cuti_add.php" name="modal_popup"

</div>

<input name="nip" type="text" class="form-control" placeholder="Nomor Induk Pegawai" value="<?= $_SESSION['nip'];?>" maxlength="7" readonly/>

</div>

(41)

</div>

<input name="nama" type="text" class="form-control" placeholder="Nama Pengajuan Cuti" value="<?= $_SESSION['Nama'];?>"readonly/>

</div>

<label>Dari Tanggal</label>

</div>

<input id="tgl_awal" name="tgl_awal" type="text" class="form-control"

placeholder="Tanggal mulai cuti">

</div>

<label>Sampai Tanggal</label>

</div>

<input id="tgl_akhir" name="tgl_akhir" type="text" class="form-control"

placeholder="Sampai Tanggal">

</div>

<label>Keterangan Cuti</label>

</div>

<textarea name="keterangan" type="text" class="form-control" cols="5"

placeholder="Ketergan pengambilan cuti"></textarea>

</div>

Add

</button>

Cancel

</button>

</div>

</form>

</div>

(42)

</div>

<div id="ModalEditPengajuanCuti" class="modal fade" tabindex="-1"

<div id="ModalViewSisaCuti" class="modal fade" tabindex="-1"

</div>

</div>

<?php

?>

<?php

?>

</body>

</html>

C. Tambah Data Karyawan

<?php

session_start();

?>

<!DOCTYPE html>

<html>

<head>

(43)

<?php

?>

</head>

<?php

?>

<p></p>

</div>

</section>

</aside>

<h1>

Karyawan

</h1>

<li><i class="fa fa-user"></i> Data Karyawan</li>

</ol>

</section>

target="#ModalAdd" data-toggle="modal"><i class="fa fa-plus"></i> Add Karyawan</button></a>

(44)

<?php

include "dt_karyawan.php";

?>

</table>

</div>

</div>

</div>

<h4 class="modal-title">Tambah Karyawan</h4>

</div>

<form action="karyawan_add.php" name="modal_popup"

</div>

</div>

</div>

</div>

<label>Jabatan</label>

(45)

</div>

<?php

$dataSql = "SELECT * FROM btn_jabatan ORDER BY jabatan";

$dataQry = mysqli_query($konek, $dataSql) or die ("Gagal Query".mysql_error());

while ($dataRow = mysqli_fetch_array($dataQry)) { if ($dataRow['id_jabatan']== $dataJabatan) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$dataRow[id_jabatan]' $cek>$dataRow[jabatan]</option>";

}

?>

</select>

</div>

<label>Tanggal Lahir</label>

</div>

<input id="Tanggal_Lahir" name="tgl_lahir" type="text" class="form-control"

placeholder="Tanggal Lahir">

</div>

<label>Tanggal Masuk</label>

</div>

<input id="Tanggal_Masuk" name="tgl_masuk" type="text" class="form-control"

placeholder="Tanggal Masuk">

</div>

<label>Jenis Kelamin</label>

</div>

<option selected>Pilih Jenis Kelamin</option>

<option value="0">Perempuan</option>

</select>

</div>

(46)

<label>Email</label>

</div>

</div>

</div>

<input name="telp" type="number" class="form-control" placeholder="No Telpon"

required/>

</div>

<label>Alamat</label>

</div>

<textarea name="alamat" type="text" class="form-control" cols="4"

placeholder="Alamat"></textarea>

</div>

Add

</button>

Cancel

</button>

</div>

</form>

</div>

<div id="ModalEditKaryawan" class="modal fade" tabindex="-1"

(47)

<div id="ModalViewKaryawan" class="modal fade" tabindex="-1"

</div>

</div>

<?php

?>

<?php

?>

</body>

</html>

4.4 Testing

A. Form Login Sistem

Tabel IV.15

Hasil Pengujian Black Box Testing Form Login

No Skenario Pengujian

Text Case Hasil Yang Diharapkan

Hasil Penguji an

Kesimp ulan

(48)

1. Karyawanname atau password dikosongkan

Karyawanna me :

(kosong) Password : (kosong)

Sistem akan menolak dan menampilkan pesan ”Data karyawanname tidak boleh kosong !dan Data Password Tidak boleh Kosong !“

Sesuai Harapan

Valid

2. Karyawanname benar, password kosong

Karyawanna me :

Password : (kosong)

Sistem akan menolak pesan”

Data

Karyawanname Tidak boleh kosong !“

Sesuai Harapan

Valid

3. Karyawanname benar, password benar

Karyawanna me :

Customer Service Password : Customer Service

Sistem akan meneriman akses login dan menampilkan halaman beranda

Sesuai Harapan

Valid

B. Pengujian Terhadap Form Tambah Data Karyawan Tabel III.16.

Hasil Pengujian Black Box Testing Form Tambah Data Karyawan

No Skenario Pengujian Test case Hasil yang diharapkan Hasil pengujian

Kesimpulan

1.

Semua field tidak terisi kemudian klik simpan

Field:

(kosong)

Muncul peringatan

”lengkapi bidang ini “ Sesuai

harapan Valid

2 Semua field terisi kecuali field email klik simpan

Field: terisi email:

(kosong)

Muncul peringatan

harapan Valid

3 Semua field terisi tetapi field nomor HP diisi huruf klik

Field: terisi Nomor HP:

Field nomor hp tidak akan bisa di input.

Sesuai

harapan Valid

(49)

simpan (salah)

4

Semua field terisi dan dengan format yang benar klik simpan

Field: terisi Data tersimpan dan muncul pesan”data karyawan berhasil tersimpan”

Sesuai

harapan Valid

C. Pengujian Terhadap Form Tambah Daftar Jabatan Tabel III.17.

Hasil Pengujian Black Box Testing Form Tambah Daftar Jabatan

No Skenario Pengujian Test case Hasil yang diharapkan

Hasil pengujian

Kesimpulan

1. Semua field tidak terisi kemudian klik simpan data

Field:

(kosong)

Muncul peringatan

harapan Valid

2

Salah satu field belum terisi kemudian klik simpan data

alamat:

(kosong) Field lain:

terisi

Muncul peringatan

”lengkapi bidang ini “

Sesuai

harapan Valid

3

Semua field terisi dengan benar kemudian klik simpan data

Field: terisi (benar)

Tersimpan kedalam database dan muncul pesan”data jabatan berhasil di tambah”

Sesuai

harapan Valid

4.5. Support

Menjelaskan tentang publikasi Program dan spesifikasi hardware dan software yang akan digunakan untuk menjalankan sistem yang dibuat. Dalam pembuatan aplikasi sistem pengajuan cuti ini akan membantu Karyawan, supervisor dan Branch Manager dalam pengajuan cuti dan pemberian approval pengajuan cuti, untuk itu penulis menggunakan program PHP untuk membuat

(50)

aplikasi. Untuk mengoperasikan program tersebut diperlukan spesifikasi komputer yang sesuai standar dan untuk mendukung pembuatan aplikasi kebutuhan hardware yang diperlukan meliputi : processor, memory, hard disk, keyboard, mouse sedangkan untuk kebutuhan software yang diperlukan meliputi sistem operasi, software, program PHP dan software database MySql.

4.5.1. Publikasi Web

Pada pembuatan skripsi ini penulis membuat program berbasis web yang mana program harus benar-benar secara online bisa diakases diinternet. untuk itu penulis harus mempersiapkan segala sesuatu guna memenuhi syarat yang sudah ditentukan. Penulis sudah melakukan penyewaan domain dan hosting di penyedia hosting yaitu di PT. Idwebhost. Berikut rincian biaya yang digunakan penulis untuk melakukan penyewaan domain dan hosting secara online.

Tabel IV. 18.

Rincian Publikasi Web

Domain www.btnsyariah.net

Periode Pendaftaran 1 Tahun

Disk Space 350GB

Jumlah Rp 300.000,00

Lokasi Server Indonesia

Jumlah Rp 300.000,00

Alamat IP Server 202.52.146.71

(51)

4.5.2. Spesifikasi Hardware dan Software

Selain biaya yang dikeluarkan dalam penulisan skripsi ini yaitu adalah penjelasan tentang spesifikasi hardware dan software yang digunakan. kebutuhan hardware tersebut meliputi: Processor, Memory, monitor, Hard disk, Keyboard, mouse dan printer. kebutuhan Software tersebut meliputi : Sistem Operasi, Software aplikasi dan software.

Tabel IV. 19

Spesifikasi Hardware Dan Software

Kebutuhan Keterangan

Sistem Operasi Windows

Processor Intel Pentium

Ram 2.00 GB

Hardisk 500 GB

DVD-ROM 52 x

Monitor SVGA 14”

Keyboard 108 Key

Printer Epson T60 dan Epson T1100

Mouse Standart

Browser Mozilla Firefox, Google chrome, Internet Explorer

Software Dreamweaver, XAMPP 5.6.3-VC11

4.6. Spesifikasi Dokumen Sistem Usulan

Adapun bentuk sistem usulan pada sistem pengajuan cuti pada Bank BTN Syariah Cabang Harmoni adalah sebagai berikut:

a. Nama Dokumen : Form Pengajuan Cuti

Fungsi : Sebagai bukti Pengajuan cuti

(52)

Sumber : Sistem

Tujuan : Karyawan dan Supervisor

Media : Tampilan

Frekuensi : Setiap proses pengajuan cuti

Format : Lampiran B.1

b. Nama Dokumen : Laporan Data Pengajuan Cuti

Fungsi : Data laporan pengajuan cuti karyawan

Sumber : Sistem

Tujuan : Administrator

Media : Tampilan

Frekuensi : Setiap kali

Format : Lampiran B.2