BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN

(1)

26

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisa Kebutuhan Software

A. Tahapan Analisis

Sistem pelayanan administrasi kependudukan Berbasis mobile web, dirancang

agar memudahkan Masyarakat Kecamatan Palabuhanratu dalam mengajukan

perubahan data kependudukan.

Spesifikasi kebutuhan (system requirment) dari sistem pelayanan administrasi

kependudukan yaitu:

Halaman User yaitu:

A1. User dapat melakukan daftar akun.

A2. User dapat melakukan login.

A3. User dapat mengajukan permohonan

A4. User dapat melihat status pengajuan

Halaman Admin yaitu:

B1. Admin melakukan login.

B2. Admin dapat mengelola data masyarakat

B3. Admin dapat mengelola pengajuan permohonan

B4. Admin dapat mengelola data laporan

(2)

B. Use Case Diagram

Penggambaran Use Case dari sistem yang akan dirancang sebagai berikut:

1. Use Case Diagram Halaman User

Gambar IV. 1 Use Case Diagram Halaman User

Deskripsi Use Case Diagram Halaman User:

Tabel IV. 1 Deskripsi Use Case Diagram Daftar Akun

Use Case Name

Daftar Akun

Requirement

A1

Goal

User dapat melakukan daftar akun

Pre-condition

Isi data lengkap

Post-condition

Data user tersimpan

Failed end condition

User gagal simpan data

Primary Actor

User

Main Flow/Basic Path

1. System menampilkan halaman daftar akun

2. User memasukkan data.

3. User simpan data

Invariant

-

uc Halaman User User Daftar Akun Login Data Permohonan

Logout Status Permohonan

Input Username dan passw ord «include»

(3)

Tabel IV. 2 Deskripsi Use Case Diagram Mengajukan Permohonan

Use Case Name

Mengajukan Permohonan

Requirement

A2,A3

Goal

User dapat simpan data

Pre-condition

User isi data pengajuan permohonan

Post-condition

System berhasil simpan data

Failed end condition

System gagal simpan data

Primary Actor

User

Main Flow/Basic Path

1. User melakukan login

2. User isi data pengajuan

Invariant

Tabel IV. 3 Deskripsi Use Case Diagram Cek Status Permohonan

Use Case Name

Cek Status Permohonan

Requirement

A2,A4

Goal

User dapat menampilkan status

Pre-condition

User melakukan login

Post-condition

System berhasil menampilkan

Failed end condition

System gagal menampilkan

Primary Actor

User

Main Flow/Basic Path

1. User melakukan login

2. User lihat status pengajuan

Invariant

2. Use Case Diagram Halaman Admin

Gambar IV. 2 Use Case Diagram Halaman Admin

uc Halaman Admin

Admin

Login

Data Masyakarat

Data Pengaj uan

data laporan Logout

Input Username dan Passw ord «include»

(4)

Deskripsi Use Case Diagram Halaman Admin:

Tabel IV.4 Deskripsi Use Case Diagram Login Admin

Use Case Name

Login

Requirement

B1

Goal

Admin dapat masuk ke system

Pre-condition

Data admin telah tersimpan di database system

Post-condition

Admin dapat masuk ke system

Failed end condition

Admin tidak memilih login

Primary Actor

Admin

Main Flow/Basic Path

1. Admin memilih login pada system.

2. Admin memasukkan username, password

dan level akses.

3. System melakukan validasi.



Apakah password dan level akses sesuai

dengan username yang tersimpan.



Apakah username tersimpan.

4. System akan mengaktifkan halaman admin,

seperti menu-menu yang dapat diakses oleh

admin.

Invariant

1.Jika username, password dan level akses tidak

sesuai, maka akan muncul pesan, “Login

anda bukan Admin”.

Tabel IV. 5 Deskripsi Use Case Diagram Menu Data Masyarakat

Use Case Name

Mengelola Data Masyarakat

Requirement

B1,B2

Goal

Admin dapat menambah, meng-edit dan

menghapus data masyarakat

Pre-condition

Admin telah login

Post-condition

Data masyarakat tersimpan, ter-update atau

terhapus

Failed end condition

Gagal

menyimpan,

meng-update

atau

menghapus

Primary Actor

Admin

Main Flow/Basic Path

1. Admin melihat data masyarakat

2. Admin memilih tambah masyarakat

3. System menampilkan form data masyarakat

(5)

Tabel IV. 6 Deskripsi Use Case Diagram Data Pengajuan Permohonan

