perancangan dan penerapan sistem informasi manajemen...

21
1 PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK (SIMPONI) BERBASIS WEB MENGGUNAKAN HTML5 ARTIKEL ILMIAH Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer Peneliti : Andry Ananda Putra Tanggu Mara (672014160). Christine Dewi, S.Kom., M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga 2018

Upload: ngothu

Post on 05-Apr-2019

234 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

1

PERANCANGAN DAN PENERAPAN SISTEM INFORMASI

MANAJEMEN PROYEK (SIMPONI) BERBASIS WEB

MENGGUNAKAN HTML5

ARTIKEL ILMIAH

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Peneliti :

Andry Ananda Putra Tanggu Mara (672014160).

Christine Dewi, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

2018

Page 2: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

2

Pernyataan Tidak Plagiat

Page 3: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

3

Lembar Persetujuan Akses

Page 4: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

4

Lembar Persetujuan Pembimbing

Page 5: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

5

Lembar Pengesahan

Page 6: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

6

PERANCANGAN DAN PENERAPAN SISTEM INFORMASI

MANAJEMEN PROYEK (SIMPONI) BERBASIS WEB

MENGGUNAKAN HTML5

1) Andry A.P Tanggu Mara 2) Christine Dewi S.Kom., M.Cs

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email : 1) [email protected], 2) [email protected]

Abstract

PT. Indonesia Comnet Plus (ICON +) is a subsidiary of the State Electricity

Company which is engaged in network, services and telecommunications content

that specifically supports information technology to PT. PLN. The projects

developed and documented in the manual book is not organized, so the search

process and the preparation of the project report to be inefficient. Staff or developer

must find and retrieve archived data from the manual book to recapitulate again

when it will be held an evaluation meeting and presentation of reports by the field of

Systems Development Manager. Project Management Information System is built to

cope with the recording of the project and assist in the creation of project

reports.The system is built using HTML5 in order to make the system look more

attractive and easy to use.

Keywords : Project, SIMPONI, HTML5

Abstrak

PT. Indonesia Comnet Plus (ICON+) merupakan anak perusahaan

Perusahaan Listrik Negara (PLN) yang bergerak dibidang jaringan, jasa, dan content

telekomunikasi yang secara khusus mendukung teknologi dan informasi untuk PT.

PLN. Proyek-proyek yang dikembangkan didokumentasi dalam manual book dan

tidak terorganisir, sehingga proses pencarian dan penyusunan laporan proyek

menjadi tidak efisien. Staff atau developer harus mencari dan mengambil manual

book dari arsip data untuk direkap-ulang ketika akan diadakan rapat evaluasi dan

pemaparan laporan oleh Manajer bidang Pengembangan Sistem. Sistem Informasi

Manajemen Proyek (SIMPONI) dibangun untuk menanggulangi pencatatan proyek

dan membantu pembuatan laporan proyek. Sistem dibuat menggunakan bahasa

pemrograman HTML5 dengan tujuan agar tampilan sistem lebih menarik dan mudah

digunakan.

Kata Kunci: Proyek, SIMPONI, HTML5 1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen

Satya Wacana Salatiga. 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

Page 7: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

7

1. Pendahuluan

PT. Indonesia Comnet Plus (ICON+) merupakan salah satu dari anak

Perusahaan Listrik Negara (PLN) yang didirikan pada tanggal 3 Oktober 2000. PT.

Indonesia Comnets Plus (ICON+) berfokus pada penyediaan jaringan, jasa, dan

content telekomunikasi, khusus untuk mendukung teknologi dan sistem informasi

PT. PLN (Persero) dan publik. Untuk itu Perseroan mengadakan berbagai layanan

unggulan seperti Clear Channel, Multi ProtocolLabel Switching (MPLS), Akses

Internet Broadband, Voice over Internet Protocol (VoIP), dan aplikasi perbankan.

Perusahaan ini memiliki beberapa cabang dan unit yang tersebar di seluruh ibu kota

Jakarta dan kota Bandung.

ICON+ memiliki 567 pegawai dan staff tetap. ICON+ merupakan perusahaan

yang cukup dikenal dalam bidangnya, sehingga tawaran maupun permintaan dalam

hal penugasan proyek tergolong banyak setiap bulannya, hal ini dikarenakan ICON+

menjalin hubungan kerja sama dengan banyak perusahaan di Jakarta maupun di

seluruh Indonesia. Setiap bulannya tercatat lebih dari 20 proyek yang dikerjakan

ICON+, Tahun 2017 tercatat 90 proyek yang masuk dalam daftar penugasan ICON+,

semua proyek tersebut merupakan proyek berbasis aplikasi atau perangkat lunak

yang meliputi aplikasi desktop, mobile serta web.

Penugasan-penugasan atau proyek yang telah masuk dalam daftar kerja

proyek pengembangan aplikasi akan dikerjakan dalam bentuk team work yang terdiri

