BAB III ANALISA DAN PEMBAHASAN

22

BAB III ANALISA DAN PEMBAHASAN Pada bab ini akan dibahas bagaimana merancang dan membangun sebuah website mengenai Museum Nasional. Dalam pembuatan web ini lebih banyak bekerja dengan aplikasi Macromedia Dreamweaver MX ditambah dengan aplikasi lain seperti Swishmax dan Flash 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 Web Struktur navigasi web digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi dalam web tersebut. Struktur navigasi web adalah Peta navigasi campuran (composite). Melalui peta navigasi web, terlihat bagaimana isi dan susunan dari sebuah web secara menyeluruh. Sebenarnya dengan membuat peta navigasi, sama fungsinya dengan menggunakan flowchart, yaitu memberikan petunjuk kepada user sehingga user juga bisa menjadikan peta navigasi ini sebagai pedoman dalam mencari informasi yang ada dalam web. Pembuatan peta navigasi web akan sangat membantu nantinya ketika akan membuat rancangan seluruh halaman web. Peta navigasi web yang baik adalah mampu memberikan informasi kepada pengunjung tentang lokasi mereka sekarang dan lokasi-lokasi yang bisa mereka kunjungi dari lokasi mereka sekarang.

23

Pada program web ini, penulis menggunakan fasilitas frame, sehingga pada setiap halamannya terdapat banyak link yang sama juga praktisnya apabila ingin melihat suatu halaman tertentu tanpa harus ke halaman utama dahulu.

Home

Koleksi

Sejarah

Event

Galeri

Bronze Koleksi lain Ceramic Rumah adat Ethnography

Thai Room Historical relic Museum shop Numistik heraldik

Gedung baru Geograpic Waktu dan tiket Prehistory Stone textile

Gambar 3.1 Struktur Menu

About

24

3.2 Rancangan Halaman Web Untuk tahap awal pembuatan aplikasi ini digunakan Macromedia Dreamweaver MX dengan membuat rancangan output untuk aplikasi yang akan dibuat nantinya. Perancangan output ini sendiri diperlukan untuk mempermudah dalam mengambil langkah apa yang akan dibuat dalam menyelesaikan program ini nantinya. Rancangan yang akan dibuat terdiri dari halaman home.htm, halaman koleksi.htm, halaman sejarah.htm, halaman galeri.htm, halaman about.htm.

3.2.1

Rancangan Halaman home (index.htm)

Rancangan halaman home adalah halaman awal dari program web ini. Berisikan link-link ke halaman yang ingin dituju. Halaman ini juga halaman pembuka, karena pada saat pertama website dibuka maka halaman inilah yang tampil sebelum halaman yang lainnya.

Gambar

Link Link Link Link Link Link

Animasi

Gambar

Text Link Text Link

Animasi

Gambar 3.2. Rancangan halaman home.htm

25

3.2.2

Rancangan Halaman Koleksi (koleksi.htm)

Rancangan halaman koleksi berisikan link dari koleksi yang ada di museum . Gambar


Animasi

Animasi

Gambar Link

Gambar

Gambar Link

Gambar Link

Gambar Link

Gambar Link

Gambar Link

Gambar Link

Gambar Link

Gambar Link

Gambar 3.3. Rancangan halaman koleksi.htm 3.2.2.1 Rancangan halaman koleksi Bronze Berisikan koleksi museum berupa patung pada zaman perunggu. Gambar


Animasi

Gambar

Text

Link

Link

Link

Animasi

Gambar 3.4. Rancangan halaman bronze1.htm

Link

26

Gambar

Animasi


Gambar

Gambar

text

Link Animasi


Gambar


Animasi

Gambar

text

Gambar

Link Animasi


27

Gambar


Animasi

Gambar

Gambar

text

Link Animasi

Gambar 3.7. Rancangan halaman bronze4.htm 3.2.2.2 Rancangan halaman koleksi Ceramic Pada halaman ini kita dapat mengetahui koleksi dari benda-benda keramik yang di temukan dari berbagai Negara.

Gambar


Animasi

Gambar

Text

Link Link

Link Link

Animasi

