T0 562011004 BAB III

BAB III
PERANCANGAN SISTEM

3.1. Data Flow Diagram
3.1.1. DFD Level 0

Customer / Pengunjung

Admin

2

3

1

4

Sistem website PLN

Title

Data yang mengalir dari atau ke customer/pengunjung
1. Data identitas Customer
2. Token pembelian listrik pintar
Data yang mengalir dari atau ke admin
3. Informasi di dalam website
4. Username dan Password

Gambar 3.1. DFD Level 0

12

3.1.2. DFD Level 1
Customer / Pengunjung

Admin

1
2
1

Proses pembelian pulsa listrik pintar
7

Kirim data

3
4

2

Proses Maintenace
5

6
Data customer yg
membeli

Update data

Title

Aliran Data No 1- 4 sama dengan penjelasan di DFD Konteks
Sedangkan aliran data ke Penyimpanan/Storage sesuai label nomor di atas adalah sebagai
berikut:
5. Data customer masuk
6. Update data
7. kirim data

Gambar 3.2. DFD Level 1

13

3.2. Flowchart Sistem
3.2.1. Customer

Gambar 3.3. Flowchart Customer

14

3.2.2. Admin

Gambar 3.4. Flowchart Admin
15

3.3. Lembar Kerja Tampilan (LKT)
3.3.1. Halaman Home
No sheet : 1
Home
LOGO

Pelangg
an

Tentang
kami

KIP

Google search
Log in
admin,user

regoster

Banner

PB

PD

Title
- klik home ke tampilan home
- klik pelanggan ke tampilan pelanggan
- klik tentang kami ke tampilan tentang kami
- klik KIP ke tampilan KIP
- klik agenda ke tampilan agenda
- klik PB ke tampilan PB
- klik PD ke tampilan PD
- klik PS ke tampilan PS
- klik listrik pintar ke tampilan listrik pintar
- klik FB ke tampilan FB
- klik TW ke tampilan TW

- klik RSS ke tampilan RSS
- klik user ke tampilan login user
- klik register ke tampilan register
- klik log in admin ke tampilan admin

PS

Agenda
Listrik pintar

Footer
FB

TW

RSS

Title
- menggunakan font arial

Gambar 3.5. LKT Home

16

3.3.2. Halaman Pelanggan
No sheet : 2
Home
LOGO

Pelangg
an

Tentang
kami

KIP

Google search
Log in
admin,user

regoster

Banner

Title
- klik simpan aktifkan penyimpanan berkas dan
Kembali ke tampilan no 1
- klik home ke tampilan home
- klik pelanggan ke tampilan pelanggan
- klik tentang kami ke tampilan tentang kami
- klik KIP ke tampilan KIP
- klik FB ke tampilan FB
- klik TW ke tampilan TW
- klik RSS ke tampilan RSS
- klik user ke tampilan login user
- klik register ke tampilan register
- klik log in admin ke tampilan admin

Kepada pelanggan yang terhormat silahkan melakukan pembelian pulsa listrik
dengan ketentuan di bawah ini, isi semua data yang ada di form pembelian agar

dapat mempermudah pemrosesan data. Pembelian ini berlaku hanya pada
pelanggan yang berbasis pulsa atau listrik pintar.
Silahakan isi data di bawah ini dengan benar!!!
Nama lengkap
Alamat

Nomor rekening

Nominal
Simpan

Footer
FB

TW

RSS

Title
- menggunakan font arial

Gambar 3.6. LKT Pelanggan

17

3.3.3. Halaman Tentang Kami
No sheet : 3
Home
LOGO

Pelangg
an

Tentang
kami

Banner

KIP

Google search
Log in
admin,user
regoster

Title
- klik home ke tampilan home
- klik pelanggan ke tampilan pelanggan
- klik tentang kami ke tampilan tentang kami
- klik KIP ke tampilan KIP
- klik FB ke tampilan FB
- klik TW ke tampilan TW
- klik RSS ke tampilan RSS
- klik user ke tampilan login user
- klik register ke tampilan register
- klik log in admin ke tampilan admin

Tentang kami

Footer
FB

TW

RSS

Title
- menggunakan font arial

Gambar 3.7. LKT Tentang Kami

18

3.3.4. Halaman KIP
No sheet : 4
Home
LOGO

Pelangg
an

Tentang
kami

KIP

Google search
Log in
admin,user
regoster

Banner

Title
- klik home ke tampilan home
- klik pelanggan ke tampilan pelanggan
- klik tentang kami ke tampilan tentang kami
- klik KIP ke tampilan KIP
- klik FB ke tampilan FB
- klik TW ke tampilan TW
- klik RSS ke tampilan RSS
- klik user ke tampilan login user
- klik register ke tampilan register
- klik log in admin ke tampilan admin