dari 3-6 orang untuk setiap proyek. Biasanya satu team work menggarap lebih dari

satu program berbeda dan dalam rentang waktu satu bulan setiap team diharapkan

sudah menyelesaikan setiap proyek yang diberikan. Pada akhir minggu akan

diadakan UAT (User Acceptance Testing) oleh pimpinan bidang pengembangan

aplikasi dan client. Dalam hal ini developer dituntut agar dapat bekerja dengan

maksimal sehingga proyek yang dihasilkan tidak mengecewakan client. Oleh karena

itu developer perusahan hanya terpusat pada pengembangan proyek saja, padahal

pada setiap tiga bulan kerja Manager bidang PSPP (Pengembangan Sistem Pelayan

Pelanggan) mengadakan pertemuan evaluasi secara rutin terkait kinerja dan hasil

kerja serta laporan proyek staff dan pegawai. Sementara itu, laporan penugasan atau

proyek yang telah dikerjakan masih bersifat manual book. Sehingga membutuhkan

waktu yang cukup lama untuk diperiksa oleh manager PSPP.

Dalam kasus ini telah dirancang sebuah aplikasi berbasis web yang dapat

digunakan oleh perusahaan untuk mencatat, merekam dan menyimpan data-data

laporan terkait pengerjaan proyek setiap bulannya. Aplikasi berbasis web yang

dimaksud adalah “Sistem Informasi Manajemen Proyek (SIMPONI)”. Sistem

aplikasi yang akan diterapkan ini dibangun menggunakan bahasa pemrograman

HTML5. Aplikasi SIMPONI diharapkan dapat membantu mengurangi kesalahan

dalam melakukan pencatatan data proyek atau penugasan sehingga data dapat

tersimpan dengan aman dan mengurangi data yang hilang, serta mempercepat dalam

proses pencarian data dan membuat laporan.

Page 8: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

8

2. Tinjauan Pustaka

Penelitian yang berkaitan dengan pengembangan Sistem Informasi

Managemen Proyek telah dilakukan sebelumnya oleh Wahyuni seorang Dosen di

Universitas Komputer Indonesia dengan judul penelitian “Membangun Sistem

Informasi Manajemen Proyek di PT. Konindo Cipta Sejahtera ”. Sistem Informasi

Manajemen Proyek di PT. Konindo Cipta Sejahtera yang dibuat mampu membuat

pencatatan kegiatan pengerjaan proyek bidang renovasi interior dan eksterior. Dalam

pencatatan awal pengerjaan proyek, sistem melakukan pencatatan data barang yang

dibutuhkan, serta identitas para konsumen yang menggunakan jasa PT. Konindo

Cipta. Penelitian ini membagun aplikasi berbasis web dengan framework

CodeIgniter. Hasil dari penelitian tersebut mampu diterapkan dengan baik oleh

perusahan tujuan sehinnga pencatatan data berjalan dengan baik, data yang biasanya

disimpan dalam bentuk Microsoft excel atau dengan kata lain masih dalam bentuk

manual, dengan adanya aplikasi yang telah dibangun PT. Konindo Cipta Sejahtera

merasa sangat terbantu[1].

Penelitian lain yang berkaitan dengan penelitian ini adalah penelitian yang

telah dilakukan oleh Sean Lionel de Lima dalam artikel ilmiah berjudul

“Perancangan dan Implementasi Sistem Informasi Akademik Pada Fakultas Teknik

Universitas Pattimura Ambon Menggunakan HTML5”. Sistem yang dibangun

berfungsi untuk mempermudah proses integrasi beberapa matakuliah, pergantian

nama matakuliah, serta pengelolaan data matakuliah dan mahasiswa. Sistem

informasi ini dibangun dengan menggunakan teknologi HTML5, dengan tujuan

untuk memberikan kemudahan bagi pengguna sistem[2].

Penelitian terdahulu di atas memiliki kesamaan-kesamaan dengan penelitian

yang akan dilakukan yaitu sebagai berikut: Pertama, penelitian pertama membahas

tentang aplikasi sistem informasi yang digunakan untuk mencatat proses pekerjaan

proyek dalam perusahaan. Kedua, penelitian kedua membahas tentang teknologi

yang digunakan yaitu penerapan HTML5. Namun jika dibandingkan dengan

penelitian terdahulu, penelitian tentang “SIMPONI” secara khusus dibuat lebih detail

dan terperinci dalam pencatatan proyek kerja perusahaan, dan pemantauan proyek

dengan metode grant chart, serta tampilan sistem yang lebih menarik dan dinamis.

Sistem Informasi Manajemen adalah suatu alat yang mendukung para

pengambil keputusan dalam melaksanakan fungsi-fungsi manajemen(perencanaan,

pengorganisasian, pelaksanaan dan pebgendalian), sedemikian rupa sehingga

