DPPL Kelompok 6

DOKUMEN PERANCANGAN PERANGKAT LUNAK
LIFII : Literasi Finansial Indonesia
Dipersiapkan oleh:
TRPL B/P1
Muhammad ilham Nugraha | J0303201062
Febrian Nur Hadi | J0303201028
Muhamad Haidar Mutawally | J0303202164
Mohammed Zidane | J0303201087
Program Studi Manajemen Informatika

Sekolah Vokasi Institut Pertanian Bogor
2022
Daftar Isi
Daftar Isi.....................................................................................................................................2
1 Pendahuluan.........................................................................................................................3
1.1 Tujuan Penulisan Dokumen...........................................................................................3
1.2 Lingkup Masalah...........................................................................................................3
1.3 Definisi dan Istilah.........................................................................................................3
1.4 Aturan Penamaan dan Penomoran.................................................................................3
1.5 Referensi........................................................................................................................3
2 Rancangan Lingkungan Implementasi.................................................................................4
3 Perancangan Data.................................................................................................................4
3.1 Daftar Tabel...................................................................................................................4
3.2 Struktur Tabel................................................................................................................5
3.3 Skema Relasi.................................................................................................................7
4 Perancangan arsitektural......................................................................................................8
4.1 Struktur Program yang diperoleh..................................................................................8
4.2 Dekomposisi Fungsional Modul....................................................................................8
5 Perancangan Antarmuka......................................................................................................9
5.1 Spesifikasi Antarmuka...................................................................................................9
6 Perancangan Prosedural.....................................................................................................20
7 Matriks Keterunutan...........................................................................................................23
1 Pendahuluan
1.1 Tujuan Penulisan Dokumen
Dokumen Deskripsi Perancangan Perangkat Lunak (DPPL) bertujuan untuk mendefinisikan perancangan
website LIFII yang akan dikembangkan. Dokumen DPPL tersebut digunakan oleh pengembang website sebagai
acuan untuk implementasi pada tahap selanjutnya
1.2 Lingkup Masalah

Membuat website tentang literasi finansial untuk membuat orang sadar bahwa literasi finansial penting untuk diri
masing-masing. Karena literasi finansial sangat dibutuhkan untuk meningkatkan kesejahteraan masyarakat.
Dengan tujuan :
● Memberikan Informasi kepada masyarakat mengenai pentingnya Literasi Finansial.
● Menyediakan fitur-fitur menarik yang bisa diakses user mengenai tata kelola keuangan.
1.3 Definisi dan Istilah

LIFII : singkatan dari ”Literasi Finansial Indonesia” yang merupakan nama website yang dibuat
SQL : bahasa query yang digunakan untuk mengambil informasi dari database
MySQL : perangkat lunak untuk manajemen database berbasis SQL
1.4 Aturan Penamaan dan Penomoran
DPPL.LIFII.xxx-y
DPPL : Nama Dokumen
LIFII : nama Aplikasi
Xxx : No Fungsi
Y : sub fungsi
Contoh
DPPL.LIFII.001 : Registrasi
DPPL.LIFII.002 : Login
DPPL.LIFII.003 : Mencari data
DPPL.LIFII.004 : Menampilkan informasi
1.5 Referensi
Dokumen SKPL tantang LIFII : Literasi Finansial Indonesia yang sudah dibuat sebelumnya
2 Rancangan Lingkungan Implementasi
No. Software Deskripsi Hardware Spesifikasi
1. Visual Studio Code Digunakan untuk Laptop OS : Windows
menuliskan code 10/11
RAM : 8GB
Storage: minimum
256GB (SSD)
Processor :
minimum
ryzen 3
3000 series
2. Chrome / Microsoft Untuk melihat web Mouse Tidak ada
Edge yang sedang spesifikasi
dikembangkan khusus, bisa
wireless
maupun wired
3. Github Untuk menyimpan
kodingan
4. Sourcetree Untuk melakukan
perintah github
lebih mudah
5. Draw.io Untuk membuat
ERD, class diagram
dan usecase
diagram
6. Gdocs Untuk Membuat
dokumen cloud
7. Libre Office Untuk membuat
penjadwalan,
ganchart
Basis data :
- Mysql : alasan memilih Mysql karena sudah cukup familiar dipakai oleh pengembang
- Phpmyadmin : adalah tools untuk mengakses Mysql sekaligus mengelola database Mysql. Tools ini
mudah untuk dioperasikan
Arsitektur Jaringan :
3 Perancangan Data
3.1 Daftar Tabel
NamaTabel Primary key Data Store Deskripsi isi

