DOKUMEN PERANCANGAN

PERANGKAT LUNAK

Digihelp: Donasikan Barang Secara Digital Langsung

ke Penerima

Dipersiapkan oleh:
TPL B / P1
Dhila Aprilianti J0303201091
Mutiara Jasmine Azzahra J0303201054
Desy Irma Andreinadya J0303201144
Hana Husna J0303201141

Program Studi Teknologi Rekayasa Perangkat

Lunak Sekolah Vokasi Institut Pertanian
Bogor 2022
 Daftar Isi

Contents
Daftar Isi................................................................................................................................................i
Daftar Gambar.....................................................................................................................................ii
Daftar Tabel........................................................................................................................................iii
1. Pendahuluan.....................................................................................................................................1
1.1. Tujuan Penulisan Dokumen.....................................................................................................1
1.2 Ruang Lingkup Masalah...........................................................................................................1
1.3 Definisi dan Istilah.....................................................................................................................2
1.4 Aturan Penamaan......................................................................................................................2
1.5 Referensi.....................................................................................................................................3
2. Rancangan Lingkungan Implementasi...........................................................................................4
Arsitektur Jaringan.........................................................................................................................5
3. Perancangan Data............................................................................................................................6
3.1 Daftar Tabel...............................................................................................................................6
3.2 Struktur Tabel............................................................................................................................6
3.3 Skema Relasi.............................................................................................................................12
4. Perancangan Arsitektural.............................................................................................................14
4.1 Struktur Program yang diperoleh..........................................................................................14
4.2 Dekomposisi Fungsional Modul..............................................................................................15
5. Perancangan Antarmuka..............................................................................................................17
5.1 Spesifikasi Antarmuka.............................................................................................................17
6. Perancangan Prosedural................................................................................................................25
7. Matriks Keterunutan.....................................................................................................................35

i
 Daftar Gambar

Gambar 2. 1 Gambar Arsitektur Jaringan.............................................................................................5

Gambar 3. 1 ERD...............................................................................................................................12
Gambar 3. 2 Skema Relasi.................................................................................................................12

Gambar 4. 1 Gambar Perancangan Arsitektural..................................................................................14

Gambar 4. 2 gambar Struktur Program yang Diperoleh.....................................................................14
Gambar 4. 3 Tabel Dekomposisi Modul User....................................................................................15
Gambar 4. 4 Tabel Dekomposisi Modul Admin.................................................................................15

Gambar 5. 1 Gambar Spesifikasi Layar Utama Layout 001................................................................18

Gambar 5. 2 Gambar Spesifikasi Layar Utama Layout 002................................................................20
Gambar 5. 3 Gambar Spesifikasi Layar Utama Layout 003................................................................22
Gambar 5. 4 Gambar Spesifikasi Layar Utama Layout 004................................................................23

Gambar 6. 1 Gambar Flowchart/Activity Diagram Login.................................................................25

Gambar 6. 2 Flowchart / Activity Diagram Donasi............................................................................27
Gambar 6. 3 Gambar Flowchart/Activity iagram Edit........................................................................28
Gambar 6. 4 Gambar Flowchart/Activity Diagram Tambah...............................................................30
Gambar 6. 5 Gambar Flowchart/Activity Diagram Hapus..................................................................31
Gambar 6. 6 gambar Flochart/Activity Diagram Melihat Beranda.....................................................33
Gambar 6. 7 Gambar Flochart/Activity Diagram Kirim Pesan..........................................................34

ii
 Daftar Tabel

Tabel 2. 1 Hardware pada Rancangan Lingkungan Implementasi.........................................................4

Tabel 2. 2 Software pada Rancangan Lingkungan Implementasi..........................................................4

Tabel 3. 1 Daftar Tabel Perancangan Data............................................................................................6

Tabel 3. 2 Tabel Barang........................................................................................................................7
Tabel 3. 3 Tabel Donasi........................................................................................................................8
Tabel 3. 4 Tabel Donatur.....................................................................................................................10
Tabel 3. 5 Tabel Penerima...................................................................................................................11
Tabel 3. 6 Tabel Barang......................................................................................................................12
Tabel 3. 7 Tabel Penerima...................................................................................................................13
Tabel 3. 8 Tabel Donatur.....................................................................................................................13
Tabel 3. 9 Tabel Donasi.......................................................................................................................13

Tabel 5.1. 1 Tabel Deskripsi Layout 001.............................................................................................17

