Perancangan dan Implementasi Aplikasi Manajemen

Proyek Menggunakan Framework CodeIgniter dan

Bootstrap
(Studi Kasus : PT. Pura Barutama)

Artikel Ilmiah

Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer

Peneliti:
Andre Maureen Pudjajana (672013055)
Ramos Somya, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2017

1
1
1
1
2
 Perancangan dan Implementasi Aplikasi Manajemen
Proyek Menggunakan Framework CodeIgniter dan
Bootstrap
(Studi Kasus : PT. Pura Barutama)

1)
Andre Maureen Pudjajana, 2) Ramos Somya
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia
Email: 672013055@student.uksw.edu, 2) ramos.6005@gmail.com
1)

Abstract
Pura Bangunan Unit is one of unit in PT. Pura Barutama is in charge of handling to build
new buildings or renovation of buildings. Memo process request to build new buildings or
renovation of buildings of the units are still processed by requesting to Pura Bangunan
Unit to create a new memo Unit. In addition, the project management process is often
inaccurate and real time. It is inefficient and ineffective because requesting memo takes
1-2 days, sometimes collected memo files are missing, and monitoring results are not
optimal. In this research, the design and implementation management project application
using CodeIgniter and Bootstrap framework. The results showed that the application help
and accelerate units of PT. Pura Barutama to request a memo from 1-2 days to 2-3
minutes, memo files can be stored safely, and management process can be done gradually
so that the monitoring results are accurate and real time.
Keywords: Management Project, Pura Bangunan Unit, PT. Pura Barutama, CodeIgniter
Framework, Bootstrap Framework

Abstrak
Unit Pura Bangunan merupakan salah satu unit di PT. Pura Barutama yang bertugas untuk
menangani pembangunan gedung baru atau renovasi gedung. Proses permintaan memo
untuk pembangunan gedung baru atau ronovasi gedung dari unit-unit masih diproses
dengan meminta unit Pura Bangunan membuat memo untuk pekerjaan tersebut. Selain itu,
dalam manajemen proses pengerjaan proyek seringkali tidak akurat dan real time. Hal
tersebut tidak efisien dan efektif karena proses permintaan memo membutuhkan waktu 1-
2 hari, berkas memo yang dikumpulkan kadang hilang, dan hasil monitoring tidak optimal.
Pada penelitian ini dilakukan perancangan dan implementasi aplikasi manajemen proyek
menggunakan framework CodeIgniter dan Bootstrap. Hasil pengujian aplikasi
menunjukkan bahwa aplikasi tersebut mempermudah dan mempercepat unit-unit PT. Pura
Barutama untuk melakukan permintaan memo dari 1-2 hari menjadi 2-3 menit, berkas
memo akan tersimpan dengan aman, dan proses manajemen dapat dilakukan secara
bertahap sehingga hasil monitoring akurat dan real time.
Kata Kunci: Manajemen Proyek, Unit Pura Bangunan, PT. Pura Barutama, Framework
CodeIgniter, Framework Bootstrap.
1)
Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya
Wacana Salatiga.
2)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

1
1. Pendahuluan
PT. Pura Barutama atau disebut sebagai Pura Group merupakan perusahaan
yang bergerak di beberapa bidang usaha, diantaranya yaitu percetakan,
pengepakan, pembuatan kertas, konversi, rekayasa, anti pemalsuan, dan teknologi
kartu elektronik & label. Pura Group memiliki 27 unit dan beberapa unit khusus
yang saling terintergrasi dalam menjalankan berbagai bidang usaha dan tersebar
pada lima kawasan berbeda di Kudus, Jawa Tengah [1].
Unit Pura Bangunan merupakan salah satu unit Pura Group yang bertugas
untuk membuat bangunan baru dan renovasi bangunan. Namun hingga saat ini,
permintaan untuk membangun bangunan baru atau renovasi bangunan dari
berbagai unit masih diproses dengan melakukan request pembuatan memo ke Pura
Bangunan kemudian mengambil berkas memo di Pura Bangunan untuk disetujui
oleh bagian umum, cost control, dan pimpinan unit tersebut. Selanjutnya
dikumpulkan kembali berkas memo tersebut ke Pura Bangunan. Kemudian dalam
monitoring pembuatan pra Rencana Anggaran Biaya (RAB), rancangan gambar
bangunan, RAB, Surat Keputusan Kerja (SPK), ketersediaan material, hingga
progress pelaksanaan pembangunan oleh admin dan pimpinan unit seringkali tidak
akurat dan real time. Hal tersebut tidak efisien dan efektif karena proses request
pembuatan memo membutuhkan waktu sekitar 1-2 hari, memo yang telah
dikumpulkan ke Pura Bangunan terkadang hilang, dan monitoring proyek tidak
optimal. Unit Pura Bangunan melakukan inovasi dengan melakukan request ke
unit khusus Management Information System (MIS) yang bertugas dalam
penanganan masalah teknologi informasi Pura Group untuk membuat aplikasi yang
dapat memudahkan berbagai unit dalam melakukan request dan monitoring.
Berdasarkan permasalahan tersebut, maka dapat diketahui rumusan masalah
dalam penelitian ini adalah bagaimana merancang dan mengimplematasikan
aplikasi manajemen proyek menggunakan framework CodeIgniter dan Bootstrap
untuk unit Pura Bangunan, PT. Pura Barutama. Aplikasi tersebut dibangun
menggunakan framework CodeIgniter sebagai back-end karena CodeIgniter
merupakan salah satu framework PHP yang menggunakan MVC (Model, View,
Controller) sehingga pembuatan aplikasi menjadi lebih terstruktur dan lebih aman
karena tidak berhubungan langsung dengan database. Sedangkan untuk front-end
menggunakan framework Bootstrap karena Bootstrap merupakan salah satu
framework CSS yang membuat tampilan web menjadi responsif. Database yang
digunakan adalah MySQL karena lebih sederhana dalam penggunaannya dan dapat
digunakan oleh beberapa user dalam waktu bersamaan.
Mengingat begitu luasnya ruang lingkup pembuatan aplikasi manajemen
proyek maka dibutuhkan batasan agar sistem yang dibangun tidak menyimpang
dari permasalahan dalam sistem aplikasi manajemen proyek. Adapun batasan
masalahnya yaitu proses manajemen proyek tidak menggunakan algoritma
tertentu, hanya terdapat tiga user (administrator, admin unit, dan pimpinan unit),
memo hanya dapat disimpan dalam bentuk PDF, dan tidak membahas keamanan
jaringan. Pembuatan aplikasi manajemen proyek ini diharapkan dapat
mengefisienkan waktu dan mempermudah penanganan dan monitoring proyek
oleh pihak Pura Bangunan dan unit yang melakukan request sehingga progres
menjadi akurat dan real time.

