Perancangan dan Implementasi Sistem Informasi
Manajemen Praktek Kerja Lapangan Berbasis
Web
Menggunakan YUI
Library
(Studi Kasus: PT.PLN
(Persero) P3B Jawa Bali APP Salatiga)
1)Fendhika Chandra.K, 2)Adriyanto J.Gundo, 3)Ramos Somya
Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia Email: 1)[email protected], 2)[email protected],
Abstract
Management Information system of Practical Work ( PKL) is the management of data related to the process of PKL in several institution one of them is PT.PLN ( Persero ) P3B Jawa Bali APP Salatiga. The data PKL must be managed well so information readily obtainable. The existing system of perceived still have problems in the management of data and information transmission. This research apply technology YUI library in the manufacture of application of the web. The purpose its use so as to be easily in the management of data and the display becomes interesting for the submission of information pertaining to PKL. The result of the implementation of tested by parties. Based on the results of testing, an application that apply YUI library has run well and fulfill the needs of parties PT.PLN ( Persero ) P3B Jawa Bali APP Salatiga in the management of data PKL.
Keywords: YUI, JavaScript, PHP, MySQL, Management Information System of PKL
1. Pendahuluan
untuk membantu pekerjaan manusia di segala bidang. Salah satu pemanfaatan teknologi web untuk mempermudah pekerjaan manusia adalah Sistem Informasi Manajemen Praktek Kerja Lapangan.Sistem Informasi Manajemen Praktek Kerja lapangan (PKL) merupakan pengelolaan data bagi mahasiswa/siswa yang akan melakukan Praktek Kerja Lapangan (PKL) di suatu instansi/perusahaan. Data yang menyangkut PKL harus tersimpan dan dikelola dengan baik untuk kepentingan instansi/yang bersangkutan jika sewaktu-waktu diperlukan. Akses sistem informasi manajeman PKL diharapkan dapat dengan mudah dilakukan agar informasi cepat didapat. Teknologi web yang akan digunakan dalam pembuatan sistem adalah YUI
(Yahoo User Interface) Library, dengan bahasa pemrograman PHP. YUI Library
memiliki komponen-komponen/widget dapat memberikan antarmuka yang menarik dan user friendly dalam membangun sistem manajemen PKL berbasis web [2]. YUI Library juga memberikan kemudahan dalam pengeloalan data dan penyampaian informasi menyangkut PKL.
2. Tinjauan Pustaka
Pada penelitian sebelumnya telah dibangun sistem menggunakan bahasa pemrograman PHP dan HTML serta MySQL sebagai basisdatanya [3]. Tetapi sistem masih sederhana sesuai pengguna saja dan belum menerapkan teknologi khusus untuk tampilannya. Sedangkan pada penelitian tentang aplikasi proses PKL pada program studi Sistem Informasi di Universitas Muria Kudus, muncul permasalahan yaitu informasi terkait PKL hanya ditempel pada pengumuman dan informasi terkadang juga hilang sehingga kesulitan mencari informasi menyangkut PKL. Sebab itu perlu dibangun aplikasi yang bertujuan untuk mendapatkan informasi menyangkut praktek kerja lapangan secara cepat, mudah, akurat, dan up to date. Aplikasi web
menggunakan pemrograman PHP dan MySQL serta CSS sebagai tampilannya [4]. Untuk mengembangkan aplikasi yang telah dibuat sebelumnya akan ditambahkan YUI Library sebagai fitur tambahan yang memudahkan pengguna untuk pembuatan laporan dan idcart sesuai dengan format dan kebutuhan.
Sistem informasi adalah sekumpulan elemen yang saling berhubungan satu sama lain yang membentuk satu kesatuan untuk mengintegrasikan data, memproses dan menyimpan serta mendistribusikan informasi [5]. Adanya sistem informasi data yang mentah dapat diproses menjadi informasi sehingga dapat disampaikan kepada pengguna.Manajemen data memiliki definisi bagian dari sumber daya informasi yang mencakup semua kegiatan yang memastikan bahwa data akurat, data up to date, aman, dan tersedia bagi user [6].
Salah satu komponen yang membuat halaman web menjadi lebih menarik yaitu JavaScript. JavaScript adalah sebuah bahasa pemrograman yang bisa digunakan untuk menambahkan interaktifitas pada halaman web. JavaScript
disertakan dalam halaman HTML. JavaScript diawali dan diakhiri dengan tag.
JavaScript adalah bahasa pemrograman yang dijalankan di komputer user, sehingga proses tidak perlu dilakukan pada server [7].
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. Selain itu, beberapa 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. CSS (Cascading Style Sheet) digunakan dalam HTML untuk menciptakan suatu style yang dipakai untuk mengatur penampilan elemen HTML. Elemen dapat diformat dengan fitur yang lebih kaya dari pada yang disediakan elemen HTMLdengan meggunakan style [2].
3. Metode Penelitian
Perancangan Sistem meliputi Perancangan Proses (UML), Perancangan Arsitektur, Perancangan Database, Perancangan
Antarmuka
Analisis Kebutuhan dan Pengumpulan Data
Perancangan Aplikasi/Program
Implementasi dan Pengujian Sistem, serta Analisis Hasil Pengujian
Penulisan Laporan Hasil Penelitian
Gambar 1 Tahapan Penelitian [8]
Gambar 1 menjelaskan tahapan-tahapan yang dilakukan, yaitu :
1. Tahap pertama adalah analisis kebutuhan dan pengumpulan kebutuhan.Informasi dan analisis data yang dikumpulkan menyangkut penerimaan mahasiswa/siswa PKL di PT. PLN (Persero) P3B Jawa Bali APP Salatiga. Pengumpulan Informasi kebutuhan data diperoleh dengan wawancara kepada pegawai PT.PLN (Persero) P3B Jawa Bali sub bidang sdm bidang administrasi dan umum.Pegawai yang merupakan narasumber berperan mengelola proses penerimaan praktek kerja lapangan di lingkungan PT.PLN (Persero) P3B Jawa Bali APP Salatiga. 2. Tahap kedua adalah melakukan perancangan sistem yang dibangun disesuaikan
antarmuka pengguna.
3. Tahap ketiga adalah perancangan aplikasi/program sesuai analisis kebutuhan berdasarkan perancangan sistem yang telah dikerjakan. Fungsi-fungsi yang ada dalam aplikasi dibuat sesuai hasil analisis kebutuhan dan perancangan sistem. 4. Tahap keempat adalah implementasi dan pengujian sistem, serta analisis hasil
pengujian, apakah fungsi-fungsi yang ada dalam aplikasi telah berjalan lancar dan baik. Pengujian sistem sementara ditunjukan kepada PT.PLN (Persero) P3B Jawa Bali APP Salatiga agar dapat dilakukan evaluasi/perbaikan kembali jika masih ada eror. Analisis hasil pengujian dilakukan untuk mengetahui apakah aplikasi telah berjalan dengan baik agar pengujian lebih terstruktur dengan baik. 5. Tahap kelima adalah penulisan laporan hasil penelitian. Tahap ini dilakukan dokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan.
Gambar 2 Use Case Diagram
Pada Gambar 2 merupakan desain use case diagram sistem manajemen PKL. Terdapat tiga pengguna yang memiliki akses berbeda-beda yaitu admin, mahasiwa/siswa PKL, dan guest/pengunjung. Pengguna sebagai admin memiliki hak akses untuk mengelola surat balasan PKL, mengelola absensi PKL, mengelola rekap data PKL, mengelola data user, membuat id cart untuk mahasiswa/siswa PKL, mengelola berkas/file, mengelola berita/pengumuman, serta mengelola
pesan, serta melihat rekap data PKL. Pengguna sebagai guest merupakan semua orang yang mengunjungi sistem manajemen PKL, guest hanya dapat melihat rekap data, mengunduh profil instansi, melihat pengumuman, dan memberi pesan.
Gambar 3 merupakan activity diagram aktor administrator. Admin melakukan proses login ke dalam sistem kemudian sistem mengecek validasi apakah proses login valid atau tidak, jika tidak valid maka kembali ke menu login tetapi jika login valid masuk ke menu sistem. Admin memilih menu-menu yang tersedia seperti mengelola rekap data diklat, mengelola surat balasan PKL, mengelola absensi PKL, mengelola data user, membuat id cart untuk mahasiswa/ siswa PKL, mengelola berkas/file, mengelola berita/pengumuman, mengelola guestbook. Admin juga dapat langsung melakukan logout jika setelah melakukan login tidak memilih menu yang tersedia. Admin melakukan logout untuk keluar dari sistem jika telah memilih menu-menu yang tersedia.
Gambar 3 Activity Diagram Admin
Pada Gambar 4 merupakan class diagram dari sistem manajemen PKL di PT.PLN(Persero) P3B Jawa Bali APP Salatiga. Sistem terbagi atas tiga controller, tiga model, dan beberapa entity. Beberapa Controller tersebut adalah admincontroller, mhscontroller, dan guestcontroller. Tiap controller masing-masing memiliki hubungan dengan entity yang ada. Pada controller terdapat fungsi-fungsi yang digunakan untuk mengakses entity. Tiap masing-masing model terhubung dengan
controller yang berfungsi mengakses ke dalam basisdata. Admincontroller terhubung dengan admin_model serta memiliki hubungan dengan entity surat balasan, rekap data PKL, user, download, absen PKL, berita serta pesan.
Mhscontroller terhubung dengan mhs_model serta hanya dapat melakukan edit biodata mahasiswa dan melakukan absen. Guestcontroller terhubung dengan
dan pesan. Artinya pengguna sebagai guest/pengunjung hanya dapat melihat rekap data PKL, mengunduh berkas, melihat berita, serta mengirim pesan.
Gambar 4 Class Diagram
4. Hasil dan Pembahasan
Bentuk dari YUI Library adalah berupa kumpulan kode program yang ditulis menggunakan bahasa JavaScript dan terdapat juga kumpulan CSS didalamnya.
Beberapa kumpulan Javascript dan CSS tersebut membentuk library yang nantinya dapat digunakan di dalam sistem. Pengguna dapat mengunduh YUI Library pada halaman website http://yui.zenfs.com/releases/yui2/yui_2.9.0.zip. Hasil dari unduhan berupa file zip yang nantinya diekstrak kemudian menjadi folder dan diberi nama yui. Folder yui merupakan YUI Library yang terdiri dari kumpulan Javascript dan kode-kode CSS. Pengguna mengasumsikan folder yui ke dalam folder aplikasi yang akan dibuat. Untuk melakukan integrasi YUI Library pada sistem pengguna perlu memanggil berkas hasil extract tadi dari kode HTML. Caranya dengan memanggil global object yang ada dalam YUI Library. Global object berfungsi sebagai script dasar pemakaian fitur-fitur yang tersedia dalam YUI Library. Global object disertakan dalam script pemanggilan fitur-fitur YUI Library seperti fitur
datatable, fitur paging, fitur tabview, fitur menu, fitur button, fitur animasi, fitur
Kode Program 1 Perintah Pemanggilan YUI Library
1. <script type=”text/javascript” src=”http://localhost/ SIM_PKL/yui/build/yahoo-dom-event/yahoo-dom-event.js”></ script>
Tahap selanjutnya setelah melakukan pemanggilan seperti Kode Program 1, maka semua fitur yang telah disediakan oleh YUI Library dapat digunakan. Contoh penggunaan YUI Library dalam pembuatan tombol/button dengan efek link dan gambar. Seperti pada Kode Program 2, baris pertama mendeskripsikan variabel
untuk membuat button yui, baris kedua type dari button berupa link, baris tiga dan empat merupakan id dari button yang akan dibuat dan diberi nama Yahoo, baris lima merupakan link menuju alamat yang diinginkan, kemudian baris terakhir merupakan id untuk pembuatan CSS yang dapat berupa warna dan gambar pada
button.
Kode Program 2 Perintah Pembuatan Button Menggunakan YUI Library
1. var oLinkButton4 = new YAHOO.widget.Button({ 2. type: “link”,
3. id: “linkbutton4”, 4. label: “Yahoo!”,
5. href: “http://www.yahoo.com”,
container: “linkbuttonsfromjavascript” });
Pada Gambar 5 ditampilkan data mahasiswa/siswa PKL menggunakan YUI
Library. Di mana pada setiap data yang ditampilkan terdapat aksi untuk lihat detail, edit, serta hapus. Pemanfaatan fitur YUI Library berupa datatable membuat
UserInterface dalam penyajian data. Proses untuk mendefinisikan tabel melalui YUI dapat dilihat pada Kode Program 3 yang merupakan proses untuk menampilkan semua data. Variabel definisiKolom menjelaskan pembentukan kolom-kolom dalam tabel seperti no, nama, penempatan, tanggal mulai, tanggal selesai, status dan action. Adanya fungsi sorting/pengurutan pada tiap-tiap kolom. Pengurutan kolom berdasarkan abjad serta data terbaru ke lama atau sebaliknya. Tabel pada YUI
Library juga memberikan fungsi kolom di dalam kolom. Fungsi children yaitu untuk membuat kolom-kolom menjadi satu grup dan memberikan nama sendiri. Contoh fungsi children dapat dilihat pada Gambar 5 untuk tanggal mulai dan tanggal selesai dijadikan satu kolom dengan judul periode.
Kode Program 3 Perintah untuk Menampilkan Semua Data
1. var definisiKolom = [
2. {label :”DATA MAHASISWA / SISWA PKL “, children:[ 3. {key:”no_id”, label:”NO”, sortable:true},
4. {key:”nama”, label:”NAMA”, sortable:true, resizeable:true},
5. {key:”penempatan”, label:”PENEMPATAN”, sortable:true, resizeable:true},
6. {label :”PERIODE”, children:[{
7. key:”tgl_mulai”, label:”TGL MULAI”, sortable:true, resizeable:true},
8. {key:”tgl_selesai”, label:”TGL SELESAI”, sortable:true,resizeable:true
9. }]},{key:”status”, label:”STATUS”, sortable:true, resizeable:true},
10. {key:”aksi”, label:”ACTION”},]}]
Gambar 6 menampilkan fungsi untuk menambah data user baru menggunakan YUI Library. Pemanfaatan YUI Library berupa efek dialog saat tombol tambah data dipilih, dalam form dialog tersebut terdapat field untuk input data. Sedangkan proses untuk menampilkan fungsi tambah data user melalui YUI Library dapat dilihat pada Kode Program 4.
Gambar 6 Tambah Data
Kode Program 4 adalah kode program yang akan menampilkan form masukan data user baru ketika tombol Tambah Data dipilih. Pada Kode Program tersebut dibuat elemen div yang memiliki class yui-pe-content untuk mengambil CSS yang disediakan YUI Library dalam peritah dialog. Data-data yang diisikan dalam field
dikirim ke dalam admincontroller untuk diproses dalam fungsi manajemen_ tambahuser.
Kode Program 4 Perintah Untuk Menambah Data User
1. <div id=”inputuser” class=”yui-pe-content”>
2. <div class=”hd”>Please entry data</div><div class=”bd”> 3. <?php echo form_open(“admincontroller/
manajemen_tambahuser”); ?>
6. <label for=”nama”>Nama</label><input type=”text” name=”txtnama” id=”id_nama” />
7. <label for=”level”>Level</label><select name=”level”> 8. <option selected=”selected”>Pilih katagori</option> 9. <option>admin</option>
10. <option>anak PKL</option>
11. </select><label for=”tgl_mulai”>Tanggal Mulai</
label><input type=”text” name=”tgl_mulai” id=”id_tgl_mulai” />
12. <img src=”<?php echo base_url(); ?>asset/images/
calender/cal.png”
14. <img src=”<?php echo base_url(); ?>asset/images/
calender/cal.png”
20. <?php echo form_close(); ?>2
Pada Gambar 7 menampilkan pembuatan idcart untuk mahasiswa/siswa PKL. Pembuatan idcart memanfaatkan tambahan library sendiri berupa library FPDF yang digunakan untuk generate data dari basisdata ke dalam format pdf. Idcart
Gambar 7 Pembuatan IdCart Mahasiswa/Siswa PKL
Kode Program 5 Perintah Pembuatan IdCart dengan FPDF
1. <?php
2. <?php $this->fpdf->FPDF(‘P’,’cm’,’A4'); 3. $this->fpdf->AddPage();
4. $this->fpdf->Image(base_url() . “asset/images/ id_cart.jpg”, 1,0.7);
5. $this->fpdf->SetFont(‘Times’,’B’,13); 6. $this->fpdf->Cell(4,1,$row->nama,0,0,’C’); 7. $this->fpdf->Ln(1);
8. $this->fpdf->SetFont(‘Times’,’’,10);
9. $this->fpdf->Cell(2.2,0.7,’Berlaku s.d :’,0,0,’R’);
10. $this->fpdf->Cell(2.2,0.7,$tgl_selesai,0,0,’L’);
11. $this->fpdf->Output();
?>
Pada Gambar 8 menampilkan laporan rekap data PKL dalam format pdf. Laporan menampilkan semua data mahasiswa/siswa PKL yang ada di PT.PLN (Persero) P3B Jawa Bali APP Salatiga diurutkan berdasarkan tanggal terbaru mahasiswa/siswa mulai masuk.
Gambar 8 Laporan Rekap Data PKL
Gambar 9 Pembuatan Surat Balasan
Gambar 10 Laporan Rekap Absen
Gambar 11 menampilkan halaman utama untuk pengguna sebagai mahasiwa/ siswa PKL. Terdapat beberapa menu untuk memenuhi kebutuhan mahasiswa/siswa PKL seperti menu biodata dan absensi. Menu biodata mahasiswa digunakan untuk memasukkan data diri mahasiswa/siswa PKL. Menu absensi digunakan mahasiswa/
siswa PK L untuk melakukan absen online. Absen online dilakukan tiap hari pada
waktu jam masuk PKL sampai periode yang ditetapkan pihak APP Salatiga. Mahasiswa/siswa PKL hanya bisa absen sekali dalam satu hari pada batas waktu jam kerja kantor. Mahasiswa/Siswa PKL harus memberikan surat keterangan tidak masuk jika sakit/ijin saat PKL kepada pihak admin/pegawai yang mengelola proses PKL.
Gambar 12 merupakan halaman awal aplikasi dijalankan, guest/pengunjung dapat melihat menu-menu yang tersedia pada halaman tersebut. Menu yang ada yaitu menu data PKL untuk melihat data mahasiswa/siswa yang melakukan PKL, menu unduh untuk mengunduh profil instansi APP Salatiga, menu news berisi pengumuman menyangkut PKL, menu guestbook untuk mengirim pesan kepada aplikasi mengenai saran dan pertanyaan. Menu pada halaman memanfaatkan fitur dari YUI Library berupa tabview.
Gambar 12 Halaman Awal SIMAP
Pengguna hanya memilih menu yang tersedia dan akan muncul konten isi dari menu yang dipilih. Pembuatan tabview dapat dilihat pada Kode Program 6. Mendeklarasikan id_tab untuk dimasukkan dalam fungsi untuk pembentukan tabview
yang dimiliki YUI Library. Membuat menu dengan nama data PKL yang akan masuk dalam link menuju halaman isi pada viewpkl.
Kode Program 6 Perintah Pembuatan Tabview
1. <div id=”id_tab” class=”yui-navset” style=”width: 1138px” >
2. <ul class=”yui-nav”>
3. <li ><a href=”#tab2"><em>DATA PKL</em></a></li> 4. <div class=”yui-content” style=”width: 1125px” > 5. <div id=”id_tab” ><p><?php $this->load->view(‘viewpkl’) ?></p></div>
6. </div></div>
7. <script>(function () {
8. var tabView = new YAHOO.widget.TabView(‘id_tab’); YAHOO.log();})(); </script>
melalui aplikasi. Pihak dari mahasiswa/siswa PKL juga merasa terpenuhi kebutuhannya menyangkut proses PKL.
Tabel 1 Hasil Pengujian Blackbox Testing
No.
Poin Pengujian Data Input / Kondisi Hasil Uji Status
1 Proses Login Username: benar
Password: benar
Berhasil login Valid
Username: benar
Password: salah
Login gagal Valid
Username: salah
Password: salah
Login gagal Valid
2 Proses Tambah User Semua field diisi dengan tidak diisi dengan lengkap
Gagal Disimpan dalam basisdata
Valid
3 Proses Tambah Surat Balasan
Semua field diisi dengan lengkap
Berhasil disimpan dalam basisdata
Valid
Ada beberapa field yang tidak diisi dengan lengkap
Gagal Disimpan dalam tabel dalam basisdata
Valid
4 Proses Tambah Berkas/File Semua field diisi dengan lengkap
Berhasil disimpan dalam basisdata
Valid
Ada beberapa field yang tidak diisi dengan lengkap
Gagal Disimpan dalam tabel dalam basisdata
Valid
5 Proses Tambah Berita/Pengumuman
Semua field diisi dengan lengkap
Berhasil disimpan dalam basisdata
Valid
Ada beberapa field yang tidak diisi dengan lengkap
Gagal Disimpan dalam basisdata
Valid
6 Pembuatan IdCart Mahasiswa/Siswa PKL
Data Mahasiswa/Siswa Ada Cetak IdCart Valid
7 Simpan Laporan Rekap Data PKL
Data Rekap PKL Ada Cetak Laporan Rekap
PKL
Valid
8 Pembuatan Surat Balasan Data Surat Balasan Telah diinputkan
Cetak Surat Balasan Valid
9 Simpan Laporan Rekap Absen Mahasiswa/Siswa PKL
Field nim dan bulan absen diisi
Field nim dan bulan absen ada yang kosong
10 Proses Edit Biodata Mahasiswa/Siswa PKL
Semua field diisi dengan lengkap
Ada beberapa field yang tidak diisi dengan lengkap
Berhasil simpan dalam
11 Proses Absensi Online Lakukan Absen sekali dalam 1 hari
Absen lagi pada hari yang sama
Semua Field diisi dengan lengkap
Ada Beberapa field yang tidak diisi dengan lengkap
Berhasil kirim pesan dan simpan dalam basisdata
pembuatan idcart, laporan rekap absen, laporan rekap data PKL, dan pembuatan surat balasan yang otomatis terbuat ke dalam sistem, jadi pihak pegawai tidak perlu membuat secara manual. Implementasi YUI Library ke dalam sistem dapat berjalan baik dan memberikan tampilan menarik dilihat dari hasil pengujian beta testing, serta hasil perangkat lunak yang dibuat telah memenuhi kebutuhan pengguna dan pihak tempat studi kasus.
6. Daftar Pustaka
[1] Laras, Pungkas Setya. 2012. Perancangan dan Implementasi Sistem Penilaian Akademik Siswa Menggunakan YUI Library. Salatiga : Universitas Kristen Satya Wacana.
[2] Kadir, Abdul. 2011. Tips dan Trik Membangun Aplikasi Web Interaktif Dengan Yahoo! User Interface Library. Yogyakarta: Andi Publisher.
[3] Prabowo, Dedy A. 2010. Sistem Informasi Penerimaan CPNS Wilayah Jawa Tengah Berbasis Web. Semarang: Pascasarjana UDINUS.
[4] Muntiani. 2012. Sistem Informasi Manajemen Praktek Kerja Lapangan pada program Studi Sistem Informasi Berbasis Web. Surakarta : Universitas Surakarta
[5] Oetomo, Budi Sutedjo D. 2002.Perencanaan dan Pembangunan Sistem Informasi. Yogyakarta: Andi Publisher.
[6] Dharmayanti, Dian. 2010. Manajemen Data dan Konsep Database. http:// elib.unikom.ac.id.Diakses tanggal 5 Juni 2013.
[7] Negrino.2001.http://thesis.binus.ac.id/doc/Bab2/2011-1-00262-if%202.pdf. Diakses tanggal 13 Juni 2013.
![Gambar 1 Tahapan Penelitian [8]](https://thumb-ap.123doks.com/thumbv2/123dok/1124927.651772/3.612.198.409.320.492/gambar-tahapan-penelitian.webp)
