PERANCANGAN SISTEM USULAN - repository.bsi.ac.id · PERANCANGAN SISTEM USULAN 4.1 Tahap Perancangan...

33

BAB IV

PERANCANGAN SISTEM USULAN

4.1 Tahap Perancangan Sistem

4.1.1 Analisis Kebutuhan

Sistem informasi yang dibuat berfungsi sebagai media informasi bagi orang

tua siswa agar lebih mudah dalam memonitoring nilai akademik siswa . istem

informasi ini juga dapat memberikan saran komunikasi antara orang tua siswa dan

wali kelas. Orang tua atau wali kelas dapat mengakses web ini dengan NomorInduk

Peserta Didik(NIPD) Siswa. Selain itu, sistem informsi ini diharapkan mampu

mempermudah bagian admin dalam membuat laporan. Dari hasil permasalahan di

atas, maka kebutuhan siswa yang dibutuhkan untuk membangun aplikasi Monitoring

akademikpada Yayasan Pendidikan Miftahussalamah antara lain:

A. Kebutuhan Pengguna

Dalam perancangan sistem monitoring akademik siswa berbasis web terdapat dua

pengguna yang dapat saling berinteraksi dalam lingkungan system, yaitu: admin dan

orang tua siswa. Kedua pengguna tersebut memiliki karakteristik interaksi dengan

system yang berbeda-beda, seperti berikut :

1. Skenario Kebutuhan Admin

a) login

b) Manipulasi Data Siswa

c) Manipulasi Data Nilai

d) Manipulasi Data kelas

33

34

e) Manipulasi Data Guru

2. Skenario Kebutuhan Orang Tua Siswa

a) Login

b) Lihat Data Siswa

c) Lihat Data Nilai

d) Lihat Data Kelas

e) Lihat Data Guru

B. Kebutuhan Sistem

1. Pengguna harus melakukan login terlebih dahulu untik dapat

mengaksesaplikasi dengan memasukan username dan passsword agar privasi

masing-masingpengguna tetap terjaga keamanannya.

2. Pengguna harus melakukan logut setelah selesai menggunakan aplikasi.

35

4.1.2 Rancangan Diagram Use Case

GAMBAR IV.1

Diagram Use case

GAMBAR IV.1 Diagram Use case

4.1.3 RANCANGAN DIAGRAM AKTIVITAS

Activity Diagram atau Diagram aktivitas adalah bentuk visual dari alur

kerja yang berisi aktivitas dan tindakan, yang juga dapat berisi pilihan, atau

pengulangan. Dalam Unified Modeling Language(UML), diagram aktivitas

dibuat untuk menjelaskan aktivitas komputer maupun alur aktivitas dalam

organisasi. Selain itu diagram aktivitas juga menggambarkan alur kontrol secara

garis besar.

login

Manipulasi Data

Siswa

Manipulasi Data

Nilai

ManipulasiData

Kelas

Manipulasi Data

guru

Admin Orang tua

Siswa

Manipulasi Data

Siswa

Login

Logout

Lihat Data

Siswa

LIhat Data

Nilai

LIhat Data

Kelas

Lihat Data

Guru

<<Include>>

<<Include>>

<<Include>>

<<Include>>

36

Diagram aktivitas memiliki komponen dengan bentuk tertentu,

dihubungan dengan tanda panah. Panah tersebut mengarahkan urutan aktivitas

yang terjadi, dari awal sampai akhir. Yang perlu diperhatikan yaitu diagram

aktivitas bukan menggambarkan aktivitas sistem yang dilakukan aktor, tetapi

menggambarkan aktivitas yang dapat dilakukan oleh system. Berikut ini adalah

rancangan diagram aktivitas pada Sistem monitoring siswa Yayasan

Miftahussalamah.

a. Diagram Aktivitas Data Siswa

SISTEM ORANG TUA SISWAADMIN

Rekap data Siswa

Menerima data siswa

Input data siswa ke sistem

Lihat data siswa

Gambar IV.2 Diagram Aktivitas Data Siswa

b. Diagram Aktivitas Data Nilai

