User Interface - Analisa Kebutuhan Software

BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN

4.1 Analisa Kebutuhan Software

4.2.3 User Interface

Interface merupakan salah satu bagian yang terpenting dari sistem. Interface sendiri adalah sistem yang dirancang untuk mengelola input dan output dari data.

User interface jika diartikan tampilan antar muka pemgguna, user interface merupakan mekanisme komunikasi antar pengguna (user) dengan sistem. Antar muka pemakai (user interface) dapat menerima informasi kepada pengguna user untuk membantu jalur penelusuran masalah samapai ditemukan suatu solusi.

1. Halama Utama

Berikut ini adalah Tampilan Halaman Utama :

Gambar IV. 15 Halaman Utama

2. Halaman Login

Berikut ini adalah Tampilan Halaman Login :

Gambar IV. 16 Halaman Login 3. Halaman Beranda

Berikut ini adalah Tampilan Halaman Beranda :

Gambar IV. 17 Halaman Beranda

4. Halaman Tambah Warga Baru

Berikut ini adalah Tampilan Tambah Warga Baru :

Gambar IV. 18

Halaman Tambah Warga Baru

5. Halaman Daftar Warga

Berikut ini adalah Tampilan Daftar Warga :

Gambar IV. 19 Daftar warga

6. Halaman mutasi warga

Berikut ini tampilan mutasi warga :

Gambar IV. 20 Halaman Mutasi Warga

7. Halaman Pembuatan Surat Pengantar

Berikut ini adalah Tampilan Pembuatan Surat Pengantar :

Gambar IV. 21

Halaman Pembuatan surat pengantar

8. Halaman Input Keuangan

Berikut ini adalah Halaman Input Keuangan :

Gambar IV. 22 Halaman Input Keuangan

9. Halaman Rekapitulasi Keuangan

Berikut ini adalah Halaman Rekapitulasi Keuangan :

Gambar IV. 23 Rekapitulasi Keuangan

10. Bentuk Surat Pengantar

Berikut ini adalah Bentuk Surat Pengantar :

Gambar IV. 24 Bentuk Surat Pengantar

4.3 Code Generation

Kode program sistem informasi pelayanan warga ini untuk membantu warga yang bertujuan untuk melakukan pengajuan surat pengantar dan mengetahui jumlah warga yang ada di sekitar RT setempat, Berikut adalah kode program dalam sistem informasi pelayanan warga :

1. Halaman Login

Berikut ini adalaha Code Generation Halaman Login :

<!DOCTYPE html>

<?php

include 'db.php';

session_start(); // Starting Session

$error=''; // Variable To Store Error Message if (isset($_POST['submit']))

{

if (empty($_POST['NIK']) || empty($_POST['Password'])) {

$error = "NIK or Password is Blank";

} else {

ini_set('display_errors',FALSE);

//fungsi untuk outomatik logout function login_validate() { //ukuran waktu dalam detik

$timer=1;

//untuk menambah masa validasi

$_SESSION["expires_by"] = time() + $timer;

}

function login_check() {

//mengambil nilai session pertama

$exp_time = $_SESSION["expires_by"];

//jika waktu sistem lebih kecil dari nilai waktu session if (time() < $exp_time) {

//panggil fungsi dan tambah waktu session login_validate();

return true;

}else{

//jika waktu session lebih kecil dari waktu session atau lewat batas //unset session

unset($_SESSION["expires_by"]);

return false;

} }

// Define $nip and $password

$NIK=$_POST['NIK'];

$Password=$_POST['Password'];

// Establishing Connection with Server by passing server_name, user_id and password as a parameter

// To protect MySQL injection for Security purpose

$NIK = stripslashes($NIK);

$Password = stripslashes($Password);

// SQL query to fetch information of registerd users and finds user match.

$query = mysqli_query($connection,"select * from master_user where Password='".$Password."' AND NIK='".$NIK."'");

$_SESSION['login_user']=$NIK; // Initializing Session

$_SESSION['login_status']="TRUE";

$_SESSION['foto']=$DetailUser['foto'];

header("location: index2.php"); // Redirecting To Other Page }

else {

$error = "NIK or Password is invalid";

}

mysqli_close($connection); // Closing Connection }

<html lang="en">

<head>

<title>SIP Warga</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--==================================================

=============================================-->

<link rel="icon" type="new/image/png" href="new/images/icons/favicon.ico"/>

<link rel="stylesheet" type="text/css" href="new/vendor/animate/animate.css">

<link rel="stylesheet" type="text/css" href="new/vendor/select2/select2.min.css">

<!--==================================================

=============================================-->

<link rel="stylesheet" type="text/css"

href="new/vendor/daterangepicker/daterangepicker.css">

<!--==================================================

=============================================-->

<link rel="stylesheet" type="text/css" href="new/css/util.css">

<link rel="stylesheet" type="text/css" href="new/css/main.css">

<form class="login100-form validate-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >

