LAPORAN

“SISTEM INFORMASI EKSTRAKULIKULER

SMK PALEBON SEMARANG”

Disusun Oleh:

Khoirunnisa (32601400821)
Siti Noor Chotimah (32601400844)

PRODI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM SULTAN AGUNG
SEMARANG
2016
 LAPORAN
“SISTEM INFORMASI EKSTRAKULIKULER
SMK PALEBON SEMARANG”

Laporan ini disusun untuk memenuhi tugas mata kuliah Perancangan Sistem
Informasi

Disusun Oleh:

Khoirunnisa (32601400821)
Siti Noor Chotimah (32601400844)

PRODI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM SULTAN AGUNG
SEMARANG
2016

i
 RINGKASAN

Laporan Tugas Besar Perancangan Sistem Informasi dengan judul Sistem Informasi
Kegiatan Ekstrakurikuler pada SMK Palebon Semarang.

Tujuan Proyek Tugas Besar Perancangan Sistem Informasi ini adallah untuk
mengetahui pengaplikasian teori-teori yang telah diperoleh selama masa perkuliahan
sehingga dapat dibandingkan dengan teori yang ada di lapangan. Laporan ini
memberikan gambaran mengenai sistem informasi kegiatan ekstrakurikuler pada
tempat penelitian yaitu SMK Palebon Semarang. Hasil yang diperoleh selama
penelitian dapat dibandingkan sehingga dapat menjelaskan kelebihan dan kekurangan
suatu sistem dari obyek penelitian.

Metode pengumpulan data meliputi studi lapangan dan studi kepustakaan.

Studi lapangan meliputi observasi, sedangkan studi kepustakaan dilakukan dengan
penelitian pada obyek penelitian.

ii
 KATA PENGANTAR

Dengan menyebut nama Allah SWT Yang Maha Pengasih lagi Maha
Panyayang, saya panjatkan puja dan puji syukur atas kehadirat-Nya, yang telah
melimpahkan rahmat, dan hidayah-Nya kepada saya, sehingga saya dapat
menyelesaikan Laporan Tugas Besar Perancangan Sistem Informasi dengan judul
Sistem Informasi Kegiatan Ekstrakurikuler SMK Palebon Semarang dengan baik.

Laporan ini telah saya usahakan dengan sebaik mungkin. Namun semua itu
tidak luput dari bantuan berbagai pihak, sehingga penyusunan laporan ini menjadi
lancar tanpa adanya suatu halangan yang berarti. Oleh karena itu, tak lupa kami
ucapkan banyak terima kasih kepada semua pihak yang telah membantu kami dalam
pembuatan laporan ini.

Kami sadar sepenuhnya bahwa dalam laporan ini terdapat banyak kekurangan,
baik dari segi penyusunan bahasa maupun dari segi lainnya. Untuk itu kami
mengharapkan kritik dan saran, supaya kami dapat menyempurnakan laporan lainnya
diwaktu mendatang. Penyusun mengharapkan semoga dari laporan ini dapat diambil
hikmah dan manfaatnya sehingga dapat memberikan inspirasi untuk kita semua.

Semarang, Desember 2016

Penyusun

iii
 DAFTAR ISI

HALAMAN SAMPUL .................................................................................... i

RINGKASAN .................................................................................................. ii
KATA PENGANTAR ..................................................................................... iii
DAFTAR ISI ................................................................................................... iv
DAFTAR GAMBAR ....................................................................................... vi
BAB I PENDAHULUAN
1.1. Latar Belakang Masalah ........................................................................... 1
1.2. Rumusan Masalah ..................................................................................... 2
1.3. Batasan Masalah ....................................................................................... 2
1.4. Tujuan Penelitian ...................................................................................... 2
1.5. Manfaat Penelitian .................................................................................... 2
1.6. Sistematika Penulisan ............................................................................... 3
BAB II PROFIL SEKOLAH
2.1. Logo Sekolah ............................................................................................ 4
2.2. Latar Belakang Sekolah ............................................................................ 4
2.3. Visi dan Misi Sekolah ............................................................................... 5
2.4. Tujuan Sekolah ......................................................................................... 5
BAB III STUDI KASUS
3.1. Studi Kasus ............................................................................................... 6
BAB IV HASIL PENGAMATAN
4.1. Landasan Teori ......................................................................................... 8
4.2. Software System ....................................................................................... 12
4.3. Software Design......................................................................................... 15
4.4. Software Browser ..................................................................................... 15
4.5. Desain Table Database ............................................................................. 16
4.6. Use Case Diagram .................................................................................... 16
4.7. Entity Relationship Diagram .................................................................... 17
4.8. Workflow .................................................................................................. 18

iv
4.9. Desain Interface ........................................................................................ 18
4.10. Implementasi Sistem................................................................................ 24
BAB V PENUTUP
5.1. Kesimpulan ............................................................................................... 29
5.2. Saran ......................................................................................................... 29
DAFTAR PUSTAKA

v
 DAFTAR GAMBAR

Gambar 2. 1 Logo SMK Palebon..................................................................... 4