tercapai suatu keputusan yang didasarkan kepada pendekatan sistem. Dalam

perkembangannya, Sistem Informasi Manajemen (SIM) merupakan bagian dari

pengendalian internal suatu bisnis yang meliputi pengelolaan manusia, dokumen,

teknologi, dan prosedur oleh manajemen untuk memecahkan masalah bisnis, seperti

biaya produksi, layanan, atau suatu strategi bisnis. Sistem informasi manajemen

proyek umumnya diterapkan terhadap pengendalian atas aktivitas operasional suatu

organisasi atau perusahaan[3].

Page 9: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

9

Hypertext Markup Language 5 (HTML5) adalah salah satu teknologi terbaru

dalam standar World Wide Web. Standar ini memperkenalkan fitur baru seperti

memutar video dan penggunaan drag and drop, sebelum ada HTML5, HTML standar

bergantung pada plugins pihak ketiga di penjelajah website seperti Adobe Flash atau

Microsoft Silverlight. HTML5 membuat mekanisme yang lebih mudah dalam

pencitraan, baik itu hanya audio, video 2 dimensi hingga 3 dimensi sekalipun.

Teknologi yang sangat menarik dari HTML5 adalah adanya fitur Web-Based Graphic

Library (WebGL) yang diadaptasi dari aplikasi desktop agar website dapat menjalankan

sebuah interaktif 3 Dimensi yang dimasukkan dalam JavaScript dan adanya tag

Canvas yang dapat digunakan untuk pencitraan 3 Dimensi dengan berbasiskan teks

yang dikemas dalam JavaScript Object Notation(JSON)[4].

3. Metode dan Perancangan Sistem

Pada Penelitian ini, akan dilakukan beberapa tahapan penelitian sebagai

berikut: 1) Analisa Kebutuhan; 2) Perancangan Sistem; 3) Pengujian dan Analisa

Hasil Pengujian; 4) Penerapan Sistem. Tahapan-tahapan dalam penelitian ini dapat

dilihat pada gambar 1.

Gambar 1 Tahapan Penelitian[5].

Gambar 1 menjelaskan tahapan-tahapan yang dilakukan dalam penelitian ini,

sebagai berikut: Pertama, analisa kebutuhan dan pengumpulan data dari perusahan

(PT. Indonesia Comnet Plus) yang berkaitan dengan permasalahan penugasan atau

proyek. Masalah dianalisa berdasarkan hasil wawancara dengan beberapa developer

perusahaan dan pemantauan terhadap aktivitas pengembangan aplikasi oleh

developer. Kedua, Perancangan Sistem dengan menerapkan model prototype.

Prototype model adalah metode pengembangan sistem yang terdiri dari beberapa

tahap sebagai berikut: 1) Mendengarkan Pelanggan, 2) Perancangan Sistem, 3)

Pengujian Sistem. Model prototype dapat dilihat pada gambar 2.

Pengujian dan Analisa Hasil Pengujian

Penerapan Sistem

Perancangan Sistem

Analisa Kebutuhan (Pengumpulan Data)

Page 10: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

10

Gambar 2. Model Prototype[6].

Berdasarkan gambar 2 dapat dijelaskan sebagai berikut: Tahap Pertama,

Listen to Customer. Pada tahap ini dilakukan proses pengambilan data dengan

mendengarkan permasalahan serta saran developer PT Indonesia Comnet Plus terkait

proses pengerjaan proyek dan pembuatan laporan akhir proyek. Tahap Kedua,

Build. Pada tahap ini dilakukan beberapa perancangan yang meliputi pembuatan

database, penentuan arsitektur program, pembuatan front-end dan Mock-Up

program, membangun program atau sistem. Perancangan sistem dibuat

menggunakan model UML (Unified Modelling Languange) yang terdiri dari activity

diagram, use case diagram, dan class diagram[7].

Use-case diagram merupakan model diagram UML yang digunakan untuk

mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang

berhak menggunakan fungsi-fungsi tersebut. Berikut ini adalah use case diagram

yang diterapkan dalam sistem.

.

Gambar 3. Use-case Diagram Sistem “SIMPONI”

Pada gambar 3 menjelaskan bahwa terdapat dua actor yang bekerja dalam

sistem yang dibangun yaitu: PLN dan PT. ICON+. PLN yang bertindak sebagai

pemberi kerja kepada PT. ICON+ dapat memantau proyek yang sedang berjalan.

Sedangkan PT. ICON+ bertindak sebagai eksekutor atau pelaksana permohonan

pekerjaan oleh Vendor, PT. ICON+ merupakan user utama sistem yang dapat

Page 11: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

11

mengakses semua item dalam sistem. Seteleh pengguna berhasil masuk ke sistem

melalui login, pengguna akan melihat pada menu input daftar-daftar proyek yang

sedang dikerjakan bahkan yang sudah diselesaikan. Proyek terdahulu yang terdapat

