5. BAB III.pdf laporan praktik industri

10

PENGUMPULAN DATA, PENDESAINAN (PERANCANGAN) DAN PENGGUNAAN DATABASE SISTEM APLIKASI SIMULASI TARIF

Pada Bab III ini akan dibahas mengenai kegiatan yang berkaitan dengan pengumpulan data, perancangan dan penggunaan database pada sistem aplikasi simulasi tarif ini. Langkah pertama yang dilakukan adalah mengumpulkan data-data yang digunakan untuk membangun sistem aplikasi ini. Kemudian merancang desain sistem aplikasi yang dibuat serta implementasi kode program dan databasenya. Berikut penjelasan detail dari masing-masing tahapan yang akan dibahas pada Bab III ini.

3.1. Bahan Penyusun Sistem Aplikasi Simulasi Tarif

Sebelum membuat aplikasi simulasi tarif, ada beberapa data yang harus dikumpulkan (dimiliki) terlebih dahulu. Data-data tersebut hanya dimiliki oleh perusahaan, sehingga perlu adanya komunikasi dengan pihak perusahaan agar memperoleh data-data yang berkaitan dengan pembuatan aplikasi simulasi tarif ini. Bahan penyusun sistem aplikasi simulasi tarif terdiri dari master tarif, barang dan pelanggan serta catatan perhitungan nota tarif.

3.1.1.Master Tarif, Barang, Pelanggan (Tabel)

Salah satu bahan penyusun sistem aplikasi tarif ini adalah data berupa tabel dari tarif, barang dan pelanggan yang dimiliki oleh perusahaan. Masing-masing tabel memiliki komponen

tersendiri yang berbeda, namun ada keterkaitan antar satu sama lain. Untuk dapat menerapkan fungsi simulasi tarif yang dapat dijalankan pada aplikasi, perlu adanya data- data tersebut agar aplikasi dapat berjalan sesuai dengan fungsinya. Berikut adalah tabel dari masing- masing master yang dmiliki perusahan:

a) Master tarif

Dalam tabel master tarif terdapat data-data yang merecord ID_CONT,

JENIS_BIAYA, TARIF, VAL, START_PERIOD dan END_PERIOD seperti yang dapat dilihat pada Gambar 4.

ID_CONT Jenis_Biay a

Tarif VA L

O L

START_P END_P PMB_S PBM_N_ S CONFD45O LOLO

252.00

0 IDR I

03/15/201 4 00:00:00

03/15/201 6 00:00:00

112.50

0 81.000 CONFFLT4

O LOLO

252.00

0 IDR I

03/15/201 3 00:00:00

03/15/201 6 00:00:00

112.50

0 81.000

Gambar 4. Tabel Master Tarif

b) Master barang

Dalam tabel master tarif terdapat data-data yang merecord ID_CONT, UKURAN, TYPE, STATUS dan HEIGHT_CONT seperti yang dapat dilihat pada Gambar 5.

Gambar 5. Tabel Master Barang

c) Master pelanggan

Dalam tabel master tarif terdapat data-data yang merecord KODE_CABANG, NAMA_CABANG, KD_PELANGGAN, NAMA_PERUSAHAAN dan KELOMPOK seperti yang dapat dilihat pada Gambar 6

ID_CONT UKURAN TYPE STATUS CONFD2O 20 DRY FCL CONMD2O 20 DRY MTY CONFR2O 20 RFR FCL CONMR2O 20 RFR MTY CONFH2O 20 HQ FCL

CONMH2O 20 HQ MTY

CONMD4O 40 DRY MTY CONFD4O 40 DRY FCL

Kode_ Cabang Nama_ Cabang KD_ Pelanggan Nama_ Perusahaan Kelompok_ pelanggan

Alamat_ Perusahan NO_ NPWP

TPK

Tanjung

Priok 151960

SARANA ULTRA LAYANAN

KARGO PT. 4

JL. ENGGANO NO. 94 D LT. 2TANJUNG PRIOK

TPK

Tanjung

Priok 150950

WAHANA PERKASA

UTAMA 4

JL.YOS SUDARSO NO.45-47 TANJUNG PRIOK

JAKARTA Gambar 6. Tabel Master Pelanggan

Untuk pemodelan data dari tabel-tabel yang digunakan pada sistem aplikasi ini digambarkan dengan ER-Diagram yang dapat dilihat pada Gambar 7.

Dibuat Detail_harga Dipesan Dibeli Nota Users Master_pelanggan Master_barang Master_tarif Id_username username password nama_lengkap nipp Id_group Id_con Jenis_biaya tarif val oi No_npwp Id_con Kd_pelanggan Id_username Id_nota Kd_cabang Nama_cabang Kelompok_pelang_gan Alamat_pelanggan

Kd_pelanggan vessel Date_start Date_end kegiatan emkl hz Jumlah_con Id_con ukuran type status Height_cont Start_period End_period Pbm_seleksi Pbm_non_seleksi

Kemudian untuk phyiscal data model dari tabel-tabel sistem aplikasi ini dapat dilihat pada Gambar 8.

Gambar 8. Physical Data Model 3.1.2. Catatan Perhitungan Nota Tarif

Simulasi tarif yang akan dibuat ini tentunya mempunyai rumusan perhitungan

berdasarkan peraturan undang-undang perusahaan. Terdapat delapan (8) tabel rumus perhitungan nota tarif yang diberikan perusahaan untuk dapat membuat aplikasi simulasi nota tarif ini. Tabel (1) untuk perhitungan container FCL(eksport);Tabel (2) untuk perhitungan container

MTY(eksport);Tabel (3) untuk perhitungan container FCL (import);Tabel (4) untuk perhitungan container MTY (import); Tabel (5) untuk perhitungan container NHI; Table (6) untuk

perhitungan container yang tidak dapat dikeluarkan; Tabel (7) untuk perhitungan nota receiving-delivery; Tabel (8) untuk perhitungan nota TL-CY (jenis kegiatan container). Berikut perumusan perhitungan berdasarkan peraturan undang-undang perusahan:

1) Container FCL (EKSPORT)

Berikut adalah tabel perhitungan jika kondisi container berstatus FCL (full) dan akan dikirim ke luar Indonesia (eksport):

Tabel 1 Container FCL (EKSPORT)

 Penumpukan masa 1.1 hari ke 1 s/d 3 dihitung 1 hari * 100% * tarif dasar

 Penumpukan masa 1.2 hari ke 4 s.d 5 dihitung per hari * 200% * tarif dasar

 Penumpukan masa 2 hari ke 6 dst dihitung per hari * 300% * tarif dasar master_barang ID_CONT TARIF UKURAN2 TYPE2 STATUS2 HEIGHT_CONT ... varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) <pk> <fk2> master_pelanggan KODE_CABANG NAMA_CABANG KD_PELANGGAN NAMA_PERUSAHAAN KELOMPOK_PELANGGAN ALAMAT_PERUSAHAAN NO_NPWP ... varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) <pk> master_tarif JENIS_BIAYA TARIF ID_CONT VAL OI START_PERIOD END_PERIOD PBM_SELEKSI PBM_NON_SELEKSI ... varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) varchar(9) <pk> <fk> users ID_USERNAME USERNAME PASSWORD NAMA_LENGKAP NIPP ID_GROUP ... varchar(9) varchar(1024) varchar(1024) varchar(1024) varchar(9) varchar(1024) <pk> nota_bil_rec USERNAME NAMA_PERUSAHAAN id_nota vesel date_start date_end kegiatan emkl jumlahcon hz varchar(1024) varchar(9) varchar(20) varchar(20) varchar(20) varchar(20) varchar(9) varchar(9) varchar(9) varchar(9) <fk1> <fk2>

2) Container MTY (EKSPORT)

Berikut adalah tabel perhitungan jika kondisi container berstatus MTY (empty) dan akan dikirim ke luar Indonesia (eksport):

Tabel 2 Container MTY (EKSPORT)

 Penumpukan masa 1.1 hari ke 1 s/d 2free

 Penumpukan masa 1.2 hari ke 3 dihitung per hari * 200% * tarif dasar

 Penumpukan masa 2 hari ke 4 dst dihitung per hari * 400% * tarif dasar

 Berbahaya 200% * tarif dasar