Gambar 3.8. Rancangan halaman keramik1.htm

Link

28

Gambar


Animasi

Gambar

Gambar

text

Link

Animasi


Gambar


Animasi

Gambar

text

Gambar

Link Animasi


29

Gambar


Animasi

Gambar

Gambar

text

Link

Animasi


Gambar


Animasi

Animasi

Gambar

Text

Gambar

Gambar

Gambar

Gambar

Link


30

Gambar


Animasi

Gambar

Text

Gambar

Gambar

Gambar

Link

Animasi

Gambar 3.13. Rancangan halaman keramik6.htm 3.2.2.3 Rancangan halaman koleksi Ethnograpic Disini kita dapat melihat koleksi benda yang di gunakan oleh masyarakat dalam kehidupan sehari-hari meliputi variasi kehidupan sebagai exhibit yang digunakan di ceremonies dan upacara agama.

Gambar


Animasi

Gambar

Text

Link

Link

Animasi

Gambar 3.14. Rancangan halaman ethno1.htm

Link

31

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi


Gambar


Animasi

Gambar

Text

Gambar

Link Animasi


32

Gambar


Animasi

Gambar

Gambar

Text

Link Animasi


3.2.2.4 Rancangan halaman koleksi Geograpic Disini kita dapat melihat peta wilayah di Indonesia pada abad 17 sampai 19 seperti peta Batavia dan Kalimantan.

Gambar


Animasi

Gambar

Text

Link

Link

Animasi

Gambar 3.18. Rancangan halaman geog1.htm

Link

33

Gambar


Animasi

Gambar

Gambar

Text

Link Animasi


Gambar


Animasi

Gambar

Text

Gambar

Link Animasi


34

Gambar


Animasi

Gambar

Gambar

Text

Link Animasi


3.2.2.5 Rancangan halaman koleksi Historical Di sini kita dapat melihat koleksi benda yang menggambarkan sejarah Indonesia diantara abad 16 dan 19.

Gambar


Animasi

Gambar

Text

Link

Link

Animasi

Gambar 3.22. Rancangan halaman histori1.htm

Link

35

Gambar


Animasi

Gambar

Gambar

Text

Link Animasi


Gambar


Animasi

Gambar

Text

Gambar

Link Animasi

Gambar 3.24 Rancangan halaman histori3.htm

36

Gambar


Animasi

Gambar

Text

Gambar

Gambar

Gambar

Gambar

Gambar

Link

Animasi


3.2.2.6

Rancangan halaman koleksi Numismatic Disini kita dapat melihat koleksi mata uang baik dalam negeri maupun luar negeri.

Gambar


Animasi

Gambar

Text

Link

Link

Animasi

Gambar 3.26. Rancangan halaman koin1.htm

Link

37

Gambar


Animasi

Gambar

Gambar

Text

Link Animasi


Gambar


Animasi

Gambar

Text

Gambar

Link Animasi


38

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi


3.2.2.7

Rancangan halaman koleksi Prehistory Di halaman ini kita dapat melihat koleksi benda-benda yang di gunakan manusia pada zaman prasejarah.

Gambar


Animasi

Gambar

Text

Link

Link

Animasi

Gambar 3.30. Rancangan halaman prehistori1.htm

Link

39

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi

Gambar 3.31 Rancangan halaman prehistori2.htm

Gambar

Link Link Link Link Link Link Animasi

Animasi

Gambar

Text

Gambar

Link

Gambar 3.32. Rancangan halaman prehistori3.htm

40

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi

Gambar 3.33. Rancangan halaman prehistori4.htm 3.2.2.8

Rancangan halaman koleksi Stone Di halaman ini kita dapat melihat koleksi yang terbaik yang ada di dalam museum ini. Koleksi ini meliputi benda sejarah yang meliputi patung dewa Budha dan Hindu, prasasti dan arca.

Gambar


Animasi

Gambar

Text

Link

Link

Link

Animasi

Gambar 3.34. Rancangan halaman stone1.htm

Link

41

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi


Gambar


Animasi

Gambar

Text

Gambar

Link


42

Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi


Gambar


Animasi

Gambar

Gambar

Text

Link

Animasi

