Prosiding Seminar Nasional Teknologi Informatika

Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

Sistem Informasi Akademik Berbasis Web

Menggunakan Metode Waterfall
Pada SMA Kemala Bhayangkari I Medan
Jamaludin
Politeknik Ganesha Medan
jamaludinmedan@[Link]

Romindo
Politeknik Ganesha Medan
romindo4@[Link]

Abstract

Pelitian ini bertujuan untuk merancang sebuah sistem informasi akademik berbasis web pada SMA Kemala
Bhayangari I Medan sehingga proses informasi akademik dapat lebih mudah dilakukan oleh siswa, guru, kepala
sekolah dan masyarakat luas yang ingin mengetahui keberadaan sekolah tersebut. Penyampaian informasi,
seperti data guru, siswa, wali kelas, dan kelas yang kurang cepat dan kurang efesien mengakibatkan terjadinya
menumpuknya data-data dan untuk mengerjakannya membutuhkan waktu yang cukup lama. Dari permasalahan
tersebut diperlukan sebuah sistem untuk mengatasi masalah tersebut. Sistem tersebut dirancang dengan
menggunakan bahasa pemrograman PHP dengan database My Sql dan menggunakan metode waterfall. Hasil dari
penelitian ini dihasilkan suatu sistem informasi akademik berbasis web yang dibutuhkan guru, siswa, karyawan,
orang tua dan masyarakat luar sehingga dapat dengan mudah dan cepat didapatkan tanpa terhalang waktu dan
tempat.

Keywords—Web; PHP; My Sql; waterfall

I. PENDAHULUAN kemajuan khususnya di dunia pendidikan Ditambah

Kemajuan teknologi dan informasi turut lagi upaya pemerintah dalam hal ini dinas
mengambil peranan penting untuk menunjang pendidikan terus mengembangkan pemanfaatan

17
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

teknologi dan informasi seperti melakukan lainnya. Dengan memanfaatkan internet, pemakaian
pengembangan bahan ajar dan bahan ujian berbasis komputer di seluruh dunia dimungkinkan untuk
teknologi informasi dan komunikasi bagi pendidik saling berkomunikasi dan pemakaian bersama
dan tenaga kependidikan untuk semua jenjang. Saat dengan cara saling kirim e-mail, menghubungkan ke
ini pemerintah mulai merancang dan membuat komputer lain, mengirim dan menerima file,
aplikasi pembelajaran berbasis portal, web, dan membahas topik tertentu pada newgroup dan lain-
multimedia interaktif Hal ini tentunya mendorong lain
kepada sekolah-sekolah untuk melakukan
penyesuaian terhadap program pemerintah secara
[Link]
bertahap sehingga tujuan pendidikan yang
diinginkan akan tercapai. Web adalah suatu sistem yang berkaitan dengan
SMA Kemala Bhayangkari I Medan sebagai dokumen yang digunakan untuk sebagai media
lembaga pendidikan yang cukup diminati di kota menampilkan tesk, gambar, multimedia dan lainnya
Medan dalam menyesuaikan program pemerintah pada jaringan internet. [2]
dan menarik minat siswa melakukan pembenahan Website atau situs diartikan sebagai kumpulan
mulai dari perbaikan kurikulum, guru, pengadaan halaman yang menampilkan informasi data teks,
fasilitas belajar seperti laboratorium komputer, data gambar diam atau gerak, data animasi, suara,
laboratorium bahasa, perpustakaan dan lain-lain, video dan atau gabungan dari semuanya, baik yang
sehingga dengan ini diharapkan dapat bersaing bersifat statis maupun dinamis yang membentuk
dengan sekolah-sekolah favorit lainnya khususnya satu rangkaian bangunan yang saling terkait dimana
di Kota Medan. Upaya tersebut tidaklah cukup masing-masing dihubungkan dengan jaringan-
karena selama ini proses publikasi sekolah masih jaringan halaman (hyperlink). Bersifat statis apabila
dilakukan secara manual, sehingga bagi siswa, isi informasi website tetap, jarang berubah, dan isi
orang tua atau siapa saja yang ingin melihat lebih informasinya searah hanya dari pemilik website.
jauh tentang profil sekolah, siswa, guru dan lain-lain Bersifat dinamis apabila isi informasi website selalu
maka harus datang ke sekolah atau hanya melalui berubah-ubah, dan isi informasinya interaktif dua
brosur saja, hal ini tentunya akan menghambat arah berasal dari pemilik serta pengguna website.
dalam memperoleh informasi sekolah ke Contoh website statis adalah berisi profil
masyarakat. perusahaan, sedangkan website dinamis adalah
Berdasarkan permasalahan tersebut maka perlu seperti Friendster, Multiply, dll. Dalam sisi
dibuatkan sistem informasi berbasis web agar pengembangannya, website statis hanya bisa
informasi yang dibutuhkan lebih cepat tanpa dibatasi diupdate oleh pemiliknya saja, sedangkan website
waktu dan tempat. dinamis bisa diupdate oleh pengguna maupun
pemilik. Untuk menyediakan sebuah website, maka
kita harus menyediakan unsur-unsur penunjangnya,
II. TINJUAN PUSTAKA seperti halnya: Nama domain (Domain name/URL -
Uniform Resource Locator).
A. Sistem Informasi
Sistem informasi merupakan kombinasi teratur [Link]
dari orang-orang, perangkat keras (hardware),
Dengan kebutuhan yang semakin kompleks tidak
perangkat lunak (sofware), jaringan komunikasi dan
sumber daya data yang menggumpulkan, mengubah lagi menjadi mudah dan menarik dengan hanya
menggunakan HTML. Diperlukan sesuatu yang
dan menyebarkan informasi dalam sebuah
lebih agar interaksi pengguna dapat sebagai
organisasi. [1]
pengendali datangnya informasi. Untuk itulah
B. Internet beberapa perusahaan perangkat lunak mulai
Internet berasal dari kata Interconnection berlomba untuk menawarkan teknologi bahasa
Networking yang mempunyai arti hubungan pemrograman, script, eksentensi baik gratis maupun
komputer dengan berbagai type yang membentuk komersial untuk membuat situs web lebih menarik.
sistem jaringan yang mencakup seluruh dunia Teknologi aplikasi web secara umum dibedakan
(jaringan komputer global) dengan melalui jalur menjadi dua yaitu:
telekomunikasi seperti telepon, radio link, satelit dan

