BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB III ANALISA DAN PEMBAHASAN MASALAH

Pada bab ini akan dibahas bagaimana merancang dan membuat Web budi daya anggrek dengan menggunakan macromedia dreamweaver mx. Pembahasan ini akan dibagi menjadi beberapa bagian. Bagian pertama akan menjelaskan struktur navigasi Web budi daya anggrek, kedua menjelaskan rancangan web, dan ketiga menjelaskan pembuatan web hingga publikasi web ke Internet.

3.1.

Struktur Navigasi Web Budi Daya Anggrek Struktur navigasi memegang peranan penting demi tercapainya tujuan dari

suatu Web site. Dengan adanya struktur navigasi yang baik dan mudah dipahami atau dimengerti oleh para pemakai, maka mereka dapat menelusuri Web site tersebut dengan nyaman. Di dalam penulisan ilmiah ini penulis menggunakan struktur navigasi hirarki. Struktur ini merupakan struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada layar. Adapun lebih jelasnya dapat dilihat pada bagan struktur navigasi dibawah ini:

Index

Home

Anggrek

Memilih

Menanam

Gallery

Merawat

Gambar 3.1 Struktur navigasi web

17

About_me

18

3.2.

Rancangan Web Rancangan merupakan tahapan yang harus dilakukan untuk memulai

mengakses berbagai macam informasi pada suatu Web. Pada tahapan rancangan ini terdiri dari halaman yang saling berhubungan dalam pembentukan Web. Untuk lebih jelasnya penulis akan menerangkan rancangan tersebut satu per satu. Dalam rancangan tampilan ini, halaman index adalah halaman yang merupakan tampilan awal yang akan muncul pada saat Web diakses.

3.2.1. Rancangan Halaman Index Halaman index adalah halaman depan dari semua halaman web yang ada pada Web budi daya anggrek. Halaman ini disebut juga sebagai halaman pembuka, karena pada saat Web dibuka, maka halaman ini akan tampil sebelum halaman lainnya. Pada halaman ini terdapat empat button navigasi yaitu di atas dan di sebelah kiri. Button di atas dan di sebelah kiri halaman tujuannya sama.

Gambar 3.2 Rancangan halaman Index

Penjelasan: 

Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak



Judul = Teks “Budi Daya Anggrek”



Image = Gambar bunga anggrek



Button Home = Button untuk menuju ke halaman Index

19



Button Anggrek = Button untuk menuju ke halaman Anggrek



Button Gallery = Button untuk menuju ke halaman Gallery



Button About Me = Button untuk menuju ke halaman About Me



Teks = Teks “Selamat Datang” dengan menggunakan kode marquee






Teks2 = Penjelasan singkat tentang tanaman anggrek



Copyright = Nama pembuat Web Budi Daya Anggrek

3.2.2. Rancangan Halaman Anggrek Dalam halaman ini berisi tentang budi daya anggrek seperti memilih tanaman anggrek, cara menanam anggrek dan merawat anggrek yang semua itu akan ditampilkan melalui tiga buah button.

Animasi Image

Judul Home

Anggrek

Image Gallery

About Me

Teks

Image2

Memilih Menanam

Teks2

Merawat

Copyright

Gambar 3.3 Rancangan Halaman Anggrek

Penjelasan: 














20









Teks = Teks nama halaman yang sedang dibuka



Button Memilih = Button untuk menuju ke halaman Memilih



Button Menanam = Button untuk menuju ke halaman Menanam



Button Merawat = Button untuk menuju ke halaman Merawat



Image2 = Gambar bunga anggrek



Teks2 = Penjelasan singkat tentang button-button yang ada disebelah kiri




3.2.3. Rancangan Halaman Memilih Dalam halaman ini berisi tentang memilih tanaman anggrek dan sebuah button untuk kembali ke halaman anggrek.

Gambar 3.4 Rancangan halaman memilih

Penjelasan: 











21



Teks = Teks penjelasan tentang memilih tanaman anggrek




3.2.4. Rancangan Halaman Menanam Dalam halaman ini berisi tentang cara menanam anggrek dan sebuah button untuk kembali ke halaman anggrek.

Gambar 3.5 Rancangan halaman menanam

Penjelasan: 













Teks = Teks penjelasan tentang cara menanam anggrek




22

3.2.5. Rancangan Halaman Merawat Dalam halaman ini berisi tentang merawat anggrek dan sebuah button untuk kembali ke halaman anggrek.

Gambar 3.6 Rancangan halaman merawat

Penjelasan: 













Teks = Teks penjelasan tentang merawat anggrek




23