Tabel 5.1. 2 Tabel Spesifikasi Objek Pada Layar Layout 001.............................................................19

Tabel 5.2. 1 Tabel Deskripsi Layout 002.............................................................................................19

Tabel 5.2. 2 Tabel Spesifikasi Objek paa Layar Layout 002...............................................................20

Tabel 5.3. 1 Deskripsi Layout 003.......................................................................................................21

Tabel 5.3. 2 Tabel spesifikasi Objek pada Layoar Layout 003............................................................22

Tabel 5.4. 1 Tabel Deskripsi Layout 004.............................................................................................23

Tabel 5.4. 2 Tabel spesifikasi Objek Pada Layar layout 004...............................................................24

Tabel 6. 1 Tabel Perancangan Prosedural Login.................................................................................25

Tabel 6. 2 Tabel Perancangan Prosedural Donasi................................................................................26
Tabel 6. 3 Tabel Perancangan Prosedural Edit....................................................................................28
Tabel 6. 4 Tabel Perancangan Prosedural Tambah..............................................................................29
Tabel 6. 5 Tabel Perancangan Prosedural Hapus.................................................................................31
Tabel 6. 6 Tabel Perancangan Prosedural Melihat Beranda.................................................................32
Tabel 6. 7 Tabel Perancangan Prosedural Kirim Pesan.......................................................................34

iii
iv
1. Pendahuluan
1.1. Tujuan Penulisan Dokumen
Dokumen DPPL (Deskripsi Pengembangan Perangkat Lunak) ini berisi penjelasan
secara rinci mengenai perangkat lunak yang dibuat, yaitu deskripsi perancangan
lingkungan implementasi dan dekomposisi fungsional modul, deskripsi data dalam
bentuk basis data yang akan digunakan dalam pembuatan perangkat lunak, dekomposisi
fisik modul, dan deskripsi rinci modul yang terdiri dari deskripsi layar, deskripsi proses
dan deskripsi laporan.
Tujuan penulisan DPPL:
1. Untuk memberikan landasan yang diperlukan dalam proses pengkodean sistem
website DigiHelp.
2. Memberikan gambaran mengenai rancangan perangkat lunak DigiHelp yang
dibangun secara terperinci.
3. Sebagai panduan dalam mengimplementasikan perangkat lunak donasi.
4. Untuk memastikan bahwa semua fungsi dan prosedur yang akan dibuat telah
memenuhi spesifikasi kebutuhan sesuai dokumen skpl yang telah dibuat
sebelumnya.
Dengan DPPL ini diharapkan pengembangan perangkat lunak DigiHelp akan lebih
terarah, efektif, dan efisien.

1.2 Ruang Lingkup Masalah

Sistem Digihelp adalah sistem yang dibuat untuk memberikan solusi atas
permasalahan kesulitan masyarakat akan penyaluran donasi barang yang cepat dan sesuai
dengan target orang yang membutuhkan. Sistem yang dibangun adalah aplikasi berbasis
website. Pengguna dalam sistem ini adalah masyarakat umum, badan usaha, dan
komunitas di Kota Bogor yang dapat melakukan pengajuan untuk mendapatkan bantuan
donasi barang atau mendonasikan barangnya. Dengan demikian, sistem ini dapat
menjembatani donatur dalam proses penyaluran barang donasi.
Pembuatan sistem digihelp bertujuan untuk memfasilitasi proses/kegiatan penyaluran
barang donasi sehingga dapat memudahkan donatur dalam memberikan barang
donasinya tanpa kesulitan untuk menyalurkan donasi, karena digihelp menyediakan
layanan untuk ambil dan mengantar barang yang akan didonasikan dan mengantarkannya
langsung kepada orang yang membutuhkan tersebut.

1
1.3 Definisi dan Istilah
 SKPL adalah Spesifikasi Kebutuhan Perangkat Lunak yaitu dokumen yang dibuat
ketika deskripsi detail dari semua aspek perangkat lunak yang akan dibangun
terspesifikasi sebelum proyek dimulai.
 PHP adalah PHP adalah bahasa pemrograman yang umum dipakai dalam
pembuatan dan pengembangan suatu web. Sebetulnya, dilansir dari PHP.net, PHP
merupakan singkatan dari PHP: Hypertext Preprocessor.
 HTML adalah Hypertext Markup Language atau HTML adalah bahasa markup