18
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

a) Pemrosesan dilakukan di sisi web server. Web G. Referensi Jurnal

browser (sebagai klien) hanya menerima output
Untuk melengkapi referensi pada makalah ini,
saja. Contoh aplikasi sisi server adalah PHP,
penulis mengambil beberapa rujukan yang
ASP dan Perl. Biasanya sisi server digunakan
bersumber dari jurnal yang sudah diterbitkan lima
untuk aplikasi yang membutuhkan koneksi ke
tahun terakhir yaitu :
basis data.
b) Proses dilakukan di sisi web browser. Biasanya a.) Sistem Informasi Akademik pada SMK
aplikasi sisi kilen digunakan untuk hal-hal yang Kesehatan Via Medika
membutuhkan banyak interaksi pengguna dan
Penelitian ini dibuat oleh Rino Ramadhan, di
menggunakan informasi yang seragam dan pasti.
dalam penelitian tersebut beliau menjelaskan
Contoh aplikasi pada sisi klien adalah aplikasi
bahwa pengolahan data siswa, pengolahan data
permainan dengan JavaScript, Vbscript dan
guru, pengolahan data kelas, pengolahan
Applet
informasi nilai(raport), pengolahan jadwal
mengajar, dan pengolahan data mata pelajaran di
E. Dreamwever SMK Kesehatan Via Medika sebagian besar
belum berjalan secara cepat dan tepat, seperti
Dreamweaver merupakan software utama yang
pencarian data siswa, data guru, data kelas, data
digunakan oleh web server desainer maupun web
nilai masih harus membuka lembaran-lembaran
programmer dalam membangun suatu situs web.
arsip di bagian kesiswaan maupun kurikulum,
Dreamweaver memberikan kemudahan bagi
kertas pengumuman seperti jadwal mengajar dan
penggunaannya dalam menentukan ruang kerja
hal penting lainnya telah memenuhi papan
yang diinginkan. Tipe ruang kerja ditentukan
pengumuman sekolah, serta penghitungan nilai
berdasarkan kebutuhan maupun kebiasaan
masih memakan waktu yang lama, dan belum ada
pemakaiannya. Ruang kerja, fasilitas dan
aplikasi pendukung yang tepat, sehingga siswa
kemampuan dreamweaver mampu meningkatkan
siswi kurang mendapatkan informasi terbaru dari
produktivitas dan efektivitas dalam desain maupun
sekolah. Dengan dibuatnya sistem informasi
dalam membangun sebuah situs web
akademik berbasis website diharapkan mampu
meningkatkan kualitas serta kuantitas dalam
[Link] Modeling Language (UML)
bidang akademik maupun non akademik, karena
Unified Modeling Language selanjutnya disebut dengan keberadaan sistem informasi berbasis
(UML) adalah sebuah teknik pengembangan sistem website ini hampir semua informasi dapat
yang menggunakan bahasa grafis sebagai alat untuk diketahui masyarakat luas . [4]
pendokumentasian dan melakukan spesifikasi
system. [3]
b). Implementasi Sistem Informasi Akademik
Untuk membuat suatu model, UML
Berbasis Web Pada Sekolah Menengah Pertama
mendefinisikan diagram-diagram sebagai berikut:
(SMP) Swasta Nusa Penida Medan
1. Use case diagram
Penelitian ini dibuat oleh Sulindawaty, di dalam
2. Activity diagram
tersebut penelitian beliau menjelaskan bahwa
3. Class diagram
Pada saat ini Sekolah Menengah Pertama (SMP)
4. Sequence diagram
Swasta Nusa Penida Medan masih menggunakan
5. Statechart diagram
cara manual dalam proses penyampaian
6. Collaboration diagram
informasi, dimana informasi yang disampaikan
7. Component diagram
masih menggunakan paper. Dengan adanya
8. Deployment diagram
teknologi yang berkembang saat ini,terutama
Masing-masing diagram UML didesain untuk
internet, maka dirancang suatu website sistem
menunjukkan satu sisi dari bermacam-macam sudut
akademik pada Sekolah Menengah Pertama
pandang (perspektif) dan terdiri dari tingkat abstraksi
(SMP) Swasta Nusa Penida Medan yang
yang berbeda
diharapkan dapat membantu sekolah dalam
mempermudah proses penyampaian informasi

