Perancangan Struktur Menu Perancangan Arsitektur

3 pass varchar 32 Password spbu 4 alamat text Alamat spbu 5 status varchar 1 Status sudang mengisi kuesioner

3.2.2 Perancangan Struktur Menu

3.2.2.1 Struktur me nu User

Home Kritik dan saran Isi kuesioner Pertanyaan Lihat hasil Gambar 3.10 Struktur Menu User

3.2.2.2 Struktur me nu Admin

Home Keluar Lihat Data SPBU Tambah SPBU Gambar 3.11 Struktur Menu Admin

3.2.3 Perancangan Arsitektur

Perancangan arsitektur merupakan perancangan yang dibuat sebelum program aplikasi dibuat. Dengan perancangan arsitektur akan mempermudah proses pembangunan aplikasi kuesioner berbasis web.

3.2.3.1 Perancangan Antar Muka

Interface atau antar muka merupakan tampilan dari suau program aplikasi yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh user. Perancangan interface untuk aplikasi kuesioner berbasis web adalah sebagai berikut :

3.2.3.1.1 Tampilan Login untuk Admin

Username : Password : Logo pertamina Footer Klik submit menuju A02 Klik Reset menuju A01 Keterangan: Nama Form: A01 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih A01 Submit Reset Gambar 3.12 Login Admin

3.2.3.1.2 Tampilan Menu Admin

Teks Logo pertamina TeksLink Keluar Link Home Link Tambah SPBU Link Lihat SPBU Klik Link Home menuju A02 Klik Link Tambah SPBU menuju A03 Klik Link Lihat SPBU menuju A04 Klik Link Keluar menuju A01 Keterangan: Nama Form: A02 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih A02 Gambar 3.13 Menu Admin

3.2.3.1.3 Tampilan Menu Tambah SPBU di Menu Admin

Logo pertamina TeksLink Keluar Link Home Link Tambah SPBU Link Lihat SPBU Teks ID SPBU Alamat Tambah Klik Link Home menuju A02 Klik Link Tambah SPBU menuju A03 Klik Link Lihat SPBU menuju A04Klik Link Keluar menuju A01 Keterangan: Nama Form: A03 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih A03 Gambar 3.14 Menu Tambah SPBU di Menu Admin

3.2.3.1.4 Tampilan Menu Lihat SPBU di Menu Admin

Logo pertamina TeksLink Keluar Link Home Link Tambah SPBU Link Lihat SPBU Teks No Id SPBU Alamat SPBU Status Kuesioner Teks No Teks Id SPBU TeksAlamat SPBU TeksStatus Kuesioner Teks No Teks Id SPBU TeksAlamat SPBU Teks Status Kuesioner Hapus Hapus Klik Link Home menuju A02 Klik Link Tambah SPBU menuju A03Klik Link Lihat SPBU menuju A04Klik Link Keluar menuju A01 Keterangan: Nama Form: A04 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih A04 Gambar 3.15 Menu Lihat SPBU di Menu Admin

3.2.3.1.5 Tampilan Login untuk SPBU

No SPBU : Key : Logo pertamina Footer Klik submit menuju A02 Klik Reset menuju A01 Keterangan: Nama Form: U01 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih U01 Gambar 3.16 Menu Login Untuk SPBU

3.2.3.1.6 Tampilan Menu SPBU

Klik link isi kuesioner menuju U03 Klik link keluar menuju U01 Keterangan: Nama Form: U02 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link isi kuesioner Link kritik dan saran Link keluar Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 Jawaban 1 Jawaban 2 Jawaban 3 Jawaban 4 U02 Gambar 3.17 Menu SPBU

3.2.3.1.7 Tampilan Menu Pengisian kuesioner 1

Klik link keluar menuju U01 Klik Next menuju U04 Keterangan: Nama Form: U03 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 1 Teks Jawaban option 1 Teks Jawaban option 1 Teks Jawaban option 1 Teks Jawaban option 1 Logo pertamina Teks keterangan sedang mengikuti kuesioner U03 Next Gambar 3.18 Menu Pengisian kuesioner 1

3.2.3.1.8 Tampilan Menu Pengisian kuesioner 2

