13

BAB III. PERANCANGAN SISTEM

3.1 Data Flow Diagram

3.1.1 DFD Level 0

Sistem InformasiBimbingan Konseling

Admin Wali studi

Mahasiswa

Konselor

Validasi login

login

login

Validasi login

login

Validasi login

Validasi login

loginPendaftaran konseling

Data konseling

Data laporan konseling

Ubah data

Data konseling

Gambar 3.1.1 Data Flow Diagram Level 0 Sistem Informasi

Bimbingan dan Konseling FTI UKSW

14

3.1.2 DFD Level 1

Mahasiswa Pendaftaran Wali Study

Data konseling

Proses update data konselor

Proses update data mahasiswa

Proses update data wali

Data konselor

Data mahasiswa

AdminKonselor Proses konseling

Data konseling

Data wali studi

Daftar konseling Data konseling

Data konseling

Data konselorData mahasiswa

Data wali study

Gambar 3.1.2 Data Flow Diagram Level 1 Sistem Informasi

Bimbingan dan Konseling FTI UKSW

15

3.2 Jaringan Semantik Tampilan

3.2.1 Jaringan Semantik Tampilan User/ Mahasiswa

login

Dashboard mahasiswa

pendaftaran

notifikasi

loginLogout

Masuk pendaftaran

back

Daftarback

Keterangan :1. Login2. Dashborad Mahasiswa3. Pendaftaran Konseling4. Notifikasi Pendaftaran Konseling

Gambar 3.2.1 Jaringan Semantik Tampilan User/ Mahasiswa

3.3 Database

1. Tabel Daftar Konseling

Tabel 1.1 Tabel Daftar Konseling

Nama Field Type Null

id_daftar Int(12) No

tanggal Date No

nip_konselor Varchar(30) No

nim_mahasiswa Varchar(30) No

jam Varchar(30) No

Keterangan : tabel daftar konseling merupakan tabel yang

menampung data pendaftaran konseling mahasiswa.

16

2. Tabel Konselor

Tabel 1.2 Tabel Konselor

Nama Field Type Null

id_konselor Int(12) No

nip Int(12) No

nama Varchar(30) No

Keterangan : tabel konselor merupakan tabel yang

menampung data konselor.

3. Tabel Laporan Konseling

Tabel 1.3 Tabel Laporan Konseling

Nama Field Type Null

id_laporan Int(12) No

nip_konselor Varchar(30) No

nim_mahasiswa Varchar(30) No

nama_progdi Varchar(30) No

nama_mahasiswa Varchar(30) No

Nama_wali Varchar(30) No

masalah Varchar(120) No

Keterangan : tabel laporan konseling merupakan tabel yang

menampung laporan konseling mahasiswa.

17

4. Tabel Mahasiswa

Tabel 1.4 Tabel Mahasiswa

Nama Field Type Null

id_mahasiswa Int(12) No

nim Int(12) No

id_progdi Varchar(12) No

nama Varchar(30) No

Keterangan : tabel mahasiswa merupakan tabel yang

menampung data mahasiswa.

5. Tabel Progdi

Tabel 1.5 Tabel Progdi

Nama Field Type Null

id_mahasiswa Int(12) No

nim Int(12) No

id_progdi Varchar(12) No

nama Varchar(30) No

Keterangan : tabel progdi merupakan tabel yang menampung

data progdi.

18

6. Tabel Users

Tabel 1.6 Tabel Users

Nama Field Type Null

username Varchar(30) No

password Varchar(30) No

domain Varchar(30) No

Keterangan : tabel user merupakan tabel yang menampung

data user.

7. Tabel Wali Study

Tabel 1.7 Tabel Wali Study

Nama Field Type Null

id_wali Int(12) No

nip Int(12) No

id_progdi Varchar(12) No

nama Varchar(30) No

Keterangan : tabel wali study merupakan tabel yang

menampung data wali study.

19

3.4 Lembar Kerja Tampilan

3.4.1 Tampilan Login

Gambar 3.4.1 Design tampilan login

Keterangan :

- Pada bagian main menu terdapat text area yang berisi

nama fakultas, 2 textbox yaitu username dan

password .

- Button login ke tampilan menu utama bimbingan

konseling.

20

3.4.2 Tampilan Menu Utama Mahasiswa

Gambar 3.4.2 Design tampilan menu utama mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat text area dashboard

untuk kembali menu beranda.

- Pada main menu terdapat 3 text area yaitu bimbingan

konseling, dashboard, pendaftaran konseling dan 1

button masuk untuk pendaftaran konseling.

21

3.4.3 Tampilan Pendaftaran Konseling

Gambar 3.4.3 Design tampilan pendaftaran konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat text area dashboard

untuk kembali menu beranda.

- Pada main menu terdapat 5 label yaitu pendaftaran

konseling, nim, nama, tanggal konseling, konselor,

jam konseling, 1 text area yaitu bimbingan konseling,

2 button yaitu masuk untuk pendaftaran konseling

