Perancangan dan Implementasi Sistem Penilaian Akademik Siswa … · 2013. 5. 7. · 1 1....

16
1 1. Pendahuluan Perkembangan teknologi saat ini sangatlah bervariasi di mana banyak muncul teknologi baru dimulai dari teknologi web, teknologi mobile sampai pada teknologi perangkat keras. Teknologi web tersebut berbasis javascript misalnya jquery.js, mootools.js, prototype.js, ext.js, YUI Library dan lain-lain. Berdasarkan banyaknya pustaka yang telah tersedia, tentu pengembang aplikasi harus mengetahui kelebihan dan kelemahan dari masing-masing pustaka. Pada penelitian ini diangkat teknologi YUI Library yang tergolong masih baru dan jarang digunakan. YUI Library adalah suatu toolkit bersifat Open Source yang dikembangkan untuk memudahkan pengembang aplikasi dalam membuat antarmuka aplikasi web. YUI Library mendukung sejumlah kontrol dan utilitas yang sangat bermanfaat bagi pengembang aplikasi web. Rich Text Editor, TreeView, Paginator, dan DataTable. Dari Perkembangan tersebut sebenarnya ditujukan agar teknologi dapat semakin mudah digunakan dan dimanfaatkan untuk membantu memudahkan pekerjaan manusia di segala bidang. Salah satu bidang yang dapat menggunakan perkembangan teknologi adalah bidang pendidikan. Perkembangan pendidikan yang juga pesat membutuhkan adaptasi yang tidak mudah agar dunia pendidikan dapat bersaing dengan bidang-bidang yang lain. Sejalan dengan perkembangan tersebut, salah satu teknologi yang dapat digunakan adalah teknologi internet. Pada penelitian ini permasalahan tentang proses pemberian raport yang dilakukan secara manual tanpa komputer akan memunculkan masalah baru di dalam dunia pendidikan di kemudian hari. Ide dari penelitian ini adalah penggabungan antara kebutuhan dunia pendidikan dengan teknologi baru yang berkembang saat ini. Penelitian ini mengangkat tema tentang perancangan dan implementasi aplikasi manajemen nilai akademik siswa dengan memanfaatkan teknologi YUI Library. YUI Library memiliki beberapa kelebihan di dalam membangun antarmuka website. Beberapa komponen yang telah tersedia di dalam YUI Library adalah kalender, tabel data, editor teks, tabview, tombol, treeview, slider, menu, ajax dan lain-lain. Semua tinggal dipakai, tidak perlu membuat dari awal. Adapun pada penelitian tersebut, diambil studi kasus di SMA Negeri 2 Salatiga. SMA Negeri 2 Salatiga dipilih karena sekolah tersebut masih menggunakan metode manual (tertulis) dan kebutuhan komputerisasi memang dibutuhkan di sana. Terdapat beberapa kesalahan ketika memasukkan data secara manual dan menyebabkan kesulitan di dalam pengubahan data, serta dibutuhkan data yang bersifat permanen agar data dapat diambil sewaktu-waktu. Diharapkan hasil penelitian ini merupakan jawaban dari permasalahan yang timbul dari sistem yang masih manual. Sehingga perkembangan teknologi dapat dimanfaatkan secara maksimal oleh dunia pendidikan.