standar yang digunakan untuk membuat halaman website dan aplikasi web.
 ERD adalah pemodelan data atau sistem dalam database, Fungsi ERD adalah untuk
memodelkan struktur dan hubungan antar data yang relatif kompleks. Keberadaan
sistem Entity Relationship Diagram sangat penting untuk perusahaan dalam
mengelola data yang dimilikinya.
 CSS adalah CSS adalah bahasa yang kita gunakan untuk menata dokumen
HTML.CSS menjelaskan bagaimana elemen HTML harus ditampilkan.
 Activity adalah yaitu diagram yang dapat memodelkan proses-proses yang terjadi
pada sebuah sistem.
 MySQL adalah DBMS yang open source dengan dua bentuk lisensi, yaitu Free
Software (perangkat lunak bebas) dan Shareware (perangkat lunak berpemilik yang
penggunaannya terbatas).
 Digihelp adalah Web penyaluran barang yang masih memiliki manfaat dan nilai
jual sesuai dengan kebutuhan target. Digihelp menyediakan sebuah tempat untuk
memudahkan donatur dalam penyaluran barang yang tertuju langsung kepada
penerima, memfasilitasi penggalangan barang dan mewujudkan masyarakat untuk
peduli kepada orang sekitar.

1.4 Aturan Penamaan

Penomoran akan digunakan selanjutnya untuk menyingkat permasalahan
dan fungsi- fungsi sistem. Aturan penomoran ini memiliki format sebagai
berikut :
 DPPL•.DIGIHELP.•xxxx adalah kode yang digunakan untuk
mengimplementasikan rancangan pada DigiHelp.
 DPPL : Nama Dokumen
 DIGIHELP : Nama Aplikasi

2
  Xxx : No Fungsi
 Y : sub fungsi
Contoh
DPPL.DIGIHELP.005 : Menampilkan Data
DPPL.DIGIHELP.005-1 : Menampilkan Data
Barang DPPL.DIGIHELP.005-2 : Menampilkan
Data Penerima

1.5 Referensi
Dokumentasi PL yang dirujuk oleh dokumen ini adalah
1. SKPL DigiHelp: Donasikan Barang Secara Digital Langsung ke Penerima
2. Penggunaan dan Pengisian Deskripsi Perancangan Perangkat Lunak (DPPL).
Program Studi Teknik Informatika. UNSOED. 2012.

3
2. Rancangan Lingkungan Implementasi
Hardware
Tabel 2. 1 Hardware pada Rancangan Lingkungan Implementasi

Komponen Minimum Digunakan

RAM 4 GB 6 GB
Storage 512 GB 512 GB
Processor Intel i3 Intel i5
Display Intel UHD Graphic Intel UHD Graphic

Software
Tabel 2. 2 Software pada Rancangan Lingkungan Implementasi

Nama Software Fungsi

Visual Studio Code Digunakan untuk menuliskan baris kode dalam pembuatan website

XAMPP Digunakan untuk mengkoneksikan database dan mengaktifkan local

server

Microsoft Project Digunakan untuk membuat Work Breakdown Structure

Zoom Meeting Digunakan untuk virtual meeting

Figma Digunakan untuk mendesain UI website
draw.io Digunakan untuk membuat bagan erd, class diagram, use case diagram,
dll

Google Workspace Digunakan untuk menyimpan aset

Canva Digunakan untuk mendesain aset

basis data :
- Mysql
- Phpmyadmin

4
Arsitektur Jaringan

Gambar 2. 1 Gambar Arsitektur Jaringan

5
3. Perancangan Data
3.1 Daftar Tabel

Tabel 3. 1 Daftar Tabel Perancangan Data

NamaTabel Primary key Data Store Deskripsi isi

barang id _barang Digihelp Berisi data id_barang, nama narang,
jenis_barang dan deskripsi
donasi Digihelp
donatur Nik Digihelp Berisi data diri donatur yang terdiri dari
nama, nik, email, telepon, dan alamat
penerima Id Digihelp Berisi id, nama, nik, jenis_barang,
kecamatan, alamat, nohprt.

3.2 Struktur Tabel

Berisi deskripsi tabel-tabel data jika aplikasi berbasis data. Diawali dengan daftar tabel
dan deskripsi isinya. Untuk setiap tabel, harus mengandung nama tabel, deskripsi isi,
primary key, dan constraint integrity dengan tabel lain (jika ada).

