BAB IV HASIL DAN PEMBAHASAN
4.2. Fase Perancangan
4.2.3. Perancangan Antarmuka
Merancang antarmuka merupakan bagian yang paling penting dari merancang sebuah aplikasi. Biasanya hal tersebut juga merupakan bagian yang paling sulit, karena dalam merancang antarmuka harus memenuhi tiga persyaratan, yaitu: sebuah antarmuka harus sederhana namun menarik, sebuah antarmuka harus lengkap, dan sebuah antarmuka harus memilki kinerja yang cepat.
Perancangan antarmuka atau tampilan ini sangat diperlukan guna mengetahui seperti apakah bentuk tampilan yang akan digunakan pada aplikasi ini. Aplikasi dengan tampilan yang menarik dan user friendly tentunya akan memberikan nilai tambah pada aplikasi itu sendiri.
Antarmuka di sistem operasi Windows 8 sendiri sudah dikenal dengan nama Windows 8 User Interface dimana antarmuka yang digunakan berbentuk tiles-tiles atau kotak-kotak bergaya metro. Oleh karena itu penulis menyesuaikan antarmuka aplikasi ini dengan sistem operasi Windows 8 sehingga aplikasi ini dibuat dengan bergaya metro.
Rancangan tampilan dari aplikasi ini meliputi tampilan dari beberapa halaman. Beberapa halaman tersebut penulis uraikan sebagai berikut.
4.2.3.1. Halaman Pembuka
Halaman pembuka ini menggunakan splash screen dimana splash screen ini merupakan halaman yang akan ditampilkan pertama kali pada saat aplikasi ini dijalankan.
Pada halaman ini akan ditampilkan sebuah logo dan nama dari aplikasi. Splash screen ini berfungsi sebagai halaman tunggu pada saat aplikasi ini me-load
komponen-komponen yang diperlukan aplikasi ini sehingga bisa berjalan seperti yang diinginkan.
4.2.3.2. Halaman Menu Utama
Halaman menu utama merupakan halaman yang akan muncul setelah halaman pembuka/splash screen muncul. Setelah aplikasi selesai me-load komponen-komponennya maka aplikasi akan langsung menuju ke menu utama aplikasi ini. Menu utama dari aplikasi sistem periodik unsur ini terdiri dari beberapa menu pilihan lanjutan, yaitu : Tabel Periodik, Unsur Numerik, Unsur Alfabetis, Searching/Pencarian, Hidrokarbon dan About.
Menu utama ini merupakan gerbang utama dari aplikasi
Gambar 4. 4 Rancangan Tampilan Halaman Pembuka
sistem periodik unsur ini untuk menuju ke sub-sub menu yang berisi fitur-fitur lanjutan dari aplikasi ini.
4.2.3.3. Halaman Menu Tabel Periodik
Halaman menu tabel periodik merupakan halaman yang akan muncul jika pengguna memilih menu tabel periodik. Pada halaman ini akan berisi tabel periodik unsur kimia yang bentuknya seperti telah dijelaskan pada bab 2 yaitu gambar 2.1 yang terdiri dari beberapa golongan dan periode. Unsur-unsur yang ada pada tabel periodik ini merupakan sub-menu dari menu tabel periodik yang bisa dipilih pengguna untuk mengetahui keterangan dan penjelasan informasi mengenai unsur
Gambar 4. 5 Rancangan Tampilan Halaman Menu Utama
yang dipilih. Selain itu juga terdapat tombol kembali yang akan mengantarkan pengguna menuju ke menu utama.
4.2.3.4. Halaman Keterangan Unsur
Halaman keterangan unsur merupakan halaman yang berisi penjelasan dan keterangan informasi mengenai unsur yang dipilih pada halaman menu tabel periodik. Keterangan unsur dari halaman ini berupa logo unsur, nomor unsur, radius atom, volume atom, massa atom, gambar unsur, deskripsi unsur, dan sebagainya yang berkaitan dengan unsur yang dipilih. Selain itu juga terdapat tombol kembali ke halaman menu tabel periodik unsur agar pengguna bisa memilih unsur lagi yang ingin diketahui informasinya lebih lanjut.
Gambar 4. 6 Rancangan Tampilan Halaman Menu Tabel Periodik
4.2.3.5. Halaman Unsur Numerik
Halaman unsur numerik merupakan halaman yang akan muncul ketika pengguna memilih menu unsur numerik. Halaman ini berisi daftar semua unsur-unsur yang disusun berdasarkan nomor atom unsur-unsur tersebut. Karena banyaknya data dari unsur-unsur yang ada maka dibutuhkan indexing agar pengguna mudah mencari unsur yang ingin diketahui informasinya. Oleh karena itu pada menu unsur numerik inilah terdapat daftar semua unsur yang disusun berdasarkan nomor atomnya sehingga jika pengguna hanya mengetahui nomor atom dari sebuah unsur maka pengguna bisa menggunakan menu ini saja untuk mengetahui informasi mengenai
Gambar 4. 7 Rancangan Tampilan Halaman Keterangan Unsur
unsur tersebut. Pada menu ini daftar semua unsur berada pada bagian kanan halaman sedangkan informasi mengenai unsur yang dipilih berada pada bagian kiri.
4.2.3.6. Halaman Unsur Alfabetis
Halaman unsur alfabetis merupakan halaman yang akan muncul ketika pengguna memilih menu unsur alfabetis. Halaman ini berisi daftar semua unsur-unsur yang disusun alfabetis berdasarkan nama unsur-unsur tersebut. Karena banyaknya data dari unsur-unsur yang ada maka dibutuhkan indexing agar pengguna mudah mencari unsur yang ingin diketahui informasinya. Oleh karena itu pada menu unsur alfabetis inilah terdapat daftar
Gambar 4. 8 Rancangan Tampilan Halaman Unsur Numerik
semua unsur yang disusun alfabetis berdasarkan nama unsur sehingga jika pengguna hanya nama dari sebuah unsur maka pengguna bisa menggunakan menu ini saja untuk mengetahui informasi mengenai unsur tersebut.
Pada menu ini daftar semua unsur berada pada bagian kanan halaman sedangkan informasi mengenai unsur yang dipilih berada pada bagian kiri.
4.2.3.7. Halaman Hasil Pencarian
Halaman hasil pencarian merupakan halaman yang muncul ketika pengguna melakukan pencarian. Halaman ini menampilkan semua hasil pencarian terhadap unsur yang ingin diketahui informasinya. Karena banyaknya data dari unsur-unsur yang ada maka dibutuhkan menu
Gambar 4. 9 Rancangan Tampilan Halaman Unsur Alfabetis
pencarian agar pengguna mudah mencari unsur yang ingin diketahui informasinya. Pada sistem operasi Windows 8 sendiri, sistem pencarian pada sebuah aplikasi dilakukan terpusat atau dengan kata lain pada Windows 8 sudah ada sistem pencarian sendiri. Jadi penulis tinggal menggunakan menu pencarian tersebut dan hasilnya ditampilkan pada halaman hasil pencarian. Dari hasil pencarian jika hasil pencariannya ditemukan maka pengguna hanya tinggal memilih hasil pencarian tersebut dan pengguna langsung diarahkan ke halaman keterangan unsur yang dipilih.
Gambar 4. 10 Rancangan Tampilan Halaman Hasil Pencarian
4.2.3.8. Halaman Menu Hidrokarbon
Halaman menu hidrokarbon merupakan halaman yang akan muncul jika pengguna memilih menu hidrokarbon pada menu utama. Pada menu ini terdapat tombol atom Karbon dan Hidrogen yang bisa diklik pengguna untuk menambahkan atom C dan H. Terdapat juga tombol untuk menambahkan satu atom karbon dan hidrogen, mengurangkan satu atom karbon dan hidrogen, tombol clear semua atom karbon dan hidrogen, dan tombol submit sehingga pengguna bisa mengetahui senyawa hidrokarbon apa yang akan terbentuk dari beberapa atom C dan H yang sudah dimasukkan jumlahnya tersebut.
Gambar 4. 11 Rancangan Tampilan Halaman Menu Hidrokarbon
4.2.3.9. Halaman Hasil dan Keterangan Hidrokarbon
Halaman hasil dan keterangan hidrokarbon merupakan halaman yang muncul setelah pengguna menggunakan fitur halaman menu hidrokarbon. Pada saat pengguna sudah memasukkan jumlah atom karbon dan atom hidrogen yang dibutuhkan kemudian men-submit-nya maka pengguna akan diarahkan ke halaman ini untuk melihat hasil dan informasi mengenai senyawa hidrokarbon yang terbentuk. Informasi yang ditampilkan pada halaman ini berupa nama senyawa hidrokarbon, rumus senyawa, gambar ikatan hidrokarbon, gambar ikatan Lewis, titik didih dan titik lebur, serta massa atom relatif dari senyawa hidrokarbon yang terbentuk.
Gambar 4. 12 Rancangan Tampilan Halaman Hasil dan Keterangan Hidrokarbon
4.2.3.10. Halaman About
Halaman about merupakan halaman yang muncul setelah pengguna memilih menu about pada halaman utama. Pada halaman ini berisi informasi mengenai aplikasi sistem periodik unsur ini. Keterangan informasi yang terdapat pada halaman ini berupa logo aplikasi, nama aplikasi, kegunaan aplikasi, kontak pembuat, dan daftar pustaka atau referensi serta daftar gambar terhadap informasi dari konten yang ada pada aplikasi ini.
Gambar 4. 13 Rancangan Tampilan Halaman About