Transcript of Perancangan dan Implementasi Sistem Penilaian Akademik Siswa … · 2013. 5. 7. · 1 1....

  • 1

    1. Pendahuluan

    Perkembangan teknologi saat ini sangatlah bervariasi di mana banyak

    muncul teknologi baru dimulai dari teknologi web, teknologi mobile sampai pada

    teknologi perangkat keras. Teknologi web tersebut berbasis javascript misalnya

    jquery.js, mootools.js, prototype.js, ext.js, YUI Library dan lain-lain. Berdasarkan

    banyaknya pustaka yang telah tersedia, tentu pengembang aplikasi harus

    mengetahui kelebihan dan kelemahan dari masing-masing pustaka. Pada

    penelitian ini diangkat teknologi YUI Library yang tergolong masih baru dan

    jarang digunakan.

    YUI Library adalah suatu toolkit bersifat Open Source yang

    dikembangkan untuk memudahkan pengembang aplikasi dalam membuat

    antarmuka aplikasi web. YUI Library mendukung sejumlah kontrol dan utilitas

    yang sangat bermanfaat bagi pengembang aplikasi web. Rich Text Editor,

    TreeView, Paginator, dan DataTable. Dari Perkembangan tersebut sebenarnya

    ditujukan agar teknologi dapat semakin mudah digunakan dan dimanfaatkan untuk

    membantu memudahkan pekerjaan manusia di segala bidang.

    Salah satu bidang yang dapat menggunakan perkembangan teknologi

    adalah bidang pendidikan. Perkembangan pendidikan yang juga pesat

    membutuhkan adaptasi yang tidak mudah agar dunia pendidikan dapat bersaing

    dengan bidang-bidang yang lain. Sejalan dengan perkembangan tersebut, salah

    satu teknologi yang dapat digunakan adalah teknologi internet.

    Pada penelitian ini permasalahan tentang proses pemberian raport yang

    dilakukan secara manual tanpa komputer akan memunculkan masalah baru di

    dalam dunia pendidikan di kemudian hari. Ide dari penelitian ini adalah

    penggabungan antara kebutuhan dunia pendidikan dengan teknologi baru yang

    berkembang saat ini.

    Penelitian ini mengangkat tema tentang perancangan dan implementasi

    aplikasi manajemen nilai akademik siswa dengan memanfaatkan teknologi YUI

    Library. YUI Library memiliki beberapa kelebihan di dalam membangun

    antarmuka website. Beberapa komponen yang telah tersedia di dalam YUI Library

    adalah kalender, tabel data, editor teks, tabview, tombol, treeview, slider, menu,

    ajax dan lain-lain. Semua tinggal dipakai, tidak perlu membuat dari awal.

    Adapun pada penelitian tersebut, diambil studi kasus di SMA Negeri 2

    Salatiga. SMA Negeri 2 Salatiga dipilih karena sekolah tersebut masih

    menggunakan metode manual (tertulis) dan kebutuhan komputerisasi memang

    dibutuhkan di sana. Terdapat beberapa kesalahan ketika memasukkan data secara

    manual dan menyebabkan kesulitan di dalam pengubahan data, serta dibutuhkan

    data yang bersifat permanen agar data dapat diambil sewaktu-waktu. Diharapkan

    hasil penelitian ini merupakan jawaban dari permasalahan yang timbul dari sistem

    yang masih manual. Sehingga perkembangan teknologi dapat dimanfaatkan secara

    maksimal oleh dunia pendidikan.

  • 2

    2. Tinjauan Pustaka

    Terdapat tiga penelitian terdahulu yang berhubungan dengan penelitian ini.

    Pada penelitian yang pertama, bertujuan untuk mengetahui sistem penilaian hasil

    belajar pada mata diklat produktif bidang keahlian Teknik Elektro di SMK Negeri

    2 Depok, ditinjau dari rancangan penilaian, pengembangan instrumen,

    pelaksanaan penilaian, penskoran dan penilaian, serta pemanfaatan hasil penilaian.

    Penelitian tersebut membahas tentang pembuatan sistem penilaian hasil

    belajar yang ada di dalam SMK Negeri 2 Depok bidang keahlian Teknik Elektro.

    Teknologi yang digunakan di dalam penelitian tersebut adalah HTML sebagai

    pemrograman tampilan, MySQL sebagai basisdata dan PHP sebagai bahasa

    pemrograman dinamis. Belum digunakan pustaka Javascript untuk menambah

    interaktif web. Hasilnya sistem penilaian hasil belajar pada mata diklat produktif

    bidang keahlian Teknik Elektro termasuk dalam kategori cukup baik [1].

    Pada penelitian yang kedua, dilakukan penelitian untuk

    mengimplementasikan teknologi pada penilaian siswa di mana permasalahan yang

    ingin diselesaikan adalah pemasukan nilai yang dilakukan masih banyak

    kerangkapan pada masing-masing data. Dalam pengolahan data, baik pembuatan

    laporan belum tersusun dengan baik. Informasi data yang kurang akurat,

    pencarian data dilakukan dengan sangat tidak akurat dan sering terjadi

    keterlambatan pembuatan laporan bulanan ataupun laporan akhir tahun. Sistem

    diimplementasikan menggunakan bahasa pemrograman PHP dan MySQL [2].

    Pada penelitian terdahulu yang ketiga, berlandaskan pada SDN Griya

    Bumi Antapani 5 sering melakukan berbagai kegiatan akademis di antaranya

    adalah proses penilaian siswa. Biasanya yang terjadi, data-data nilai tersebut

    disusun secara manual dan dilaporkan tidak sesuai jadwalnya [3].

    Berdasarkan permasalahan tersebut, maka dibuat suatu sistem akademis

    sekolah untuk mengatur proses penilaian siswa, di mana nantinya data nilai akan

    diproses melalui program DBMS MySQL. Hasil implementasi sistem membuat

    data dapat lebih cepat diproses dan laporan dapat dibuat dengan mudah.

    Keuntungan dari program ini pun data nilai dapat tersimpan dengan rapi.

    Pada penelitian sebelumnya, semua implementasi dilakukan menggunakan

    teknologi PHP dan MySQL sedangkan pada penelitian ini ditambahkan YUI

    Library sebagai teknologi baru. Pada penelitian ini ditambahkan fitur yang akan

    memudahkan pengguna yaitu memasukkan data menggunakan fitur pembacaan

    format microsoft excel. Ini agar mempermudah guru-guru yang sudah terbiasa

    menggunakan berkas dengan format microsoft excel.

    Sistem Informasi Akademik didefinisikan sebagai sistem sekolah yang

    dibangun dalam satu kesatuan yang mana saling terintegrasi dan memiliki

    hubungan saling keterkaitan antara satu sama lain. Dalam hal ini semua yang

    berhubungan dengan akademik adalah merupakan hubungan yang berfokus pada

    aktivitas akademik itu sendiri, baik itu pengelolaan data siswa, guru dan pegawai

    serta aktivitas lainnya yang mana kesemuanya akan terhubung dalam satu jaringan

    yang saling terintegrasi dan data dikelola oleh database sebagai media

  • 3

    penyimpanan data terpusat [4]. Sistem informasi akademik yang akan dibuat

    disesuaikan dengan sistem penilaian yang ada di dalam SMA Negeri 2 Salatiga.

    Sistem penilaian yang ada di dalam SMA Negeri 2 Salatiga terdiri dari Nilai

    Tugas 1, Nilai Tugas 2, Nilai Tugas 3. Terdapat juga Nilai Ulangan 1, Nilai

    Ulangan 2 dan Nilai Ulangan 3. Berikutnya adalah Nilai UAS, Nilai UTS dan

    Nilai Praktik. Perhitungan dari nilai-nilai tersebut dapat dilihat dari Rumus

    Berikut: Nilai Tugas = (Nilai Tugas 1 + Nilai Tugas 2 + Nilai Tugas 3) / 3. Nilai

    Ulangan = (Nilai Ulangan 1 + Nilai Ulangan 2 + Nilai Ulangan 3) / 3. Nilai UTS

    dan Nilai UAS tetap dan Nilai Praktik berdiri sendiri. Maka selanjutnya dapat

    dihitung juga nilai NH dan NS. Rumus Perhitungan:

    NH = (Nilai Tugas + Nilai Ulangan) / 2

    NS = (Nilai UTS + Nilai UAS) / 2

    NR = 40% x NH + 60% x NS

    YUI Library merupakan pustaka JavaScript yang digunakan untuk

    membangun antarmuka website adalah YUI Library. Yahoo! User Interface

    Library ditulis untuk membantu programmer dengan pengetahuan dasar tentang

    JavaScript dan prinsip-prinsip desain web agar dapat digunakan secara cepat dan

    pustaka User Interface akan terus dikembangkan oleh Yahoo. Salah satu

    komponen yang membuat halaman web menjadi lebih interkatif yaitu JavaScript.

    JavaScript adalah bahasa skrip yang dieksekusi di sisi klien dan diletakkan pada

    kode HTML. Dengan adanya JavaScript kemampuan sebuah dokumen HTML

    menjadi lebih luas. YUI (Yahoo! User Interface) Library adalah suatu toolkit

    bersifat Open Source yang dikembangkan untuk memudahkan pengembang

    aplikasi dalam membuat antarmuka aplikasi web. YUI Library mendukung

    sejumlah kontrol dan utilitas yang sangat bermanfaat bagi pengembang aplikasi

    web. Rich Text Editor, TreeView, Paginator, dan DataTable merupakan contoh

    kontrol yang disediakan oleh YUI (Yahoo! User Interface). Kode YUI (Yahoo!

    User Interface) Library diimplementasikan dengan menggunakan JavaScript.

    Dengan menggunakan YUI(Yahoo! User Interface) Library membuat web yang

    lebih interaktif mudah untuk dilakukan. Selain itu, perbedaan-perbedaan antar

    browser yang membuat kode menjadi lebih kompleks. YUI (Yahoo! User

    Interface) Library mendukung beberapa metode yang digunakan untuk mengakses

    elemen dalam suatu dokumen. Beberapa metode mempunyai fungsi yang sama

    dengan metode pada objek dokumen dan metode yang dapat mengakses elemen

    melalui nama kelas. YAHOO.util.Dom.get(ID_elemen) mengembalikan rujukan ke

    sebuah elemen dalam dokumen didasarkan pada ID elemen,

    YAHOO.util.Dom.getElementsByClassName (namaClass, Tag, akar)

    mengembalikan array yang menyatakan elemen-elemen dalam dokumen yang

    memiliki nama kelas dan tag yang sesuai dan pencarian dimulai dari akar. Akar

  • 4

    bisa diisi dengan nama tag atau ID elemen. CSS (Cascading Style Sheet)

    digunakan dalam HTML untuk menciptakan suatu style yang dipakai untuk

    mengatur penampilan elemen HTML. Dengan meggunakan style, elemen dapat

    diformat dengan fitur yang lebih kaya dari pada yang disediakan elemen HTML.

    Pada dasarnya, YUI Library adalah toolkit yang dikemas dengan penuh obyek

    kuat yang memungkinkan desain front-end GUI secara cepat untuk menghasilkan

    website yang kaya interaktif berbasis web aplikasi. Utilitas memberikan lapisan

    canggih berupa fungsi dan logika untuk aplikasi, sementara kontrol yang menarik

    dalam kemasan benda yang bisa drop ke halaman dan mulai menggunakan dengan

    sedikit penyesuaian [5].

    3. Metode Penelitian Metode Waterfall

    Gambar 1 Metode Waterfall [6]

    1. Tahap Pertama: Requirements Definition. Proses pencarian kebutuhan diintensifkan dan difokuskan pada software. Untuk mengetahui sifat dari

    program yang akan dibuat, maka dilakukan proses penggalian informasi

    tentang kebutuhan perangkat lunak sistem penilaian akademik siswa di SMA

    Negeri 2 Salatiga. Adapun proses penggalian informasi dilakukan dengan

    melakukan wawancara pada pihak yang mewakili SMA Negeri 2 Salatiga

    selaku tempat studi kasus. Pihak yang diwawancara adalah pihak Guru dan

    Tata Usaha. Untuk mengetahui kebutuhan pengguna, dilakukan metode

    wawancara secara langsung terhadap guru yang bersangkutan yang

    berhubungan dengan pencatatan nilai akademik siswa.

    Terdapat beberapa hal yang harus diperhatikan didasarkan pada sistem manual

    yang telah ada yaitu pengguna menginginkan agar sistem dapat menerima

    isian nilai dari berkas dengan format microsoft excel. Kemudian dapat juga

    dilakukan unduh nilai dengan format pdf oleh siswa yang ingin melihat nilai

    mereka. Kebutuhan penting berikutnya adalah dibutuhkan agar sistem dapat

    menampilkan nilai setiap siswa, menampilkan nilai tertinggi siswa dan

  • 5

    manajemen data lainnya yang standard seperti manajemen data siswa, data

    guru dan data nilai.

    2. Tahap Kedua: System and Software Design. Proses ini digunakan untuk mengubah kebutuhan-kebutuhan calon pengguna yaitu guru di SMA Negeri 2

    Salatiga, menjadi representasi ke dalam bentuk cetak biru perangkat lunak

    sebelum pengkodean program dimulai. Desain perangkat lunak yang

    digunakan di dalam tahapan ini adalah UML (Unified Modelling Language)

    yang terdiri dari use case diagram, activity diagram, sequence diagram dan

    class diagram. Sebagai tambahan terdapat juga perancangan yang lain yaitu

    perancangan basis data, perancangan antarmuka pengguna dan metode

    pengujian sistem.

    3. Tahap Ketiga: Implementation and Unit Testing. Untuk dapat dimengerti oleh mesin, dalam hal ini adalah komputer, maka desain tadi harus diubah

    bentuknya menjadi bentuk yang dapat dimengerti oleh mesin, yaitu ke dalam

    bahasa pemrograman melalui proses pengkodean program. Pada tahap ini

    dilakukan implementasi dengan menggunakan bahasa pemrograman PHP dan

    framework YUI Library, serta diimplementasi tempat penyimpanan data

    secara permanen pada basis data MySQL.

    4. Tahap Keempat: Integration and System Testing. Sesuatu yang dibuat haruslah diujicobakan. Demikian juga dengan perangkat lunak. Semua fungsi-fungsi

    perangkat lunak harus diujicobakan, agar perangkat lunak bebas dari

    kesalahan, dan hasilnya harus benar-benar sesuai dengan kebutuhan yang

    sudah didefinisikan sebelumnya. Pengujian yang dilakukan di dalam

    penelitian ini dilakukan dengan dua tahapan. Tahapan yang pertama pengujian

    yang dilakukan secara mandiri sedangkan tahapan yang kedua pengujian

    dilakukan langsung oleh calon pengguna sistem penilaian akademik tersebut.

    5. Tahap Kelima: Operation and Maintenance. Pemeliharaan suatu perangkat lunak diperlukan, termasuk di dalamnya adalah pengembangan, karena

    perangkat lunak yang dibuat tidak selamanya hanya seperti itu. Ketika

    dijalankan mungkin saja masih ada kesalahan-kesalahan kecil yang tidak

    ditemukan sebelumnya, atau ada penambahan fitur-fitur yang belum ada pada

    perangkat lunak tersebut. Pengembangan diperlukan ketika adanya perubahan

    dari eksternal perusahaan seperti ketika ada pergantian sistem operasi, atau

    perangkat lainnya.

  • 6

    Pada penelitian ini, dilakukan implementasi yaitu sistem yang telah

    dibangun dan diujicobakan di tempat studi kasus.

    Use Case Diagram

    Gambar 2. Use Case Diagram

    Pada Gambar 2 merupakan desain use case diagram administrator yang

    memiliki akses melakukan manajemen data mapel, guru dan siswa. Manajemen

    yang dilakukan oleh administrator terdiri dari proses tambah mapel, ubah mapel,

    lihat mapel dan hapus mapel. Proses tambah guru, ubah guru, hapus guru dan lihat

    guru. Proses tambah siswa, ubah siswa, hapus siswa dan lihat siswa.

    Sedangkan untuk guru memiliki akses untuk melakukan manajemen siswa

    berupa melihat daftar siswa, manajamen kategori nilai yang terdiri dari tambah

    dan ubah kategori nilai, manajemen nilai yang terdiri dari input dan hapus nilai

    siswa serta menunggah nilai ke dalam sistem. Yang terakhir adalah aktor siswa

    yang memiliki akses untuk melihat hasil nilai yang diterima dan mengunduh nilai

    dengan format berkas yang telah ditentukan.

    Pada Gambar 3 merupakan activity diagram aktor administrator dalam

    melakukan pemilihan data untuk menghapus, mengubah, atau menambahkan data

    ke dalam sistem. Proses diawali dengan memilih menu kemudian dilanjutkan

    mengambil semua data guru dari basisdata. Semua data guru dapat dipilih untuk

    menghapus, mengubah atau menambahkan data baru. Setiap kali melakukan

    pemilihan akan berhubungan dengan sistem dan tempat penyimpanan di dalam

    basis data. Sistem berhubungan dengan basis data melalui bahasa query.

    Manajemen Tugas Siswa

    Manajemen Data Kelas

    Manajemen Data Guru

    Manajemen Data Mapel

    Lihat Nilai Siswa

    Aktor Siswa

    Tambah Kelas

    Ubah Kelas

    Hapus Kelas

    Tambah Guru

    Ubah Guru

    Hapus Guru

    Tambah Tugas Siswa

    Ubah Tugas Siswa

    Hapus Tugas Siswa

    Tambah Mapel

    Ubah Mapel

    Hapus Mapel

    Unduh Nilai Siswa

    Unggah Nilai

    Cetak Laporan Nilai

    Aktor Administrator

    Manajemen Nilai Siswa

    Manajemen Data Siswa

    Aktor Guru

  • 7

    Activity Diagram

    Gambar 3. Activity Diagram Administrator

    Gambar 4 Activity Diagram Guru

    Mulai

    Memilih

    Menu

    Memilih

    Tambah Guru

    Menambahka

    n Data Guru

    Memilih

    Ubah Guru

    Memilih

    Hapus Guru

    Mengubah

    Data Guru

    Mengambil

    Data Guru

    Menampilkan

    Data Guru

    Menampilkan Form

    Tambah Data Guru

    Menyimpan

    ke Basis Data

    Menghapus

    data Guru

    Mengambil Data

    Ubah Guru

    Menampilkan

    Form Ubah Guru

    Melakukan Ubah

    Data Guru

    Selesai

    Menyediakan

    Data Guru

    Query Tambah

    Data Guru

    Query Hapus

    Data Guru

    Query Ambil

    Data Guru

    Query Ubah

    Data Guru

    Basis DataSistem : Aktor Administrator

    Mulai

    Input Rapor

    Selesai

    Login

    Input Nilai

    Tidak Valid

    Input ke

    Sistem

    Valid

    SistemGuru

  • 8

    Pada Gambar 4 merupakan activity diagram aktor guru. Guru melakukan

    proses penilaian dimulai dari login ke sistem terlebih dahulu. Jika tidak valid

    maka guru harus melakukan proses login ulang ke sistem. Setelah itu guru dapat

    melakukan input nilai dan input raport.

    Untuk melakukan input, guru akan di cek oleh sistem jika guru tersebut

    bukan wali kelas maka guru tersebut hanya bisa menginputkan nilai siswa saja.

    Tapi jika guru tersebut juga merupakan wali kelas, maka guru tersebut akan dapat

    menginputkan nilai dan juga raport siswa.

    Gambar 5 Activiy Diagram Siswa

    Pada Gambar 5 merupakan activity diagram aktor siswa. Siswa melakukan

    aktivitas di dalam sistem berupa lihat nilai dan mencetak nilai. Pada setiap

    pengecekan siswa dapat memilih semester yang diinginkan untuk dilihat. Ketika

    sudah melihat nilai yang diinginkan siswa tersebut dapat mengunduh nilai tersebut

    dan disimpan di dalam komputer mereka.

    Class Diagram

    Pada Gambar 6 merupakan class diagram dari sistem penilaian siswa di

    SMA Negeri 2 Salatiga. Terdapat 11 entity yaitu Guru, Admin, DaftarAkhlak,

    DaftarKompetensi, Siswa, Kepribadian, Nilai, TahunAjaran, Mapel, WaliKelas,

    dan Kelas. Sistem dibagi menjadi menjadi tiga controller yaitu AdminController,

    GuruController dan SiswaController. Dari setiap controller memiliki hubungan

    masing-masing dengan entity.

    AdminController memiliki hubungan dengan entity Guru, Admin, Daftar

    Akhlak, DaftarKompetensi, Siswa, Tahun Ajaran, Mapel, Walikelas dan Kelas.

    Artinya pengguna dengan tipe administrator dapat mengakses data-data seperti

    data guru, data siswa, data tahun ajaran, data mapel, data walikelas dan data kelas.

    Mulai

    Selesai

    Melihat Nilai

    Mencetak Nilai

    Login

    Mengecek Nilai

    Valid Login

    SistemSiswa

  • 9

    Sedangkan GuruController memiliki hubungan dengan entity Siswa,

    Kepribadian, dan Nilai. Artinya pengguna dengan tipe guru dapat mengakses

    data-data seperti data siswa, data kepribadian yang dapat dimasukkan melalui

    input raport. Data nilai siswa dimasukkan oleh guru yang bukan walikelas

    maupun yang walikelas. SiswaController memiliki hubungan dengan entity Nilai

    saja. Karena siswa hanya bisa mengecek nilai tanpa mengubahnya.

    Gambar 6 Class Diagram

    4. Hasil dan Pembahasan

    Integrasi YUI Library dengan Sistem

    Bentuk dari YUI Library sebenarnya bukan merupakan program yang

    dapat dijalankan secara langsung. Namun bentuk dari YUI Library adalah berupa

    kumpulan kode program yang ditulis menggunakan bahasa JavaScript. Pengguna

    bisa mendapatkan YUI Library dengan mengunduh kode-kode program di alamat

    website http://yui.zenfs.com/releases/yui3/yui_3.5.1.zip.

    Dari bentuk zip berkas yang didapatkan kita extract ke dalam aplikasi yang

    dibuat dan akan membentuk folder sendiri di dalam sistem dengan nama folder

    build. Misalnya pengguna asumsikan folder tersebut berada di dalam folder assets

    di dalam sistem.

    Untuk melakukan integrasi YUI Library pada sistem pengguna perlu

    memanggil berkas hasil extract tadi dari kode html. Cara pertama adalah dengan

    memanggil pustaka YUI Library dari dalam kode program seperti ditunjukkan

    pada Kode Program 1.

    http://yui.zenfs.com/releases/yui3/yui_3.5.1.zip

  • 10

    Kode Program 1 Perintah Pemanggilan YUI Library

    1.

    Selanjutnya setelah melakukan pemanggilan seperti Kode Program 1, kita

    dapat menggunakan semua fitur yang telah disediakan oleh YUI Library. Sebagai

    contoh kita ingin menggunakan efek transisi yang telah disediakan. Seperti pada

    Kode Program 2, dapat memanggil fungsi transition pada baris 3 dan 9. Fungsi

    diimplementasikan pada element dengan id fademe dan id shrinkme.

    Kode Program 2 Perintah Transisi Menggunakan YUI Library

    1. YUI().use('transition', function (Y) {

    2. // Fade away.

    3. Y.one('#fademe').transition({

    4. duration: 1, // seconds

    5. opacity : 0

    6. });

    7.

    8. // Shrink to nothing.

    9. Y.one('#shrinkme').transition({

    10. duration: 1, // seconds

    11. width : 0,

    12. height : 0

    13. });

    14. });

    Hasil Implementasi YUI Library pada Administrator

    Gambar 7 Tampilkan Semua Data

    Pada Gambar 7 ditampilkan daftar data tahun ajaran menggunakan YUI

    Library. Di mana pada setiap data yang ditampilkan terdapat tombol untuk Edit

    atau Delete. YUI Library berperan sebagai pembuat UserInterface tabel setiap data

    yang ditampilkan. Sedangkan proses untuk mendefinisikan tabel melalui YUI

    dapat dilihat pada Kode Program 3.

  • 11

    Kode Program 3 Perintah untuk Menampilkan Semua Data

    1. var myColumnDefs = [

    2. {key:"no",label:"No",width:30,resizeable:true,sortable:true},

    3. {key:"nama",label:"Nama Tahun Ajaran",

    4. width:200,resizeable:true,sortable:true,sortOptions:

    5. {sortFunction:sortStates}},

    6. {key:"aktif",label:"Aktif",width:50,resizeable:true,

    7. sortable:true,sortOptions:{sortFunction:sortStates}},

    8. {key:"edit",label:"Aksi",width:80,resizeable:true}

    9. ];

    Kode Program 3 merupakan proses untuk menampilkan semua data.

    Dengan menggunakan YUI Library, cukup didefinisikan tabel yang akan

    dibangun. Seperti pada kode program, definisi dilakukan dengan cara menentukan

    field-field yang akan ditampilkan yaitu no, nama, aktif dan edit.

    Gambar 8 Tambah Data

    Pada Gambar 8 ditampilkan isian untuk menambah data baru

    menggunakan YUI Library. Sedangkan prosesnya untuk menampilkan data

    melalui YUI Library dapat dilihat pada Kode Program 4.

    Kode Program 4. Perintah Untuk Menambah Data

    1.

    2. Tambah Data tahunajaran

    3.

    4.

  • 12

    Hasil Implementasi YUI pada Guru

    Gambar 9 Pilih Data Nilai

    Sebelum memasukkan nilai, guru harus memilih kelas dahulu sebagai

    kelompok siswa yang akan dimasukkan nilainya seperti pada Gambar 9. Pada

    tabel tersebut terdapat kolom tingkat menunjukkan tingkat siswa, kemudian ada

    nama kelas yang sesuai dengan kolom tingkat. Sedangkan untuk memasukkan

    nilai , guru dapat memilih input nilai.

    Gambar 10 Proses Memasukkan Nilai

  • 13

    Pada Gambar 10 merupakan tampilan guru untuk memasukkan nilai. Nilai

    yang dimasukkan kepada siswa terdiri dari nilai Tugas 1, 2, dan 3, nilai Ulangan

    1, 2, dan 3, nilai UAS, nilai UTS dan nilai Praktik. Kemudian sikap di dalam

    mengikuti mata pelajaran juga ditentukan sebagai bentuk penilaian. Nilai NH, NS

    dan NR dihitung sistem ketika nilai sudah masuk ke dalam basis data.

    Gambar 11 Unggah Nilai

    Pada Gambar 11, selain dapat memasukkan nilai secara langsung, guru

    juga diberikan kemudahan untuk memasukkan nilai siswa melalui unggah berkas

    microsoft excel. Berkas microsoft excel dengan format tertentu yang dapat dilihat

    pada Gambar 12, dapat digunakan untuk memasukkan nilai dengan lebih mudah.

    Karena kebanyakan guru lebih senang mengolah data nilai melalui microsoft excel

    daripada memasukkan langsung pada sistem. Kode program yang menangani

    proses tersebut dapat dilihat pada Kode Program 5.

    Kode Program 5 Perintah Untuk Unggah Nilai

    1. $nilai = new ReadExcel("./file/nilai.xls");

    2.

    3. for ($i = 2; $i sheets[0]['numRows']; $i++) {

    4. $nis = $nilai->sheets[0]['cells'][$i][1];

    5. $semester = $nilai->sheets[0]['cells'][$i][2];

    6. $tugas1 = $nilai->sheets[0]['cells'][$i][3];

    7. $kkm = $nilai->sheets[0]['cells'][$i][13];

    8.

    9. // insert ke table nilai

    10. $data = array(

    11. 'id_siswa' => $id_siswa,

    12. 'id_mapel' => $id_mapel,

    13. 'semester' => $semester,

    14. 'tugas1' => $tugas1,

    15. );

    16. $this->model_nilai->insert($data);

    17.}

    Kode Program 5 merupakan kode program yang digunakan untuk

    melakukan unggah nilai dari berkas microsoft excel. Pertama pada baris 1, dibuka

    berkas microsoft excel yang telah diunggah. Kemudian dilakukan perulangan

    untuk mendapatkan data di setiap baris. Setelah itu data setiap baris dipetakan

    dalam array dan dimasukkan ke dalam basis data melalui model.

  • 14

    Gambar 12 Format Microsoft Excel

    Pada Gambar 12 merupakan format microsoft excel untuk memasukkan

    nilai siswa kedalam web aplikasi sistem penilaian. Nilai yang dimasukkan

    didalam microsoft excel terdiri dari nilai Tugas 1, 2, dan 3, nilai Ulangan 1, 2 dan

    3, nilai UAS, nilai UTS, nilai Praktik, sikap, dan ketercapaian kompetensi. Pada

    sikap dituliskan angka, dikarenakan didalam aplikasi terdapat beberapa pilihan

    untuk menentukan sikap dari siswa tersebut.

    Hasil Implementasi YUI pada Siswa

    Gambar 13 Lihat Raport

    Pada Gambar 13, setiap siswa dapat melakukan login kemudian melihat

    nilai raportnya sesuai dengan semester masing-masing. Setiap siswa dapat melihat

    detail raport pada sistem layaknya pada rapor versi cetaknya. Selain melihat,

    siswa juga dapat mengunduh dalam bentuk pdf atau langsung mencetak ke printer.

  • 15

    Hasil Pengujian

    Tabel 1 Tabel Pengujian

    No. Nama Modul Nama Sub Modul Sukses

    1

    Modul

    Administrator

    Lihat Tahun Ajaran Ya

    2 Tambah Tahun Ajaran Ya

    3 Ubah Tahun Ajaran Ya

    4 Hapus Tahun Ajaran Ya

    5 Lihat Mapel Ya

    6 Tambah Mapel Ya

    7 Ubah Mapel Ya

    8 Hapus Mapel Ya

    9 Lihat Kelas Ya

    10 Tambah Kelas Ya

    11 Ubah Kelas Ya

    12 Hapus Kelas Ya

    13 Lihat Guru Ya

    14 Tambah Guru Ya

    15 Ubah Guru Ya

    16 Hapus Guru Ya

    17 Lihat Siswa Ya

    18 Tambah Siswa Ya

    19 Ubah Siswa Ya

    20 Hapus Siswa Ya

    21 Lihat Wali Kelas Ya

    22 Tambah Wali Kelas Ya

    23 Ubah Wali Kelas Ya

    24 Hapus Wali Kelas Ya

    25 Modul Guru

    Input Nilai Siswa Ya

    26 Input Rapor Siswa Ya

    27 Modul Siswa

    Lihat Rapor Siswa Ya

    28 Download Rapor Siswa Ya

    Berdasarkan hasil pengujian seperti pada Tabel 1, semua materi pengujian

    yang telah diberikan menghasilkan nilai sukses 100%. Artinya sistem telah

    berjalan dengan baik. Pengujian dilakukan secara internal maupun eksternal.

    Secara internal pengujian dilakukan sendiri oleh peneliti dan secara eksternal

    dilakukan pengujian oleh guru SMA Negeri 2 Salatiga berdasarkan pada Tabel

    Pengujian. Berdasarkan hasil pengujian, sistem telah berjalan dengan baik dan

    telah memenuhi kebutuhan sistem akademik di SMA Negeri 2 Salatiga.

  • 16

    5. Simpulan

    Berdasarkan pada proses penelitian, proses implementasi dan juga proses

    pengujian maka didapatkan hasil penelitian sebagai berikut: (1) Perangkat lunak

    yang telah didesain telah dapat diimplementasikan dengan baik dengan melihat

    hasil pengujian baik secara internal maupun pengujian secara eksternal. (2)

    Perangkat lunak yang dibuat diimplementasikan dengan menggunakan pustaka

    YUI Library. Pustaka tersebut dapat diimplementasikan dengan baik sesuai

    dengan kebutuhan sistem. Adapaun komponen YUI yang dipakai didalam sistem

    adalah komponen tabel, dialog, dan pagination (3) Hasil perangkat lunak telah

    memenuhi kebutuhan pengguna dan tempat studi kasus dengan melihat hasil

    kuesioner yang telah diisi oleh pengguna sistem yaitu guru-guru di SMA Negeri 2

    Salatiga.

    6. Pustaka

    [1] Nugroho, Ari Sapto. 2009, Sistem Penilaian Hasil Belajar Pada Mata Diklat Produktif Bidang Keahlian Teknik Elektro di SMK N 2 Depok.

    Yogyakarta: Universitas Negeri Yogyakarta.

    [2] Rosniawati, Nia. 2008. Perancangan Sistem Aplikasi Administrasi Nilai Siswa pada LPK Muhammadiyah di Jakarta. Jakarta: Universitas

    Pembangunan Nasional Veteran.

    [3] Gumilar, 2011. Perancangan Sistem Informasi Akademik Sekolah Berbasis Web Studi Kasus di Sekolah Dasar Negeri Griya Bumi Antapani. Bandung.

    [4] Tantra, Rudy. 2012. Manajemen Proyek Sistem Informasi. Yogyakarta: Andi Publisher.

    [5] Kadir, Abdul. 2011. Tips dan Trik Membangun Aplikasi Web Interaktif Dengan Yahoo! User Interface Library. Yogyakarta: Andi Publisher.

    [6] Jalote, Pankaj. 2002. Software Project Management in Practice. Addison Wisley.