<span class="login100-form-title p-b-34 p-t-27">

Login Pengurus RT

</span>

<div class="wrap-input100 validate-input" data-validate = "Enter username">

<input class="input100" type="text" name="NIK" placeholder="NIK">

<span class="focus-input100" data-placeholder=""></span>

</div>

<div class="wrap-input100 validate-input" data-validate="Enter password">

<input class="input100" type="password" name="Password"

placeholder="Password">

<span class="focus-input100" data-placeholder=""></span>

</div>

<!-- <div class="contact100-form-checkbox">

<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">

<input class="login100-form-btn" name="submit" type="submit" value="Masuk">

<!--

<input class="btn btn-default submit" name="submit" type="submit"

value="Masuk">

Anda Pengguna Baru ? Buat Akun

</a>

</div>

<br>

<div class="txt1">

<h5><i class="fa fa-paw"></i> Sistem Informasi dan Database RT 003</h5>

<div class="text-center">

</div>

<script src="new/vendor/bootstrap/js/popper.js"></script>

2. Halaman Beranda

Berikut ini adalaha Code Generation Halaman Beranda :

<?php

include 'session.php';

include 'header.php';

include 'fungsi_indotgl.php';

$QCekWarga = mysqli_query($connection,"SELECT * FROM MASTER_WARGA Where Mutasi = ''");

$rowCekWarga = mysqli_num_rows($QCekWarga);

$QCekMutasi = mysqli_query($connection,"SELECT * FROM MASTER_WARGA Where Mutasi = 'YA'");

$rowCekMutasi = mysqli_num_rows($QCekMutasi);

$QCekKK = mysqli_query($connection,"SELECT * FROM MASTER_WARGA Where Status_dalam_Keluarg = 'Kepala Keluarga'");

$rowCekKK = mysqli_num_rows($QCekKK);

$QWarga = mysqli_query($connection, "SELECT * FROM MASTER_WARGA");

if (!$QWarga){

die ('SQL Error: ' . mysqli_error($connection));

}

$QBerita = mysqli_query($connection, "SELECT * FROM Master_Berita ORDER BY Tanggal DESC LIMIT 5");

?> var m = $(this).attr("id");

$.ajax({

});

function TampilkanNomorAgenda(str){

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

document.getElementById("NomorAgendaMasuk").value = xmlhttp.responseText;

} };

xmlhttp.open("GET", "proses.php?kdsrtmsk=" + str, true);

xmlhttp.send();

};

</script>

<h4 class="modal-title" id="myModalLabel">Tambah Warga Baru</h4>

</div>

<form action="proses.php" name="Input_Tambah_Warga"

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

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

placeholder="Nomor Identitas Kependudukan" required >

</div>

<label for="name">Nomor KK</label>

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

placeholder="Nomor Kartu Keluarga" required >

</div>

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

placeholder="Nama sesuai KTP" required >

</div>

<label for="name">Alamat</label>

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

placeholder="Masukkan Alamat" required >

</div>

<option>--Pilih RT--</option>

<input type="text" class="form-control" name="RW" id="RW" Value="01"

placeholder="Masukkan RW" required readonly>

</div>

<label for="name">Nomor</label>

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

placeholder="Masukkan Nomor Rumah" required >

</div>

<label for="name">Tempat Lahir</label>

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

placeholder="Masukkan Tempat Lahir" required >

</div>

<label for="name">Tanggal Lahir</label>

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

placeholder="Masukkan Golongan Darah" required >

</div>

<label for="name">Agama</label>

<option>--Pilih Agama--</option>

<option>--Pilih Status Nikah--</option>

<option>Kawin</option>

<option>Belum Kawin</option>

<option>Cerai Hidup</option>

<option>Cerai Mati</option>

</select>

</div>

<label for="name">Status Pekerjaan</label>

<option>--Pilih Pekerjaan--</option>

<option>Pelajar</option>

<option>Pegawai Negeri</option>

<option>Pegawai Swasta</option>

<option>Mengurus Rumah Tangga</option>

<option>Petani / Buruh Lepas</option>

<option>Perangkat Desa</option>

<label for="name">Status dalam keluarga</label>

<option>--Pilih Status dalam Keluarga--</option>

<option>Kepala Keluarga</option>

<option>--Pilih Pendidikan--</option>

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

placeholder="Masukkan No Handphone" required >

</div>

<label for="name">Jenis Kelamin</label>

<br>

<label>

<input type="radio" value="laki" class="flat" name="Jenis_Kelamin"> Laki-laki

Perempuan

</label>

</div>

<label for="name">Upload Foto</label>

</div>

<!-- <input type="hidden" value="<?php echo $_SESSION['login_user'];?>"

name="NIP" id="NIP"> -->

<button class="btn btn-success" type="submit">SIMPAN</button>

</div>

<h4 class="modal-title" id="myModalLabel">Pemohon</h4>

</div>

<thead>