Tabel user id_user Db_lifii Tabel yang berisi tentang
informasi user yang
registrasi atau login ke
dalam sistem
NamaTabel Primary key Data Store Deskripsi isi
Tabel Informasi id_data Db_lifii Tabel Search_Bar : Tabel
yang berisi tentang data
pencarian, misal api yang
kita pakai untuk mencari
data
Tabel Search Bar id_infomasi Db_lifii Tabel yang berisi tentang

data informasi apa saja
yang tampil dalam
website LIFII
Tabel Reksadana id_reksadana Db_lifii Tabel yang berisi tentang
data reksadana, mulai
dari jenisnya sampai
return pendapatan dari
satu tahun dan tiga tahun
3.2 Struktur Tabel

Tabel User : Tabel yang berisi tentang informasi user yang registrasi atau login ke dalam sistem
Nama Field Deskripsi Tipe& length Boleh Default Keterangan
NULL
id_user Id user adalah data Varchar(10) NO 1 Primary key
yg berisi angka
increment
email_user email_user adalah Varchar(100) NO -

data yang berisi
email dari user
yang sudah
registrasi
Pasword_user Pasword_user Varchar(100) NO -
adalah data yang
berisi kombinasi
karakter dari akun
user
username Username adalah Varchar(100) NO -
data yang berisi
nama istilah yang
diinputkan user saat
registrasi
id_informasi Data yang berisi Varchar(10) 1 FK dari table
angka incement informasi
untuk membedakan
informasi satu
dengan yang
lainnya
id_data Id data adalah data Varchar(10) NO 1 FK dari table
yg berisi angka Search_bar
increment
Tabel Search_Bar : Tabel yang berisi tentang data pencarian, misal api yang kita pakai untuk mencari data
NULL
id_data Id data adalah data Varchar(10) NO 1 Primary key
yg berisi angka
increment
nama_data nama_data adalah Varchar(100) NO -
data yang berisi
nama-nama data
yang dicari di
searchbox
api api atau singkatan Varchar(100) NO -
dari application
programming
interface adalah
data yang berisi
semacam service
yang dipakai untuk
menjalankan search
bar
Tabel Informasi : Tabel yang berisi tentang data informasi apa saja yang tampil dalam website LIFII
NULL
id_infomasi Id informasi adalah Varchar(10) NO 1 Primary key
data yg berisi angka
increment
nama_informasi nama_informasi Varchar(100) NO -

adalah data yang
berisi nama atau
judul informasi
yang tampil di
website lifii
Tabel Reksadana : Tabel yang berisi tentang data reksadana, mulai dari jenisnya sampai return pendapatan dari
satu tahun dan tiga tahun
NULL
id_reksadana Id data adalah data Varchar(10) NO 1 Primary key
yg berisi angka
increment
nama_reksadana nama_reksadana Varchar(100) NO -

adalah data yang
berisi nama-nama
data reksadana
jenis_reksadana jenis_reksadana Varchar(100) NO -
adalah data yang
berisi jenis
reksadana seperti
Pasar Uang,
Obligasi, dan
Saham
return_1thn Data yang berisi Varchar(100) NO -
return reksadana
dalam satu tahun
misal 10%
return_3thn Data yang berisi Varchar(100) NO -
return reksadana
dalam satu tahun
misal 32%
id_infomasi Id informasi adalah Varchar(10) NO 1 FK dari table
data yg berisi angka informasi
increment
3.3 Skema Relasi
Tabel User
id_user email_user Pasword_user username id_informasi id_data
Tabel Search Bar