ADMIN SISTEM ORANG TUA SISWA

Rekap nilai Nilai

Menerima rekap nilai

Input data nilai sistem

Lihat data nilai

Gambar IV.3 Diagram Aktivitas Data Nilai

37

c. Diagram Aktivitas Data PTK


Rekap data PTK

Menerima data PTK

Input data PTK ke sistem

Lihat data PTK

Gambar IV.4 Diagram Aktivitas Data PTK

d. Diagram Aktivitas Data Kelas


Rekap data Kelas

Menerima data Kelas

Input data Kelas ke sistem

Lihat data Kelas

Gambar IV.5 Diagram Aktivitas Data Kelas

4.1.4 RANCANGAN DOKUMEN SISTEM USULAN

Berdasarkan sistem yang sedang berjalan di Yayasan Miftahussalamah,

maka penulis bermaksud membuat suatu sistem usulan yang dapat

memperbaiki dan mempermudah dalam proses monitoring siswa. Adapun

sistem yang perlu diusulkan berdasarkan dokumen yang ada adalah sebagai

berikut;

38

a. Login

Admin maupun user login pada aplikasi yang sudah tersedia pada

jaringan internet berbasis web, pada login ini hak akses antara admin dan

user berbeda.

b. Penginputan data

Admin yang sebelumnya menerima data-data siswa, PTK, kelas, Nilai

dan mata pelajaran selanjutnya menginput data tersebut ke system.

c. Monitoring

User atau orang tua siswa bias melakukan monitoring secara online

pada web yang tersedia, user atau orang tua siswa hanya bias melihat data-

data tanpa bisa mengubahnya.

4.1.5 RANCANGAN PROTOTYPE

Prototype Model adalah salah satu metode pengembangan perangkat

lunak yang banyak digunakan. Dengan metode prototyping ini

pengembangan dan pengguna saling berinteraksi selama proses pembuatan

system. Berikut ini adalah rancangan prototype pada system monitoring siswa

pada Yayasan Miftahussalamah.

39

1. Rancangan prototype

a. Perancangan antar muka Login

Username

Password

Login Cancel

GAMBAR IV.6 Perancangan antar muka Login

b. Perancangan antar muka Home

EEEEEEEEEEEEEEEEEEEEEEEEEEE

YAYASAN PENDIDIKAN MIFTAHUSSALAMAH

Home Data MapelData KelasData Siswa Data PTK

Logo

Login

FOTO YAYASAN

Data Nilai

Gambar IV.7 Perancangan antar muka Home

40

c. Perancangan antar muka data nilai

YAYASAN PENDIDIKAN MIFTAHUSSALAMAHLogo

Logout

ID Nilai NIPD ID Mapel Tugas UTS UASUHSemester

Home Data MapelData KelasData Siswa Data PTK Data Nilai

DATA NILAI

KODE USER : NAMA USER :

GAMBAR IV.8 Perancangan antar data nilai

d. Perancangan antar muka data PTK


Logout

NUPTK Nama Jeis Kelamin Status ID KelasTugas

tambahanTanggal Lahir


DATA PTK


GAMBAR IV.9 Perancangan antar muka data PTK

41

e. Perancangan antar muka data siswa


Logout

NIPD NISN Nama Tanggal lahir Nama ibuNama ayahTempat lahir


DATA SISWA


agama TeleponAlamat

GAMBAR IV.10 Perancangan antar muka data siswa

f. Perancangan antar muka data kelas


Logout

ID Kelas Kelas Nama kelas Tahun ajaran


DATA KELAS


GAMBAR IV.11 Perancangan antar muka data kelas

42

g. Perancangan antar muka home admin

EEEEEEEEEEEEEEEEEEEEEEEEEEE


EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE


Logo

FOTO YAYASAN

Data Nilai

Logout

KODE Admin : NAMA Admin :

GAMBAR IV.12 Perancangan antar muka Home Admin

h. Perancangan antar muka tampil data PTK


Logout

NUPTK Nama Jeis Kelamin Status ID KelasTugas

tambahanTanggal Lahir


DATA PTK


GAMBAR IV.13 Perancangan antar muka tampil data PTK

