Volume 4 Nomor 2, Desember 2021 e-ISSN : 2614-1574 p-ISSN : 2621-3249

## PERANCANGAN SISTEM INFORMASI SISTEM AKADEMIK BERBASIS WEB PADA SMP 2 KLARI

## WEB-BASED ACADEMIC INFORMATION SYSTEM DESIGN AT SMPN 2 KLARI
Rafael Falmarum 1 , Asep Erik Nugraha 2 , Winarno 3
123 Universitas Singaperbangsa Karawang rafael.falmarum@gmail.com

## ABSTRACT
The  purpose  of  this  research  is  to  design  an  academic  information  system,  especially  in  SMP  2  Klari Educational Institution. as an effort to develop information technology. Because junior high school 2 Klari still submits information manually, the information conveyed is not too effective or accurate, causing false information.  Data  collection was  carried  out  by  means  of observation,  interviews  and  inputting  student data based on data obtained at school. The method used in this research is to use the prototype method, for system  design  using  DFD,  ERD,  UML  and  MySQL  for database  creation,  for  web  display  design  using Adobe Dreamweaver CS6 application. The result of this research is to produce an academic information system design for SMP 2 Klari. With the academic activity system it becomes more effective and efficient because student data managers do not need to search for data manually, but simply access this academic information system.
Keywords: PSI, Prototype, DFD, ERD, Design.

## ABSTRAK
Tujuan dari penelitian ini adalah untuk merancang suatu sistem informasi akademik khususnya di Lembaga Pendidikan  Smp  2  klari.  sebagai  upaya  pengembangan  teknologi  informasi.  Karena  smp  2  klari  masih melakukan  penyampaian  informasi  secara  manual  membuat  informasi  yang  di  sampaikan  tidak  terklalu efektif atau akurat sehingga menimbulkan informasi yang salah. Pengumpulan data dilakukan dengan cara observasi,  wawancara  dan  penginputan  data-data  siswa  berdasarkan  data  yang  didapatkan  disekolah. Metode yang digunakan dalam penelitian ini adalah menggunakan metode prototype, Untuk perancangan sistem menggunakan DFD, ERD, UML dan MySQL untuk pembuatan database nya, untuk perancangan tampilan  web  menggunakan  aplikasi  Adobe  Dreamweaver  CS6.  Hasil  dari  penelitian  ini  adalah menghasilkan  sebuah  rancangan  sistem  informasi  akademik  Smp  2  klari.  Dengan  sistem  ini  kegiatan akademik menjadi lebih efektif dan efisien karena pengelola data siswa tidak perlu mencari-cari data secara manual melainkan cukup mengakses sistem informasi akademik ini.
Kata Kunci : PSI, Prototype, DFD, ERD, Perancangan.

## PENDAHULUAN
Pengelolaan  data  menggunakan komputer  sudah  dilakukan  oleh  banyak sekolah maupun perusahaan. Pengelolaan data
menggunakan komputer,  dapat  meningkatkan  kinerja dalam mengelolah data secara detail dan signifikant. Melakukan pengelolaan data dapat  dengan  cepat  dan  akurat  dengan menggunakan  komputer.  Penggunaan komputer dapat  membantu  memperoleh hasil  yang  baik  dan  akurat  (Permana  & Ridwan, 2015)
Dunia pendidikan saat ini berkembang  dengan  begitu  pesatnya. Perkembangan pesat ini, seiring dengan berkembangnya teknologi dan informasi yang sedang terjadi. Dengan
perkembangan teknologi informasi pada saat ini, guru dapat memberikan layanan tanpa harus berhadapan langsung dengan siswa.  Demikian  pula  siswa  dapat memperoleh  informasi  dalam  ruang lingkup  yang  lebih  luas  dari  berbagai sumber melalui menggunakan internet(Hamzah, dkk., 2021).
Berdasarakan teori mengenai sistem informasi akademik yaitu sebuah aplikasi untuk membantu mengolah data menjadi berupa informasi kepada pengguna  khususnya  pada  kegiatan akademik. Namun pada dasarnya sekolah SMPN 2 klari belum mempunyai  sistem  informasi  berbasis web, yang mengakibatkan proses penyampaian  informasi  tidak  berjalan dengan  komunikasi  di  luar  akademik antar guru dengan murid. Masalah yang dihadapi sama seperti penelitian pengolahan  data  Akademik  di  Sekolah Menengah  Pertama  (SMP)  Negeri  3 Pringkuku yang masih dilakukan secara konvensional,  yaitu  data  diolah  dengan pencatatan  di  buku  induk  (Saraswati, 2013).
Pada saat ini sudah banyak sekolah mulai melakukan perkembangan terutama di dalam melakukan
penyampaian  informasi  seperti  pada
Smk  Pasar  Minggu  Jakarta,  dimana awalnya  sekolah  ini  masih  melakukan penyampaian  sistem  informasi  secara manual yaitu guru harus bertemu murid
atau sebaliknya jika ingin menyampaikan  informasi,  lalu  setelah mengetahui  bahwa  sekolah  tersebut belum  mempunyai  sistem  informasi berbasis web penulis melakukan perancangan  sistem  untuk  sekolah tersebut  agar  memudahkan  guru  dan murid  dalam  penyampaian  informasi (Susanti,  2016).  Sama  halnya  dengan penelitian  lain  yang  pada  dasarnya Sekolah  Islam  Modern  Amanah  belum mempunyai  sistem  informasi  berbasis web, yang mengakibatkan proses penyampaian  informasi  tidak  berjalan dengan maksimal untuk kalangan pelajar dan  kurangnya  komunikasi  di  luar akademik  antar  guru  dengan  murid (Maharani, 2017).
Melihat  ketidak  adanya  sistem informasi  akademik  yang  berbasis  web, serta perkembangan teknologi informasi
yang  sangat  penting  untuk  kemajuan sekolah  dan  besarnya  manfaat  yang diperoleh,  peneliti  membuat  sebuah perancangan dalam hal sistem informasi akademik.  Dengan  melakukan  alur perancangan sistem, maka sistem informasi akademik bisa digunakan dan membantu  kegiatan  akademik  sekolah.
Oleh  karena  itu  penulis  ingin  membuat sebuah penelitian tentang sistem informasi akademik di sekolah SMPN 2 klari dengan melakukan alur perancangan  sistem.  Penelitian  ini diharapkan  akan  mempermudah  proses aliran  informasi  khususnya  data  siswa pada sekolah tersebut.
Latar  belakang  di  atas  membuat penulis tertarik untuk mengangkat topik mengenai sistem informasi dengan judul “Perancangan  Sistem  Informasi  Sistem Akademik  Berbasis  WEB  Pada  SMP  2 Klari”.

