Peracanngan antarmuka sistem ANALISIS DAN PERANCANGAN

3.4. Peracanngan antarmuka sistem

Antarmuka dirancang untuk mempermudah gambaran-gambaran tampilan aplikasi dan rancangan untuk membantu dalam mendesain tampilan program. Antarmuka merupakan tampilan program yang akan digunakan oleh pengguna untuk dapat berkomunikasi dengan sistem. Berikut struktur menu-menu yang akan dirancang pada aplikasi rancangan routing pada jaringan komputer. A. Home Gambar 3.6. Rancangan Halaman Home Gambar 3.6. adalah halaman yang akan tampil pada saat pertama kali membuka aplikasi. Pada halaman ini pengguna akan diperlihatkan halaman yang berisi tampilan background jaringan, pilihan menu panduan dan menu file yang terdiri dari new desain jaringan dan open file. Berikut adalah rincian elemen dari halaman home: 1. Kanvas 2. Background 3. Menu File | Panduan New Desain Jaringan Open File Background 1 2 3 Universitas Sumatera Utara B. Halaman new desain jaringan Gambar 3.7. Rancangan halaman new desain jaringan Gambar 3.7. adalah halaman untuk membuat rancangan jaringan baru. Halaman ini akan tampil ketika pengguna menekan tombol menu new desain jaringan. Pada halaman ini pengguna akan diperlihatkan sebuah tampilan yang berisi field-field yang terdiri dari field blok IP address, field jumlah host untuk setiap jaringan, field untuk menghubungkan router ke router dan terakhir field untuk menghubungkan jaringan ke router. Pada bagian field jaringan, aplikasi akan menampilkan beberapa field berdasarkan jumlah jaringan yang sudah diinputkan, dibagian hubungan router dengan jaringan juga demikian, aplikasi akan menampilkan field berdasarkan jumlah unit router yang digunakan. Berikut adalah rincian elemen dari halaman new desain jaringan: 1. Halaman konten 2. Field range IP address 3. Field Hubungan Router ke Router 4. Field Hubungan Jaringan host ke Router 5. Field Jumlah host tiap jaringan host 23 Range IP Jumlah host per jaringan Router Jaringan Router Router Ke Generate IP 1 2 3 4 5 Universitas Sumatera Utara C. Halaman open file Gambar 3.8. Rancangan halaman open file Gambar 3.8. adalah halaman open file, halaman ini muncul ketika pengguna menekan tombol open file, ketika tombol tersebut ditekan maka tampilan berupa form akan muncul yang berisi direktori penyimpanan Hardisk, selanjutnya user memilih file yang sudah disimpan dan membukanya dengan menekan tombol Open yang terdapat pada halaman. Maka secara otomatis aplikasi akan membaca file dan membuka file tersebut. Berikut adalah rincian elemen dari halaman open file : 1. Konten Halaman 2. Direktori isi file 3. Tombol button untuk membuka D. Halaman panduan Gambar 3.9. Rancangan halaman panduan OPEN 1 2 3 Halaman ini berisi tentang aplikasi dan bagaimana cara menggunakan aplikasi ini CLOSE 1 2 Universitas Sumatera Utara Gambar 3.9. adalah halaman panduan, halaman ini muncul ketika pengguna menekan tombol panduan. Di dalam halaman panduan ini terdapat tulisan yang menceritakan tentang aplikasi dan bagaimana cara menggunakan aplikasi tersebut. Berikut adalah rincian elemen dari halaman panduan : 1. Halaman konten 2. Tombol button untuk menutup halaman E. Halaman save file Gambar 3.10. Rancangan halaman save file Gambar 3.10. adalah halaman save file, halaman ini muncul ketika pengguna menekan tombol save file yang berada dihalaman skema jaringan, ketika tombol tersebut ditekan maka tampilan form akan muncul yang berisi direktori penyimpanan Hardisk, selanjutnya userpengguna memilih tempat untuk menyimpan file skema jaringan, selanjutya dengan menekan tombol save yang berada pada halaman tersebut maka secara otomatis aplikasi akan menulis file baru ke dalam Hardisk dan menyimpan file tersebut. Berikut adalah rincian elemen dari halaman save file : 1. Halaman konten 2. Direktori isi file 3. Tombol button untuk menyimpan SAVE 1 2 3 Universitas Sumatera Utara F. Halaman edit hubungan router ke router Gambar 3.11. Rancangan halaman edit hubungan router ke router Gambar 3.11. adalah halaman edit hubungan router, halaman ini muncul ketika pengguna menekan tombol edit hubungan router yang berada dihalaman skema jaringan. Halaman ini akan memunculkan field-field router yang terhubung. Pada halaman tersebut pengguna dapat merubah hubungan router yang diinginkan untuk setiap router dan juga dapat menambahkan field hubungan router dengan menekan tombol tambah field dan ketika selesai melakukan pengeditan hubungan router, terakhir pengguna menekan tombol selesai. Berikut adalah rincian elemen dari halaman edit hubungan router ke router : 1. Halaman konten 2. Field Hubungan router ke router 3. Tombol button untuk menyatakan perubahan isi data aplikasi Editing Hubungan Router Router Router SELESAI 1 2 3 Universitas Sumatera Utara G. Halaman edit hubungan jaringan ke router Gambar 3.12. Rancangan halaman edit hubungan jaringan ke router Gambar 3.12. adalah halaman edit hubungan jaringan ke router, halaman ini muncul ketika pengguna menekan tombol edit hubungan jaringan ke router yang berada dihalaman skema jaringan. Halaman ini akan menampilkan field-field router dan jaringan yang terhubung ke router tersebut. Pada halaman tersebut pengguna dapat menghubungkan jaringan baru ke router, apabila jaringan sudah ditambahkan sebelumnya, jika belum ditambah maka aplikasi tidak akan menampilkan field-field baru dan akan memunculkan pesan “tambahkan jaringan”. Dalam halaman ini pengguna tidak dapat menghapus field tetapi dapat merubah isi field, ketika selesai melakukan pengeditan hubungan jaringan ke router, terakhir pengguna menekan tombol selesai. Berikut adalah rincian elemen dari halaman edit hubungan jaringan ke router : 1. Halaman konten 2. Field Router 3. Field jaringan host 4. Tombol button untuk menyatakan perubahan isi data aplikasi Editing Hubungan Host Ke Router Router Jaringan Host SELESAI 1 2 3 4 Universitas Sumatera Utara H. Halaman tambah jaringan Gambar 3.13. Ranacangan halaman tambah jaringan Gambar 3.13. adalah halaman tambah jaringan, halaman ini akan tampil ketika pengguna menekan tombol tambah jaringan yang berada dihalaman skema jaringan. Halaman ini akan menampilkan form yang berisi field label untuk jaringan, jumlah host yang ingin digunakan, dan menghubungkan jaringan baru tersebut ke sebuah router dengan cara mengisi label router yang sudah ada. Ketika selesai melakukan pengisian field, terakhir pengguna menekan tombol selesai. Berikut adalah rincian elemen dari halaman tambah jaringan : 1. Halaman konten 2. Field label jaringan berupa angka 3. Field jumlah host yang diinginkan dan field hubungan jaringan ke router 4. Tombol button untuk menyatakan perubahan isi data aplikasi Tambah Jaringan Host Jaringan ke SELESAI 1 2 3 4 Jumlah Host Terhubung ke router Universitas Sumatera Utara I. Halaman delete perangkat Gambar 3.14. Rancangan halaman delete perangkat Gambar 3.14. adalah halaman delete perangakat, halaman ini berfungsi untuk menghapus perangkat yang berada di dalam skema jaringan. Melalui halaman ini userpengguna dapat menghapus jaringan dan juga dapat menghapus router. Berikut adalah rincian elemen dari halaman delete perangkat : 1. Halaman konten 2. Field pilihan perangkat yang ingin dihapus. Label perangkat yang ingn dihapus berupa angka 3. Tombol button untuk menyatakan perubahan isi data aplikasi J. Halaman save image Gambar 3.15. Rancangan halaman save image Gambar 3.15. adalah halaman save image, halaman ini berfungsi untuk melakukan penyimpanan file yang berupa gambar, yaitu hasil skema jaringan yang Delete Perangkat jaringan SELESAI PIlih Perangkat Jaringan atau router 1 2 3 SAVE IMAGE 1 2 3 Universitas Sumatera Utara sudah dibangun dapat disimpan menjadi format image yang berekstensi JPG. Berikut adalah rincian elemen dari halaman save image : 1. Halaman konten 2. Direktori isi file 3. Tombol button untuk menyimpan K. Halaman tambah router Gambar 3.16. Halaman tambah router Gambar 3.16. adalah halaman tambah router, halaman ini berfungsi untuk melakukan penambahan unit router ke dalam skema jaringan. Ketika selesai melakukan pengisian field, terakhir pengguna menekan tombol tambah. Berikut adalah rincian elemen dari halaman tambah router : 1. Halaman konten 2. Field label router yang berisi angka 3. Tombol tambah router. Unit router ke Tambah 1 2 3 Universitas Sumatera Utara

BAB IV IMPLEMENTASI DAN PENGUJUAN SISTEM