Abstract— Human needs of information which

(1)

PERANCANGAN SISTEM INFORMASI AKADEMIK BERBASIS WEB

PADA MA

MAMBA’UL ‘ULUM

TUNJUNGMULI

Vadlya Maarif

STMIK Nusa Mandiri Jakarta vadlyamaarif@gmail.com

Abstrak – Kebutuhan manusia akan informasi

yang dapat diakses dengan cepat dan mudah, mendorong mereka untuk mengembangkan suatu teknologi yang dapat memenuhi kebutuhan manusia tersebut. Dapat terlihat pesatnya pengguna internet dikalangan masyarakat. Masalah yang timbul dari ruang lingkup sekolah yaitu kurangnya pemanfaatan perkembangan teknologi dalam sarana penyampaian informasi akademik. Dalam hal ini membangun sistem informasi akademik berbasis web, dimana web ini akan menunjang proses keluar masuknya data dan informasi. Pihak sekolah akan memproses masuknya data berupa nilai siswa, absen siswa, data siswa dan guru, jadwal pelajaran, beserta informasi akademik yang lainnya sehingga pengguna dapat melihat informasi tersebut secara online dimanapun mreka berada. Dengan adanya sistem informasi akademik berbasis web ini, dapat mempermudah mengalirnya informasi akademik dan membantu dalam meningkatkan penggunaan sistem informasi teknologi dan komunikasi berbasis web.

Kata kunci – Sistem Informasi, Akademik, Sekolah

Abstract— _{Human needs of information which}

can be accessed quickly and easily, force them to develop a technology which can be fulfilled their needs. It can be seen from the number of users. The problem which is raised, for example from the school field, is the use of technology as the media in delivering an academic information is still lack. In this moment, establish web-based academic information system, where this web will support the process of inputing or outputting the data and information. The school will process the input such

as students’s scores, students’ presence, students’ and teachers’ data, lesson list, and another

academic informations in order to make the user will be able to see the information everywhere via

online. Through this web-based academic

information system, hopefully it will make the flow of academis information goes well and help the development of the use of web-based academic information system.

Keywords-component; Information Systems,

Academic, School

PENDAHULUAN

Pemanfaatan kemajuan teknologi tidak menutup kemungkinan untuk dunia pendidikan yang perlu merasakan manfaatnya. Dapat digunakan sebagai menunjang proses keluar masuknya data dan informasi untuk umum maupun warga sekolah.

SMK Mamba’ul ‘Ulum Tunjungmuli adalah

sebuah sarana pendidikan menengah keatas yang memiliki unsur islami. Dengan pendidik yang berkualitas ditambah lagi dengan biaya pendidikan yang relatif murah telah mampu menyerap jumlah siswa dari berbagai macam latar belakang. Namun dengan sistem informasi akademik yang masih manual terkadang masih menemui kesulitan dalam penyampaian informasi ke lingkup yang lebih jauh serta penanganan data guru dan siswa maupun data nilai siswa. Hal tersebut terjadi karena pelayanan informasi masih kurang maksimal. Jarak penyampaian informasi akademik belum dapat meluas dan tersampaikan secara optimal. Berdasarkan uraian diatas dikemukakan oleh

Wardati dan Liatmaja (2013:57) “Dengan

internet maka dunia pendidikan tidak hanya terbatas pada ruang dan wilayah tertentu saja namun sudah meluas ke semua wilayah, yang mana pengaksesannya bisa dilakukan secara langsung/online.“ Dengan adanya Sistem informasi akademik berbasis web memudahkan guru dan siswa untuk dapat memanfaatkan fasilitas sekolah dengan mudah dan cepat.

BAHAN

DAN

METODE

A. Teknik Pengumpulan Data

Teknik pengumpulan data untuk mempermudah pembuatan web dan menjadikan web nyata sesuai dengan kebutuhan dan permasalahan yang ada adalah:

1. Observasi

(2)

2. Wawancara

