bab iii. perancangan sistem 3.1. rancangan...

10

BAB III.

PERANCANGAN SISTEM

3.1. Rancangan DFD

Diagram Arus Data dari Sistem Informasi

Perpustakaan terdiri dari :

a. Proses Update Berita dan Artikel

Proses ini meliputi penambahan, pengubahan dan

penghapusan berita dan artikel. Berita ini diperoleh

dari adanya informasi tentang sekolah yang baru

sedangkan Artikel ini diperoleh dari internet yang

berhubungan dengan siswa, guru, pelajaran.

Maintenance berita dan artikel dilakukan oleh admin.

b. Proses Update Pengumuman dan Materi

Proses ini meliputi penambahan, pengubahan dan

penghapusan pengumuman dan materi. Pengumuman

ini diperoleh dari kegiatan sekolah yang akan

dilaksanakan sedangkan Materi ini diperoleh dari guru

untuk mempermudah siswa belajar. Maintenance

pengumuman dan materi dilakukan oleh admin.

11

Sistem Informasi SMP N 1

AMbarawa Berbasis WEBAdminUser

Data Berita

Informasi Berita

Data Artikel

Data PengumumanData Materi

Informasi Artikel

Informasi Pengumuman

Informasi Materi

Informasi Berita

Informasi Artikel


Informasi Materi

Gambar 3.1 DFD tingkat 0 Sistem Informasi SMP N 1

Ambarawa

Dari gambar 3.1 terlihat bahwa administrator dapat

melalukan pengolahan data seperti mengolah berita,

artikel, pengumuman, dan materi. Sedangkan user hanya

memiliki akses untuk melihat berita, artikel,

pengumuman, dan mendownload materi terbaru.

12

Pengolahan

BeritaAdmin

Pengolahan

Materi

Pengolahan

Pengumuman

Pengolahan

Artikel

Login Admin

Username

Password

Tbl Admin

Username

Password Login Valid

Login Valid

User

Data Berita

Informasi Berita

Data Artikel

Informasi Artikel

Data Pengumuman


Data Materi

Informasi Materi

berita

artikel

pengumuman

Tbl_download

Meampilkan

informasi

Data Berita

Data Artikel

Data Pengumuman

Data Materi

Informasi Berita

Informasi Artikel


Informasi Materi

Gambar 3.2 DFD tingkat 1 Sistem Informasi SMP N 1

Admin memasukan data login kemudian sistem akan

mencocokan data tersebut dengan data di database. Jika

tidak cocok maka akan dikirimkan pesan bahwa data login

salah.

Admin yang memiliki data login yang valid akan

mendapat akses untuk mengolah data admin.

3.2 Sitemap

13

Gambar 3.3 Sitemap Sistem Informasi SMP N 1

3.3 Database

14

3.3.1 Tabel admin

Tabel 3.1 Tabel admin

Name Field Type Null

Id Int(11) No

Username Varchar(32) No

Password Varchar(32) No

Email Varchar(100) No

Role Varchar(32) No

Tanggal Date No

Nama_admin Varchar(100) No

Alamat Varchar(100) No

Notelp Varchar(32) No

jender Varchar(32) No

Keterangan:

- Tabel admin merupakan tabel untuk menampung data

admin.

3.3.2 Tabel berita

Tabel 3.2 Tabel berita


Idberita Int(11) No

Judul Varchar(100) No

15

Isi Text No

gambar Varchar(50) No

waktu Date No

Keterangan :

- Tabel berita merupakan tabel yang menampung data

berita yang akan ditampilkan.

3.3.3 Tabel artikel

Tabel 3.3 Tabel artikel


Idartikel Int(11) No


Isi Text No

Waktu Date No

Keterangan :

- Tabel artikel merupakan tabel yang menampung data

artikel yang akan ditampilkan.

3.3.4 Tabel pengumuman

Tabel 3.4 Tabel pengumuman


Idpengumuman Int(11) No

16


Isi Text No

Waktu Date No

Keterangan :

- Tabel pengumuman merupakan tabel yang menampung

data pengumuman yang akan ditampilkan.

3.3.5 Tabel download

Tabel 3.5 Tabel download


Idmateri Int(11) No

Namafile Varchar(100) No

Scr Varchar(100) No

Tanggal Date No

Keterangan :

- Tabel download merupakan tabel yang menampung