3) Container FCL (IMPORT)

Berikut adalah tabel perhitungan jika kondisi container berstatus FCL (full) dan akan dikirim dari luar Indonesia ke dalam wilayah Indonesia (import):

Tabel 3 Container FCL (IMPORT)

 Penumpukan masa 1.1 hari ke 1 s/d 3free

 Penumpukan masa 1.2 hari ke 4 s/d 10 dihitung per hari * 500% * tarif dasar

 Penumpukan masa 2 hari ke 11 dst dihitung per hari * 750% * tarif dasar

4) Container MTY (IMPORT)

Berikut adalah tabel perhitungan jika kondisi container berstatus MTY (empty) dan akan dikirim dari luar Indonesia ke dalam wilayah Indonesia (import):

Tabel 4 Container MTY (IMPORT)

 Penumpukan masa 1.1 hari ke 1 s/d 3 free

 Penumpukan masa 1.2 hari ke 4 s/d 10 dihitung per hari * 200% * tarif dasar

 Penumpukan masa 2 hari ke 11 dst dihitung per hari * 300% * tarif dasar

5) Tabel Perhitungan nota petikemas yang mendapat nota hasil intelegen (NHI)

Berikut adalah tabel perhitungan jika kondisi container mendapatkan nota hasil intelegen (NHI):

Tabel 5 Perhitungan nota petikemas yang mendapat nota hasil intelegen (NHI)

 Penumpukan masa 1.1 hari ke 1 s/d 3 free

 Penumpukan masa 1.2 hari ke 4 s/d 10 dihitung per hari * 200% * tarif dasar

6) Perhitungan nota petikemas yang tidak dapat dikeluarkan

Berikut adalah tabel perhitungan jika kondisi container tidak dapat dikeluarkan: Tabel 6 Perhitungan nota petikemas yang tidak dapat dikeluarkan

 Penumpukan masa 1.1 hari ke 1 s/d 3 free

 Penumpukan masa 1.2 hari ke 4 s/d 10 dihitung per hari * 200% * tarif dasar

 Penumpukan masa 2 hari ke 11 dst dihitung per hari * 300% * tarif dasar

7) Perhitungan Nota Receiving – Delivery

Berikut adalah tabel perbedaan perhitungan nota receiving dan nota delivery. Tata urutan dari perhitungan yang harus dilakukan agar mendapatkan hasil nota yang akan dibayar oleh pengguna (user):

Tabel 7 Perhitungan Nota Receiving - Delivery

No Receiving Delivery

1. Penumpukan Masa Penumpukan Masa

2. Lift Off Lift On

3. Adm Adm

Total + ppn (10 %) Total + ppn (10 %) *tanggal perhitungan: *tanggal perhitungan:

Tanggal mulai (date req) : tanggal request Tanggal mulai (date disch) : tanggal discharge (bongkar)

Tanggal selesai (clossing date) : ETD ( estimated time departure)

Tanggal selesai (date dev) : tanggal delivery

8) Perhitunagn Nota TL-CY

Berikut adalah perhitungan nota tarif berdasarkan jenis kegiatan yang dilakukan oleh container baik eksport maupun import serta berstatus FCL maupun MTY:

Tabel 8 Perhitungan Nota TL – CY

No TL CY

1. - Penumpukan Masa

2. - Lift On/ Off

3. Adm Adm

Total + ppn (10 %) Total + ppn (10 %)

3.2.Perancangan Desain Sistem Aplikasi Simulasi Tarif

Setelah mengumpulkan data-data yang dibutuhkan dalam membangun sistem aplikasi ini, maka langkah selanjutnya adalah merancang desain sistem yang akan dibuat. Untuk merancang desain website, terdapat software yang biasa digunakan programmer untuk merancang

bagaimana tampilan dari aplikasi yang akan dibangun. Software Balsamiq Mockup adalah salah satu software yang dapat digunakan untuk merancang desain aplikasi dengan dilengkapi fitur-fitur yang mudah diakses pengguna.

3.2.1.Membuat Desain Mockup Website

Sebelum membuat aplikasi website, maka perlu merancang sebuah desain untuk mempermudah pengerjaan aplikasi. Aplikasi software yang dapat digunakan dan biasa digunakan programmer untuk mendesain dashboard sebuah website adalah Balsamiq Mockup. Berikut adalah hasil dari rancangan desain yang dapat dibuat dalam software Balsamiq.

a) Form Login

Untuk membuat form login, desain yang dibuat menggunakan beberapa icon dari balsamiq, kemudian menyisipkan logo perusahaan sebagai penanda bahwa aplikasi ini dimiliki oleh perusahaan yang bersangkutan. Fitur pendukung lainnya seperti textbox, button dan lain sebagainya juga tersedia dalam software ini. Hasil desain untuk form login dapat dilihat pada Gambar 9.

Gambar 9. Form Login b) Home

Desain yang digunakan untuk menu halaman home adalah menggunakan menu bar yang digunakan untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home dengan halaman lain sesuai dengan text yang dituliskan pada link tersebut. Hasil desain untuk form homepage dapat dilihat pada Gambar 10.

Gambar 10. Homepage c) iTOS& NBs

Desain yang digunakan untuk menu iTos dan NBs, menggunakan menu bar yang digunakan untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home iTos dan NBs dengan halaman lain sesuai dengan text yang dituliskan pada link tersebut. Hasil desain untuk form iTos dan NBs dapat dilihat pada Gambar 11.

Gambar 11. Menu dan Submenu iTOS & NBs

d) LiniOS

Desain yang digunakan untuk menu LiniOS menggunakan menu bar yang digunakan untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home LiniOs dengan halaman lain sesuai dengan text yang dituliskan pada link tersebut. Hasil desain untuk form LiniOS dapat dilihat pada Gambar 12.

Gambar 12. Menu dan Submenu LiniOS

e) Halaman awal Menu Simulasi Tarif dan Billing

Desain yang digunakan untuk menu halaman awal dari simulas tarif dan billing adalah menampilkan tabel grid dari data-data yang berhasil disimpan kemudian terdapat icon add (+), edit, dan cetak. Hasil desain untuk form homepage menu simulasi tarif dan Billing dapat dilihat pada Gambar 13.

Gambar 13. Hompage Menu Simulasi Tarif dan Billing

f) Form Submenu Delivery SP2/Perpanjangan& Receiving

Desain yang digunakan untuk submenu halaman Delivery dan Receiving adalah menampilkan form pengisian data yang nantinya akan disimpan kedalam database. Terdapat beberapa form textbox yang harus diisi, kemudian datepicker untuk memilih tanggal yang diinginkan, combobox untuk memilih salah satu dari option yang disediakan dan button untuk aksi selanjutnya jika selesai mengisi setiap form. Hasil desain untuk form delivery& receiving dapat dilihat pada Gambar 14.

Gambar 14. Page Form Delivery, Receiving

g) Desain Nota

Untuk desain nota yang akan ditampilkan mengikuti format cetak nota yang didapatkan dari perusahaan, yang nantinya setiap bagian yang ditampilkan akan dikoneksikan dengan database menggunakan source code. Hasil desain untuk tampilan nota dapat dilihat pada Gambar 15.

Gambar 15. Tampilan Cetak Nota Tarif

3.2.2.Penerapan Template dengan Framework CodeIgniter

Untuk dapat menerapkan desain yang telah dirancang sebeluknya pada software balsamiq, maka perlu menuliskan source code sesuai dengan konsep framework yang digunakan dalam

membangun aplikasi ini. Bagian-bagian yang memiliki konsep desain berbeda adalah login, homepage, menu billing dan menu simulas tarif.

3.2.2.1. Tampilan Login.

Tampilan halaman Login yang muncul pada saat website ini dijalankan, dituliskan dan dideklarasikan pada file v_nota.php. Di dalam file php ini, terdapat pendeklarasian penerapan template dari bootstrap, termasuk style css yang digunakan untuk mendeklarasikan setting tampilan dari halam login yang dibuat. Untuk implementasi kode program yang digunakan dapat dilihat pada Code 1.

