Perancangan Interface

BAB IV HASIL DAN PEMBAHASAN

4.2.3. Perancangan Interface

a. State Transition Diagram (STD)

1. STD Menu Utama Pelanggan

Gambar 4.17. STD Menu Utama Pelanggan

3. STD Menu Kayu Manis - Pihak Pelanggan

Gambar 4.19. STD Menu Kayu Manis - Pihak Pelanggan

4. STD Menu Berita Terkini - Pihak Pelanggan

5. STD Menu Konfirmasi - Pihak Pelanggan

%/ 0

%/

Gambar 4.21. STD Menu Konfirmasi - Pihak Pelanggan

6. STD Menu Testimonial - Pihak Pelanggan

Gambar 4.22. STD Menu Testimonial - Pihak Pelanggan

7. STD Menu Gallery Foto - Pihak Pelanggan

8. STD Menu Kontak Kami - Pihak Pelanggan

Gambar 4.24. STD Menu Kontak Kami - Pihak Pelanggan

9. STD Menu Sejarah Kayu Manis - Pihak Pelanggan

Gambar 4.25. STD Menu Sejarah Kayu Manis - Pihak Pelanggan

11.STD Menu Informasi - Pihak Pelanggan

Gambar 4.27. STD Menu Informasi - Pihak Pelanggan

12.STD Menu Search - Pihak Pelanggan

Gambar 4.28. STD Menu Search - Pihak Pelanggan

13.STD Menu Login - Pihak Pelanggan

Gambar 4.29. STD Menu Login - Pihak Pelanggan

14.STD Menu Utama Admin

Gambar 4.30. STD Menu Utama Admin

15.STD Menu User - Pihak Admin

Gambar 4.31. STD Menu User - Pihak Admin

16.STD Menu Pemesanan - Pihak Admin

17.STD Menu Berita Terkini - Pihak Admin

Gambar 4.33. STD Menu Berita Terkini - Pihak Admin

19.STD Menu Testimonial - Pihak Admin

Gambar 4.35. STD Menu Testimonial - Pihak Admin

20.STD Menu Gallery - Pihak Admin

Gambar 4.36. STD Menu Gallery - Pihak Admin

21.STD Menu Kontak Kami - Pihak Admin

Gambar 4.37. STD Menu Kontak Kami - Pihak Admin

22.STD Menu Laporan - Pihak Admin

b. Design Screen Layout

Pada tahap ini dirancang tampilan layout sehingga didapat

tampilan yang user friendly. Berikut ini merupakan rancangan tampilan

layout :

a. Perancangan layout halaman Login admin

Login

Header

Username Password

Gambar 4.39. Perancangan Layout Halaman Login admin

Pada layout ini admin diminta memasukan username dan password

yang dimiliki pada database website ketika ingin memasuki halaman

utama admin. Jika username dan password benar maka akan memasuki

halam utama admin yang terdapat fasilitas untuk update, hapus,

tambah dan melihat data yang ada.

b. Perancangan layout halaman Depan

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Animasi

Header

Gambar 4.40. Perancangan Layout Halaman Depan

Pada layout ini mengambarkan tampilan halaman pertama jika user

membuka website, terdapat 3 menu utama pada halaman ini yaitu DIS,

kayu manis dan berita terkini. Disamping menu terdapat animasi

gambar dan tulisan yang dapat menghidupkan suasana agar tidak

terlihat kaku dan juga terdapat tampilan tanggal pada pojok kanan

bawah.

c. Perancangan layout halaman Pt. Dwiwarna inti

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Pt. Dwiwarna Inti

Berisi tentang sejarah, visi misi, dan profile perusahaan Informasi

Gambar 4.41. Perancangan Layout Halaman PT.dwiwarna inti

Pada layout ini menampilkan tentang sejarah, visi misi dan juga lokasi

perusahaan DIS. Semua profil perusahaan dapat dilihat pada menu ini.

d. Perancangan layout halaman Kayu manis

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Kayu Manis

Berisi tentang tipe kayu manis yang dipasrakan beserta harga per kg nya

