perancangan dan implementasi sistem informasi...

Jurnal Teknologi Informasi-Aiti, Vol. 10. No.2, Agustus 2013 : 101 - 200

158

Perancangan dan Implementasi Sistem InformasiManajemen Praktek Kerja Lapangan Berbasis WebMenggunakan 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 InformasiUniversitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, IndonesiaEmail: 1)[email protected], 2)[email protected],

3)[email protected]

Abstract

Management Information system of Practical Work ( PKL) is themanagement of data related to the process of PKL in several institutionone of them is PT.PLN ( Persero ) P3B Jawa Bali APP Salatiga. Thedata PKL must be managed well so information readily obtainable. Theexisting system of perceived still have problems in the management ofdata and information transmission. This research apply technology YUIlibrary in the manufacture of application of the web. The purpose its useso as to be easily in the management of data and the display becomesinteresting for the submission of information pertaining to PKL. The resultof 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 ofparties PT.PLN ( Persero ) P3B Jawa Bali APP Salatiga in themanagement of data PKL.

Keywords: YUI, JavaScript, PHP, MySQL, Management Information System of PKL

1. Pendahuluan

Teknologi Informasi yang selalu berkembang pesat memberikan kemudahandalam mencari informasi. Semua informasi yang akan dicari dapat ditemukan denganmudah dengan pemanfaatan teknologi. Penerapan teknologi informasi dapat berupaaplikasi-aplikasi web, desktop dan mobile. Teknologi web semakin hari semakinbaru dengan adanya beberapa kerangka kerja dan library yang mendukung bahasapemrograman untuk membangun aplikasi berbasis web. Teknologi web yang dapatmembangun web menjadi menarik adalah berbasis javascript misalnya: jquery.js,mootools.js, prototype.js, ext.js, YUI Library dan lain-lain [1]. Perkembangantersebut bertujuan agar teknologi dapat semakin mudah digunakan dan dimanfaatkan

159

untuk membantu pekerjaan manusia di segala bidang. Salah satu pemanfaatanteknologi web untuk mempermudah pekerjaan manusia adalah Sistem InformasiManajemen Praktek Kerja Lapangan.Sistem Informasi Manajemen Praktek Kerjalapangan (PKL) merupakan pengelolaan data bagi mahasiswa/siswa yang akanmelakukan Praktek Kerja Lapangan (PKL) di suatu instansi/perusahaan. Data yangmenyangkut PKL harus tersimpan dan dikelola dengan baik untuk kepentinganinstansi/yang bersangkutan jika sewaktu-waktu diperlukan. Akses sistem informasimanajeman PKL diharapkan dapat dengan mudah dilakukan agar informasi cepatdidapat. Teknologi web yang akan digunakan dalam pembuatan sistem adalah YUI(Yahoo User Interface) Library, dengan bahasa pemrograman PHP. YUI Librarymemiliki komponen-komponen/widget dapat memberikan antarmuka yang menarikdan user friendly dalam membangun sistem manajemen PKL berbasis web [2].YUI Library juga memberikan kemudahan dalam pengeloalan data dan penyampaianinformasi menyangkut PKL.

2. Tinjauan Pustaka

Pada penelitian sebelumnya telah dibangun sistem menggunakan bahasapemrograman PHP dan HTML serta MySQL sebagai basisdatanya [3]. Tetapi sistemmasih sederhana sesuai pengguna saja dan belum menerapkan teknologi khususuntuk tampilannya. Sedangkan pada penelitian tentang aplikasi proses PKL padaprogram studi Sistem Informasi di Universitas Muria Kudus, muncul permasalahanyaitu informasi terkait PKL hanya ditempel pada pengumuman dan informasiterkadang juga hilang sehingga kesulitan mencari informasi menyangkut PKL. Sebabitu perlu dibangun aplikasi yang bertujuan untuk mendapatkan informasi menyangkutpraktek kerja lapangan secara cepat, mudah, akurat, dan up to date. Aplikasi webmenggunakan pemrograman PHP dan MySQL serta CSS sebagai tampilannya [4].Untuk mengembangkan aplikasi yang telah dibuat sebelumnya akan ditambahkanYUI Library sebagai fitur tambahan yang memudahkan pengguna untuk pembuatanlaporan dan idcart sesuai dengan format dan kebutuhan.