43

i. Perancangan antar muka input data PTK



Logo

Logout

Data Nilai

NUPTK

ID Kelas

Nama

Jenis Kelamin

Tugas tambahan

---PILIH JK---

TAMBAH DATA PTK

DATA PTK

Logout


GAMBAR IV.14 Perancangan antar muka input data guru

j. Perancangan antar muka tampil data siswa


Logout

NIPD NISN Nama Tanggal lahir Nama ibuNama ayahTempat lahir


DATA SISWA


agama TeleponAlamat

GAMBAR IV.15 Perancangan antar muka tampil data siswa

44

k. Perancangan antar muka input data siswa



Logo

Data Nilai

NIPD

Tanggal Lahir

NISN

Nama Siswa

Tempat Lahir

TAMBAH DATA SISWA

DATA SISWA

Logout


Agama --PILIH AGAMA--

Telepon

Nama Ayah

Nama Ibu

Alamat

GAMBAR IV.16 Perancangan antar muka input data siswa

l. Perancangan antar muka tampil data kelas


Logout

ID Kelas Kelas Nama kelas Tahun ajaran


DATA KELAS


GAMBAR IV.17 Perancangan antar muka tampil data kelas

45

m. Perancangan antar muka input data kelas



Logo

Data Nilai

ID Kelas

Kelas

Nama Kelas

Tahun Ajaran

---PILIH KELAS---

---PILIH NAMA KELAS---

TAMBAH DATA KELAS

DATA KELAS

Logout


GAMBAR IV.18 Perancangan antar muka input data kelas

n. Perancangan antar muka tampil data mapel


Logout

ID MAPEL Nama Mata Pelajaran KKM


DATA MATA PELAJARAN


GAMBAR IV.19 Perancangan antar muka tampil data mapel

46

o. Perancangan antar muka Input data mapel



Logo

Data Nilai

ID mapel

Nama mapel

KKM

TAMBAH DATA MAPEL

DATA MATA PELAJARAN

Logout


GAMBAR IV.20 Perancangan antar muka input data mapel

p. Perancangan antar muka tampil data nilai


Logout

ID Nilai NIPD ID Mapel Tugas UTS UASUHSemester


DATA NILAI

KODE ADMIN : NAMA ADMIN :

GAMBAR IV.21 Perancangan antar muka tampil data nilai

47

q. Perancangan antar muka input data nilai



Logo

Logout

Data Nilai

ID Nilai

Tugas

UH

UTS

UAS

NIPD

ID Mapel

Semester

---PILIH NIPD---

---PILIH ID MAPEL---

---PILIH SEMESTER---

TAMBAH DATA NILAI

DATA NILAI

Logout

KODE ADMIN : NAMA ADMIN :

GAMBAR IV.22 Perancangan antar muka input data nilai

2. Implementasi Web

a. Implementasi antar muka Login

GAMBAR IV.23 Implementasi antar muka Login

48

b. Implementasi antar muka Home

GAMBAR IV.24 Implementasi antar muka Home

c. Implementasi antar muka data nilai

GAMBAR IV.25 Implementasi antar muka data nilai

49

d. Implementasi antar muka data PTK

GAMBAR IV.26 Implementasi antar muka data PTK

e. Implementasi antar muka data siswa

GAMBAR IV.27 Implementasi antar muka data siswa

50

f. Implementasi antar muka data kelas

GAMBAR IV.28 Implementasi antar muka data kelas

g. Implementasi antar muka home admin

GAMBAR IV.29 Implementasi antar muka home admin

51

h. Implementasi antar muka tampil data PTK

GAMBAR IV.30 Implementasi antar muka tampil data PTK

i. Implementasi antar muka input data PTK

GAMBAR IV.31 Implementasi antar muka input data PTK

52

j. Implementasi antar muka tampil data siswa

GAMBAR IV.32 Implementasi antar muka tampil data siswa

k. Implementasi antar muka input data siswa

GAMBAR IV.33 Implementasi antar muka input data siswa

53

l. Implementasi antar muka tampil data kelas

