perancangan sistem pengolahan data nilai pada tempat...

23
Perancangan Sistem Pengolahan Data Nilai Pada Tempat Kursus Bahasa Asing (Studi Kasus : Kotabahasa Salatiga) Artikel Ilmiah Peneliti : Angela Firantia (672009294) Suprihadi, S.Si., M.Kom. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga 2016

Upload: dangtram

Post on 27-Feb-2018

226 views

Category:

Documents


5 download

TRANSCRIPT

Perancangan Sistem Pengolahan Data Nilai

Pada Tempat Kursus Bahasa Asing

(Studi Kasus : Kotabahasa Salatiga)

Artikel Ilmiah

Peneliti :

Angela Firantia (672009294)

Suprihadi, S.Si., M.Kom.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

2016

i

ii

iii

iv

v

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. Menurut 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-md"></div>

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

Penelitian yang dilakukan. Diselesaikan melalui tahapan penelitian yang

terbagi dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data;

2) Perancangan sistem; 3) Perancangan aplikasi/program; 4) Implementasi dan

pengujian sistem serta analisis hasil uji; dan 5) Penulisan laporan hasil penelitian.

5

Gambar 4 Tahapan Penelitian [6]

Tahapan penelitian pada Gambar 4, dapat dijelaskan sebagai berikut. Tahap

pertama: analisis kebutuhan dan pengumpulan data, yaitu melakukan analisis

kebutuhan apa saja yang dibutuhkan dari pihak Kotabahasa Salatiga misalnya

tentang pengelolaan data murid, data pengajar dan sistem pengolahan data nilai

yang ada.

Kegiatan pengumpulan data dalam penelitian melalui proses wawancara yaitu

dengan melakukan tanya jawab dengan staff administrator dan koodinator

program di Kotabahasa Salatiga, adapun hasil yang didapat yaitu berupa data

bahasa, data murid, data pengajar, data sarana prasarana mengenai tempat kursus

dan pengumpulan data pada kegiatan dokumentasi yang dilakukan dengan melihat

data-data atau catatan-catatan dan dokumen yang terkait dengan sistem informasi

akademik di Kotabahasa Salatiga.

Sistem penilaian kursus bahasa dilakukan dengan melakukan tes pada saat

pertemuan terakhir. Adapun tes yang dilakukan yaitu speaking, listening, reading,

writing dan structure. Kemudian setelah diadakan tes maka setiap nilai dijumlah

dan dibagi untuk menghasilkan nilai rata-rata yang menjadi acuan untuk bisa

melanjutkan ke tingkat level yang lebih tinggi.

Tahap kedua: perancangan sistem yang meliputi perancangan proses

menggunakan Unified Modelling Language (UML) yaitu perancangan use case

diagram, class diagram,componet diagram dan deployment diagram. Kemudian

membangun aplikasi dengan menggunakan metode prototype yang dijelaskan

pada gambar 5 dengan tujuan supaya aplikasi yang dibangun sesuai dengan

kebutuhan Kotabahasa Salatiga. Perancangan arsitektur dari sistem yang

dibangun, yaitu perancangan arsitektur service oriented. Perancangan antarmuka,

yaitu merancang antarmuka yang berfungsi sebagai penghubung interaksi antara

user dengan sistem.

Analisis Kebutuhan dan Pengumpulan Data

Perancangan Sistem meliputi Perancangan Proses (UML),

Perancangan Arsitektur, Perancangan Database, Perancangan

Antarmuka

Perancangan Aplikasi/Program

Pengujian Sistem serta Analisis Hasil Pengujian

Penulisan Laporan Hasil Penelitian

6

Gambar 5 Protoyping Model [7]

Metode prototyping melewati tiga proses, yaitu pengumpulan kebutuhan

(listen to customer), perancangan(build/revise mock-up), dan uji coba(customer

test drives mock-up). Proses-proses tersebut dapat dijelaskan sebagai berikut :

1. Pengumpulan kebutuhan: Pada tahap ini dilakukan pengumpulan kebutuhan

dari sistem dengan cara mendengar keluhan dari pelanggan. Untuk membuat

suatu sistem yang sesuai kebutuhan, maka harus diketahui terlebih dahulu

bagaimana sistem yang sedang berjalan kemudian mengetahui masalah yang