materi-materi pelajaran yang akan ditampilkan.

17

3.4 Perancangan Antarmuka

Perancangan antarmuka Sistem Informasi Perpustakaan

ini terdiri dari jenis yaitu website utamanya dan bagian admin.

Seperti digambarkan dibawah ini :

3.4.1 Perancangan Antarmuka Halaman Utama

silde

Images 2

Text area 1 Menu 1 Menu 2 Menu 3 Menu 4 Menu 5

Text berjalan

Text area 3

Images 1

Text area 4

Text area 2

Gambar 3.4 Design halaman utama Sistem Informasi SMP N 1

18

Keterangan:

- Pada bagian header halaman utama terdapat text area 1,

menu 1 link ke halaman home, menu 2 link ke halaman

profil, menu 3 link halaman berita dan artikel, menu 4 link

halaman pengumuman, menu 5 link ke menu halaman

kritik saran, dan slide picture.

- Pada bagian main column terdapat text berjalan dan text

area 3. Lalu pada bagian sidebar terdapat image

- Pada bagian footer terdapat image 2, text area 2, dan text

area 4.

19

3.4.2 Perancangan Antarmuka Halaman Profil Sekolah

slide


Text berjalan

images

Text area 2

Button 4

Button 3

Button 2

Button 1

A pharagraf of text

Gambar 3.5 Design halaman profil

Keterangan:






- Pada bagian main column terdapat text berjalan dan

image. Lalu pada bagian sidebar terdapat button 1 untuk

20

link ke halaman sejarah, button 2 untuk link ke halaman

visi misi, button 3 untuk link ke halaman fasilitas dan

ekstrakurikuler, dan button 4 untuk link ke halaman

prestasi.

- Pada bagian footer terdapat text area 2.

3.4.3 Perancangan Antarmuka Halaman Sejarah Sekolah

silde


Text berjalan

Text area 3

Text area 2image

Button 1

Text area 4 Text area 5

Gambar 3.6 Design halaman sejarah sekolah

Keterangan:



21




- Pada bagian main column terdapat text berjalan, image

dan text area 4. Lalu pada bagian sidebar terdapat text

area 5 dan button 1 untuk kembali ke halaman

sebelumnya.


3.4.4 Perancangan Antarmuka Halaman Visi dan Misi

slide


Text berjalan

Text area 3

Text area 2Image 1

Image 2

Button 1

Text area 4

Gambar 3.7 Design halaman visi misi sekolah

22

Keterangan:






- Pada bagian main column terdapat text berjalan, image 1,

text area 2, text area 4 dan button 1 untuk kembali ke

halaman sebelumnya. Lalu pada bagian sidebar terdapat

image 2.


3.4.5 Perancangan Antarmuka Halaman Prestasi Sekolah

slide

Text aera 1

Text berjalan

Text aera 3

Text aera 2image

Button 1

Menu 1 Menu 2 Menu 3 Menu 4 Menu 5

Tabel 1

23

Gambar 3.8 Design halaman prestasi sekolah

Keterangan:






- Pada bagian main column terdapat text berjalan, image,

text area 2, tabel 1dan button 1 untuk kembali ke menu

sebelumnya.


24

3.4.6 Perancangan Antarmuka Halaman Fasilitas dan

Ekstrakurikuler

Slide

Text aera 1 Menu 1 Menu 2 Menu 3 Menu 4 Menu 5

Text berjalan

Text aera 5

Text aera 2Images

Text aera 3

label 1

label 2

label 3

label 4

label 5

label 6

label 7

label 8

label 9

label 10

Text aera 4

label 1

label 2

label 3

label 4

label 5

label 6

label 7

label 8

label 9

label 10

label 11

label 12

Button 1

Gambar 3.9 Design halaman fasilitas dan ekstrakurikuler

Keterangan:




25



- Pada bagian main column terdapat text berjalan, image,

text area 2, text area 3, dan label 1 sampai label 10

menjelaskan tentang fasilitas sekolah. Lalu pada bagian

sidebar terdapat text area 4, label 1 sampai label 12

menjelaskan tentang ekstrakurikuler dan button 1 untuk

kembali ke menu sebelumnya.


3.4.7 Perancangan Antarmuka Halaman Berita dan Artikel

slide


Text berjalan

Text aera 12

Text aera 2Image 1

Text aera 3

Image 2

Text aera 4