Gambar 3.38. Rancangan halaman stone5.htm 3.2.2.9

Rancangan halaman koleksi Textile Disini kita dapat mengetahui dan melihat hasil tenun dan batik yang di buat oleh masyarakat Indonesia. Hasil tenun dan batik digunakan untuk kegiatan keagamaan, perkawinan dan penguburan.

43

Gambar


Animasi

Gambar

Text

Link

Link

Link

Animasi

Gambar 3.39. Rancangan halaman tekstil1.htm

Gambar


Animasi

Gambar

Gambar

Text

Link


44

Gambar

Animasi


Gambar

Text

Gambar

Link

Animasi


Gambar

Animasi


Gambar

Gambar

Text

Link

Animasi

Gambar 3.42. Rancangan halaman tekstil4.htm 3.2.3

Rancangan Halaman Sejarah Di halaman ini kita dapat mengetahui sejarah museum ini. Disini kita juga dapat mengetahui jumalah koleksi dari museum ini dan benda yang tersimpan di museum.

45

Gambar


Animasi

Gambar

Gambar Text

Animasi

Gambar 3.43. Rancangan halaman sejarah.htm 3.2.4

Rancangan Halaman Galeri(galeri.htm) Rancangan halaman galeri berisikan link ke halaman galeri koleksi lain, rumah adat, thai room, museum shop, gedung baru dan waktu.

Gambar


Animasi

Gambar


Animasi

Gambar 3.44. Rancangan halaman galeri.htm

46

Gambar


Animasi

Gambar

Gambar

Link

Animasi

Gambar 3.45. Rancangan halaman koleksilain.htm

Gambar


Animasi

Gambar

Gambar

Gambar

Gambar

Gambar

Link

Gambar 3.46. Rancangan halaman rumahadat.htm

47

Gambar


Animasi

Gambar

Text

Gambar

Animasi

Gambar

Gambar

Link

Gambar 3.47. Rancangan halaman thairoom.htm

Gambar


Animasi

Gambar

Text Gambar

Gambar

Gambar

Gambar

Gambar

Gambar

Link

Gambar 3.48. Rancangan halaman museumshop.htm

48

Gambar


Animasi

Gambar

Text

Link

Animasi

Gambar 3.49. Rancangan halaman gedungbaru.htm

Gambar


Animasi

Animasi

Gambar

Text Gambar

Gambar

Gambar

Gambar

Gambar

Gambar

Link

Gambar 3.50. Rancangan halaman gedungbaru2.htm

49

Gambar


Animasi

Gambar

Animasi

Gambar

Gambar

Gambar

Gambar

Gambar

Gambar

Animasi Link

Gambar 3.51. Rancangan halaman waktu.htm 3.2.5

Rancangan Halaman Event (event.htm) Rancangan halaman ini berisikan pameran yang diadakan di museum.

Gambar


Animasi

Gambar

Text

Link

Gambar 3.52. Rancangan halaman event.htm

50

3.2.6

Rancangan Halaman About Us (about.htm) Rancangan halaman about berisikan biodata penulis.

Gambar Link Link Link Link Link Link

Animasi

Gambar

Gambar

Text

Text Text Link

Animasi

Gambar 3.53. Rancangan halaman about.htm

3.3 Proses Pembuatan Program Aplikasi Web Sebelum memulai membuat program aplikasi web, ada baiknya kita menginstal software Macromedia Dreamweaver MX terlebih dahulu.

3.3.1

Memulai Macromedia Dreamweaver MX

Setelah instalasi maka anda langsung dapat menggunakanya. Ada beberapa cara untuk memulai menggunakan software ini, yaitu : A. Dengan menggunakan Start Menu, yaitu Start >> Programs >> Macromedia >> Macromedia Dreamweaver MX. ( Lihat gambar 3.37 ) B. Atau dengan mengklik ikon Dreamweaver MX yang ada di Desktop.

51

Gambar 3.54. Memulai Macromedia Dreamweaver MX

3.3.2

Proses Pembuatan Halaman Website