19
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

seputar akademik sekolah sehingga dapat berhubungan dengan masalah yang dimuat
membantu para siswa dan guru melihat informasi dalam penyusunan penulisan ini
penting dari sekolah serta orang tua murid dapat
melihat informasi akademik yang berguna untuk
anaknya. B. Metode Pengembangan Sistem
Informasi yang disajikan dalam website ini Metode pengembangan sistem menggunakan
antara lain adalah halaman utama, profil sekolah, metode waterfall. Metode waterfall atau air terjun
daftar siswa, daftar guru, daftar nilai siswa, adalah model yang dikembangkan untuk
daftar absensi siswa, daftar mata pelajaran, pengembangan perangkat lunak, membuat perangkat
daftar jadwal, fasilitas sekolah dan buku tamu. lunak. model berkembang secara sistematis dari satu
Perancangan Sistem Informasi Akademik Pada tahap ke tahap lain dalam mode seperti air terjun.
Sekolah Menengah Pertama (SMP) Swasta Nusa Model pengembangan ini bersifat linear dari tahap
Penida Medan dirancang dengan menggunakan awal pengembangan system yaitu tahap kebutuhan
bahasa pemrograman PHP, Pengolahan basis sistem sampai tahap akhir pengembangan system
data menggunakan MySQL dan program yaitu tahap pemeliharaan. Tahapan berikutnya tidak
XAMPP untuk menjalankan program aplikasi. akan dilaksanakan sebelum tahapan sebelumnya
Program Apache dan Browser Mozila firefox selesai dilaksanakan dan tidak bisa kembali atau
untuk server. Sedangkan Untuk mendesain mengulang ke tahap sebelumnya.
tampilan halaman web ( user interface agar lebih Tahapan metode waterfall dapat dilihat di
menarik) menggunakan Makromedia gambar 3.1.
dreamweaver. [5]

III. METODE PENELITIAN

A. Teknik Pengumpulan Data