Text aera 5

Image 3

Text aera 6

Text aera 7

Image 4

Text aera 8

Text aera 10

Text aera 11

Text aera 9Image 5

Button 1

Button 2

Button 3

Button 4

Gambar 3.10 Design halaman berita dan artikel

26

Keterangan:






- Pada bagian main column terdapat text berjalan, image 1

,image 2, image 3, image 4, text area 2, text area 3, text

area 4, text area 5, text area 6, text area 7, text area 8,

button 2,3,4 untuk ke halaman detail berita. Lalu pada

bagian sidebar terdapat image 5, text area 9, text area 10,

text area 11, dan button 1 untuk ke halaman detail artikel.


27

3.4.8 Perancangan Antarmuka Halaman Detail Berita

slide


Text berjalan

Text aera 3

Text aera 2Image 1

Button 1

Image 2

Text aera 3

Gambar 3.11 Design halaman detail berita

Keterangan:






28


text area 2,text area 3, image 2 dan button 1 untuk

kembali ke menu sebelumnya.


3.4.9 Perancangan Antarmuka Halaman Detail Artikel

slide


Text berjalan

Text aera 3

Text aera 2Image 1

Text area 4

Button 1

Gambar 3.12 Design halaman detail artikel

Keterangan:

29








menu sebelumnya.


30

3.4.10 Perancangan Antarmuka Halaman Pengumuman

slide


Text berjalan

Text aera 16

Text aera 2Image 1

Text aera 3

Text aera 4

Text aera 5

Text aera 6

Text aera 7

Text aera 8

Text aera 9Image 5

Button 2

Button 3

Button 4

Text aera 10

Text aera 11

Button 1

Text aera 12

Text aera 13

Button 5

Text aera 14

Text aera 15

Button 6

Gambar 3.13 Design halaman pengumuman

Keterangan:







text area 2, text area 3, text area 4, text area 5, text area

6, text area 7, text area 8, button 2, 3, 4 untuk ke halaman

31

detail pengumuman. Lalu pada bagian sidebar terdapat

image 2, text area 9, text area 10, text area 11, text area

12, text area 13, text area 14, text area 15, dan button 1,

5, 6 untuk tombol download materi.

- Pada bagian footer terdapat text area 16

3.4.11 Perancangan Antarmuka Halaman Detail Pengumuman

slide


Text berjalan

Text aera 3

Text aera 2Image 1

Text area 4

Button 1

Gambar 3.14 Design halaman detail pengumuman

Keterangan:

32








menu sebelumnya.


33

3.4.12 Perancangan Antarmuka Halaman Buku Tamu

slide

Text berjalan

Text aera 5

Text aera 2Mages

1

Label 2

Label 1

Label 3

Label 4

Text aera 3Images

2

Images

3Text aera 4

Label 1

Label 2

Label 3

Hyperlink 1 Button 1

Image 4

Label 5


Enter Text

Enter Text

Enter More Text

Enter Text

Enter Text

Label 4

Label 5

Label 6

Enter Text

Gambar 3.15 Design halaman buku tamu

Keterangan:






34


text area 2, label 1 untuk nama siswa, label 2 untuk

nomor induk siswa, label 3 untuk email, label 4 untuk

komentar, label 5 untuk captcha, textbox 1 untuk mengisi

nama, textbox 2 untuk mengisi nomor induk siswa,

textbox 3 untuk mengisi email, textbox 4 untuk mengisi

komentar, textbox 5 untuk mengisi captcha, image 4,

hyperlink 1 untuk ke halaman login admin, 1 button. Lalu

pada bagian sidebar terdapat image 2, text area 4, label 1

untuk nomor induk siswa, label 2 untuk email, label 3

untuk komentar, label 4 untuk tampil nomor induk siswa,

label 5 untuk tampil email, label 6 untuk tampil komentar.


35

3.4.13 Perancangan Antarmuka Halaman Login

slide

Text aera 1

Text berjalan

Text aera 3

Text aera 2Image 1

Label 2

Label 1

Button 1

image 2

Label 3Enter Text

Enter Text

Enter Text

Gambar 3.16 Design halaman login admin

Keterangan:

- Pada bagian header halaman utama terdapat text area 1

dan slide picture.


text area 2, label 1 untuk username, label 2 untuk

password, label 3 untuk captcha, textbox 1 untuk mengisi