Identifikasi/Nama : barang
Deskripsi Isi : Tabel yang berisi tentang barang barang yang akan didonasikan
kepada penerima. Terdiri dari id_barang,nama_barang, Jenis
barang dan Deskripsi.
Primary Key : id_barang
Constraint Integrity :-

6
 Tabel 3. 2 Tabel Barang

Nama Field Deskripsi Tipe& length Boleh Default Keterangan

NULL
id_barang BRNG01 Varchar(50) NO - Primary key
Id barang berisi tentang
kombinasi data yang
mengetahaui identitas
suatu barang

Nomor urut tiga digit :

nama_barang Nama berisi tentang Varchar(50) NO -

data nama barang
yang akan
didonasikan.

jenis_barang Jenis berisi tentang Varchar(50) NO -

beberapa macam
jenis barang yang
diperlukan
contohnya :
Elektronik, Pakaian,
Furniture dan
Perlengkapan
sekolah.
deskripsi Deskripsi berisi Varchar(100) NO -
tentang catatan
tujuan barang untuk
didonasikan
kepada penerima.

7
Identifikasi/Nama : donasi
Deskripsi Isi : Berisi data transaksi donasi oleh donatur. Terdiri dari id donasi,
tanggal, nik donatur, dan id penerima.
Primary Key : id_donasi
Constraint Integrity :-

Tabel 3. 3 Tabel Donasi

Nama Deskripsi Tipe & length Boleh NULL Default Keterangan

Field
id_donasi d22030401 Varchar(11) NO - Primary key
Id donasi adalah
data yg berisi
kombinasi huruf
dan nomor
identitas
dengan struktur :
Simbol donasi:
d Tahun melakukan
donasi : yy
Bulan melakukan
donasi: mm
Tanggal melakukan
donasi
: dd
Nomor urut
melakukan donasi
dua digit.
tanggal 2022-03-04 Date NO -
Tanggal donasi
adalah data yang
berisi tanggal
donatur melakukan
donasi di Digihelp.

8
nik_donatur 32141516071800 Varchar(50) NO -
07
nik adalah data
yang berisi

9
 kombinasi nomor
untuk identitas
dengan struktur : 32
: Kode Provinsi
14 : Kode
Kota/Kabupaten 15:
Kode kecamatan
16: Tanggal lahir
07: Bulan lahir
18: Tahun lahir
0007: Nomor urut
pendaftaran
penduduk sesuai
tanggal lahir
Id_penerima Kode identitas atau Varchar(20) NO -
index yang
menunjukkan data
di kolom
selanjutnya, auto
increment

Identifikasi/Nama : Donatur
Deskripsi Isi : Berisi data diri donatur yang terdiri dari nama, nik, email, telepon, dan
alamat
Primary Key : nik
Constraint Integrity :-

10
 Tabel 3. 4 Tabel Donatur

Nama Field Deskripsi Tipe & Boleh NULL Default Keterangan

length
Nama Ayang Yuhu Varchar NO -

Nama adalah nama

donatur yang terdiri
dari nama depan dan
nama belakang atau
sesuai dengan tanda
pengenal.
nik 3214151607180007 Varchar NO - Primary key

nik adalah data yang

berisi kombinasi
nomor untuk
identitas dengan
struktur :
32 : Kode
Provinsi 14 :
Kode
Kota/Kabupaten 15:
Kode kecamatan
16: Tanggal
lahir
07: Bulan lahir
18: Tahun lahir
0007: Nomor urut
pendaftaran
penduduk sesuai
tanggal lahir
Email ayang11@gmail Varchar NO -
.com
email adalah
alamat email donatur
Telepon 0857-7331-3240 Varchar NO -

telepon adalah nomor

telepon aktif yang
digunakan oleh
donatur
Alamat Bogor Tengah Varchar NO -

alamat adalah data

tempat tinggal
donatur yang diisi
berdasarkan
kecamatan

11
 Identifikasi/Nama : Penerima
Deskripsi Isi : Berisi data dari penerima donasi di website DigiHelp
Primary Key : id
Constraint Integrity : id_barang (FK)

Tabel 3. 5 Tabel Penerima

Nama Deskripsi Tipe & Boleh Default Keterangan

Field length NULL
Id Kode identitas atau INT NO - Primary key
index yang
menunjukkan data di
kolom
selanjutnya, auto
increment
Nama berisi nama penerima Varchar(50) NO -
donasi di website
DigiHelp

