BAB III ANALISA DAN PEMBAHASAN

Transkripsi

1 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.

2 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 Galeri Event About Bronze Ceramic Ethnography Historical relic Numistik heraldik Geograpic Prehistory Koleksi lain Rumah adat Thai Room Museum shop Gedung baru Waktu dan tiket Stone textile 3.1 Struktur Menu

3 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 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 Rancangan halaman home.htm

4 Rancangan Halaman Koleksi (koleksi.htm) Rancangan halaman koleksi berisikan link dari koleksi yang ada di museum Rancangan halaman koleksi.htm Rancangan halaman koleksi Bronze Berisikan koleksi museum berupa patung pada zaman perunggu Rancangan halaman bronze1.htm

5 26 text 3.5. Rancangan halaman bronze2.htm text 3.6. Rancangan halaman bronze3.htm

6 27 text 3.7. Rancangan halaman bronze4.htm Rancangan halaman koleksi Ceramic Pada halaman ini kita dapat mengetahui koleksi dari benda-benda keramik yang di temukan dari berbagai Negara Rancangan halaman keramik1.htm

7 28 text 3.9. Rancangan halaman keramik2.htm text Rancangan halaman keramik3.htm

8 29 text Rancangan halaman keramik4.htm Rancangan halaman keramik5.htm

9 Rancangan halaman keramik6.htm 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 Rancangan halaman ethno1.htm

10 Rancangan halaman ethno2.htm Rancangan halaman ethno3.htm

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

12 Rancangan halaman geog2.htm Rancangan halaman geog3.htm

13 Rancangan halaman geog4.htm Rancangan halaman koleksi Historical Di sini kita dapat melihat koleksi benda yang menggambarkan sejarah Indonesia diantara abad 16 dan Rancangan halaman histori1.htm

14 Rancangan halaman histori2.htm 3.24 Rancangan halaman histori3.htm

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

16 Rancangan halaman koin2.htm Rancangan halaman koin3.htm

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

18 Rancangan halaman prehistori2.htm Rancangan halaman prehistori3.htm

19 Rancangan halaman prehistori4.htm 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 Rancangan halaman stone1.htm

20 Rancangan halaman stone2.htm Rancangan halaman stone3.htm

21 Rancangan halaman stone4.htm Rancangan halaman stone5.htm Rancangan halaman koleksi ile 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.

22 Rancangan halaman tekstil1.htm Rancangan halaman tekstil2.htm

23 Rancangan halaman tekstil3.htm Rancangan halaman tekstil4.htm 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.

24 Rancangan halaman sejarah.htm 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 Rancangan halaman galeri.htm

25 Rancangan halaman koleksilain.htm Rancangan halaman rumahadat.htm

26 Rancangan halaman thairoom.htm Rancangan halaman museumshop.htm

27 Rancangan halaman gedungbaru.htm Rancangan halaman gedungbaru2.htm

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

29 Rancangan Halaman About Us (about.htm) Rancangan halaman about berisikan biodata penulis 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 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.

30 Memulai Macromedia Dreamweaver MX 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 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 3.55.)

31 Membuat Folder baru D. Jika prosedur pembuatan folder beanar,maka akan keluar folder dengan nama NewFolder, ganti dengan nama TA Folder baru 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.

32 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 Membuat Root Site 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 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 gambar dengan 800 * 600 pixel dan 1000 * 200 pixel buat animasi text.

33 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 Kotak Dialog Insert Table

34 55 3. Mengambil dan Memasukan 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 ) Memasukan 4. Membuat Untuk membuat text pada Dreamweaver kita bisa merubah Font, Align, Bold dan sebagainya di Menu Bar, pilih apa yang ingin kita ubah.

35 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 Desain home.htm

36 Desain koleksi.htm Desain bronze.htm

37 Desain keramik.htm Desain ethno.htm

38 Desain geog.htm Desain histori.htm

39 Desain stone.htm Desain tekstil.htm

40 Desain sejarah.htm Desain galeri.htm

41 Desain koleksilain.htm Desain rumahadat.htm

42 Desain thairoom.htm Desain museumshop.htm

43 Desain gedungbaru.htm Desain waktu.htm

44 Desain about.htm 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 )

45 Memilih jenis frame 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.)

46 Menyimpan Dokumen Langkah Upload Web ke Internet Disini saya menggunakan situs 1. Buka browser 2. Pada address bar, ketik 3. Maka akan muncul tampilan seperti ini : Tampilan Geocities

47 68 4. Klik sign in maka akan muncul tampilan seperti ini : 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 : Tampilan Control Panel Geocities

48 69 8. Klik link Manage dan akan muncul tampilan seperti ini : Tampilan Manage Geocities 9. Klik link Easy Upload dan akan muncul tampilan seperti ini : Tampilan Easy Upload

49 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 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. D. Resolution Monitoring 1024*768 Pixel. E. CD-ROM Perangkat Lunak ( Software ) A. Perangkat lunak Macromedia Dreamweaver MX. B. Browser Internet Explorer C. Operating System Windows XP.