Use Case Name

Data Pengajuan Permohonan

Requirement

B1,B3

Goal

Admin dapat mengelola data Pengajuan

Pre-condition

Admin memilih login admin

Post-condition

System menampilkan data Pengajuan

Failed end condition

Admin gagal data Pengajuan

Primary Actor

Admin

Main Flow/Basic Path

1. Admin memilih menu data Pengajuan

2. System menampilkan data data Pengajuan

3. Admin mengelola data Pengajuan

4. System menyimpan data Pengajuan

Invariant

Tabel IV. 7 Deskripsi Use Case Diagram Menu Laporan

Use Case Name

Mengelola Laporan

Requirment

B1,B4

Goal

Laporan ditampilkan

Pre-condition

Data seluruh keuangan tersimpan

Post-condition

Admin dapat masuk ke system

Failed end condition

Admin tidak memilih menu laporan keuangan

Primary Actor

Admin

Main Flow/Basic Path

1. Admin memilih menu laporan

2. Admin memilih laporan berdasarkan bulan

3. System menampilkan laporan

Invariant

1. Jika

admin

ingin

mencetak

laporan

keuangan, maka admin memilih tombol

cetak kemudiam system akan mencetak

laporan.

(6)

C. Activity Diagram

1. Activity Diagram User Melakukan Perngajuan Permohonan

Gambar IV.3 Activity Diagram User Melakukan Perngajuan Permohonan

2. Activity Diagram Login Admin

Gambar IV.4 Activity Diagram Login Admin

3. Activity Diagram Mengelola Data Masyarakat

act Halaman User

System User

Start

Melakukan Login

Input Username dan

Passw ord Cek Data

Sesuai?

Tampil Halaman User Pilih Menu Pengaj uan

Permohonan

Input isi data pengaj uan permohonan

Simpan Data

Finish [Ya] [Tidak]

act Business Process Model

System Admin

Start

Input Username dan Passw ord

Cek Data

Sesuai?

Tampil Halaman Admin

Finish [Tidak]

(7)

Gambar IV.5 Activity Diagram Mengelola Data Masyarakat

4. Activity Diagram Mengelola Data Pengajuan Permohonan

Gambar IV.6 Activity Diagram Mengelola Data Pengajuan Permohonan

act Halaman Admin

Start

Pilih Menu Data Masyarakat

Kelola Data Masyarakat SImpan Data

Finish

act Mengelola Data Pengaj uan

Start

Pilih Menu Pengaj uan Permohonan

Tampil Data Pengaj uan Permohonan Rubah Status Pengaj uan Permohonan Simpan Data Finish

(8)

5. Activity Diagram Laporan

Gambar IV.7 Activity Diagram Menu Data Berita

4.2 Desain

4.2.1 Database

Desain database dalam skripsi ini menggunakan Entity Relationship

Diagram (ERD). Bentuk ERD yang digunakan dalam sistem sebagai berikut:

A. Entity Relationship Diagram (ERD).

Tb_User Tb_Pengajuan Tb_Masyarakat Tb_jenislayanan isi input isi iduser email password _nik Nama_lengkap Jenis_kelamin agama warganegara No_layanan Nama_layanan jenis tgl No_ajuan status iduser No_ajuan nik iduser No_layanan No_ajuan alamat

Gambar IV.8 Entity Relationship Diagram (ERD)

B. Logical Record Structure

act Laporan

Start

Pilih Menu Laporan Tampil Form Laporan

Pilih Tanggal Bulan Tahun Tampil Laporan

(9)

Tb_Berita Nama_lengkap Tb_Masyarakat nik Nama_lengkap Jenis_kelamin agama warganegara alamat Tb_User Iduser email password Nik ** Tb_Pengajuan No_ajuan tgl jenis status Iduser ** No_layanan ** Tb_jenislayanan No_layanan Nama_layanan

Gambar IV.9 Logical Record Structure

3. Spesifikasi File

a. Spesifikasi File Tabel Pegawai

Nama Database

: db_kependudukan

Nama File

: Tabel Pegawai

Akronim

: tb_ Pegawai

Tipe File

: Master

Akses File

: Random

Panjang record

: 66 Karakter

Kunci Field

: nip

Tabel IV. 8 Spesifikasi File Tabel Pegawai

No. Elemen Data

Nama Field

Tipe

Panjang Keterangan

1. NIP

NIP

Int

11 Primary Key

2. NIK

NIK