Nik Nomor Induk Varchar(16) NO -

Kependudukan
penerima donasi

id_barang foreign key yang Varchar(4) NO - FK dari tabel

mengambil data dari barang
tabel barang,
sehingga mewakilkan
satu baris dari
data barang

Kecamatan Kecamatan tempat Varchar(50) NO -

tinggal
penerima

Alamat alamat lengkap Varchar(255) NO -

penerima

Nohprt no hp ketua tempat Varchar(14) NO -

tinggal
penerima

Catatan : kolom “Boleh NULL” berisi “NO” artinya tidak boleh kosong, berisi “YES”
artinya boleh NULL

12
3.3 Skema Relasi

Gambar 3. 1 ERD

Gambar 3. 2 Skema Relasi

Tbl Barang
Tabel 3. 6 Tabel Barang

id_barang nama_barang jenis_barang deskripsi

BRNG05 Kompor Furniture Kompor dengan dua tungku yang masih bisa
berfungsi dengan baik

BRNG06 Baju Pakaian Baju hangat dan kayak digunakan sehari-hari

BRNG07 Laptop Elektronik Laptop atau komputer yang bisa digunakan

untuk mengoperasikan ms. office

BRNG08 Kemeja Pakaian Kemeja dibutuhkan untuk memulai pekerjaan

di tempat yang lebih layak

13
 Tbl Penerima
Tabel 3. 7 Tabel Penerima

nik(pk) nama email Telepon alamat

2345678564382977 Dhila dhila@gmail.com 087729471424 tatapakan cantik

2121345678789799 Tiara ara@gmail.com 087765465678 Lodaya 2

9087785673782929 Desy icy@gmail.com 085677778889 Malabar 4

Tbl Donatur
Tabel 3. 8 Tabel Donatur

Id nama nik id_barang kecamatan alamat nohprt

1 Budi 12344321567 4 Bogor Barat Bogor 08665435

88765 Cantik 4563
2 Tyas 34568976567 2 Bogor Tatapakan 08675678
43456 Timur Wangi 5463
3 Dini 34569087657 2 Bogor Utara Taweuran 80866543
48078 5 6542
4 Gilang 18212980838 5 Bogor Barat Bogor 09876467
93283 Kiyowo 3888

Tbl Donasi
Tabel 3. 9 Tabel Donasi

id_donasi tanggal nik_donatur id_penerima

d22112201 22-11-2022 2345678564382977 2

d22112301 23-11-2022 9087785673782929 3

d22112301 23-11-2022 9087785673782929 1

d22112401 24-11-2022 2121345678789799 4

14
4. Perancangan Arsitektural

Gambar 4. 1 Gambar Perancangan Arsitektural

4.1 Struktur Program yang diperoleh

Gambar 4. 2 gambar Struktur Program yang Diperoleh

15
4.2 Dekomposisi Fungsional Modul
Bagian ini berisi dekomposisi logik dari modul. Pada bagian ini berisi tabel dengan kolom
Modul, Proses, Keterangan. Kolom keterangan hanya diisi jika proses tidak tergambarkan
dalam DFD. Misalnya untuk proses-proses yang mewakili suatu library umum. Contoh
dekomposisi fungsional modul adalah sebagai berikut:

User
Gambar 4. 3 Tabel Dekomposisi Modul User

No DPPL Fungsi/proses Data Data Output Keterangan

Input
DPPL.DIGIHELP.001 Membaca Button Menampilkan data -
Data “Ayo barang
donasi”
DPPL.DIGIHELP.002 Donasi Pilih Menampilkan informasi
Barang tentang barang donasi
yang ingin diberikan -
kepada penerima serta
form donasi

Admin

Gambar 4. 4 Tabel Dekomposisi Modul Admin

No DPPL Fungsi/proses Data Input Data Output Keterangan

DPPL.DIGIHELP.003 Login Username, validasi benar:
Kata Sandi menampilkan
halaman admin.

Validasi salah:
notifikasi peringatan
DPPL.DIGIHELP.004 Menambahkan Pilih Menu data tampil di tabel
Data data yang akan
ditambahkan,
isi sesuai
kebutuhan
DPPL.DIGIHELP.004- Menambahkan nik, nama, data tampil di tabel
1 Data Penerima id_barang,
kecamatan,
alamat, nohprt
DPPL.DIGIHELP.004- Menambahkan id_barang, data tampil di tabel
2 Data Barang nama_barang,
jenis_barang,
deskripsi