Kemudian kode program untuk menampilkan wallpaper halaman Login dapat dilihat pada Code 2.

Di dalam file v_nota.php ini terdapat pemanggilan file lainnya yaitu login_validation dimana befungsi ketika user mengentrikan username dan password agar dapat masuk pada homepage website, seperti pada Code 3.

Login_validation.php digunakan sebagai wadah penyimpanan jika memanggil database user (pass+username), ketika inputan yang dientrikan user sesuai dengan data yang ada pada

database, maka akan dialihkan ke homepage dari website ini, jika tidak maka akan dilakukan pengulangan (refresh) pada halaman login ini.

Kemudian untuk dapat menampilkan form inputan (textbox) username dan password dapat menggunakan kode program seperti pada Code 4.

CODE 1:

<link href="<?= base_url()?>assets/tampilan_login/bootstrap.css" rel="stylesheet">

<link href="<?= base_url()?>assets/tampilan_login/stylesheet.css" rel="stylesheet">

<link href="<?= base_url()?>assets/tampilan_login/gambar.css" rel="stylesheet">

CODE 2:

<div class="background-image">

<div class="login-container">

<div class="login-header bordered">

<td height="40" colspan="2"><div

align="center"><strong>SELAMAT DATANG SILAHKAN LOGIN</strong></div></td>

CODE 3:

Pada Code 4, dideklarasikan bahwa terdapat perkondisian dimana jika user salah mengentrikan username atau password akan ada pemberitahuan (alert) “Username atau

Password salah” dengan font tulisan berwarna biru yang menandakan adanya validasi form

inputan.

3.2.2.2 Tampilan Homepage

Tampilan halaman utama dari website ini dideklarasikan dalam tiga file php, yaitu :

home.php, header.php dan footer.php. Dengan mengelompokkan file berdasarkan kegunaan

isi tersebut, akan dapat mempermudah dalam penglinkan sehingga lebih efisien dan tidak perlu menuliskan kembali semua souce code.

Bagian header dan footer dari halaman utama ini, akan digunakan pada semua tampilan halaman baik maupun submenu. Di dalam file header.php, terdapat pendeklarasian penggunaan

CODE 4:

<form>

<div class="login-field">

<label for="username"><p>Username</p></label>

<input type="text" name="username" id="username"

placeholder="Username">

<i class="icon-user"></i>

</div>

<div class="login-field">

<label for="password"><p>Password</p></label>

<input type="password" name="password" id="password"

placeholder="Password">

<i class="icon-lock"></i>

</div>

<div class="login-button clearfix">

<button type="submit" class="pull-right btn btn-large

blue">LOGIN</button>

<?php

if($this->input->get('gagal')==1){ ?>

<span>

<FONT COLOR="blue" FACE="Impact">Username atau Password

salah</FONT>

</span>

<?php

} ?>

<?php echo form_close(); ?>

</div>

</div>

layout dasar, penggunaan icon action dari bootstrap, kemudian javascript untuk penggunaan source code ajax dan penggunaan nivo slider. Kemudian terdapat penerapan grid yang dideklarasikan pada file layout.css yang nantinya div col akan digunakan sesuai dengan

kebutuhan (sesuai size yang di deklarasikan apda file layout.css). pada file header juga

terdapat pendeklarasian penerapan menu navbar dropdown. Untuk dapat menerapkan template pada halaman home dapat menggunakan kode program seperti pada Code 5.

Kemudian dalam file footer.php, terdapat pendeklarasian tentang penulisan alamat atau

profil dari perusahaan, untuk implementasi kode programnya dapat dilihat pada Code 6.

Kemudian dalam file home.php yang digunakan untuk menampilkan halaman utama dari

website hanya terdapat pendeklarasian dari gambar yang akan ditampilkan pada nivo slider. Juga terdapat pendeklarasian link direct (base url) dari header dan footer, sehingga pada halaman utama nantinya tidak hanya gambar yang akan muncul tetapi setting dari header.php, dari menu

dropdown, grid-grid col dan profil perusahaan pada bagian footer.

3.2.2.3. Tampilan Menu Billing

Pada menu billing terdapat dua menu pilihan yaitu menu delivery dan receiving. Untuk isi dari kedua menu ini sama sama menampilkan data dalam bentuk sebuah tabel dilengkapi dengan

CODE 5:

<!--layout dasar-->

<link rel="stylesheet" href="<?= base_url()

?>assets/layout/styles/layout.css" type="text/css" /> <!-- Bootstrap [untuk icon action]-->

<link rel="stylesheet" href="<?= base_url()

?>assets/css/bootstrap.css" type="text/css" /> <!-- Javascript [for ajax dll]-->

<script type="text/javascript" src="<?= base_url()

?>assets/js/jquery-1.7.1.min.js"></script>

CODE 6:

<div class="wrapper col5">

<div id="footer">

<div class="footbox">

<h2>About Us</h2>

Nama Perusahaan : PT. Pelabuhan Tanjung Priok<br />

Alamat Perusahaan : Jalan Raya Pelabuhan no. 9 Jakarta Utara<br />

No. Telepon : +6221-4301080 (25 Saluran)<br />

E-mail : priok@inaport2.co.id<br />

Website : www.indonesiaport.co.id<br />

fungsi add, search, edit, cetak, dan delete untuk pengolahan data. Kemudian jika meng-klik icon/link untuk add data maka akan masuk ke halaman selanjutnya yaitu halaman pengisian form untuk menambahkan data pada database.

Untuk menampilkan fungsi add, search, edit, cetak, dan delete, source code yang mendeklarasikan fungsi tersebut harus dituliskan pada source code file yang menampilkan halaman tersebut terlebih dahulu serta peletakan fungsi yang sesuai dengan yang telah direncanakan.

3.2.2.4. Tampilan Menu Simulasi Tarif

Simulasi Tarif dalam aplikasi ini menyediakan beberapa menu yaitu : - iTOS (4 menu)

Dalam menu Itos terdapat 4 menu yaitu Delivery Request- Receiving Request- Delivery Billing- Receiving Billing.

Untuk menu delivery dan receiving Billing memiliki isi yang sama dengan menu billing sebelumnya, hanya saja untuk menu simulasi tarif itos, menu ini kembali disediakan untuk tujuan pengklasifikasian fungsi dari aplikasi simulasi tarif ini. Untuk menu delivery dan receiving request memiliki fungsi yang sama, namun isi database yang berbeda. Dalam menu ini juga disediakan form pengisian untuk mengentrikan data baru maupun update data. Terdapat tabel database yang ditampilkan pada halaman utama jika meng-klik menu ini.

- NBS (2 menu)

Dalam menu NBS sama seperti menu itos terdapat 4 menu yaitu Delivery Request- Receiving Request- Delivery Billing- Receiving Billing. Untuk menu delivery dan receiving Billing memiliki isi yang sama dengan menu billing sebelumnya, hanya saja untuk menu simulasi tarif itos, menu ini kembali disediakan untuk tujuan pengklasifikasian fungsi dari aplikasi simulasi tarif ini. Untuk menu delivery dan receiving request memiliki fungsi yang sama, namun isi database yang berbeda. Dalam menu ini juga disediakan form pengisian untuk mengentrikan data baru maupun update data. Terdapat tabel database yang ditampilkan pada halaman utama jika meng-klik menu ini.

Sedangkan menu LiniOS hanya menyediakan menu delivery request dan delivery billing. Sama seperti menu lainnya, menyediakan form pengisian untuk mengentrikan data baru dan update data serta tabel database yang ada.

3.2.3.Pengisian Isi Konten dengan Framework CodeIgniter.

Setelah melakukan instalasi dan koneksi CodeIgniter, maka penerapan source code

