kemudahan bagi para siswa, guru, maupun wali siswa dalam memperoleh informasi yang dibutuhkan serta dapat membantu sekolah dalam mempromosikan
sekolahnya.
4.3 Perancangan Data Flow Diagram DFD
Data Flow Diagram DFD merupakan diagram yang menggunakan notasi-notasi simbol-simbol untuk menggambarkan arus dari data sistem. DFD sering digunakan
untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data
tersebut mengalir. Gambaran ini tidak tergantung pada perangkat keras, lunak, struktur data atau organisasi. Adapun Data Flow Diagram yang penulis ajukan, yaitu:
Sejarah Pengumuman
Galery Photo Visi dan Misi
Contact Us Struktur Organisasi
Gambar 4.1 Diagram Konteks
Pengumuman
Sejarah
Desain Sistem Informasi SMA
Negeri 4 Padangsidimpuan
Galeri Photo Visi dan Misi
Identitas Sekolah
Kepala Sekolah Contact Us
Universitas Sumatera Utara
Sekilas Pengumuman
Galleri Photo Visi dan Misi
Struktur Organisasi Contact Us
Gambar 4.2 Diagram Konteks Level 0 Nol
Pengumuman
Sejarah
Desain Sistem Informasi SMA
Negeri 4 Padangsidimpuan
Galleri Photo Visi dan Misi
Struktur Organisasi
Kepala Sekolah Pembuatan
Laporan Contact US
Universitas Sumatera Utara
4.4 Perancangan Flowchart
Tahap selanjutnya adalah tahap pembuatan flowchart diagram alir atau aliran informasi dari situs tersebut. Flowchart atau diagram alir adalah gambaran yang
menampilkan struktur, hierarki, dan isi halaman per halaman. Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman
situs tersebut. Dengan pembuatan flowchart dalam suatu situs dapat membantu mempermudah dalam pemeliharaan dan pembaharuan isi situs. Hal ini sangat penting
dilakukan karena isi situs harus selalu diperbaharui sehingga pengunjung tidak bosan.
Penjelasan arti lambang-lambang flowchart dapat didefenisikan seperti berikut:
Simbol Fungsi
Terminator, untuk memulai dan mengakhiri suatu program.
Process, suatu simbol yang menunjukkan setiap pengolahan yang dilakukan oleh komputer.
Data, untuk
memasukkan data
maupun menunjukkan hasil dari suatu proses.
Decision, suatu kondisi yang akan menghasilkan beberapa kemungkinan jawaban atau pilihan.
Preparation, suatu simbol yang menyediakan tempat-tempat pengolahan data dalam storage.
Connector, merupakan simbol untuk masuk dan keluarnya suatu prosedur pada lembar kertas yang
sama.
Off-Page Connector, merupakan simbol untuk masuk dan keluarnya suatu prosedur pada lembar
kertas yang lain.
Arus atau flow, prosedur yang dapat dilakukan dari atas ke bawah, bawah ke atas, dari kiri ke kanan,
atau dari kanan ke kiri.
Document, merupakan simbol untuk data yang berbentuk informasi.
Predefined process, untuk menyatakan sekumpulan langkah proses yang ditulis sebagai prosedur.
Display, untuk output yang ditujukan suatu device, seperti monitor.
Magnetic Disk, untuk menyimpan data.
Universitas Sumatera Utara
Berikut adalah flowchart dari sistem informasi SMA Negeri 4 Padangsidimpuan yang penulis rancang :
Gambar 4.3 Aliran Informasi rancangan situs
Login Admin Index Halaman
Utama
Kesiswaan
Kepala Sekolah
Struktur Organisasi
Guru
Profil Fasilitas
Personalia
Sejarah Visi Misi
Identitas Sekolah
Perpustakaan
Mushalla Laboratorium
Siswa Osis
Tata Tertib Siswa
Prestasi
Bimbingan Konseling
Roster Pelajaran
Universitas Sumatera Utara
1. Flow Chart Halaman Utama
Start Profil Sekolah
Sejarah Visi dan Misi
Identitas Sekolah
Tampil Sejarah
Tampil Visi dan Misi
Tampil Identitas
Fasilita SMA Perpustakaan
Laboratorium Mushola
Tampil Perpustaka
an Tampil
Laboraturiu m
Tampil Mushola
Personalia Stuktur
Organisasi Kepala
Sekolah Guru
Siswa Tampil
Sruktur Tampil
Kepala sekolah
Tampil Guru
Tampil siswa
Kalender Akademik
Galeri Contact Us
Keluar Stop
Pengumuman Terbaru
Tampil Pengumum
an Tampil
kalender Tampil
Galeri Tampil Form
Input Kontak Tampil
Form Input Kontak
Y Y
Y T
T T
Y Y
Y T
Y T
T Y
Y
T T
Y Y
T Y
T Y
T
Y Y
Y Y
Y T
T T
T
Gambar 4.4 Flowchart Halaman Utama
Universitas Sumatera Utara
2. Flowchart halaman login administrator
B
Start
Homepage
Manage Kepala
Sekolah
Manage Guru
Manage Pengumuman
Manage Artikel
Manage Kontak
Keluar Tampil
Hompage
C
D
E
F
G
Log Out Prosedur Log
Out X
Y Y
T Y
T Y
T Y
T Y
T Y
T Y
Y
Gambar 4.5 Flowchart halaman Login Administrator
Universitas Sumatera Utara
3. Flowchart Manage Kepala Sekolah
C
Tampil Data Kepsek
Tampil Data Kepsek
Tambah data Kepsek
Tampil Form Tambah data
Kepsek Tampil
Form Tambah
data Kepsek
Tambah data Kepsek
Tambah? Database
C1 Edit Data
Kepsek Tampil form
Edit Data Kepsek
Tampil Form Edit
Data Kepsek
Edit Data Kepsek Edit?
Database
C2
Hapus Data Kepsek
Hapus data Kepsekk
Hapus Data Kepsek?
Database C3
Keluar
Ci T
Y Y
Y Y
T Y
Y Y
y Y
Y T
T T
Y
Y Y
Y Y
Y Y
Gambar 4.6 Flowchart Manage Kepala Sekolah
Universitas Sumatera Utara
4. Flowchart Manage Guru
D
Tampil Data Guru
Tampil Data Guru
Tambah data Guru
Tampil Form Tambah data
Guru Tampil
Form Tambah
data Guru Tambah data
Guru Tambah?
Database D1
Edit Data Guru Tampil form
Edit Data Guru Tampil
Form Edit Data Guru
Edit Data Guru Edit?
Database
D2
Hapus Data Guru
Hapus data Guru Hapus Data
Guru? Database
D3
Keluar
D1 T
Y Y
Y Y
T Y
Y Y
y Y
Y T
T T
Y
Y Y
Y Y
Y Y
Gambar 4.7 Flowchart Manage Guru
Universitas Sumatera Utara
5. Flowchart Manage Pengumuman Terbaru
E
TampilPengum uman
Tampil Pengumum
an TambahPengu
muman Tampil Form
Tambah Pengumuman
Tampil Form
Tambah Pengumuna
n TambahPengumu
man Tambah?
Database E1
Edit Pengumuman
Tampil form Pengumuman
Tampil Form
Pengumum an
Edit Pengumuman Edit?
Database
E2
Hapus pengumuman
HapusPengumum an
HapusPengum uman
Database E3
Keluar
E1 T
Y Y
Y Y
T Y
Y Y
y Y
Y T
T T
Y
Y Y
Y Y
Y Y
Gambar 4.8 Flowchart Manage Pengumuman Terbaru
Universitas Sumatera Utara
6. Flowchart Manage Artikel
F
TampilArtikel Tampil
Artikel
Tambah Artikel Tampil Form
Tambah Artikel Tampil
Form Tambah
Artikelk Tambah Artikel
Tambah? Database
F1 Edit Artikel
Tampil form Edit Artikel
Tampil Form Artikel
Edit Artikel Edit?
Database
F2
Hapus Artikel Hapus Artikel
Hapus Artikel Database
F3
Keluar
F1i T
Y Y
Y Y
T Y
Y Y
y Y
Y T
T T
Y
Y Y
Y Y
Y Y
Gambar 4.9 Flowchart Manage Artikel 4.5 Mempersiapkan
Database Server
Pada tahapan ini dipersiapkan tempat untuk menampung data di server, data tersebut nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik
penambahan, pengeditan, panghapusan dan menampilkan isi database ke halaman
Universitas Sumatera Utara
website . Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program
MySQL .
Adapun database yang dibuat oleh penulis adalah database dbsma dengan tabel-tabel sebagai berikut:
Tabel 4.1 Admin
Nama Field Type
Size Keterangan
username Varchar
45 primary key
password Varchar
20
Tabel 4.2 Artikel
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Judul Varchar
100 Gambar
Varchar 100
Isi Text
link Varchar
50 Urutan
Integer 10
`
Tabel 4.3 Calender
Nama Field Type
Size Keterangan
Id Integer
5 primary key
Judul Varchar
30 Gambar
Varchar 30
Tabel 4.4 Contact
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Nama Varchar
30 Email
Varchar 30
Pesan Text
Tabel 4.5 DBGuru
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Gambar Varchar
100 Link
Varchar 100
Nama Varchar
100 Nip
Varchar 100
Ttl Varchar
100
Universitas Sumatera Utara
Jk Varchar
20 Agama
Varchar 20
Pendidikan Varchar
10 Jabatan
Varchar 100
gol Varchar
10 gaji
Varchar 100
mulai date
Tabel 4.6 DBSiswa
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Nis Integer
10 Nama
Varchar 20
Jk Text
10 Kelas
Varchar 10
Password Varchar
10
Tabel 4.7 Fasilitas
Nama Field Type
Size Keterangan
Id Integer
10 primary key
nama Varchar
50 link
Varchar 50
Static_content Text
Gambar Varchar
100 Publish
Enum‘Y’, ‘N’ 10
Status Enum‘user’, ‘dmin’
Aktif Enum‘Y’, ‘N’
Urutan Integer
5
Tabel 4.8 Gallery
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Nama Varchar
10 Gambar
Varchar 10
Urutan Integer
10
Tabel 4.9 Kesiswaan
Nama Field Type
Size Keterangan
Id Integer
10 primary key
nama Varchar
50 link
Varchar 50
Static_content Text
Gambar Varchar
100 Publish
Enum‘Y’, ‘N’ 10
Status Enum‘user’, ‘dmin’
Universitas Sumatera Utara
Aktif Enum‘Y’, ‘N’
Urutan Integer
5
Tabel 4.10 Pengumuman
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Judul Varchar
100 Gambar
Varchar 100
Isi Text
link Varchar
50 Urutan
Integer 10
`
Tabel 4.11 Personalia
Nama Field Type
Size Keterangan
Id Integer
10 primary key
Nama Varchar
10 Link
Varchar 50
Gambar Varchar
10 Urutan
Integer 10
Tabel 4.12 Profil
Nama Field Type
Size Keterangan
Id Integer
10 primary key
nama Varchar
50 link
Varchar 50
Static_content Text
Gambar Varchar
100 Publish
Enum‘Y’, ‘N’ 10
Status Enum‘user’, ‘dmin’
Aktif Enum‘Y’, ‘N’
Urutan Integer
5
4.6 Perancangan Halaman Website