2
2. Kajian Pustaka
Terdapat beberapa penelitian terdahulu yang digunakan sebagai acuan dalam
penelitian ini. Penelitian pertama membahas tentang aplikasi manajemen proyek
berbasis web menggunakan framework CodeIgniter. Aplikasi tersebut bertujuan
untuk membantu perusahaan dalam menentukan konsultan TI yang menangani
proyek-proyek perusahaan. Aplikasi tersebut juga membantu konsultan TI dan
perusahaan dalam melihat biaya pembangunan, dokumen proyek, tanggal mulai
proyek, dan tanggal selesai proyek [2].
Penelitian kedua membahas tentang aplikasi manajemen proyek online bisnis
menggunakan Microsoft Project. Aplikasi tersebut bertujuan untuk membantu
memonitor transaksi secara real time, mempermudah proses jual beli, dan
membantu nasabah dalam memantau terhadap history transaksi [3].
Penelitian ketiga membahas tentang aplikasi manajemen proyek
menggunakan Microsoft Visual Basic 2008 di PT. Anugrah Pertiwi Kontrindo.
Tujuan dari aplikasi ini adalah membantu perusahaan dalam menentukan biaya
bahan baku pembangunan proyek dan dapat menghasilkan laporan pengerjaan
proyek dengan lebih akurat dan tepat waktu [4].
Jika dibandingkan dengan penelitian sebelumnya, penelitian ini berbasis web
menggunakan framework CodeIgniter dan Bootstrap dan berfokus pada monitoring
proyek secara khusus oleh unit Pura Bangunan dan unit yang melakukan request
tanpa ada perhitungan biaya material.
Manajemen merupakan proses dimana pelaksanaan dari suatu tujuan
diselenggarakan dan diawasi [5]. Sedangkan proyek merupakan upaya temporer
untuk menghasilkan produk, jasa, atau hasil yang tertentu/unik. Kata temporer
membedakan proyek dengan pekerjaan rutin. Proyek bersifat temporer artinya
waktu berlangsung dibatasi, ada awal dan ada akhir untuk pekerjaan yang
dilakukan dan tim yang dibentuk [6]. Jadi, manajemen proyek merupakan suatu
proses pelaksanaan pekerjaan secara bertahap dengan batas waktu tertentu yang
diawasi dari awal hingga selesai untuk mencapai suatu hasil.
PHP atau Hypertext Preprocessor pertama kali diciptakan seorang
kebangsaan Denmark bernama Rasmus Lerdorf pada 1995. PHP merupakan
bahasa berbentuk script yang ditempatkan dalam server dan dieksekusi di dalam
server untuk selanjutnya ditransfer dan dibaca oleh client. Untuk itu, dalam
mengeksekusi PHP dibutuhkan web server. Beberapa contoh web server yaitu
WampServer, Apache, dan Xampp. [7].
Framework adalah kumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam
pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut.
Penggunaan framework bertujuan agar waktu pembuatan website menjadi lebih
singkat dan pembuatan alur kode program lebih terarah [8].
CodeIgniter adalah sebuah framework PHP yang berupa kumpulan folder
dan file PHP, JavaScript, CSS, TXT, dan file berbasis web lainnya dengan setting
tertentu untuk menggunakannya dan menyediakan library dan helper yang dapat
dimanfaatkan di dalam pemrograman PHP. CodeIgniter tergolong framework
dengan ukuran kecil dan cukup mudah dikuasai [9]. CodeIgniter membutuhkan
web server agar dapat dijalankan. Salah satu contoh web server yaitu Wampserver.

3
CodeIgniter juga dikenal sebagai salah satu framework PHP yang menerapkan
konsep MVC (Model, View, Controller). Salah satu manfaat konsep MVC adalah
memisahkan kode program dengan pengelolaan database. Model berhubungan
dengan database dimana di dalam model terdapat class dan fungsi untuk
mengambil, menambah, mengubah, dan menghapus data suatu aplikasi. View
berfungsi untuk memberikan tampilan aplikasi ke user. Sedangkan controller
berfungsi sebagai jembatan penghubung antara view dan model.
Bootstrap merupakan salah satu framework CSS yang sering digunakan
untuk memperindah tampilan suatu website. Tujuan dari Boostrap adalah
mempercepat pekerjaan. Framework ini sering digunakan oleh front-end
programmer namun tidak menutup kemungkinan juga apabila digunakan oleh
back-end programmer. Kelebihan dari Bootstrap ini adalah tidak hanya membuat
tampilan yang statis namun dapat membuat tampilan dinamis dan beberapa animasi
dengan bantuan plugin JavaScript. Selain itu juga, Bootstrap mendukung untuk
membuat web responsif, yaitu tampilan akan berubah ukurannya tergantung pada
resolusi layar device yang digunakan oleh user [10].
MySQL merupakan salah satu database yang sering digunakan. MySQL
diciptakan oleh perusahaan MySQL AB di Swedia. Nama-nama yang berjasa
dalam menciptakan MySQL adalah David Axmark, Allan Larsson, dan Michael
“Monty” Widenius. Database ini tersebar luas secara gratis karena memiliki lisensi
GNU General Public License. Selain itu juga, MySQL dapat tersinkronisasi
dengan beberapa bahasa pemrograman seperti PHP, Java, C++, C#, Python, dan
Ruby [7].