Teknik pengumpulan data yang penulis lakukan
dalam melakukan penelitian ini adalah
a) Observasi,
Gambar 3.1. Metode Waterfall
Kegiatan mengamati langsung terhadap kegiatan
yang sedang terjadi, untuk mendapatkan data- Penjelasan dari tahap-tahap waterfall model
data yang lengkap dan akurat. Pada metode adalah sebagai berikut:
observasi ini penulis melakukan pengamatan a). Kebutuhan Sistem (System Enginering)
langsung pada SMA Kemala Bhayangkari I Kebutuhan sistem sangat diperlukan, karena
Medan untuk memperoleh gambaran operasional sistem informasi biasanya merupakan bagian
yang berlangsung di sekolah tersebut. dari suatu sistem yang lebih besar. Pembuatan
b) Wawancara, sebuah sistem informasi dapat dimulai dengan
Kegiatan ini dilakukan dengan berkomunikasi melihat dan mencari apa yang dibutuhkan oleh
secara langsung, dan melakukan tanya jawab sistem. Dari kebutuhan sistem tersebut akan
kepada kepala sekolah dari SMA Kemala diterapkan kedalam sistem informasi yang
Bhayangkari I Medan dan tenaga administrasi dibuat.
sekolah (Tata Usaha), guna memperoleh
informasi yang lengkap. Proses yang sedang berjalan pada informasi
akademik masih secara manual, sehingga
c) Studi Pustaka, diperlukan sebuah sistem yang berbasis web
Metode ini membantu penulis dalam hal sehingga proses akses dapat dilakukan dengan
membuat laporan yang ditunjang dengan buku- cepat tanpa dibatasi oleh waktu dan tempat.
buku, jurnal, internet dan referensi yang

20
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

b). Analisa (Analysis) f). Pemeliharaan (Maintenance)

Merupakan proses pengumpulan kebutuhan Proses ini dilakukan setelah sistem informasi
sistem informasi. Untuk memahami dasar dari telah digunakan oleh pemakai atau konsumen.
program yang akan dibuat, seorang analisis Perubahan akan dilakukan jika terdapat
harus mengetahui ruang lingkup informasi, kesalahan, oleh karena itu sistem informasi
fungsi-fungsi yang dibutuhkan, kemampuan harus disesuaikan lagi untuk menampung
kinerja yang ingin dihasilkan dan perancangan perubahan kebutuhan yang diinginkan
antarmuka pemakai sistem informasi tersebut. konsumen.
Pada proses analisa, penulit melakukan analisa Setelah pengujian programan dan desain web,
pada sistem yang berjalan yang meliputi analisa proses terakhir dilakukan untuk perawatan
input, analisa proses dan analisa output. setelah program diterapkan dan disesuaikan
pada user pengguna.
c). Perancangan (Design)
Perancangan sistem informasi merupakan proses
bertahap yang memfokuskan pada empat bagian
penting, yaitu: Struktur data, arsitektur sistem IV. HASIL DAN PEMBAHASAN
informasi, detil prosedur, dan karakteristik antar
muka pemakai.
A. Analisa Sistem Berjalan
Seteleh proses analisa, kemudian penulis Analisa sistem dilakukan guna mengetahui
melakukan perancangan system, dalam hal ini masalah apa sebenarnya yang dihadapi SMA
diperlukan teknik dalam perancangan system, Kemala Bhayangkari I Medan dalam
diantaranya penulis menggunakan diagram menyampaikan informasi. Penganalisaan ini
UML (Unified Modeling Language) seperti use berguna untuk memberikan gambaran solusi
case diagram, activity diagram, serta pemecahan masalah, diharapakan solusi ini
menggunakan flow chart untuk mengetahui memberikan informasi yang lebih mudah dalam
diagram alir dari sebuah system pencarian data.
d). Pengkodean (Coding) Dalam pencarian data guru dan siswa, dimana
Pengkodean sistem informasi merupakan proses setiap pendataan di catat dan disimpan dalam arsip,
penulisan bahasa program agar sistem informasi yang kemudian bagian tata usaha mengetiknya di
tersebut dapat dijalankan oleh mesin. komputer dengan menggunakan Ms. Excel dan Ms.
Word. dan pekerjaan yang dilakukan memakan
Setelah perancangan, selanjutkan dilakukan waktu yang cukup lama dan informasi yang
proses pengkodean untuk membuat web dengan
dihasilkan tidak tepat pada waktunya. Sementara
menggunakan bahasa pemrograman setiap tahunnya SMA Kemala Bhayangkari I Medan
Pemrograman Personal Home (PHP), melakukan pemeriksaan data guru, data siswa dan
menggunakan data base My Sql dan editor kegiatan-kegiatan yang ada di yayasan. Sehingga
Macromedia Dreamweaver MX 2004 yayasan membutuhkan suatu sistem informasi yang
e). Pengujian (Testing) dapat meningkatkan kinerja dan mutu pelayanan.
Proses ini akan menguji kode program yang
telah dibuat dengan memfokuskan pada bagian Analisa yang sedang berjalan, meliputi :
dalam sistem informasi. Tujuannya untuk a). Analisa Input
memastikan bahwa semua pernyataan telah diuji Pendataan pada SMA Kemala Bhayangkari I
dan memastikan juga bahwa input yang Medan belum dapat bekerja dengan baik,
digunakan akan menghasilkan output yang dimana setiap pendataan di catat dan disimpan
sesuai. Pada tahap ini pengujian ini dibagi dalam arsip. Sehingga apabila untuk
menjadi dua mendapatkan informasi, maka harus membuka
kembali arsip yang ada. Proses pembuatan
Setelah code program dan desain web yang laporan juga mengalami keterlambatan. Hal ini
sudah dibuat dilakukan pengujian untuk disebabkan, sistem yang digunakan masih semi
memastikan code program dan desain sudah
berjalan dengan baik