Klik link keluar menuju U01 Klik Next menuju U05 Keterangan: Nama Form: U04 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 2 Teks Jawaban option 2 Teks Jawaban option 2 Teks Jawaban option 2 Teks Jawaban option 2 Logo pertamina Teks keterangan sedang mengikuti kuesioner U04 Next Gambar 3.19 Menu Pengisian kuesioner 2

3.2.3.1.9 Tampilan Menu Pengisian kuesioner 3

Klik link keluar menuju U01 Klik Next menuju U06 Keterangan: Nama Form: U05 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 3 Teks Jawaban option 3 Teks Jawaban option 3 Teks Jawaban option 3 Teks Jawaban option 3 Logo pertamina Teks keterangan sedang mengikuti kuesioner U05 Next Gambar 3.20 Menu Pengisian kuesioner 3

3.2.3.1.10 Tampilan Menu Pengisian kuesioner 4

Klik link keluar menuju U01 Klik Next menuju U07 Keterangan: Nama Form: U06 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 4 Teks Jawaban option 4 Teks Jawaban option 4 Teks Jawaban option 4 Teks Jawaban option 4 Logo pertamina Teks keterangan sedang mengikuti kuesioner U06 Next Gambar 3.21 Menu Pengisian kuesioner 4

3.2.3.1.11 Tampilan Menu Pengisian kuesioner 5

Klik link keluar menuju U01 Klik Next menuju U08 Keterangan: Nama Form: U07 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 5 Teks Jawaban option 5 Teks Jawaban option 5 Teks Jawaban option 5 Teks Jawaban option 5 Logo pertamina Teks keterangan sedang mengikuti kuesioner U07 Next Gambar 3.22 Menu Pengisian kuesioner 5

3.2.3.1.12 Tampilan Menu Pengisian kuesioner 6

Klik link keluar menuju U01 Klik Next menuju U09 Keterangan: Nama Form: U08 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 6 Teks Jawaban option 6 Teks Jawaban option 6 Teks Jawaban option 6 Teks Jawaban option 6 Logo pertamina Teks keterangan sedang mengikuti kuesioner U08 Next Gambar 3.23 Menu Pengisian kuesioner 6

3.2.3.1.13 Tampilan Menu Pengisian kuesioner 7

Klik link keluar menuju U01 Klik Next menuju U10 Keterangan: Nama Form: U09 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 7 Teks Jawaban option 7 Teks Jawaban option 7 Teks Jawaban option 7 Teks Jawaban option 7 Logo pertamina Teks keterangan sedang mengikuti kuesioner U09 Next Gambar 3.24 Menu Pengisian kuesioner 7

3.2.3.1.14 Tampilan Menu Pengisian kuesioner 8

Klik link keluar menuju U01 Klik Next menuju U11 Keterangan: Nama Form: U10 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 8 Teks Jawaban option 8 Teks Jawaban option 8 Teks Jawaban option 8 Teks Jawaban option 8 Logo pertamina Teks keterangan sedang mengikuti kuesioner U10 Next Gambar 3.25 Menu Pengisian kuesioner 8

3.2.3.1.15 Tampilan Menu Pengisian kuesioner 9

Klik link keluar menuju U01 Klik Next menuju U12 Keterangan: Nama Form: U11 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 9 Teks Jawaban option 9 Teks Jawaban option 9 Teks Jawaban option 9 Teks Jawaban option 9 Logo pertamina Teks keterangan sedang mengikuti kuesioner U11 Next Gambar 3.26 Menu Pengisian kuesioner 9

3.2.3.1.16 Tampilan Menu Pengisian kuesioner 10

Klik link keluar menuju U01 Klik Next menuju U02 Keterangan: Nama Form: U12 Ukuran Layar: Dinamis Default 1024 x 768 TypeUkuran font: Arial 12 pt Warna Latar: Putih Link kritik dan saran Link keluar Teks pertanyaan 10 Teks Jawaban option 10 Teks Jawaban option 10 Teks Jawaban option 10 Teks Jawaban option 10 Logo pertamina Teks keterangan sedang mengikuti kuesioner U12 Next Gambar 3.27 Menu Pengisian kuesioner 10

3.3 Implementasi