3. Metode dan Perancangan Sistem

Penelitian ini dilakukan dan diselesaikan melalui 5 tahapan penelitian yaitu :
1) Analisis kebutuhan dan pengumpulan data. 2) Perancangan sistem. 3)
Perancangan aplikasi / program. 4) Implementasi dan pengujian sistem serta
analisis hasil pengujian. 5) Penulisan laporan hasil penelitian [11]. Tahapan-
tahapan yang dilakukan dalam penelitian ini dapat dilihat pada Gambar 1.

Gambar 1. Tahapan Penelitian

Berdasarkan Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang
dilakukan adalah sebagai berikut : Tahap pertama yaitu analisis dan pengumpulan

4
data dimana peneliti melakukan wawancara dengan Pak Hari sebagai programmer
web di MIS PT. Pura Barutama tentang aplikasi yang akan dibuat. Berdasarkan
hasil wawancara dengan Pak Hari bahwa MIS sedang mendapatkan order dari unit
Pura Bangunan untuk membuat aplikasi manajemen proyek berbasis web. Unit
Pura Bangunan melakukan order karena proses manajemen proyek masih
dilakukan dengan unit harus melakukan request pembuatan memo ke unit Pura
Bangunan kemudian mengambil berkas memo tersebut di unit Pura Bangunan lalu
ditandatangani oleh bagian umum, cost control, dan pimpinan unit dan
dikumpulkan ke unit Pura Bangunan untuk diproses ke tahap selanjutnya. Selain
itu, dalam monitoring proses pengerjaan masih terbatas. Hal tersebut tidak efektif
dan efisien karena proses request memo membutuhkan waktu sekitar 1-2 hari,
memo yang telah dikumpulkan ke Pura Bangunan terkadang hilang, dan
monitoring proyek tidak optimal. Tahap kedua, ketiga, dan keempat dilakukan
perancangan sistem manajemen proyek mengunakan metode Prototype.
Sedangkan tahap kelima dilakukan penulisan artikel ilmiah atau laporan penelitian.
Metode pengembangan sistem yang digunakan pada penelitian ini adalah
metode Prototype. Metode prototype merupakan metode pengembangan sistem
yang dilakukan secara iteratif dengan mementingkan kebutuhan client.
Pengembang saling berinteraksi dengan Pak Hari selaku programmer yang
menangani proyek dari unit Pura Bangunan untuk mendapatkan data-data
kebutuhan aplikasi yang diinginkan oleh unit Pura Bangunan. Setelah data-data
terkumpul, dilakukan pembuatan prototype sementara secara cepat. Kemudian
prototype akan terus dikembangkan hingga sesuai dengan kebutuhan unit Pura
Bangunan. Tahap-tahap yang dilakukan pada metode prototype ditunjukkan pada
Gambar 2.

Gambar 2 Metode Prototype [12]

Tahap pengumpulan data dilakukan agar mengetahui permasalahan dan

kebutuhan sistem. Berdasarkan wawancara dengan Pak Hari didapatkan informasi
tentang aplikasi yang diinginkan oleh unit Pura Bangunan yaitu aplikasi tersebut
berbasis web agar dapat diakses secara online dari semua unit PT. Pura Barutama.
Kemudian terdapat tiga user yaitu pegawai Pura Bangunan sebagai administrator
utama, pegawai masing-masing unit sebagai admin unit, dan pimpinan unit.
Administrator utama bertugas untuk mengkonfirmasi memo dan menambahkan
proses pengerjaan proyek dari awal hingga akhir. Admin dari setiap unit bertugas

5
untuk membuat memo pembangunan gedung baru atau renovasi gedung secara
online ke unit Pura Bangunan. Sedangkan pimpinan unit bertugas memberi
konfirmasi jika pekerjaan sudah selesai.
Unit Pura Bangunan juga memberikan flowchart untuk aplikasi yang
diinginkan. Flowchart tersebut dapat dilihat pada Gambar 3.

Gambar 3 Flowchart Manajemen Proyek

Gambar 3 menunjukkan flowchart untuk aplikasi manajemen proyek.

Awalnya, unit yang akan membangun gedung atau renovasi gedung melakukan
request ke unit Pura Bangunan dengan mengisi form memo online. Memo tersebut
akan dicek oleh administrator. Jika Pura Bangunan tidak menyetujui maka akan
ditolak. Jika disetujui maka ke tahap selanjutnya yaitu membuat pra RAB (Rencana
Anggaran Biaya), rancangan gambar bangunan, dan RAB oleh administrator jika
dibutuhkan. Pra RAB, rancangan gambar bangunan, dan RAB akan dicek dan
disetujui oleh unit yang melakukan request. Setelah RAB disetujui maka unit Pura
Bangunan akan menerbitkan Surat Keputusan Kerja (SPK). Kemudian akan
dilakukan pengecekan material. Jika material tidak tersedia maka akan proses
pengerjaan ditunda hingga material tersedia. Jika material tersedia maka proses
pelaksanaan pembangunan atau renovasi dimulai. Selanjutnya pimpinan hanya
dapat memberi konfirmasi proyek unit yang telah selesai apabila proses pengerjaan
sudah selesai 100%.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang
digunakan dalam membangun aplikasi manajemen proyek yaitu : analisis
perangkat keras yang digunakan adalah processor Intel Core i5, 2.20 GHz, RAM
4 GB, dan Harddisk 500 GB. Sedangkan perangkat lunak yang digunakan adalah
sistem operasi Windows 8.1, Notepad++ sebagai text editor, Wampserver sebagai

6
web server, web browser (dalam penelitian ini digunakan Mozilla Firefox),
Rational Rose untuk pembuatan UML (Unified Modeling Language), dan
Microsoft Word 2016 untuk pembuatan flowchart.
Sebelum melakukan pengkodean aplikasi, dilakukan perancangan sistem
dalam bentuk UML. UML yang dibuat meliputi use case diagram, activity
diagram, dan class diagram. Berikut ini dijelaskan masing-masing diagram yang
telah dibuat.