Gambar 4. 1 Desain database............................................................................ 16
Gambar 4. 2 Usecase user................................................................................ 16
Gambar 4. 3 Usecase admin............................................................................. 17
Gambar 4. 4 ERD............................................................................................. 17
Gambar 4. 5 Workflow..................................................................................... 18
Gambar 4. 6 Beranda user................................................................................ 18
Gambar 4. 7 Agenda user................................................................................. 18
Gambar 4. 8 Data pelatih user.......................................................................... 19
Gambar 4. 9 Form user..................................................................................... 19
Gambar 4. 10 Galeri user.................................................................................. 19
Gambar 4. 11 Jadwal user................................................................................ 20
Gambar 4. 12 Jenis user.................................................................................... 20
Gambar 4. 13 Nilai user.................................................................................... 20
Gambar 4. 14 Login admin............................................................................... 21
Gambar 4. 15 Agenda admin............................................................................ 21
Gambar 4. 16 Beranda admin........................................................................... 21
Gambar 4. 17 Data pelatih admin..................................................................... 22
Gambar 4. 18 Form admin................................................................................ 22
Gambar 4. 19 Galeri admin.............................................................................. 22
Gambar 4. 20 Jadwal admin............................................................................. 23
Gambar 4. 21 Jenis admin................................................................................ 23
Gambar 4. 22 Nilai admin................................................................................ 23
Gambar 4. 23 Sistem user 1.............................................................................. 24
Gambar 4. 24 Sistem user 2.............................................................................. 24
Gambar 4. 25 Sistem user 3.............................................................................. 25
Gambar 4. 26 Sistem user 4.............................................................................. 25

vi
Gambar 4. 27 Sistem user 5.............................................................................. 26
Gambar 4. 28 Sistem user 6.............................................................................. 26
Gambar 4. 29 Sistem admin 1........................................................................... 27
Gambar 4. 30 Sistem admin 2........................................................................... 27

vii
 BAB I
PENDAHULUAN

1.1. Latar Belakang Masalah

Pengembangan pendidikan akademik maupun non akademik dalam
suatu instansi pendidikan, yang salah satunya adalah sekolah, haruslah
dilakukan perbaikan untuk mencapai hasil yang maksimal dalam tindak
lanjutnya kedepan. Pendidikan akademik yang diperoleh oleh siswa ketika di
sekolah adalah pendidikan ilmu pasti, seperti fisika, matematika, kimia, dan
biologi. Adapula pendidikan ilmu sosial, seperti sosiologi, sejarah, ekonomi,
serta ilmu kesenian. Pendidikan non akademik pada sekolah diberikan ketika
siswa tersebut mengikuti ekstrakurikuler.
Di era kemajuan jaman yang semakin canggih ini, kebutuhan akan
komputer guna mengefisienkan waktu semakin berkembang pesat. Komputer
yang mana memiliki tingkat akurasi tinggi membuat komputer banyak
digunakan untuk berbagai keperluan termasuk dalam pendataan berbagai
kegiatan yang tersebar pada seluruh ekstrakurikuler di SMK Palebon
Semarang. Sistem lama (manual) yang ada di SMK Palebon itu sendiri tidak
memiliki masalah sehingga mengharuskan sistem lama tersebut bermigrasi
pada sistem baru (digital). Hal ini menciptakan peluang untuk membuat
sistem baru yang berupa sistem informasi tetapi tidak merubah bisnis proses
yang sudah ada di SMK Palebon Semarang.
Adanya sistem informasi ini akan lebih memudahkan dalam pendataan
kegiatan, menyimpan serta mengelola data kegiatan yang telah diperoleh dan
menyajikannya dalam bentuk informasi kegiatan yang telah disetujui oleh
pihak sekolah. Oleh karena itu untuk mempermudah dalam hal-hal yang telah
disebutkan, perlu adanya sistem informasi kegiatan ekstrakurikuler, sehingga

1
 2

pada proposal ini diberi judul “Sistem Informasi Kegiatan

Ekstrakurikuler Di SMK Palebon Semarang”.
1.2. Rumusan Masalah
Rumusan masalah yang didapatkan berdasarkan uraian pada latar
belakang:
1. Bagaimana sistem lama (manual) menangani kegiatan ekstrakurikuler
selama ini?
2. Bagaimana cara mengembangkan sistem informasi kegiatan
ekstrakurikuler?
3. Langkah apa yang harus dipersiapkan sebelum dan ketika
mengembangkan sistem informasi kegiatan ekstrakurikuler?
4. Bagaimana output yang dihasilkan serta manfaat apa yang diperoleh dari
sistem informasi kegiatan ekstrakurikuler?

1.3. Batasan Masalah

Dalam penelitian permasalahan hanya dibatasi pada cara serta langkah
yang dilakukan dalam pengembangan Sistem Informasi Kegiatan
Ekstrakurikuler di SMK Palebon Semarang. Dan juga output apa yang
dihasilkan oleh sistem yang diantaranya informasi nilai, lomba, jadwal serta
informasi mengenai pelatih masing-masing ekstrakurikuler.
1.4. Tujuan Penelitian
Tujuan dari penelitian ini adalah sebagai membuat suatu sistem
informasi pengelolaan arsip mengenai kegiatan ekstrakurikuler di SMK
Palebon Semarang.