21
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

komputer dengan menggunakan Ms. Word dan - Admin mendapatkan manajemen guru, siswa
Ms. Excel. dan wali kelas
- Admin mendapatkan manajemen berita
b). Analisa Proses
Proses penginputan data guru setelah guru - Admin mendapat manajemen komentar
melakukan pelamaran setiap tahun, sedangkan
siswa melakukan pendaftaran pada bagian tata
usaha dan kemudian data yang diperoleh diinput C. Perancangan Sistem
kedalam sistem. Sedangkan untuk pemilihan
kelas dilakukan dengan cara melihat hasil dari Perancangan sistem yang dalam penelitian ini
testing yang dilakukan oleh pihak sekolah. Dan menggunakan diagram UML (Unified Modeling
untuk pemilihan wali kelas dilakukan dengan Language) yaitu use case diagram dan activity
cara rapat guru yang diselenggarakan oleh diagram dan flow chart.
sekolah. a). Use Case Diagram
Use case dari Implementasi Sistem Informasi
c). Analisa Output Akademik Berbasis Web Pada SMA Kemala
Setelah melakukan penginputan data guru dan Bhayangkari I Medan dapat dilihat pada gambar
siswa maka diperolah laporan guru dan siswa 4.1.
yang akan dilaporkan kepada kepala sekolah.
Namun laporan tersebut sering sekali mengalami
keterlambatan dan belum dapat dihasilkan setiap
saat diperlukan. Hal ini disebabkan, sistem yang
digunakan masih semi komputer dengan
menggunakan software Microsoft Word dan
Microsoft Excel.

B. Analisa Kebutuhan Sistem

Dalam sistem informasi sekolah ini terdapat tiga
jenis user yang saling berinteraksi dalam lingkungan
system tersebut, yaitu: guru,siswa dan admin yang
memiliki kebutuhan informasi yang berbeda.
1. Kebutuhan guru
- Guru mendapatkan login
Gambar 4.1. Gambar use case diagram
- Guru melihat informasi siswa, wali kelas
- Guru melihat berita b). Activity Diagram
Seorang admin diperlukan dalam mengelola
- Guru melihat jadwal mengajar sistem ini. Seorang admin mendapatkan login
2. Kebutuhan siswa dan mempunyai kewenangan penuh untuk
mengatur user. Adapun aktivitas admin dalam di
- Siswa mendapatkan login lihat gambar 4.2.
- Siswa mendapatkan informasi guru, wali kelas
- Siswa mendapatkan berita
- Siswa mendapatkan jadwal mata pelajaran
3. Kebutuhan admin
- Admin mendapatkan login
- Admin mengelola user

22
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

Start

Halaman
Web

