BAB III ANALISA DAN PEMBAHASAN MASALAH

Transkripsi

1 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 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 Gallery About_me Memilih Menanam Merawat Gambar 3.1 Struktur navigasi web 17

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 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 Button Home = Button untuk menuju ke halaman Index

3 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 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 Image Home Anggrek Gallery About Me Teks Memilih Image2 Menanam Merawat Teks2 Copyright Gambar 3.3 Rancangan Halaman Anggrek Penjelasan: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Home = Button untuk menuju ke halaman Index Button Anggrek = Button untuk menuju ke halaman Anggrek

4 20 Button Gallery = Button untuk menuju ke halaman Gallery Button About Me = Button untuk menuju ke halaman About Me 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 Copyright = Nama pembuat Web Budi Daya Anggrek 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: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Anggrek = Button untuk menuju ke halaman Anggrek

5 21 Teks = Teks penjelasan tentang memilih tanaman anggrek Copyright = Nama pembuat Web Budi Daya Anggrek 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: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Anggrek = Button untuk menuju ke halaman Anggrek Teks = Teks penjelasan tentang cara menanam anggrek Copyright = Nama pembuat Web Budi Daya Anggrek

6 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: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Anggrek = Button untuk menuju ke halaman Anggrek Teks = Teks penjelasan tentang merawat anggrek Copyright = Nama pembuat Web Budi Daya Anggrek

7 Rancangan Halaman Gallery Dalam halaman ini berisi sembilan gambar jenis anggrek berikut dengan nama-namanya. Gambar 3.7 Rancangan halaman gallery Penjelasan: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Home = Button untuk menuju ke halaman Index 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 nama halaman yang sedang dibuka Image1 s/d Image9 = Gambar bunga anggrek Teks1 s/d Teks9 = Nama jenis bunga anggrek yang ada di gambar Copyright = Nama pembuat Web Budi Daya Anggrek

8 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: Animasi Image = Gambar animasi bunga anggrek yang bergerak-gerak Judul = Teks Budi Daya Anggrek Button Home = Button untuk menuju ke halaman Index 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 nama halaman yang sedang dibuka Teks2 = Teks tentang profil pembuat Web budi daya anggrek Copyright = Nama pembuat Web Budi Daya Anggrek

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

10 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 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 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 Di baris pertama, masukkan gambar ukiran garis, sedangkan dibaris kedua tuliskan teks Copyright by Nuria Delina 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 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

11 27 tentang keterangan memilih, menanam, dan merawat. 6. Ikuti langkah 9 dan 10 pada halaman index 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 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 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 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 Masukkan gambar pada baris ke-1, ke-3, ke-5 kolom ke-1, ke-2, dan ke 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 Ikuti langkah 9 dan 10 pada halaman index.

12 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 Publikasi Di Internet Langkah awal yang dilakukan adalah terlebih dahulu on-line dengan search engine pada alamat Di dalam search engine geocities ada berbagai macam fasilitas yang ditawarkan oleh geocities. Gambar 3.9 Tampilan awal geocities

13 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 lalu klik kembali internet explorer dengan mengisikan alamat Webnya, yaitu : daya anggrek 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 MB RAM (disarankan 128 MB) 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 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 CD- ROM.

14 30