Varchar

15 Foreign Key

3. Password

Password

Varchar

40 b. Spesifikasi File Tabel Masyarakat

Nama Database

: db_kependudukan

Nama File

: Tabel Masyarakat

Akronim

: tb_ masyarakat

Tipe File

: Master

Akses File

: Random

Panjang record

: 105 Karakter

(10)

Tabel IV. 9 Spesifikasi File Tabel Masyarakat

No. Elemen Data

Nama_Field

Tipe

Panjang Keterangan

1. Nik

Nik

Varchar

15 Primary Key

2. Nama lengkap

Nama_lengkap Varchar

20

3. Jenis kelamin

Jenis_kelamin

Enum

“L”,”P”

4. agama

Agama

Varchar

15

5. warganegara

Warganegara

Varchar

15

6. alamat

Alamat

Varchar

40 c. Spesifikasi File Tabel User

Nama Database

: db_kependudukan

Nama File

: Tabel User

Akronim

: Tb_User

Tipe File

: Master

Akses File

: Random

Panjang record

: 75 Karakter

Primary Key

: -

Tabel IV. 10 Spesifikasi File Tabel User

No. Elemen Data

Akronim

Tipe

Panjang Keterangan

1. Nik

Nik

Varchar

15 Foreign Key

2. Email User

Email

Varchar

20

3. Password User

Password

Varchar

40 d. Spesifikasi File Tabel Layanan

Nama Database

: db_kependudukan

Nama File

: Tabel Layanan

Akronim

: Tb_ Layanan

Tipe File

: Master

Akses File

: Random

Panjang record

: 31 Karakter

Primary Key

: No_ Layanan

Tabel IV. 11 Spesifikasi File Tabel Layanan

No. Elemen Data

Nama_Field

Tipe

Panjang Keterangan

1. No Layanan

No_Layanan

Int

11 Primary Key

2. Nama Layanan

Nama_Layanan Varchar

20

(11)

e. Spesifikasi File Tabel Pengajuan

Nama Database

: db_kependudukan

Nama File

: Tabel Pengajuan

Akronim

: Tb_ Pengajuan

Tipe File

: Transaksi

Akses File

: Random

Panjang record

: 57 Karakter

Primary Key

: No_Ajuan

Tabel IV. 12 Spesifikasi File Tabel Pengajuan

No. Elemen Data

Nama_Field

Tipe

Panjang Keterangan

1. No Ajuan

No_ajuan

Int

11 Primary Key

2. Tanggal

Tgl

Date

3. Jenis Pengajuan

Jenis

Varchar

20

4 Status

Status

Enum

“Proses”,

“Selesai”

5 No Layanan

No_Layanan

Int

11 Foreign Key

6 Nik

Nik

Varchar

15 Foreign Key

4.2.2 Software Architecture

A. Component Diagram

Gambar IV.10 Component Diagram Sistem Layanan Administrasi

Kependudukan

B. Deployment Diagram

cmp Use Case Model

Menu Utama Admin <<UI>> Database Applkasi j query.j s style.css xampp serv er mysql database

Menu Utama User <<UI>>

(12)

Gambar IV.11 Deployment Diagram Sistem Layanan Administrasi

Kependudukan

4.2.3 User Interface

A. Form Halaman Utama

Gambar IV.12 Form Halaman Login User

B. Form Halaman Daftar Akun

deployment Deployment Model

Localhost

Menu Utama Admin <<UI>>

Menu Utama User <<UI>> j query.j s style.css Database Application Database Mysql Database Client PC Brow ser

(13)

Gambar IV.13 Form Halaman Daftar Akun

C. Form Halaman Utama User

Gambar IV.14 Form Halaman Utama User

(14)

Gambar IV.15 Form Halaman Pengajuan Permohonan

E. Form Halaman Cek Status Pengajuan Permohonan

Gambar IV.16 Form Halaman Cek Status Pengajuan Permohonan

(15)

Gambar IV.17 Form Halaman Login Admin

G. Form Halaman Utama Admin

Gambar IV.18 Form Halaman Utama Admin

(16)

Gambar IV.19 Form Halaman Data Masyarakat

I. Form Halaman Data Pengajuan Masyarakat

(17)

4.3 Code Generation

Form Pengajuan