id_data nama_data api
Tabel Informasi
id_informasi nama_informasi
Tabel Reksadana
id_rekadana nama_reksadana jenis_ reksadana return_1thn return_3thn id_infomasi
4 Perancangan arsitektural
Perancangan arsitektur adalah untuk mengembangkan struktur program modular dan merepresentasikan
hubungan kontrol antar modul. Perancangan arsitektur juga membentuk struktur program dan struktur data
dengan menentukan antarmuka yang memungkinkan data mengalir melalui program. Alat pemodelan untuk
merancang arsitektur perangkat lunak menggunakan structure chart.
4.1 Struktur Program yang diperoleh
4.2 Dekomposisi Fungsional Modul
No DPPL Fungsi/proses Data Input Data Output Keterangan

DPPL.LIFII.001 Registrasi Username,email,passwor Tampila popup user
d sudah teregistrasi
DDPL.LIFII.002 Login email,password Validasi benar :
tampil halaman
utama
Validasi salah :
Tampil peringatan
DPPL.LIFII.003 Mencari data String Jika data ada :
menamilkan data
Jika data tidak ada :
Menampilkan pesan
“data tidak ada”
DPPL.LIFII.004 Menampilkan - Tampilan informasi
informasi (home, about,
(pages) contact dll)
5 Perancangan Antarmuka
5.1 Spesifikasi Antarmuka
Spesifikasi antarmuka LIFII merupakan suatu bentuk media komunikasi dari program yang akan dibuat untuk
kebutuhan interface dengan pemakai.
1. Login Form
a. Nama Pengguna : User

b. Nama Modul/Fungsi : Login
i. Data Input : Email & password
ii. Data Output : validasi benar 🡺 Halaman Beranda , validasi salah 🡺 pesan kesalahan
c. Deskripsi
Penjelasan objek yg diperlukan untuk layout fungsi login
komponen Layout Halaman login adalah sebagai berikut :
Nama Komponen Jumlah Komponen Keterangan

Header 2 Login & keterangan tidak
memiliki akun
Label 2 Yaitu : Email & Password
Textbox 2 Untuk isian Email & Password
Tombol 1 Tombol Login
Image 2 Background & kotak box putih
Link 1 Register Here
d. Spesifikasi Layar Utama
e. Spesifikasi Objek Pada Layar
Id_Obje Jenis Keterangan

k
Login Button Ketika di klik akan masuk ke validasi . jika validasi benar sistem akan menampilkan
halaman beranda , jika validasi salah sistem akan menampilkan warning (pesan email /
password salah ).
Register Link Ketika kita meng-klik “Register Here” kita akan menuju ke halaman form register ,
Here fungsinya jika kita tidak memiliki akun maka kita akan mengisi form register untuk
membuat sebuah akun untuk login.
f. Spesifikasi Layar Pesan
Ketika User salah memasukkan data seperti email dan password maka sistem akan merespond sebuah
pesan seperti gambar berikut :
Ketika User belum memasukkan data email dan password maka sistem akan merespond sebuah pesan
seperti gambar berikut :
1. Form Register

b. Nama Modul/Fungsi : Register
i. Data Input : Username, email, password, & confirm password
ii. Data Output : validasi benar 🡺 Halaman Login , validasi salah 🡺 pesan kesalahan
c. Deskripsi
Penjelasan objek yg diperlukan untuk layout fungsi register
komponen Layout Halaman register adalah sebagai berikut :

Header 2 Register & keterangan sudah
memiliki akun .
Label 4 Username, Email , Password ,
& Confirm Password
Textbox 4 Username, Email , Password ,
& Confirm Password
Tombol 1 Tombol Register
Image 2 Background & kotak box putih
Link 1 Login Here

k
Register Button Ketika di klik akan masuk ke validasi . jika validasi benar sistem akan menampilkan
halaman login , jika validasi salah sistem akan menampilkan warning.
Login Link Ketika kita meng-klik “Login Here” kita akan menuju ke halaman form login , fungsinya
Here jika kita sudah memiliki akun maka kita akan mengisi form login untuk memasuki halaman
beranda.
Ketika User sudah mendaftar dengan memasukkan data dengan benar maka sistem akan merespond
sebuah pesan seperti gambar berikut :
Ketika User belum memasukkan data email dan password maka sistem akan merespond sebuah pesan
1. Home