Merupakan metode yang sangat penting dengan mendapatkan informasi secara langsung. Mewawancarai Kepala Sekolah dan waka kesiswaan di SMK Mamba’ul ‘Ulum Tunjungmuli serta pihak lain yang berkaitan dengan semua informasi penunjang. Seperti permasalahan yang sering muncul di sekolah serta sisi akademik sekolah.

3. Studi Pustaka

Dalam membangun sebuah perangkat lunak dibutuhkan sebuah cara sebagai panduan untuk mendapatkan perangkat lunak yang diharapkan, oleh karena itu perlu dilakukan pengembangan sistem baik berupa pembuatan suatu sistem baru maupun penambahan atau perubahan pada sistem yang sudah ada. untuk menunjang kebutuhan perancangan sistem yang akan dibangun, model yang diperlukan dalam pengembangannya diantaranya :

1. Analisa Kebutuhan Sistem

Tahapan ini dikenal sebagai proses

feasibility study, melakukan investigasi

kebutuhan-kebutuhan sistem yang akan digunakan sebagai tulang punggung proses komputerisasi bagi sistem pembuatan

website akademik ini. Kebutuhan sistem

berupa :

a. Terdapat 3(tiga) login user di dalam

website.

b. Peng-input-an nilai secara online dan informasi akademik yang tersedia di dalam website.

c. Ciri khas dari SMK Mamba’ul ‘Ulum Tunjungmuli berupa warna yang mempengaruhi tampilan website.

Dominan warna adalah hijau dan biru. 2. Desain

Dalam tahapan ini berkaitan dengan kebutuhan sistem untuk pengembangan aplikasi yang dijelaskan pada tahap analisa kebutuhan sistem. Serta menghasilkan urutan langkah bagaimana interaksi perangkat lunak yang akan di hasilkan. Menentukan perancangan sistem yang akan diterapkan berupa desain antarmuka UML

(Unified Modeling Language) dan EDR

(Entity Relationship Diagram), serta desain

database menggunakan normalisasi dan

desain navigasi menggunakan metode hirarki.

3. Code Generation

Tahapan ini menjelaskan tentang bahasa pemrograman yang digunakan untuk menterjemahkan penulisan kode-kode dengan menggunakan bahasa pemrograman terstruktur.

4. Testing

Testing adalah tahap pengujian setelah

penulisan coding. Pengujian mencakup beragam aspek yang berkaitan dengan

system and performance dari fase code

generation menggunakan blackbox testing.

Pengujian ini akan digunakan dalam proses perbaikan sistem sehingga mencapai hasil yang diharapkan dan telah ditentukan sebelumnya.

5. Support

Pada tahap ini, aplikasi yang telah di hasilkan akan digunakan untuk menangani sistem informasi. Sehingga kebutuhan-kebutuhan dan segala hal yang berkaitan dengan sistem informasi pendidikan dapat ditangani dengan lebih, cepat, tepat dan akurat.

HASIL

DAN

PEMBAHASAN

B. Analisa Kebutuhan Software

1. Tahapan Analisis

Sistem informasi akademik berbasis web merupakan proses penyampaian informasi tanpa perlu bertatap muka secara langsung dan dapat meluas tanpa batas dalam penyampaiannya. Beberapa pihak seperti masyarakat umum, siswa, maupun guru cukup memanfaatkan internet untuk dapat memperoleh informasi akademik tersebut. Berikut spesifikasi kebutuhan dari sistem informasi akademik sekolah berbasis web. a. Halaman Utama

1) Pengunjung dapat melihat informasi profile sekolah

2) Pengunjung dapat melihat informasi akademik.

3) Pengunjung dapat mengisi buku tamu. 4) Pengunjung dapat men-download brosur

sekolah.

5) Pengunjung dapat melihat album prestasi sekolah.

b. Halaman Guru

1) Guru dapat melihat informasi akademik 2) Guru dapat mengolah data pribadi 3) Guru dapat mengolah foto pribadi 4) Guru dapat mengolah nilai tugas dan