Setelah memasuki software Dreamweaver MX dan semua persiapan awal untuk membuat website telah dilaksanakan dengan baik, maka berarti kita telah siap untuk memulai dan membuat sebuah aplikasi website pelayaran dengan menggunakan Macromedia Dreamweaver MX. 3.3.2.1 Membuat Folder Untuk membuat suatu halaman web baru, sebaiknya kita membuat folder khusus untuk menyimpan semua file-file dari sebuah website. Adapun langkah-langkahnya sebagai berikut : A. Buka Windows Explorer B. Kliklah drive C, pada Harddisk C. Tekan menu File >> New >> Folder atau Klik kanan pada drive c lalu New >> Folder ( Lihat Gambar 3.55.)

52

Gambar 3.55. Membuat Folder baru D. Jika prosedur pembuatan folder beanar,maka akan keluar folder dengan nama NewFolder, ganti dengan nama TA

Gambar 3.56. Folder baru

3.3.2.2 Membuat Root Folder Semua halaman yang terdapat dalam sebuah website akan diletakan pada root folder, yang mana nantinya akan mempermudah untuk memanajemen website. Ada beberapa langkah yang harus dilakukan untuk menciptakan root folder dengan Macromedia Dreamweaver MX, antara lain : A. Tekan Menu Site pada Menu Bar lalu New Site. Pada Site Definition beri nama penulisan kemudian Next.

53

B. Pada Local Root Folder yang telah dibuat tadi mengklik ikon folder, kemudian di browse dan klik folder Aroel, setelah itu select. C. Kemudian klik tombol OK.

Gambar 3.57 Membuat Root Site

3.3.2.3 Membuat Halaman Website Semua Halaman web yang penulis buat melaui proses membuat animasi gambar dan text, desain dengan tabel, memasukan gambar, membuat text, dan memasukan lagu pada setiap halaman website. 1. Membuat Animasi di Swishmax Buka terlebih dahulu software Swishmax dengan cara Start >> Programs >> Swishmax >> Swishmax. Lalu pada Swishmax akan muncul Kotak Dialog what do you want to do? Klik Start a new empty movie. Buat untuk Animasi gambar dengan 800 * 600 pixel dan 1000 * 200 pixel buat animasi text.

54

Gambar 3.58. Kotak Dialog what do you want to do?

2. Desain dengan Tabel Pada saat pertama kali kita bekerja dengan Dreamweaver MX, kita akan berada pada Standart view. Untuk membuat tabel pada standart view, kita bisa menggunakan perintah Insert Table. Dreamweaver akan membuat tabel sesuai option yang kita pilih. Pilih pada Insert Table, Rows 1, Column 1, Cell Padding 1, Cell Spacing 1, lalu pada Width kita ubah menjadi Percent, Border 0, kemudian tekan OK.

Gambar 3.59. Kotak Dialog Insert Table

55

3. Mengambil dan Memasukan Gambar Gambar diambil menggunakan camera handphone yang disimpan didalam memori handphone. Disini memori yang dipakai adalah memori eksternal. Sebelum dipindahkan ke komputer, gambar yang ada didalam memori dipindahkan menggunakan alat yang disebut card reader dan gambar kita simpan di folder C:\Documents and Settings\Documents\My Pictures dengan format jpg atau gif. Cara memasukan gambar pada halaman website : a. pada Insert Bar, tekan Image lalu cari gambar yang kita inginkan seperti logo.jpg . b. Lalu tekan OK . ( lihat gambar 3.60. )

Gambar 3.60. Memasukan Gambar

4. Membuat Text Untuk membuat text pada Dreamweaver kita bisa merubah Font, Align, Bold dan sebagainya di Menu Bar, Text pilih apa yang ingin kita ubah.

56

5. Halaman Website home.htm merupakan halaman utama yang tampil di dalam website ini, karena penulis menggunakan frame maka pada setiap halaman akan muncul frame tersebut, sehingga user tidak harus kembali ke halaman awal untuk menjelajahi website ini. koleksi.htm merupakan halaman mengenai koleksi yang ada di museum dan terdapat link yang akan menuju ke link koleksi museum. Sejarah.htm berisikan sejarah museum. Galeri.htm menuju beberapa link didalamnya seperti rumah adat dan museum shop. Event.htm merupakan link yang berisi tentang event yang diadakan di museum. About.htm berisikan biodata penulis dan tujuan penulis membuat website ini.