b. Nama Modul/Fungsi : Home
i. Data Input : Fitur Seacrh
ii. Data Output : Validasi benar 🡺 Informasi pencarian ditemukan(data tampil
iii. ). Validasi salah 🡺Data tidak ditemukan.
c. Deskripsi: Penjelasan objek yg diperlukan untuk layout fungsi Home komponen
Layout Halaman Home adalah sebagai berikut :

Header 3 Judul , Sub judul, & penjelasan
singkat
Label 2 Search & Email Address
Textbox 2 Search & Email Address
Tombol 2 Search & Email Address
Image 11 Logo , Background , & gambar
setiap sub judul
Link 5 Home, forecasting, app, about,
contact.

k
Search Button Ketika di klik akan masuk ke validasi . jika validasi benar sistem akan menampilkan
halaman/informasi yang dicari , jika validasi salah sistem akan menampilkan pesan
kesalahan(data tidak ditemukan).
Email Button Ketika kita meng-klik simbol kirim kita akan mengirimkan newsletter kepada email yang
Address diisikan, dimana nantinya email tersebut mendapatkan pemberitahuan mengenai
informasi/berita terbaru mengenai web LIFII.

Ketika User sudah mencari dengan memasukkan keyword dengan benar maka sistem akan merespond
Ketika User salah memasukkan keyword yang dicari maka sistem akan merespond sebuah pesan
2. Forecasting
b. Nama Modul/Fungsi : Forecasting
c. Deskripsi: Penjelasan objek yg diperlukan untuk layout fungsi Forecasting komponen
Layout Halaman Forecasting adalah sebagai berikut :

singkat
setiap sub judul
contact.


k
3. App

b. Nama Modul/Fungsi : App
c. Deskripsi: Penjelasan objek yg diperlukan untuk layout fungsi App komponen
Layout Halaman App adalah sebagai berikut :

singkat
setiap sub judul
contact.


k
4. About
c. Nama Pengguna : User

d. Nama Modul/Fungsi : About
c. Deskripsi: Penjelasan objek yg diperlukan untuk layout fungsi Abou tkomponen
Layout Halaman About adalah sebagai berikut :

singkat
Image 7 Logo , Background , gmbar sub
judul, & gmbar anggota
contact.

k
5. Contact
e. Nama Pengguna : User

f. Nama Modul/Fungsi : Contact
c. Deskripsi: Penjelasan objek yg diperlukan untuk layout fungsi Contact komponen
Layout Halaman Contact adalah sebagai berikut :

singkat
Label 4 Search, Your Name, Email
Address, & Message.
Textbox 4 Search, Your Name, Email
Address, & Message.
Tombol 2 Search & Send Massage
Image 3 Logo , Background , & maps.
contact, & maps.
\

k
Send Button Ketika User meng-klik “Send Message” maka pesan/masukkan dari user akan masuk ke
Message email sistem LIFII kami.
6 Perancangan Prosedural
1. Login
Kode Perancangan DPPL.LIFII.002
Input Text
Output Masuk Halaman Beranda
Initial State Menampilkan halaman menu utama
Final State Menampilkan halaman yang dituju
Pengguna User
Alur Proses Flowchart / activity diagram
Pseudocode / Algoritma Var Login

Input (Login)
Cek (Login)
Query Cek(Login)
If Query Cek(Keyword) != null
Menampilkan login
Query Info login
Else
Menampilkan Pesan :
“Login gagal”
Spesifikasi Query SELECT * FROM users WHERE email='$email'

AND password='$password'
2. Registrasi
Input Text
Output Membuat akun lifii
Initial State validasi benar masuk halaman login, validasi
salah sistem menunjukkan pesan
Final State Masuk kedalam halaman login
Pengguna User
Pseudocode / Algoritma Var Registrasi

Input (Registrasi)
Cek (Registrasi)
Query Cek(Registrasi)
If Query Cek(Text) != null