GAMBAR IV.34 Implementasi antar muka tampil data kelas

m. Implementasi antar muka input data kelas

GAMBAR IV.35 Implementasi antar muka input data kelas

54

n. Implementasi antar muka tampil data mapel

GAMBAR IV.36 Implementasi antar muka data mapel

o. Implementasi antar muka Input data mapel

GAMBAR IV.37 Implementasi antar muka Input data mapel

55

p. Implementasi antar muka tampil data nilai

GAMBAR IV.38 Implementasi antar muka tampil data nilai

q. Implementasi antar muka input data nilai

GAMBAR IV.39 Implementasi antar muka input data nilai

56

4.2 PERANCANGAN PERANGKAT LUNAK

4.2.1 ENTITY RELATIONSHIP DIAGRAM

SISWA

NIPD

tugastambahan

status

tgllahir

jeniskelamin

NUPTK

nama

idkelas

idkelas

kelas

namakelas

tahunajaran

telepon

alamat

namaibu

namaayah

agama

tgllahir

tempatlahir

jeniskelamin

Namasiswa

NISN

KELAS

PTK

UAS

UTS

UH

tugas

semester

idnilai

NILAI

MATA

PELAJARAN

KKM

namamapel

idmapel

Mempunyai

Mempunyai

mempunyai

MempunyaiM

M

1

1

1

1

1 1

idmapel

NIPD

GAMBAR IV.40 ERD (Entity Relationship Diagram)

57

4.2.2 LOGICAL RECORD STRUCTURE

Idkelas*

nama

NUPTK

jeniskelamin

tgllahir

status

tugastambahan

PTK

Idmapel*

Namamapel

KKM

MATA

PELAJARAN

Idnilai*

Semester

tugas

UH

UTS

UAS

NIPD**

Idmapel**

NILAI

NIPD*

NISN

Namasiswa

jeniskelamin

tempatlahir

tgllahir

agama

namaayah

namaibu

alamat

telepon

SISWA

Idkelas*

Nama

Namakelas

tahunajaran

KELASM

M

1

1

1

1

1

GAMBAR IV.41 LRS (Logical Record Structur)

58

4.2.3 SPESIFIKASI FILE

a. Spesifikasi File Siswa

Nama File : siswa

Akronim : siswa

Fungsi : untuk menyimpan data siswa

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 480 karakter

Kunci File : NIPD

Software : Mysql

Tabel IV.1 Spesifikasi File Siswa

No Elemen Data Nama Field Tipe Size Keterangan

1. NIPD nipd Int 5 Primary Key

2. NISN Nisn Int 5

3. Nama Siswa nama varchar 20

4. Tempat Lahir tempatlahir varchar 10

5. Tanggal Lahir tanggallahir Date

7. Agama agama varchar 10

59

8. Nama Ayah nmayah varchar 20

9. Nama Ibu nmibu varchar 20

10. Alamat almt varchar 30

11. Telepon Telp Int 12

b. Spesifikasi File Kelas

Nama File : Kelas

Akronim : kelas

Fungsi : untuk menyimpan data kelas



Akses File : Random

Media : Harddisk


Kunci File : idkelas

Software : Mysql

Tabel IV.2 Spesifikasi File kelas


60

1. Idkelas Idkelas varchar 5 Primary Key

2. Kelas Kelas int 2

3. Nama Kelas namakelas varchar 2

4. Tahun Ajaran tahunajaran varchar 15

c. Spesifikasi File Nilai

Nama File : Nilai

Akronim : Nilai

Fungsi : Untuk menyimpan data nilai

Tipe File : File MAster


Akses File :Random

Media : Harddisk

Panjang record : 45 karakter

Kunci Nilai : Idnilai

Software : Mysql

Tabel IV.3 Spesifikasi File nilai


1. Idnilai Idkelas varchar 5 Primary Key

2. NIPD Kelas Int 5 Foreign Key

61

4. Idmapel Idmapel varchar 5 Foreign Key

5. Semester Semester Int 11

6. Tugas Tugas Int 11

7. UH Uh Int 11

8. UTS Uts Int 11

9. UAS Uas Int 11

