Perancangan Struktur Navigasi Perancangan Trassition Diagram STD

4.2.3 Perancangan Struktur Navigasi

Struktur navigasi dalam aplikasi ini terdiri dari struktur navigasi keseluruhan aplikasi, Struktur navigasi profil, Struktur navigasi menu Ruang Galeri, Struktur navigasi Menu informasi produk dan Struktur navigasi Menu kontak. Dalam aplikasi ini penulis menggunakan jenis struktur navigasi Hirarki. 1. Keseluruhan Struktur Navigasi pada Aplikasi Gambar 4.12 Struktur Navigasi Keseluruhan

2. Sruktur Navigasi Profil

Gambar 4.13 Struktur Navigasi Menu Profil 75

3. Struktur Navigasi Menu Ruang Galeri

Gambar 4.14 Struktur Navigasi Menu Ruang Galeri

4. Struktur Navigasi Menu Informasi Produk

Gambar 4.15 Struktur Navigasi Menu Informasi Produk 76

5. Strukur Navigasi Menu Kontak

Gambar 4.16 Struktur Navigasi Menu kontak

4.2.4 Perancangan Trassition Diagram STD

State Transition Diagram STD dalam aplikasi ini terdiri dari STD Menu profil, STD Menu Ruang Galeri, STD Menu informasi dan STD Menu kontak. Semua menu ini terdapat di halaman utama atau main.

1. State Transition Diagram Menu profil

Gambar 4.17 State Transition Diagram Menu Profil Tombol profil ini terdapat pada halaman utama dari aplikasi, jika user memilih tombol “Profil” maka akan muncul halaman ‘Profil’. 77

2. State Transition Diagram Menu Ruang Galeri

Gambar 4.18 State Transition Diagram Ruang Galeri Tombol Ruang Galeri ini terdapat pada halaman utama dari aplikasi, jika user memilih tombol “gallery room” maka akan muncul halaman Ruang Galeri.

3. State Transition Diagram Menu informasi produk

Gambar 4.19 State Transition Diagram Menu Informasi Produk Tombol “Informasi produk” terdapat pada halaman utama dari aplikasi. Apabila user memilih tombol “Informasi produk” maka akan muncul halaman 78 informasi. Dalam halaman informasi terdapat lima tombol yakni tombol “2way”, “3way”, “linearray,” “subwooffer 15 inch” dan “subwooffer 18 inch”. Bila user memilih tombol “2way” maka akan tampil halaman 2way model, jika user memilih tombol “3way” maka akan muncul halaman 3way model, jika user memilih tombol “linearray” maka akan tampil halaman linearray model, jika user memilih tombol “subwooffer 15 inch” maka akan muncul halaman subwooffer 15 inch model, jika user memilih tombol “subwooffer 18 inch” maka akan tampil halaman subwooffer 18 inch.

4. State Transition Diagram Menu Kontak

Gambar 4. 20 State Transition Diagram Menu kontak Tombol kontak ini terdapat pada halaman utama dari aplikasi, jika user memilih tombol “kontak” maka akan muncul halaman kontak.

4.2.5 Rancangan Antarmuka