16
DPPL.DIGIHELP.004- Menambahkan nik_donatur, data tampil di tabel
3 Data donatur nama_donatur,
email, no_hp,
alamat
DPPL.DIGIHELP.004- Menambahkan id_donasi, data tampil di tabel
4 Data id_penerima,
nik_donatur,
tanggal
DPPL.DIGIHELP.005 Menampilkan Pilih data yang Menampilkan Tabel
Data akan sesuai data yang
ditampilkan dipilih
DPPL.DIGIHELP.006 Menghapus Pilih data dan Menampilkan
data pilih baris yang warning konfirmasi
akan dihapus hapus,

Jika iya, data

terhapus

jika tidak, kembali ke

tabel dengan data
yang sama
DPPL.DIGIHELP.007 Update data Pilih data dan Menampilkan form
pilih baris yang update data,
akan di update,
Data diperbarui
ubah data yang
dipilih
DPPL.DIGIHELP.008 Logout Klik button Menampilkan
logout warning konfirmasi
logout,

jika iya, keluar dari

sistem

jika tidak, tetap di

current page

17
5. Perancangan Antarmuka
5.1 Spesifikasi Antarmuka
1. LAYOUT 001
a. Nama Pengguna : Donatur
b. Nama Modul Atau Fungsi : Beranda
i. Data Input : Memberikan tampilan tentang arti digihelp, tujuan, alur donasi
ii. Data Output : Menampilkan tentang arti digihelp, tujuan, alur donasi
c. Deskripsi :

Tabel 5.1. 1 Tabel Deskripsi Layout 001

Nama Komponen Jumlah Komponen Keterangan

Header 1 Header DigiHelp yang berisi Text, Paragraf,

Ikon, Gambar dan Menu.

Image 8 Gambar yang digunakan untuk background

header, Foto Alur kerja dan Foto ikon digihelp.

Ikon 6 Ikon yang digunakan untuk menandai suatu

Lokasi, sosial media, dan Nomor Telepon.

TextBox 4 Digunakan untuk menyisipkan tulisan di textbox

nama, email, pesan dan subjek.

Label 4 Yaitu nama, email, pesan dan subjek .

Button 7 Untuk melakukan sebuah fugsi ke halaman atau

menu yang tertuju.

18
d. Spesifikasi layar utama
:

Gambar 5. 1 Gambar Spesifikasi Layar Utama Layout 001

19
e. Spesifikasi Objek Pada layar

Tabel 5.1. 2 Tabel Spesifikasi Objek Pada Layar Layout 001

Id_objek Jenis Keterangan

Ayo Donasi Menu Ketika diklik akan langsung masuk kedalam
halaman donasi.
Tombol Next dan previous Button Ketika di klik akan berpindah ke slide atau
gambar selanjutnya.

2. LAYOUT 002
a. Nama Pengguna : Donatur
b. Nama Modul Atau Fungsi : Daftar Barang Donasi
i. Data Input : Mengarahkan ke form donasi sesuai dengan barang yang dipilih
ii. Data Output : Menampilkan barang-barang yang akan dibutuhkan oleh
penerima donasi
c. Deskripsi :
Tabel 5.2. 1 Tabel Deskripsi Layout 002

Header 1 Header DigiHelp yang berisi Text H1, Paragraf, Ikon, Button
Next dan Prev, serta Gambar dan Menu
Image 8 Gambar yang digunakan untuk slider, dan barang
yang diperlukan oleh penerima donasi
Ikon 10 Ikon yang digunakan untuk menandai suatu Lokasi,sosial
media, No Telepon
Button 7 Untuk melakukan sebuah fungsi ke halaman atau menu yang
tertuju

20
d. Spesifikasi layar utama:

Gambar 5. 2 Gambar Spesifikasi Layar Utama Layout 002

e. Spesifikasi Objek Pada layar

Tabel 5.2. 2 Tabel Spesifikasi Objek paa Layar Layout 002

Id_objek Jenis Keterangan

Ayo Donasi Menu Ketika diklik akan langsung masuk kedalam

halaman donasi.

Donasi Sekarang Button Ketika diklik akan langsung masuk kedalam

halaman donasi.

Ikon Sosial Media Ikon Ikon sosial media ketika di klik akan terhubung
dan Lokasi ke Sosial media yang dituju.
Ikon Lokasi hanya digunakan sebagai penanda
daerah atau lokasi.

