BAB III ANALISA DAN PEMBAHASAN

Transkripsi

1 18 BAB III ANALISA DAN PEMBAHASAN Pada bab ini akan dibahas bagaimana merancang dan membangun sebuah website mengenai hewan-hewan langka yang ada di Indonesia. Hewan langka merupakan hewan yang sudah jarang ditemukan, dan keberadaannya hanya terdapat di tempat-tempat tertentu. Hewan langka adalah hewan yang hampir terancam punah dan hewan langka merupakan hewan yang dilindungi. Untuk lebih mengenal hewan-hewan langka yang ada di Indonesia, maka penulis membuat website ini untuk mempermudah mencari informasi hewan-hewan langka yang ada di Indonesia. Dalam pembuatan website, penulis lebih banyak bekerja dengan menggunakan aplikasi Macromedia Dreamweaver MX. Macromedia Dreamweaver merupakan program aplikasi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam membangun atau membuat sebuah halaman web. Dalam pembahasan masalah ini akan dibagi menjadi beberapa bagian. Bagian pertama akan menjelaskan mengenai struktur navigasi dari website, kedua menjelaskan mengenai rancangan tampilan halaman web, dan ketiga menjelaskan mengenai proses pembuatan halaman web. 3.1 Struktur Navigasi Struktur navigasi adalah sebuah alur cerita program, yang bertujuan untuk menggambarkan keseluruhan halaman web. Struktur navigasi bertujuan untuk mempermudah user memahami alur cerita program. Struktur navigasi yang digunakan dalam website ini adalah struktur navigasi campuran (composite). Pembuatan peta navigasi web akan sangat membantu nantinya ketika akan membuat rancangan seluruh halaman web.

2 19 Gambar 3.1 Struktur Navigasi 3.2 Storyboard Storyboard merupakan gambaran dan penjelasan secara rinci dari tiap gambar dan juga text. Storyboard merupakan langkah yang harus dibuat setelah mendefinisikan elemen-elemen kedalam objek-objek. Bagian-bagian tampilan dalam storyboard akan disatukan oleh peta penjejakan selama proses mendesign tampilan web tersebut. Tampilan dalam storyboard dilakukan secara berurutan.tiap layer diberi penjalasan spesifikasi tentang apa saja yang ditampilkan pada layer tersebut.

3 20 Rancangan storyboard harus disesuaikan dengan struktur navigasi yang telah dibuat, sehingga design menjadi terarah Rancangan Storyboard Home.htm Home.htm adalah halaman depan dari semua halaman yang ada pada website. Halaman ini juga disebut sebagai halaman pembuka, karena pada saat pertama website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lainnya. Halaman ini juga merupakan main atau home dari halaman-halaman web lainnya yang berada pada link home.htm tersebut. Gambar 3.2 Storyboard Home.htm Rancangan Storyboard Burung.htm Rancangan halaman burung merupakan halaman yang memasukkan jenisjenis burung yang berupa link untuk pindah kehalaman berikutnya, seperti halaman burung alap-alap.htm, burung madu.htm, burung maleo.htm, burung merak.htm, burung cendrawasih.htm, burung dara mahkota.htm, burung jalak putih.htm, dan burung jalak bali.htm yang dilengkapi dengan keterangan dan gambar mengenai burung-burung tersebut.

4 21 Gambar 3.3 Storyboard Burung.htm 1. Rancangan Storyboard Burung alap alap.htm Rancangan halaman burung alapalap dilengkapi dengan keterangan dan gambar mengenai burung alapalap. Gambar 3.4 Storyboard Burung alapalap.htm

5 22 2. Rancangan Storyboard Burung Madu.htm Rancangan halaman burung madu dilengkapi dengan keterangan dan gambar mengenai burung madu. Gambar 3.5 Storyboard Burung Madu.htm 3. Rancangan Storyboard Burung Maleo.htm Rancangan halaman burung maleo dilengkapi dengan keterangan dan gambar mengenai burung maleo. Gambar 3.6 Storyboard Burung Maleo.htm