Menampilkan regitrasi
Query Info Registrasi
Else
Menampilkan Pesan :
“Registrasi gagal”
Spesifikasi Query SELECT * FROM users WHERE

email='$email'"
3. Mencari Data
Input keyword
Output Info Data
Initial State Menampilkan halaman pencarian
Final State Menampilkan Data yang dicari
Pengguna User
Pseudocode / Algoritma Var Mencari data

Input (Mencari data)
Cek (Mencari data)
Query Cek(Mencari data)
If Query Cek(Text) != null

Menampilkan mencari data
Query Info Mencari Data
Else
Menampilkan Pesan :
“ keyword gagal”
Spesifikasi Query select * from informasi where nama like '%".

$cari."%'"
4. Menampilkan informasi

Input klik
Output Informasi
Initial State Halaman Utama
Final State Menampilkan halaman page informasi
Pengguna User
Pseudocode / Algoritma Navbar:

link to"index.html" title=" HOME “
link to" app.html" title=" APP “
link to"about.html" title=" ABOUT “
Spesifikasi Query select * from informasi where nama like '%".

$cari."%'"
7 Matriks Keterunutan
No No SKPL Fungsionalitas DPPL
1 SKPL.LIFII.001 Registrasi akun DPPL.LIFII.001
2 SKPL.LIFII.002 Login akun DPPL.LIFII.002
3 SKPL.LIFII.003 Mencari data DPPL.LIFII.003
4 SKPL.LIFII.004 Menampilkan DPPL.LIFII.004
informasi

DPPL Kelompok 6

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

DPPL Kelompok 6

Diunggah oleh

Hak Cipta:

Format Tersedia

DOKUMEN PERANCANGAN PERANGKAT LUNAK

LIFII : Literasi Finansial Indonesia

Muhammad ilham Nugraha | J0303201062

Febrian Nur Hadi | J0303201028

Muhamad Haidar Mutawally | J0303202164

Mohammed Zidane | J0303201087

Program Studi Manajemen Informatika

1.2 Lingkup Masalah

1.3 Definisi dan Istilah

1.4 Aturan Penamaan dan Penomoran

NamaTabel Primary key Data Store Deskripsi isi

Tabel Search Bar id_infomasi Db_lifii Tabel yang berisi tentang

3.2 Struktur Tabel

email_user email_user adalah Varchar(100) NO -

nama_informasi nama_informasi Varchar(100) NO -

nama_reksadana nama_reksadana Varchar(100) NO -

3.3 Skema Relasi

Tabel Search Bar

4.1 Struktur Program yang diperoleh

4.2 Dekomposisi Fungsional Modul

No DPPL Fungsi/proses Data Input Data Output Keterangan

a. Nama Pengguna : User

Nama Komponen Jumlah Komponen Keterangan

d. Spesifikasi Layar Utama

e. Spesifikasi Objek Pada Layar

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

a. Nama Pengguna : User

Nama Komponen Jumlah Komponen Keterangan

e. Spesifikasi Objek Pada Layar

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

a. Nama Pengguna : User

Layout Halaman Home adalah sebagai berikut :

Nama Komponen Jumlah Komponen Keterangan

d. Spesifikasi Layar Utama

e. Spesifikasi Objek Pada Layar

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

Layout Halaman Forecasting adalah sebagai berikut :

Nama Komponen Jumlah Komponen Keterangan

d. Spesifikasi Layar Utama

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

a. Nama Pengguna : User

Layout Halaman App adalah sebagai berikut :

Nama Komponen Jumlah Komponen Keterangan

d. Spesifikasi Layar Utama

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

c. Nama Pengguna : User

Layout Halaman About adalah sebagai berikut :

Nama Komponen Jumlah Komponen Keterangan

d. Spesifikasi Layar Utama

e. Spesifikasi Objek Pada Layar

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan

e. Nama Pengguna : User

Layout Halaman Contact adalah sebagai berikut :

Nama Komponen Jumlah Komponen Keterangan

e. Spesifikasi Objek Pada Layar

Id_Obje Jenis Keterangan

f. Spesifikasi Layar Pesan