dalam daftar tersebut dapat diedit sesuai kebutuhan oleh pengguna(ICON+) dan

dapat dihapus sewaktu-waktu apabila sudah tidak dibutuhkan. Pada halaman yang

sama, pengguna akan menggunakan sub-menu tambah proyek untuk mengerjakan

proyek baru dengan mengisi formulir tambah proyek baru. Setelah tambah proyek

baru, pengguna dapat melakukan update progress dengan menambahkan perubahan-

perubahan pada proses pengerjaan proyek. Setelah dilakukan perubahan pada proses

pengerjaan proyek, pengguna dan vendor (PLN) dapat memantau proses tersebut,

dan dapat dilakukan perubahan-perubahan lain sesuai kebutuhan dalam tahap ini.

Kemudian proyek diselesaikan dan dicetak laporannya untuk diserahkan ke pemberi

kerja.

Activity Diagram berfungsi untuk menggambarkan proses bisnis dan

urutan aktivitas dalam sebuah proses, Activity diagram dibuat berdasarkan sebuah

atau beberapa use case pada use case diagram. Perhatikan gambar 4.

Gambar 4. Activity Diagram Tambah Proyek Baru

Pada gambar 4 dijelaskan tentang proses yang dilakukan PLN diawali dengan

mengajukan proyek baru untuk dikerjakan ICON+, kemudian PLN melakukan

pemantauan progress dari proyek yang sedang dilangsungkan. Pada tahap akhir PLN

akan menerima aplikasi atau hasil akhir proyek. ICON+ akan menerima permohonan

pekerjaan yang akan diajukan oleh PLN, kemudian ICON+ akan menjalankan atau

mengerjakan proyek tersebut sesuai alokasi waktu yang ditentukan. Login ke

“SIMPONI” lalu menambahkan proyek baru, upgrade proses pelaksanaan proyek

Page 12: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

12

serta mencetak laporan hasil akhir proyek. Setelah selesai ICON+ akan menyerahkan

hasil proyek kepada PLN untuk diuji kelayakannya.

Class Diagram digunakan untuk menampilkan kelas-kelas dan paket-paket di

dalam sistem. Class diagram memberikan gambaran sistem secara statis dan relasi

antar mereka.

Gambar 5. Class Diagram “SIMPONI”

Gambar 5 merupakan Class Diagram sistem SIMPONI, class home memiliki

relasi dengan class login, master, user. Class proyek membangun relasi dengan class

login, customer, progress dan project, class progress mempunyai relasi dengan class

proyek dan project. Class customer mempunyai relasi class proyek. Class Home

berisi grapich chart yang berfungsi sebagai dashboard petunjuk dan perhitungan

jumlah proyek dan nilai proyek, perhitungan tersebut diperoleh dari attribute v_graf,

v_graf_harga dan v_xx.

Setelah beberapa langkah di atas selesai dilakukan, langkah berikutnya:

Ketiga, melakukan percobaan atau pengujian sistem (pengujian alfa dan beta).

Pengujian alfa dilakukan dengan tujuan untuk menghindari kegagalan dalam

menjalankan sistem, pengujian ini dilakukan dengan menguji setiap komponen atau

item dalam sistem/aplikasi. Pengujian beta dilakukan dengan memberikan aplikasi

yang telah selesai dibangun kepada beberapa sample dalam hal ini beberapa staff

pegawai atau developer PT. Indonesia Comnet Plus. Keempat, Penerapan Sistem.

Pada tahap ini sistem yang dibangun mulai diterapkan dan dilakukan monitoring

untuk mengawasi terdapatnya kesalahan atau error dalam penerapan program[8].

4. Hasil dan Pembahasan

Aplikasi berbasis web dengan teknologi HTML5 yang diterapkan pada

browser merupakan hasil dari penelitian ini. HTML5 diterapkan dengan tujuan

menghasilkan tampilan atau desain web yang menarik. Form Login aplikasi

SIMPONI dapat diakses oleh user (pemegang hak akses dalam hal ini PT. ICON+).

Untuk masuk/login pada Aplikasi Manajemen Proyek PT ICON+, ketikkan url

aplikasi pada browser maka akan muncul halaman login seperti pada gambar 6. Isi

username : admin, dan password : admin.

Page 13: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

13

Gambar 6. Form Login SIMPONI

Gambar 7. Halaman Beranda SIMPONI

Gambar 7 merupakan halaman beranda SIMPONI, didalamnya terdapat 5

menu utama yang dapat diakses oleh pengguna yang terdiri dari Profile, Home,

Master, Input dan Logout. Menu Profile merupakan menu yang menyediakan

informasi tentang user yang sedang aktif atau menjalankan program. Menu Home

adalah halaman beranda SIMPONI sendiri, Menu Master adalah menu yang

menyimpan informasi tentang user dan vendor perusahaan. Menu Input digunakan