Sistem informasi adalah sekumpulan elemen yang saling berhubungan satusama lain yang membentuk satu kesatuan untuk mengintegrasikan data, memprosesdan menyimpan serta mendistribusikan informasi [5]. Adanya sistem informasi datayang mentah dapat diproses menjadi informasi sehingga dapat disampaikan kepadapengguna.Manajemen data memiliki definisi bagian dari sumber daya informasi yangmencakup 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 menarikyaitu JavaScript. JavaScript adalah sebuah bahasa pemrograman yang bisadigunakan untuk menambahkan interaktifitas pada halaman web. JavaScriptdisertakan dalam halaman HTML. JavaScript diawali dan diakhiri dengan tag.JavaScript adalah bahasa pemrograman yang dijalankan di komputer user, sehinggaproses tidak perlu dilakukan pada server [7].

YUI (Yahoo! User Interface) Library adalah suatu toolkit bersifat Open

Perancangan dan Implementasi (Chandra K.,dkk)


160

Source yang dikembangkan untuk memudahkan pengembang aplikasi dalammembuat antarmuka aplikasi web. YUI Library mendukung sejumlah kontrol danutilitas yang sangat bermanfaat bagi pengembang aplikasi web. Rich Text Editor,TreeView, Paginator, dan DataTable merupakan contoh kontrol yang disediakanoleh YUI (Yahoo User Interface). Kode YUI (Yahoo User Interface) Librarydiimplementasikan dengan menggunakan JavaScript. Selain itu, beberapa perbedaanantar browser yang membuat kode menjadi lebih kompleks. YUI (Yahoo UserInterface) Library mendukung beberapa metode yang digunakan untuk mengakseselemen dalam suatu dokumen. CSS (Cascading Style Sheet) digunakan dalamHTML untuk menciptakan suatu style yang dipakai untuk mengatur penampilanelemen HTML. Elemen dapat diformat dengan fitur yang lebih kaya dari pada yangdisediakan elemen HTML dengan 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/siswaPKL di PT. PLN (Persero) P3B Jawa Bali APP Salatiga. Pengumpulan Informasikebutuhan data diperoleh dengan wawancara kepada pegawai PT.PLN (Persero)P3B Jawa Bali sub bidang sdm bidang administrasi dan umum.Pegawai yangmerupakan narasumber berperan mengelola proses penerimaan praktek kerjalapangan di lingkungan PT.PLN (Persero) P3B Jawa Bali APP Salatiga.

2. Tahap kedua adalah melakukan perancangan sistem yang dibangun disesuaikandengan analisis kebutuhan. Perancangan perangkat lunak yang digunakan di dalamtahapan ini adalah UML (Unified Modelling Language) yang terdiri dari usecase diagram, activity diagram, sequence diagram dan class diagram.Tambahan perancangan yang lain yaitu perancangan basisdata, perancangan

161

antarmuka pengguna.3. Tahap ketiga adalah perancangan aplikasi/program sesuai analisis kebutuhan

berdasarkan perancangan sistem yang telah dikerjakan. Fungsi-fungsi yang adadalam aplikasi dibuat sesuai hasil analisis kebutuhan dan perancangan sistem.

4. Tahap keempat adalah implementasi dan pengujian sistem, serta analisis hasilpengujian, apakah fungsi-fungsi yang ada dalam aplikasi telah berjalan lancardan baik. Pengujian sistem sementara ditunjukan kepada PT.PLN (Persero)P3B Jawa Bali APP Salatiga agar dapat dilakukan evaluasi/perbaikan kembalijika masih ada eror. Analisis hasil pengujian dilakukan untuk mengetahui apakahaplikasi telah berjalan dengan baik agar pengujian lebih terstruktur dengan baik.

5. Tahap kelima adalah penulisan laporan hasil penelitian. Tahap ini dilakukandokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan.