## METODE
Gambar 1. Flowchart
Penelitian  ini  dilakukan  dengan konsep  perancangan  sistem  informasi
Mulai Studi Literatur Studi Lapangan Identifikasi Masalah Perumusan Masalah Pengumpulan Data Data Cukup Perancangan Sistem dan Implementasi Pengujian Analisa Pembahasan Kesimpulan dan Saran Selesai
akademik  sekolah  berbasis  web  yang merupakan alternatif solusi untuk mempercepat  proses  penginputan  data dan  melihat  data  khususnya  data  siswa. Ini  diharapkan  dapat  membantu  sistem informasi akademik sekolah.
Pengumpulan data dilakukan dengan  cara  observasi,  wawancara  dan penginputan data-data siswa berdasarkan data yang didapatkan disekolah.  Metode yang  digunakan  dalam  penelitian  ini adalah menggunakan metode prototype,
Untuk perancangan sistem menggunakan  DFD,  ERD,  UML  dan MySQL untuk pembuatan database nya, untuk perancangan tampilan web menggunakan aplikasi Adobe Dreamweaver CS6.

## HASIL DAN PEMBAHASAN Perancangan Sistem
Sistem  informasi  akademik  data
siswa merupakan sebuah sistem
informasi  yang  bertujuan  untuk  dapat membantu petugas sekolah untuk
mendata  setiap  siswa  dan  nilainya, sistem ini diharapkan dapat
mempermudah  petugas  sekolah  untuk mendata  dikarenakan  sistem  yang  dulu masih menggunakan sistem manual yang tidak efektif.
Adapun gambaran umum  sistem informasi  akademik  data  siswa  yang penulis  usulkan  yang  nantinya  dapat menjadi  usulan  dan  pertimbangan  bagi sekolah :
1) Admin dapat melihat data guru
2) Admin dpat melihat data siswa
3) Admin dapat menginput data guru 4) Admin dapat menginput data siswa
5)  Admin  dapat  menginput  data pelajaran
6) Admin dapat menginput nilai
7) Guru dapat melihat data guru
8) Guru dapat melihat data siswa 40 9) Guru daoat melihat data Pelajaran 10) Guru dapat melihat data kelas
11) Siswa dapat melihat data siswa
12) Siswa dapat melihat data nilai 13) Siswa dapat melihat data pelajaran 14) Siswa dapat melihat data kelas

## Analisis Masalah
Proses akses informasi mengenai data  siswa  merupakan  hal  yang  sangat dibutuhkan  oleh  sekolah  ,  karena sebelumnya  tidak  ada  sistem  informasi atau  akses  mengenai  data  para  siswa tersebut. Sehingga sekolah harus mendata siswanya satu-persatu sehingga membutuhkan  waktu  yang  sangat  lama, apalagi  kalo  ada  kesalahan  data  pihak sekolah harus mencari kesalahan pendataan tersebut.
Dengan  adanya  sistem  informasi akademik  sekolah,  para  siswa  dapat mengecek  kebenaran  informasi  tentang mereka  sehingga  mereka  hanya  datang ke petugas sekolah dan
memberitahukannya agar petugas
sekolah  (admin)  tinggal  mengubah  data mereka.  Para  siswa  dan  guru  dapat mengakses nilai-nilai mereka dan informasi mengenai penjadwalan pelajaran  sehingga  mereka  tidak  perlu repot  untuk  menanyakan  kepada  tugas sekolah dengan adanya sistem informasi akademik  ini  dapat  mempermudah pengaksesan
informasi dan mengefektifkan  waktu  dan  efisien terhadap proses yang dilakukan.