Informasi

Gambar 4.42. Perancangan Layout Halaman Kayu manis

Pada layout ini mengambarkan daftar jenis kayu manis yang

dipasarkan oleh perusahaan, terdapat gambar dan harga per kg nya.

Pada menu ini user dapat melakukan pemesanan pada jenis kayu manis

yang dibutuhkan dengan mengklik tombol “pesan” kemudian

melakukan proses selanjutnya.

e. Perancangan layout halaman Berita terkini

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Berita Terkini

Berisi tentang kilasan berita seputar kayu manis dan tanaman lainnya

Informasi

Gambar 4.43. Perancangan Layout Halaman Berita terkini

Pada layout ini menampilkan berita-berita tentang kayu manis dan

jenis tanaman lainnya. Pada layout ini terdapat gambar dan synopsis

berita, user dapat mengklik tombol selengkapnya jika ingin melihat

keseluruhan berita. Halaman ini menampilkan 4 berita dengan

synopsis dan 5 berita sebelumnya. Dan juga terdapat tombol “arsip

berita” jika ingin melihat keseluruhan daftar berita yang ada.

f. Perancangan layout halaman Konfirmasi

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Konfirmasi

Berisi form pengisian konfirmasi pembayaran yang telah dilakukan pelanggan

Informasi

Gambar 4.44. Perancangan Layout Halaman konfirmasi

Pada layout ini mengambarkan tentang konfirmasi pembayaran yang

telah dilakukan oleh user. Kolom konfirmasi ini terdiri atas no

pesanan, nama pemesan, bank tujuan, no rekening pemesan, jam

transfer, jumlah transfer dan kolom keterangan. Kolom tersebut

harus diisi oleh user setelah melakukan transfer ke bank tujuan.

g. Perancangan layout halaman Testimonial

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Testimonial

Berisi kumpulan komentar pelanggan seputar pemesanan kayu manis

Informasi

Gambar 4.45. Perancangan Layout Halaman Testimonial

Pada layout ini menampilkan pesan atau komentar para user yang

mengunjungi website, pesan ini menampilkan nama, email dan pesan

yang akan ditulis dalam halaman ini. User dapat menulis pesannya

dengan mengklik tombol “tulis komentar” dan mengisi nama, email

dan pesannya.

h. Perancangan layout halaman galery

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Gallery

Berisi kumpulan gambar-gambar aktifitas pemasaran kayu manis

Informasi

Gambar 4.46. Perancangan Layout Halaman Galery

Pada layout ini meampilkan gambar-gambar kegiatan ayau aktifitas

pada perusahaan DIS. Terdapat 8 foto dengan bentuk thumbail dan

jika ingin diperbesar dengan mengklik gambar tersebut. Dibah

gambar terdapat keterangan gambarnya.

i. Perancangan layout halaman Kontak

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login Sejarah Kayu Manis Jenis dan Manfaat

Footer

Kontak

Berisi form untuk mengirim pesan ke admin web

Informasi

Gambar 4.47. Perancangan Layout Halaman kontak

Pada layout ini menampilkan form kontak yang disediakan untuk

user jika ingn mengirim pesan kepada admin website, didalam form

ini user harus mengisi nama, alamat, email, telephone, subjek dan isi

pesan yang akan disampaikan. Di halaman ini juga terdapat

informasi tentang alamat dan no telephone kantor perusahaan.

j. Perancangan layout halaman Site map

Pt. Dwiwarna Inti Kayu manis Berita terkini Tanggal

Header

Home Konfirmasi Testimonial Galery Kontak Site map Search Banner Animasi gambar Login

Sejarah Kayu Manis Jenis dan Manfaat

Footer

Site Map

Berisi struktur menu pada web Informasi

Gambar 4.48. Perancangan Layout Halaman Site map

Pada layout ini menampilkan struktur menu yang ada pada website.

User dapat langsung mengklik halaman yang diinginkan pada site

map ini. Halaman ini mempermudah user dalam mengenali isi dari

website ini.