d. Spesifikasi File Mata Pelajaran

Nama File : mapel

Akronim : mapel

Fungsi : untuk menyimpan data mata pelajaran



Akses File : Random

Media : Harddisk


Kunci File : idmapel

Software : Mysql

Tabel IV.4 Spesifikasi File mapel


62

1. Idmapel idmapel varchar 5 Primary Key

2. Nmmapel nama varchar 20

3. KKM Kkm Int 11

e. Spesifikasi File PTK

Nama File : PTK

Akronim : PTK

Fungsi : Untuk menyimpan data kependidikan

Tipe File : File MAster


Akses File :Random

Media : Harddisk

Panjang record : 257 karakter

Kunci Nilai : Idnilai

Software : Mysql

63

Tabel IV.5 Spesifikasi File ptk


1 NUPTK NUPTK Int 10 Primary Key

Nama PTK Nama Varchar 25

2

3 Jenis Kelamin Jnskelamin varchar 9

4 Tanggal Lahir Tgllahir Date

5 Status Status varchar 16

6 Tugas Tambahan tgs_tambahan varchar 16

7 Photo Photo Varchar 100

64

4.2.4 CLASS MODEL/CLASS DIAGRAM

Login

+add()

+edit()

+Id PTK

+Nama

+Nuptk

+jenis kelamin

+tanggal lahir

+satus

+tugas tambahan

PTK

+NIPD

+NISN

+Nama Siswa

+Tempat Tgl lahir

+Alamat

+No telp

+nama ayah

+nama ibu

+agama

+Add()

+edit()

+Id Nilai

+semester

+Tugas

+UH

+UTS

+UAS

Nilai

+Username

+Password

Siswa

+Add()

+edit()

+Add()

+edit()

+ID mapel

+mapel

+kkm

Mapel

+Add()

+edit()

Admin

+Input data siswa()

+Input data PTK()

+Input data Nilai()

+Username

+Password

User

+Lihat data siswa()

+Lihat data PTK()

+Lihat data Nilai()

+Username

+Password

GAMBAR IV.42 Class Diagram

65

4.2.5 SEQUENCE DIAGRAM

a. Sequence Diagram Penambahan Data siswa

v

Gambar IV.43 Sequence Diagram Penambahan Data siswa

14. Set Nama siswa()

2.tampilkan form data siswa()

11.Input form tambah data siswa()

12.Set NIPD siswa()

19. Set No telp siswa()

siswa

13. Set NISN siswa()

15. Set Jenis Kelamin siswa()

16. Set Tempat tgl lahir siswa()

17. Set Alamat siswa()

18. Set ayah ibu siswa siswa()

10.Input No telp siswa()

siswa

4.Input NISN siswa()

5.Input Nama siswa()

6.Input Jenis Kelamin siswa()

7.Input Tempat tanggal lahir siswa()

8.Input Alamat siswa()

9.Input Nama ayah ibu siswa()

siswa

3.Input NIPD siswa()

1.Pilih data siswa()

<<Aktor>>

Admin

<<Boundary>>

Menu Utama

<< Boundary >>

Input data siswa

<< Boundary >>

Proses penambahan data

<< Boundary >>

Data siswa

66

b. Sequence Diagram Penambahan Data Nilai

Gambar IV.44 Sequence Diagram Penambahan Data Nilai

9.Input form tambah data Nilai()

10.Set ID Nilai()

15. Set UAS()

14. Set UTS()

13. Set UH()

1.Tampilkan data Nilai()

4.Input Semester()

6.Input UH()

3.Input ID Nilai()

5.Input Tugas()

7.Input UTS()

8.Input UAS()

1.Pilih data Nilai()

11. Set Semester()

12. Set Tugas()

<<Aktor>>

Admin

<<Boundary>>

Menu Utama

<< Boundary >>

Input data Nilai

<< Boundary >>

Proses penambahan data

<< Boundary >>

Data Nilai

67

c. Sequence Diagram Penambahan Data PTK

Gambar IV.45 Sequence Diagram Penambahan Data PTK

17.set tugas tmbhn