Gambar 2 Use Case Diagram

Pada Gambar 2 merupakan desain use case diagram sistem manajemenPKL. Terdapat tiga pengguna yang memiliki akses berbeda-beda yaitu admin,mahasiwa/siswa PKL, dan guest/pengunjung. Pengguna sebagai admin memilikihak akses untuk mengelola surat balasan PKL, mengelola absensi PKL, mengelolarekap data PKL, mengelola data user, membuat id cart untuk mahasiswa/siswaPKL, mengelola berkas/file, mengelola berita/pengumuman, serta mengelolaguestbook. Pengguna sebagai mahasiswa/siswa PKL dapat mengedit biodata diri,melakukan absensi online, mengunduh profil instansi, melihat pengumuman, memberi



162

pesan, serta melihat rekap data PKL. Pengguna sebagai guest merupakan semuaorang yang mengunjungi sistem manajemen PKL, guest hanya dapat melihat rekapdata, mengunduh profil instansi, melihat pengumuman, dan memberi pesan.

Gambar 3 merupakan activity diagram aktor administrator. Adminmelakukan proses login ke dalam sistem kemudian sistem mengecek validasi apakahproses login valid atau tidak, jika tidak valid maka kembali ke menu login tetapijika login valid masuk ke menu sistem. Admin memilih menu-menu yang tersediaseperti mengelola rekap data diklat, mengelola surat balasan PKL, mengelola absensiPKL, mengelola data user, membuat id cart untuk mahasiswa/ siswa PKL, mengelolaberkas/file, mengelola berita/pengumuman, mengelola guestbook. Admin juga dapatlangsung melakukan logout jika setelah melakukan login tidak memilih menu yangtersedia. 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 diPT.PLN(Persero) P3B Jawa Bali APP Salatiga. Sistem terbagi atas tiga controller,tiga model, dan beberapa entity. Beberapa Controller tersebut adalahadmincontroller, mhscontroller, dan guestcontroller. Tiap controller masing-masingmemiliki hubungan dengan entity yang ada. Pada controller terdapat fungsi-fungsiyang digunakan untuk mengakses entity. Tiap masing-masing model terhubung dengancontroller yang berfungsi mengakses ke dalam basisdata. Admincontroller terhubungdengan admin_model serta memiliki hubungan dengan entity surat balasan, rekapdata PKL, user, download, absen PKL, berita serta pesan.

Mhscontroller terhubung dengan mhs_model serta hanya dapat melakukanedit biodata mahasiswa dan melakukan absen. Guestcontroller terhubung denganguest_model dan memiliki hubungan dengan rekap data PKL, berita, mengunduh,

163

dan pesan. Artinya pengguna sebagai guest/pengunjung hanya dapat melihat rekapdata 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 ditulismenggunakan bahasa JavaScript dan terdapat juga kumpulan CSS didalamnya.Beberapa kumpulan Javascript dan CSS tersebut membentuk library yang nantinyadapat digunakan di dalam sistem. Pengguna dapat mengunduh YUI Library padahalaman website http://yui.zenfs.com/releases/yui2/yui_2.9.0.zip. Hasil dari unduhanberupa file zip yang nantinya diekstrak kemudian menjadi folder dan diberi namayui. Folder yui merupakan YUI Library yang terdiri dari kumpulan Javascript dankode-kode CSS. Pengguna mengasumsikan folder yui ke dalam folder aplikasiyang akan dibuat. Untuk melakukan integrasi YUI Library pada sistem penggunaperlu memanggil berkas hasil extract tadi dari kode HTML. Caranya denganmemanggil global object yang ada dalam YUI Library. Global object berfungsisebagai script dasar pemakaian fitur-fitur yang tersedia dalam YUI Library. Globalobject disertakan dalam script pemanggilan fitur-fitur YUI Library seperti fiturdatatable, fitur paging, fitur tabview, fitur menu, fitur button, fitur animasi, fiturdrag and drop dll. Script global object ditunjukkan pada Kode Program 1.