untuk melihat daftar proyek dan menambah proyek baru. Serta menu Logout yang

berfungsi untuk keluar dari sistem. Dapat diperhatikan pada gambar 7 terdapat grafik

yang memiliki fungsi untuk menampilkan perhitungan jumlah proyek yang sudah

tercatat dalam proses pelaksanaan dan grafik nilai proyek yang merupakan harga-

harga proyek dan deviasinya yang tercatat dalam sistem. Perhitungan dilakukan

dengan memanipulasi database seperti pada kode program 1 dan 2.

Page 14: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

14

Kode Program 1. Perintah menampilkan Grafik Jumlah Proyek

1. <script type="text/javascript">

2. var chart1;

3. var chart2;

4. $(document).ready(function() {

5. chart1 = new Highcharts.Chart({

6. chart: {

7. renderTo: 'graph',

8. type: 'column'

9. },

10. title: {

11. text: '<b>Grafik Progress</b>'

12. },

13. subtitle: {

14. text: '<?php echo $nm_proyek; ?>',

15. },

16. xAxis: {

17. categories: ['Tanggal']

18. },

19. yAxis: {

20. title: {

21. text: 'Persentasi'

22. }

23. },

24. series:

25. [

26. <?php

27. $in = new progress($pdo);

28. $query = "SELECT * FROM v_progress WHERE kd_proyek='$kd_proyek' ";

29. $in->grafik1($query);

30. ?>

31. ]

32. });

Baris 1 sampai 9 pada Kode Program 1 merupakan perintah untuk

mendeklarasikan grafik atau chart yang akan digunakan, baris 10 sampai 23

merupakan perintah untuk mengatur tampilan grafik agar tertata sesuai tanggal dan

persentasi proyek. Baris 24 sampai 31 merupakan perintah untuk mengambil data

dari database.

Kode Program 2. Perintah Menampilkan Grafik Nilai Proyek

1. chart2 = new Highcharts.Chart({

2. chart: {

3. renderTo: 'graph1',

4. type: 'column'

5. },

6. title: {

7. text: '<b>Grafik Actual Cost</b>'

8. },

9. subtitle: {

10. text: '<?php echo $nm_proyek; ?>',

11. },

12. xAxis: {

13. categories: ['Tanggal']

14. },

15. yAxis: {

Page 15: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

15

16. title: {

17. text: 'Persentasi'

18. }

19. },

20. series:

21. [

22. <?php

23. $ini = new progress($pdo);

24. $query1 = "SELECT * FROM v_progress WHERE kd_proyek='$kd_proyek' ";

25. $ini->grafik2($query1);

26. ?>

27. ] }); });

Kode Program 2 merupakan perintah yang digunakan untuk menampilkan

grafik atau chart bagian ke dua pada halaman beranda. Kolom 1 sampai 11

merupakan perintah deklarasi penggunaan chart. Secara khusus perintah kolom 10

digunakan untuk memnaggil nama proyek yang sedang dikerjakan. Kolom 12

sampai 19 adalah perintah untuk menampilkan chart sesuai tanggal dan persentasi,

tanggal disimbolkan sebagai sumbu x dan dan persentasi sebagai sumbu y. Kolom

20 sampai 27 merupakan perintah untuk mengambil data yang telah tersedia di

database sistem. Data diambil berdasarkan kode proyek.

Gambar 8. Menu Input (Proyek)

Gambar 8 merupakan menu yang digunakan untuk melihat daftar proyek

yang sedang atau sudah selesai dikerjakan oleh user, daftar proyek dibuat dalam

bentuk table agar lebih mudah dibaca oleh vendor. Table tersebut berisi 1) ID

Projcet, 2) Nama Pekerjaan atau proyek yang dikerjakan, 3) Pemberi Kerja, dalam

hal ini PLN pemberi kerja utama, dan Non-PLN sebagai pemberi kerja alternatif.

Tetapi ICON+ biasanya 90% mengerjakan proyek yang diberikan oleh PLN. 4)

Vendor, PLN dan ICON+ adalah dua actor utama dalam pengerjaan proyek. 5)

PM/PIC merupakan penanggungjawab dalam pengerjaan proyek. PM/PIC biasanya

ditangani langsung oleh manajer bidang teknis perusahaan. 6) Waktu Mulai

merupakan tanggal proyek mulai dikerjakan. 7) Waktu Selesai merupakan tanggal

Page 16: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

16

yang ditetapkan untuk menyelesaikan seluruh pekerjaan. Khusus pada waktu selesai,

dapat dilakukan perubahan atau update tanggal selesai sesuai kebutuhan pengguna.

8) Rencana proses kerja yang dihitung dalam persentasi(%). Rencana proses kerja

bernilai optional/pilihan, tidak harus 100% tergantung pada kebutuhan dan