Gambar 4 Use Case Diagram Aplikasi Manajemen Proyek

Gambar 4 merupakan use case dari aplikasi manajemen proyek. Aplikasi
tersebut memiliki tiga aktor yaitu administrator, admin unit, dan pimpinan unit.
Aktor admin unit memiliki hak akses untuk menambah memo baru, mengubah,
menghapus, menyimpan PDF, dan menambahkan foto dari memo yang telah
dibuat. Administrator memiliki hak akses paling tinggi sehingga administrator
bertugas untuk memberi konfirmasi memo yang telah disetujui oleh unit Pura
Bangunan. Administrator juga menambah progress pengerjaan projek yang terdiri
dari pra RAB, rancangan gambar bangunan, RAB, SPK, ketersediaan material
hingga progres pengerjaan setiap harinya. Selain itu, administrator dapat melihat
daftar memo dan daftar list pekerjaan dari semua unit. Pimpinan unit bertugas
memberi konfirmasi untuk pekerjaan yang sudah 100% selesai dikerjakan. Admin
dan pimpinan unit juga dapat melihat daftar memo dan daftar list pekerjaan dari
unit tersebut.

7
 Gambar 5 Activity Diagram Pengelolaan Memo oleh Admin Unit

Gambar 5 merupakan activity diagram yang menggambarkan proses

pengelolaan memo oleh admin unit. Hal pertama yang dilakukan adalah login ke
sistem terlebih dahulu. Jika login dengan username dan password sudah benar
maka sistem akan mengambil daftar memo unit tersebut dan ditampilkan ke
tampilan admin unit. Jika username dan password salah maka akan kembali ke
tampilan login. Setelah berhasil login, admin unit dapat menambah memo baru
untuk pembangunan gedung baru atau renovasi gedung. Admin juga dapat
mengubah, menghapus, menambah foto, dan menyimpan memo ke PDF sesuai
dengan memo yang telah dibuat sebelumnya. Sistem akan mengelola penambahan
atau perubahan memo dan menampilkan kembali daftar memo.

Gambar 6 Activity Diagram Konfirmasi Memo oleh Administrator

Gambar 6 merupakan activity diagram untuk konfirmasi memo dari unit-unit

PT. Pura Barutama oleh administrator. Hal pertama yang dilakukan adalah login
ke sistem terlebih dahulu. Jika login dengan username dan password sudah benar
maka sistem akan mengambil daftar memo semua unit dan ditampilkan ke tampilan

8
administrator. Jika username dan password salah maka akan kembali ke tampilan
login. Administrator akan memilih memo yang akan dikonfirmasi kemudian sistem
akan menyimpan memo yang telah dikonfirmasi dan menampilkan kembali daftar
memo semua unit.

Gambar 7 Activity Diagram Proses Manajemen Proyek oleh Administrator

Gambar 7 merupakan activity diagram yang menunjukkan tahap-tahap

manajemen proyek oleh administrator. Setelah berhasil login, dilakukan tahap
manajemen proyek terdiri dari Pra RAB, gambar, RAB, SPK, material, dan progres
pelaksanaan Jika memerlukan pra RAB maka sistem akan memberi form pra RAB
untuk diisi administrator. Sesudah diisi, sistem akan menyimpan dan administrator
wajib memberi persetujuan pra RAB tersebut. Setelah pra RAB disetujui atau
proyek tersebut tidak memerlukan pra RAB maka sistem akan menampilkan form
gambar untuk diisi. Sesudah diisi, sistem akan menyimpan dan administrator wajib
memberi persetujuan gambar tersebut. Setelah gambar disetujui atau tidak
memerlukan gambar, sistem akan menampilkan form RAB yang wajib diisi.
Kemudian Pura Bangunan akan menerbitkan SPK dan administrator akan mengisi
pada aplikasi tersebut. Lalu administrator akan mengisi material yang sudah
dikirim ke lokasi proyek. Administrator juga akan mengisi progres pengerjaan

9
proyek setiap harinya. Proyek dinyatakan selesai dari pihak unit Pura Bangunan
bila progres sudah 100%.

Gambar 8 Activity Diagram Konfirmasi Proyek Selesai oleh Pimpinan Unit

Gambar 8 merupakan activity diagram untuk mengkonfirmasi proyek yang

sudah selesai oleh pimpinan unit. Setelah berhasil login, sistem akan mengambil
daftar memo unit tersebut dan ditampilkan ke tampilan pimpinan unit. Pimpinan
unit dapat memberi konfirmasi untuk proyek-proyek pekerjaan yang sudah selesai
dikerjakan. Saat memberi konfirmasi, sistem akan mengecek progres proyek
terlebih dahulu. Konfirmasi akan berhasil dan status akan disimpan jika progres
pengerjaan proyek sudah 100%.

Gambar 9 Class Diagram Aplikasi Manajemen Proyek

Gambar 9 merupakan class diagram yang menunjukkan class model dan class
controller aplikasi manajemen proyek. Class model digunakan berhubungan

10
dengan database. Sedangkan class controller digunakan sebagai penghubung view
dan model. Class model terdiri dari 11 class yaitu memo, list, master_prarab,
master_gambar, master_rab, keteranganprarab, keteranganrab, keterangangambar,
keteranganspk, keteranganspk, keteranganmaterial, keterangankronologis.
Sedangkan class controller terdiri dari 2 class yaitu Prosesmemo dan Proseslist.
Class tersebut mengikuti struktur CodeIgniter yang menerapkan konsep MVC.

4. Hasil Implementasi dan Pembahasan

Pengkodean pada CodeIgniter dimulai dengan membuat base URL di
config.php yang terletak di dalam folder CodeIgniter. Kode program 1
menunjukkan base URL pada aplikasi manajemen proyek.

Kode Program 1. Base URL pada CodeIgniter