absen siswa

5) Guru dapat mengolah nilai UAS dan UTS siswa

6) Guru dapat melihat jadwal mengajar 7) Guru dapat melihat wali kelas 8) Guru dapat melihat data guru 9) Guru dapat melihat data siswa c. Halaman Siswa

1) Siswa dapat melihat informasi akademik 2) Siswa dapat mengolah data pribadi 3) Siswa dapat melihat nilai akhir

persemester

(3)

5) Siswa dapat melihat jadwal pelajaran 6) Siswa dapat melihat data guru d. Halaman Admin

1) Admin dapat mengolah info akademik 2) Admin dapat mengolah data admin 3) Admin dapat mengolah data guru 4) Admin dapat mengolah data siswa 5) Admin dapat mengolah data mata

pelajaran

6) Admin dapat mengolah jadwal pelajaran 7) Admin dapat melihat nilai akhir siswa 8) Admin dapat mengolah data siswa dalam

kelas

9) Admin dapat mengolah profil sekolah 10)Admin dapat mengolah buku tamu 11)Admin dapat mengolah album prestasi

sekolah

2. Use Case Diagram

a. Use Case Diagram Informasi Akademik

Halaman Utama

Gambar 1. Use Case Diagram Informasi Akademik Halaman Utama

Tabel.1. Deskripsi Use Case Mengisi Buku Tamu

Use Case Name Halaman Utama

Requirements 1c

Goal Pengunjung dapat

menyimpan, dan membatalkan pengisian buku tamu.

Pre-conditions Pengunjung membuka

website

Post-conditions Buku tamu tersimpan

Failed and condition Gagal menyimpan

Primary actors Pengunjung

Main Flow / Basic Path 1. Pengunjung melihat

daftar isi buku

tamu.

2. Pengunjung melihat form buku tamu 3. Pengunjung mengisi

form buku tamu. 4. Pengunjung

memilih tombol simpan.

5. System menyimpan data barang

Alternate Flow/Invariant1

Pengunjung memilih tombol batal

Invariant 2 -

b. Use Case Diagram Informasi Akademik Halaman Guru

Gambar 2. Use Case Diagram Informasi Akademik Halaman Guru

Tabel 2. Deskripsi Use Case Mengolah Data Pribadi

Use Case

Name

Halaman Utama

Requirements 2b

Goal Guru dapat meng-update

dan membatalkan

peng-edit-an data pribadi.

Pre-conditions Guru melakukan login

Post-conditions Data pribadi guru

ter-update

Failed and condition Gagal meng-update

Primary actors Guru

Main Flow / Basic Path

1. Guru melihat form data pribadi.

2. Guru mengubah data pribadi.

3. Guru memilih tombol

Update.

4. System meng-update

(4)

Use Case Name

Halaman Utama

Alternate Flow/Invariant 1

A5. Guru memilih tombol batal

A6. System hapus data

yang diubah.

Invariant 2 -

Tabel 3. Deskripsi Use Case Mengolah Foto Pribadi

Requirements 2c

Goal Guru dapat

meng-upload dan

membatalkan

peng-upload-an foto pribadi.

Post-conditions Foto pribadi guru

ter-upload

Failed and condition Gagal meng-upload

Main Flow / Basic Path 5. Guru melihat form

foto pribadi. 6. Guru memilih

tombol cari. 7. Guru memilih

tombol Upload.

8. System meng-Flow/Invariant 1

A5. Guru memilih tombol batal.

A6. System menuju

halaman beranda.

Invariant 2 -

Tabel 4. Deskripsi Use Case Mengolah Nilai Tugas dan Absen Siswa

Requirements 2d

Goal Guru dapat memilih

kelas dan menyimpan nilai siswa.

Post-conditions Memilih kelas, nilai

tersimpan

Main Flow / Basic Path 1. Guru melihat

daftar kelas yang diajar.

2. Guru memilih kelas.

3. Guru melihat form penilaian.

