4.4 Perancangan Diagram Alir
flowchart
Website
Diagram alir
flowchart
ini menjelaskan secara rinci langkah-langkah dari proses program.
Flowchart
dibuat dengan menggunakan simbol-simbol tertentu yang menyatakan setiap langkah program. Berikut ini adalah bentuk-bentuk
flowchart
dari
website
SMA SWASTA HARAPAN 2 MEDAN.
4.4.1
Flowchart
Menu Utama
Seorang pengunjung
website
dapat mengakses
website
SMA SWASTA HARAPAN 2 MEDAN dan dapat berpindah dari halaman yang satu ke halaman yang lainnya. Masing-
masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung.
Flowchart
menu utama dapat dilihat pada gambar 4.3 di bawah ini :
Universitas Sumatera Utara
START Tampilan Menu
Home
Profil
Guru dan Siswa
Alumni
Galery
Admin
Keluar Pilih link yang ada
Pilih link yang ada
Pilih link yang ada
Pilih link yang ada
Pilih link yang ada
Prosedur Login
END A
C Ya
Ya
Ya
Ya
Ya
Ya
Ya Tidak
Tidak
Tidak
Tidak
Tidak
Tidak Tidak
B
Gambar 4.3 Flowchart Menu Utama
4.4.2
Flowchart
Admin
Halaman admin hanya bisa diakses oleh administrator.
Username
dan
password
dari administrator harus sesuai dengan tabel admin. Jika
username
dan
password
sesuai maka admin akan masuk ke halaman administrator dan jika
username
atau
password
salah maka akan timbul pesan error dan diminta untuk login kembali.
Flowchart
admin dapat dilihat pada gambar 4.5 di bawah ini.
Universitas Sumatera Utara
C Buka Halaman Admin
Input username password
Cek Username password
Username password salah
Tampil Menu Admin
Halaman Data Siswa
Halaman Data Guru
Logout E
Tampil Halaman Siswa
Tampil Halaman Guru F
G Ya
Ya
Ya
Ya Tidak
Tidak
Tidak Tidak
Gambar 4.4
Flowchart
Admin
4.4.3
Flowchart
Administrator Siswa
Universitas Sumatera Utara
F
Halaman Admin siswa
Input Siswa Baru
Edit Data Siswa
Logout Form Input Siswa
Edit Hapus
Form Edit
Update
Simpan Data
Data Tersimpan Data Sudah
Dihapus Simpan
Simpan Data
Data Tersimpan
E Ya
Ya
Ya Ya
Ya
Ya Ya
Tidak
Tidak Tidak
Tidak Tidak
Tidak
Gambar 4.5
Flowchart
Admin Siswa
4.4.4
Flowchart
Admin Guru
Universitas Sumatera Utara
G Halaman Admin Guru
Input Guru Baru
Edit Data Guru
Logout Form Input Guru
Edit Hapus
Form Edit Update
Simpan Data
Data Tersimpan Data Sudah
Dihapus Simpan
Simpan Data
Data Tersimpan E
Ya
Ya Ya
Ya Tidak
Tidak Tidak
Tidak Tidak
Ya Ya
Tidak Tidak
Gambar 4.6
Flowchart
Admin Guru
4.5 Merancang