<?php include "../config.php"; @session_start(); $username= $_SESSION['username']; if ($username and $username!="admin"){ ?>

<?php

$get =mysql_query("SELECT * FROM daftar WHERE id='$_SESSION[id]' "); $prop=mysql_fetch_assoc($get);?>

PENGAJUAN PERUBAHAN DATA KEPENDUDUKAN

<?php

$tgl=date("Y-m-d H:i:s"); //proses input berita

if (isset($_POST['bagikan'])) { require_once ("../config.php");

$id = addslashes (strip_tags (null));

$ln = addslashes (strip_tags ($_POST['nama'])); $tipefile=$_FILES[link][type]; $b=substr($tipefile,6); $a="."; $lokasi=$_FILES[link][tmp_name]; $namafile="$ln$a$b"; if(!$namafile) { $direk=""; $link=""; } else{ $direk="foto_user/$namafile"; $link="foto_user/$namafile"; } $lebarmaks=600; $panjangmaks=500; $ukurangambar=GetImageSize($lokasi); $aktif=1; $errors = array(); if(!$_POST['nip']){

$errors[] = "<script>url=TINY.box.show({html:' NIP tidak terisi Harap Ulangi!',animate:false,close:false,boxid:'error',top:5})</script>"; }

(18)

$errors[] = "<script>url=TINY.box.show({html:' Nama lengkap tidak terisi Harap Ulangi!',animate:false,close:false,boxid:'error',top:5})</script>";

}

if(!$_POST['email']){

$errors[] = "<script>url=TINY.box.show({html:' Email tidak terisi Harap Ulangi!',animate:false,close:false,boxid:'error',top:5})</script>";

}

$query = mysql_query("SELECT * FROM pegawai WHERE email='$_POST[email]'");

$hsl2 = mysql_fetch_array($query); if(mysql_num_rows($query)>0) {

//if (($hsl2['email'] == $email) and ($hsl2['email'] == $email)){

$errors[] = "<script>url=TINY.box.show({html:'Email Sudah Ada dalam database atau Ganda ! Harap Ulangi

!',animate:false,close:false,boxid:'error',top:5})</script>"; }

if(!$_POST['alamat']){

$errors[] = "<script>url=TINY.box.show({html:' Alamat tidak terisi Harap Ulangi!',animate:false,close:false,boxid:'error',top:5})</script>";

}

$checkemail = "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i";

if(!preg_match($checkemail, $_POST['email'])){

$errors[] = "<script>url=TINY.box.show({html:' E-Mail Tidak Valid Contoh : nama@yahoo.com Harap Ulangi

!',animate:false,close:false,boxid:'error',top:5})</script>"; }

if(!$link){

$errors[] = "<script>url=TINY.box.show({html:' Foto belum di unggah..! Harap unggah terlebih dahulu sebelum ke tahap

selanjutnya',animate:false,close:false,boxid:'error',top:5})</script>"; }

if (($ukurangambar [0] > $lebarmaks) OR ($ukurangambar [1] > $panjangmaks))

{

$errors[] = "<script>url=TINY.box.show({html:'File Tidak sesuai ! File hanya dalam bentuk : Image file (.jpg,.png,.gif) ! <br>Pixel maximal Width 600px x Height 500px Gambar yang anda masukan terlalu besar ! coba yang lain

!',animate:false,close:false,boxid:'error',top:5})</script>"; } if(count($errors) > 0){ foreach($errors AS $error){ echo $error . "<br>\n"; } }else {

$query=mysql_query("insert into pegawai

(id,nip,jabatan,nama,tgl_lahir,email,alamat,gambar,status,no_hp,jk)

values(null,'$_POST[nip]','$_POST[jabatan]','$_POST[nama]','$_POST[tgl_ lahir]','$_POST[email]','$_POST[alamat]','$link','0','$_POST[no_hp]','$_POST[jk]')" );

(19)

if ($query) {

echo "<script>url=TINY.box.show({html:'Data berhasil di

simpan!',animate:false,close:false,mask:false,boxid:'success',autohide:2,top:-14,left:-17})</script>";

move_uploaded_file($lokasi,"$direk"); } else {

echo "<font class=warning> Data gagal di Bagikan</font>"; }

}} ?><br>

<td><input name="nip" type="text" id="nama_kegiatan...4" size="17" value="<?php echo $prop['nik'];?>" readonly="readonly"/></td>

</tr> <tr>

<td width="24%">Nama Lengkap</td>

<td width="76%"><input name="nama" type="text" id="nama_kegiatan..." value="<?php echo $prop['nama'];?>" readonly="readonly" size="30"/></td> </tr>

<tr>