T0__BAB III Institutional Repository | Satya Wacana Christian University: Perancangan dan Implementasi Sistem Informasi Bimbingan dan Konseling FTI UKSW Berbasis Website T0 BAB III

BAB III. PERANCANGAN SISTEM

3.1 Data Flow Diagram
3.1.1

DFD Level 0
Data konseling
Validasi login

Admin

Wali studi

Validasi login

login

Ubah data
login

login

Sistem Informasi
Bimbingan Konseling

Data konseling
Validasi login

Mahasiswa

Validasi login
login
Pendaftaran konseling

Konselor
Data laporan konseling

Gambar 3.1.1 Data Flow Diagram Level 0 Sistem Informasi
Bimbingan dan Konseling FTI UKSW

13

14

3.1.2

DFD Level 1
Data konseling

Mahasiswa

Daftar konseling

Pendaftaran

Data konseling

Proses update
data konselor

Data konselor

Proses update
data mahasiswa

Data mahasiswa

Data mahasiswa

Data wali studi

Wali Study

Data konselor

Proses update
data wali

Data wali study

Konselor

Data konseling

Proses konseling

Admin

Data konseling

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

Keterangan :
1. Login
2. Dashborad
Mahasiswa
3. Pendaftaran
Konseling
4. Notifikasi
Pendaftaran
Konseling

notifikasi

Logout
login

Daftar
back

Masuk pendaftaran

Dashboard
mahasiswa

pendaftaran
back

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

mahasiswa, wali study dan konselor.

ke

halaman

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

mengulangi input data.

data dan

ulang untuk

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

mengulangi input data.

data

dan

ulang untuk

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

mengulangi input data.

data

dan

ulang untuk

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.