Perancangan Interface Perancangan Design

Detail CRUD R Propinsi ALL ALL Kd_propinsi X X Nm_propinsi R R Keterangan: INDV = individual, ALL = all, SS = subset, X = no access, C = create, R = read , U = update, D = delete

4.2.3. Perancangan Interface

a. State Transition Diagram STD 1. STD Menu Utama Pelanggan Gambar 4.17. STD Menu Utama Pelanggan Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 6. STD Menu Testimonial - Pihak Pelanggan Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Edit Hapus 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 : a. Perancangan layout halaman Login admin Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 update , hapus, tambah dan melihat data yang ada. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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. c. Perancangan layout halaman Pt. Inti Kapuas Internasional Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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” kemudian melakukan proses selanjutnya. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 ingin melihat keseluruhan daftar berita yang ada. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 nama, email dan pesannya. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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 tersebut. Dibawah gambar terdapat keterangan gambarnya. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now. 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. Evaluation notes were added to the output document. To get rid of these notes, please order your copy of ePrint 5.0 now.

4.2.4. Perancangan Jaringan