1.5. Manfaat Penelitian

1.5.1. Bagi Mahasiswa
Hasil penelitian ini dapat menambah wawasan dan ilmu pengetahuan.
Manfaat lainnya, mahasiswa dapat mengetahui langkah yang harus dilakukan
dalam dalam pengembangan sistem informasi kegiatan ekstrakurikuler.
 3

1.5.2. Bagi Siswa

Dapat memperoleh informasi mengenai kegiatan ekstrakurikuler dengan
mudah. Serta dapat menjadi sarana yang memberi kemudahan sebagai bukti
untuk memperoleh surat keterangan mengikuti kegiatan ekstrakurikuler.

1.5.3. Bagi SMK Palebon

Dapat memudahkan dalam pengorganisasian arsip data mengenai
kegiatan ekstrakurikuler dan memudahkan dalam memantau kegiatan
esktrakurikuler yang ada di SMK Palebon.

1.6. Sistematika Penulisan

Sistematika penulisan dari penelitian ini adalah sebagai berikut:
1. BAB I PENDAHULUAN
Pada bab pendahuluan ini menyajikan permasalahan yang dibahas
pada penelitian ini yaitu latar belakang masalah, rumusan masalah,
batasan masalah, tujuan penelitian, manfaat penelitian dan sistematika
penulisan.

2. BAB II DASAR TEORI

Pada bab dasar teori ini menyajikan teori-teori pendukung yang
dapat mendukung dari dasar penulisan penelitian.

3. BAB III PROFIL PERUSAHAAN

Pada bab profil perusahaan ini menyajikan profil perusahaan atau
instansi yang menjadi tempat dimana penelitian dilakukan.

4. BAB IV PERANCANGAN SISTEM

Pada bab perancangan sistem ini menyajikan gambaran mengenai
sistem yang dirancang dalam penelitian ini.

5. BAB V PENUTUP
Pada bab penutup ini menyajikan kesimpulan dan saran dari
keseluruhan penelitian yang telah dilakukan.
 BAB II
PROFIL SEKOLAH

2.1. Logo Sekolah

Gambar 2. 1 Logo SMK Palebon

2.2. Latar Belakang Sekolah

SMK Palebon Semarang salah satu sekolah swasta di kota Semarang yang
keberadaannya baik secara langsung maupun tidak langsung memberikan
kontribusi terhadap Dinas Pendidikan dan Masyarakat di Kota Semarang
kususnya diwilayah Timur Kota Semarang, yang berdiri sejak 42 Tahun yang
lalu ( 18 Februari 1967 ) yang awalnya dengan nama SMEA PGRI dibawah
naungan Yayasan PGRI dan berdomisili di Jl.Plampitan No.30 menempati ruang
kelas SMEA Negeri Semarang ( sekarang dipakai SMP 35 Semarang ) dan
membuka 2 jurusan Tata Niaga dan Tata Buku masuk siang.
Tahun 1983 menempati atau pindah ke Jl. Palebon Raya No 30 Semarang
karena telah mampu membeli dan membangun lahan dan kelas sendiri, Tahun
1985 karena ada suatu hal beralih dibawah Yayasan Pendidikan Wiyata Tama
Semarang ( sudah tidak lagi dibawah Yayasan PGRI ) sejak pindah membuka 3
Jurusan dan di tambah Tata Usaha masih masuk siang dan namanya tidak lagi
SMEA PGRI Tetapi SMEA Palebon. Tahun 1987 Nama jurusan diganti

4
 5

Manajemen Keuangan, manajemen Perkantoran, Manajemen Bisnis.

Tahun 1998 berubah namanya dengan SMK Palebon Semarang masuk Pagi dan
Siang serta berangsur angsur jumlah siswa dan kelas bertambah sampai dengan
sekarang memiliki jumlah kelas 18 dengan 4 jurusan ( Akuntansi, Administrasi
Perkantoran, Penjualan dan Multimedia ).

2.3. Visi dan Misi Sekolah

2.3.1. Visi Sekolah
Menyiapkan SDM (Sumber Daya Manusia) yang Berkualitas dan
Berbudi Luhur dalam menghadapi tantangan masa depan.

2.3.2. Misi Sekolah

1. Meningkatkan mutu organisasi sekolah
2. Meningkatkan pembinaan dan pengawasan
3. Mengefektifkan kegiatan belajar mengajar (Didik)
4. Menawarkan pendidikan dan pelatihan dengan motifasi tinggi
5. Menjalin kerjasama dengan Dunia Usaha, Dunia Industri dan Dunia Kerja
dalam usaha pemasaran tamatan.

2.4. Tujuan Sekolah

1. Menyiapkan peserta Didik untuk memasuki lapangan kerja dan
mengembangkan sikap profesional.
2. Menyiapkan peserta Didik yang mempu bersaing di pasar bebas dan mampu
mengembangkan diri, serta memiliki jiwa kewirasusahaan.
3. Menyiapkan tenaga kerja tingkat menengah untuk mengisi kebutuhan dunia
Usaha/Industri pada saat ini maupun masa yang akan datang.
4. Menyiapkan tamatan agar menjadi warga negara yang produktif, adaptif dan
kreatif.
5. Meningkatkan kepercayaan dunia usaha dan dunia industri terhadap siswa
magang dan alumni SMK Palebon dalam praktek maupun bekerja.
 BAB III