6 23 4. Rancangan Storyboard Burung Merak.htm Rancangan halaman burung merak dilengkapi dengan keterangan dan gambar mengenai burung merak. Gambar 3.7 Storyboard Burung Merak.htm 5. Rancangan Storyboard Burung Cendrawasih.htm Rancangan halaman burung cendrawasih dilengkapi dengan keterangan dan gambar mengenai burung cendrawasih. Gambar 3.12 Storyboard burung cendrawasih.htm Gambar 3.8 Storyboard Burung Cendrawasih.htm

7 Rancangan Storyboard Burung Dara Mahkota.htm Rancangan halaman burung dara mahkota dilengkapi dengan keterangan dan gambar mengenai burung dara mahkota. Gambar 3.9 Storyboard Burung Dara Mahkota.htm 7. Rancangan Storyboard Burung Jalak Bali.htm Rancangan halaman burung jalak bali dilengkapi dengan keterangan dan gambar mengenai burung jalak bali. Gambar 3.10 Storyboard Burung Jalak Bali.htm

8 25 8. Rancangan Storyboard Burung Jalak Putih.htm Rancangan halaman burung jalak putih dilengkapi dengan keterangan dan gambar mengenai burung jalak putih. Gambar 3.17 Storyboard Burung Jalak Putih.htm Gambar 3.11 Storyboard Burung Jalak Putih.htm Rancangan Storyboard Anoa.htm Rancangan halaman anoa dilengkapi dengan keterangan dan gambar mengenai anoa. Gambar 3.12 Storyboard Anoa.htm

9 Rancangan Storyboard Babi Rusa.htm Rancangan halaman babi rusa dilengkapi dengan keterangan dan gambar mengenai babi rusa. Gambar 3.13 Storyboard Babi Rusa.htm Rancangan Storyboard Badak.htm Rancangan halaman badak merupakan halaman yang memasukkan jenisjenis badak yang berupa link untuk pindah kehalaman berikutnya, seperti halaman badak jawa.htm dan badak sumatra.htm yang dilengkapi dengan keterangan dan gambar mengenai badak tersebut. Gambar 3.14 Storyboard Badak.htm

10 27 1. Rancangan Storyboard Badak Jawa.htm Rancangan halaman badak jawa dilengkapi dengan keterangan dan gambar mengenai badak jawa. Gambar 3.15 Storyboard Badak Jawa.htm 2. Rancangan Storyboard Badak Sumatra.htm Rancangan halaman badak sumatra dilengkapi dengan keterangan dan gambar mengenai badak sumatra. Gambar 3.16 Storyboard Badak Sumatra.htm

11 Rancangan Storyboard Banteng.htm Rancangan halaman banteng dilengkapi dengan keterangan dan gambar mengenai banteng. Gambar 3.17 Storyboard Banteng.htm Rancangan Storyboard Gajah Sumatra.htm Rancangan halaman gajah sumatra dilengkapi dengan keterangan dan gambar mengenai gajah sumatra. Gambar 3.18 Storyboard Gajah Sumatra.htm

12 Rancangan Storyboard Harimau Sumatra.htm Rancangan halaman harimau sumatra dilengkapi dengan keterangan dan gambar mengenai harimau sumatra Gambar 3.19 Storyboard Harimau Sumatra.htm Rancangan Storyboard Kijang.htm Rancangan halaman kijang dilengkapi dengan keterangan dan gambar mengenai kijang. Gambar 3.20 Storyboard Kijang.htm

13 Rancangan Storyboard Kobra.htm Rancangan halaman kobra dilengkapi dengan keterangan dan gambar mengenai kobra. Gambar 3.21 Storyboard Kobra.htm Rancangan Storyboard Komodo.htm Rancangan halaman komodo dilengkapi dengan keterangan dan gambar mengenai komodo. Gambar 3.22 Storyboard Komodo.htm

