5. BAB III.pdf laporan praktik industri

(1)

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

(2)

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

(3)

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

(4)

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

(5)

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

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

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)

(6)

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

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

(7)

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

(8)

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

(9)

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

(10)

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,

(11)

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:

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:

(12)

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>

(13)

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:

?>assets/layout/styles/layout.css" type="text/css" />

?>assets/css/bootstrap.css" type="text/css" />

?>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 />

(14)

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.

(15)

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:

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

(16)

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>

(17)

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>

(18)

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

(19)

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

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']?>">

(20)

d) Icon Delete

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>

(21)

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:

(22)

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:

(23)

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

(24)

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

(25)

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

(26)

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

(27)

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:

(28)

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;

(29)

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:

(30)

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);

(31)

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']

[image:31.612.74.481.81.270.2]

(32)

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');

(33)

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

[image:33.612.72.542.408.505.2]

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:

(34)

[image:34.612.149.479.165.411.2]

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';'

(35)

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

[image:35.612.78.529.216.358.2]

ada pada database dapat dilihat pada Gambar 37.

Gambar 37. Daftar Tabel dalam Database “phrs”.

[image:35.612.79.529.217.357.2]

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.

[image:35.612.209.424.485.694.2]

(36)

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

[image:36.612.142.487.180.341.2]

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.

[image:36.612.152.483.491.672.2]

Struktur dari tabel master tarif dapat dilihat pada Gambar 40.

(37)

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,

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,

[image:37.612.93.527.503.631.2]

tersimpan dalam database tabel nota_bil_del dapat dilihat pada Gambar 43.

(38)

g. Tabel nota_bil_rec

Tabel ini berfungsi untuk menyimpan data dari form pengisian menu Billing Receiving,

[image:38.612.89.562.162.264.2]

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

[image:38.612.88.508.413.558.2]

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

(39)

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'); }