164

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. Contohpenggunaan YUI Library dalam pembuatan tombol/button dengan efek link dangambar. Seperti pada Kode Program 2, baris pertama mendeskripsikan variabeluntuk membuat button yui, baris kedua type dari button berupa link, baris tiga danempat merupakan id dari button yang akan dibuat dan diberi nama Yahoo, barislima merupakan link menuju alamat yang diinginkan, kemudian baris terakhirmerupakan id untuk pembuatan CSS yang dapat berupa warna dan gambar padabutton.

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 YUILibrary. Di mana pada setiap data yang ditampilkan terdapat aksi untuk lihat detail,edit, serta hapus. Pemanfaatan fitur YUI Library berupa datatable membuatUserInterface dalam penyajian data. Proses untuk mendefinisikan tabel melaluiYUI dapat dilihat pada Kode Program 3 yang merupakan proses untuk menampilkansemua data. Variabel definisiKolom menjelaskan pembentukan kolom-kolom dalamtabel seperti no, nama, penempatan, tanggal mulai, tanggal selesai, status dan action.Adanya fungsi sorting/pengurutan pada tiap-tiap kolom. Pengurutan kolomberdasarkan abjad serta data terbaru ke lama atau sebaliknya. Tabel pada YUILibrary juga memberikan fungsi kolom di dalam kolom. Fungsi children yaitu untukmembuat kolom-kolom menjadi satu grup dan memberikan nama sendiri. Contohfungsi children dapat dilihat pada Gambar 5 untuk tanggal mulai dan tanggal selesaidijadikan satu kolom dengan judul periode.

Gambar 5 Tampilkan Semua Data

165

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:true9. }]},{key:”status”, label:”STATUS”, sortable:true,resizeable:true},10. {key:”aksi”, label:”ACTION”},]}]

Gambar 6 menampilkan fungsi untuk menambah data user baru menggunakanYUI Library. Pemanfaatan YUI Library berupa efek dialog saat tombol tambahdata dipilih, dalam form dialog tersebut terdapat field untuk input data. Sedangkanproses untuk menampilkan fungsi tambah data user melalui YUI Library dapatdilihat pada Kode Program 4.

Gambar 6 Tambah Data

Kode Program 4 adalah kode program yang akan menampilkan form masukandata user baru ketika tombol Tambah Data dipilih. Pada Kode Program tersebutdibuat elemen div yang memiliki class yui-pe-content untuk mengambil CSS yangdisediakan YUI Library dalam peritah dialog. Data-data yang diisikan dalam fielddikirim 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”); ?>4. <label for=”username”>Username</label><inputtype=”text” name=”txtusername” id=”id_username” />5. <label for=”password”>Password</label><inputtype=”text” name=”txtpass” id=”id_pass” />



166

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”onclick=”javascript:NewCssCal(‘id_tgl_mulai’)”style=”cursor:pointer”/>13. <label for=”tgl_selesai”>Tanggal Selesai</label><input type=”text” name=”tgl_selesai”id=”id_tgl_selesai” />14. <img src=”<?php echo base_url(); ?>asset/images/calender/cal.png”onclick=”javascript:NewCssCal(‘id_tgl_selesai’)”style=”cursor:pointer”/>15. <label for=”penempatan”>Penempatan</label><inputtype=”text” name=”txtpenempatan” id=”id_penempatan” />16. <label for=”pembimbing”>Pembimbing Lapangan</label><input type=”text” name=”txtpmb” id=”id_pembimbing”/>17. <label for=”level”>Status</label>18. <select name=”status”><optionselected=”selected”>Pilih katagori</option><option>TELAHDIJADWALKAN</option>19. <option>SEDANG BERLANGSUNG</option><option>SELESAI</option></select>20. <?php echo form_close(); ?>2