36

username textbox 2 untuk mengisi password, textbox 3

untuk mengisi captcha, image 2, dan button 1 untuk login

ke halaman menu admin .


3.4.14 Perancangan Antarmuka Halaman Utama Admin

slide

Text aera 1 Menu 1 Menu 2 Menu 3 Menu 4

Text berjalan

Text aera 3

Text aera 2Image 1

Text area 4

Hyperlink 1

Gambar 3.17 Design halaman utama menu admin

Keterangan:

37

- Pada bagian header halaman utama terdapat text area1,

menu 1 untuk ke halaman beranda, menu 2 untuk ke

halaman input berita dan artikel, menu 3 untuk ke

halaman input pengumuman, menu 4 untuk ke halaman

buku tamu, dan slide picture.


text area 2, text area 4. Lalu pada bagian sidebar

terdapar hyperlink 1 untuk logout.


38

3.4.15 Perancangan Antarmuka Halaman Input Berita

Slide

Text area 1 Menu 1 Menu 2 Menu 3 Menu 4

Text area 6

Text area 2Image 1

Label 1

Label 2

Text area 4Image 3

Image 4

Text area 5

Hiperlink 1

Text area 3Image 2

Label 3

Text area 7

Button 2

Button 1

Buuton 3

Enter Text

Gambar 3.18 Design halaman input berita

Keterangan:






39

- Pada bagian main column terdapat image 1, text area 2,

label 1 untuk judul, label 2 untuk gambar, textbox 1 untuk

mengisi judul, button 1 untuk mencari gambar yang akan

ditampilkan di web, label 3 untuk nama gambar yang akan

di tampilkan, text box 1 untuk mengisi judul, text area 7,

button 2 untuk tombol simpan berita, button 3 untuk ke

halaman input artike. Lalu pada bagian sidebar terdapat

image 2, image 3, image 4, text area 3, text area 4, text

area 5 , hyperlink 1 untuk ke halaman detail berita.


40

3.4.16 Perancangan Antarmuka Halaman Detail Berita

Slide


Text aera 4

Text area 2Images

1

Images 2

Button 2Button 1 Button 3

Text area 3

Gambar 3.19 Design halaman detail berita

Keterangan:






41


text area 3, image 2, button 1 untuk mengubah berita,

button 2 untuk menghapus berita, button 3 untuk kembali

ke halaman sebelumnya.


3.4.17 Perancangan Antarmuka Halaman Edit Berita

Slide


Text area 3

Text area 2Images

1

Label 1

Label 2

Label 3

Label 4

Button 2

Enter Text

Buuton 1

Text area 7

Gambar 3.20 Design halaman edit berita

Keterangan:

42







label 1 untuk judul, label 2 untuk gambar, textbox 1 untuk

menampilkan dan mengubah judul, button 1 untuk

mencari gambar yang akan ditampilkan di web, label 3

untuk nama gambar yang akan di tampilkan, text box 1

untuk mengisi judul, text area 7, button 2 untuk tombol

simpan berita.


43

3.4.18 Perancangan Antarmuka Halaman Input Artikel

Slide

Txt area 1 Menu 1 Menu 2 Menu 3 Menu 4

Text area 6

Text area 2Image 1

Label 1Text area 4Image 3

Text area 5

Hiperlink 1

Text area 3Image 2

Text area 7

Button 1

Enter Text

Gambar 3.21 Design halaman input artikel

Keterangan:






44


label 1 untuk judul, textbox 1 mengisi judul, text area 7,

button 1 untuk tombol simpan artikel. Lalu pada bagian

sidebar terdapat image 2, image 3, text area 3, text area 4,

text area 5, hyperlink 1 untuk ke halaman detail artikel.


3.4.19 Perancangan Antarmuka Halaman Detail Artikel

Slide


Text area 3

Text area 2Image 1

Button 2Button 1 Button 3

Text area 4

Gambar 3.22 Design halaman detail artikel

45

Keterangan:







text area 4, button 1 untuk mengubah artikel, button 2

untuk menghapus artikel, dan button 3 untuk kembali ke

halaman sebelumnya.


46

3.4.20 Perancangan Antarmuka Halaman Edit Artikel

Slide

Text aera 1 Menu 1 Menu 2 Menu 3 Menu 4

Text aera 3

Text aera 2Image 1

Label 1

Text area 4