Gambar 3.61. Desain home.htm

57

Gambar 3.62. Desain koleksi.htm

Gambar 3.63. Desain bronze.htm

58

Gambar 3.64. Desain keramik.htm

Gambar3.65. Desain ethno.htm

59

Gambar 3.66. Desain geog.htm

Gambar 3.67. Desain histori.htm

60

Gambar 3.68. Desain stone.htm

Gambar 3.69. Desain tekstil.htm

61

Gambar 3.70. Desain sejarah.htm

Gambar 3.71. Desain galeri.htm

62

Gambar 3.72. Desain koleksilain.htm

Gambar 3.73. Desain rumahadat.htm

63

Gambar 3.74. Desain thairoom.htm

Gambar 3.75. Desain museumshop.htm

64

Gambar 3.76. Desain gedungbaru.htm

Gambar 3.77. Desain waktu.htm

65

Gambar 3.78. Desain about.htm

3.3.2.4 Membuat Frame Kita bisa membuat banyak tampilan frame menggunakan Dreamweaver. Dalam membuat frame ada beberapa cara yaitu : A. Letakkan pointer pada dokumen. B. Buka dokumen baru dengan cara: a. Pada Menu Bar, klik File >> New. b. Pada kotak dialog New Document, pilih Framesets category. c. Pilih frameset fixed top, nested left d. Klik Create. ( lihat gambar 3.79. )

66

Gambar 3.79. Memilih jenis frame

3.3.2.5 Menyimpan Dokumen Setelah membuat frame, secara otomatis Dreamweaver akan membuat halaman web sebanyak frame yang kita buat ditambah satu halaman frameset. Simpan semua file tersebut. A. Klik File >> Save All. B. Kotak Save muncul beberapa kali sesuai jumlah frame ditambah satu frame file frameset. Simpan semua file sebagai file yang terpisah. C. Pada frame atas diberi nama atas.htm, frame samping diberi nama menu.htm, pada frame utama diberi nama utama.htm. sedangkan pada frameset diberi nama home.htm ( lihat gambar 3.80.)

67

Gambar 3.80. Menyimpan Dokumen

3.3.3

Langkah Upload Web ke Internet Disini saya menggunakan situs http://geocities.yahoo.com/

1. Buka browser 2. Pada address bar, ketik http://geocities.yahoo.com/ 3. Maka akan muncul tampilan seperti ini :

Gambar 3.81. Tampilan Geocities

68

4. Klik sign in maka akan muncul tampilan seperti ini :

Gambar 3.82. Tampilan Sign In

5. Pada kotak Yahoo! ID, masukkan nama account yahoo! kita. 6. Pada kotak Password, masukkan password account yahoo! kita. 7. Tekan tombol sign in, jika nama account dan passwordbenar maka akan muncul tampilan seperti ini :

Gambar 3.83. Tampilan Control Panel Geocities

69

8. Klik link Manage dan akan muncul tampilan seperti ini :

Gambar 3.84. Tampilan Manage Geocities

9. Klik link Easy Upload dan akan muncul tampilan seperti ini :

Gambar 3.85. Tampilan Easy Upload

70

10. Klik tombol Browse untuk memilih file yang mau di upload. 11. Jika sudah ditentukan file yang akan di upload, tekan tombol open. 12. Tekan tombol Upload Files.

3.3.4

Konfigurasi Komputer Spesifikasi yang digunakan penulis dalam membuat program aplikasi web ini

adalah sebagai berikut: 3.3.4.1 Perangkat Keras ( Hardware ) A. Processor Intel Pentium IV. B. Random Access Memory (RAM) 256 MB. C. VGA Card On Board 64 MB. D. Resolution Monitoring 1024*768 Pixel. E. CD-ROM. 3.3.4.2 Perangkat Lunak ( Software ) A. Perangkat lunak Macromedia Dreamweaver MX. B. Browser Internet Explorer C. Operating System Windows XP.

BAB III ANALISA DAN PEMBAHASAN

Recommend Documents