## Analisis Kebutuhan Sistem
Untuk merancang sebuah sistem
informasi akademik data siswa
dibutuhkan  perangkat  yaitu  hardware, software dan brainware.
1. Analisis kebutuhan hardware
Hardware  yang  dibutuhkan  dalam perancangan sistem informasi ini yaitu :
a. Processor : Intel Core i3-3217U
b. VGA : Intel UHD Graphic
c. Harddisk : 500 GB
d. RAM : 2GB
e. Keyboard dan Mouse
2. Analisis kebutuhan software
Perangkat  lunak  yang  dibutukan untuk  merancang  sistem  informasi akademik data siswa, yaitu :
a. Sistem informasi windows 7
b. Web server xampp v.3.2.3 c.  Web  browser  (Google  Chrome,
Internet Explore )
d. Adobe Dreamweaver CS 6
e. Microsoft Visio 2016
f. Sublime Text
3. Analisis kebutuhan brainware
a.  Administrator  Tenaga  ahli  yang bertugas  untuk  mengelola  sistem informasi akademik data siswa.
b. Guru Pengguna yaitu guru yang akan mengakses  informasi  dari  sistem tersebut.
c.  Siswa  Pengguna  yaitu  siswa  yang akan  mengakses  informasi  dari sistem tersebut.

## Analisis Perancangan sistem
Analisis  perancangan  sistem  digunakan untuk  menjelaskan  setiap  proses  atau aktivitas yang akan
berjalan nantinya(Anofrizen & Hamzah, 2021). 1. Analisis flowchart aktifitas
a. Flowchart aktifitas admin
Gambar 2. Flowchart Aktivitas Admin
Flowchart  aktivitas  admin  ialah menggambarkan interaksi yang terjadi  antara  admin  dengan  sistem akademik  sekolah.  Dimana  alur prosesnya  ialah  pertama  admin terlebih  dahulu  mengakses  sistem akademik  sekolah  terlebih  dahulu, maka  sistem  akan  menampilkan halaman  login  untuk  admin,  setelah itu  admin  diminta  untuk  memasukan username  dan  password  agar  bisa masuk  ke  sistem.Setelah  berhasil login  dan  berada  di  halaman  home admin,  admin  dapat  mengakses berbagai  menu  untuk  admin  dalam mengelola  sistem  akademik  sekolah. Berbagai menu tersebut diantaranya:
1) Menu data guru
2) Menu data siswa
3) Menu data nilai siswa
4) Menu data pelajaran
5) Menu data pelajaran
6) Menu data admin
b) Flowchar aktifitas siswa
Gambar 3. Flowchart Aktivitas Siswa
Flowchart  aktivitas  siswa  yang ditunjukan  ialah  menggambarkan
interaksi  yang  terjadi  antara  siswa dengan  sistem  akademik  sekolah.
Dimana alur prosesnya ialah pertama siswa  terlebih  dahulu  mengakses sistem  akademik  sekolah  terlebih dahulu, maka sistem akan menampilkan  halaman  login  untuk siswa, setelah itu siswa diminta untuk memasukan  username  dan  password agar bisa masuk ke sistem
Setelah  berhasil  login  dan  berada di  halaman  home  siswa,  siswa  dapat mengakses  berbagai  menu.  Berbagai menu tersebut diantaranya:
1) Menu data siswa
2) Menu data nilai siswa
3) Menu data pelajaran
4) Menu data kelas

## c) Flowchart aktifitas guru

## Gambar 4. Flowchart Aktifitas Guru
Flowchart  aktivitas  guru  yang ditunjukan  ialah  menggambarkan interaksi  yang  terjadi  antara  guru dengan  sistem  akademik  sekolah. Dimana alur prosesnya ialah pertama guru  terlebih  dahulu  mengakses sistem  akademik  sekolah  terlebih dahulu, maka
sistem akan
menampilkan  halaman  login  untuk guru,  83  setelah  itu  guru  diminta untuk  memasukan  username  dan password agar bisa masuk ke sistem Setelah  berhasil  login  dan  berada di  halaman  home  guru,  guru  dapat mengakses  berbagai  menu  Berbagai menu tersebut diantaranya:
1) Menu data guru
2) Menu data siswa
3) Menu data nilai
4) Menu data pelajaran
5) Menu data kelas
Pada  penelitian  lain  sub  menu  yang  di tampilkan berupa informasi yang terdiri dari  sub  menu  data  kelas,  sub  menu informasi data Guru, sub menu informasi data  Siswa,  sub  menu  infromasi  data Nilai,  sub  menu  informasi  data  Alumni dan  sub  menu  informasi  data  Pelajaran (Membara, Yulianti, & Kanedi, 2014) .