Pada Gambar 7 menampilkan pembuatan idcart untuk mahasiswa/siswa PKL.Pembuatan idcart memanfaatkan tambahan library sendiri berupa library FPDFyang digunakan untuk generate data dari basisdata ke dalam format pdf. Idcartdalam format pdf kemudian dicetak menjadi idcart yang nantinya digunakan olehmahasiswa/siswa PKL. Pemanfaatan library FPDF juga digunakan untuk membuatlaporan rekap data PKL, pembuataan surat balasan, serta rakap absen mahasiswa.FPDF memberikan otomatisasi pembuatan laporan data didalam sistem yang datanyadiambil ke dalam basisdata sehingga pengguna tidak perlu membuat secara manualuntuk pembuatan laporan rekap data yaitu laporan rekap data PKL, pembuatansurat balasan, laporan rekap absen, serta pembuatan idcart. Kode Program 5merupakan proses pembuatan IdCart dengan melakukan generate data daribasisdata ke dalam format pdf. Posisi dan ukuran kertas dapat diatur dalam FPDF.Data dari basisdata hanya dipanggil melalui variable $row->nama kemudian diaturletaknya dengan fungsi FPDF Cell. Proses pembuatan laporan rekap data PKL,pembuatan surat balasan, serta rekap absen mahasiswa hampir sama dengan prosesdalam Kode Program 5.Perbedaannya pada pemanggilan variabel untuk basisdata,serta pengaturan letak datanya ke dalam fungsi Cell.

167

Gambar 7 Pembuatan IdCart Mahasiswa/Siswa PKL

Kode Program 5 Perintah Pembuatan IdCart dengan FPDF

1. <?php2. <?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 terbarumahasiswa/siswa mulai masuk.

Gambar 8 Laporan Rekap Data PKL

Pada Gambar 9 menampilkan pembuatan surat balasan untuk mahasiswa/siswa PKL. Surat balasan digunakan untuk membalas surat pengantar permohonanPKL dari mahasiswa/siswa yang akan melakukan PKL. Gambar 10 menampilkanrekap absen mahasiswa/siswa PKL. Rekap absen tersebut format disesuaikandengan kebutuhan pihak PT.PLN (Persero) P3B Jawa Bali APP Salatiga.



168

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/siswaPKL seperti menu biodata dan absensi. Menu biodata mahasiswa digunakan untukmemasukkan data diri mahasiswa/siswa PKL. Menu absensi digunakan mahasiswa/siswa PKL untuk melakukan absen online. Absen online dilakukan tiap hari padawaktu jam masuk PKL sampai periode yang ditetapkan pihak APP Salatiga.Mahasiswa/siswa PKL hanya bisa absen sekali dalam satu hari pada batas waktujam kerja kantor. Mahasiswa/Siswa PKL harus memberikan surat keterangan tidakmasuk jika sakit/ijin saat PKL kepada pihak admin/pegawai yang mengelola prosesPKL.

Gambar 11 Halaman Utama Menu Mahasiwa/Siswa PKL

169

Gambar 12 merupakan halaman awal aplikasi dijalankan, guest/pengunjungdapat melihat menu-menu yang tersedia pada halaman tersebut. Menu yang adayaitu menu data PKL untuk melihat data mahasiswa/siswa yang melakukan PKL,menu unduh untuk mengunduh profil instansi APP Salatiga, menu news berisipengumuman menyangkut PKL, menu guestbook untuk mengirim pesan kepadaaplikasi mengenai saran dan pertanyaan. Menu pada halaman memanfaatkan fiturdari YUI Library berupa tabview.

Gambar 12 Halaman Awal SIMAP

Pengguna hanya memilih menu yang tersedia dan akan muncul konten isi darimenu yang dipilih. Pembuatan tabview dapat dilihat pada Kode Program 6.Mendeklarasikan id_tab untuk dimasukkan dalam fungsi untuk pembentukan tabviewyang dimiliki YUI Library. Membuat menu dengan nama data PKL yang akan masukdalam link menuju halaman isi pada viewpkl.

Kode Program 6 Perintah Pembuatan Tabview1. <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>