dan ulang untuk mengulangi pendaftaran.

22

3.4.4 Tampilan Ubah Password Mahasiswa

Gambar 3.4.4 Design tampilan ubah password mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat text area dashboard

untuk kembali menu beranda.

- Pada main menu terdapat 2 label yaitu password

lama, passoword baru, 2 textbox yaitu password lama,

password baru, 1 text area yaitu bimbingan konseling

dan 1 button yaitu ubah untuk mengganti password.

23

3.4.5 Tampilan Menu Utama Konselor

Gambar 3.4.5 Design tampilan menu utama konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 3 label yaitu dashboard,

lihat pendaftar, tambah data konseling, 1 text area

yaitu bimbingan konseling, 2 button yaitu untuk lihat

pendaftar dan untuk tambah data konseling.

24

3.4.6 Tampilan Konselor Lihat Data Pendaftar

Gambar 3.4.6 Design tampilan konselor lihat pendaftar

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 1 label yaitu data pendaftar,

1 text area yaitu bimbingan konseling, 1 tabel yaitu

untuk lihat pendaftar konseling.

25

3.4.7 Tampilan Konselor Tambah Data Konseling

Gambar 3.4.7 Design tampilan konselor tambah data

konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 7 label yaitu tambah data,

nip, nim, progdi, nama, wali studi, permasalahan, 1

text area yaitu bimbingan konseling, 6 textbox yaitu

nip, nim progdi, nama, wali studi, permasalahan, 2

26

button yaitu masuk untuk input data dan ulang untuk

mengulangi input data.

3.4.8 Tampilan Konselor Lihat Data Konseling

Gambar 3.4.8 Desain konselor lihat data konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 1 label yaitu data konseling,

1 text area yaitu bimbingan konseling, 1 tabel untuk

melihat laporan, 1 button untuk menambah data

konseling, 2 icon untuk hapus data dan edit data.

27

3.4.9 Tampilan Konselor Edit Data Konseling

Gambar 3.4.9 Desain konselor edit data konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 7 label yaitu edit data, nip,

nim progdi, nama, wali studi, permasalahan, 1 text

area yaitu bimbingan konseling, 6 textbox yaitu nip,

nim progdi, nama, wali studi, permasalahan, 2 button

yaitu simpan untuk menyimpan data dan ulang untuk

mengulangi input data.

28

3.4.10 Tampilan Konselor Hapus Data Konseling

Gambar 3.4.10 Desain konselor hapus data konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 1 label yaitu data konseling,

1 text area yaitu bimbingan konseling, 1 tabel untuk

melihat laporan, 1 button untuk menambah data

konseling, 2 icon untuk hapus data dan edit data.

29

3.4.11 Tampilan Ubah Password Konselor

Gambar 3.4.11 Desain ubah password konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 2 text area yaitu

dashboard untuk kembali menu beranda dan data

konseling untuk melihat laporan konseling.

- Pada main menu terdapat 2 label yaitu password

lama, passoword baru, 2 textbox yaitu password lama,

passoword baru, 1 text area yaitu bimbingan

konseling dan 1 button yaitu ubah untuk mengganti

password.

30

3.4.12 Tampilan Menu Utama Admin

Gambar 3.4.12 Desain menu utama admin

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke halaman mahasiswa, wali study untuk

link ke halaman wali study dan konselor untuk link ke

halaman konselor

- Pada main menu terdapat 4 label yaitu dashboard,

tambah data mahasiswa, tambah data wali study,

tambah data konselor, 1 text area yaitu bimbingan

konseling, 3 button untuk link ke halaman

mahasiswa, wali study dan konselor.

31

3.4.13 Tampilan Admin Tambah Data Mahasiswa

Gambar 3.4.13 Desain admin tambah data mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 6 label yaitu tambah data

mahasiswa, nim, progdi, nama, username, password,

1 text area yaitu bimbingan konseling, 5 textbox yaitu

nim, progdi, nama, username, password, 2 button

yaitu tambah untuk input data dan ulang untuk

mengulangi input data.

32

3.4.14 Tampilan Admin Lihat Data Mahasiswa

Gambar 3.4.14 Desain admin lihat data mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data

mahasiswa, 1 text area yaitu bimbingan konseling, 1

tabel untuk melihat data mahasiswa, 1 button untuk

menambah data mahasiswa, 2 icon untuk hapus data

dan edit data.

33

3.4.15 Tampilan Admin Edit Data Mahasiswa

Gambar 3.4.15 Desain admin edit data mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 6 label yaitu edit data

mahasiswa, nim, progdi, nama, username, password,

1 text area yaitu bimbingan konseling, 5 textbox yaitu

nim, progdi, nama, username, password, 2 button

yaitu simpan untuk simpan data dan ulang untuk

mengulangi input data.

34

3.4.16 Tampilan Admin Hapus Data Mahasiswa

Gambar 3.4.16 Desain admin hapus data mahasiswa

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data