y
Halaman Halaman
Depan Depan

y
Halaman Sub Menu
Profil C
Profil Profi

T
y
Halaman
Fasilitas
Fasilitas

T
y
Halaman
Guru
Guru

T
y
Siswa Halaman
Siswa

T
y Halaman
Wali Kelas Wali Kelas

T
y
Halaman
Kelas
Kelas

T
y
Buku Tamu Buku A
Tamu

T
y
T Login Login B
Administrasi Administrasi

Gambar 4.2. Activity diagram admin

c). Flow Chart Gambar 4.3. Flow chart halaman utama

Rancangan flow chart halaman utama bisa
dilihat pada gambar 4.3. Rancangan flow chart buku tamu bisa dilihat
pada gambar 4.4.
A

X
Pengisian
Buku Tamu

y Terima
Halaman y
Kirim Kasih atas
Depan
Pesan Anda

T
T

y Daftar dan
Daftar Pengisi Jumlah Pengisian Buku y
Buku Tamu Pengisi Tamu
Buku Tamu

T T

Gambar 4.4. Flow chart buku tamu

Rancangan flow chart profil bisa dilihat pada

gambar 4.5.

23
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

C B C

Halaman T Y
Login D Batal Proses Batal
T Administrator

T
y
Halaman Y
Sejarah Data Y Input Data Y Y Data Sudah
Sejarah Guru
Input Guru
Guru
Simpan Error
Ada

T
T
Data Telah
y Halaman
Disimpan
Identitas
Identitas T
T

Y Halaman Y
Laporan
T Data Guru
Laporan data Edit Edit Data Simpan
Guru
y Y
Visi & Misi Halaman T
Visi & Misi
C
Y Data Telah Data Telah
Hapus disimpan
Terhapus
T
T
y Halaman
T

Organisasi Organisasi T Y Cetak Laporan

Print
Data Guru

T
y D Batal Proses Batal
Halaman
Prestasi
Prestasi
T

T Data Y Input Data Y Input Data

Simpan
Y
Error
Y Data Sudah
Siswa Siswa Siswa Ada

T
Data Telah
Disimpan

Gambar 4.5. Flow chart Profil T

Y Halaman Y
Laporan Data
Laporan data Edit Edit Data Simpan
Siswa
Siswa

Rancangan flow chart admin bisa dilihat pada C

T

gambar 4.6. Hapus

Y Data Telah
Terhapus
Data Telah
disimpan

T Y Cetak Laporan
Print
Data Siswa

Y Halaman Y T Y
Data
Laporan Edit Edit Data Simpan Batal Prose Batal
Kelas
Anggota

T Y

Y Data Telah Data Telah

Hapus disimpan
Terhapus

Y Cetak Laporan
Print
Data Anggota
T

Halaman
Kritik Y Y Data Telah
Data Hapus
Pengunjung Terhapus
Pengunjung
Y

T T

Y E
LogOut

Gambar 4.6. Flow chart admin

[Link] Basis Data

Perancangan basis data adalah proses pembuatan
stuktur basis data sesuai dengan data yang
dibutuhkan oleh user. Perancangan logis merupakan
suatu tahapan yang digunakan untuk menentukan
hasil perancangan konseptual ke dalam bentuk yang
nantinya akan diimplementasikan dalam DBMS
(Data Base Management System).
Salah satu perancangan basis data kita dapat
menentukan relasi antar tabel sehingga tabel-tabel
tersebut dapat saling berhubungan. Dalam setiap
tabel, masing-masing record data di organisasikan
dalam struktur yang sama dan memiliki field kunci

24
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

yang akan menjadi penghubung antar tabel yang ada F. Hasil Tampilan
dan terkait satu sama lain. Relasi antar tabel dapat
Hasil dari Implementasi Sistem Informasi
dilihat pada gambar 4.7.
Akademik Berbasis Web Pada SMA Kemala
Bhayangkari I Medan yang dibangun adalah sebagai
berikut :

a). Halaman Utama

Halaman beranda merupakan halaman pertama
yang tampil saat aplikasi dijalankan. Pada halaman
utama akan terlihat jumlah halaman yang akan
diakses seperti : halaman Home, Profil, Fasilitas,
Guru, Siswa, Wali Kelas, Kelas dan Buku Tamu.
Bentuk halaman beranda dapat dilihat pada gambar
Gambar 4.7. Relasi antar tabel 4.9