14 Rancangan Storyboard Macan Tutul.htm Rancangan halaman macan tutul dilengkapi dengan keterangan dan gambar mengenai macan tutul. Gambar 3.23 Storyboard Macan Tutul.htm Rancangan Storyboard Orang Utan.htm Rancangan halaman orang utan dilengkapi dengan keterangan dan gambar mengenai orang utan. Gambar 3.24 Storyboard Orang Utan.htm

15 Rancangan Storyboard Siamang.htm Rancangan halaman siamang dilengkapi dengan keterangan dan gambar mengenai siamang. Gambar 3.25 Storyboard Siamang.htm Rancangan Storyboard Tapir.htm Rancangan halaman tapir dilengkapi dengan keterangan dan gambar mengenai tapir. Gambar 3.25 Storyboard Device Status.htm Gambar 3.26 Storyboard Tapir.htm

16 Pembuatan Program Aplikasi Web Setelah perangkat lunak dan perangkat keras serta rancangan storyboard yang telah dibuat sudah dipersiapkan, maka siap untuk memulai pembuatan aplikasi web Membuka Macromedia Dreamweaver MX Perangkat lunak yang dipakai adalah Macromedia Dreamweaver MX, lakukan langkah berikut ini untuk membukanya : a. Klik Start >> All Programs >> Macromedia >> Macromedia Dreamweaver MX. b. Atau dengan mengklik ikon Macromedia Dreamweaver MX yang ada di Dekstop. Gambar 3.27 Membuka Macromedia Dreamweaver MX Proses Pembuatan Halaman Website Setelah Dreamweaver MX tampil dan persiapan awal telah dilaksanakan dengan baik, maka telah siap untuk memulai dan membuat sebuah aplikasi website tentang Perawatan Ponsel Nokia dengan menggunakan Macromedia

17 34 Dreamweaver MX. Berikut ini cara-cara yang dapat dilakukan untuk membuat website ini : 1. Membuat Root Folder Semua halaman yang terdapat dalam sebuah website akan diletakkan pada root folder, yang mana nantinya akan mempermudah untuk memanajemen website. Root folder bisa juga disebut kepala dari anggota badan-badan atau subfolder. Jadi root folder mengepalai semua kumpulan folder beserta isinya. Ada beberapa langkah yang harus dilakukan untuk menciptakan root folder dengan Macromedia Dreamweaver MX, antara lain : 1. Pada toolbar Klik Site >> New Site. Setelah itu anda akan berada dikotak dialog Site Definition. 2. Pada kotak Site Name ketik nama deskripsi dari website yang akan dibuat, setelah itu klik Next. 3. Pada Local Root Folder, pilih folder yang telah dibuat tadi dengan mengklik ikon folder, kemudian di browse dan pilih folder anda, setelah itu Select. 4. Kemudian klik tombol Done. Gambar 3.28 Membuat Site Baru

18 35 2. Membuat Design Halaman Website Semua halaman web yang penulis buat di design dengan tabel, memasukkan gambar dan memasukkan text pada setiap halaman website. Langkah-langkah pembuatan design halaman website ini sebagai berikut : 1. Design dengan Tabel Pada saat pertama kali kita bekerja dengan Dreamweaver MX, kita akan berada pada standar view. Untuk membuat tabel pada standar view, kita bisa menggunakan perintah Insert Table. Dreamweaver akan membuat tabel sesuai option yang kita masukkan. Masukkan nilai di Inset Table, Rows 3, Column 1, Cell Padding 0, Cell Spacing 0, lalu pada Width kita ubah menjadi Percent, Border 0, kemudian tekan OK. Gambar 3.29 Kotak Dialog Insert Table 2. Memasukkan Gambar Siapkan gambar sebelum dimasukkan, gambar yang berformat.jpg dan.gif yang kita akan pakai. Lalu ikuti cara berikut ini : 1. Pada toolbar klik Insert >> Image lalu cari gambar yang kita telah siapkan. 2. Setelah selesai klik OK lalu secara otomatis akan muncul kotak dialog untuk menyimpan gambar didalam root folder, klik OK dan tentukan letak paenyimpanan, kemudian OK.