4. Guru mengisi form

penilaian.

5. Guru menekan tombol simpan.

6. System

menyimpan data nilai siswa.

-

Invariant 2 -

Tabel 5. Deskripsi Use Case Mengolah Nilai UTS dan UAS

Requirements 2e

Goal Guru dapat memilih

kelas dan menyimpan nilai siswa.

Post-conditions Memilih kelas, nilai

tersimpan

Main Flow / Basic Path 1. Guru melihat

daftar kelas yang diajar.

2. Guru memilih kelas.

3. Guru melihat form penilaian.

4. Guru mengisi form penilaian.

5. Guru menekan tombol simpan.

6. System

menyimpan data nilai siswa.

-

Invariant 2 -

c. Use Case Diagram Informasi Akademik

(5)

Gambar 3. Use Case Diagram Informasi Akademik

Halaman Siswa

Tabel 6. Deskripsi Use Case Melihat Informasi Akademik

Requirements 3a

Goal Siswa dapat membuka

link info akademik dan mencetaknya.

Pre-conditions Siswa melakukan login

Post-conditions Membuka link,

mencetak

Failed and condition Gagal mencetak

Primary actors Siswa

Main Flow / Basic Path 1. Siswa dapat

melihat daftar informasi

akademik.

2. Siswa menekan link info akademik. 3. Siswa dapat

melihat isi informasi

akademik.

A3. Siswa menekan tombol cetak

A4. System membuka

halaman cetak

Invariant 2 -

Tabel 7. Deskripsi Use Case mengolah Data Pribadi

Requirements 3b

Goal siswa dapat

meng-Use Case Name Halaman Utama

update dan

membatalkan

peng-edit-an data pribadi.

Pre-conditions Siswa melakukan login

Post-conditions Siswa pribadi guru

ter-update

Failed and condition Gagal meng-update

Main Flow / Basic Path 1. Siswa melihat form

data pribadi. 2. Siswa mengubah

data pribadi. 3. Siswa memilih

tombol Update.

4. System

meng-update data

pribadi.

A5. Siswa memilih tombol batal

A6. System hapus data

yang diubah.

Invariant 2 -

Tabel 8. Deskripsi Use Case Melihat Nilai Akhir Per-Semester

Requirements 3c

Goal siswa dapat mencari,

melihat, dan

mencetak nilai akhir.

Pre-conditions Siswa melakukan

login

Post-conditions Siswa mencari dan

mencetak

Failed and condition Gagal mencetak

Main Flow / Basic Path 1. Siswa melihat

form cari.

2. Siswa memilih tahun ajaran dan semester.

3. Siswa menekan tombol lihat.

4. System membuka

daftar nilai akhir yang dicari. 5. Siswa melihat

nilai akhir.

Alternate Flow/Invariant 1

A5. Siswa memilih tombol cetak

A6. System membuka

halaman cetak.

Invariant 2 -

d. Use Case Diagram Informasi Akademik

(6)

Gambar 4. Use Case Diagram Informasi Akademik Halaman Siswa

Tabel 9. Deskripsi Use Case Melihat Informasi Akademik

Use Case Name Halaman Admin

Requirements 4a

Goal Admin dapat

menyimpan,

meng-Edit, menghapus, dan

mencetak.

Pre-conditions Admin melakukan

login

Post-conditions Data info akademik

tersimpan, ter-update,

terhapus, dan tercetak.

Failed and condition Gagal menyimpan,

meng-update,

menghapus, dan mencetak

Primary actors Admin

Main Flow / Basic Path 1. Admin memilih

tombol tambah info akademik. 2. Admin melihat

daftar info akademik.

3. Admin melihat form input info akademik.

4. Admin mengisi form input info akademik.

5. Admin memilih tombol publikasi.

6. System

menyimpan data info akademik.

1. Admin memilih

link hapus.

2. System menghapus

info akademik. 3. Admin memilih

link edit

4. Admin melihat form edit info akademik.

5. Admin mengisi form edit info akademik.