CodeIgniter dalam membangun template ( desain layout ) dapat dilakukan dan diterapkan sesuai dengan konsep yang ada pada CodeIgniter. Untuk mengisi konten dan fungsi sehingga website dapat berfungsi sebagai mestinya sesuai dengan tujuan dari pembuatan website ini maka hal-hal yang perlu disajikan pada aplikasi ini meliputi animasi, menu dropdown, icon, dan form inputan data.

3.2.3.1. Animasi

Pada homepage, untuk dapat menampilkan gambar slide dan teks berjalan, maka dapat menggunakan kode program seperti pada Code 7

A) Gambar Slide ( Nivo Slider)

Code 7 digunakan sebagai pendeklarasian link dasar dari nivo agar nantinya gambar gambar yang sudah dipilih dapat ditampilkan pada halaman tersebut. Code 7 akan memanggil file css dari nivo tersebut yang didalamnya telah dideklarasikan pengaturan dari penggunaan nivo pada aplikasi ini. Memanggil function (fungsi- fungsi) dari nivo sehingga nivo dapat diload pada halaman yang digunakan. Kode program pendeklarasian file gambar yang akan digunakan dideklarasikan pada file header.php seperti pada Code 8.

CODE 7:

<!-- Nivo Slider -->

<linkrel="stylesheet"href="<?= base_url() ?>assets/css/nivo/nivo-slider.css"type="text/css"/>

<linkrel="stylesheet"href="<?=

base_url()?>assets/css/nivo/themes/default/default.css"type="text/css"/> <scripttype="text/javascript"src="<?=

base_url()?>assets/css/nivo/jquery.nivo.slider.pack.js"></script> <scripttype="text/javascript">

$(window).load(function_{(){$('#slider').nivoSlider();});} </script>

Code 8 digunakan untuk pendeklarasian pemanggilan nama file gambar yang akan ditampilkan. File- file gambar yang akan ditampilkan diletakkan dalam satu folder agar lebih mudah dalam penulisan base_url pada source code. Dalam CodeIgniter untuk dapat meload gambar dalam file folder yang dipilih, dapat dituliskan dengan menuliskan nama folder seperti pada Code 8. Jika file berada dalam folder yang berada dalam beberapa folder (folder anakan), maka nama- nama file tersebut harus dituliskan berurut dari yang paling luar (induk folder). Untuk hasil penerapan kode program nivo slider dapat dilihat pada Gambar 16.

Gambar 16. Tampilan Nivo Slider

B) Teks berjalan

Teks berjalan pada sebuah halaman websiote merupakan sebuah animasi dan multimedia yang disediakan HTML untuk membantu mempercantik tampilan website. Untuk dapat

menampilkan teks berjalan pada halaman website, dapat menggunakan fungsi “marquee”. Fungsi ini terdiri dari beberapa macam dan dapat menghasilkan teks berjalan dengan tampilan berbeda. Namun yang digunakan pada website ini adalah fungsi marquee tanpa atribut yang merupakan standar tampilan yang dihasilkan tag marquee. Tag marquee tidak hanya dapat menampilkan teks

CODE 8:

<divclass="slider-wrapper theme-default"> <divid="slider"class="nivoSlider">

<imgsrc="/login/assets/img/1.jpg"align="center";> <imgsrc="/login/assets/img/2.jpg"align="center";> <imgsrc="/login/assets/img/3.jpg"align="center";> <imgsrc="/login/assets/img/4.jpg"align="center";> <imgsrc="/login/assets/img/5.jpg"align="center";> </div>

berjalan, tetapi dapat menampilkan gambar berjalan juga dengan link dan mouseover atribut. Penerapan kode program untuk dapat menampilkan teks berjalan dapat dilihat pada Code 9.

Hasil penerapan kode program yang berfungsi untuk menampilkan tulisan berjalan dari ujung kanan halaman hingga ujung kiri halaman dapat dilihat pada Gambar 17.

Gambar 17. Tampilan Teks Berjalan

3.2.3.2. Menu Dropdown

Menu yang akan disajikan dalam website dapat ditampilkan dengan menggunakan menu dropdown agar lebih rapi dan efektif, sehingga user/pengguna tidak kesulitan dalam mengakses layanan yang disediakan. Dalam Code Igniter untuk dapat membuat menu dropdown dapat menggunakan kode program seperti pada Code 10.

Code 10 merupakan pendeklarasian dari menu- menu yang akan ditampilkan pada navbar halaman website ini. Untuk dapat membuat menu dropdown menggunakan class

menudropdown yang fungsi- fungsi nya didekarasikan pada file css (layout.css) pada folder

assets — layouts — styles. Kemudian untuk dapat membuat menu dropdown cabang dapat

menggunakan class sbmenu2 sehingga nantinya akan muncul menu baru jika mousehover berada diatas menu dropdown yang dipilih. Pada file css layout.css, untuk dapat membuat menu

CODE 9:

<divclass="wrapper col2">

<h2><marquee>iTos Simulasi Tarif Port Of Tanjung Priok</marquee></h2>

CODE 10:

<ulid="topnav">

<li><ahref="">SIMULASI TARIF</a> <ulclass="menudropdown">

<li><ahref="">iTos</a> <ulclass="sbmenu2">

<li><ahref="<?= base_url()?>HomeController/Req_D/">Delivery

SP2/Perpanjangan REQUEST</a></li>

<li><ahref="<?= base_url()?>HomeController/Rs/">Receiving REQUEST</a></li>

<li><ahref="<?= base_url()?>HomeController/Dely/">Delivery

SP2/Perpanjangan BILLING </a></li>

<li><ahref="<?= base_url()?>HomeController/rec/">Receiving BILLING</a></li>

dropdown horizontal daapat dideklarasikan dengan class menudropdown li (.menudropdown li ) kemudian untuk penerapannya dapat dilakukan dengan memanggil class nya saja. Hasil

penerapan kode program untuk dapat membuat menu dropdown dapat dilihat pada Gambar 18.

Gambar 18 Tampilan Menu Dropdown

3.2.3.3. Icon Fungsi Add, Edit, Delete, Cetak (Print)

Penggunaan icon untuk penyediaan fungsi dalam menu dapat membantu dan membuat tampilan menjadi lebih menarik. Icon- icon tersebut tersedia pada halaman website seperti pada Gambar 19, ada berbagai macam icon yang dapat dipilih sesuai selera.

Gambar 19. Tampilan Halaman w3school.com/bootstrap/bootstraprefcompglyphs.asp

Dalam aplikasi website ini, untuk dapat menerapkan icon fungsi add (untuk menambah data) , edit ( update (olah) data), delete (menghapus data) dan print (cetak data) dapat

a) Icon Add

Code 11 ini mendeklarasikan pembuatan icon yang ada pada menu

aplikasi. Baris pertama digunakan untuk mendeklrasikan alamat link halaman yang dituju jika icon ini diklik. Kemudian baris kedua digunakan sebagai pendeklarasian untuk menampilkan icon , sedangkan baris ketiga adalah teks yang akan ditampilkan setelah icon add.

b) Icon Edit

Code 12 ini mendeklarasikan pembuatan icon yang ada pada menu aplikasi. Baris pertama digunakan untuk mendeklrasikan alamat link halaman yang dituju jika icon ini diklik. Alamat link yang dituju akan mengirimkan data row “id_nota” dari database kemudian akan memanggil fungsi edit data pada file crud.php. Kemudian baris kedua digunakan sebagai pendeklarasian untuk menampilkan icon .

c) Icon Print

Code 13 ini mendeklarasikan pembuatan icon yang ada pada menu aplikasi. Baris pertama digunakan untuk mendeklrasikan alamat link halaman yang dituju jika icon ini diklik. Alamat link yang dituju akan mengirimkan data row “id_nota” dari database kemudian akan memanggil fungsi hitung data pada file crud.php. Kemudian baris ketiga digunakan sebagai pendeklarasian untuk menampilkan icon .

CODE 11:

<ahref="<?= base_url()?>HomeController/add4/"> <spanclass="glyphicon glyphicon-plus"></span>

Add Billing Receiving

</a>

CODE 12:

<ahref="<?=

base_url()?>crud/edit_data/<?=$row['id_nota']?>"> <spanclass="glyphicon glyphicon-pencil"></span> </a>