19 36 Gambar 3.30 Memasukkan Gambar 3. Membuat Text Untuk memasukkan text pada Dreamweaver kita bisa merubah Font, Align, Bold, dan sebagainya di Menu Bar, Text pilih apa yang ingin diubah. 4. Membuat Link dengan Hyperlink dan Flash Button 1. Untuk membuat Hyperlink lakukan langkah-langkah berikut ini: Pada Insert Bar klik ikon Hyperlink Gambar 3.31 Hyperlink

20 37 2. Untuk membuat Flash Button lakukan langkah-langkah berikut ini: 1. Pada toolbar klik Insert. 2. Pilih Interactive Image >> Flash Button untuk membuka kotak dialog Insert Flash Text. Gambar 3.32 Flash Button Tampilan Design Halaman Website 1. Home.htm Halaman home adalah halaman depan dari semua halaman yang ada pada website. Halaman ini juga disebut sebagai halaman pembuka, karena pada saat pertama website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lainnya. Halaman ini juga merupakan main atau home dari halaman-halaman web lainnya yang berada pada link home.htm tersebut

21 38 Gambar 3.33 Tampilan Home.htm 2. Rancangan Storyboard Burung.htm Rancangan halaman burung merupakan halaman yang memasukkan jenis-jenis burung yang berupa link untuk pindah kehalaman berikutnya, seperti halaman burung alap-alap.htm, burung madu.htm, burung maleo.htm, burung merak.htm, burung cendrawasih.htm, burung dara mahkota.htm, burung jalak putih.htm, dan burung jalak bali.htm yang dilengkapi dengan keterangan dan gambar mengenai burung-burung tersebut. Gambar 3.34 Tampilan Burung.htm

22 Burung Alap Alap.htm Halaman burung alap alap dilengkapi dengan keterangan dan gambar mengenai burung alap alap. Gambar 3.35 Tampilan Burung Alap Alap.htm 2.2 Burung Madu.htm Halaman burung madu dilengkapi dengan keterangan dan gambar mengenai burung madu. Gambar 3.36 Tampilan Burung Madu.htm

23 Burung Maleo.htm Halaman burung maleo dilengkapi dengan keterangan dan gambar mengenai burung maleo. Gambar 3.37 Tampilan Burung Maleo.htm 2.4 Burung Merak.htm Halaman burung merak dilengkapi dengan keterangan dan gambar mengenai burung merak. Gambar 3.38 Tampilan Burung Merak.htm

24 Burung Cendrawasih.htm Halaman burung cendrawasih dilengkapi dengan keterangan dan gambar mengenai burung cendrawasih. Gambar 3.39 Tampilan Burung Cendrawasih.htm 2.6 Burung Dara Mahkota.htm Halaman burung dara mahkota dilengkapi dengan keterangan dan gambar mengenai burung dara mahkota. Gambar 3.40 Tampilan Burung Dara Mahkota.htm

25 Burung Jalak Bali.htm Halaman burung jalak bali dilengkapi dengan keterangan dan gambar mengenai burung jalak bali. Gambar 3.41 Tampilan Burung Jalak Bali.htm 2.8 Burung Jalak Putih.htm Halaman burung jalak putih dilengkapi dengan keterangan dan gambar mengenai burung jalak putih. Gambar 3.42 Tampilan Burung Jalak Putih.htm

26 43 3. Anoa.htm Halaman anoa dilengkapi dengan keterangan dan gambar mengenai anoa. Gambar 3.43 Tampilan Anoa.htm 4. Babi Rusa.htm Halaman babi rusa dilengkapi dengan keterangan dan gambar mengenai babi rusa. Gambar 3.44 Tampilan Babi Rusa.htm

27 44 5. Rancangan Storyboard Badak.htm Rancangan halaman badak merupakan halaman yang memasukkan jenis-jenis badak yang berupa link untuk pindah kehalaman berikutnya, seperti halaman badak jawa.htm dan badak sumatra.htm yang dilengkapi dengan keterangan dan gambar mengenai badak tersebut. Gambar 3.45 Tampilan Badak.htm 5.1 Badak Jawa.htm Halaman badak jawa dilengkapi dengan keterangan dan gambar mengenai badak jawa. Gambar 3.46 Tampilan Badak Jawa.htm