6. Admin memilih tombol update.

7. System

meng-update info

akademik.

Invariant 2 1. Admin memilih

tombol batal.

data yang telah diketik.

Tabel 10. Deskripsi Use Case Mengolah Data Admin

Requirements 4b

Goal Admin dapat

menyimpan dan

menghapus.

login

Post-conditions Data admin tersimpan

dan terhapus.

Failed and condition Gagal menyimpan dan

menghapus.

Main Flow / Basic Path 1. Admin melihat

form tambah admin.

2. Admin mengisi form tambah admin.

3. Admin memilih tombol simpan.

4. System

menyimpan data admin.

-

Invariant 2 -

Tabel 11. Deskripsi Use Case Mengolah Data Guru

(7)

Goal Admin dapat menyimpan, mencari

login

Post-conditions Data guru tersimpan

dan ditemukan.

mencari.

Main Flow / Basic Path 1. Admin melihat form tambah guru. 4. Admin mengisi

form tambah guru. 5. Admin memilih

tombol simpan.

6. System menyimpan

data guru.

1. Admin memilih

7. System

meng-update info data

guru.

Invariant 2 1. Admin mencari

data guru

2. System

menampilkan data guru.

Tabel 12. Deskripsi Use Case Mengolah Data Siswa

Requirements 4d

Goal Admin dapat

menyimpan, mencari

login

Post-conditions Data siswa tersimpan

dan ditemukan.

mencari.

data siswa.

1. Admin memilih

link hapus.

data siswa.

3. Admin memilih

7. System

siswa.

data siswa

2. System

menampilkan data siswa.

Tabel 13. Deskripsi Use Case Mengolah Data Mata Pelajaran

Requirements 4e

Goal Admin dapat

menyimpan, mencari

login

Post-conditions Data guru tersimpan

dan ditemukan.

mencari.

(8)

Use Case Name Halaman Admin form tambah mata pelajaran.

4. Admin memilih tombol simpan.

data mata

pelajaran.

1. Admin memilih mata pelajaran. 5. Admin mengisi

form edit data mata pelajaran. 6. Admin memilih

tombol update.

7. System

mata pelajaran.

data mata

pelajaran.

2. System

menampilkan data mata pelajaran.

Tabel 14. Deskripsi Use Case Mengolah Data Jadwal Pelajaran

Requirements 4f

Goal Admin dapat

menyimpan, mencari, menghapus,

mengubah.

login

Post-conditions Data guru tersimpan,

terhapus, ter-update

dan ditemukan.

Failed and condition Gagal menyimpan,

menghapus,

meng-update dan mencari.

daftar jadwal pelajaran.

2. Admin memilih link tambah jadwal pelajaran.

3. Admin melihat form tambah jadwal pelajaran.

4. Admin mengisi form tambah jadwal pelajaran. 5. Admin memilih

tombol simpan.

data jadwal pelajaran.

1. Admin memilih jadwal pelajaran. 5. Admin mengisi

form edit data jadwal pelajaran. 6. Admin memilih

tombol update.

7. System

jadwal pelajaran.

Invariant 2 A. Admin mencari

data jadwal pelajaran.

B. System

menampilkan data jadwal pelajaran.

C. Activity Diagram

a. Activity Diagram pengolahan nilai akhir

(9)

Gambar 5. Activity Diagram pengolahan nilai akhir halaman guru

b. Activity Diagram pembagian kelas halaman

admin

Gambar 6. Activity Diagram pembagian kelas halaman admin

c. Activity Diagram pengolahan jadwal pelajaran

halaman admin

Gambar 6. Activity Diagram pengolahan jadwal pelajaran halaman admin

C. Desain 1. Database

a. Entity Relationship Diagram

Siswa Memiliki Jam Pelajaran

Memiliki

Mata Pelajaran

Memiliki

Detail Kelas

Menginputkan Nilai Akhir Guru

Berdasarkan

Kelas Mendapatkan

Grade Nilai