1. $http = 'http'.((isset($_SERVER['HTTPS'])&&$_SERVER['HTTPS']=='on')?'s':'')
. '://';
2. $newurl = str_replace('index.php','', $_SERVER['SCRIPT_NAME']);
3. $config['base_url']= "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Base URL merupakan link tetap untuk mengakses resources dan link lainnya
yang terdapat dalam aplikasi manajemen proyek. Base URL dalam aplikasi
tersebut menggunakan base URL bersifat dinamis yang artinya bahwa ketika link
tetap diubah maka base URL akan menyesuaikan dengan link tetap yang baru.
Setelah membuat base URL, selanjutnya menghubungkan CodeIgniter dan
Bootstrap yang ditunjukkan pada Gambar 10.

Gambar 10 Penempatan Folder Bootstrap dalam Folder CodeIgniter

Gambar 10 merupakan struktur penempatan Bootstrap dalam folder

CodeIgniter. Bootstrap berada di dalam assets dimana assets tersebut dibuat untuk
menampung file atau folder yang berasal dari luar folder CodeIgniter. Setelah
melakukan penempatan secara benar maka dilakukan pemanggilan Bootstrap
dalam pengkodean CodeIgniter yang dapat dilihat pada Kode Program 2.

Kode Program 2. Pemanggilan Bootstrap dalam CodeIgniter

1. <head>
2. …
3. <link rel="stylesheet" href="<?php echo
base_url();?>assets/bootstrap/css/ bootstrap.min.css">
4. …
5. </head>

11
 Kode Program 2 merupakan pemanggilan Boostrap di view CodeIgniter.
Agar Bootstrap tersebut dapat digunakan maka perlu mengakses base URL yang
telah dibuat sebelumnya. Kemudian assets merupakan tempat Bootstrap berada.
Lalu pemanggilan bootstrap.min.css yang berada didalam folder Bootstrap
tersebut. Selanjutnya dilakukan konfigurasi pada CodeIgniter agar dapat terhubung
dengan database yang ditunjukkan pada Kode Program 3.

Kode Program 3 Konfigurasi Koneksi Database di CodeIgniter

1. $db['default'] = array(
2. 'hostname' => 'localhost',
3. 'username' => 'root',
4. 'password' => '',
5. 'database' => 'purates1',
6. 'dbdriver' => 'mysqli',
7. 'pconnect' => FALSE,
8. 'db_debug' => (ENVIRONMENT !== 'production'),
9. 'cache_on' => FALSE,
10. 'char_set' => 'utf8',
11. 'dbcollat' => 'utf8_general_ci',
12. 'encrypt' => FALSE,
13. 'save_queries' => TRUE
14. );

Kode Program 3 merupakan konfigurasi database yang berisi hostname,

username, password, dan driver. Pada penelitian ini, database yang digunakan
adalah MySQL sehingga driver yang digunakan adalah mysqli. Sedangkan untuk
pengaturan route dapat dilihat pada Kode Program 4.

Kode Program 4 Konfigurasi Route CodeIgniter

1. $route['default_controller'] = 'proses';
2. $route['404_override'] = '';
3. $route['translate_uri_dashes'] = FALSE;

Route adalah tempat untuk mengatur default controller yang dipanggil

pertama kali ketika aplikasi dijalankan. Default controller pada aplikasi
manajemen proyek adalah controller proses. Saat aplikasi dijalankan, controller
proses akan menjalankan function index yang mengarah ke halaman login. Gambar
11 merupakan halaman login aplikasi manajemen proyek PT. Pura Barutama.

Gambar 11 Halaman Login Aplikasi Manajamen Proyek PT. Pura Barutama

12
 Aplikasi manajemen proyek PT. Pura Barutama memiliki tiga level user yaitu
administrator, admin unit, dan pimpinan unit. Ketiga user tersebut memiliki hak
akses yang berbeda. Penggunaan aplikasi tersebut dilakukan dengan user harus
login dengan mengisi username dan password secara benar. Gambar 12 merupakan
halaman daftar memo admin unit yang belum dikonfirmasi oleh administrator.

Gambar 12 Halaman Daftar Memo Admin Unit

Admin unit bertugas untuk mengelola memo. Admin unit dapat menambah
memo baru, mengubah memo, menghapus memo, menyimpan memo ke PDF, dan
menambah foto untuk melengkapi berkas memo. Selain itu, admin unit dapat
memonitoring proyek yang sedang dikerjakan. Gambar 12 merupakan halaman
untuk menambah memo baru.

Gambar 12 Halaman Tambah Memo oleh Admin Unit

Setiap pembuatan memo akan mendapatkan nomor memo dimana memo

tersebut hanya berlaku untuk satu pekerjaan saja. Jika terdapat lebih dari satu
pekerjaan maka admin unit harus membuat memo baru lagi. Proses penambahan
memo dapat dilihat pada Kode Program 5.

13
Kode Program 5 Controller untuk Menambah Memo Baru
1. class Prosesmemo extends CI_Controller{
2. public function insertmemo(){
3. $this->load->model("memo");
4. $this->load->helper("url");
5. $data = array(
6. "no_memo" => $this->input->post("nomemo"),
7. "tgl_order" => $this->input->post("tglorder"),
8. "unit_pemesanan" => $this->input->post("unit"),
9. "lokasi " => $this->input->post("lokasi"),
10. …
11. );
12. $this->memo->insertmemo($data,"t_memo");
13. redirect("Prosesmemo/daftarmemo");
14. }
15. }

Kode Program 5 merupakan fungsi insert memo pada controller Prosesmemo

untuk mengambil data input dari view dan memproses input tersebut ke model.
Baris 3 merupakan bagian untuk load model memo pada aplikasi tersebut. Masing-
masing input user disimpan sesuai dengan nama atribut pada tabel yang dituju.
Baris 6 merupakan cara mengambil input nomemo dan disimpan dengan nama
no_memo (nama atribut pada tabel t_memo). Semua input user dimasukkan dalam
array dengan nama $data. Baris 12 merupakan pemanggilan fungsi insertmemo di
model memo yang berisi array $data dan t_memo sebagai nama tabel. Setelah
melakukan proses insert memo, halaman akan redirect ke fungsi daftarmemo.
Redirect merupakan salah satu fungsi yang disediakan oleh CodeIgniter untuk
mengarahkan user dari halaman satu ke halaman lainnya. Penggunaan redirect
membutuhkan helper. Helper dapat diimplementasikan ke dalam fungsi yang dapat
dipanggil kapan saja dengan syarat harus helper harus dideklarasikan terlebih
dahulu di awal controller. Kode Program 6 merupakan fungsi insertmemo pada
model memo.

