ANALISIS DAN PERANCANGAN SISTEM
3.5. Perancangan Antarmuka Sistem
sebagai media pembuat user interface (tatap muka) dan juga sebagai compiler untuk menjadikan project Unitymenjadi ekstensi (.apk) yang berjalan pada Smartphone Android Sistem menggunakan Unity , dan Bahasa pemrograman C Sharp (C#).
E
3.5.1. Rancangan Halaman Homepage
Halaman Homepage nantinya akan menjadi halaman awal pada aplikasi, tampilan rancangan pada halaman Homepage dapat dilihat pada gambar 3.11
Gambar 3.11 Rancangan Halaman Homepage
Berikut keterangan komponen yang terdapat pada halaman Homepage dapat dilihat pada tabel 3.2.
Tabel 3.2 Komponen-Komponen pada Halaman Homepage
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Tombol Akar (Button) Tombol yang akan menampilkan halaman Akar
3. Tombol Batang (Button) Tombol yang akan menampilkan halaman Batang
4. Tombol C/V (Button) Tombol yang akan menampilkan halaman Video
5. Tombol Daun (Button) Tombol yang akan menampilkan halaman Daun
6. Tombol Bunga (Button) Tombol yang akan menampilkan halaman Bunga
7. Deskripsi Objek (Text) Menjelaskan tentang pembagian Tumbuhan
Universitas Sumatera Utara
8. Vertical Bar (Scroll Bar) Digunakan untuk menggulung (Deskripsi Objek) secara vertical
3.5.2. Rancangan Halaman Akar
Halaman Akar nantinya akan menampilkan 3 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan. Tampilan rancangan pada halaman Akar dapat dilihat pada gambar 3.12
Gambar 3.12 Rancangan Halaman Akar
Keterangan komponen yang terdapat pada halaman Akar dapat dilihat pada tabel 3.3 Tabel 3.3 Komponen-Komponen pada Halaman Akar
No Jenis Komponen Keterangan
1.
Nama Halaman (Text) Judul Halaman2.
Tombol Akar Serabut (Button)
Tombol yang akan menampilkan halaman Objek Akar Serabut
3. Tombol Akar Tunggang (Button)
Tombol yang akan menampilkan halaman Objek Akar Tunggang
4 3 2
Universitas Sumatera Utara
3.5.3. Rancangan Halaman Objek Akar
Halaman Objek Akar nantinya akan menampilkan 4 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan, serta ada tombol kesimpulan yang akan menampilkan kesimpulan dari materi. Tampilan rancangan pada halaman Objek Akar dapat dilihat pada gambar 3.13
Gambar 3.13 Rancangan Halaman Objek Akar
Keterangan komponen yang terdapat pada halaman Akar dapat dilihat pada tabel 3.4
Tabel 3.4 Komponen-Komponen pada Halaman Objek Akar
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Objek 3D (Mesh dan Texture) Objek 3D yang tampil sesuai dengan objek yang dipilih (Automatic Rotate) 3. Tombol Akar Serabut (Button) Tombol yang akan memicu smartphone
untuk menampilkan Objek 3D Akar Serabut 4. Tombol Akar Tunggang
(Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Akar
Tunggang
5. Tombol Kesimpulan(Button) Tombol yang akan menampilkan halaman kesimpulan dari perbedaan kedua objek
Universitas Sumatera Utara
6. Tombol Back(Button) Tombol yang akan mengembalikan ke Halaman Homepage
3.5.4. Rancangan Halaman Batang
Halaman Batang nantinya akan menampilkan 4 tombol, dimana masing - mamsing tombol mewakili objek yang akan ditampilkan. Tampilan rancangan pada halaman Batang dapat dilihat pada gambar 3.14
Keterangan komponen yang terdapat pada halaman Batang dapat dilihat pada tabel 3.5 Tabel 3.5 Komponen-Komponen pada Halaman Batang
No Jenis Komponen Keterangan
1. Textbox (Text) Berisi penjelasan tentang curiculum vitae penulis
2. Tombol Batang Berkayu (Button)
Tombol yang akan menampilkan halaman Objek Batang Berkayu
3. Tombol Batang Rumput (Button) Tombol yang akan menampilkan halaman Objek Batang Rumput
4. Tombol Batang Basah (Button) Tombol yang akan menampilkan halaman Objek Batang Basah
2
3
2
4
2
5
2
Gambar 3.14 Rancangan Halaman Batang
Universitas Sumatera Utara
5. Tombol Back(Button) Tombol yang akan mengembalikan ke halaman Homepage
3.5.5. Rancangan Halaman Objek Batang
Halaman Objek Batang nantinya akan menampilkan 5 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan. Tampilan rancangan pada halaman Objek Batang dapat dilihat pada gambar 3.15
Gambar 3.15 Rancangan Halaman Objek Batang
Keterangan komponen yang terdapat pada halaman Objek Batang dapat dilihat pada tabel 3.6
Tabel 3.6 Komponen – Komponen pada Halaman Objek Batang
No Jenis Komponen Keterangan
1. Textbox (Text) Berisi penjelasan tentang curiculum vitae penulis
2. Objek 3D (Mesh dan Texture) Objek 3D yang tampil sesuai dengan objek yang dipilih (Automatic Rotate) 3. Tombol Batang Berkayu
(Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3DBatang
Berkayu
Universitas Sumatera Utara
3.5.6. Rancangan Halaman C/V
Halaman C/V nantinya akan menampilkan vidio yang akan mendukung materi pengelompokan Tumbuhan
Gambar 3.16 Rancangan Halaman C/V
Gambar 3.16 adalah rancangan Halaman C/V, keterangan komponen yang terdapat pada halaman C/V dapat dilihat pada tabel 3.8
Tabel 3.8 Komponen-Komponen pada Halaman C/V
No Jenis Komponen Keterangan
1. TombolPlay(Button) Digunakan untuk memutar video 2. Tombol Back (Button) Tombol yang akan mengembalikan ke
halaman Homepage
3. Video Component Video yang ingin ditampilkan
4. Tombol Batang Rumput (Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Batang
Rumput
5. Tombol Batang Basah (Button) Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Batang Basah 6. Tombol Kesimpulan (Button) Tombol yang akan menampilkan halaman
kesimpulan dari perbedaan objek 7. Tombol Back(Button) Tombol yang akan mengembalikan ke
halaman Homepage
Back
3
Universitas Sumatera Utara
3.5.7. Rancangan Halaman Daun
Halaman Daun nantinya akan menampilkan 5 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan. Tampilan rancangan pada halaman Daun dapat dilihat pada gambar 3.17
Gambar 3.17 Rancangan Halaman Daun
Keterangan komponen yang terdapat pada halaman Daun dapat dilihat pada tabel 3.9 Tabel 3.9 Komponen-Komponen pada Halaman Daun
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Tombol Daun Melengkung (Button)
Tombol yang akan menampilkan halaman Objek Daun Melengkung 3. Tombol Daun Menjari (Button) Tombol yang akan menampilkan
halaman Objek Daun Menjari 4. Tombol Daun Menyirip (Button) Tombol yang akan menampilkan
halaman Objek Daun Menyirip 5. Tombol Daun Sejajar (Button) Tombol yang akan menampilkan
halaman Objek Daun Sejajar pada Marker
6. Tombol Back(Button) Tombol yang akan mengembalikan ke halaman Homepage
2 3 4 5
6
Universitas Sumatera Utara
3.5.8. Rancangan Halaman Objek Daun
Halaman Akar nantinya akan menampilkan 6 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan, serta ada tombol kesimpulan yang akan menampikan halaman kesimpulan materi. Tampilan rancangan pada halaman Objek Daun dapat dilihat pada gambar 3.18
Gambar 3.18 Rancangan Halaman Objek Daun
Keterangan komponen yang terdapat pada halaman Objek Daun dapat dilihat pada tabel 3.10
Tabel 3.10 Komponen-Komponen pada Halaman Objek Daun
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Objek 3D (Mesh dan Texture) Objek 3D yang tampil sesuai dengan objek yang dipilih (Automatic Rotate) 3. Tombol Daun Melengkung
(Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Daun
Melengkung
4. Tombol Daun Menjari (Button) Tombol yang akan menampilkan memicu smartphone untuk menampilkan Objek
3D Daun Menjari
5. Tombol Daun Menyirip (Button) Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Daun
Menyirip
Universitas Sumatera Utara
6. Tombol Daun Sejajar (Button) Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Daun
Sejajar
7. Tombol Kesimpulan (Button) Tombol yang akan menampilkan halaman kesimpulan dari perbedaan kedua objek 7. Tombol Back(Button) Tombol yang akan mengembalikan ke
halaman Homepage
3.5.9. Rancangan Halaman Bunga
Halaman Bunga nantinya akan menampilkan 5 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan. Tampilan rancangan pada halaman Bunga dapat dilihat pada gambar 3.19
Gambar 3.19 Rancangan Halaman Bunga
keterangan komponen yang terdapat pada halaman Bunga dapat dilihat pada tabel 3.11 Tabel 3.11 Komponen-Komponen pada Halaman Bunga
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Tombol Bunga Sempurna (Button)
Tombol yang akan menampilkan halaman Objek Bunga Sempurna
2 3 4 5 6
Universitas Sumatera Utara
3. Tombol Bunga Jantan (Button) Tombol yang akan menampilkan halaman Objek Bunga Jantan
4. Tombol Bunga Betina (Button) Tombol yang akan menampilkan halaman Objek Bunga Betina
5. Tombol Bunga Hemafrodit (Button)
Tombol yang akan menampilkan halaman Objek Bunga Hemafrodit
6. Tombol Back(Button) Tombol yang akan mengembalikan ke halaman Homepage
3.5.10. Rancangan Halaman Objek Bunga
Halaman Akar nantinya akan menampilkan 6 tombol, dimana masing - masing tombol mewakili objek yang akan ditampilkan, juga ada tombol kesimpulan untuk menampilkan halaman kesimpulan. Tampilan rancangan pada halaman Bunga dapat dilihat pada gambar 3.20
Gambar 3.20 Rancangan Halaman Objek Bunga
keterangan komponen yang terdapat pada halaman Objek Bunga dapat dilihat pada tabel 3.12
Tabel 3.12 Komponen-Komponen pada Halaman Objek Bunga
No Jenis Komponen Keterangan
1. Nama Halaman (Text) Judul Halaman
2. Objek 3D (Mesh dan Texture) Objek 3D yang tampil sesuai dengan objek yang dipilih (Automatic Rotate)
Universitas Sumatera Utara
3. Tombol Bunga Sempurna (Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3DBunga Sempurna 4. Tombol Bunga Jantan (Button) Tombol yang akan memicu smartphone untuk
menampilkan Objek 3D Bunga Jantan 5. Tombol Bunga Betina (Button) Tombol yang akan memicu smartphone untuk
menampilkan Objek 3D Bunga Betina 6. Tombol Bunga Hemafrodit
(Button)
Tombol yang akan memicu smartphone untuk menampilkan Objek 3D Bunga Hemafrodit 7. Tombol Kesimpulan (Button) Tombol yang akan menampilkan halaman
kesimpulan dari perbedaan kedua objek 8. Tombol Back(Button) Tombol yang akan mengembalikan ke
halaman Homepage