Perancangan Interface

BAB III METODE PENELITIAN

4.2.3. Perancangan Interface

a. State Transition Diagram (STD)

1. STD Menu Utama Pelanggan

Gambar 4.17. STD Menu Utama Pelanggan

2. STD Menu PT. Dwiwarna Inti - Pihak Pelanggan

Gambar 4.18. STD Menu PT. Inti kapuas - Pihak Pelanggan

3. STD Menu Ikan arwana - Pihak Pelanggan

Gambar 4.19. STD Menu Ikan arwana - Pihak Pelanggan

4. STD Menu Berita Terkini - Pihak Pelanggan

Gambar 4.20. STD Menu Berita Terkini - Pihak Pelanggan

5. STD Menu Konfirmasi - Pihak Pelanggan

Gambar 4.21. STD Menu Konfirmasi - Pihak Pelanggan

Gambar 4.22. STD Menu Testimonial - Pihak Pelanggan

7. STD Menu Gallery Foto - Pihak Pelanggan

Gambar 4.23. 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 Ikan arwana - Pihak Pelanggan

Gambar 4.25. STD Menu Sejarah Ikan arwana - P ihak Pelanggan

10.STD Menu Jenis dan Manfaat - Pihak Pelanggan

Gambar 4.26. STD Menu Jenis dan Manfaat - 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

Gambar 4.32. STD Menu Pemesanan - Pihak Admin

17.STD Menu Berita Terkini - Pihak Admin

Berita Terkini

Tambah

Berita ^{Hapus Edit}

Klik Edit Menampilkan Halaman Edit Berita Klik Tambah Berita

Menampilkan Halaman Tambah Berita

Klik Hapus Menghapus Berita

Simpan Batal Klik Simpan

Data Berita disimpan

Klik Batal Kembali ke Halaman

List Berita

Update Batal Klik Simpan

Data Berita diupdate

Klik Batal Kembali ke Halaman

List Berita

Gambar 4.33. STD Menu Berita Terkini - Pihak Admin

18.STD Menu Daftar Data - Pihak Admin

Gambar 4.34. STD Menu Daftar Data - 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

Gambar 4.38. 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 :

Lo gin

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 halaman utama admin yang terdapat fasilitas untuk

b. Perancangan layout halaman Depan HEADER Pt. Inti Kapuas ANIMASI Tanggal Berita Terkini Ikan Arwana

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 IKI, Ikan Arwana 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.

Pt. Inti K apuas A rwana Berita terkini Tanggal

Header

H ome K onfirmasi Testimonial G alery K ontak Site map Search Banner Animasi gambar Login Sejarah A rwana Jenis dan Manfaat

Footer

Pt. Inti Kapuas Internasional

Berisi tentang sejarah, visi misi, dan profile perusahaan Informasi

Gambar 4.41. Perancangan Layout Halaman PT.Inti Kapuas

Pada layout ini menampilkan tentang sejarah, visi misi dan juga lokasi perusahaan IKI. Semua profil perusahaan dapat dilihat pada menu ini.

d. Perancangan layout halaman Ikan Arwana P t.Inti K a puas A rw a na Berita terkini Tanggal

Header

H ome K onfirma si Testimonia l G alery K onta k S ite map Search Banner Animasi gambar Login Sejara h A rw a na Jenis dan Ma nfaat

Footer

Arwana

Berisi tentang tipe arwana yang dipasarkan beserta harga nya

Informa si

Gambar 4.42. Perancangan Layout Halaman Ikan Arwana

Pada layout ini mengambarkan daftar jenis ikan arwana yang dipasarkan oleh perusahaan, terdapat gambar dan harga per ekor nya. Pada menu ini user dapat melakukan pemesanan pada jenis ikan arwana yang dibutuhkan dengan mengklik tombol “pesan”

e. Perancangan layout halaman Berita terkini Pt. Inti K apuas A rwana Berita terkini Tanggal

Header

H ome K onfirmasi Testimonial G alery K ontak Site map Search Banner Animasi gambar Login Sejarah A rw ana Jenis dan Manfaat

Footer

Berita Terkini

Berisi tentang kilasan berita seputar Arwana Informasi

Gambar 4.43. Perancangan Layout Halaman Berita terkini

Pada layout ini menampilkan berita-berita tentang ikan arwana. Pada layout ini terdapat gambar dan sinopsis berita, user dapat mengklik tombol selengkapnya jika ingin melihat keseluruhan berita. Halaman ini menampilkan 4 berita dengan sinopsis dan 5 berita sebelumnya. Dan juga terdapat tombol “arsip berita” jika

f. Perancangan layout halaman Konfirmasi Pt. Inti K apuas A rwana Berita terkini Tanggal

Header

H ome K onfirmasi Testimonial G alery K ontak Site map Search Banner Animasi gambar Login Sejarah A rw ana 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 o leh 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. Inti K a pua s A rw a na Be r ita te rkini Tanggal

Header

H ome K onf ir masi Te stim onia l G aler y K onta k Site ma p Search Banner Animasi gambar Login Se ja ra h A r w a na Jenis da n Ma nfa a t

Footer

Testimonial

Berisi kumpulan komentar pelanggan seputar pemesanan Arwana

I nf orma si

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

h. Perancangan layout halaman galery Pt. Inti K apuas A rwana Berita terkini Tanggal

Header

H ome K onfirmasi Testimonial G alery K ontak Site map Search Banner Animasi gambar Login Sejarah K ayu Manis Jenis dan Manfaat

Footer

Gallery

Berisi kumpulan gambar-gambar aktifitas pemasaran Arwana

Informasi

Gambar 4.46. Perancangan Layout Halaman Galery

Pada layout ini menampilkan gambar-gambar kegiatan atau aktifitas pada perusahaan IKI. Terdapat 8 foto dengan bentuk

thumbail dan jika ingin diperbesar dengan mengklik gambar

i. Perancangan layout halaman Kontak Pt. I nti K a pua s A r w a na Be rita te r kini Tanggal

Header

H ome K onf ir ma si Te stim onia l G a le r y K onta k Site m ap Search Banner Animasi gambar Login Se ja ra h A r w a na Je nis da n M a nf a a t

Footer

Kontak

Berisi form untuk mengirim pesan ke admin web

I nfor ma si

Gambar 4.47. Perancangan Layout Halaman kontak

Pada layout ini menampilkan form kontak yang disediakan untuk

user jika ingin 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 telepon kantor perusahaan.

j. Perancangan layout halaman Site map Pt. Inti K apuas A rwana Berita terkini Tanggal

Header

H ome K onfirmasi Testimonial G alery K ontak Site map Search Banner Animasi gambar Login Sejarah A rw ana 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.