CODE 13:

<ahref="<?=

base_url()?>crud/hitungdata/<?=$row['idcon']?>/<?=$row['id_n ota']?>">

d) Icon Delete

Code 14 ini mendeklarasikan pembuatan icon yang ada pada menu aplikasi. Baris pertama digunakan untuk mendeklrasikan alamat link halaman yang dituju jika icon ini diklik. Alamat link yang dituju akan mengirimkan data row “id_nota” dari database kemudian akan memanggil fungsi do_delete pada file crud.php. Maka akan secara otomatis akan menghapus satu row data dari tabel yang dipilih. Setiap row tabel diberikan icon tersendiri sehingga lebih mudah dan efisien. Kemudian baris ketiga digunakan sebagai pendeklarasian untuk

menampilkan icon

3.2.3.4. Form Inputan Data

Dalam aplikasi website ini, terdapat fasilitas untuk pengisian data baru maupun perbaharui data yang sebelumnya sudah disimpan dalam database. Berikut form- form yang disediakan agar user dapat memasukkan data- data sehingga nantinya permintaan (request) dapat diproses oleh perusahaan dengan cepat. Untuk dapat membuat form-form inputan data, kode program yang digunakan dapat dilihat pada Code 15, Code 16 dan Code 17.

a) TextBox

Code 15 berikut mendeklarasikan pembuatan form text dengan menggunakan tag label dan fungsi input dengan type=text, nama= vesel , id= vesel. Tag label akan menampilkan text “Vessel” kemudian textbox yang digunakan untuk menginputkan data sehingga dapat disimpan dalam database.

Untuk hasil penerapan kode program dari Code 15 dapat dilihat pada Gambar 20.

Gambar 20. Form Vessel (textbox)

CODE 14:

<ahref="<?=

base_url()?>crud/do_delete/<?=$row['id_nota']?>"> <spanclass="glyphicon glyphicon-trash"></span> </a>

CODE 15:

<labelstyle="font-size: 15px;"><small>Vessel </small></label>

b) ComboBox

Code 16 berikut mendeklarasikan pembuatan form combobox dengan menggunakan tag label dan fungsi select-option dengan type=text, nama= kegiatan. Tag label akan menampilkan text “Kegiatan (via)” kemudian fungsi select berfungsi untuk menampilkan form dalam bentuk combobox, isi data yang tersedia dalam combobox ditampilkan menggunakan fungsi option yang memiliki value , value dapat diisi lebih dari satu data.

Untuk hasil penerapan dari kode program Code 16 dapat dilihat pada Gambar 21.

Gambar 21. Form Kegiatan (comboBox) c) Date

Code 17 berikut mendeklarasikan pembuatan form date dengan menggunakan tag label dan fungsi input dengan type=date, nama= date_start. Tag label akan menampilkan text “Date Request” kemudian form akan ditampilkan dalam bentuk datepicker (tampilan kalender ) sehingga user hanya meng-klik tanggal yang diinginkan dan secara otomatis form akan terisi tanggal sesuai format date. Type dalam source code ini akan menetukan tipe dari form inputan data yang dihasilkan, jika text maka akan ditampilkan dalam bentuk text, jika date maka akan ditampilkan dalam bentuk format tanggal, dan lain sebagainya.

Untuk hasil penerapan kode program Code 17 dapat dilihat pada Gambar 22

CODE 16:

<labelstyle="font-size: 15px;"><small>Kegiatan (via) </small></label> <selectname="kegiatan"style="width: 170px; float:right;">

<optionvalue="">--Pilih Salah Satu--</option> <optionvalue="TL">TL</option>

CODE 17:

<labelstyle="font-size: 15px;"><small>Date Request </small></label> <inputtype="date"name="date_start"size="22"style= "float:right;"/>

Gambar 22. Form Date Picker

Untuk tata letak form sehingga rapi dan teratur dapat menggunakan float left/right

sehingga form- form dapat mudah diakses. Setelah selesai menulis source code form inputan data seperti pada Code 17, maka hasil dari halaman yang disediakan untuk inputan data baik data baru maupun data yang telah ada pada database dapat dilihat pada Gambar 23.

Gambar 23. Form Input Data

3.2.3.5. Menu Button Back, Save, Print

Setelah menampilkan rincian nota print, aplikasi website ini menyediakan tiga button yang masing- masing memiliki fungsi :

a) Back

Untuk dapat menampilkan button Back dapat menggunakan kode program seperti pada Code 18.

Code 18 berfungsi menampilkan button Back (teks Back diinisialisasikan dalam value), button akan ditampilkan jika menggunakan type dan id = submit, kemudian menggunakan

fungsi onClick sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk

button back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin mencetak nota print. Pada fungsi onClick tertulis histrory.go(-1) yang berfungsi kembali ke

CODE 18:

<inputname="submit"type="submit"id="submit"onClick="history.go(-1);return true;"value="Back"/>

halaman sebelumnya. Untuk hasil penerapan kode program Code 18 dapat dilihat pada Gambar 24.

Gambar 24. Button Back b) Save

Untuk dapat menampilkan button Save dapat menggunakan kode program seperti pada Code 19.

Code 19 berfungsi menampilkan button Save (teks save diinisialisasikan dalam value), button akan ditampilkan jika menggunakan type dan id = submit, kemudian menggunakan fungsi onClick sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk button

back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin mencetak nota print. Pada fungsi onClick tertulis location.href dan link dari halaman yang akan

dituju yang berfungsi kembali ke halaman selanjutnya. Untuk hasil penerapan kode program Code 19 dapat dilihat pada Gambar 25.

Gambar 25. Button Save c) Print

Untuk dapat menampilkan button Print dapat menggunakan kode program seperti pada Code 20.

Code 20 berfungsi menampilkan button Print (teks print diinisialisasikan dalam value), button akan ditampilkan jika menggunakan type dan id = submit, kemudian menggunakan

fungsi onClick sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk

button back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin mencetak nota print. Pada fungsi onClick tertulis location.href dan link dari halaman yang akan

dituju yang berfungsi kembali ke halaman selanjutnya. Untuk hasil penerapan dari kode program Code 20 dapat dilihat pada Gambar 26.

fCODE 19:

<inputname="submit"type="submit"id="submit"onclick="location.href='<?php

echo base_url()?>HomeController/saveprint/<?=$customer?>'"value="Save"/>

CODE 20:

<inputname="submit"type="submit"id="submit"onclick="location.href='<?php

Gambar 26. Button Print

Berikut adalah tampilan website aplikasi hasil penerapan template dan konten- konten yang ada dalam aplikasi simulasi tarif ini :

a) Halaman Login dapat dilihat pada Gambar 27.

Gambar 27. Login a) Halaman “Home” dapat dilihat pada Gambar 28.

Gambar 28. Home

b) Menu dropdown pada navbar yang disediakan oleh aplikasi ini dapat dilihat pada Gambar 29

Gambar 29. Menu Dropdown pada Navbar

c) Halaman Utama jika memilih diantara menu dropdown pada navbar dapat dilihat pada Gambar 30.

Gambar 30. HomePage Menu Utama

d) Halaman pengisian form jika memilih menu add pada halaman sebelumnya dapat dilihat pada Gambar 31

e) Halaman untuk menampilkan nota tarif dari data yang dipilih sebelumnya dapat dilihat pada Gambar 32.

Gambar 32. Halaman Rincian Nota Tarif

f) Halaman untuk mencetak nota tarif yang dipilih dapat dilihat pada Gambar 33

Gambar 33. Halaman Print Nota (Cetak)

3.2.4. Penerapan dan Penggunaan Fungsi Dalam Aplikasi Simulasi Tarif

Fungsi-fungsi yang digunakan dalam aplikasi simulasi tarif ini tidak hanya berupa fungsi perhitungan saja melainkan terdapat fungsi-fungsi yang digunakan untuk autentifikasi login, create-read-update-delete data serta save dan print nota tarif, Perhitungan nota tarif untuk aplikasi website ini dibuat berdasarkan data- data dari perusahaan dan penjelasan dari