21
3. LAYOUT 003
a. Nama Pengguna : Donatur
b. Nama Modul Atau Fungsi : Donasi
i. Data Input : Nama Donatu , No WA, Alamat , Barang, Gambar
ii. Data Output : Jika sudah maka akan muncul ke halaman ucapan
“Terimakasih”
c. Deskripsi :
Tabel 5.3. 1 Deskripsi Layout 003

Nama Komponen Jumlah Komponen Keterangan

Header 1 Header DigiHelp yang berisi Text H1,

Paragraf, Ikon, Button Next dan Prev, serta
Gambar dan Menu.

Image 2 Gambar yang digunakan untuk background

header.

Ikon 6 Ikon yang digunakan untuk menandai suatu

Lokasi, sosial media, dan No. Telepon.

CheckBox 1 Digunakan untuk menceklist jika data yang

dimasukkan sudah valid.

Form 1 Berisi nama, alamat, no hp, pilih file dan

Checkbox.

Button 3 Untuk melakukan sebuah fungsi ke halaman

atau menu yang tertuju.

22
d. Spesifikasi Layar Utama

Gambar 5. 3 Gambar Spesifikasi Layar Utama Layout 003

e. Spesifikasi Objek Pada Layar

Tabel 5.3. 2 Tabel spesifikasi Objek pada Layoar Layout 003

Id_objek Jenis Keterangan

Donasi Sekarang Button Ketika diklik akan masuk kedalam halaman thanks.html

4. LAYOUT 004
a. Nama Pengguna : Admin DigiHelp
b. Nama Modul Atau Fungsi : Login

23
 i. Data Input : Username & Kata sandi
ii.Data Output : Validasi Benar = Masuk ke Halaman Admin Validasi salah =
Notifikasi peringatan username atau kata sandi yang salah.
c. Deskripsi :
Tabel 5.4. 1 Tabel Deskripsi Layout 004

Nama Komponen Jumlah Komponen Keterangan

Text 2 Untuk memberikan judul dan keterangan

TextBox 2 Digunakan untuk menyisipkan tulisan di textbox

email dan kata sandi

Button 1 Untuk melakukan sebuah fugsi ke halaman yang

tertuju

Label 2 Yaitu email dam kata sandi

d. Spesifikasi layar utama

Gambar 5. 4 Gambar Spesifikasi Layar Utama Layout 004

24
e. Spesifikasi Objek Pada layar

Tabel 5.4. 2 Tabel spesifikasi Objek Pada Layar layout 004

Id_objek Jenis Keterangan

Masuk Button Ketika diklik akan masuk kedalam halaman utama

admin jika email dan kata sandi yang dimasukkan
sesuai dengan yang didaftarkan.

Daftar Text Text tersebut jika diklik berfungsi menghubungkan

halaman Masuk ke halaman daftar

25
6. Perancangan Prosedural
1. Login
Tabel 6. 1 Tabel Perancangan Prosedural Login

Kode Perancangan DPPL.DIGIHELP.002

Input Email, kata sandi

Output Beranda

Initial State Menampilkan halaman login

Final State Menampilkan halaman beranda

Pengguna Donatur, admin

Alur Proses Flowchart / activity diagram

Gambar 6. 1 Gambar Flowchart/Activity Diagram Login

26
Pseudocode / Var email, var kata sandi
Algoritma Input (email, kata sandi)
Cek (Email)
Query Cek(Email)
Query Cek(kata sandi)
If Query Cek(Email) != 0
Query Cek(kata sandi) !
=0
Menampilkan Halaman Beranda
Else
Menampilkan Pesan :
“Email atau kata sandi salah”
Spesifikasi Query Query Cek(Keyword) :
Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

2. Donasi

Tabel 6. 2 Tabel Perancangan Prosedural Donasi

Kode Perancangan DPPL.DIGIHELP.001

Input Form donasi

Output Info donasi

Initial State Menampilkan informasi barang donasi

Final State Menampilkan form donasi

Pengguna Donatur

27
Alur Proses Flowchart / activity diagram

Gambar 6. 2 Flowchart / Activity Diagram Donasi

Pseudocode / lgoritma Var donasi

Input (donasi)
Cek (donasi)
Query Cek(donasi)

If Query Cek(donasi) != 0
Data tersimpan di database
Query Donatur
Else
Menampilkan Pesan :
“Gagal Disimpan”