STUDI KASUS

3.1. Studi Kasus

Dalam sistem ekstrakurikuler terdapat 4 aktor yang diantaranya siswa,
pelatih ekstrakurikuler, wali kelas dan admin. Aktivitas yang dilakukan oleh para
aktor:
1. Admin
a. Dapat melakukan login ke dalam sistem.
b. Dapat melihat informasi yang ada di dalam sistem.
c. Dapat menambahkan informasi yang ada di dalam sistem diantaranya
informasi lomba, informasi jadwal, informasi data pelatih, informasi
kegiatan yang telah berlangsung dan infomasi nilai.
d. Dapat meng-upload nilai siswa yang mengikuti kegiatan
ekstrakurikuler.
e. Dapat menambahkan jenis ekstrakurikuler ke dalam sistem.

2. Pelatih
a. Dapat melihat informasi yang ada di dalam sistem diantaranya
informasi lomba, informasi jadwal, informasi data pelatih, informasi
kegiatan yang telah berlangsung dan infomasi nilai.

3. Siswa
a. Dapat melihat informasi yang ada di dalam sistem diantaranya
informasi lomba, informasi jadwal, informasi data pelatih, informasi
kegiatan yang telah berlangsung dan infomasi nilai.
b. Dapat melakukan pendaftaran ekstrakurikuler di dalam sistem.

6
 7

c. Dapat mencetak form pendaftaran sebagai bukti telah mendaftar

langsung melalui sistem.

4. Wali Kelas
a. Dapat melihat informasi yang ada di dalam sistem diantaranya
informasi lomba, informasi jadwal, informasi data pelatih, informasi
kegiatan yang telah berlangsung dan infomasi nilai.
 BAB IV
HASIL PENGAMATAN

4.1. Landasan Teori

4.1.1. Sistem
Sistem adalah setiap sesuatu yang terdiri dari obyek-obyek, atau
komponen-komponen yang berkaitan, tertata dan saling berhubungan satu sama
lain sedemikian rupa sehingga unsur-unsur tersebut menjadi satu kesatuan dari
pemrosesan atau pengolahan data tertentu (Aziz & Sukadi, 2012).
Pengertian lain menyebutkan bahwa sistem adalah suatu kesatuan usaha
yang terdiri dari bagian-bagian yang berkaitan satu sama lain yang berusaha
mencapai suatu tujuan dalam suatu lingkungan kompleks. Pengertian tersebut
mencerminkan adanya beberapa bagian dan hubungan antarbagian, ini
menunjukkan kompleksitas dari sistem yang meliputi kerja sama antara bagian
yang interpenden satu sama lain (Marimin, Tanjung & Prabowo).

4.1.2. Informasi
Definisi menurut Gordon B. Davis, Informasi adalah data yang telah
diolah menjadi suatu bentuk yang paling penting bagi penerima dan
mempunyai nilai yang nyata atau yang dirasakan dalam keputusan-keputusan
sekarang dan yang akan datang (Aziz & Sukadi, 2012).
Jadi kalimat yang lebih sederhana informasi adalah produk dari
pengolahan data informasi. Informasi memiliki arti yang lebih penting lebih
berarti. Informasi bisa terdiri dari data, gambar, naskah, dokumen dan suara
yang berhubungan (Aziz & Sukadi, 2012).

4.1.3. Sistem Informasi

Sistem informasi sebagai suatu sistem yang merupakan kumpulan
elemen-elemen yang saling berinteraksi untuk mencapai tujuan tertentu,

8
 9

mempunyai beberapa komponen yang saling terkait dan membentuk

jalinan kerja yang kompak untuk mencapai sasaran (Prasojo & Prasetyo, 2005).
Pengertian lain menyebutkan, sistem informasi adalah jaringan kerja
dari prosedur-perosedur yang saling berhubungan, berkumpul bersama-sama
untuk melakukan kegiatan atau penyelesaian suatu sasaran tertentu (Unsa,
2012).
4.1.4. Data
Data berasal dari kata “Datum” yang berarti fakta atau bagian dari
fakta yang mengandung arti yang dihubungkan dengan kenyataan yang dapat
digambarkan dengan simbol, angka, huruf, dan sebagainya (Aziz & Sukadi,
2012).
Data adalah representasi dari suatu fakta, yang dimodifikasi dalam
bentuk gambar, kata, dan atau angka. Manfaat data adalah sebagai satuan
representasi yang dapat diingat, direkam, dan dapat diolah menjadi informasi
(Hidayat & Pacitan, 2012).
4.1.5. Ekstrakurikuler
Berdasarkan Peraturan Menteri Pendidikan Nasional Republik
Indonesia Nomor 39 Tahun 2008 tentang Pembinaan Kesiswaan, kegiatan
ekstrakurikuler merupakan salah satu jalur pembinaan kesiswaan (Wiratmoko,
2012).
Kegiatan ekstrakurikuler adalah kegiatan di luar mata pelajaran dan
pelayanan konseling untuk membantu pengembangan peserta didik sesuai
dengan kebutuhan, potensi, bakat dan minat mereka melalui kegiatan yang
secara khusus diselenggarakan oleh pendidik dan atau tenaga kependidikan
yang berkemampuan dan berkewenangan di sekolah atau madrasah (Halim,
2013).
4.1.6. Sistem Informasi Kegiatan Ekstrakurikuler
Sistem kegiatan ekstakurikuler adalah sebuah sistem yang menangani
segala kegiatan ekstrakurikuler mulai dari masukan data, memproses sampai
menampilkan informasi yang valid sehingga membantu lancarnya pengelolaan
 10