Berdasarkan

Detail Mata Pelajaran

Gambar 7. Entity Relationship Diagram penilaian akademik

(10)

SISWA

NIS kelas NIP

NIP

Gambar 8. Logical Record Structure penilaian akademik

2. Software Architecture

a. Component Diagram

<<Application>> Sistem Informasi Akademik Sekolah

<<Database>> akademik2014

<<Javascript>> JQuery.js

<<Cascading Style Sheets>>

<<Web Operating System>> Windows 7

Gambar 9. Component Diagram Sistem Informasi Akademik Sekolah

b. Deployment Diagram

<<Application>> Sistem Informasi Akademik Sekolah

<<Java Script>> JQuery.js

<<Cascading Style Sheet>> Style.css

<<Web Server>> Apache

<<Web Operating system>>

Web Browser Operating system Port 80

Port 3306

Gambar 10. Deployment Diagram Sistem Informasi Akademik Sekolah

3. User Interface

Gambar 10. Tampilan Form Login Guru

(11)

Gambar 12. Tampilan Halaman Guru

Gambar 13. Tapilan form login siswa

Gambar 14. Tampilan halama siswa

Gambar 15. Tampilan form login admin

Gambar 16. Tampilan halaman admin

KESIMPULAN

D. Kesimpulan

1. Dapat mempermudah penyampaian informasi untuk warga sekolah dan masyarakat umum yang berada di dalam atau luar sekolah.

2. Dengan menggunakan sarana website ini dapat mempermudah guru dalam melakukan input nilai siswa dan rekap nilai akhir.

3. Pihak sekolah dapat mengarsipkan data guru dan siswa dengan aman dan mudah pengaksesannya.

REFERENSI

Anhar. 2010. Panduan Menguasai PHP & MySQL Secara Otodidak. Jakarta : Media Kita. Arconico, Eddie S. 2005. Web Database

menggunakan MySQL dan SQLite. Yogyakarta: PD. Anindya.

Kroenke, David M. 2005. Database Processing. PT Gelora Aksara Pratama.

Ladjamudin, Al Bahra. 2005. Analisa dan Desain Sistem Informasi. Yogyakarta: Graha Ilmu.

Marimin, Tanjung, henri, dan Prabowo, haryo. 2006. Sistem Informasi Manajemen Sumber Daya Manusia. Jakarta: Gramedia Widiasarana Indonesia. M. Shalahuddin, Rosa A.S. 2008. Java di Web.

Bandung: Informatika.

Nguyen, Quan. 2013. HTML5 Canvas and CSS3 by Examples: Graphics, Games and Animations. United States of America : Ramacad Inc

(12)

Akuntansi. Jakarta : Gramedia Widiasarana Indonesia (Grasindo) Suardika, Gede dan Triandini, Evi. 2012. Step By

Step Desain Proyek Menggunakan UML. Yogyakarta : CV. Andi Offset.

Wahana Komputer. 2010. Panduan Praktis Menguasai Pemrograman Web dengan JavaScript. Yogyakarta : Andi Offset Wardana. 2010. Menjadi Master PHP dengan

Framework Codeigniter. Jakarta : PT Elex Media Komputindo

Winanto, Edy, Ali Zaki. 2012. Mobile Web Development dengan Dreamweaver. Jakarta : PT Elex Media Komputindo. Yuhefizar. 2008. 10 Jam Menguasai Internet

Teknologi dan Aplikasinya. Jakarta : PT

Elex Media Komputindo.

Yuhefizar, HA Mooduto, 2009. Rahmat Hidayat. Cara Mudah Membangun Website Interaktif Menggunakan Content Management System Joomla. Jakarta : PT Elex Media Komputindo.

Ramadhan, Arif. 2006. SGS:Pemrograman WEB. Jakarta: PT Elex Media Komputindo. Sutopo, Ariesto Hadi. 2007. Pemrograman Flash

dengan PHP & MySQL. Yogyakarta: Graha Ilmu.