Kode Program 6 Model Insertmemo

1. class memo extends CI_Model(){
2. function insertmemo($data,$table){
3. $this->db->insert($table,$data);
4. }
5. }

Berbeda dengan PHP native, CodeIgniter telah menyediakan fungsi-fungsi

untuk CRUD (Create, Read, Update, Delete). Fungsi-fungsi tersebut yaitu untuk
create atau insert data menggunakan fungsi insert, untuk read data menggunakan
fungsi get, untuk update data menggunakan fungsi update, dan untuk delete data
menggunakan fungsi delete. Fungsi CRUD bertujuan agar CRUD yang dilakukan
menjadi singkat dan sederhana karena tidak memerlukan penulisan query yang
panjang. Kode program 6 merupakan salah satu implementasi fungsi CRUD
CodeIgniter dalam aplikasi manajemen proyek. Model insertmemo berfungsi
untuk menambahkan data memo ke dalam tabel t_memo. Baris 3 adalah
pemanggilan fungsi insert dengan parameter $table sebagai nama tabel dan $data
sebagai array yang menampung data-data input user yang disimpan dengan nama
atribut dari tabel t_memo tersebut. Setelah berhasil menambah memo baru, admin
unit dapat menyimpan memo tersebut dalam bentuk PDF.

14
 Gambar 13 Tampilan Memo dalam PDF

Gambar 13 merupakan tampilan memo dalam PDF yang dibuat dengan

library MPDF. Library MPDF merupakan library khusus untuk membuat PDF.
MPDF yang digunakan dalam aplikasi ini adalah MPDF versi 6.0. Fungsi untuk
unduh memo ke PDF ditunjukkan pada Kode Program 7.

Kode Program 7 Fungsi Unduh Memo ke PDF

1. public function cetakmemo(){

2. $this->load->model("memo");
3. $this->load->library('m_pdf');
4. …
5. $data["memo"] = $this->memo->getdetailmemo($id);
6. $sumber = $this->load->view('admin_unit/cetakmemo', $data, TRUE);
7. $pdfFilePath = $no.".pdf";
8. $pdf = $this->m_pdf->load();
9. $pdf->AddPage('P');
10. $pdf->WriteHTML($sumber);
11. $pdf->Output($pdfFilePath, "D");
12. exit();
13. }

Kode program 7 merupakan fungsi untuk mengunduh memo dalam bentuk

PDF. Pengunaan library MPDF dimulai dengan pemanggilan library m_pdf. Baris
6 merupakan pemanggilan view yang berisi tampilan PDF yang dibuat
menggunakan HTML dan CSS. Baris 11 merupakan pemanggilan fungsi untuk
mengunduh memo ke PDF dengan nama PDF yaitu nomor memo.
Administrator bertugas untuk mengkonfirmasi memo dari unit-unit PT. Pura
Barutama dan memanajemen proyek-proyek yang sedang dikerjakan. Dalam
memanajemen proyek, administrator harus mengisi progres pengerjaan dari pra
RAB, rancangan gambar, RAB, SPK, ketersediaan material, pelaksanaan, dan
kronologis setiap harinya. Proses konfirmasi memo dapat dilihat pada Gambar14.

Gambar 14 Konfirmasi Memo oleh Administrator

15
 Gambar 14 merupakan form konfirmasi memo dengan memilih status memo
“Konfirmasi” dan mengisi tanggal perkiraan proyek selesai dikerjakan. Kode
Program konfirmasi memo dapat dilihat pada Kode Program 8.

Kode Program 8 Fungsi untuk Konfirmasi Memo

1. public function konfirmasimemo(){

2. $this->load->model("memo");
3. $this->load->model("list");
4. $data = array(
5. "status" => $this->input->post("status"),
6. "tgl_selesai" => $this->input->post("tglselesai")
7. );
8. $where = array("no_memo" => $this->input->post("nomemo"));
9. $this->memo->konfirmasimemo($where,$data,"t_memo");
10. $list = array("no_memo" => $this->input->post("nomemo"));
11. $this->memo->insertlist($list,"master_list");
12. }

Fungsi konfirmasimemo memiliki dua model yaitu model memo dan model
list. Baris 9 merupakan konfirmasi memo dengan mengakses fungsi
konfirmasimemo yang berparameter $where, $data, dan t_memo di model memo.
Sedangkan baris 11 merupakan penambahan pekerjaan baru dengan mengakses
fungsi insertlist di model list. Kode Program 9 menunjukkan fungsi
konfirmasimemo di model memo.

Kode Program 9 Fungsi Konfirmasi Memo pada Model Memo

1. function konfirmasimemo($where,$data,$table){
2. $this->db->where($where);
3. $this->db->update($table,$data);
4. }

Kode program 9 merupakan proses konfirmasi memo menggunakan salah

satu fungsi CRUD CodeIgniter yaitu update. Penggunaan fungsi update tersebut
bertujuan agar penulisan query update yang panjang seperti pada umumnya.
Setelah melakukan konfirmasi, administrator dapat memulai menambahkan
progres proyek sesuai dengan tahap pengerjaan yang sedang dilakukan. Daftar list
pekerjaan ditunjukkan pada Gambar 15.

Gambar 15 Halaman Daftar List Pekerjaan

16
 Gambar 15 merupakan halaman daftar list pekerjaan administrator.
