Desain Input dan Output yang Diusulkan

4.8. Desain Input dan Output yang Diusulkan

4.8.1. Desain Layout

HEADER HEADER MENU MENU

AWDQCONTENT CONTENT

FOOTER

Gambar 4.23 Desain Layout

Berikut tampilan desain layout dari Sistem Katalog Produk Berbasis Web. Terdiri dari 4 bagian yaitu, header, menu, content, dan footer. Bagian menu berisi menu-menu dari form yang akan ditampilkan nantinya. Misal, form finishing, jenis furniture dan lainnya. Seperti yang ditujukan pada gambar 4.23.

4.8.2. Form Login

Login

Username

Password

Login Login

Gambar 4.24 Form Login

Desain form di atas untuk mengaktifkan menu utama halaman admin Sistem Katalog Produk Berbasis Web yang merupakan pusat aktifitas sistem, hal ini membutuhkan keamanan dalam hal hak akses. Seperti yang ditujukan pada gambar 4.24.

4.8.3. Struktur Menu User

HEADER HEADER

HOME KATALOG FINISHING

JENIS FURNITURE MENU SEARCH ABOUT LOGIN CONTACT US

AWDQCONTENT CONTENT

FOOTER

Gambar 4.25 Struktur Menu User

Form di atas merupakan tampilan awal dari struktur menu user . Tampilan ini akan langsung muncul ketika pertama kali pengguna mengakses sistem. Seperti yang ditujukan pada gambar 4.25.

4.8.4. Struktur Menu Admin

HEADER HEADER

FINISHING JENIS

PEMESA ITEM FURNITURE

TAGS KATALOG MENU PRODUCT

MODS

NAN PEMESA LOGOUT NAN

AWDQCONTENT CONTENT

FOOTER

Gambar 4.26 Struktur Menu Admin

Form di atas merupakan desain tampilan dari struktur menu admin. Tampilan di atas akan muncul ketika admin sudah melakukan proses login dan berhasil masuk ke dalam sistem. Seperti yang ditujukan pada gambar 4.26.

4.8.5. Desain Input

Desain input sistem akan terdiri dari beberapa form yang dapat ditampilkan nantinya. Berikut form-form tersebut :

4.8.5.1. Form Input Finishing

Dimana admin dapat mengelola semua data yang ada seperti menambah data finishing, yang terlihat pada gambar

4.27 di bawah ini :

Admin Tambah Finishing

Nama

Slug

Submit Login

Gambar 4.27 Form Tambah Finishing

4.8.5.2. Form Input Jenis Furniture

Dimana admin dapat mengelola semua data yang ada seperti menambah data jenis furniture, yang terlihat pada gambar 4.28 di bawah ini :

Admin Tambah Furniture

Submit Login

Gambar 4.28 Form Tambah Furniture

4.8.5.3. Form Input Katalog

Dimana admin dapat mengelola semua data yang ada seperti menambah data katalog, yang terlihat pada gambar

4.29 di bawah ini :

Admin Tambah Katalog

Submit Login

Gambar 4.29 Form Tambah Katalog

4.8.6. Desain Output

Desain output sistem akan terdiri dari beberapa form yang dapat ditampilkan nantinya. Berikut form-form tersebut :

4.8.6.1. Form Output Finsihing

Dimana admin dapat mengelola semua data yang ada seperti menambah data finishing, edit dan hapus data yang terlihat pada gambar 4.30 di bawah ini :

FINISHING

Tambah Finishing Login

ID ID NAME

SLUG

CREATED MODIFIED ACTIONS

Lihat Ubah

Gambar 4.30 Form Output Finishing

4.8.6.2. Form Output Jenis Furniture

Dimana admin dapat mengelola semua data yang ada seperti menambah data finishing, edit dan hapus data yang terlihat pada gambar 4.31 di bawah ini:

JENIS FURNITURE

Tambah Furniture Login

ID ID PARENT ID NAME

SLUG

CREATED MODIFIED ACTIONS

ID Lihat Ubah

ID ID ID

Gambar 4.31 Form Output Jenis Furniture

4.8.6.3. Form Output Katalog

Dimana admin dapat mengelola semua data yang ada seperti menambah data katalog dan melakukan pencarian katalog, yang terlihat pada gambar 4.32 di bawah ini :

KATALOG

Finishing Login Nama Login

Login

Login Cari

Tambah Katalog Login

Image ID Furniture ID Finsihing

Nama

Deskripsi Harga Views ID ID ID ID

Gambar 4.32 Form Output Tambah Katalog

4.8.7. Desain Tambah User

Form di bawah ini merupakan desain tampilan dari tambah akses user . Tampilan akan muncul ketika admin ingin menambahkan akses, baik itu yang bersifat admin maupun user . Seperti yang ditujukan pada gambar 4.33.

Admin Tambah User

Submit Login

Gambar 4.33 Form Tambah User