PERANCANGAN RESPONSIVE VISUAL MANAGEMENT PT PLN UPB
SUMBAGSEL MENGGUNAKAN METRO-UI FRAMEWORK
Doni Dwi Atmaja 1), Widya Cholil 2), Megawaty 3) 1)
Mahasiswa Universitas Bina Darma, 2,3)Dosen Universitas Bina Darma Jl. A. Yani No.12 Plaju, Palembang 30624
Email: [email protected] 1), [email protected] 2) , [email protected] 3)
_________________________________________________________________________________
Abstrak : Salah satu perkembangan teknologi informasi yang ikut memicu kebutuhan akan perangkat
lunak, untuk mendorong produktifitas perusahaan adalah perangkat lunak berbasis responsive web. Dengan memanfaatkan teknologi informasi yang sudah ada seperti jaringan intranet di lingkungan PT PLN UPB Sumbagsel, maka penulis melihat dapat dibangun sebuah sistem visual management berbasis responsive web di dalamnya. Dengan sistem visual management tersebut informasi seperti pengumuman, berita pemadaman, dan beban harian dari unit kerja fasilitas operasi dan engineering dapat disampaikan kepada unit kerja lainnya dengan lebih cepat dan efisien, sehingga dapat memaksimalkan kinerja PT PLN UPB Sumbagsel. Metro-UI Framework dikembangkan berdasarkan LESS, yaitu preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinya. Dengan menggunakan Metro-UI Framework, maka pengembangan web akan menjadi mudah, terutama dari sisi responsive di ukuran layar.
Kata Kunci : responsive web, visual management, Metro-UI Framework
________________________________________________________________________________
Abstract: One of the developments in information technology that would trigger the need for software
to boost the productivity of the company is responsive web-based software. By leveraging existing information technology such as the intranet within the PT PLN UPB Sumbagsel, the writer saw can be built a visual management system based responsive web in it. With the visual system management information such as announcements, news blackouts and daily load of work units operating facilities and engineering may be communicated to other work units more quickly and efficiently, so as to maximize the performance of PT PLN UPB Sumbagsel. Metro-UI Framework developed by LESS, namely CSS preprocessor which gives a dynamic touch to the CSS with variable features, mixin, as well as its operations and functions. By using Metro-UI Framework, it will be easy web development, especially in terms of responsiveness on the screen size.
Keywords: responsive web, visual management, Metro-UI Framework
1. Pendahuluan
Perkembangan teknologi informasi di dunia saat ini sangat mempengaruhi manusia dalam berbagai aspek kehidupan, termasuk kebutuhan sebuah perangkat lunak pada suatu perusahaan. Salah satu perkembangan teknologi informasi yang ikut memicu kebutuhan akan perangkat lunak, untuk mendorong produktifitas perusahaan adalah perangkat lunak berbasis
responsive web. Menurut (Anugerah, 2013)
istilah responsive digunakan untuk mendeskripsikan bahwa web memiliki kemampuan merespon ukuran halaman sesuai dengan lebar layar peramban (browser) yang
terpasang pada jenis perangkat yang berbeda-beda.
PT PLN (Persero) Unit Pengatur Beban Sumatera Bagian Selatan (UPB Sumbagsel) merupakan subuah unit perusahaan BUMN sebagai suatu instansi yang bergerak di bidang pemeliharaan daya beban listrik, tentunya telah menggunakan teknologi informasi dalam mendukung aktivitasnya. Dalam struktur organisasinya PT PLN UPB Sumbagsel mempunyai unit kerja yang membantu memperlancar setiap kegiatan operasional perusahaan, salahsatunya yaitu unit kerja fasilitas operasi dan engineering yang memiliki beberapa tugas antara lain memberikan laporan
beban harian dan pemadaman listrik. Laporan beban harian ini dibuat dan dikirimkan kepada pihak PT PLN Pusat melalui portal khusus yang hanya dapat diakses oleh pihak unit kerja tersebut. Saat ini, untuk membagikan informasi kepada unit kerja lainnya di dalam lingkungan PT PLN UPB Sumbagsel, pihak unit kerja fasilitas operasi dan engineering harus membuat laporan khusus berupa table beban yang dicetak dan diberikan kepada unit kerja lainnya secara manual.
Dengan memanfaatkan teknologi informasi yang sudah ada seperti jaringan
intranet di lingkungan PT PLN UPB Sumbagsel, maka saya melihat dapat dibangun sebuah sistem visual management berbasis
responsive web di dalamnya. Dengan sistem visual management tersebut informasi seperti
pengumuman, berita pemadaman, dan beban harian dari unit kerja fasilitas operasi dan
engineering dapat disampaikan kepada unit
kerja lainnya dengan lebih cepat dan efisien melalui perangkat komputer ataupun perangkat
mobile sehingga dapat memaksimalkan kinerja
PT PLN UPB Sumbagsel.
Metro-UI Framework adalah nama
sebuah Framework yang berisi kumpulan komponen dasar CSS3 (Cascading Style Sheet),
javascript,dan jQuery. Metro-UI Framework
dikembangkan berdasarkan LESS, yaitu
preprosesor CSS yang memberikan sentuhan
dinamis kepada CSS dengan fitur variabel,
mixin, serta operasi dan fungsi yang dimilikinnya (Widodo, 2013). Dengan menggunakan Metro-UI Framework, maka pengembangan web akan menjadi mudah, terutama dari sisi responsive di ukuran layar. 2. Pembahasan
Dalam fase ini, pembuatan sistem visual
management diperlukan adanya pemodelan
untuk menentukan kebutuhan pengguna dari sistem yang akan dirancang, bertujuan agar kebutuhan dari pengguna keluar dan pengembang bisa melakukan pengumpulan kebutuhan pengguna. Tugas utama PT PLN UPB Sumbagsel adalah mengelola operasi sistem tenaga listrik di Sumatera bagian selatan secara kontinyu dan ekonomis. PT PLN UPB Sumbagsel terdiri dari beberapa unit kerja seperti unit kerja fasilitas operasi dan engineering, unit kerja operasi, serta unit kerja administrasi dan umu
Gambar 1 Struktur Organisasi PT PLN UPB Sumbagsel
Langkah yang ditempuh untuk mengetahui gambaran sistem yang akan dibuat adalah dengan studi kepustakaan (literature), penelitian (observasi) dan wawancara (interview) dengan melihat sistem lama yang berjalan. Sistem yang dibangun akan digunakan oleh unit kerja Fasilitas Operasi dan
Engineering terutama bagian dispatcher yaitu
monitoring data beban harian gardu per 30 menit selama 24 jam dalam satu hari. Diamana sistem yang berjalan saat ini yaitu laporan beban masih dalam bentuk file excel yang dicetak. Berikut adalah flowchart sistem berjalan pada PT PLN UPB Sumbagsel dalam membagikan informasi beban harian.
Gambar 2 Flowchart Sistem Berjalan Dalam fase ini mendesain DFD, database, ERD dan antar muka untuk mewakili model sistem dan model navigasional untuk mewakili kemungkinan dari model navigasi. Tujuan dari permodelan ini adalah memodelkan proses bisnis yang terjadi pada rancangan sistem yang dibuat sehingga akan memudahkan dalam sebuah rancangan sistem. Perancangan model navigasi dan perancangan antar muka yang ada pada sistem responsive visual
management seperti menu home, grafik beban
harian, berita, pengumuman, galeri dan video. Tujuannya agar pengguna dapat mengenal baik sistem yang akan dibangun.
Berikut adalah diagram konteks dari Sistem Visual Management PT PLN UPB Sumbagsel :
Gambar 3 Diagram Konteks
Diagram nol merupakan satu lingkaran besar yang mewakili lingkaran-lingkaran kecil yang ada di dalamnya. Merupakan pemecahan dari diagram Konteks ke diagram nol. di dalam diagram ini memuat penyimpanan data. Digram nol ini menggambarkan bagaimana proses-proses dan aliran data dari sistem visual
management UPB PLN Sumbagsel yang akan
dibangun. Di dalamnya juga terdapat penggambaran datastore sehingga struktur utama dari sistem sudah dapat dilihat dengan cukup jelas. Berikut adalah diagram Nol Sistem Visual Management PT PLN UPB Sumbagsel:
Gambar 4 Diagram Nol Sistem
ERD adalah merupakan salah satu model yang
digunakan untuk mendesain database dengan tujuan menggambarkan data yang berelasi pada sebuah database. Umumnya setelah perancangan ERD selesai berikutnya adalah mendesain database secara fisik yaitu pembuatan tabel, index dengan tetap
mempertimbangkan performance. Kemudian setelah database selesai dilanjutkan dengan merancang aplikasi yang melibatkan database. Berikut adalah ERD dari visual management PT PLN UPB Sumbagsel:
Gambar 5 ERD visual managemet PT PLN UPB Sumbagsel
Pengkodean Sistem merupakan tahapan dari pembuatan visual management PT PLN UPB Sumbagsel menggunakan Framework
Metro-UI. Pada tahapan ini dilakukan pembuatan dan penyatuan setiap item baik itu pembentukan struktur code dan menampilkan isi dari setiap text yang ada pada sistem. Di sinlah terdapat peranan utama Metro-UI
Framerwork sehingga diperoleh hasil tampilan
utama pada sistem visual management PT PLN UPB Sumbagsel.
Penjelasan struktur code hanya secara garis besar saja karena Metro-UI Framework diletakkan pada file index.php yang merupakan struktur utama yang menghubungkan seluruh komponen seperti home, berita, pengumuman, galeri, video dan data beban. Di bawah ini merupakan coding dari responsive visual
management PT PLN UPB Sumbagsel.
Pada gambar 4.1 diatas merupakan pengkodean untuk memanggil class dan fungfsi dari Metro-UI Framework pada file index.php, dimana index.php meruapkan penghubung utama dari seluruh komponen sistem. Maka dengan memasukkan struktur Metro-UI Framework kedalam index.php akan mengubah
struktur seluruh sub sistem sesuai dengan
Metro-UI Framework.
Proses pemanggilan Metro-UI Framework yang ditunjukkan pada gambar 4.1
terjadi pada baris ke 12 sampai dengan baris ke 26. Pada baris 12 sampai 16 merupakan struktur
CSS Metro-UI Framework, sedangkan baris 22
sampai 26 meruapakan struktur javaScript
Metro-UI Framework. Sedangkan untuk menampilkan class dari Metro-UI framework dapat dilihat pada gambar 4.2 di bawah ini.
Gambar 7 Class Metro-UI Framework. Pada gambar 4.2 baris 163 sampai baris 175 merupakan contoh proses pemanggilan dan menampilkan class Metro-UI Framework, yaitu ditandai dengan penulisan tag <div class = "tile-wide fg-white" role = "tile" effect = "slideUp" duration = "1000" data-period = "25000" style = "width: 100%; height: 100%; background: #1FBBA6; margin: auto;">. Fungsi dari tag tersebut adalah untuk menampilkan class slide sehingga dapat diciptakan effect bergerak pada tampilan sistem.
Hasil dari penelitian ini adalah
sebuah sistem visual management PT PLN
UPB Sumbagsel. Sistem ini terdiri dari 7
menu
utama
yakni
home,
berita,
pengumuman, galeri, video, beban harian
dan login. Selain dari menu utama, terdapat
menu untuk bagian administrator yang
nantinya bertugas mengontrol data dari
menu utama tersebut.
Halaman beranda merupakan halaman utama atau halaman depan (index). Halaman ini bisa diakses oleh siapa saja, baik oleh admin maupun oleh pengguna dikarenakan ini bersifat umum. Pada tampilan ini terdapat data beban berupa grafik, video, berita, pengumuman dan galeri. Ketika pengguna memilih salah satu dari menu tersebut akan mengarahkan ke tampilan
selanjutnya. Pada bagian atas terdapat link untuk menuju sistem support dan input beban. Adapun tampilan beranda sebagai berikut :
Gambar
8 Halaman Beranda
Pengujian Sistem ini dilakukan dengan metode pengujian black box testing, pengujian dilakukan untuk mengetahui apakah perangkat lunak berjalan dengan baik atau tidak. Dalam melakukan pengujian penulis membuat rencana pengujian sebagai acuan dalam melakukan pengujian. Rencana pengujian tersebut dapat penulis perlihatkan pada tabel 4.1 berikut ini :
Tabel 1 Rencana Pengujian N o Komponen Objek Penguji an Metod e Pengu jian 1 Berita (admin) Input, Edit, Delete Black Box 2 Pengumuman(ad min) Input, Edit, Delete Black Box 3 Galeri(admin) Input, Delete Black Box 4 Video(admin) Input, Delete Black Box 5 Admin Input, Ubah Passwor d Black Box 6 Data Beban(admin) View Black Box
Dari rencana pengujian pada tabel 4.1 diatas maka didapat hasil pengujian terhadap perangkat lunak sebagai berikut :
Hasil pengujian pada komponen berita dapat dilihat pada tabel 2 berikut:
Tabel 2 Pengujian Berita Kasus dan Hasil Uji Coba
a. Input Berita
Data Masukan
Memasukkan data sesuai dengan field yang disediakan pada form berita.
Yang Diharapkan
Proses masukkan data. Klik button simpan, data disimpan ke database dan dapat menampilkan pesan data berhasil disimpan
Pengamatan
Data berita berhasil dimasukan ke database dan menampilkan pesan bahwa data berhasil disimpan
Kesimpulan [] Diterima [ ] Ditolak b. Edit Berita
Data Masukan Memilih Data Berita dari daftar berita.
Yang Diharapkan
Dapat menampilkan form edit berita, mengubah data berita, proses disimpan, kemudian menampilkan pesanperubahan berhasil dilakukan.
Pengamatan
Data berita dapat diedit dan kembali ke halman berita
Kesimpulan [] Diterima [ ] Ditolak c. Delete Berita
Data Masukan Memilih Data berita dari daftar berita.
Yang Diharapkan
Menampilan proses
penghapusan berhasil dan kembali ke halaman berita.
Pengamatan
Menampilan proses
penghapusan berhasil dan kembali ke halaman berita Kesimpulan [] Diterima [ ] Ditolak
Dari pengujian yang dilakukan seperti yang terlihat pada tabel 2 dapat disimpulkan bahwa fungsional dari halaman berita berjalan dengan baik atau dapat diterima.
Hasil pengujian pada komponen pengumuman dapat dilihat pada tabel 3 berikut:
Tabel 3 Pengujian Pengumuman
Kasus dan Hasil Uji Coba a. Input Pengumuman
Data Masukan
Memasukkan data sesuai dengan field yang disediakan pada form pengumuman.
Yang Diharapkan
Proses masukkan data. Klik button simpan, data disimpan ke database dan dapat menampilkan pesan data berhasil disimpan
Pengamatan
Data berita berhasil dimasukan ke database dan menampilkan pesan bahwa data berhasil disimpan.
Kesimpulan [] Diterima [ ] Ditolak b. Edit Pengumuman
Data Masukan
Memilih data
pengumuman dari daftar pengumuman.
Yang Diharapkan
Dapat menampilkan form
edit pengumuman, mengubah data pengumuman, proses disimpan, kemudian menampilkan pesanperubahan berhasil dilakukan. Pengamatan
Data berita dapat diedit dan kembali ke halman pengumuman
Kesimpulan [] Diterima [ ] Ditolak c. Delete Pengumuman
Data Masukan
Memilih Data
pengumuman dari daftar pengumuman.
Yang Diharapkan
Menampilan proses
penghapusan berhasil dan kembali ke halaman pengumuman.
Pengamatan
Menampilan proses
penghapusan berhasil dan kembali ke halaman pengumuman
Dari pengujian yang dilakukan seperti yang terlihat pada tabel 3 dapat disimpulkan bahwa fungsional dari halaman pengumuman berjalan dengan baik atau dapat diterima.
Hasil pengujian pada komponen galeri dapat dilihat pada tabel 4 berikut:
Tabel 4 Pengujian Galeri Kasus dan Hasil Uji Coba
a. Input Galeri
Data Masukan
Memasukkan data sesuai dengan field yang disediakan pada form galeri.
Yang Diharapkan
Proses masukkan data. Klik button simpan, data disimpan ke database dan dapat menampilkan pesan data berhasil disimpan.
Pengamatan
Data berita berhasil dimasukan ke database dan menampilkan pesan bahwa data berhasil disimpan.
Kesimpulan [] Diterima [ ] Ditolak b. Delete Galeri
Data Masukan Memilih foto dari daftar galeri.
Yang Diharapkan
Menampilan proses penghapusan berhasil dan kembali ke halaman galeri.
Pengamatan
Menampilan proses penghapusan berhasil dan kembali ke halaman galeri.
Kesimpulan [] Diterima [ ] Ditolak Dari pengujian yang dilakukan seperti yang terlihat pada tabel 4 dapat disimpulkan bahwa fungsional dari galeri berjalan dengan baik atau dapat diterima.
Hasil pengujian pada komponen galeri dapat dilihat pada tabel 5 berikut:
Tabel 5 Pengujian Video Kasus dan Hasil Uji Coba
a. Input Video
Data Masukan Memasukkan data sesuai dengan field yang
disediakan pada form video.
Yang Diharapkan
Proses masukkan data. Klik button simpan, data disimpan ke database dan dapat menampilkan pesan data berhasil disimpan.
Pengamatan
Data berita berhasil dimasukan ke database dan menampilkan pesan bahwa data berhasil disimpan.
Kesimpulan [] Diterima [ ] Ditolak b. Delete Video
Data Masukan Memilih video dari daftar video.
Yang Diharapkan
Menampilan proses penghapusan berhasil dan kembali ke halaman video.
Pengamatan
Menampilan proses penghapusan berhasil dan kembali ke halaman video.
Kesimpulan [] Diterima [ ] Ditolak Dari pengujian yang dilakukan seperti yang terlihat pada tabel 5 dapat disimpulkan bahwa fungsional dari halaman video berjalan dengan baik atau dapat diterima.
Hasil pengujian pada komponen berita dapat dilihat pada tabel 6 berikut:
Tabel 6 Pengujian Admin Kasus dan Hasil Uji Coba
a. Input Admin
Data Masukan
Memasukkan data sesuai dengan field yang disediakan pada form admin.
Yang Diharapkan
Proses masukkan data. Klik button simpan, data disimpan ke database dan dapat menampilkan pesan data berhasil disimpan
Pengamatan
Data berita berhasil dimasukan ke database dan menampilkan pesan bahwa data berhasil disimpan
b. Ubah Password
Data Masukan
Memasukkan data sesuai dengan field yang disediakan pada form
ubah password. Yang
Diharapkan
Menampilan proses
update berhasil dan kembali ke halaman admin.
Pengamatan
Menampilan proses
update berhasil dan kembali ke halaman admin.
Kesimpulan [] Diterima [ ] Ditolak Dari pengujian yang dilakukan seperti yang terlihat pada tabel 6 dapat disimpulkan bahwa fungsional dari halaman admin berjalan dengan baik atau dapat diterima.
Hasil pengujian pada komponen data beban dapat dilihat pada tabel 7 berikut:
Tabel 7 Data Beban Kasus dan Hasil Uji Coba
View Data Beban
Data Masukan
Memilih menu data beban dan memasukkan tanggal beban harian.
Yang Diharapkan
Dapat menampilkan grafik dan data beban harian sesuai tanggal yang dimasukkan.
Pengamatan
Perangkat lunak mampu menampilkan grafik dan data beban harian sesuai tanggal yang dimasukkan. Kesimpulan [] Diterima [ ] Ditolak
Dari pengujian yang dilakukan seperti yang terlihat pada tabel 7 dapat disimpulkan bahwa fungsional dari halaman data beban berjalan dengan baik atau dapat diterima.
Berdasarkan hasil pengujian yang terlihat pada tabel 2 sampai dengan tabel 7 maka dapat disimpulkan bahwa semua hasil pengujian perangkat lunak berjalan dengan benar sesuai harapan.
3. Kesimpulan
Dari hasil dan pembahasan yang sudah dijelaskan maka dapat disimpulkan sebagai berikut :
1. Penelitian ini menghasilkan responssive
visual management PT PLN UPB Sumbagsel dengan menggunakan Metro-UI
Framework.
2. Sistem visual management ini dibangun menggunakan bahasa pemrograman PHP dan MySQL sebagai databasenya.
3. Sistem visual management ini sudah berbasis responsive web, sehingga ketika di akses menggunakan android tampilan web tersebut menyesuaikan dengan ukuran android.
4. Sistem visual management ini dapat memberikan kemudahan pada PT PLN UPB Sumbagsel dalam mengolah data beban harian.
5. Mempermudah dalam pengaksesan data, informasi dan berita seputar PT PLN UPB Sumbagsel baru agar lebih tepat dan akurat. 4. Saran
Adapun saran yang dapat diberikan dari penelitian yang telah dilakukan adalah sebagai berikut :
1. Diharapkan adanya pengembangan lebih lanjut agar informasi yang disampaikan dapat meluas ke lingkup umum.
2. Apabila di dalam sistem visual managemet yang dibuat oleh penulis masih ada kekurangan misalnya dari segi tampilan, penambahan menu atau lainnya, disarankan agar dapat dikembangkan lebih baik lagi oleh pihak PT PLN UPB Sumbagsel maupun yang lainnya.
Daftar Pustaka
[1] Anugerah, S. (2013). Pemodelan Responsive Web Menggunakan Foundation Framework Dalam Penembangan Perangkat Lunak Berbasis Perangkat Bergerak.
[2] Budgen, D. (2003). Software Design. Edinburg Gate: Person Education Limited. [3] Kangtanto. (2012, July 31). Responsive
Design, Solusi Desain Web Yang Fleksibel.
Dipetik May 25, 2016, dari kangtanto.com: http://kangtanto.com/web-2/responsive-design-solusi-desain-web-yang-fleksibel