while ($row = mysqli_fetch_array($QWarga)) {

echo "<tr>

<td width='40%'>".$row['NIK']."<input id='".$i."Pemohon' type='hidden' value=";

echo '"'.$row['NIK'].'"';

echo " class='form-control'></td>";

echo "<td width='40%'>".$row['Nama']. "</td>";

echo "<td><div class='ui-widget' align='center'><button type='button' class='btn-block' data-dismiss='modal'";

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

<span class="count_top"><i class="fa fa-user"></i> Jumlah Warga</span>

<div class="count green"><?php echo $rowCekWarga;?> <small>Orang</small>

</div>

<?php if($_SESSION['login_jabatan']== 'Pengurus RT'){ ?>

<a data-toggle="modal" href="#myModalWarga" ><button type="button"

class="btn btn-round btn-primary btn-xs">

<i class="fa fa-plus"></i> Tambah Warga</button></a>

<?php } ?>

</div>

<span class="count_top">Jumlah Keluarga</span>

<div class="count green"><i class="fa fa-users blue"></i><?php echo $rowCekKK;

?> Keluarga</div>

</div>

<span class="count_top"><i class="fa fa-user"></i> Jumlah Warga Mutasi</span>

<div class="count red"><?php echo $rowCekMutasi;?> <small>Orang</small>

</div>

<h2>BERITA || INFORMASI TERBARU DAPAT DILIHAT DISINI </h2>

</li>

</ul>

</li>

</li>

</ul>

</div>

<?php if($_SESSION['login_jabatan']== 'Pengurus RT'){ ?>

<i class="fa fa-plus"></i> Tambah Berita</button></a><?php } ?>

<?php while ($row = mysqli_fetch_array($QBerita)) {

$QWarga = mysqli_query($connection,"SELECT * FROM MASTER_WARGA WHERE NIK = '".$row['Pelaku']."'");

$rowWarga = mysqli_fetch_array($QWarga);

<tr>

<td width='80%'><a target='_blank' href="berita.php?ID=<?php echo

$row['ID'];?>">&nbsp&nbsp&nbsp&nbsp<?php echo

<td width='80%'><a href="beritalengkap.php">&nbsp&nbsp&nbsp Lihat Semua</a></td>

<h2>Daftar Warga</h2>

</li>

</ul>

</li>

<thead>

<?php if($_SESSION['login_jabatan']== 'Pengurus RT'){ ?><th>Aksi</th><?php }

</tr>

</thead>

<?php

$QLihatSurat = mysqli_query($connection, "SELECT * FROM MASTER_WARGA WHERE Mutasi = ''");

<tbody>

<?php while ($row = mysqli_fetch_array($QLihatSurat)) {

<tr>

<td><?php echo $row['Alamat'];?>, No. <?php echo

$row['Nomor_Rumah'];?></td>

<?php if($_SESSION['login_jabatan']== 'Pengurus RT'){ ?> <td>

<?php if ($row['Status_dalam_Keluarg']== 'Kepala Keluarga'){?>

<a title='Lihat KK' href='LihatKK.php?NoKK=<?php echo

$row['NOKK'];?>&NIK=<?php echo $row['NIK'];?>' target='_blank'>

</button> </a>

<?php } ?>

<a title='Edit Warga' href='edit_warga.php?NIK=<?php echo $row['NIK'];?>' target='_blank'>

</button>

</a>

<a title='Hapus Warga' href='hapus_warga.php?NIK=<?php echo $row['NIK'];?>' target='_blank'>

</button> </a>

</td>

<?php include 'footer.php';?>

4.4 Testing

Dalam pengujian berikut ini dilakukan dengan mengamati hasil eksekusi perangkat lunak dalam memerikasa fungsi input, proses agar menghasilkan output yang sesuai dengan rancangan .

1. Berikut ini adalah Hasil Pengujian Black Box Testing Form Login :

Tabel V.1

Hasil Pengujian Black Box Testing Form Login

2. Berikut ini adalah Hasil Pengujian Black Box Testing Tambah Warga :

Tabel V.2

Hasil Pengujian Black Box Testing Form Tambah warga

3. Berikut ini adalah Hasil Pengujian Black Box Testing Pembuatan Surat Pengantar :

Tabel V.3

Hasil Pengujian Black Box Testing Form Pembuatan Surat Pengantar

4. Berikut ini adalah Hasil Pengujian Black Box Testing Input Keuangan :

Tabel V.4

Hasil Pengujian Black Box Testing Form Input Keuangan

4.5. Support

Support dalam hal ini penulis menambahkan, suatu pendukung untuk pembuatan aplikasi berbasis web untuk memudahkan pembuatan aplikasi web di RT 003 RW 01 Kel.Rawabuaya.

Dalam dokumen SISTEM INFORMASI PELAYANAN WARGA RW 01 KELURAHAN RAWA BUAYA BERBASIS WEBSITE SKRIPSI. Diajukan untuk memenuhi syarat kelulusan Program Sarjana (Halaman 68-93)