PERANCANGAN DAN PENERAPAN SISTEM INFORMASI MANAJEMEN PROYEK (SIMPONI) BERBASIS WEB MENGGUNAKAN HTML5 ARTIKEL ILMIAH

  

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 Pernyataan Tidak Plagiat

  Lembar Persetujuan Akses

  Lembar Persetujuan Pembimbing

  Lembar Pengesahan

  

PERANCANGAN DAN PENERAPAN SISTEM INFORMASI

MANAJEMEN PROYEK (SIMPONI) BERBASIS WEB

MENGGUNAKAN HTML5

  1) 2)

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

  Program Studi Teknik Informatika Fakultas Teknologi Informasi

  Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

   2)

  Email : Christine.dewi13@gmail.com

  

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) Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

  Staff

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

  . Aplikasi SIMPONI diharapkan dapat membantu mengurangi kesalahan

  HTML5

  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.

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 Menggu nakan 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].

  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

. HTML5 membuat mekanisme yang lebih mudah dalam Microsoft Silverlight

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.

  Analisa Kebutuhan (Pengumpulan Data) Perancangan Sistem Pengujian dan Analisa Hasil Pengujian Penerapan Sistem 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.

  Gambar 2 . Model Prototype[6].

  Berdasarkan gambar 2 dapat dijelaskan sebagai berikut: Tahap Pertama, Pada tahap ini dilakukan proses pengambilan data dengan Listen to Customer. 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

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

  database,

  program, membangun program atau sistem. Perancangan sistem dibuat menggunakan model UML (Unified Modelling Languange) yang terdiri dari activity dan class diagram[7].

  diagram, use case diagram, 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 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.

  Activity Diagram Tambah Proyek Baru Gambar 4.

  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 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 dan project, class progress mempunyai relasi dengan class

  login, customer, progress

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

  : admin, dan password : admin.

  username

  

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, . Menu Profile merupakan menu yang menyediakan

  Master, Input dan Logout

  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.

  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: {

  <?php 27. $in = new progress($pdo);

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

29.

  }, 12. xAxis: { 13. categories: ['Tanggal'] 14.

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

  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: {

  Kode Program 2.

  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.

  32. });

  $in->grafik1($query); 30. ?> 31. ]

  25. [ 26.

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

  } 23. }, 24. series:

  21. text: 'Persentasi' 22.

  }, 19. yAxis: { 20. title: {

  18.

  }, 16. xAxis: { 17. categories: ['Tanggal']

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

  }, 13. subtitle: {

  }, 15. yAxis: {

  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 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.

  Sub-menu Tambah Progress Gambar 9.

  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. = $_POST['kd_proyek']; $kd_proyek 4. = $_POST['customer']; $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. = $_POST['rencana']; $rencana 12. = $_SESSION['s_user']; $created_by

  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.

  Tampilan Laporan Progress Proyek Gambar 11. 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.

  Perintah Menampilkan Grafik Progress Kode Program 4. 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. Sedangkan baris 8 sampai 12 adalah perintah untuk menampilkan chart berdasarkan dan data.

  name

  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

proyek Form diisi dengan benar Sukses update Proyek

  V Update Progress Form *wajib tidak diisi gagal update proyek View Grafik Progress Pilih view grafik Sukses Tampilkan grafik V daftar Proyek Pilih print proyek Sukses print proyek

  V Print 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

  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. 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] (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]

  iakses 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.