## 2. Analisis diagram konteks
Sistem Informasi akademik Berbasis Web GURU ADMIN SISWA Login username password Informasi data guru Informasi data siswa Informasi data nilai Informasi data pelajaran Informasi data kelas Login username password Informasi data siswa Informasi data kelas Informasi data pelajaran Login username password Informasi data admin Informasi data guru Informasi data siswa Informasi data nilai Informasi data pelajaran Informasi data kelas
Gambar 5. Diagram Konteks
Diagram  konteks  yang  ditunjukan menggambarkan  keseluruhan  proses input ke dalam sistem dan output dari sistem  akademik  sekolah.  Terdapat tiga  entitas  yang  menyusun  sistem puskesmas  ini  diantaranya  entitas admin, guru dan siswa. Masingmasing entitas ini
memberikan input yang berbeda-beda kepada  sistem  sehingga  output  yang diberikan  sistem  kepada  masing- masing entitas pun tidak sama persis atau ada yang berbeda.
3. Analisis Data Flow Diagram (DFD)
Data  Flow  Diagram  (DFD) merupakan diagram yang menggambarkan kegiatan-kegiatan atau aliran data yang ada dalam suatu sistem. Berdasrakan sistem informasi akademik  yang  telah  dirancang terdapat  beberapa  DFD  dengan  level tertentu  yang  menyusun  sistem tersebut. berikut adalah beberpa DFD pada sistem informasi akademik
a) Data flow diagram (DFD) level 0
Sistem Informasi akademik Berbasis Web GURU ADMIN SISWA Data guru Informasi data guru Informasi data siswa Informasi data nilai Informasi data pelajaran Informasi data kelas Data siswa Informasi data siswa Informasi data kelas Informasi data pelajaran Data admin Informasi data admin Informasi data guru Informasi data siswa Informasi data nilai Informasi data pelajaran Informasi data kelas

## Gambar 6. Data Flow Diagram Level 0
Data  flow  diagram (DFD)  level  0 yang  ditunjukan  pada  gambar  6  DFD Level 0 dalam sistem informasi akademik  ini  sebenarnya  tidak  jauh berbeda  dengan  diagram  konteks,  yang membedakan  disini  adalah  pada input dari tiap masing-masing entitas terhadap sistem  seperti  setiap  entitas  hanya memasukkankan
username
dan password saja  untuk  dapat  mengakses sistem  informasi  akademik  tersebut. Pada DFD Level 0 output yang diberikan oleh  sistem  terhadap  entitas  tidak berbeda  jauh  dengan  diagram  konteks yaitu  berupa  informasi  mengenai  data siswa,  nilai  siswa,  guru,  mata  pelajaran dan  admin,  tentunya  setiap  entitas  akan mendapatkan output yang  berbeda  dari sistem.
b) Data flow diagram (DFD) level 1
ADMIN 1.0 Input data 2.0 Tampilan data Data admin Data guru Data siswa Data nilai Data pelajaran Data kelas Tb_admin Tb_guru Tb_siswa Tb_nilai Tb_pelajaran Tb_kelas Data admin Data guru Data siswa Data nilai Data pelajaran Data kelas Tampilan data siswa Tampilan data nilai Tampilan data pelajaran Tampilan data kelas GURU Tampilan data kelas Tampilan data pelajaran Tampilan data nilai Tampilan data siswa Tampilan data guru SISWA Tampilan data siswa Tampilan data nilai Tampilan data pelajaran Tampilan data kelas 3.0 UPDATE DATA Data admin Data guru data siswa Data nilai Data pelajaran Data kelas Update Update Tb_admin Tb_guru Tb_siswa Tb_nilai Tb_pelajaran Tb_kelas Data admin Update admin Data guru Update guru Data siswa Update siswa Data nilai Update nilai Data pelajaran Update pelajaran Data kelas Update kelas 4.0 HAPUS DATA Tb_admin Tb_guru Tb_siswa Tb_nilai Tb_pelajaran Tb_kelas Data admin Hapus admin Data guru Hapus  guru Data siswa Hapus siswa Data nilai hapus nilai Data pelajaran hapus pelajaran Data kelas hapus kelas Data admin Data guru data siswa Data nilai Data pelajaran Data kelas Tampilan data Admin Tampilan Data Guru Tampilan Data Siswa Tampilan data Nilai Tampilan Data pelajaran Tampilan  Data Kelas
Gambar 7. Data Flow Diagram Level 1
Data  flow  diagram (DFD)  level  1 yang  ditunjukan  pada  gambar  7  DFD Level  1  merupakan  gambaran  proses input  data,  tampilan  data,    update  data dan  hapus  data  dalam  level  1  proses  1 admin menginput data  admin, data guru, data siswa, data nilai, data pelajaran, data kelas  untuk  proses  input    data    setelah melakukan  input  data  proses  2  adalah tampilan data tampilan data ini menampilkan  dta  yang  sudah  di  input sebelum  nya  setelah  itu proses  3  admin bisa mengupdate data berupa data guru, data siswa, data nilai, data pelajaran, data kelas setelah itu proses ke 4 admin juga dapat menghapus data tersebut