KIP

Footer
FB

TW

RSS

Title
- menggunakan font arial

Gambar 3.8. LKT KIP

19

3.3.5. Halaman Admin
No sheet : 5
Log out
Dasboard

Artciles

Buy

About

Title
- klik Dasboard ke tampilan dasboard
- klik articles ke tampilan articles
- klik buy ke tampilan buy
- klik about ke tampilan about
- klik log out ke tampilan no 1

Admin

Title
- menggunakan font arial

Gambar 3.9. LKT Admin

20

3.3.6. Halaman Articles
No sheet : 6
Log out
Dasboard

Artciles

Buy

ID

About

Title
- klik Dasboard ke tampilan dasboard
- klik articles ke tampilan articles
- klik buy ke tampilan buy
- klik about ke tampilan about
- klik log out ke tampilan no 1
- klik tambah mengaktifkan penambahan ke database

waktu

Judul

Isi1

Isi2

tambah

Title
- menggunakan font arial

Gambar 3.10. LKT Articles

21

3.3.7. Halaman Buy
No sheet : 7
Log out
Dasboard

Artciles

Buy

About

Title
- klik Dasboard ke tampilan dasboard
- klik articles ke tampilan articles
- klik buy ke tampilan buy
- klik about ke tampilan about
- klik log out ke tampilan no 1

Data pembeli

Title
- menggunakan font arial

Gambar 3.11. LKT Buy

22

3.3.8. Halaman About
No sheet : 8
Log out
Dasboard

Artciles

Buy

About

Title
- klik Dasboard ke tampilan dasboard
- klik articles ke tampilan articles
- klik buy ke tampilan buy
- klik about ke tampilan about
- klik log out ke tampilan no 1

Data infomarsi perusahaan

Title
- menggunakan font arial

Gambar 3.12. LKT About

23

3.3.9. Halaman Login Admin
No sheet : 9

Title
- klik back kembali ke tampilan no 1

User name : ______
Password : _____
back

Title
- menggunakan font arial

Gambar 3.13. LKT Login Admin

24

3.3.10. Halaman Login User
No sheet : 10

Title
- klik back kembali ke tampilan no 1

No Rekening : ______
Password : _____
back

Title
- menggunakan font arial

Gambar 3.14. LKT Login User

25

3.3.11. Halaman Pendaftaran
No sheet : 11
Home
LOGO

Pelangg
an

Tentang
kami

Banner

KIP

Google search
Log in
admin,user
regoster

Title
- klik simpan aktifkan penyimpanan berkas dan
Kembali ke tampilan no 1
- klik home ke tampilan home
- klik pelanggan ke tampilan pelanggan
- klik tentang kami ke tampilan tentang kami
- klik KIP ke tampilan KIP
- klik FB ke tampilan FB
- klik TW ke tampilan TW
- klik RSS ke tampilan RSS
- klik user ke tampilan login user
- klik register ke tampilan register
- klik log in admin ke tampilan admin

FORM PENDAFTARAN
Nama lengkap
Password
Rentry Password
Alamat
Nomor HP
Nomor Rekening
Pembelian awal saldo
Daftar sekarang

Footer
FB

TW

RSS

Title
- menggunakan font arial

Gambar 3.15. LKT Form Pendaftaran

26

3.4 JST
3.4.1 Customer

Gambar 3.16. JST Customer

Ket :


Line merah : Dari menu Home, dapat mengakses page Pelanggan,
KIP, Tentang kami, PD, PB dan PS dengan klik mouse.

27



Line biru tua : Dari menu Tentang kami, dapat mengakses page
Home ,KIP dan Pelanggan dengan klik mouse.



Line Kuning : Dari menu Pelanggan, dapat mengakses page Home
,Kip dan Tentang kami, dengan klik mouse.



Line Ungu : Dari menu PD, dapat mengakses page Home ,PB dan
PS, dengan klik mouse.



Line Abu-abu : Dari menu PB, dapat mengakses page Home ,PD dan
PS, dengan klik mouse.



Line Biru Muda : Dari menu PS, dapat mengakses page Home ,PD
dan PB, dengan klik mouse.

28

3.4.2. Admin

Gambar 3.17. JST Admin
Ket :


Line merah : Dari menu Dashboard, dapat mengakses page Articles,
Buy dan About dengan klik mouse.



Line biru : Dari menu Articles, dapat mengakses page Dashboard
,Buy dan About dengan klik mouse.



Line hijau : Dari menu Buy, dapat mengakses page Articles ,About
dan Dashboard, dengan klik mouse.

29