22 BAB IV
PERANCANGAN SISTEM DAN PROGRAM USULAN
4.1 . Analisa Kebutuhan Software 4.1.1. Tahapan Analisis
Analisis kebutuhan dalam system informasi Rekap Kegiatan Aksi Pada ACT Kota Sukabumi sebagai berikut :
Halaman Admin :
A.1. Admin dapat melakukan login A.2. Admin dapat mengelola data laporan A.3. Admin dapat melihat laporan
A.4. Admin dapat Print laporan
A.5. Admin dapat mengelola data relawan A.6. Admin melihat data relawan
A.7. Admin bisa mengirimkan pesan kepada relawan A.8. Admin dapat melakukan logout
Halaman Relawan:
B.1. Relawan dapat melakukan login B.2. Relawan dapat mengelola laporan B.3. Relawan dapat melihat laporan B.4. Relawan dapat logout
4.1.2. Use Case Diagram
1. Use Case Diagram Halaman Admin
Gambar IV.1. Use Case Diagram Halaman Admin Tabel IV.1. Deksripsi Use Case Login
Use Case Name Login
Requitment -
Goal Admin dapat melakukan login
Pre-condition Admin membuka system dan memiliki akun Post-condition Sistem menampilkan dashboard
Failed end condition Tidak dapat masuk pada halaman dashboard
Primary actor Admin
Mainflow/Basic path 1. Admin membuka sIstem
2. Login dengan username dan password 3. System menampilkan halaman dashboard
Invariant -
Tabel IV.2. Deskripsi Use Case Mengelola Data Laporan
Use Case Name Mengelola data laporan
Requitment A1,A2
Goal Admin dapat mengelola data laporan
Pre-condition Admin telah melakukan login kemudian memilih menu data laporan
Post-condition Data laporan dapat diedit, dilihat maupun di hapus Failed end condition Admin tidak dapat mengedit,print maupun
menghapus data laporan
Primary Actor Admin
Main/Flow basic path 1. Admin melakukan login 2. Admin memilih data laporan 3. System menampilkan data laporan 4. Admin menekan tombol print
5. System akan menampilkan data format PDF
Invariant Admin menekan tombol edit dan hapus
Tabel IV.3 Deskripsi Use Case Melihat Data Laporan Use Case Name Melihat data laporan
Requitment A1,A3
Goal Admin dapat melihat data laporan
Pre-condition Admin telah melakukan login kemudian memilih menu data laporan
Post-condition Data laporan dapat dilihat
Failed end condition Admin tidak dapat melihat data laporan
Primary actor Admin
Main Flow/Basic Path 1. Admin melakukan login
2. Admin memilih menu data laporan 3. System menampilkan data laporan
Invariant -
Tabel IV.4 Deskripsi Use Case Print Laporan
Use Case Name Print laporan
Requitment A1,A4
Goal Admin dapat mencetak laporan
Pre-condition Admin telah melakukan login kemudian memilih menu data laporan kemudian pilih print laporan Post-condition Data laporan bisa dicetak
Failed condition Admin tidak dapat mencetak data laporan
Primary actor Admin
Main Flow / Basic Path
1. Admin melakukan login
2. Admin memilih menu data laporan
3. Admin menekan tombol print data laporan 4. System membuat data laporan format PDF
Invariant -
2. Use Case Diagram Halaman Relawan
Gambar IV.2 Use Case Diagram Halaman Relawan
Tabel IV.5 Deskripsi Use Case Login
Use Case Name Login
Requitment B1
Goal Relawan dapat melakukan login
Pre-condition Relawan membuka system dan memiliki akun Post-condition System menampilkan halaman relawan Failed end condition Tidak dapat masuk kehalaman relawan
Primary actor Relawan
Main Flow / Basic Path
1. Relawan membuka system
2. Login dengan username dan password 3. System menampilkan halaman relawan
Invariant -
Tabel IV.6 Deskripsi Use Case Melihat Data Laporan
Use Case Name Melihat data laporan
Requitment B1,B2
Goal Relawan dapat melihat data barang
Pre-condition Relawan telah melakukan login kemudian memilih menu data laporan
Post-condition Laporan dapat dilihat
Failed end condition Relawan tidak dapat melihat data laporan Main Flow / Basic
Path
1. Relawan melakukan login
2. Relawan memilih menu data laporan 3. System menampilkan data laporan
Invariant -
Tabel IV.7 Deskripsi Use Case Mengelola Data Laporan Use Case Name Mengelola data laporan
Requitment B1,B3
Goal Relawan dapat mengelola data laporan
Pre-condiotion Relawan telah melakukan login kemudian memilih menu data laporan
Post-condition Data laporan dapat di tambah, diedit maupun dihapus Failed end
condition
Relawan tidak dapat menambah,mengedit maupun menghapus
Primary actor Relawan
Main Folo / Basic Path
1. Relawan melakukan login 2. Relawan memilih menu laproan 3. System menampilkan data laporan
4. Relawan menekan tombol tambah laporan 5. System menampilkan halaman input laporan 6. Admin menginput data laporan dan menekan
tombol simpan
7. System akan menyimpan laporan Invariant Relawan menekan tombol edit dan detail
Tabel IV.8 Deskripsi Use Case Logout
Use Case Name Logout
Requitment B1,B4
Goal Relawan dapat melakukan logout
Pre-condition Relawan melakukan login kemudian memilih menu logout
Post-condition Relawan keluar dari system
Failed end condition Relawan tidak dapat keluar dari system
Primary actor Relawan
Main Flow / Basic Path 1. Relawan melakukan login 2. Relawan memilih menu logout 3. Relawan keluar dari system
Invariant -
4.1.3. Activity Diagram
4. Activity diagram login admin
Gambar VI.3
Activity Diagram Halaman Login Admin
5. Activity diagram data laporan
Gambar VI.4
Activity Diagram Data Laporan
6. Activity diagram login relawan
Gambar VI.5
Activity Diagram Halaman Login Relawan
7. Activity data relawan
Gambar VI.6
Activity Diagram Data Laporan Relawan
4.2. Desain 4.2.1. Database
A. Entity Relasionship Diagram (ERD)
Gambar VI.7
ERD (Entity Relasionship Diagram)
B. Logical Record Structure (LRS)
Gambar VI.7
LRS (Logical Record Structure)
C. Spesifikasi File
Spesifikasi file yang ada dalam proses pencatatan penerima manfaat di ACT Sukabumi yang disimpan dalam sebuah database yang akan dijelaskan dalam tabel-tabel berikut, yaitu:
1) Spesifikasi File Relawan
Nama : Tabel Relawan
Akronim File : Relawan Tipe File : File Master Akses File : Random Record Size : 111 Karakter Media File : Harddisk Kunci Field : id_relawan Software : Mysql
Tabel VI.9
Spesifikasi File Tabel Relawan
No Elemen Data Akronim Tipe Data Panjang Keterangan
1 Id Relawan Id_relawan Int 11 Primary Key
2 Nama Relawan Nama Varchar 45
3 Username Username Varchar 30
4 Password Password Varchar 25
2) Spesifikasi File Lokasi Nama : Tabel Lokasi Akronim File : Lokasi Tipe File : File Master
Akses File : Random Record Size : 276 Karakter Media File : Harddisk Kunci Field : id_lokasi Software : Mysql
Tabel VI.10
Spesifikasi File Tabel Lokasi
No Elemen Data Akronim Tipe Data Panjang Keterangan
1 Id Lokasi Id_lokasi Int 11 Primary Key
2 Nama Lokasi Nama_Lokasi varchar 40
3 Alamat Alamat Varchar 225
3) Spesifikasi File Segmentasi Nama : Tabel Segmentasi Akronim File : Segmentasi Tipe File : File Master Akses File : Random Record Size : 61 Karakter Media File : Harddisk Kunci Field : id_segmentasi Software : Mysql
Tabel VI.11
Spesifikasi File Tabel Segmentasi
No Elemen Data Akronim Tipe Data Panjang Keterangan
1 Id Segementasi Id_Segmentasi Int 11 Primary Key
2 Segmentasi Segmentasi Varchar 50
4) Spesifikasi File GSPN
Nama : Tabel GSPN
Akronim File : GSPN
Tipe File : File Transaksi Akses File : Random Record Size : 48 Karakter Media File : Harddisk Kunci Field : id_GSPN Software : Mysql
Tabel VI.11
Spesifikasi File Tabel Segmentasi
No Elemen Data Akronim Tipe Data Panjang Keterangan
1 Id GSPN Id_GSPN Int 11 Primary Key
2 Id Relawan Id_relawan Int 11 Foreign Key
3 Id Lokasi Id_lokasi Int 11 Foreign Key
4 Air Minum Air_Minum Int 5
5 Beras Wakaf Beras_Wakaf Int 5
6 Jumlah Penerima Jumlah_penerima Int 5
5) Spesifikasi File Aksi Nama : Tabel Aksi Akronim File : Aksi
Tipe File : File Transaksi Akses File : Random Record Size : 22 Karakter Media File : Harddisk Kunci Field : id_aksi Software : Mysql
Tabel VI.12
Spesifikasi File Tabel Segmentasi
No Elemen Data Akronim Tipe Data Panjang Keterangan
1 Id Aksi Id_Aksi Int 11 Primary Key
2 Id GSPN Id_gspn Int 11 Foreign Key
3 Aksi 1 Aksi1 Date 10
4 Aksi 2 Aksi2 Date 10
5 Aksi3 Aksi3 Date 10
4.2.2. Software Architecture A. Deployment Diagram
Gambar VI. 8 Deployment Diagram B. Component Diagram
Gambar VI. 9 Component Diagram
4.2.3 User Interface
Gambar IV. 1. Halaman Login
Gambar IV. 2. User Interface Dashboard
Gambar IV. 3. User Interface Input Kegiatan Aksi
Gambar IV. 4. User Interface Data Aksi GSPN
Gambar IV. 5. User Interface Data Aksi GSPN
Gambar IV. 6. User Interface Cetak Laporan
4.3. Code Generation
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Target Material Design Bootstrap Admin Template</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css"
media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle waves-effect waves-dark"
data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-dark"
href="index.html"><img src="assets/img/act.png" width="80" height="40"> </i>
<strong>ACT</strong></a>
<div id="sideNav" href=""><i class="material-icons dp48">toc</i></div>
</div>
<ul class="nav navbar-top-links navbar-right">
<li><a class="dropdown-button waves-effect waves-dark" href="#!" data- activates="dropdown1"><i class="fa fa-user fa-fw"></i> <b>ACT Admin</b> <i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</nav>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#"><i class="fa fa-user fa-fw"></i> My Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a class="active-menu waves-effect waves-dark"
href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="#" class="waves-effect waves-dark"><i class="fa fa- sitemap"></i> Program<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Kategori</a>
</li>
<li>
<a href="#">Data Laporan</a>
</li>
</ul>
</li>
<li>
<a class="waves-effect waves-dark" href="index.html"><i class="fa fa-bolt"></i> Humanity Carline</a>
</li>
<li>
<a class="waves-effect waves-dark" href="index.html"><i class="fa fa-user"></i> Relawan</a>
</li>
</ul>
</div>
</nav>
<!-- /. NAV SIDE -->
<div id="page-wrapper">
<div class="header">
<h1 class="page-header">
Laporan </h1>
<ol class="breadcrumb">
</ol>
</div>
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="card">
<div class="card-action">
Laporan </div>
<div class="card-content">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
<th colspan="10"><center>Aksi GSPN SUKABUMI KOTA</center></th>
</tr>
<tr>
<th align="center" rowspan="2">No</th>
<th align="center" rowspan="2">Nama Lokasi</th>
<th align="center" rowspan="2">Segmentasi</th>
<th align="center" rowspan="2">Jumlah Penerima Manfaat</th>
<th align="center" colspan="2">Jenis Bantuan</th>
<th align="center" colspan="3">Tanggal Aksi</th>
</tr>
<tr>
<th>Bras Wakaf 3KG</th>
<th>Air Minum Wakaf</th>
<th>Aksi 1</th>
<th>Aksi 2</th>
<th>Aksi3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
<!-- /. ROW -->
<div class="fixed-action-btn horizontal click-to-toggle">
<a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
</a>
<ul>
</ul>
</div>
<footer>
</footer>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
4.1.Testing
1. Pengujian terhadap form login
Tabel IV. 1. Pengujian Login Admin
No Skenario
Pengujian Test Case Hasil Yang Diharapkan
Hasil
Pengujian Kesimpulan
1
Username dan Password tidak diisi kemudian klik tombol Login
Username : (Kosong) Password : (Kosong)
Sistem akan menampilkan menolak dan menampilkan validasi username tidak boleh kosong
Sesuai harapan
Valid
2
Mengetikan salah satu username dan password salah
kemudian klik login
Username : admin Password : 0987656
Sistem akan menolak aksess user dan
menampilkan validasi username atau password salah
Sesuai harapan
Valid
3
Mengetikan username dan password dengan data yang benar kemudian klik login
Username : admin Password : admin
Sistem akan menerima aksess login dan
menampilkan halaman dashboard
Sesuai harapan
valid
Tabel IV. 2.Hasil Pengujian Print Laporan
No Skenario
Pengujian Test Case Hasil Yang Diharapkan
Hasil
Pengujian Kesimpulan
1
Tanggal tidak dipilih kemudian tekan tombol cetak
Sistem akan menotak dan menampilkan validasi tanggal harus di pilih
Sesuai harapan
Valid
2
Tanggal dipilih dan menekan tombol cetak
System akan menerima perintah dan akan
menampilkan data sesuai tanggal yang diinput kemudian akan mengunduh file Exel
Sesuai harapan
Valid
4.2.Support
4.5.1 Spesifikasi Hardware dan Software 1. Spesifikasi Perangkat Keras
a. Server 1) CPU
(a) Prossesor Core i5 (b) Memory RAM 8GB (c) Hardisk 1TB
2) Mouser : Optical mouse/Tuch pad
3) Keyboard : QWERTY
4) Moitor : Layar 15,8Inc Dengan resolusi minimum 1024x768
5) Koneksi Internet dengan kecepatan 2Mbps b. Client
1) CPU
(a) Prossesor 1.66 GHz
(b) Memory RAM 1 GB DDR2 (c) Hardisk 20 GB
2) Mouse : Optical mouse/Tuch Pad
3) Keyboard : QWERTY
4) Monitor : 10” Dengan resolusi layer 1024x768 5) Koneksi internet dengan kecepatan 256Kbps
2. Spesipikasi Perangkat Lunak a. Server
1) Sostem operasi : Windows 10 2) Web Server : Xampp
3) Web Browser : Google Crome
4) Software : Sublime
5) Database : Mysql
b. Client
1) Sistem operasi : Windows 7
2) Web Server : Google Crome, Opera Mini, Moizla Firefox
4.3.Spesifikasi Dokument Sistem Usulan
1. Nama Dokumen : Form Laporan Kegiatan Aksi Fungsi : Sebagai laporan Kegiatan Aksi
Sumber : Relawan
Tujuan : Admin
Media : Form
Frekuensi : Setiap Hari
Bentuk : Lihat Lampiran
