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 userpengguna 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: div
class =
wrapper col2
h2marquee iTos Simulasi Tarif Port Of Tanjung Priok
marqueeh2
CODE 10: ul
id =
topnav
lia href
= SIMULASI TARIF
a ul
class =
menudropdown
lia href
=
iTos
a ul
class =
sbmenu2
lia href
= ?
= base_url
? HomeControllerReq_D
Delivery SP2Perpanjangan REQUEST
ali lia
href =
? =
base_url ?
HomeControllerRs Receiving
REQUEST ali
lia href
= ?
= base_url
? HomeControllerDely
Delivery SP2Perpanjangan BILLING
ali lia
href =
? =
base_url ?
HomeControllerrec Receiving
BILLING
ali ul
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.combootstrapbootstraprefcompglyphs.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
menggunakan kode program seperti pada Code 11, Code 12, Code 13 dan Code 14.
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: a
href =
? =
base_url ?
HomeControlleradd4
span class
=
glyphicon glyphicon-plus
span
Add Billing Receiving
a
CODE 12: a
href =
? =
base_url ?
crudedit_data
? =
row [
id_nota ]
? span
class =
glyphicon glyphicon-pencil span
a
CODE 13: a
href =
? =
base_url ?
crudhitungdata ?
= row
[ idcon
] ?
? =
row [
id_n ota
] ?
span class
= glyphicon glyphicon-print
span
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