asal. Berdasarkan uraian tabel- tabel perhitungan yang telah dijelaskan pada sub bab sebelumnya, berikut fungsi-fungsi perhitungan logic yang digunakan untuk menghitung data parsing yang telah dikirimkan dari crud.php.

1. Perhitungan selisih hari dari datereq dan dateclose (sama seperti untuk perhitungan datedisch dan datedev).

Kode program yang digunakan untuk menghitung selisih hari dapat dilihat pada Code 21.

Code 21 digunakan sebagai data tanggal mulai (date req/ date disch) dalam variabel $start akan ditampung dalam variabel $datetime1, begitu juga untuk data clossdate dalam variabel

$end akan ditampung dalam variabel $datetime2. Kemudian untuk dapat menghitung selisih

hari dari kedua data tanggal tersebut dapat menggunakan fungsi diff. Rumus code 21 dituliskan dengan menggunakan variabel $difference untuk proses perhitungan selisih antara date1 dan

date2, kemudian untuk hasil akhir data akan disimpan dalam variabel $hari dan ditambah 1, karena tanggal mulai juga termasuk dalam hitungan. Variabel $hari nantinya akan dipanggil dan digunakan untuk penghitungan pada biaya.

2. Pendeklarasian variabel untuk jumlah kontainer.

Untuk mendeklarasikan variabel jumlah kontainer dapat menggunakan kode program Code 22.

3. Deklarasi Biaya administrasi.

Untuk mendeklarasikan biaya administrasi dapat menggunakan kode program Code 23.

4. Deklarasi Harga Jenis Kegiatan.

Untuk mendeklarasikan harga dari masing-masing jenis kegiatan dapat menggunakan kode program Code 24.

CODE 21:

$datetime1=new DateTime($start); $datetime2=new DateTime($end);

$difference=$datetime1->diff($datetime2); $hari=$difference->days;

CODE 22:

$jml=$rb['jumlahcon'];

CODE 23:

5. Perkondisian untuk mengganti output dari hz yang akan ditampilkan pada nota. Untuk menampilkan hasil dari form hz dapat menggunakan kode program Code 25.

6. Perhitungan biaya menururt kategori status container full atau empty (FCL/MTY). Untuk menghitung biaya berdasarkan kategori status container dapat menggunakan kode

program Code 26.

Code 26 dibuat berdasarkan rumus perhitungan nota yang didapatkan dari perusahaan. Variabel $harga yang digunakan nantinya akan memanggil data pada tabel master dalam database sesuai dengan perkondisian , jika status berisikan FCL atau MTY maka data akan

CODE 24:

$hargap= str_replace('.','',$tarif2); $hargalolo= str_replace('.','',$tarif);

CODE 25:

if($hz=='YES'){

$out="Y"; }

else{ $out="T"; }

$hzyn=$out;

CODE 26:

if($stat=='FCL'){

//hari 1 sd 3, dihitung 1 hari X 100%

$masa1=1*100/100*$hargap; $sisa1=$hari-3;

$hm1=$masa1*$jml;

if($sisa1>=1){//hari ke 4 sd 5, dihitung perhari X 200%

$masa2=2*200/100*$hargap; $sisa2=$sisa1-2;

$hm2=$masa2*$jml;

if($sisa2>=1){//hari ke 6 sd seterusnya, dihitung perhari X 300%

$masa3=$sisa2*300/100*$hargap; $hm3=$masa3*$jml;

}

elseif($stat=='MTY'){

//hari ke 1 dan 2, dihitung free

$masa1=0;

$sisa1=$hari-2; $hm1=$masa1*$jml;

if($sisa1>=1){//hari ke 3, dihitung perhari X 100%

$masa2=1*200/100*$hargap; $sisa2=$sisa1-1;

$hm2=$masa2*$jml;

if($sisa2>=1){//hari ke 4 Dst, dihitung perhari X 400%

$masa3=$sisa2*400/100*$hargap; $hm3=$masa3*$jml;

difilter dengan status yang dipilih sehingga tarif penumpukan akan didapatkan. Code 26 menggunakan variabel $kegiatan yang merupakan jenis kegiatan penumpukan dari permintaan customer. Variabel ini dapat berfungsi sebagai filter untuk tarif yang berlaku sesuai jenis kegiatan yang dipilih. Contohnya untuk jenis kegiatan TL , tarif yang akan ditampilkan nantiya hanya biaya administrasi “$adm” dan biaya ppn “$jumlah_ppn”, namun untuk jenis kegiatan “CY” , pelanggan (customer) akan dikenakan biaya sesuai dengan perhitungan nota tarif perusahaan, baik tarif administrasi mapun tarif penumpukan dengan biaya ppn.

Code 26 juga digunakan untuk menambahkan penghitungan jangka waktu untuk masing-masing masa penumpukan. Untuk penghitungan jumlah biaya dan total biaya lainnya akan dijelaskan di poin berikutnya.

7. Perhitungan biaya LOLO (Lift On / Lift Off).

Kode program yang digunakan untuk menghitung biaya LOLO dapat dilihat pada Code 27

8. Perhitungan jumlah biaya (biaya penumpukan masa, biaya lolo (lift on/lift off) dan administrasi).

Kode porgram yang digunakan untuk menghitung jumlah biaya dari keseluruhan dapat dilihat pada Code 28.

Code 28 digunakan untuk perhitungan total dari perhitungan nota tarif yaitu jumlah dari tarif penumpukan (tarif penumpukan massa 1.1, massa 1.2, massa 2) + tarif LOLO + tarif adm. Untuk tarif penumpukan didapatkan dengan proses perhitungan pada no.2 , kemudian untuk tarif LOLO hanya memanggil data dalam database berdasarkan id_cont (id_cont didapat dari gabungan data type, ukuran dan status dari container tersebut), dan untuk tarif adm (administrasi) memiliki default harga sebesar 1.000 rupiah.

9. Perhitungan jumlah PPN (Pajak Pembangunan Negara)

Biaya ini diambil dari 10% biaya total nota tarif (tarif penumpukan + tarif lolo + adm ), kode program yang digunakan dapat dilihat pada Code 29

CODE 27:

$lolo=$hargalolo*$jml;

CODE 28:

10.Perhitungan total biaya (termasuk biaya PPN).

Biaya ini dijadikan sebagai biaya akhir (total biaya penumpukan + lolo + adm) beserta tambahan biaya PPN (10% dari total biaya) yang harus dibayar oleh customer, kode program yang digunakan dapat dilihat pada Code 30.

11.Perhitungan jenis nota untuk masing- masing menu.

Dalam aplikasi website simulasi tarif ini untuk jenis nota dibedakan menjadi empat namun nama kolom dari tabel sama sehingga yang membedakan hanya isi dari nota, kode program yang digunakan dapat dilihat pada Code 31.

12.Pemanggilan session “nota”.

Setelah penghitungan data selesai maka data akan dimasukkan ke dalam userdata session dengan nama “nota”, agar nantinya akan mudah dilakukan pemanggilan pada nota_print.

Kode program yang digunakan dapat dilihat pada Code 32 (source code ini dideklarasikan pada folder models file loadmodel.php)

CODE 29:

$ppn=0.1;

$jumlah_ppn=$jumlah_biaya*$ppn;

CODE 30:

$total=$jumlah_biaya+$jumlah_ppn;

CODE 31:

if($st=="rec"){

$jenis_nota='Receiving'; }

if($st=="del"){

$jenis_nota='Delivery'; }

if($st=="rd"){

$jenis_nota='Delivery Request'; }

if($st=="rr"){

$jenis_nota='Receiving Request';}

CODE 32:

$this->session->set_userdata('nota',$sess_array); $this->load->view('vnota');

13.Fungsi Save Rincian Nota Tarif pada button SAVE dapat dilihat pada Code 33.

14.Fungsi Save Rincian Nota Tarif pada button PRINT dapat dilihat pada Code 34.

15.Fungsi Edit_data dapat dilihat pada Code 35.

CODE 33:

public function saveprint($customer) {

$cus = str_replace('%20', ' ', $customer); $title_page = 'Nota Tarif';

$data = $this->loadmodel->GetMasterPelanggan(" where NAMA_PERUSAHAAN = '$cus'");

$eks_data = $data[0]['ALAMAT_PERUSAHAAN'];

$HTML=$this->load->view('nota_print',array('titlepage'=>$title_page,'alamat'=>$eks _data),true);

$this->pdf->pdf_create($HTML,$title_page,'A5','portrait',FALSE);

}

CODE 34:

public function printpdf($customer) {

$cus = str_replace('%20', ' ', $customer); $title_page = 'Nota Tarif';

$data = $this->loadmodel->GetMasterPelanggan(" where NAMA_PERUSAHAAN = '$cus'");

$eks_data = $data[0]['ALAMAT_PERUSAHAAN'];

$HTML=$this->load->view('nota_print',array('titlepage'=>$title_page,

'alamat'=>$eks_data),true);

$this->pdf->pdf_create($HTML,$title_page,'A5','portrait', TRUE); }

CODE 35:

ublic function edit_data($id) {

$session = $this->session->userdata('model');

$table = $session['table']; //memanggil model tabel

$function = $session['function']; //memanggil model function name

$eks_data = $this->loadmodel->$function("where id_nota = '$id'");

$data = array(

//--Variabel Name =>properti array index[0]['nama_tabel']

"id_nota" =>$eks_data[0]['id_nota'], "vesel" =>$eks_data[0]['vesel'], "customer" =>$eks_data[0]['customer'], "date_start" =>$eks_data[0]['date_start'], "date_end" =>$eks_data[0]['date_end'],

16.Fungsi GetMaster pada loadmodel.php dapat dilihat pada Code 36.

17.Fungsi login dapat dilihat pada Code 37.

3.2.5.Penggunaan Database MySQL untuk arsip data

MySQL merupakan salah satu dari contoh web server yang sering digunakan oleh berbagai macam instansi-istansi maupun perusahaan. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam database sejak lama, yaitu SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Keandalan suatu sistem database (DBMS) dapat diketahui dari cara kerja optimizer-nya dalam melakukan proses perintah-perintah SQL, yang dibuat oleh user maupun program-program aplikasinya. Sebagai database server, MySQL dapat dikatakan lebih unggul

dibandingkan database server lainnya dalam query data. Hal ini terbukti untuk query yang

CODE 36:

function GetMasterTarif($where = "") {

$data = $this->db->query('SELECT * FROM master_tarif ' .$where); return $data->result_array();

}

function GetMasterNotaDely($where = "") {

$data = $this->db->query('SELECT * FROM nota_bil_del ' .$where); return $data->result_array();

}

public function getIDCont($status, $ukuran, $type) {

$sql = "SELECT ID_CONT FROM master_barang WHERE STATUS = '".$status."' AND UKURAN = '".$ukuran."' AND TYPE = '".$type."'";

$result = $this->db->query($sql);

$row = $result->result_array($result); return $row;

CODE 37:

function login($username, $password) {

$this->load->database(); $this -> db -> select('*'); $this -> db -> from('users');

$this -> db -> where('USERNAME', $username); $this -> db -> where('PASSWORD', $password);

dilakukan oleh single user, kecepatan query MySQL bisa sepuluh kali lebih cepat dari PostgreSQL dan lima kali lebih cepat dibandingkan Interbase.

Dalam pembuatan sistem aplikasi ini, pengarsipan data menggunakan server MySQL. Data- data tabel yang didapatkan dari perusahaan di koneksikan terlebih dahulu agar lebih mudah dikoneksikan dengan CodeIgniter.

Langkah- langkah dalam pengarsipan data menggunakan MySQL adalah: 1) Koneksikan MySQL dengan CodeIgniter

Untuk langkah pertama, pastikan konfigurasi CodeIgniter sudah dikoneksikan dengan MySQL. Kode program yang digunakan untuk konfigurasi CodeIgniter dapat dilihat pada Code 38.

1) Mengubah file ekstensi data menjadi CSV

Kemudian file data master tarif, barang dan pelanggan milik perusahaan yang berkestensi xls, diubah menjadi file berkestensi CSV. Data yang didapatkan dari perusahaan bernama master barang, tarif dan pelanggan seperti yang terlihat pada Gambar 34.

Gambar 34. File Master Perusahaan

2) Memasukkan data pada MySQL

Untuk selanjutnya adalah memasukkan data pada MySQL agar dapat diload pada phpmyAdmin. Dapat dilakukan dengan dua cara, mengimport file berkestensi CSV dan menggunakan query untuk dapat memasukkan data pada database MySQL:

a) Mengimport file berekstensi CSV

Untuk langkah ini lebih mudah namun ada keterbatasan dalam kapasitas file yang dapat diimportkan ke dalam MySQL, seperti yang terlihat pada Gambar 35.

CODE 38:

$db['default']['database']='prhs'; $db['default']['dbdriver']='mysql';

Gambar 35. Import File

Pertama membuat tabel dalam phpmyadmin dengan nama kolom yang sesuai dengan nama kolom yang ada pada data. Kemudian mengimport file ekstensi CSV, mengubah format file dari SQL menjadi CSV dan memeriksa kembali ketentuan yang muncul di bagian bawah, dapat dilihat pada Gambar 36.

Gambar 36. Spesifikasi Pengaturan Format File yang akan di Import

Jika semua sudah diatur sesuai dengan ketentuan, maka klik GOuntuk melanjutkan proses sehingga data akan berhasil diload pada MySQL.

b) Menggunakan query

Untuk langkah menggunakan query, sama seperti langkah dengan mengimport file CSV, membuat tabel terlebih dahulu dalam MySQL, kemudian tuliskan query SQL seperti pada Code 39.

Query pada Code 39 berfungsi meload data lokal (local data) pada komputer yang ada pada partisi C dalam folder users — enyk —documents, dan file berekstensi CSV yang akan diload pada MySQL ada didalamnya. Kemudian dimasukkan kedalam tabel MASTER_TARIF

CODE 39:

LOAD DATALOCAL INFILE 'C:/Users/enyk/Documents/MASTER_TARIF.CSV'

INTOTABLE MASTER_TARIF FIELDS TERMINATED BY';'

yang telah dibuat sebelumnya pada phpmyAdmin dengan pemisahan field menggunakan ; diakhiri dengan “ dan menggunakan pemisah baris dengan tag “\n”.

3) Membuat satu database bernama “prhs”.

Database “prhs” yang dibuat terdiri dari beberapa tabel data. Tabel- tabel tersebut berisi data- data penting perusahaan terkait dengan aplikasi website simulasi tarif ini. Tabel- tabel yang ada pada database dapat dilihat pada Gambar 37.

Gambar 37. Daftar Tabel dalam Database “phrs”.

a. Tabel master barang

Tabel master barang adalah tabel yang didapatkan langsung dari perusahaan. Tabel ini berisi id_cont, status, ukuran, type dari barang-barang yang menggunakan jasa bongkar muat dari perusahaan. Struktur dari tabel master barang dapat dilihat pada Gambar 38.

b. Tabel master pelanggan

Tabel master pelanggan adalah tabel yang didapatkan langsung dari perusahaan berisi data pelanggan yang menggunakan jasa dari perusahaan ini. Berisi tentang data- data dari pelanggan baik data maupun data pelanggan itu sendiri. Struktur dari tabel master pelanggan dapat dilihat pada Gambar 39.

Gambar 39. Tabel Master Pelanggan

c. Tabel master tarif

Tabel master tarif adalah tabel yang didapatkan langsung dari perusahaan berisi data tarif dari barang- barang yang sudah diinisialisasi dengan ID_CONT. Dengan menggunakan data ini, kita dapat mendapatkan nilai tarif dari id container yang sudah diseleksi dari tabel master barang. Struktur dari tabel master tarif dapat dilihat pada Gambar 40.

d. Tabel nota_req_del

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Request Delivery, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_req_del dapat dilihat pada Gambar 41.

Gambar 41. Tabel nota_req_del

e. Tabel nota_req_rec

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Request Receiving, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_req_rec dapat dilihat pada Gambar 42

Gambar 42. Tabel nota_req_rec

f. Tabel nota_bil_del

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Billing Delivery, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_bil_del dapat dilihat pada Gambar 43.

g. Tabel nota_bil_rec

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Billing Receiving, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_bil_rec dapat dilihat pada Gambar 44.

Gambar 44. Tabel Tabel nota_bil_rec

h. Users

Tabel ini berfungsi sebagai pengenal web simulasi terhadap user yang masuk. Tabel ini digunakan pada fungsi login. Untuk user yang tidak terdaftar atau tidak memiliki account, maka tidak akan dapat masuk dan mengakses aplikasi simulasi tarif ini. Daftar nama user yang berhasil terdaftar dalam tabel users dapat dilihat pada Gambar 45.

Gambar 45. Tabel Users

Setelah semua tabel selesai dibuat maka data yang telah diinputkan oleh user akan segera ditampung dan masuk dalam tabel database sesuai nama tabel yang dituliskan pada source code penlink-an hasil inputan data. Penggunaan variabel nama kolom, nama tabel yang digunakan pada aplikasi ini menggunakan userdata session, sehingga dalam pemanggilan isi tabel dari database yang ada dapat dituliskan dalam bentuk source code seperti pada Code 40.

Code 40 berfungsi untuk menampilan data receiving request yang ada pada tabel database.

Dimana alur dari kerja Code 40 adalah pertama- tama memanggil data user login sesuai nama dan pass user yang berhasil login, kemudian memanggil data user pada folder model dimana terdapat tabel nota_req_rec yang hanya dapat berfungsi jika menggunakan function

GetMasterNotaR_R, sehingga data user tersebut dapat ditampilkan sesuai data yang telah diinputkan sebelumnya atau yang telah tersimpan dalam database.

CODE 40:

public function Rs() /*menampilkan data receiving*/

{

if($this->session->userdata('login')) {

//set table session

$this->session->set_userdata('model',

array('table'=>'nota_req_rec', 'function'=>'GetMasterNotaR_R')); //mengambil NAMA_LENGKAP dari session

$session = $this->session->userdata('login'); $name = $session['NAMA_LENGKAP'];

$data = $this->loadmodel->GetMasterNotaR_R(" where nama = '$name'");

$this->load->view('Req_R',array('data' => $data)); }else{

redirect('login','refresh'); }

Gambar 35. Import File

Pertama membuat tabel dalam phpmyadmin dengan nama kolom yang sesuai dengan nama kolom yang ada pada data. Kemudian mengimport file ekstensi CSV, mengubah format file dari SQL menjadi CSV dan memeriksa kembali ketentuan yang muncul di bagian bawah, dapat dilihat pada Gambar 36.

Gambar 36. Spesifikasi Pengaturan Format File yang akan di Import

Jika semua sudah diatur sesuai dengan ketentuan, maka klik GOuntuk melanjutkan proses sehingga data akan berhasil diload pada MySQL.

b) Menggunakan query

Untuk langkah menggunakan query, sama seperti langkah dengan mengimport file CSV, membuat tabel terlebih dahulu dalam MySQL, kemudian tuliskan query SQL seperti pada Code 39.

Query pada Code 39 berfungsi meload data lokal (local data) pada komputer yang ada pada partisi C dalam folder users — enyk —documents, dan file berekstensi CSV yang akan diload pada MySQL ada didalamnya. Kemudian dimasukkan kedalam tabel MASTER_TARIF

CODE 39:

LOAD DATALOCAL INFILE 'C:/Users/enyk/Documents/MASTER_TARIF.CSV'

INTOTABLE MASTER_TARIF FIELDS TERMINATED BY';'

yang telah dibuat sebelumnya pada phpmyAdmin dengan pemisahan field menggunakan ; diakhiri dengan “ dan menggunakan pemisah baris dengan tag “\n”.

3) Membuat satu database bernama “prhs”.

Database “prhs” yang dibuat terdiri dari beberapa tabel data. Tabel- tabel tersebut berisi data- data penting perusahaan terkait dengan aplikasi website simulasi tarif ini. Tabel- tabel yang ada pada database dapat dilihat pada Gambar 37.

Gambar 37. Daftar Tabel dalam Database “phrs”.

a. Tabel master barang

Tabel master barang adalah tabel yang didapatkan langsung dari perusahaan. Tabel ini berisi id_cont, status, ukuran, type dari barang-barang yang menggunakan jasa bongkar muat dari perusahaan. Struktur dari tabel master barang dapat dilihat pada Gambar 38.

b. Tabel master pelanggan

Tabel master pelanggan adalah tabel yang didapatkan langsung dari perusahaan berisi data pelanggan yang menggunakan jasa dari perusahaan ini. Berisi tentang data- data dari pelanggan baik data maupun data pelanggan itu sendiri. Struktur dari tabel master pelanggan dapat dilihat pada Gambar 39.

Gambar 39. Tabel Master Pelanggan

c. Tabel master tarif

Tabel master tarif adalah tabel yang didapatkan langsung dari perusahaan berisi data tarif dari barang- barang yang sudah diinisialisasi dengan ID_CONT. Dengan menggunakan data ini, kita dapat mendapatkan nilai tarif dari id container yang sudah diseleksi dari tabel master barang. Struktur dari tabel master tarif dapat dilihat pada Gambar 40.

d. Tabel nota_req_del

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Request Delivery, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_req_del dapat dilihat pada Gambar 41.

Gambar 41. Tabel nota_req_del

e. Tabel nota_req_rec

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Request Receiving, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_req_rec dapat dilihat pada Gambar 42

Gambar 42. Tabel nota_req_rec

f. Tabel nota_bil_del

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Billing Delivery, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_bil_del dapat dilihat pada Gambar 43.

g. Tabel nota_bil_rec

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Billing Receiving, sehingga hanya menampung data permintaan user dari menu tersebut. Contoh data yang berhasil tersimpan dalam database tabel nota_bil_rec dapat dilihat pada Gambar 44.

Gambar 44. Tabel Tabel nota_bil_rec

h. Users

Tabel ini berfungsi sebagai pengenal web simulasi terhadap user yang masuk. Tabel ini digunakan pada fungsi login. Untuk user yang tidak terdaftar atau tidak memiliki account, maka tidak akan dapat masuk dan mengakses aplikasi simulasi tarif ini. Daftar nama user yang berhasil terdaftar dalam tabel users dapat dilihat pada Gambar 45.

Gambar 45. Tabel Users

Setelah semua tabel selesai dibuat maka data yang telah diinputkan oleh user akan segera ditampung dan masuk dalam tabel database sesuai nama tabel yang dituliskan pada source code penlink-an hasil inputan data. Penggunaan variabel nama kolom, nama tabel yang digunakan pada aplikasi ini menggunakan userdata session, sehingga dalam pemanggilan isi tabel dari database yang ada dapat dituliskan dalam bentuk source code seperti pada Code 40.

Code 40 berfungsi untuk menampilan data receiving request yang ada pada tabel database.

Dimana alur dari kerja Code 40 adalah pertama- tama memanggil data user login sesuai nama dan pass user yang berhasil login, kemudian memanggil data user pada folder model dimana terdapat tabel nota_req_rec yang hanya dapat berfungsi jika menggunakan function

GetMasterNotaR_R, sehingga data user tersebut dapat ditampilkan sesuai data yang telah diinputkan sebelumnya atau yang telah tersimpan dalam database.

CODE 40:

public function Rs() /*menampilkan data receiving*/

{

if($this->session->userdata('login')) {

//set table session

$this->session->set_userdata('model',

array('table'=>'nota_req_rec', 'function'=>'GetMasterNotaR_R')); //mengambil NAMA_LENGKAP dari session

$session = $this->session->userdata('login'); $name = $session['NAMA_LENGKAP'];

$data = $this->loadmodel->GetMasterNotaR_R(" where nama = '$name'");

$this->load->view('Req_R',array('data' => $data)); }else{

redirect('login','refresh'); }