3.2.6. Rancangan Halaman Gallery Dalam halaman ini berisi sembilan gambar jenis anggrek berikut dengan nama-namanya.

Gambar 3.7 Rancangan halaman gallery

Penjelasan: 

























Image1 s/d Image9 = Gambar bunga anggrek



Teks1 s/d Teks9 = Nama jenis bunga anggrek yang ada di gambar




24

3.2.7. Rancangan Halaman About_me Dalam halaman ini berisi tentang profil penulis sebagai pembuat dari Web budi daya anggrek.

Gambar 3.8 Rancangan halaman about_me

Penjelasan: 

























Teks2 = Teks tentang profil pembuat Web budi daya anggrek




25

3.3.

Pembuatan Web Dalam Dreamweaver kita perlu melakukan definisi Web menggunakan

kotak dialog Site Definition. Anda perlu mengisinya untuk menentukan Web yang ingin dibuat. Ada dua pilihan dalam pendefinisian ini, yaitu Basic atau Advanced. Pilihan Basic akan memberi kemudahan dalam menyiapkan Web, langkah demi langkah. Berikut ini prosedur mengatur pilihan pada versi Basic dari kotak dialog: 1. Pilih Site > New Site pada menu Site atau Site panel. Jika kotak dialog menampilkan tab Advanced, pilih Basic. 2. Halaman pertama dari Site Definition Wizard meminta Anda mengisikan nama untuk Web yang akan dibuat. Pada kotak teks, masukkan nama untuk mengidentifikasi situs dalam Dreamweaver. 3. Klik Next untuk melangkah ke langkah selanjutnya. Tampilan dari wizard berikutnya tampak, mengajukan pertanyaan apakah Anda ingin bekerja dengan teknologi server. 4. Pilih No untuk menentukan bahwa Web yang akan dibuat adalah Web statis, tanpa memiliki halaman dinamis. 5. Klik Next untuk melanjutkan ke langkah selanjutnya. Tampilan wizard berikutnya akan tampak dan menanyakan bagaimana Anda bekerja dengan file-file. 6. Pilih pilihan ”Edit local copies on my machine, then upload to server when ready (recommended)”. 7. Kotak teks akan mengizinkan Anda untuk menentukan folder di dalam harddisk di mana Dreamweaver akan menyimpan file-file Web lokal. Klik Next untuk melanjutkan ke langkah berikutnya. 8. Anda akan ditanya bagaimana Anda terhubung ke remote server. Pilihlah None karena untuk sementara Anda tidak melakukan upload ke remote server. 9. Klik Next untuk melanjutkan. Anda akan melihat ringkasan dari setting yang telah Anda buat. Klik Done untuk menyelesaikan definisi Web.

26

3.3.1. Pembuatan Halaman Index Langkah-langkah dalam pembuatan halaman index sebagai berikut: 1. Buat sebuah dokumen html baru, kemudian buat sebuah tabel dengan banyak baris 3 dan kolom 3. 2. Di baris 1; kolom 1 masukkan gambar animasi. Setelah itu beri judul pada kolom 2. Di kolom ke-3 masukkan gambar bunga anggrek. 3. Dibaris 2; jadikan 3 kolom menjadi hanya 1 kolom dengan cara merge. Setelah itu masukkan gambar ukiran garis pada kolom tersebut. 4. Dibaris 3; lakukan langkah ke-3. Setelah itu letakkan pointer di sebelah kanan kemudian buat flash button sebanyak 4 buah masing-masing diberi nama “Home”, “Anggrek”, “Gallery”, “About Me”. 5. Buat sebuah tabel dengan banyak baris 1 dan kolom 1, kemudian tuliskan teks “Selamat Datang” dengan disisipkan kode marquee. 6. Buat sebuah tabel lagi dengan banyak baris 4 dan kolom 1. 7. Di baris 1, 2, 3, 4; ikuti langkah ke-4 tetapi pointer ada di sebelah kiri. 8. Buat 2 buah layer sebagai tempat peletakkan gambar dan teks penjelasan singkat tentang anggrek. 9. Buat sebuah tabel dengan banyak baris 2 dan kolom 1. 10. Di baris pertama, masukkan gambar ukiran garis, sedangkan dibaris kedua tuliskan teks “Copyright by ®Nuria Delina”.

3.3.2. Pembuatan Halaman Anggrek Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 4 pada halaman index. 2. Buat sebuah tabel dengan banyak baris 1 dan kolom 1, kemudian tuliskan teks “Anggrek” sebagai informasi tentang nama halaman yang dibuka. 3. Buat sebuah tabel dengan banyak baris 3 dan kolom 1. 4. Di tiap barisnya buatlah flash button dengan masing-masing diberi nama “Memilih”, “Menanam”, “Merawat”. Setelah itu atur lebar tabel sesuai dengan ukuran flash button. 5. Buat 2 buah layer sebagai tempat peletakkan gambar dan teks singkat