Administrator wajib untuk menambah progres dari pra RAB, gambar, RAB, SPK,
material, pelaksanaan, dan kronologis keseluruhan pekerjaan setiap harinya hingga
proyek 100% telah selesai. Unit Pura Bangunan memiliki persyaratan warna sesuai
dengan ketentuan yang berlaku pada unit Pura Bangunan dalam melakukan
manajemen proyek. Ketentuan pewarnaan untuk pra RAB, gambar, RAB, dan
pelaksanaan yaitu hijau tua artinya lebih awal (<= 7 hari), hijau muda artinya lebih
awal (antara 1-6 hari), kuning artinya tepat waktu, oranye artinya telat (antara 1 -6
hari), dan merah artinya telat (>= 7 hari). Sedangkan pewarnaan untuk material dan
progres keseluruhan pengerjaan yaitu merah artinya progres antara 0-20%, oranye
artinya progres antara 21-40%, kuning artinya progres antara 41-60%, hijau muda
artinya progres antara 61-80%, dan hijau tua artinya progres antara 81-100%.
Apabila progres keseluruhan selesai 100% maka pimpinan unit dapat memberi
konfirmasi bahwa pekerjaan telah selesai agar dinyatakan selesai secara sah.
Setiap halaman memo dan list pekerjaan baik administrator, admin unit
maupun pimpiman unit diberi pagination. Salah satu tampilan pagination dapat
dilihat pada Gambar 15 (kotak berwarna merah). Untuk membuat pagination,
CodeIgniter telah menyediakan library pagination yang siap digunakan dengan
pengaturan sederhana. Pagination dalam aplikasi manajemen proyek berfungsi
untuk menampilkan daftar memo atau list pekerjaan yang banyak ke dalam
beberapa halaman. Kode Program 10 merupakan pagination Codeigniter secara
umum yang diperindah dengan Bootstrap.

Kode Program 10 Pagination CodeIgniter dengan Tampilan Bootstrap

1. $this->load->library('pagination');
2. $config['base_url'] = base_url().'index.php/namacontroller/namaview';
3. $config['total_rows']= $this->namamodel->fungsihitungtotaldata();
4. $config['per_page'] = 5;
5. $config['full_tag_open'] = '<ul class="pagination">';
6. $config['full_tag_close'] = '</ul>';
7. $config['prev_tag_open'] = '<li>';
8. $config['prev_tag_close'] = '</li>';
9. $config['next_tag_open'] = '<li>';
10. $config['next_tag_close'] = '</li>';
11. $config['cur_tag_open'] = '<li class="active"><a href="#">';
12. $config['cur_tag_close'] = '</a></li>';
13. $config['num_tag_open'] = '<li>';
14. $config['num_tag_close'] = '</li>';
15. $this->pagination->initialize($config);

Baris 1 merupakan pemanggilan pemanggilan library pagination agar dapat

digunakan dalam aplikasi. Pembagian pagination disesuaikan dengan kebutuhan
dan banyaknya informasi yang akan ditampilkan. Pagination CodeIgniter dapat
digabungkan dengan Bootstrap dengan tujuan untuk memperindah tampilan
pagination. Hal tersebut dilakukan pemanggilan class pagination yang telah
disediakan Bootstrap. Baris 11 terdapat class=”active” yang bertujuan untuk
memberi tanda nomor halaman yang sedang aktif. Sedangkan baris 15 berfungsi
untuk menyimpan konfigurasi dari array $config.
Tampilan aplikasi manajemen proyek dibangun menggunakan framework
Bootstrap agar tampilan dapat responsif sesuai dengan resolusi layar. Contoh
tampilan responsif dapat dilihat pada Gambar 16.

17
 Gambar 16 Tampilan Responsif

Gambar 16 merupakan contoh tampilan halaman daftar memo pada setengah

layar menggunakan web browser Mozilla Firefox. Penggunaan Bootstrap
bertujuan agar tampilan tetap rapi dan indah mengikuti ukuran layar. Pembuatan
tampilan responsif pada aplikasi ini secara umum dapat dilihat pada Kode Program
11.

Kode Program 11 Pembuatan Tampilan Responsif dengan Bootstrap

1. <div class="container">
2. <div class="row">
3. <div class="col-md-12">
4. …
5. </div>
6. <div class="col-lg-3 col-sm-6">
7. …
8. </div>
9. </div>
10. </div>

Bootstrap memiliki sistem grid yang membagi layar menjadi 12 kolom.

Sistem grid pada Bootstrap dibagi menjadi 4 yaitu large (col-lg-*) digunakan untuk
mengatur grid pada monitor komputer berukuran besar, medium (col-md-*)
digunakan untuk mengatur grid pada monitor komputer berukuran sedang, small
(col-sm-*) digunakan untuk mengatur grid pada monitor komputer berukuran
tablet, dan extra small (col-xs-*) digunakan untuk mengatur grid pada monitor
komputer berukuran handphone. Kode Program 11 merupakan salah satu script
Bootstrap untuk membuat tampilan responsif. Baris 3 berfungsi untuk membuat
satu layar penuh. Sedangkan baris 6 terdapat class col-lg-3 dan col-sm-6. Col-lg-3
digunakan membagi satu layar penuh menjadi 4 bagian. Col-sm-6 digunakan untuk
membagi satu layar penuh menjadi 2 bagian.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi
yang telah dibuat untuk mencari kesalahan pada aplikasi tersebut. Pengujian
dilakukan untuk mengetahui apakah aplikasi yang dibuat sudah berjalan dengan
baik dan sesuai dengan kebutuhn user. Pengujian aplikasi ini menggunakan dua
teknik pengujian yaitu pengujian alpha dan pengujuan beta.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-

18
fungsi aplikasi secara langsung tanpa memperhatikan alur eksekusi program.
Pengujian ini dilakukan dengan memperhatikan apakah fungsi telah berjalan sesuai
rancangan dan yang diharapkan. Tabel 1 adalah hasil pengujian dari aplikasi yang
telah dilakukan.

Tabel 1 Hasil Pengujian Blackbox