terjadi.

2. Perancangan: Pada tahap ini perancangan dilakukan cepat dan rancangan

mewakili semua aspek software yang diketahui, dan rancangan ini menjadi

dasar pembuatan prototype.

3. Uji Coba : Pada tahap ini, prototype dari sistem di uji coba oleh pengguna.

Kemudian dilakukan evaluasi kekurangan-kekurangan dari kebutuhan

pengguna. Pengembangan kemudian kembali mendengarkan keluhan dari

penggu untuk memperbaiki prototype yang ada.

Perulangan ketiga proses ini terus berlangsung hingga semua kebutuhan

terpenuhi. Prototype dibuat bertujuan agas memuaskan kebutuhan client dan

untuk memahami kebutuhan client lebih baik. Prototype yang dibuat dapat

dimanfaatkan kembali untuk membangun software lebih cepat, namun tidak

semua prototype bisa dimanfaatkan sekalipun prototype memudahkan komunikasi

antar developer dan client serta membuat client mendapat gambaran awal dari

prototype.

Tahap ketiga: perancangan aplikasi/program yaitu merancang

aplikasi/program sesuai kebutuhan sistem berdasarkan perancangan sistem yang

telah dilakukan. Misalnya bagaimana framework bootstrap berperan terhadap

aplikasi/program untuk menampilkan data nilai menjadi lebih terorganisir dan

lebih efisien.

Tahap keempat: implementasi dan pengujian sistem, serta analisis hasil

pengujian, yaitu mengimplementasikan aplikasi yang sudah dibuat kemudian

dilakukan pengujian, selanjutnya melakukan analisis untuk melihat apakah

aplikasi yang telah dibuat sudah sesuai dengan yang diharapkan atau tidak ada

7

error, jika belum sesuai makan akan dilakukan perbaikan. Pengujian sistem

menggunakan metode blackbox.

Tahap kelima: penulisan laporan hasil penelitian, yaitu mendokumentasikan

proses penelitian yan sudah dilakukan dari tahap awal hingga akhir ke dalam

tulisan, yang nantinya akan menjadi laporan hasil penelitian.

Perancangan sistem menggunakan Unified Modelling Language (UML),

yaitu use case diagram, activity diagram, class diagram dan deployment diagram.

Use case diagram merupakan diagram yang menjelaskan manfaat sistem, jika

dilihat dari sudut pandang orang atau sesuatu yang berada di luar sistem yang

sedang dibangun (aktor). Jenis diagram ini dapat digunakan untuk menangkap

requirements sistem dan untuk memahami bagaimana sistem seharusnya bekerja.

Gambar 6 Use Case Diagram

Gambar 6 menunjukkan use case diagram pada sistem, dijelaskan sebagai

berikut. Sistem memiliki dua aktor yakni user dan admin. User adalah pengajar di

Kotabahasa Salatiga yang berfungsi untuk mengelola data nilai setiap murid pada

suatu kelas. Sedangkan admin adalah orang yang mempunyai hak untuk

memasukkan data master yang dibutuhkan oleh sistem dalam hal ini dilakukan

oleh bagian administrator dan koordinator program di Kotabahasa Salatiga.

Admin mempunyai hak dalam pengolahan data murid, data pengajar, data kelas,

data pengguna website, dan pengolahan laporan. Sedangkan user mempunyai hak

dalam pengelohan data nilai.

<<extend>>

data murid

data pengajar

data bahasa

data program pelatihan

mencetak laporan kelas

data kelas per bahasa

data ruangan kelas

administrator

mencetak laporanuser (pengajar)

data nilai

upload data excel murid

tambah data murid dengan form

edit data muridhapus data murid

upload data excel pengajar

tambah data pengajar dengan form

edit data pengajar

hapus data pengajar

tambah bahasa

edit bahasa

hapus bahasa

tambah program pelatihan

edit program pelatihan

hapus program pelatihan

tambah data kelashapus data kelas

edit data kelas

tambah data ruangan

edit data ruangan

hapus data ruangan

input data nilai

<<extend>>

<<extend>><<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>> <<extend>><<extend>>

<<extend>><<extend>>

<<extend>>

<<extend>>

<<extend>>

8

Gambar 7 Class Diagram