## 4. Entity Relational Diagram (ERD)

## Gambar 8. ERD
Entity  Relational  Diagram  (ERD) ditunjukan  pada  gambar  8.  ERD menggambarkan  kebutuhan  data  dan asumsi-asumi yang akan di bangun pada sistem  informasi  akademik  ini.  Setiap entitas  memiliki  atribut  masing-masing seperti  pada  siswa  memiliki  atribut  id, nisn,  nisn.  Alamat, username, password dan  lain-lain.  Didalam  sistem  informasi akademik  ini  dijabarkan  keterkaitan antara entitas ke entitas yang lain 5. Tabel relasi
Gambar 9. Tabel Relasi
Table  relasi  dapat  ditunjukkan  pada gambar 9. tabel relasi lebih menjelaskan keterkaitan  antara  dua  entitas  yang berbeda  ,  seperti  halnya  pada  sistem informasi  akademik  ini,  dimana  pada entitas  siswa  memiliki  atribut  nisn  dan memiliki keterkaitan dengan entitas nilai siswa  yang  memiliki  atribut  nisn  . sehingga pada proses input  pada entitas nilai  siswa,  nisn  dapat  diketahui  karena sudah  memasukkankan  data  terlebih dahulu pada entitas siswa
6. Analisis Basis Data Perancangan database yang dilakukan  menggunakan  MySQL  versi 3.2.3. MySQL adalah Relational Database Management System (RDBMS)  yang  didistribusikan  secara gratis  dibawah  lisensi  GPL  (General Public  License).  Dimana  setiap  orang bebas untuk menggunakannya, tapi tidak boleh  dijadikan  produk  turunan  yang bersifat  Closed  Source  atau  komersial (Raharjo, Heryanto, & Rosdiana, 2014). Pemilihan  MySQL  untuk  perancangan database  dikarenakan  mudah  dalam proses pengoperasiannya dan mendukung pada sitem operasi windows . Nama database yang  digunakan  adalah puskesmas  pondok  salam.  Berikut rincian  daftar  tabel  yang  menyusun database db_sekolah : 1. Tabel Admin Tabel  admin  di  gunakan  untuk menyimpan  data  admin,  adapun spesifikasi filedny dapat di lihat pada tabel 1 Tabel 1. tabel admin No Nama filed Type Length keterangan 1 Kode_admin Char 4 Primery key 2 Nama_admin Varchar 100 3 Username Varchar 100 4 Password Varchar 100 2. Tabel guru Tabel  guru  di  gunakan  untuk menyimpan data guru, adapun spesifikasi filedny dapat di lihat pada tabel 2
ADMIN GURU SISWA NILAI KELAS KELAS SISWA PELAJARAN MENGELOLA mengelola MELIHAT MELIHAT id semester Kode_ pelajaran Kode_gur u Kode_ kelas Kode_ siswa Nilai_ tugas1 Nilai_ tugas2 Nilai_ uts Nilai_uas keterang an id Kode_ kelas Kode_ siswa nis Kode_ siswa Nama_ siswa kelamin Agama Tempat_ lahir Tanggal_ lahir alamat No_ telepon foto Tahun_ angkatan Ststus_ aktif Kode_ siswa Tahun_ ajar kelas Nama_ kelas Kode_ guru Status_ aktif Kode_ guru nip Nama_ guru Kelamin alamat No_ telepon Status_ aktif Kode_ admin Nama_ admin User_ name password Kode_ pelajaran Nama_ pelajaran keterang an
Tabel 2. Tabel Guru No Nama filed Type Length Keterangan 1 Nama_guru Varchar 100 2 Nip Varchar 25 3 Kode_guru Char 4 Primery key 4 Alamat Varchar 100 5 Kelamin Enum L/P 6 Status_aktif Enum No/yes 3. Tabel kelas
Tabel  kelas  di  gunakan  untuk menyimpan data kelas, adapun spesifikasi filedny dapat di lihat pada tabel 3
Tabel 3. Tabel Kelas No Nama filed Type Length Keterangan 1 Kode_kelas Char 4 Primary key 2 Tahun_ajar Varchar 25 3 Kelas Varchar 10 4 Nama_kelas Varchar 100 5 Kd_guru Char 4 6 Tatus_aktif Enum No/yes 4. Tabel nilai
Tabel  nilai  di  gunakan  untuk menyimpan data nilai, adapun spesifikasi filedny dapat di lihat pada tabel 4 Tabel 4. Tabel Nilai No Nama filed Type Length Keterangan 1 Id Varchar 50 Primary key 2 Semester Varchar 25 3 Kode_pelajaran Char 5 4 Kode_guru Char 5 5 Kode_kelas Char 5 6 Kode_siswa Char 5 7 Nilai_tugas1 Varchar 25 8 Nilai_tugas2 Varchar 25 9 Nilai_uts Varchar 25 10 Nilai_uas Varchar 25 11 Keterangan Varchar 100 5. Tabel pelajaran
Tabel  pelajaran  di  gunakan  untuk menyimpan data kelas, adapun spesifikasi filedny dapat di lihat pada tabel 5 Tabel 5. Tabel Pelajaran No Nama filed Type length Keterangan 1 Kode_pelajaran Char 4 Primary key 2 Nama_pelajaran Varchar 100 3 Keterangan Varchar 100