Fungsi yang diuji Kondisi Output yang Output yang Status
diharapkan dihasilkan sistem Pengujian
Login Username dan password Sukses login Sukses login Valid
benar
Username dan password Gagal login Gagal login
salah maupun kosong
Menampilkan daftar Membuka halaman daftar Sukses tampilkan data Sukses tampilkan Valid
memo setiap unit memo setiap unit data
Menambah memo Mengisi form memo Sukses tambah data Sukses tambah Valid
baru memo memo
Mengubah data memo Form diisi dengan benar Sukses ubah data Sukses ubah data Valid
memo memo
Menghapus data Memilih salah satu memo Sukses hapus memo Sukses hapus memo Valid
memo
Mengunduh memo Memilih salah satu memo Sukses unduh PDF Sukses unduh PDF Valid
dalam bentuk PDF
Menambah foto Mengisi form foto memo Sukses tambah foto Sukses tambah foto Valid
memo Menampilkan list Sukses tampilkan data Sukses tampilkan Valid
Monitoring list pekerjaan dan progress data
pekerjaan pengerjaan
Mengkonfirmasi lewat Sukses tampilkan Sukses tampilkan Valid
Konfirmasi memo form memo memo yang sudah memo yang sudah
konfirmasi di menu konfirmasi di menu
laporan memo laporan memo
Memanajemen proyek Membuka halaman list Sukses manajemen Sukses manajemen Valid
dalam daftar list pekerjaan dan mengisi proyek proyek
pekerjaan progress pengerjaan pra
RAB, rancangan gambar,
RAB, SPK, material,
pelaksanaan, dan
kronologis
Konfirmasi pekerjaan Memilih proyek dengan Sukses konfirmasi Sukses konfirmasi Valid
selesai progress 100% selesai
Memilih proyek dengan Gagal konfirmasi Gagal konfirmasi
progress belum 100%
selesai

Berdasarkan pengujian yang dilakukan pada aplikasi dapat dilihat status

pengujian dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian beta dilakukan dengan
melakukan presentasi bersama empat programmer MIS dan dua pegawai unit PT.
Pura Barutama. Berdasarkan hasil presentasi tersebut didapatkan bahwa aplikasi
manajemen proyek PT. Pura Barutama dapat mempermudah dan mempercepat
unit-unit untuk melakukan request memo pembangunan gedung baru atau renovasi
gedung dari 1-2 hari menjadi 2-3 menit dan berkas memo akan tersimpan dengan
aman. Selain itu, administrator dapat melakukan proses manajemen secara bertahap
dan unit yang melakukan request dapat monitoring proyek yang terdiri dari pra
RAB, rancangan gambar bangunan, RAB, SPK, ketersedian material, pelaksanaan
dan kronologis pengerjaan setiap harinya secara akurat dan real time.

5. Simpulan
Berdasarkan penelitian yang telah dilakukan maka dapat disimpulkan bahwa
aplikasi manajemen proyek dapat dibuat menggunakan framework CodeIgniter dan

19
Bootstrap. Pengunaan CodeIgniter dengan konsep MVC bermanfaat untuk
penulisan kode program lebih terstruktur dan lebih aman karena user tidak
berhubungan secara langsung dengan database. Selain itu, CodeIgniter
menyediakan fungsi CRUD dan library yang mempermudah dalam pembuatan
aplikasi tersebut. Sedangkan penggunaan Bootstrap bermanfaat untuk membuat
tampilan aplikasi menjadi responsif yang dapat menyesuaikan diberbagai resolusi
layar.
Berdasarkan hasil pengujian, aplikasi manajamen proyek dapat
mempermudah dan mempercepat unit-unit untuk melakukan request pembuatan
memo pembangunan gedung baru atau renovasi gedung dari sebelumnya 1-2 hari
menjadi 2-3 menit dan berkas memo akan tersimpan dengan aman. Selain itu,
administrator dapat melakukan proses manajemen secara bertahap dan unit yang
melakukan request dapat monitoring proyek yang terdiri dari pra RAB, rancangan
gambar bangunan, RAB, SPK, ketersedian material, pelaksanaan dan kronologis
pengerjaan setiap harinya secara akurat dan real time.

6. Pustaka
[1] http://en.puragroup.com/, diakses tanggal 10 Desember 2016.
[2] Paramita, Dewi. 2015. Rancang Bangun Sistem Informasi Kolaboratif
Berbasis Web untuk Manajemen Proyek Teknologi Informasi. Jurnal Buana
Informatika, VI:pp.195-202.
[3] Noerlina. 2008. Perencanaan Manajemen Proyek Sistem Informasi dan
Teknologi Informasi Online Bisnis. Jurnal Piranti Warta, XI:pp.440-450.
[4] Alkautsar, Avicenna Reza, & Raudah, & Welda. 2013. Sistem Informasi
Manajemen Proyek Pada PT. Anugrah Pertiwi Kontrindo Palembang.
Palembang: Jurusan Sistem Informasi STMIK-MDP.
[5] Ismainar, Hetty, Amd. Keb, SKM., MPH. 2015. Manajemen Unit Kerja.
Yogyakarta : Deepublish.
[6] Tantra, Rudy. 2012. Manajemen Proyek Sistem Informasi. Yogyakarta :
Andi.
[7] Adelheid, Andrea, & Nst, Khairil. 2012. Buku Pintar Menguasai PHP
MySQL. Jakarta : Mediakita.
[8] Wardana. 2010. Menjadi Master PHP dengan Framework CodeIgniter.
Jakarta : Elex Media Komputindo.
[9] Sofwan, Akhmad. 2010. Belajar PHP dengan Framework CodeIgniter. Ilmu
Komputer, http://ilmukomputer.org/2010/05/02/belajar-php-dengan-
framework-code-igniter/. Diakses tanggal 28 November 2016.
[10] Hasin, Muhammad Khoirul. 2015. Seri-1 Bootstrap: Persiapkan Dirimu!!!.
http://ilmukomputer.org/2015/04/22/seri-1-bootstrap-persiapkan-dirimu/.
Diakses tanggal 28 November 2016.
[11] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu
Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta
: Ilmu Komputer Universitas Indonesia.
[12] Pressman, R.S. 2001. Software Engineering : A Practitioner’s Approach.
Amerika Serikat : R.S. Pressman and Associates.

20