informasi kegiatan ekstrakurikuler. Sistem informasi ini biasanya berupa portal

web yang mempunyai beberapa fungsi kerja pengolahan data menjadi informasi,
misalnya untuk melihat jadwal kegiatan ekstrakurikuler, pengumuman kegiatan
ekstrakurikuler maupun penilaian kegiatan ekstrakurikuler (Hermawan, 2014).
4.1.7. Database
Basis adalah tempat atau ruangan untuk berkumpul. Data adalah fakta
atau kejadian dunia nyata yang mengandung suatu arti yang bias berupa simbol-
simbol, gambar-gambar, atau kata-kata (Kuswayatno, 2006).
Jadi, pengertian basis data atau database adalah representasi kumpulan
data yang saling berhubungan yang disimpan secara bersama-sama dan tanpa
pengulangan yang tidak perlu untuk memenuhi berbagai kebutuhan
(Kuswayatno, 2006).
Data perlu disimpan, diolah, dan diorganisasikan di dalam database
sedemikian sehingga informasi yang dihasilkan berkualitas dan efisien dalam
penyimpanan data. Pengorganisasian data seperti ini dinamakan Database
Management System (DBMS) (Kuswayatno, 2006).
4.1.8. Use Case Diagram
Use Case Diagram terdiri dari actor, use case dan serta hubungannya.
Use case diagram adalah sesuatu yang penting untuk memvisualisasikan,
menspesifikasikan dan mendokumentasikan kebutuhan perilaku sistem. Use
case Diagram digunakan untuk menjelaskan kegiatan apa saja yang dapat
dilakukan oleh user atau pengguna sistem yang sedang berjalan (Novita, 2015).
4.1.9. Activity Diagram
Diagram aktivitas atau activity diagram menggambarkan workflow
(aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis. Yang perlu
diperhatikan disini adalah bahwa diagram aktivitas menggambarkan aktivitas
sistem bukan apa yang dilakukan actor, jadi aktivitas yang dapat dilakukan oleh
sistem (Setiady, 2013).
 11

4.1.10. Sequence Diagram

Diagram sekuen menggambarkan kelakuan objek pada use case
dengan mendeskripsikan waktu hidup objek dan message yang dikirimkan dan
diterima antar objek (Setiady, 2013).
4.1.11. Class Diagram
Diagram Class atau kelas diagram menggambarkan struktur sistem
dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem
(Setiady, 2013).
4.1.12. Data Flow Diagram (DFD)
Data Flow Diagram merupakan suatu alat yang digunakan untuk
menggambarkan aliran data yang ada dalam sistem dan suatu proses yang
dilakukan oleh suatu sistem. Untuk dapat membuat DFD diperlukan simbol-
simbol untuk menggambarkan aliran data (Hendrianto, 2014).
4.1.13. PHP
PHP adalah singkatan dari PersonalHome Page yang merupakan
bahasa standar yang digunakan dalam dunia website. PHP adalah bahasa
pemrograman yang berbentuk script yang diletakkan didalam web server.
PHP dapat diartikan sebagai Hypertext Preeprocessor. Ini merupakan bahasa
yang hanya dapat berjalan pada server yang hasilnya dapat ditampilkan pada
klien. Interpreter PHP dalam mengeksekusi kode PHP pada sisi server disebut
serverside, berbeda dengan mesin maya Java yang mengeksekusi program
pada sisi klien (client-server) (Peranginangin, 2006).
4.1.14. JavaScript
JavaScript adalah bahasa yang berbentuk kumpulan skrip yang
fungsinya digunakan untuk menambahkan interaksi antara halaman web
dengan pengunjung halaman web. JavaScript dijalankan pada sisi klien yang
akan memberikan kemampuan fitur-fitur tambahan halaman web yang lebih
baik dibandingkan fitur-fitur yang terdapat pada HTML (Binarso, 2012).
 12

4.1.15. CSS
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web
(style sheet language) yang mengontrol format tampilan sebuah halaman web
yang ditulis dengan menggunakan penanda(markup language). Biasanya CSS
digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi
sekarang CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG
dan XUL bahkan Android (Binarso, 2012).
4.1.16. JQuery
JQuery merupakan sebuah Javascript Library atau disebut juga
perpustakaan dan kumpulan code/listing Javascript yang siap pakai. Dalam
artian sederhana, JQuery dapat digunkan untuk meringkas sebuah listing
Javascript yang panjang dalam sebuah projek pembuatan website, sehingga
akan memberikan kemudahan dalam menghadapai bagian yang mengandung
Javascript. JQuery merupakan program yang berjalan pada sisi server dan
akan ditampilkan pada web browser (Kurniawan, 2014).

4.2. Software System

4.2.1. MySQL
SQL merupakan kependekan Structured Query language. SQL
digunakan untuk berkomunikasi dengan sebuah database. SQL adalah bahasa
yang meliputi perintah-perintah untuk menyimpan, menerima, memelihara,
dan mengatur akses-akses ke basis data serta digunakan untuk memanipulasi
dan menampilkan data dari database (Rosari, 2008).
4.2.2. Xampp
Xampp merupakan merupakan paket php berbasis open source yang
dikembangkan oleh sebuah komunitas Open Source. Dengan menggunakan
xampp pengguna tidak perlu lagi melakukan penginstalan program yang lain
karena semua kebutuhan telah disediakan oleh xampp. Beberapa paket yang
 13

telah disediakan adalah Apache, MySql, Php, Filezila, dan Phpmyadmin

(Hendrianto, 2014).
4.2.3. StarUML
StarUML adalah platform pemodelan perangkat lunak yang
mendukung UML (Unified Modeling Language). StarUMLTM yang
berbasiskan pada UML versi 1.4, menyediakan sebelas jenis diagram yang
berbeda, dan mendukung pendekatan MDA (Model Driven Architecture)
dengan mendukung konsep UML profile (Triandini, 2012).
4.2.4. PHPStorm
PhpStorm adalah Integrated Development Environtment (IDE)
yang dirancang khusus untuk memfasilitasi pengembangan aplikasi Internet
yang ditulis dalam PHP. Fitur utamanya dapat dibagi menjadi kategori
sebagai berikut (Gajda, 2013):
1. Navigasi (navigation)
2. editing dan re-faktorisasi (editing and re-factorization)
3. file sinkronisasi (files synchronization)
4. VCS
5. Debugging
Aplikasi web modern terdiri dari banyak file, libraries, modul, dan
kelas yang disimpan dalam folder bersarang. PhpStorm akan membantu untuk
menavigasi seluruh dari file, libraries, modul, dan kelas. File yang telah
terbuka disajikan pada tab. Tiga kontrol: Project View, Framework MVC
Structure, dan favorites sangat berguna ketika memilih file yang akan dibuka.
Project View menyajikan kontrol seperti pohon dengan folder dan file,
Framework MVC Structure menyajikan proyek yang disusun dalam controller
dan view. Kontrol yang terakhir, favorites, berisi kelompok file yang berlabel.
Setiap kelompok dapat terdiri dari arbitrary file dan dengan demikian dapat
membuat set mudah diakses dari file yang tersimpan dalam banyak proyek
dari folder yang berbeda. Fitur yang paling canggih dari PhpStorm
menyangkut pemrograman berorientasi objek (Gajda, 2013).
 14

4.2.5. Composer
Composer, manajer dependensi, untuk men-download Laravel dan
menjaga Laravel up-to-date. Sangat terinspirasi oleh manajer dependensi
populer, Composer membawa karakteristiknya ke dunia PHP. Namun, dengan
Composer standar tidak akan menginstal paket secara global sebaliknya, hal
ini dimaksudkan untuk digunakan pada basis per-proyek (Saunier, 2014).
Composer datang sebagai executable PHP, yang ditambahkan ke
variabel Path environtment (yaitu, daftar lokasi yang dicari ketika
menjalankan perintah). Ketika diinstal dengan benar maka dapat dijalankan
pada command line dari mana saja di file system pengguna menggunakan
perintah composer (Saunier, 2014).
4.2.6. Laravel
Laravel merupakan framework PHP yang menekankan pada
kesederhanaan dan fleksibilitas pada desainnya. Laravel dirilis dibawah lisensi
MIT dengan sumber kode yang disediakan di Github. Sama seperti framework
PHP lainnya, Laravel dibangun dengan basis MVC (Model-View-Controller).
Laravel dilengkapi command line tool ynag bernama “Artisan” yang bisa
digunakan untuk packaging bundle dan instalasi bundle. Menurut survey yang
lakukan oleh Sitepoint.com pada Desember 2013 dalam popularitas
framework PHP, Laravel menduduki urutan teratas. Sehingga menjadikan
Laravel sebagai framework PHP terbaik untuk tahun 2014. Saat ini Lavarel
merupakan framework dengan versi PHP yang up-to-date, karena Laravel
menisyaratkan PHP versi 5.3 keatas (Rohman, 2014).
4.2.7. Balsamiq Mockups
Balsamiq Mockups adalah program web desainer digunakan untuk
halaman web Layout. Balsamiq Mockups menawarkan perpustakaan alat yang
dapat menyeret (dragged) dan menjatuhkan (dropped) ke layar untuk
membuat sebuah antarmuka. Elemen-elemen dapat dibuat yang dapat diklik,
supaya pengujian merasa menggunakan aplikasi. Outputnya adalah file PDF
yang dapat dikirim untuk menguji subjek (Putman, 2014).
 15

4.2.8. AdminLTE
AdminLTE Control Panel Template adalah open source admin
dashboard dan control panel tema terbaik. Dibangun di atas Bootstrap 3,
Adminlte menyediakan beragam responsif, reusable, dan umumnya
digunakan untuk komponen. fitur Adminlte adalah HTML5 & CSS3, desain
responsif, 100 + ikon, 6 skin, enchanced untuk pencetakan, ringan,
kompatibilitas browser, banyak plugin, komunitas yang aktif (Almsaeed).

4.3. Software Design

4.3.1. Corel Draw X4
Corel Draw X4 merupakan software grafis yang paling mudah
pengoperasiannya. Corel Draw merupakan pilihan terbaik bagi para desainer
grafis untuk menyelesaikan semua jenis proyek, mulai dari membuat layout
untuk media cetak sampai menciptakan gambar-gambar vektor. Gambar-
gambar yang dihasilkan Corel Draw merupakan gambar yang sangat halus
dan tajam (Wahyuni & Community, 2008).

4.4. Software Browser

4.4.1. Google Chrome
Google Chrome adalah browser yang diciptakan oleh Google dengan
desain yang sangat cantik dan minimalis, tapi dengan kemampuan yang sangat
memuaskan sehingga bisa melakukan explorasi web sangat cepat, aman, dan
mudah. Google Chrome juga sangat cepat menangani video atau program web
lainnya, teks, dan grafik (Haromainy, 2010).
 16

4.5. Desain Table Database

Gambar 4. 1 Desain database

4.6. Use Case Diagram

Gambar 4. 2 Usecase user

 17

Gambar 4. 3 Usecase admin

4.7. Entity Relationship Diagram

Gambar 4. 4 ERD
 18

4.8. Workflow

Gambar 4. 5 Workflow

4.9. Desain Interface

Berikut ini adalah tampilan perancangan interface pada sistem informasi
Ekstrakulikuler
4.9.1. User

Gambar 4. 6 Beranda user

Gambar 4. 7 Agenda user

 19

Gambar 4. 8 Data pelatih user

Gambar 4. 9 Form user

Gambar 4. 10 Galeri user

 20

Gambar 4. 11 Jadwal user

Gambar 4. 12 Jenis user

Gambar 4. 13 Nilai user

 21

4.9.2. Admin

Gambar 4. 14 Login admin

Gambar 4. 15 Agenda admin

Gambar 4. 16 Beranda admin

 22

Gambar 4. 17 Data pelatih admin

Gambar 4. 18 Form admin

Gambar 4. 19 Galeri admin

 23

Gambar 4. 20 Jadwal admin

Gambar 4. 21 Jenis admin

Gambar 4. 22 Nilai admin

 24

4.10. Implementasi Sistem

Implementasi sistem disesuaikan dengan perancangan yang telah
dibuat. Berikut merupakan tampilan antar muka dengan pengguna (User
Interface)

Gambar 4. 23 Sistem user 1

Beranda milik user berisi info-info terbaru yang diunggah oleh admin
mengenai kegiatan-kegitan ekstrakurikuler yang telah dan yang akan diadakan.

Gambar 4. 24 Sistem user 2

Jenis kegiatan ekstrakurikuler berisi jenis-jenis esktrakurikuler yang

ada di SMK Palebon Semarang. Setiap user menekan salah satu jenis
ekstrakurikuler maka akan muncul keterangan dari ekstrakurikuler itu.
 25

Gambar 4. 25 Sistem user 3

Tampilan yang muncul ketika user menekan menu jadwal, agenda,

dan data pelatih adalah seperti yang terlihat pada Gambar 4.25. Akan
disajikan table beserta keterangan berdasarkan menu yang dipilih.

Gambar 4. 26 Sistem user 4

Pada menu ini akan disajikan form yang dapat digunakan oleh siswa
ketika hendak mendaftar esktrakurikuler tanpa harus mendatangi langsung
Pembina ekstrakurikuler yang bersangkutan. Form yang telah diisi dapat
dicetak kemudian diberikan kepada Pembina sebagai bukti pendaftaran.
 26

Gambar 4. 27 Sistem user 5

Pada menu nilai disajikan tombol dengan label nama ekstrakurikuler.

Ketika user memilih salah satu jenis ekstrakurikuler yang ingin dilihat
nilainya maka hanya perlu menekan tombol sesuai kebutuhan kemudian akan
diarahkan pada daftar nilai ekstrakurikuler yang dituju.

Gambar 4. 28 Sistem user 6

Pada menu galeri akan ditampilkan foto-foto hasil dokumentasi

kegiatan ekstrakurikuler yang telah dilaksanakan.
 27

Gambar 4. 29 Sistem admin 1

Tampilan Gambar 4.29 merupakan tampilan ketika admin hendak

login ke dalam sistem.

Gambar 4. 30 Sistem admin 2

Tampilan Gambar 4.30 merupakan tampilan bagi admin untuk

memantau siapa saja yang mendaftar ekstrakurikuler melalui sistem.

Tampilan untuk menu lain milik admin memiliki tampilan yang

serupa dengan tampilan menu untuk user. Akan disajikan table beserta
keterangan berdasarkan menu yang dipilih. Yang membedakan hanya terdapat
tambahan form yang dapat digunakan oleh admin untuk menambahkan data
ke dalam sistem.
 28

Pada menu nilai untuk admin hanya disediakan form untuk

mengisikan detail nilai berdasarkan jenis ekstrakurikuler yang ada. Nilai yang
dimasukkan nantinya dapat dilihat oleh user melalui menu nilai pada tampilan
milik user.
 29

BAB V
PENUTUP

5.1. Kesimpulan
Berdasarkan hasil penelitian yang diperoleh di lapangan, sistem
informasi kegiatan ekstrakurikuler ini dapat memberikan manfaat dalam
pengoorganisasian kegiatan ekstrakurikuler di SMK Palebon Semarang.
Manfaat utama yang diharapkan dapat dirasakan oleh pihak sekolah yaitu
arsip-arsip mengenai kegiatan ekstrakurikuler di SMK Palebon dapat
terorganisir dengan baik. Tidak perlu memakan waktu yang lama untuk
mencari data mengenai kegiatan ekstrakurikuler. Pendataan mengenai
kegiatan, jadwal serta nilai ekstrkurikuler siswa dapat diakses secara bebas.
Sistem ini dapat menjadi alternatif untuk menyempurnakan sistem lama
(sistem konvensional / manual) tanpa mengubah secara total bisnis proses
yang berjalan selama ini.

5.2. Saran
Adapun saran untuk Sistem Informasi Ekstrakurikuler SMK Palebon
Semarang adalah diperlukan adanya pengembangan lebih lanjut terhadap
sistem serta peninjauan lebih terhadap kesesuaian sistem yang dibuat dengan
lingkungan pengimplementasian yakni SMK Palebon agar dapat
meningkatkan mutu sistem yang saat ini masih pada tahap standar.

29
 30

DAFTAR PUSTAKA

Almsaeed, A. (n.d.). AdminLTE Control Panel Template. Retrieved from Almsaeed

Studio: https://almsaeedstudio.com/

Aziz, M. N. L., & Sukadi. (2012). E02 - Analisis dan Perancangan Sistem Informasi
Pengolahan Data Pernikahan, 1, 10–16.

Binarso, Y. A. (2012). Pembangunan Sistem Informasi Alumni Berbasis Web .

Journal of Informatics and Technology, Vol 1, No 1 , 72-84.

Gajda, W. (2013). Instant PhpStorm Starter. Birmingham: Packt Publishing Ltd.

Halim, S. R. (2013). MINAT SISWI SMA Dr. SOETOMO SURABAYA PADA

KEGIATAN EKSTRAKURIKULER FUTSAL, 0–16.

Hendrianto, D. E. (2014). Pembuatan Sistem Informasi Perpustakaan Berbasis

Website Pada Sekolah Menegah Pertama Negeri 1 Donorojo Kabupaten
Pacitan . Indonesian Journal on Networking and Security , 57-59.

Hermawan, F. (2014). SISTEM INFORMASI KEGIATAN EKSTRAKURIKULER.

Hidayat, T., & Pacitan, M. (2012). Pembuatan Sistem Informasi Administrasi

Pengelolaan Sewa Alat Berat Pada Unit Pelaksana Teknis Bina Marga
Pacitan, 1, 50–57.

Kurniawan. (2014). perancangan dan pembuatan program yang dapat dipergunakan

sebagai pembanding atau acuan di dalam pembahasan masalah. e-Jurnal ,
12-27.

Kuswayatno, L. (2006). Mahir dan Terampil Berkomputer. Grafindo.

Marimin, Tanjung, H., & Prabowo, H. Sistem Informasi Manajemen Sumber daya
Manusia. Jakarta: Grasindo.
 31

Novita, R. (2015). SISTEM INFORMASI PENJUALAN PUPUK BERBASIS E-

COMMERCE. Jurnal Teknoif , 1-6.

Peranginangin, K. (2006). Aplikasi WEB dengan PHP dan MySQL. Yogyakarta:

Andi Offset.

Prasojo, L. D., & Prasetyo, E. B. (2005). Sistem Informasi Manajemen Dalam

Pembelajaran. Majalah Ilmiah Pembelejaran.

Putman, S. (2014). Using Prototyping In Instructional Design. United Stated of

America: atd Learning Technologies.

Rosari, R. W. (2008). PHP dan MySQL untuk pemula. Yogyakarta: Andi Offset.

Saunier, R. (2014). Getting Started with Laravel 4. Birmingham: Packt Publishing

Ltd.

Setiady, H. (2013). Sistem Informasi Pemesanan Dan Penjualan Berbasis Web Pada
Dewi Florist . Jurnal Hendy Setiady , 1-7.

Triandini, E. (2012). Step By Step Desain Proyek Menggunakan UML. Yogyakarta:

CV. Andi Offset.

Unsa, S. F. T. I. (2012). PERANCANGAN SISTEM INFORMASI KOORDINASI

DINAS PENDIDIKAN KABUPATEN REMBANG BERBASIS WEB Ismu
‘Adhim, Abdillah Baraja, 1.

Wiratmoko, A. (2012). Pengaruh Kegiatan Ekstrakurikuler Robotika Terhadap

Kecerdasan Emosional Siswa Di Smk Negeri 3 Yogyakarta. Jurnal
Penelitian.