Berdasarkan hasil pengujian blackbox pada Tabel 1, aplikasi sistemmanajemen PKL sudah berjalan sesuai dengan yang dirancang dan fungsi yangtersedia telah berjalan dengan baik. Aplikasi akan dilanjutkan kepengujian betatesting untuk mengetahui tingkat kepuasan pengguna terhadap aplikasi yangdibangun. Pengujian beta dilakukan dengan melakukan demo aplikasi kepada pihakPT.PLN (Persero) P3B Jawa bali APP Salatiga. Pengguna aplikasi yaitu satu orangpegawai APP Salatiga sebagai admin dan empat orang mahasiswa yang sedangPKL sebagai mahasiswa PKL dan guest. Berdasarkan pengujian didapatkanbahwaaplikasi ini membantu pihak PT.PLN (Persero) P3B Jawa Bali APP Salatigadalam proses pengelolaan PKL. Pihak APP Salatiga merasa mudah dan cepat dalammenangani proses penerimaan sampai pengelolaan PKL karena sistem telah berjalan



170

melalui aplikasi. Pihak dari mahasiswa/siswa PKL juga merasa terpenuhikebutuhannya 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 lengkap

Berhasil disimpan dalam basisdata

Valid

Ada beberapa field yang tidak diisi dengan lengkap

Gagal Disimpan dalam basisdata

Valid

3 Proses Tambah Surat Balasan

Semua field diisi dengan lengkap


Valid


Gagal Disimpan dalam tabel dalam basisdata

Valid

4 Proses Tambah Berkas/File Semua field diisi dengan lengkap


Valid


Gagal Disimpan dalam tabel dalam basisdata

Valid

5 Proses Tambah Berita/Pengumuman

Semua field diisi dengan lengkap


Valid


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

Cetak Laporan Rekap Absen Mahasiswa/Siswa PKL Muncul Peringatan Eror dan Ulangi lagi

Valid Valid

10

Proses Edit Biodata Mahasiswa/Siswa PKL

Semua field diisi dengan lengkap Ada beberapa field yang tidak diisi dengan lengkap

Berhasil simpan dalam basisdata Muncul Peringatan Eror dan Ulangi lagi

Valid Valid

11

Proses Absensi Online Lakukan Absen sekali dalam 1 hari Absen lagi pada hari yang sama

Berhasil simpan dalam basisdata Muncul Peringatan telah absen hari ini

Valid Valid

12 Proses Kirim Pesan pada Guest

Semua Field diisi dengan lengkap Ada Beberapa field yang tidak diisi dengan lengkap

Berhasil kirim pesan dan simpan dalam basisdata Muncul Peringatan dan tidak tersimpan dalam basisdata

Valid Valid

5. Simpulan

Penerapan YUI Library dengan pemrograman PHP telah berjalan baik sertamenghasilkan sistem yang memberikan kemudahan dalam pengelolaan PKL seperti

171

pembuatan idcart, laporan rekap absen, laporan rekap data PKL, dan pembuatansurat balasan yang otomatis terbuat ke dalam sistem, jadi pihak pegawai tidak perlumembuat secara manual. Implementasi YUI Library ke dalam sistem dapat berjalanbaik dan memberikan tampilan menarik dilihat dari hasil pengujian beta testing,serta hasil perangkat lunak yang dibuat telah memenuhi kebutuhan pengguna danpihak tempat studi kasus.

6. Daftar Pustaka

[1] Laras, Pungkas Setya. 2012. Perancangan dan Implementasi Sistem PenilaianAkademik Siswa Menggunakan YUI Library. Salatiga : Universitas KristenSatya Wacana.

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

[3] Prabowo, Dedy A. 2010. Sistem Informasi Penerimaan CPNS Wilayah JawaTengah Berbasis Web. Semarang: Pascasarjana UDINUS.

[4] Muntiani. 2012. Sistem Informasi Manajemen Praktek Kerja Lapangan padaprogram Studi Sistem Informasi Berbasis Web. Surakarta : UniversitasSurakarta

[5] Oetomo, Budi Sutedjo D. 2002.Perencanaan dan Pembangunan SistemInformasi. 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.

[8] Hasibuan, Zainal A.2007. Metodologi Penelitian Pada Bidang Ilmu Komputerdan Teknologi Informasi:Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu KomputerUniversitas Indonesia.


perancangan dan implementasi sistem informasi...

Documents