Spesifikasi Query Query Cek(donasi) :

28
 Select * from tabel_donasi where id_donasi = donasi
Query Donatur :
Select NIK from tabel_barang where kode_barang = keyword

3. Edit

Tabel 6. 3 Tabel Perancangan Prosedural Edit

Kode Perancangan DPPL.DIGIHELP.002

Input Nama barang dan penerima

Output Data barang dan penerima

Initial State Menampilkan halaman edit

Final State Menampilkan halaman data barang dan penerima

Pengguna Admin

Alur Proses Flowchart / activity diagram

Gambar 6. 3 Gambar Flowchart/Activity iagram Edit

29
Pseudocode /
Algoritma

Spesifikasi Query Query Cek(Keyword) :

Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

4. Tambah

Tabel 6. 4 Tabel Perancangan Prosedural Tambah

Kode Perancangan DPPL.DIGIHELP.002

Input Nama barang dan penerima

Output Data barang dan penerima

30
Initial State Menampilkan halaman tambah

Final State Menampilkan halaman data barang dan penerima

Pengguna Admin

Alur Proses Flowchart / activity diagram

Gambar 6. 4 Gambar Flowchart/Activity Diagram Tambah

Pseudocode /
Algoritma

31
 Spesifikasi Query Query Cek(Keyword) :
Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

5. Hapus
Tabel 6. 5 Tabel Perancangan Prosedural Hapus

Kode Perancangan DPPL.DIGIHELP.002

Input Nama barang dan penerima

Output Data barang dan penerima

Initial State Menampilkan halaman hapus

Final State Menampilkan halaman data barang dan penerima

Pengguna Admin

Alur Proses Flowchart / activity diagram

Gambar 6. 5 Gambar Flowchart/Activity Diagram Hapus

32
 Pseudocode /
Algoritma

Spesifikasi Query Query Cek(Keyword) :

Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

6. Melihat Beranda
Tabel 6. 6 Tabel Perancangan Prosedural Melihat Beranda

Kode Perancangan DPPL.DIGIHELP.002

Input Email dan kata sandi

Output Halaman beranda

Initial State Menampilkan halaman login

Final State Menampilkan halaman beranda

Pengguna Donatur

Alur Proses Flowchart / activity diagram

33
 Gambar 6. 6 gambar Flochart/Activity Diagram Melihat Beranda

Pseudocode /
Algoritma

Spesifikasi Query Query Cek(Keyword) :

Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

34
7. Kirim Pesan
Tabel 6. 7 Tabel Perancangan Prosedural Kirim Pesan

Kode Perancangan DPPL.DIGIHELP.002

Input Nama, email, subjek, pesan

Output Pesan yang disampaikan

Initial State Menampilkan halaman beranda

Final State Menampilkan kirim pesan pada halaman beranda

Pengguna Donatur

Alur Proses Flowchart / activity diagram

Gambar 6. 7 Gambar Flochart/Activity Diagram Kirim Pesan

35
Pseudocode /
Algoritma

Spesifikasi Query Query Cek(Keyword) :

Select * from tabel_barang where kode_barang = keyword

Query Info Barang :

Select Nama Barang from tabel_barang where kode_barang =
keyword

7. Matriks Keterunutan
SKPL.DIGIHELP.001 Membaca Data DPPL.DIGIHELP.001
SKPL.DIGIHELP.002 Donasi DPPL.DIGIHELP.002
SKPL.DIGIHELP.003 Login DPPL.DIGIHELP.003
SKPL.DIGIHELP.004 Menambahkan Data DPPL.DIGIHELP.004
SKPL.DIGIHELP.004-1 Menambahkan Data Penerima DPPL.DIGIHELP.004-1
SKPL.DIGIHELP.004-2 Menambahkan Data Barang DPPL.DIGIHELP.004-2
SKPL.DIGIHELP.004-3 Menambahkan Data donatur DPPL.DIGIHELP.004-3
SKPL.DIGIHELP.004-4 Menambahkan Data DPPL.DIGIHELP.004-4
SKPL.DIGIHELP.005 Menampilkan Data DPPL.DIGIHELP.005

36
SKPL.DIGIHELP.006 Menghapus data DPPL.DIGIHELP.006
SKPL.DIGIHELP.007 Update data DPPL.DIGIHELP.007
SKPL.DIGIHELP.008 Logout DPPL.DIGIHELP.008

37