28 Badak Sumatra.htm Halaman badak sumatra dilengkapi dengan keterangan dan gambar mengenai badak sumatra. Gambar 3.47 Tampilan Badak Sumatra.htm 6. Banteng.htm Halaman banteng dilengkapi dengan keterangan dan gambar mengenai banteng. Gambar 3.48 Tampilan Banteng.htm

29 46 7. Gajah Sumatra.htm Halaman gajah sumatra dilengkapi dengan keterangan dan gambar mengenai gajah sumatra. Gambar 3.49 Tampilan Gajah Sumatra.htm 8. Harimau Sumatra.htm Halaman harimau sumatra dilengkapi dengan keterangan dan gambar mengenai harimau sumatra. Gambar 3.50 Tampilan Harimau Sumatra.htm

30 47 9. Kijang.htm Halaman kijang dilengkapi dengan keterangan dan gambar mengenai kijang. Gambar 3.51 Tampilan Kijang.htm 10. Kobra.htm Halaman kobra dilengkapi dengan keterangan dan gambar mengenai kobra. Gambar 3.52 Tampilan Kobra.htm

31 Komodo.htm Halaman komodo dilengkapi dengan keterangan dan gambar mengenai komodo. Gambar 3.53 Tampilan Komodo.htm 12. Macan Tutul.htm Halaman macan tutul dilengkapi dengan keterangan dan gambar mengenai macan tutul. Gambar 3.54 Tampilan Macan Tutul.htm

32 Orang Utan.htm Halaman orang utan dilengkapi dengan keterangan dan gambar mengenai orang utan. Gambar 3.55 Tampilan Orang Utan.htm 14. Siamang.htm Halaman siamang dilengkapi dengan keterangan dan gambar mengenai siamang. Gambar 3.56 Tampilan Siamang.htm

33 Tapir.htm Halaman tapir dilengkapi dengan keterangan dan gambar mengenai tapir. Gambar 3.57 Tampilan Tapir.htm 3.4 Uji coba dan Implementasi Setelah selesai dalam pembuatan web, kini waktunya dilakukan uji coba dan implementasi. Dimana aplikasi harus di Upload. Penulis mengupload web ini di Geocities, geocities adalah aplikasi yang disediakan oleh Yahoo untuk mengupload web-web. Langkah-langkah mengupload halaman web ke situs 1. Buka browser 2. Pada address bar, ketik 3. Akan muncul tampilan seperti berikut :

34 51 Gambar 3.58 Halaman Geocities 4. Klik link Sign In, akan muncul tampilan sebagai berikut : Gambar 3.59 Halaman Sign In 5. Pada kotak Yahoo! ID, masukka nama account yahoo! anda 6. Pada kotak Password, masukkan password account yahoo! Anda 7. Tekan tombol Sign In, jika nama account dan password benar akan muncul tampilan seperti berikut :

35 52 Gambar 3.60 Geocities Control Panel 8. Klik link Manage dan akan muncul tampilan sebagai berikut : Gambar 3.61 Tampilan Manage

36 53 9. Klik link Easy Upload dan akan muncul tampilan seperti berikut : Gambar 3.62 Tampilan Easy Upload 10. Klik tombol Browse untuk memilih file yang ingin di upload Gambar 3.63 File Upload 11. Jika file yang ingin di upload sudah ditentukan, tekan tombol open 12. Tekan tombol Upload File.

37 Konfigurasi Komputer Spesifikasi yang digunakan penulis dalam membuat program aplikasi web ini adalah sebagai berikut: Perangkat Keras ( Hardware ) A. Processor Intel Pentium IV. B. Random Access Memory (RAM) 256 MB. C. VGA Card On Board 64 MB Perangkat Lunak ( Software ) A. Perangkat lunak Macromedia Dreamweaver MX. B. Browser Internet Explorer C. Operating System Windows XP.