kesepakatan yang telah ditentukan oleh pemberi kerja dan vendor proyek. 9) Aktual

merupakan pencapaian yang telah diperoleh selama masa pengerjaan proyek. 10)

Deviasi merupakan selisih antara Renca dan Aktual dalam pengerjaan proyek,

Aktual digunakan sebagai parameter untuk menilai proyek yang dikerjakan sudah

selesai atau masih dalam proses pengerjaan. Proyek dinyatakan selesai apabila

Deviasi = 0. 11) Progress merupakan sub-menu yang digunakan untuk menambah

proses pengerjaan proyek, sebagai contoh dapat dilihat pada gambar 9.

Gambar 9. Sub-menu Tambah Progress

Tambah Progress merupakan sub-menu yang berfungsi untuk memperbaharui status

dalam proses pengerjaan proyek. Status yang dimaksud adalah Rencana, Aktual dan

Deviasi, agar Aktual dan Deviasi dapat diperbaharui maka dibutuhkan progress(%)

dalam sub-menu Tambah Progress dan act cost sebagai parameter perhitungan

Deviasi. 12) Edit merupakan sub-menu untuk mengedit perubahan dalam pengerjaan

proyek. Selain itu menu input juga terdapat icon , icon tersebut digunakan

untuk menambah proyek baru.

Kode Program 3. Perintah Untuk Tambah Proyek Baru

1. $proj = new project($pdo);

2. if(!empty($_POST['kd_proyek'])){

3. $kd_proyek = $_POST['kd_proyek'];

4. $customer = $_POST['customer'];

5. $nm_proyek = $_POST['nm_proyek'];

6. $pic = $_POST['pic'];

7. $nilai_kontrak = str_replace(['Rp.',',','.'],'',

8. $_POST['nilai_kontrak']);

9. $wkt_mulai = tgl_sql($_POST['wkt_mulai']);

10. $wkt_selesai = tgl_sql($_POST['wkt_selesai']);

11. $rencana = $_POST['rencana'];

12. $created_by = $_SESSION['s_user'];

Page 17: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

17

13. if($proj>create($kd_proyek,$customer,$nm_proyek,$pic,$nilai_kontrak,$w

kt_mulai,$wkt_selesai,$rencana,$created_by)){

14. $sg = "ok";

15. $msg1 = "Data telah ditambahkan";

16. $alert='alert-success';

17. }else{

18. $g = "err";

19. $msg2 = "Data tidak bisa dimasukan";

20. $alert='alert-error';

21. }

22. }

Kode Program 3 merupakan perintah yang digunakan untuk menambah proyek

baru pada sistem. Baris 1 sampai 12 adalah perintah untuk menyimpan atau

mengumpulkan nilai/data dari pengguna yang dimasukan sesuai kebutuhan. Baris 13

sampai 22 merupakan perintah untuk menampilkan hasil input oleh pengguna.

Gambar 10. Formulir Tambah Proyek Baru

Setelah user memilih icon Tambah maka akan muncul jendela baru yang berisi

formulir untuk diisi sesuai kebutuhan proyek. Formulir tersebut berisi id_proyek,

nama_proyek, vendor, pic, nilai kontrak, waktu_mulai, waktu_selesai, dan rencana

prosentase. Formulir tambah proyek baru dapat dilihat pada gambar 10.

Gambar 11. Tampilan Laporan Progress Proyek

Page 18: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

18

Gambar 11 merupakan laporan secara keseluruhan data proyek dan progress

pengerjaan proyek secara berkala yang ditampilkan menggunakan grafik(grafik

Progress) serta perhitungan biaya proyek yang diperoleh dengan memperhatikan

nilai kontrak, rencana (persentase) dan selisih harga proyek berdasarkan

deviasi(persentase). Laporan tersebut dapat dicetak dalam file dengan eksistensi .pdf.

Laporan inilah yang akan digunakan oleh pengguna atau developer untuk dijadikan

bahan laporan dasar dan pedoman pada rapat eveluasi perusahaan setiap akhir

bulannya. Beberapa file laporan juga dapat dicetak dalam file Microsoft excel. Grafik

progress dan grafik actual cost dapat dicetak secara terpisah dan dalam bentuk

format yang bermacam-macam(PNG, JPEG, PDF, SVG). Grafik progress

ditampilkan dengan perintah program seperti pada Kode Program 4 dan grafik actual

cost ditampilkan dengan perintah program pada Kode Program 5.

Kode Program 4. Perintah Menampilkan Grafik Progress

1. public function grafik1($query)

2. {

3. $query = $this->db->prepare($query);

4. $query->execute();

5. while ($row=$query->fetch(PDO::FETCH_ASSOC)) {

6. $data =$row['priode'];

7. $jumlah =$row['progres'];

8. ?>

9. {

10.

11. name: '<?php echo tgl_indo($data); ?>',

12. data: [<?php echo $jumlah; ?>]

13. },

14. <?php

15. }

16. }