Gambar 7 merupakan class diagram yang menggambarkan struktur sistem

dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem.

Kelas memiliki atribut dan operasi. Atribut merupakan variabel-variabel yang

dimiliki oleh suatu kelas. Operasi atau metode adalah fungsi-fungsi yang dimiliki

oleh suatu kelas.

9

Gambar 8 Component Diagram

Gambar 8 menunjukkan component diagram sistem yang menggambarkan

alokasi semua class dan object ke dalam komponen dalam desain fisik system

software, termasuk pengaturan dan kebergantungan antar komponen software.

Gambar 9 Deployment Diagram

Deployment Diagram adalah diagram yang menggambarkan detail

bagaimana komponen di-sebar (di-deploy) ke dalam infrastruktur sistem. Gambar

9 menunjukkan deployment diagram dimana aplikasi web disebarkan pada sebuah

komputer server dimana di dalamnya sudah terdapat aplikasi web dan mySQL

sebagai database management system.

4. Hasil dan Pembahasan

Pada bagian ini memuat hasil dan pembahasan yang meliputi pengujian website

sistem pengolahan data nilai di Kotabahasa Salatiga. Dalam aplikasi sistem

terdapat dua macam antarmuka yaitu antarmuka utama untuk user administrator

dan antarmuka utama untuk user pengajar. Pada dasarnya, kedua antarmuka

tersebut memiliki persamaan dan hanya dibedakan ruang lingkupnya.

Gambar 10 Pilihan Menu Utama Admin

PC / Phone

aplikasi web

komputer server

aplikasi

web

database

10

Gambar 10 merupakan pilihan menu utama admin. Pada menu yang terletak

disamping disediakan untuk mengolah data master dalam pengolahan data. Menu

pilihan tersebut yaitu 1) master murid, untuk mengolah data murid; 2) master

pengajar,untuk mengolah data pengajar; 3) admin, mengolah data admin; 4)

master kelas, untuk mengolah data kelas. Terdapat 2 sub menu yaitu, menu data

kelas dan data kelas murid; 6) master course, untuk mengelola pilihan bahasa,

ruangan dan program; 7) Laporan, untuk mengelola data laporan yang akan

dicetak. Halaman website disediakan menu akun yang memiliki sub menu akun

profil dan logout.

Gambar 11 Halaman Data Murid

Gambar 11 merupakan tampilan data murid yang ditampilkan dalam tabel data

dengan fasilitas yaitu, form search yang digunakan untuk mencari data secara

keseluruhan sesuai dengan keyword yang dimasukkan oleh pengguna. Pada setiap

data terdapat pilihan menu tombol untuk mengatur data seperti mengubah data,

menghapus data dan mengunduh foto murid.

Gambar 12 Form Input Kelas

Gambar 12 merupakan form input kelas, dimana data-data yang ditambahkan

adalah kriteria dari kelas yang di buka sesuai permintaan murid saat pendaftaran

masuk kursus kemudian disesuaikan dengan fasilitas yang disediakan seperti

pemilihan pengajar dan ruangan.

11

Gambar 13 Form Input Data Murid dalam Kelas

Gambar 13 merupakan form input data murid dalam kelas, dimana setelah data

kelas dibuat maka disediakan form untuk menambahkan data murid yang akan

mengikuti kelas yang telah dibuka tersebut. Didalam form terdapat pilihan kelas

dan pilihan nama murid yang akan dipilih. Untuk pemilihan murid, disediakan

pilihan berupa checkbox, sehingga dalam satu kelas bisa dimasukkan beberapa

jumlah murid yang ada.

Kode Program 2 Kode Untuk Menambahkan Data Murid

Gambar 14 Halaman Utama Pengajar

Gambar 14 merupakan tampilan pilihan menu yang tersedia pada halaman

pengajar. Terdapat 2 menu utama yang dikelola oleh pengajar. Pada pilihan menu

1. $id_kelas = $_POST['id_kelas'];

2. $jumID = $_POST['jumMK'];

3. for($i = 1; $i <= $jumID; $i++)

4. {

5. $mk = $_POST['id'.$i];

6. if (!empty($mk))

7. {

8. $query = "INSERT INTO kelas_murid VALUES('$id_kelas', '$mk',0,0,0,0,0)";

9. mysql_query($query);

10. }

11. }