27

tentang keterangan memilih, menanam, dan merawat. 6. Ikuti langkah 9 dan 10 pada halaman index.

3.3.3. Pembuatan Halaman Memilih Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 4 pada halaman index, tetapi hanya 1flash button dengan nama “Anggrek”. 2. Letakkan pointer di luar tabel, kemudian ketikkan teks tentang penjelasan memilih tanaman anggrek. 3. Ikuti langkah 9 dan 10 pada halaman index.

3.3.4. Pembuatan Halaman Menanam Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 3 pada halaman memilih, tetapi untuk langkah yang ke-2 ketikkan teks tentang penjelasan cara menanam anggrek.

3.3.5. Pembuatan Halaman Merawat Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 3 pada halaman memilih, tetapi untuk langkah yang ke-2 ketikkan teks tentang penjelasan merawat anggrek.

3.3.6. Pembuatan Halaman Gallery Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 4 pada halaman index. 2. Buat sebuah tabel dengan banyak baris 1 dan kolom 1, kemudian tuliskan teks “Gallery” sebagai informasi tentang nama halaman yang dibuka. 3. Buat sebuah tabel dengan banyak baris 6 dan kolom 3. 4. Masukkan gambar pada baris ke-1, ke-3, ke-5 kolom ke-1, ke-2, dan ke-3. 5. Ketikkan teks tentang nama jenis anggrek yang ada di gambar pada baris ke-2, ke-4, ke-6 kolom ke-1, ke-2, dan ke-3. 6. Ikuti langkah 9 dan 10 pada halaman index.

28

3.3.7. Pembuatan Halaman About_me Langkah-langkah dalam pembuatan halaman anggrek sebagai berikut: 1. Ikuti langkah 1 sampai 4 pada halaman index. 2. Buat sebuah tabel dengan banyak baris 1 dan kolom 1, kemudian tuliskan teks “About Me” sebagai informasi tentang nama halaman yang dibuka. 3. Buat sebuah tabel dengan banyak baris 1 dan kolom 1, kemudian ketikkan teks tentang profil pembuat Web. 4. Ikuti langkah 9 dan 10 pada halaman index.

3.4.

Publikasi Di Internet Langkah awal yang dilakukan adalah terlebih dahulu on-line dengan

search engine pada alamat www.geocities.com. Di dalam search engine geocities ada berbagai macam fasilitas yang ditawarkan oleh geocities.

Gambar 3.9 Tampilan awal geocities

29

Langkah selanjutnya file-file dimasukkan satu persatu kedalam blok-blok yang telah tersedia di geocities, lalu klik upload files yang terletak dibawah blok pemasukkan files. Langkah terakhir setelah melakukan upload files, periksa apakah file-file tersebut telah diterima atau telah masuk ke Webserver yang terdapat di geocities. Setelah semua files dimasukkan telah diterima, maka selesai sudah cara upload files ke Webserver. Setelah semua file selesai di upload, langkah berikutnya adalah melihat hasil file yang telah di upload. Tutup atau keluar dari www.geocities.com , lalu klik kembali internet explorer dengan mengisikan alamat Webnya, yaitu : www.geocities.com/budi daya anggrek.

3.5.

Spesifikasi Perangkat Keras Adapun spesifikasi perangkat keras menjadi syarat untuk menggunakan

Macromedia Dreamweaver MX adalah sebagai berikut : 1. Prosessor Intel Pentium II atau yang setara, 300 MHz atau lebih. 2. 96 MB RAM (disarankan 128 MB). 3. 275 MB spasi harddisk. 4.

Monitor 256 warna dengan resolusi 800 x 600 pixel (disarankan monitor dengan jutaan warna dan resolusi 1024 x 768 pixel).

5. Sebuah CD-ROM drive.

3.6.

Spesifikasi Perangkat Lunak Spesifikasi perangkat lunak selain perangkat keras, yang tidak kalah

pentingnya

adalah perangkat lunak yang harus dimiliki bila ingin menjalankan

Macromedia Dreamweaver MX : 1. Windows 98, Windows 2000, Windows NT (dengan service pack 3 atau lebih), Windows XP. 2. Netscape Navigator atau Microsoft Internet Explorer versi 4 ke atas. 3. Sofware Macromedia Dreamweaver MX yang dikemas dalam CDROM.

30

BAB III ANALISA DAN PEMBAHASAN MASALAH

Recommend Documents