Button 1

Enter Text

Gambar 3.23 Design halaman edit artikel

Keterangan:






47


label 1 untuk judul, textbox 1 untuk menampilkan dan

mengedit judul, text area 4, dan button 1 untuk tombol

simpan artikel.


3.4.21 Perancangan Antarmuka Halaman Input Pengumuman

Slide


Text area 6

Text area 2Image 1

Label 1Text area 4Image 3

Text area 5

Hyperlink 1

Text area 3Image 2

Text area 7

Button 1

Buuton 2

Enter Text

Gambar 3.24 Design halaman input pengumuman

Keterangan:

48







label 1 untuk judul, textbox 1 mengisi judul, text area 7,

button 1 untuk tombol simpan pengumuman. Lalu pada

bagian sidebar terdapat image 2, image 3, text area 3, text

area 4, text area 5, hyperlink 1 untuk ke halaman detail

pengumuman.


49

3.4.22 Perancangan Antarmuka Halaman Detail

Pengumuman

Slide


Text area 3

Text area 2Image 1

Text area 4

Buuton 2Buuton 1 Button 3

Gambar 3.25 Design halaman detail pengumuman

Keterangan:




50




text area 4, button 1 untuk mengubah pengumuman,

button 2 untuk menghapus pengumuman, dan button 3

untuk kembali ke halaman sebelumnya.


3.4.23 Perancangan Antarmuka Halaman Edit Pengumuman

Slide


Text area 3

Text area 2Image 1

Label 1

Label 2 Text area 4

Button 1

Enter Text

Gambar 3.26 Design halaman edit pengumuman

51

Keterangan:







label 1 untuk judul, textbox 1 untuk menampilkan dan

mengedit judul, text area 4, dan button 1 untuk tombol

simpan pengumuman.


52

3.4.24 Perancangan Antarmuka Halaman Materi

Slide

Txt area 1 Menu 1 Menu 2 Menu 3 Menu 4

Text area 6

Text area 2Image 1

Label 1

Label 2

Text area 4Images

3

Text area 5

Text area 3Image 2

Label 3

Button 2

Button 1

Buuton 3

Enter Text

Gambar 3.27 Design halaman materi

Keterangan:






53


label 1 untuk judul, label 2 untuk file, button 1 untuk

mencari file yang akan ditampilkan, label 3 untuk nama

materi, dan button 2 untuk tombol simpan materi. Lalu

pada bagian sidebar terdapat image 2, text area 3, text

area 4, image 3, text area 4, text area 5, dan button 3

untuk ke halaman detail materi.


54

3.4.25 Perancangan Antarmuka Halaman Detail Materi

Slide


Text area 4

Text area 2Image 1

Text area 3

Buuton 2Button 1 Buuton 3

Gambar 3.28 Design halaman detail materi

Ketrangan:




55




text area 3, button 1 untuk mengubah materi, button 2

untuk menghapus materi, dan button 3 untuk kembali ke

halaman sebelumnya.


56

3.4.26 Perancangan Antarmuka Halaman Edit Materi

Slide


Text area 3

Text area 2Image 1

Label 1

Label 2 Label 3

Button 2

Enter Text

Buuton 1

Gambar 3.29 Design halaman edit materi

Keterangan:






57


label 1 untuk judul, label 2 untuk file, textbox 1 untuk

menampilkan dan mengubah judul, button 1 untuk

mencari file yang akan diganti, label 3 untuk

menampilkan nama file materi, button 2 untuk tombol

simpan materi.


3.4.27 Perancangan Antarmuka Halaman Buku Tamu

Slide


Text area 5

Text area 2Image 1

Text area 4Images

3

Text area 3Image 2

Label 1

Label 1

Label 2

Label 3

Buuton 1

Label 4

Label 5

Label 6

Text area 6

Gambar 3.30 Design halaman bukutamu

58

Keterangan:







label 1 untuk komentar, text area 6, button 1 untuk

simpan komentar. Lalu pada bagian sidebar terdapat

image 2, text area 3, text area 4, label 1 untuk nomor

induk siswa, label 2 untuk email, label 3 untuk komentar,

label 4 untuk tampil nomor induk siswa, label 5 untuk

tampil email, label 6 untuk tampil komentar.

- Pada bagian footer terapat text area 5

bab iii. perancangan sistem 3.1. rancangan...

Documents