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
? assetstampilan_loginbootstrap.css
rel =
stylesheet
link href
= ?
= base_url
? assetstampilan_loginstylesheet.css
rel =
stylesheet
link href
= ?
= base_url
?
assetstampilan_logingambar.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 strongdivtd
CODE 3: ?php
echo form_open
login_validation ;
?
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
plabel input
type =
text
name =
username
id =
username
placeholder= Username
i class
= icon-user
i div
div class
= login-field
label for
= password
p Password
plabel 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 form
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
Kategori