12

kelas disediakan untuk melihat data murid pada kelas yang diajar oleh pengajar,

menu nilai ditampilkan data beserta pilihan untuk input nilai para murid dan pada

menu laporan nilai disediakan untuk mencetak data murid yang diproses yang ada

pada kelas yang diajar.

Gambar 15 Form Input Nilai

Gambar 15 merupakan tampilan form input nilai yang dipilih, nilai-nilai akan

dimasukkan secara simultan sesuai dengan data murid. Setelah nilai-nilai

dimasukkan akan disimpan ke dalam database dan dihitung jumlah rata-rata dari

kriteria nilai tersebut. Perhitungan jumlah rata-rata nilai yang menjadi hasil akhir

kursus bahasa dilakukan saat mencetak laporan dalam format pdf.

Kode Program 3 Kode Input Nilai

1. $jumMhs = $_POST['n'];

2. $kodeMK = $_POST['kodemk'];

3. for ($i=1; $i<=$jumMhs; $i++)

4. {

5. $nimMhs = $_POST['id_murid'.$i];

6. $nilai_speaking = $_POST['nilai_speaking'.$i];

7. $nilai_listening = $_POST['nilai_listening'.$i];

8. $nilai_reading = $_POST['nilai_reading'.$i];

9. $nilai_writing = $_POST['nilai_writing'.$i];

10. $nilai_structure = $_POST['nilai_structure'.$i];

11. $query = mysql_query("UPDATE kelas_murid

12. SET nilai_structure = $nilai_structure,

13. nilai_listening = $nilai_listening,

14. nilai_reading = $nilai_reading,

15. nilai_writing=$nilai_writing,

16. nilai_speaking = $nilai_speaking

17. WHERE id_murid = '$nimMhs' AND id_kelas = '$kodeMK'")

18. or die("Query failed with error: ".mysql_error());

19. }

13

Gambar 16 tampilan laporan penilaian

Gambar 16, merupakan tampilan dari penilaian yang telah dilakukan, nilai-nilai

yang telah dimasukkan oleh pengajar akan diproses untuk selanjutnya

mendapatkan hasil berupa keterangan para murid untuk maju ke level berikutnya.

Gambar 17 Uji Responsive Web Di Browser Chrome

14

Gambar 17 merupakan salah satu uji coba aplikasi pada browser Chrome, dari

hasil gambar yang ditampilkan terlihat aplikasi website bisa beradaptasi terhadap

ukuran browser yang diatur dengan resolusi kecil ataupun besar.

Gambar 18 Uji Responsive Web Di Browser Mozilla

Gambar 18 merupakan uji coba kembali dilakukan, untuk kali ini

menggunakani browser Mozilla Firefox, ukuran website beradaptasi dengan

resolusi kecil ataupun resolusi besar.

Gambar 19 Uji Responsive Web Di Samsung Tab 3

15

Gambar 19 merupakan salah satu uji coba aplikasi ke sebuah device tablet

dengan menggunakan samsung tab 3 dimana dari segi tampilan telah

menyesuaikan ukuran layar perangkat.

Penelitian yang dilakukan menghasilkan aplikasi sistem informasi pengolahan

data nilai. Untuk melihat apakah aplikai yang dihasilkan sudah berfungsi dengan

benar, maka dilakukan pengujian, menggunakan metode pengujian Black Box.

Metode pengujian black box merupakan metode pengujian yang bersifat

fungsional, yaitu menguji apakah setiap fungsi yang ada pada aplikasi sudah

berjalan dengan benar dan sesuai dengan perancangan sistem. Hasil pengujian

sistem dengan menggunakan metode Black Box dapat dilihat pada Tabel 1.

Tabel 1 Hasil Pengujian Sistem Dengan Black Box

No Item Uji Pengujian Hasil Uji Status

1

Login (admin

dan pengajar)

Memasukkan username

dan password yang

benar

Memasukkan username

dan password yang

salah

Dilakukan pengecekan data

login. Jika data benar maka

user dapat menjalankan

sistem

Menampilkan pesan

kesalahan dalam

memasukkan data login

Berhasil

Berhasil

2

Pengolahan

data murid,

pengajar

Menambah data murid,

pengajar

Mengubah data murid,

pengajar

Menghapus data murid,

pengajar

Pilih Simpan, data tersimpan

di database dan ditampilkan

Pilih data yang mau diubah,

ubah data, pilih Simpan, data

tersimpan di database

Pilih data yang mau dihapus,

pilih Hapus, konfirmasi

hapus data, pilik OK, data

terhapus dari database

Berhasil

Berhasil

Berhasil

3

Pengolahan

Data kelas,

ruangan,

bahasa,

program

Menambah data kelas,

ruangan, bahasa,

program pelatihan

Mengubah data kelas,

ruangan, bahasa,

program pelatihan

Menghapus data kelas,

ruangan, bahasa,

program pelatihan

Pilih Simpan, data tersimpan

di database dan ditampilkan

Pilih data yang mau diubah,

ubah data, pilih Simpan, data

tersimpan di database

Pilih data yang mau dihapus,

pilih Hapus, konfirmasi

hapus data, pilik OK, data

terhapus dari database

Berhasil

Berhasil

Berhasil

16

4

Pengolahan

proses penilaian

murid

Menambah daftar nilai

Mengubah daftar nilai

Menghapus daftar nilai

Pilih Simpan, data tersimpan

di database dan ditampilkan

Pilih data yang mau diubah,

ubah data, pilih Simpan, data

tersimpan di database

Pilih data yang mau dihapus,

pilih Hapus, konfirmasi

hapus data, pilik OK, data

terhapus dari database

Berhasil

Berhasil

Berhasil

5

Pengolahan

laporan data

nilai, laporan

data murid

Melihat dan mencetak

data yang telah tersedia

Mengubah data

Menghapus data

Pilih Cetak Data maka data

akan terlihat kemudian

disimpan dalam format pdf

Pilih data yang mau diubah,

ubah data, pilih Simpan, data

tersimpan di database

Pilih data yang mau dihapus,

pilih Hapus, konfirmasi

hapus data, pilik OK, data

terhapus dari database

Berhasil

Berhasil

Berhasil

5. Kesimpulan

Kesimpulan yang diperoleh setelah melalui tahap-tahap pembuatan aplikasi

Sistem Pengolahan Data Nilai dengan menggunakan bahasa pemrograman php

dan Framework Bootstrap adalah sebagai berikut : 1) Pada tahap perancangan