Pada Kode Program 4, baris 1 sampai 7 adalah perintah untuk simpan data

yang kemudian dikalkulasi dan dikumpulkan pada variable $data dan $jumlah.

Sedangkan baris 8 sampai 12 adalah perintah untuk menampilkan chart atau grafik.

Kode Program 5. Perintah Menampilkan Grafik Actual Cost

1. public function grafik2($query1)

2. {

3. $query1 = $this->db->prepare($query1);

4. $query1->execute();

5. while ($row=$query1->fetch(PDO::FETCH_ASSOC)) {

6. $data =$row['priode'];

7. $jumlah =$row['act_cost'];

8. ?>

9. {

10. name: '<?php echo tgl_indo($data); ?>',

11. data: [<?php echo $jumlah; ?>]

12. },

13. <?php

14. }

Pada Kode Program 5, baris 1 sampai 7 adalah perintah untuk menampung

data untuk dikalkulasi dan dikumpulkan pada variable $data dan $jumlah.

Page 19: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

19

Sedangkan baris 8 sampai 12 adalah perintah untuk menampilkan chart berdasarkan

name dan data.

Metode blackbox testing merupakan pengujian yang dilakukan dengan

mengamati hasil eksekusi melalui data uji dan memeriksa fungsional dari perangkat

lunak secara langsung tanpa memperhatikan alur eksekusi program. Tujuan Black

Box Testing adalah untuk mencari kesalahan/kegagalan dalam sistem, sehingga dapat

dilihat apakah sistem yang dibangun sudah sesuai harapan atau kebutuhan[9].

Tabel 1 Hasil Pengujian Black Box

FUNGSI KONDISI HASIL VALIDITAS

Login Masukan Username Sukses Login V

Dan Password yang benar

Masukan Username

dan Password yang salah Gagal Login V

Tambah Proyek Baru Form diisi dengan benar Sukses tambah proyek V

Form *wajib tidak diisi Gagal tambah proyek

Edit Proyek Form diisi dengan benar Sukses edit data V

Form *wajib tidak diisi Gagal edit data

Update Progress proyek Form diisi dengan benar Sukses update Proyek V

Form *wajib tidak diisi gagal update proyek

View Grafik Progress Pilih view grafik Sukses Tampilkan grafik V

Print daftar Proyek Pilih print proyek Sukses print proyek V

Export daftar proyek

ke PDF dan Excel Pilih menu export pada menu Sukses export data V

Berdasarkan pengujian alfa yang dilakukan pada aplikasi web Sistem

Informasi Manajemen Proyek (SIMPONI) dapat disimpulkan bahwa aplikasi ini

berjalan dengan baik dan sesuai harapan, hal ini dapat dilihat dari status setiap fungsi

yang valid dan tidak terdapat error. Pengujian beta merupakan pengujian yang

dilakukan oleh calon pengguna aplikasi dengan menggunakan kuesioner, yaitu

dengan menjawab pertanyaan-pertanyaan yang terdapat dalam kuesioner tersebut.

Sasaran kuesioner yang dimaksud adalah pegawai atau developer perusahaan PT.

Indonesia Comnet Plus yang meliputi 10 developer dan 2 manager bidang teknis dan

pengembangan pelayanan.

Tabel 2 Hasil Jawaban Kuesioner

No. Pertanyaan SS S CS TS

1. Apakah Aplikasi ini mudah digunakan 6 2 4 0

2. Tampilan, huruf, gambar, dan grafik

aplikasi ini apakah dapat dilihat dengan jelas 4 7 1 0

3. Apakah Menu-menu dalam aplikasi ini jelas dan

tidak membingungkan 1 8 1 1

4. Apakah aplikasi ini membantu dalam mencatat

Laporan Proyek perusahaan 3 2 7 0

5. Apakah aplikasi ini membantu dalam pemantauan

Pengerjaan proyek 7 4 1 0

Page 20: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

20

Pengujian beta dengan menerapkan kuesioner merupakan pengujian yang

bertujuan untuk mengetahui apakah sistem telah memenuhi kebutuhan,

mempermudah pekerjaan pengguna dan mudah digunakan oleh

pengguna(developer). Table 2 merupakan hasil dari kuesioner yang telah diisi oleh

responden dengan keterangan sebagai berikut: SS = Sangat Setuju, S = Setuju, CS =

Cukup Setuju, TS = Tidak Setuju. Setelah semua pertanyaan diisi, akan dilakukan

perhitungan presentase jawaban kuesioner dengan rumus Index[10].

Berdasarkan analisa setiap pertanyaan diperoleh hasil sebagai berikut:

Pertanyaan pertama, diperoleh index 85% responden setuju apabila sistem informasi

manajemen proyek (SIMPONI) mudah digunakan. Pertanyaan kedua, diperoleh

index 86% responden setuju tampilan, huruf, gambar, grafik dalam sistem terlihat

jelas. Pertanyaan ketiga, diperoleh hasil 77,8% responden setuju menu-menu dalam

sistem tidak membingungkan pengguna. Pertanyaan keempat, diperoleh index

sebesar 81,56% responden setuju bahwa sistem dapat membantu pencatatan laporan

proyek. Pertanyaan kelima, diperoleh index 90% responden setuju bahwa sistem

yang dibangun dapat membantu dalam pementauan pengerjaan proyek. Sehingga

secara keseluruhan dapat disimpulkan bahwa sistem yang dibangun sudah memenuhi

syarat dalam hal membantu pengguna melaksanakan proyek hingga proses

pencatatan/perekaman laporan proyek.

Compatibility testing merupakan pengujian terhadap aplikasi untuk

membuktikan bahwa aplikasi dapat berjalan pada berbagai jenis browser.

Tabel 3 Hasil Compability testing

No. Browser Hasil Keterangan

1. Internet Explorer X chart/grafik progress proyek serta

beberapa icon tidak dapat ditampilkan

2. Mozilla Firefox V Setiap item berjalan baik

3. Chrome V Setiap item berjalan baik

4. Opera V Setiap item berjalan baik

Berdasarkan Compatibility testing dapat disimpulkan bahwa sistem informasi

manajemen proyek(SIMPONI) tidak dapat berjalan sesuai harapan pada Internet

Explorer, sedangkan pada Mozilla Firefox, Chrome dan Opera sistem dapat berjalan

dengan baik atau tanpa kendala.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan, serta pengujian terhadap

sistem, maka dapat disimpulan beberapa hal sebagai berikut: (1) Sistem Manajemen

Proyek (SIMPONI) dapat dirancang dengan menggunakan HTML5. (2) Sistem

informasi yang telah dirancang dapat dimanfaatkan untuk membantu proses

pencatatan dan perekaman laporan data proyek. (3) Sistem yang telah dirancang

dengan menggunakan HTML5 ini dapat menjadi media atau sarana

penyampaian informasi kepada staff dan developer PT Indonesia Comnet Plus.

Page 21: PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN ...repository.uksw.edu/bitstream/123456789/16836/2/T1_672014160_Full...PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK

21

Hasil pengujian sistem ini menjelaskan bahwa sistem informasi yang dibangun telah

memenuhi syarat sebagai sistem yang mempermudah developer persahaan dalam

mencatat laporan data proyek sehingga sangat membantu developer dalam

pembuatan laporan UAT. Saran untuk pengembangan selanjutnya adalah: (1) CSS3

dapat digunakan untuk membuat tampilan website lebih responsif, sehingga

tampilan website dapat menyesuaikan dengan ukuran layar browser. Hal ini

memberikan keuntungan yaitu ketika website diakses menggunakan layar

browser handphone, tampilan website tidak menjadi rusak. (2) tigkatkan level

manajemen dalam SIMPONI.

DAFTAR PUSRAKA

[1] http://jamika.mi.unikom.ac.id/jurnal/membangunsistem-informasi.1u

(Diakses Pada Tanggal 9 Agustus 2017).

[2] de Lima., S. L., 2013, Perancangan dan Implementasi Sistem Informasi

Akademik Pada Fakultas Teknik Universitas Pattimura Ambon

Menggunakan HTML: Artikel Ilmiah.

[3] Darmawan, D., 2013, Sistem Informasi Manajemen, Bandung: PT Remaja

Rosdakarya.

[4] Thabit, N. A., 2011. Pencitraan 3 Dimensi Berbasis JavaScript Object

Notation (JSON) pada Hyper Text Markup Language 5 (HTML5).

[5] Hasibuan, Z. A., 2007. Metodologi Penelitian Pada Bidang Ilmu

Komputer Dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi,

Jakarta: Ilmu Komputer Universitas Indonesia.

[6] Sugiarti, Y., 2013, Analisis dan Perancangan UML (Unified Modeling

Language) Generated VB.6, Graha Ilmu : Yogyakarta.

[7] Pressman, Roger S., 2002, Rekayasa Perangkat Lunak: Pendekatan Praktisi

jilid Dua, Penerbit: Andi Offset, Yogyakarta.

[8] https://library.binus.ac.id/eColls/eThesisdoc/Bab2/2012-1-00021-

SI%20Bab2001.pdf. (Diakses Pada Tanggal 19 Agustus 2017)

[9] Pressman, R. S., (2007). Rekayasa Perangkat Lunak: pendekatan praktisi

(Buku1). Beizer, B. (1995). Black-Box Testing, Wiley. Yogyakarta:Andi

Offset.

[10] Sunyoto, D., (2013). Teori, Kuesioner & Analisis Data Untuk Pemasaran

Dan Perilaku Konsumen, Graha Ilmu: Yogyakarta.