## 6. Tabel siswa
Tabel  siswa  di  gunakan  untuk menyimpan  data  siswa,  adapun spesifikasi filednya dapat di lihat pada tabel 6
Tabel 6. Tabel Siswa No Nama filed Type Length Keterangan 1 Kode_siswa Char 4 Primary key 2 Nis Varchar 25 3 Nama_siswa Varchar 100 4 Kelamin Enum L/P 5 Agama Varchar 100 6 Tanggal_lahir Date 100 7 Tempat_lahir Varchar 100 8 Alamat Varchar 100 9 No_telepon Varchar 100 10 Tahun_angkatan Varchar 4 11 Foto Varchar 100 12 Status_aktif Enum Yes/no Database  yang  dibuat  dalam pembutan  sistem  ini  yang  peneliti berikan  nama  db_man  yang  tersusun memiliki  beberapa  tabel  seperti,
tb_admin,  tb_siswa,  tb_nilaisiswa, tb_  guru,  tb_pelajaran.  Dari  kelima tabel tersebut masing-masing
memiliki sfesifikasi field yang berbeda-beda  seperti  tipe  data  , length, keterangan dan lain-lain.
Adapun  beberapa  sfesifikasi  field yang  digunakan  dalam  pembuatan database pada  sistem  informasi akademik ini :
a. Tipe Data
1) Tipe data string Pada  tipe  data string penulis menggunakan  tipe  data varchar untuk  mengisi  beberapa  kolom, kelebihan tipe data varchar adalah adanya
2) Tipe data numeric Tipe data numeric yang
digunakan dalam pembuatan
database ini  adalah  tipe  data integer ,  karena  tipe  data integer untuk  data numeric dirasa  sangat pas dalam pembutan database ini.
3) Tipe data text Tipe data text digunakan untuk mengisi kolom alamat karena tipe
data text memiliki  karakter  yang sangat banyak.
4) Tipe data date Tipe data date digunakan untuk
memasukkankan kolom tanggal
5) Tipe data enum Tipe  data enum digunakan
untuk pilihan seperti hal nya jenis kelamin, pada tipe data enum user akan  memilih  antara  2  jenis kelamin yaitu anatara laki-laki dan perempuan
b. Panjang data Pada  data  sebuah  kolom haruslah disesuaikan dengan kebutuhan  dari  setiap  nama field . Panjang  data  digunakan  untuk seberapa  Panjang  data  yang  akan di inpu tkan.
c. Keterangan Primary Key Primary  key adalah  suatu
kandidat key yang  digunakan seagai  kolom  unik  dan  utama untuk mengidentifikasi baris dalam tabel 7. User interface User  interface adalah  tahap dimana  desain interface yang  telah dibuat pada sistem informasi akademik yang telah digunakan. Pada user  interface ini  akan  dijelaskan mengenai  tampilan  yang  sudah ditampilkan
, berikut adalah penjelasan  mengenai  gambar  desain halaman website :
1. Desain tampilan awal
Gambar 10. Tampilan Awal Desain  halaman  awal  yang ditunjukkan  pada  gambar  10 merupakan sebuah halaman
dimana  para  pengguna  yang  akan mengakses sistem informasi tersebut akan masuk pada halaman awal sistem ini. Di dalam halaman awal  sistem  ada  beberapa  pilihan yang yang bisa dipilih yaitu, home dimana di dalam home ini terdapat bacaan  selamat  datang  di  smpn  2 klari  dan  pilihan  akses  para pengguna  seperti, login siswa, guru dan admin.
2. Desain Tampilan login
Gambar 11. Tampilan Login Desain halaman login yang ditunjukkan  pada  gambar  11 merupakan sebuah halaman dimana  para  pengguna  yang  akan mengakses sistem informasi tersebut akan masuk pada halaman awal  ini.  Di  dalam  halaman  login ada  beberapa  pilihan  yang  yang bisa  dipilih  yaitu,  pilihan  akses para pengguna seperti, login siswa, guru dan admin.

## 3. Desain tampilan login admin
Gambar 12. Tampilan Login Admin Desain  halaman  login  yang ditunjukkan  pada  gambar  12 merupakan sebuah halaman dimana  para  admin  yang  akan
mengakses sistem informasi tersebut akan masuk pada halaman awal  ini.  Di  dalam  halaman  login admin,  admin  akan  memasukan username  dan  password  untuk masuk  kedalam  menu  utama  jika
gagal admin akan kembali kehalaman login
4. Desain tampilan login siswa

