1
1. Pendahuluan
Kotabahasa Salatiga didirikan pada tanggal 19 Juli 2004, Kotabahasa Salatiga pada awalnya berdiri atas kerjasama dengan Kotabahasa Semarang. Namun, sejak
tahun 2008, Kotabahasa Salatiga telah berdiri sendiri. Lembaga pendidikan ini fokus pada pelatihan Bahasa asing, yang meliputi Bahasa Inggris, Indonesia,
Jepang, Mandarin, Perancis, Jerman, Arab dan Belanda. Setiap program bahasa memiliki tingkatan level sesuai dengan hasil kemampuan murid yang dilakukan
dengan melaksanakan tes awal kemampuan bahasa pada saat pendaftaran kursus. Berdasarkan hasil tanya jawab dengan Koordinator Program, diketahui bahwa
sampai saat ini di Kotabahasa memiliki jumlah total 60 pengajar. Proses bisnis Kotabahasa Salatiga menerapkan sistem pendidikan kursus bahasa sebanyak 24
kali pertemuan selama 90 menit dengan jadwal yang ditentukan oleh permintaan murid. Untuk saat ini kotabahasa memiliki murid yang terdapat dalam kursus
bahasa inggris, jepang, mandarin dan german.
Sistem pengolahan data yang di Kotabahasa masih menggunakan kertas dengan tulisan tangan. Pada data pengajar disimpan dalam sebuah buku dengan
mencantumkan biodata singkat dan foto pengajar, pada data murid setelah melakukan pendaftaran dan penentuan pengajar dalam kelas, data murid ditulis
tangan pada sebuah formulir kertas yang di dalam formulir tersebut terdapat nama murid dan info kontak murid. Sedangkan pada data nilai, setelah melakukan tes
pada tahap yang ditentukan, hasil tes ditulis tangan dalam sebuah formulir kertas kemudian dihitung jumlah rata-rata nilai. Pengolahan data dengan menggunakan
tulisan tangan dan disimpan dalam kertas kurang efisien dan cepat dalam menangani permasalahan seperti mencari data yang akan digunakan.
Dari masalah ini dibutuhkan sistem informasi pengolahan data yang mampu mengelola data penilaian murid yang dapat diakses dengan nyaman. Responsive
Web Design merupakan suatu konsep perancangan tampilan website yang menyesuaikan layar browser untuk menampilkan sebuah website. Pengguna
nantinya tidak hanya menggunakan komputer saja demi mendapat keefisienan dalam mengakses website, melainkan dengan mengkases melalui device yang
berbeda-beda seperti smartphone, laptop ataupun tablet yang terkoneksi dalam jaringan internet.
Rumusan masalah yang ada didalam penelitian ini adalah bagaimana merancang sistem informasi pengolahan data nilai di Kotabahasa Salatiga.
Penelitian ini bertujuan untuk menganalisis kebutuhan sistem informasi pengolahan data, merancang sistem informasi pengolahan data sesuai kebutuhan,
serta menguji rancangan sistem ke dalam aplikasi.
2. Tinjauan Pustaka
Penelitian dengan judul Sistem Informasi Nilai Akademik Siswa Berbasis Web Studi Kasus : SMU Muhammadiyah 7 Sawangan. Aplikasi ini
menghasilkan sistem informasi akademik berbasis web menggunakan tahapan- tahapan dari pengembangan Sistem Development Life Cyrcle SLDC, yaitu
Perencanaan, Analisis, Perancangan, Pemrograman, Pengujian, Operasi dan
2
Pemeliharaan dengan menggunakan bahasa pemrograman yaitu PHP dan MySql [2].
Pada penelitian berjudul Sistem Informasi Akademik Lembaga Kursus dan Pelatihan Berbasis Web yang membahas tentang sistem informasi akademik
yang dibangun dengan menggunakan model sekuensial linier. Sistem informasi akademik dibangun dengan menggunakan bahasa pemrograman
PHP dan menggunakan DBMS MySQL. Sistem informasi akademik yang dihasilkan dapat melakukan pengelolaan data akademik seperti pengelolaan
data pengguna, data siswa, data nilai, data jadwal, dan pengelolaan laporan.
Berdasarkan penelitian yang pernah dilakukan terkait dalam membangun sistem informasi akademik berbasis website maka akan dilakukan penelitian yang
membahas mengenai pembuatan sistem informasi pengolahan data akademik, yang dikhususkan pada pengolahan data nilai di Kotabahasa Salatiga yang
berbasis website sehingga dapat membantu pihak pengelola dalam mengakses informasi dan melakukan pengolahan data kursus secara baik. Sistem yang
dibangun akan menampilkan informasi dalam web, yaitu sistem informasi untuk info sekolah secara umum, data murid, data pengajar dan data nilai. Sistem ini
dibangun dengan menggunakan pemrograman PHP dan framework bootstrap sebagai acuan dalam mendesain website sehingga responsive sedangkan database
menggunakan MySQL. Web yang dibangun akan memberikan perbedaan hak akses pada tiap-tiap pengguna yag akan diidentifikan lewat account. Pengguna
dibedakan atas pengajar dan admin.
Web Responsive Design pada dasarnya menujukkan bahwa situs web dibuat menggunakan W3C CSS3 media dengan proporsi berbasis grid, untuk adaptasi
tata letak dengan melihat lingkungan platform dan gambar dengan hasil yang fleksibel, pengguna di berbagai platform dan browser akan memiliki akses ke satu
sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran, panning dan scrolling. Web Responsive Design terdapat 3
bagian unsur dari Responsive Web Design yaitu Flexible Grid, merupakan teknik untuk tampilan yang berdasarkan proporsi dan dari nilai piel diterjemahkan ke
dalam persen, dalam penerapannya dibuthakn sebuah rumus sederhana yatu target context = result. Flexible Images, merupakan teknik untuk mensinkronkan
gambar[3].
Bootstrap adalah sebuah framework css yang dapat digunakan untuk
mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini
Bootstrap dikembangkan secara open source dengan lisensi MIT. Bootstrap telah menyediakan banyak sekali class CSS dan plugin JavaScript yang bisa langsung
dipakai untuk membantu mempermudah dalam membuat halaman web. Karena kemudahaan
penggunaan, banyaknya
komponen dan
kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang
paling banyak digunakan di dunia. Pada dasarnya Bootstrap merupakan sebuah kumpulan class CSS dan plugin JavaScript yang sudah siap pakai[4].
Di dalam bootstrap disediakan sistem grid, dimana sistem grid ini menggunakan layer tag div, sehingga pengaturan layar lebih fleksible ketika
3
fitur responsive web dimanfaatkan. Sistem grid boostrap ini memungkinkan ukuran lebarnya dibagi ke dalam 12 kolom.
Gambar 1
Sistem Grid Bootstrap[4]
Gambar 1 menunjukkan pembagian grid yang bisa dilakukan. Sistem grid bootstrap memiliki 4 kelas yaitu, 1 xs, digunakan untuk telepon genggam; 2 sm,
digunakan untuk perangkat tablet; 3 md, digunakan untuk tampilan dekstop; 4 lg, digunakan untuk tampilan dekstop lebih besar. Dari keempat kelas tersebut
akan dikombinasi untuk menciptakan tampilan yang lebih dinamis dan fleksibel[4].
Kode 1 Dasar Sistem Grid Pada Bootstrap
Pengolahan data adalah segala macam pengolahan terhadap data dari berbagai macam pengolahan terhadap data untuk membuat data itu berguna sesuai dengan
hasil yang diinginkan dapat segera dipakai. Menu rut Jogiyanto H. M “Pengolahan
data adalah manipulasi dari data ke dalam bentuk yang lebih berguna berarti”.
Dengan demikian dapat disimpulkan bahwa “Pengolahan data merupakan
kegiatan yang dilakukan dengan meggunakan masukan berupa data dan menghasilkan informasi yang bermanfaat untuk tujuan sesuai dengan
direncanakan”. Suatu proses pengolahan data terdiri dari 3 tahapan dasar, yang disebut
dengan siklus pengolahan data data processing cycle, yaitu input, processing dan output [5].
1. div class=container 2. div class=row
3. div class=col-xs-mddiv 4. div
5. div class=row 6. div class=col-xs-md div
7. div class=col-xs-md div 8. div class=col-xs-md div
9. div 10. div class=row
11. ... 12. div
13. div
4
Gambar 2 Proses Pengolahan Data [5]
Gambar 2 menunjukkan proses pengolahan data dimana suatu data dimasukkan ke dalam suatu aplikasi kemudian diolah dan menghasilkan
keluaran berupa laporan. Tiga tahap dasar dari siklus pengolahan data tersebut dapat dikembangkan lebih lanjut. Siklus pengolahan data yang dikembangkan
dapat ditambahkan tiga atau lebih tahapan lagi, yaitu origination, storage dan distribution.
Gambar 3 Tahap Siklus Pengolahan Data [5]
Gambar 3 merupakan tahap dari siklus pengolahan data itu sendiri. Origination merupakan proses dari menyediakan data yang ada, input
merupakan proses memasukkan data, processing merupakan tahap memproses data, output merupakan hasil keluaran data, distribution merupakan proses
mendistibusi data jika data perlu diproses ulang maka tahap akan dilalui sekali lagi, pada storage, data yang diproses sebelumnya akan disimpan.
3. Metode dan Perancangan Sistem