aplikasi dirumuskan perilaku dari aplikasi website, untuk nantinya dapat

diimplementasikan menjadi sebuah aplikasi website yang utuh; 2) Pengujian

aplikasi menggunakan blackbox menunjukkan aplikasi Sistem Pengolahan nilai

dapat bekerja dengan baik sesuai kebutuhan dalam batasan masalah; 3) Aplikasi

website memungkinkan proses pengolahan nilai untuk mendapatkan laporan yang

dilakukan dengan mudah.

6. Daftar Pustaka

[1] Tanggela, Seprianus, 2013, Perancangan Sistem Informasi Akademik

BerbasisWeb Pada SMA Negeri 1 Wawena Tengah, Skripsi FTI,

Universitas Kristen Satya Wacana.

[2] Mas’ud, Ibnu, 2009, Sistem Informasi Nilai Akademik Siswa Berbasis Web

(Studi Kasus : SMU Muhammadiyah 7 Sawangan).

17

[3] Herbowo, Agus Rahmat.2012. Web Responsive Design untuk Situs Berita

Menggunakan Framework Codeigniter. http://gunadarma.ac.id. Diakses

tanggal 9 Mei 2016.

[4] Khoirul, Hasin.2015.Seri Bootstrap.http://ilmukomputer.org/2015/04/22/seri-

1-bootstrap-persiapkan-dirimu. Diakses tanggal 9 Mei 2016

[5] Hartono, Jogiyanto. 1999. Analisis dan Desain Sistem Informasi, Andi Offset,

Yogyakarta.

[6] Hasibuan, Zainal A., 007, Metodologi Penelitian Pada Bidang Ilmu Komputer

dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi, Jakarta : Ilmu

Komputer Universitas Indonesia

[7] Pressman, Roger, 2001, Rekayasa Perangkat Lunak Pendekatan Praktisi

(Buku Satu), Yogyakarta: Andi