mahasiswa, 1 text area yaitu bimbingan konseling, 1

tabel untuk melihat laporan, 1 button untuk

menambah data mahasiswa, 2 icon untuk hapus data

dan edit data.

35

3.4.17 Tampilan Admin Tambah Data Wali Study

Gambar 3.4.17 Desain admin tambah data wali study

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 6 label yaitu tambah data

wali study, nip, progdi, nama, username, password, 1

text area yaitu bimbingan konseling, 5 textbox yaitu

nip, progdi, nama, username, password, 2 button yaitu

tambah untuk simpan data dan ulang untuk

mengulangi input data.

36

3.4.18 Tampilan Admin Lihat Data Wali Study

Gambar 3.4.18 Desain admin lihat data wali study

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data wali

study, 1 text area yaitu bimbingan konseling, 1 tabel

untuk melihat data wali study, 1 button untuk

menambah data wali study, 2 icon untuk hapus data

dan edit data.

37

3.4.19 Tampilan Admin Edit Data Wali Study

Gambar 3.4.19 Desain admin edit data wali study

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 6 label yaitu edit data wali

study, nip, progdi, nama, username, password, 1 text

area yaitu bimbingan konseling, 5 textbox yaitu nip,

progdi, nama, username, password, 2 button yaitu

simpan untuk simpan data dan ulang untuk

mengulangi input data.

38

3.4.20 Tampilan Admin Hapus Data Wali Study

Gambar 3.4.20 Desain admin hapus data wali study

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data wali

study, 1 text area yaitu bimbingan konseling, 1 tabel

untuk melihat data wali study, 1 button untuk

menambah data wali study, 2 icon untuk hapus data

dan edit data.

39

3.4.21 Tampilan Admin Tambah Data Konselor

Gambar 3.4.21 Desain admin tambah data konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 5 label yaitu tambah data

konselor, nip, nama, username, password, 1 text area

yaitu bimbingan konseling, 5 textbox yaitu nip, nama,

username, password, 2 button yaitu tambah untuk

simpan data dan ulang untuk mengulangi input data.

40

3.4.22 Tampilan Admin Lihat Data Konselor

Gambar 3.4.22 Desain admin lihat data konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data konselor,

1 text area yaitu bimbingan konseling, 1 tabel untuk

melihat data konselor, 1 button untuk menambah data

konselor, 2 icon untuk hapus data dan edit data.

41

3.4.23 Tampilan Admin Edit Data Konselor

Gambar 3.4.23 Desain admin edit data konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 6 label yaitu edit data wali

study, nip, progdi, nama, username, password, 1 text

area yaitu bimbingan konseling, 5 textbox yaitu nip,

progdi, nama, username, password, 2 button yaitu

simpan untuk simpan data dan ulang untuk

mengulangi input data.

42

3.4.24 Tampilan Admin Hapus Data Konselor

Gambar 3.4.24 Desain admin hapus data konselor

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 1 label yaitu data konselor,

1 text area yaitu bimbingan konseling, 1 tabel untuk

melihat data konselor, 1 button untuk menambah data

konselor, 2 icon untuk hapus data dan edit data.

43

3.4.25 Tampilan Ubah Password Admin

Gambar 3.4.25 Desain ubah password admin

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 4 text area yaitu

dashboard untuk kembali menu beranda, mahasiswa

untuk link ke data mahasiswa, wali study untuk link

ke data wali study, dan konselor untuk link ke data

konselor.

- Pada main menu terdapat 2 label yaitu password

lama, passoword baru, 2 textbox yaitu password lama,

passoword baru, 1 text area yaitu bimbingan

konseling dan 1 button yaitu ubah untuk mengganti

password.

44

3.4.26 Tampilan Menu Utama Wali study

Gambar 3.4.26 Design tampilan menu utama wali study

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat text area dashboard

untuk kembali menu beranda.

- Pada main menu terdapat 3 text area yaitu bimbingan

konseling, dashboard, pendaftaran konseling dan 1

button masuk untuk melihat laporan konseling.

45

3.4.27 Tampilan Wali Lihat Data Konseling

Gambar 3.4.27 Design tampilan wali lihat data konseling

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 1 text area yaitu

dashboard untuk kembali menu beranda.

- Pada main menu terdapat 1 label yaitu data pendaftar,

1 text area yaitu bimbingan konseling, 1 tabel untuk

melihat laporan konseling.

46

3.4.28 Tampilan Ubah Password Wali Study

Gambar 3.4.28 Desain ubah password wali

Keterangan :

- Pada bagian header terdapat 2 text area yaitu FTI

UKSW dan logout untuk keluar.

- Pada bagian sidebar kiri terdapat 1 text area yaitu

dashboard untuk kembali menu beranda.

- Pada main menu terdapat 2 label yaitu password

lama, passoword baru, 2 textbox yaitu password lama,

passoword baru, 1 text area yaitu bimbingan

konseling dan 1 button yaitu ubah untuk mengganti

password.