13. Set NUPTK()

12. Set nama()

16. Set status()

15. Set TGL lahir()

14. Set JK()

10.Input form tambah data PTK() 9.Input tugas tambahan()

11.Set ID PTK()

3.Input ID PTK()

8.Input status()

4.Input Nama()

7.Input JK()

2.Tampilkan data PTK()

5.Input NUPTK()

7.Input Tgl lahir()

<<Aktor>>

Admin

<<Boundary>>

Menu Utama

<< Boundary >>

Input data PTK

<< Boundary >>

Proses penambahan PTK

<< Boundary >>

Data PTK

1.Pilih data PTK()

68

d. Sequence Diagram Penambahan Data Kelas

Gambar IV.46 Sequence Diagram Penambahan Data Kelas

6.Input tahun ajaran()

9. Set Kelas()

10. Set nama kelas()

11. Set tahun ajaran()

8.Set ID Kelas()

4.Input kelas()

2.Tampilkan data Kelas()

7.Input form tambah data Kelas()

5.Input Nama kelas()

3.Input ID Kelas()

<<Aktor>>

Admin

<<Boundary>>

Menu Utama

<< Boundary >>

Input data Kelas

<< Boundary >>

Proses penambahan Kelas

<< Boundary >>

Data Kelas

1.Pilih data Kelas()

69

e. Sequence Diagram Penambahan Data Mapel

Gambar IV.47 Sequence Diagram Penambahan Data Mapel

4.Input Nama mapel()

8. Set nama mapel()

9. Set KKM()

7.Set ID mapel()

2.Tampilkan data mapel()

6.Input form tambah data mapel()

5.Input KKM()

<<Aktor>>

Admin

<<Boundary>>

Menu Utama

<< Boundary >>

Input data Mata pelajaran

<< Boundary >>

Proses penambahan mapel

<< Boundary >>

Data mapel

3.Input ID mapel()

1.Pilih data mapel()

70

4.2.6 SPESIFIKASI HARDWARE DAN SOFTWARE

a. Perangkat Keras

Perangkat keras (hardware) adalah seluruh komponen yang membentuk

suatu sistem komputer dan peralatan lainnya yang minimum dan

memungkinkan komputer dapat melaksankan tugasnya. Klasifikasi perangkat

keras yang diusulkan adalah sebagai berikut :

Monitor : CTR / RCT / LCD 16’’

Proccessor : Intel DualCore

Memory : 512 MB

Harddisk : 80 GB(IDE/SATA)

Floppy Disk : 3,5” (1,44 MB)

Keyboard : QWERTY Port Ps/2 atau USB

Printer : Inject

Mouse : Port Ps/2 atau USB

f. Perangkat Lunak

Bagian penting lain yang mendukung program adalah perangkat lunak

(software) yang digunakan dalam mengeksekusi program aplikasi serta sistem

operasi yang akan digunkan untuk menjalankan program tersebut.

Perangkat lunak yang dibutuhkn untuk menjalankan aplikasi program

penerimaan siswa baru ini adalah :

Sistem operasi : Microsoft Windows Xp x86 ,

Windows 7 x86 atau Windows 10 x86

Bahasa pemrograman : Web Programming

Program atau software pendukung : MySql PhpMyAdmin & Adobe Dreamweaver

71

4.3 JADWAL IMPLEMENTASI

No KEGIATAN

WAKTU

BULAN 1 BULAN 2 BULAN 3

1 2 3 4 1 2 3 4 1 2 3 4

1 Persiapan awal

2 Analisa

3 Desain Sistem

4 Desain perangkat lunak

5 Pembuatan program

6 Tes Program

7 Tes Sistem

8 Pelatihan

9 Evaluasi & operasional

Tabel IV.6 Jadwal Implemantasi

PERANCANGAN SISTEM USULAN - repository.bsi.ac.id · PERANCANGAN SISTEM USULAN 4.1 Tahap Perancangan...

Documents

Transcript of PERANCANGAN SISTEM USULAN - repository.bsi.ac.id · PERANCANGAN SISTEM USULAN 4.1 Tahap Perancangan...