[Link] Halaman
Perancangan halaman dilakukan sebelum
melakukan web design di komputer. Salah satu
perancangan halaman adalah menggambarkan
halaman utama yang menjadi pusat dari halaman
yang lain. Halaman utama ini merupakan tampilan
awal pada saat aplikasi dijalankan. Dalam halaman
utama terdapat beberapa menu yang dapat diakses
oleh pengunjung. Bentuk rancangan halaman utama
dapat dilihat pada gambar 4.8.

Gambar 4.9. Tampilan halaman beranda

b). Tampilan Halaman Profil

Halaman profil merupakan halaman yang
menampilkan profil organisasi, seperti sejarah,
identitas, visi dan misi perusahaan, struktur
organisasi dan prestasi.. Bentuk tampilan halaman
profil dapat dilihat pada gambar 4.10

Gambar 4.8. Rancangan halaman utama

25
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

Gambar 4.12. Tampilan halaman siswa

e). Tampilan Halaman Daftar Wali Kelas

Gambar 4.10. Tampilan halaman profil Halaman daftar wali kelas merupakan halaman
yang menampilkan wali kelas. Bentuk tampilan
halaman daftar wali kelas dapat dilihat pada gambar
c). Tampilan Halaman Daftar Guru 4.13.
Halaman daftar guru merupakan halaman yang
menampilkan daftar guru. Bentuk tampilan halaman
daftar guru dapat dilihat pada gambar 4.11.

Gambar 4.13 Tampilan halaman wali kelas

f). Tampilan Halaman Kelas

Halaman kelas merupakan halaman yang
menampilkan wali kelas. Bentuk tampilan halaman
Gambar 4.11. Tampilan halaman profil kelas dapat dilihat pada gambar 4.14

d). Tampilan Halaman Daftar Siswa

Halaman daftar siswa merupakan halaman yang
menampilkan siswa. Bentuk tampilan halaman
daftar siswa dapat dilihat pada gambar 4.12

Gambar 4.14 Tampilan halaman kelas

26
 Prosiding Seminar Nasional Teknologi Informatika
Volume 2 Nomor 1
November 2019
ISBN : 978-602-50006-1-4

g). Tampilan Halaman Buku Tamu

Halaman ini merupakan alamat dimana V. KESIMPULAN
pengunjung dapat memberikan kritik dan saran.
Bentuk tampilan halaman buku tamu dapat dilihat Dari penelitian yang dilakukan, maka dapat
pada gambar 4.15 disimpulkan sebagai berikut :
1. Dengan adanya sistem informasi akademik
berbasis web, maka proses informasi akademik
di SMA Kemala Bhayangkari I Medan dapat
dilakukan dengan cepat dan efisien,
2. Informasi keberadaan sekolah SMA Kemala
Bhayangkari I Medan dapat diakses dengan
cepat dan mudah oleh masyarakat umum tanpa
dibatasi waktu dan tempat.

.BIBLIOGRAPHY
[1] Yakub, Pengantar Sistem Informasi.
Yogyakarta, Indonesia: Graha Ilmu, 2012.
Gambar 4.15. Tampilan halaman buku tamu [2] Alexander F.K Sibero, Kitab Suci Web
Programing. Jakarta, Indonesia: Mediakom,
2011.
h). Tampilan Halaman Menu Admin [3] Mulyani, Metode Analisis dan Perancangan
Halaman menu admin merupakan halaman yang Sistem. Bandung, Indonesia: Abdi
manampilkan menu-menu yang dapat diakses oleh Sistematika, 2016.
administrator. Bentuk tampilan halaman menu
[4] Rino Ramadan, Sistem Informasi Akademik
admin dapat dilihat pada gambar 4.16.
Pada SMK Kesehatan VIA MEDIKA. Medan,
Indonesia : Sinkron, 2018.
[5] Sulindawaty, Implementasi Sistem Informasi
Akademik Berbasis Web Pada Sekolah
Menengah Pertama (SMP) Swasta Nusa
Penida Medan. Medan , Indonesia: Jurnal
Mantik Penusa, 2015.

Gambar 4.16. Tampilan halaman menu admin

27