## Gambar 13. Tampilan Login Siswa
Desain  halaman  login  siswa  yang ditunjukkan  pada  gambar  13 merupakan sebuah halaman dimana  para  siswa  yang  akan mengakses sistem informasi tersebut akan masuk pada halaman login siswa ini. Di dalam halaman login siswa, siswa akan memasukan username dan password  untuk  masuk  kedalam menu  utamajika  gagal  siswa  akan kembali kehalaman login
5. Desain tampilan login guru
Gambar 14. Tampilan Login Guru
Desain  halaman  login  guru  yang ditunjukkan  pada  gambar  14 merupakan sebuah halaman dimana  para  guru  yang  akan mengakses sistem informasi tersebut akan masuk pada halaman login  guru  ini.  Di  dalam  halaman login guru , guru akan memasukan
username  dan  password  untuk masuk  kedalam  menu  utama  jika gagal guru akan kembali
kehalaman login

## 6. Desain tampilan halaman utama
Gambar 15. Tampilan Halaman Utama Desain  tampilan  halaman  ulama yang ditunjukkan pada gambar 15 merupakan sebuah halaman dimana  para  admin,  guru,  siswa yang  akan  mengakses  sistem informasi tersebut setelah memasukan username dan password akan masuk pada halaman  utama  ini.  Di  halaman utama  ini  para  user  dapat  melihat data  setiap  pengguna  dari  mulai data  siswa,  data  guru,  data  nilai, data pelajaran, data kelas.
7. Desain tampilan input data admin
Gambar 16. Tampilan Input Data

## Admin
Desain  halaman  input  data  admin yang ditunjukkan pada Gambar 16 merupakan sebuah halaman dimana admin yang akan mengakses sistem informasi tersebut dan ingin menginput data akan  masuk  pada  halaman  input data  ini.  Di  dalam  halaman  input data  ,  admin  akan  memasukan data-data yang ingin di masukan.

## 8. Desain Tampilan input data guru
Gambar 17. Tampilan Input Data Guru
Desain  halaman  input  data  guru yang ditunjukkan pada Gambar 17 merupakan sebuah halaman dimana guru yang akan mengakses sistem informasi tersebut dan ingin menginput  data  akan  masuk  pada halaman  input  data  ini.  Di  dalam halaman  input  data,  guru  akan memasukan  data-data  yang  ingin di masukan.

## 9. Desain tampilan input data siswa
Gambar 18. Tampilan Input Data Siswa
Desain  halaman  input  data  siswa yang ditunjukkan pada Gambar 18 merupakan sebuah halaman dimana siswa yang akan mengakses sistem informasi tersebut dan ingin menginput data akan  masuk  pada  halaman  input data  ini.  Di  dalam  halaman  input data, siswa akan memasukan data- data yang ingin di masukan.
10. Desain tampilan input data
pelajaran
Gambar 19. Tampilan Input Data Pelajaran Desain halaman input data pelajaran  yang  ditunjukan  pada Gambar  19  merupakan  sebuah halaman dimana admin yang akan mengakses sistem informasi tersebut dan ingin menginput data akan  masuk  pada  halaman  input data  ini.  Di  dalam  halaman  input data, admin akan memasukan data- data yang ingin di masukan.

## 11. Desain tampilan input data nilai
Gambar 20. Tampilan Input Data

## Nilai
Desain  halaman  input  data  nilai yang ditunjukkan pada Gambar 20 merupakan sebuah halaman
dimana guru yang akan mengakses sistem informasi tersebut dan ingin menginput  data  akan  masuk  pada halaman  input  data  ini.  Di  dalam halaman  input  data,  guru  akan memasukan  data-data  yang  ingin di masukan.
12. Desain tampilan input data kelas
Gambar 21. Tampilan Input Data

## Kelas
Desain  halaman  input  data  kelas yang ditunjukkan pada Gambar 21 merupakan sebuah halaman dimana admin yang akan mengakses sistem informasi tersebut dan ingin menginput data akan  masuk  pada  halaman  input data  ini.  Di  dalam  halaman  input data, admin akan memasukan data- data yang ingin di masukan.

## 13. Desain tampilan data admin
Gambar 22. Tampilan Data Admin
Desain  halaman  data  admin  yang ditunjukkan  pada  Gambar  22 merupakan sebuah halaman dimana admin yang akan mengakses sistem informasi tersebut  dan  ingin  melihat  data akan masuk pada halaman data ini. Di  dalam  halaman    data,  admin akan dapat melihat data-data yang telah di input 14. Desain tampilan data guru
Gambar 23. Tampilan Data Guru
Desain  halaman  data  guru  yang ditunjukkan  pada  Gambar  23 merupakan sebuah halaman dimana guru yang akan mengakses sistem informasi tersebut dan ingin melihat  data  akan  masuk  pada halaman  tampilan  data  ini.  Di dalam halaman tampilan data, guru akan dapat melihat data-data guru.

## 15. Desain tampilan data siswa
Gambar 24. Tampilan Data Siswa Desain  halaman  data  siswa  yang ditunjukkan  pada  Gambar  24 merupakan sebuah halaman dimana siswa yang akan mengakses sistem informasi tersebut  dan  ingin  melihat  data akan masuk pada halaman tampilan  data  ini.  Di  dalam halaman tampilan data, siswa akan dapat  melihat  data-data  siswa secara detail.

## 16. Desain tampilan data nilai
Gambar 25. Tampilan Data Nilai Desain  halaman  data  nilai  yang ditunjukkan  pada  Gambar  25 merupakan sebuah halaman dimana guru dan siswa yang akan mengakses sistem informasi tersebut  dan  ingin  melihat  data akan masuk pada halaman tampilan  data  nilai  ini.  Di  dalam
halaman  tampilan  data  nilai,  guru dan  siswa  akan  dapat  melihat daftar nilai secara detail

## 17. Desain tampilan data pelajaran
Gambar 26. Tampilan Data Pelajaran
Desain  halaman  data  pelajaran yang ditunjukkan pada Gambar 26 merupakan sebuah halaman dimana guru dan siswa yang akan mengakses sistem informasi tersebut  dan  ingin  melihat  data pelajaran akan masuk pada halaman  tampilan  data  ini.  Di dalam halaman tampilan data, guru dan siswa akan dapat melihat data-
data pelajaran

## 18. Desain tampilan data kelas
Gambar 27. Tampilan Data Kelas
Desain  halaman  data  kelas  yang ditunjukkan  pada  Gambar  27 merupakan sebuah halaman dimana  guru  siswa  yang  akan mengakses sistem informasi tersebut  dan  ingin  melihat  data kelas  akan  masuk  pada  halaman tampilan  data  ini.  Di  dalam halaman tampilan data, guru siswa akan  dapat  melihat  kelas  secara detail.
SIMPULAN Berdasarkan hasil dari studi literatur, observasi dilapangan, perancangan,  analisis  dan  pembahasan dapat disimpulkan bahwa: Dengan  adanya  prototipe  sebuah sistem  informasi  akademik,  sistem informasi  di  SMP  2  Klari  yang  asalnya hanya  menggunakan  sistem  manual. dengan  adanya  sistem  informasi  ini kegitan  akademik  dapat  digunakan  dan berjalan  dengan  lancar  khusunya  pada penyimpanan data siswa, karena dengan adanya sebuah sistem informasi kegiatan akademik di sekolah menjadi lebih baik.
Dengan  melakukan  pemodelan  dan metode  perancangan  sistem  khususnya menggunakan  metode  Prototipe.  Sistem informasi akademik yang telah dirancang  dapat  dipergunakan  untuk memenuhi  kebutuhan  sistem  informasi di SMP 2 Klari.
Sistem  informasi  akademik  data siswa  yang  telah  dirancang  akan membantu kegiatan akademik di SMP 2 Klari , karena sistem tersebut mempunyai beberapa fitur seperti penyimpanan  data  siswa  meliputi  nilai siswa dan data pribadi dan juga terdapat fitur pengelola data yaitu admin. Dengan sistem  ini  kegiatan  akademik  menjadi lebih efektif dan efisien karena pengelola data siswa tidak perlu mencari-cari data secara manual melainkan cukup mengakses  sistem  informasi  akademik ini.

## DAFTAR PUSTAKA
Anofrizen, A., & Hamzah, M. L. (2021). Rancang Bangun Sistem Informasi Geografis Rute Angkutan Umum Berbasis Android Pada Kementerian Perhubungan  Kota  Pekanbaru. SITEKIN: Jurnal Sains, Teknologi  dan  Industri,  18 (2), 283-291.
Hamzah, M. L., Rizal, F., & Simatupang, W.  (2021).  Development  of Augmented  Reality  Application for Learning Computer Network Device. International Journal of Interactive Mobile Technologies, 15 (12).
Maharani,  D.  (2017).  Perancangan
Sistem Informasi Akademik Berbasis  Web  Pada  Sekolah Islam  Modern  Amanah. Jurnal
Manajemen  Informatika  dan Teknik  Komputer,  Vol  2 (1),  27- 32.
Membara, E. P., Yulianti, L., & Kanedi, I.  (2014).  Sistem  Informasi Akademik Smp Negeri 2 Talang
Empat  Berbasis  WEB. Jurnal
Media  Infotama,  Vol  10 (1),  72- 80.
Permana,  E.,  &  Ridwan,  E.  E.  (2015).
Pengembangan Sistem Pengelolaan Data Siswa Berbasis Jaringan  Intranet  Pada  SMP Negeri 4 Klari. Jurnal Teknologi Informasi dan Komunikasi , 1-6.
Raharjo, B., Heryanto, I., & Rosdiana, E.
(2014). Pemrograman WEB
(HTML,  PHP,  &  MySQL).
Bandung: Modula.
Saraswati,  E.  (2013).  Sistem  Informasi Akademik  Berbasis  Web  Pada Sekolah Menengah Pertama
Negeri  3  Pringkuku. Indonesian
Journal  on  Networking  and Security, Vol 2 (4), 34-39.
Susanti, M. (2016). Perancangan Sistem Informasi  Akademik  Berbasis Web  Pada  Smk  Pasar  Minggu. Jurnal informatika, Vol 3 .