BAB III - Index of
advertisement
BAB III PEMBAHASAN Pada bab ini akan dibahas bagaimana merancang dan membangun sebuah website yang menampilkan Informasi tentang Film yang sedang dan akan beredar, Informasi tentang buku baru yang terbit dan Info album musik yang baru beredar. Dalam pembuatan web ini lebih banyak berkerja dengan aplikasi Macromedia Dreamweaver MX ditambah aplikasi lain. Macromedia Dreamweaver MX merupakan program aplikasi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam membangun atau membuat sebuah halaman web. Dalam pembahasan ini akan dibagi menjadi beberapa bagian. Bagian pertama akan menjelaskan struktur navigasi dari website, kedua menjelaskan rancangan tampilan halaman web, dan ketiga menjelaskan proses pembuatan halaman web. Spesifikasi yang diizinkan Untuk dapat menjalankan program Macromedia Dreamweaver MX ini minimal komputer harus memiliki spesifikasi sebagai berikut : Untuk Microsoft Windows: Processor Intel Pentium II dengan 300 Mhz atau yang lebih tinggi Sistem Windows 98,Windows 2000,Windows NT,Windows ME,dan Windows XP Menggunakan browser,seperti Internet Explorer Minimal 98 MB RAM (Random Access Memory) atau menggunakan 128 MB RAM yang direkomendasikan Ruangan yang tersisa dalam Hardisk minimal 275 MB Minimal monitor 256 warna itu lebih tinggi dengan resolusi 800*600 Pixel atau yang direkomendasikan dengan 1024*768 dengan satu juta warna CD-ROM 3.1 Struktur Navigasi Website Struktur Navigasi Website digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi tersebut. Struktur navigasi website ini adalah struktur navigasi campuran. Sebelum menyusun struktur navigasi website, yang dilakukan adalah mengumpulkan isi-isi yang akan ada dalam website. Melalui struktur navigas website ini, terlihat bagaimana isi dan susunan dari sebuah website secara menyeluruh. Untuk situs web ini maka isi yang ada antara lain: Index, Info Buku, Info Musik, Now Playing, Coming Soon, More, Contact Us. Sebenarnya dengan membuat struktur Navigasi ini sama fungsinya dengan Flowchart, yaitu: memberikan petunjuk kepada user, sehingga user juga bisa menjadikan struktur navigasi ini sebagai pedoman dalam mencari informasi yang ada dalam website ini. Pembuatan struktur navigasi akan sangat membantu nantinya, ketika akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik adalah mampu memberitahukan pengunjung tentang lokasi mereka sekarang, lokasi-lokasi yang bisa dikunjungi dari lokasi mereka sekarang. Dan pada struktur navigasi website ini, terdapat banyak juga link didalamnya , karena penulis menggunakan table dalam pembuatan web ini, sehingga pada setiap halamannya terdapat banyak link yang sama juga praktis apabila ingin melihat suatu halaman tertentu tanpa harus ke halaman index dahulu. Juga dengan menggunakan table maka lebih menghemat waktu dalam menelusuri isi dari website tersebut. Berikut akan ditampilkan struktur navigasi dari halaman-halaman yang ada pada website yang dirancang. (Lihat Gambar 3.1) Harry Potter Star Wars Info Buku Harlequin New York Blue Willow Maximum Ride Foo Fihgters Maxi Priest Info Musik Edane Kathrine Jenkins T-Five The Island Fantastic Four INDEX War Of The World Now Playing Mr&Mrs Smith Ungu Violet GIE In good Company Angels Apocalypse Coming Soon Cinta Silver Sky High Merchant Of Venice Gambar 3.1 Contact Us 3.2 Storyboard Alur cerita merupakan gambaran dan penjelasan secara rinci dari tiap gambar, animasi, suara dan juga text. Alur cerita atau storyboard merupakan langkah yang harus dibuat setelah mendefinisikan elemen-elemen kedalam objek-objek. Bagian-bagian tampilan dalam alur cerita akan disatukan oleh peta penjejakan selama proses mendesign tampilan web tersebut. Tampilan dalam storyboard dilakukan secara berurutan. Tiap layer diberi penjelasan spefikasi tentang apa saja yang ditampilkan pada layer tersebut. Rancangan storyboard harus disesuaikan dengan struktur navigasi yang telah di buat, sehingga design menjadi terarah. Rancangan storyboard atau Alur cerita pada web Movies Freak: 3.2.1 INDEX.htm Index.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 index dari halaman-halaman web lainnya yang berada pada link Home.htm tersebut.(lihat gb 3.2) Halaman Movies Freak mempunyai rancangan tampilan sebagai berikut: MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING GB POSTER FILM NOW PLAYING COMING SOON MORE GB POSTER FILM CONTACT US GB BUKU GB POSTER FILM --------------------------- ------------------------COMING SOON ---------------------- -------------- MORE ----------- GB POSTER FILM ------------- Gb 3.2 Rancangan index ----------- 3.2.2 Menu film Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu film. Disertai dengan sisnopsis film dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topik yang diinginkan. MOVIES FREAK HOME NOW PLAYING INFO BUKU INFO MUSIK GB POSTER FILM NOW PLAYING SIP NO COMING SOON SIS MORE CONTACT US GB BUKU ------------------------COMING SOON ---------------------MORE --------------------- SIPNOSIS GB POSTER FILM Gb 3.3 story board menu film 3.2.3 Menu Buku Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu buku. Disertai dengan (sipnosis) buku dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topic yang diinginkan. MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING NOW PLAYING GB SAMPUL BUKU COMING SOON SIP NO SIS MORE CONTACT US GB BUKU GB POSTER FILM ------------------------COMING SOON ---------------------MORE GB SAMPUL BUKU SIP NO SIS Gb 3.4 storyboard menu buku --------------------- 3.2.4 Menu music Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu Music. Disertai dengan informasi album baru yang baru di release dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topic yang diinginkan. MOVIES FREAK HOME NOW PLAYING INFO BUKU INFO MUSIK NOW PLAYING GB SAMPUL KASET ------------------------COMING SOON COMING SOON ----------- MORE ------------ CONTACT US GB BUKU GB POSTER FILM MORE GB SAMPUL KASET --------------------- gb 3.5 story board music. 3.2.5 Contact Us Halaman ini menyajikan informasi segala sesuatu tentang pnulis dan contact person yang berupa e-mail. HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE MOVIES FREAK Website ini dinuat oleh ARRY,jika anda mempunyai kritik atau saran,kirimkan email anda ke [email protected] CONTACT US GB BUKU GB POSTER FILM Gb 3.6 story board contac us 3.3 Proses pembuatan Halaman Web Setelah semua persiapan awal untuk membuat website telah dilaksanakan dengan baik, maka berarti telah siap untuk memulai dan membuat sebuah website Movies Freak dengan menggunakan bahasa Indonesia dengan software web design Macromedia Dreamweaver MX. Berikut ini cara-cara sederhana yang dapat dilakukan untuk membuat website ini : 1. Membuat Folder Untuk memulai suatu halaman web baru, seperti yang telah dijelaskan diatas, sebaiknya membuat folder khusus untuk menyimpan semua file-file dari sebuah website. Adapun langkah2nya sebagai berikut : - Bukalah Windows Explorer - Kliklah Drive c,pada harddisk - Tekanlah menu file > New > Folder.Atau cara ini bisa dilakukan dengan jalan alternative lain dengan mengklik kanan pada tempat kosong di jendela drive c berada. - Kemudian New > Folder. Gb 3.7 membuat folder baru (properties) - Apabila prosedur membuat folder baru benar, maka akan keluar folder dengan nama New Folder,ganti dengan dan berilah nama C:\MOVIES FREAK 2. Membuat Frame Langkah-langkah membuat Frame - Tekan File pada Menu Baru - Pilih New - Pilih Frame sets pada general Gb 3.8 contoh Frame 3.3.1 Mengatur Property Halaman Web Sebelum memulai mendesain halaman web,terlebih dahulu mengatur property halaman kerja. Property halaman ini akan ikut menentukan bagus tidaknya desain yang akan dihasilkan. 1.Untuk perintah menu Modify-page properties , atau gunakan kombinasi tombol ctrl + j. 2. Akan tampil dialog page properties. Dalam kotak dialog page properties pada Dreamweaver MX terbagi dalam 5 kategori antara lain : a. Apperence Pada bagian ini kita dapat mengatur jenis font untuk halaman, menentukan style font, ukuran font, warna untuk font, warna latar belakang halaman atau menampilkan gambar untuk latar belakang. Selain itu kita juga dapat menentukan margin halaman. b. Link Kategori kedua adalah Link. Pada bagian ini kita dapat menentukan jenis font untuk teks link, ukuran font mengubah warna untuk teks link yang sedang aktif serta untuk menentukan pemberian garis bawah pada teks link. c. Headings Pada kategori Headings, kita dapat menentukan sendiri style yang digunakan untuk naskah kita. d. Title/enconding Kita dapat memberikan juduk halaman pada bagian title. Bagaimana melakukannya dapat kita pelajari pada bahasan-bahasan selanjutnya. e. Tracing Image Jika kita menampilkan tampilan gambar sementara pada latar belakang, kita dapat mengaturnya pada bagian ini. 3.3.2 Menambahkan Judul Halaman Web Title digunakan untuk memberikan judul halaman Web. Selain melalui kotak dialog page properties, kita juga dapat memberikan memberikan judul halaman web dengan menggunakan salah satu perintah berikut ini. a. Pada bagian Document Bar, ketika judul halaman web pada kotak teks Title. b. Pilih menu View-head content sehingga pada lembaran kerja kita akan ditambahkan satu buah tool bar baru, klik icon yang berada di sudut atas kiri kemudian masukan judul halaman web kita didalam kotak teks Title pada bagian panel properties. 3.3.3 Mengisi Bagian Latar Belakang dengan Gambar a. Klik kanan lembar kerja dokumen window. Pada daftar menu yang tampil pilih page properties. b. Pada kotak dialog page properties klilk tombol Browse pada bagian Background Image. Jika kita sudah mengetahui letak file gambar yang ingin kita ambil, kita dapat mengetikan path pada kotak teks background image. 3.3.4 Mengisi Latar Belakang dengan Warna Pilih Background pada kotak dialog page properties juga dapat diisi warna dengan mengklik tombol dropdown pada bagian background pilih satu warna yang kita suka dengan menggunakan pointer mouse. 3.4 Membuat Situs Lokal Situs local memiliki pengertian bahwa seluruh site yang digunakan untuk membangun situs web tersebut berada dalam komputer yang berdiri sendiri. Bisa menempatkannya dalam folder dalam drive lokal. Dalam Dreamweaver, untuk membuat situs web perlu mendefinisikan situs dengan menggunakan kotak site definition. Pada kotak dialog site definition tersebut diminta untuk menentukan situs yang akan dibuat. Ada dua cara proses pendefinisian, yaitu dengan menggunakan pilihan basic atau advance. Pilihan Basic memberikan kemudahan dalam mempersiapkan situs. Dan pilihan Advance bagi yang sudah paham betul akan konsep yang berlaku pada Dreamweaver MX. Adapun langkah-langkah untuk mengatur pendefinisian site yang dijalankan pada versi basic adalah sebagai berikut : 1.Pilih perintah Menu Site > Manage Site Pada tampilan kotak dialog manage site dapat melakukan beberapa hal, antara lain New, Edit < Duplicate, Remove, Export, dan Import. Untuk membuat situs baru pilih tombol New sehingga akan tampil dua pilihan menu melayang, Site dan FTP & RDS server. Kemudian tekan tombol site. Selanjutnya akan tampil kotak dialog Site Definition seperti pada gambar 3.9. Pada halaman ini diminta untuk memasukkan nama untuk situs pada kotak teks yang disediakan. Masukkan nama sesuai keinginan. gb 3.9 Site definition 2. Klik Next untuk masuk pada kotak dialog berikutnya Pada kotak dialog kedua diminta untuk memilih tipe dokumen. Perhatikan gambar 3.10. Jika memillih No, berarti memilih situs statis tanpa halaman dinamis. Atau, pilih Yes apabila ingin memilih dokumen dinamis. gb 3.10 site definition 3. Klik Next untuk melanjutkan ke langkah berikutnya. Pilih pilihan pertama, Edit locally, then upload to remote testing server setelah itu di tentukan tempat penyimpanan files pada harddisk dengan mngetikkan folder penyimpanan pada begian kotak teks yang disediakan. gb 3.11 site definition 4. Selanjutnya tekan tombol Next untuk menuju ke kotak dialog berikutnya Pada bagian tersebut diminta untuk menentukan web server, maka pilih local/Network. gb 3.12 site definition 5. Klik Next untuk menuju langkah selanjutnya Kotak dialog pada gb 3.12 menampilkan ringkasan dari setting yang telah di buat. Klik tombol Done untuk mengakhiri Proses. gb 3.13 site definition 3.5 Pembahasan Program Pada tahapan ini berisikan pembahasan cara-cara pembuatan website Movies Freak yang dibuat oleh penulis. Adapun langkah-langkah yang telah dilakukan oleh penulis dalam pembuatan website ini adalah : I. Mengambil data atau gambar dengan menggunakan Internet II. Membuat struktur Navigasi III. Merancang dan mendesain elemen gambar situs IV. Membuat isi Informasi website V. Membuat tabel Adapun langkah awal dalam pembuatan Menu Utama atau Home Page adalah sebagai berikut : Pilih menu file pada menu Bar > New,atau bisa juga dengan menggunakan shortcut ctrl + N. Kemudian akan tampak tampilan dari kotak dialog New gb 3.14 New Document Pilih Basic Page > HTML > Create Maka muncullah ruang kerja Dreamweaver MX gb 3.15 ruang kerja Dreamweaver Lalu pilih menu Insert > Image atau ctrl + alt + I Kemudian masukan gambar yang telah dipilih Lalu atur besar kecil layer Lalu pindahkan kursor kearah files. Kemudian buatlah file baru untuk halaman menu utama. Dengan cara klik kanan pada halaman files > New files, ketik “Index.html” kemudian tekan enter. Lalu klik pada layer sehingga pada bagian properties set table ada gambar kecil layer-layer tersebut. Lalu pada box properties isikan Link denngan “Index.html” Simpan file supaya menhadi halaman pertama Gb 3.16 Tampilan index.htm 3.5.1 Membuat Menu Film Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari page yang diklik atau yang diinginkan. Pada halaman ini menampilkan berbagai berbagai informasi film beserta sipnosisnya. Gb 3.17 tampilan menu film 3.5.2 Membuat Menu Informasi Buku Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini penulis menampilkan berbagai judul novel yang baru terbit beserta ringkasan dari novel-novel tersebut. Gb 3.18 tampilan menu buku 3.5.3 Membuat Menu Informasi Musik Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini penulis menampilkan informasi Album New Release. Gb 3.19 tampilan menu musik. 3.5.4 Membuat Contact Us Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini terdapat sebuah link yang ditunjukkan pada e-mail sang penulis. gb 3.20 tampilan contac us 3.6 Link Langkah-langkah membuat link dengan menggunakan teks yang sudah ada I. Buat sebuah teks yang akan digunakan sebagai link II. Pilih teks tersebut kemudian isikan alamat dalam kotak teks Link pada property Inspaector. Bisa juga dengan menggunakan ikon folder utnuk menentukan alamat tujuan III. Pada document windows, teks yang dijadikan link akan diberi garis bawah . Untuk membuat link dengan menggunakan teks baru, ikuti langkah-langkah berikut ini • Tempatkan kursor pada tempat yang ingin diberi sebuah link teks • Klik tombol pada insert bar kategori common sehingga tampil kotak dialog Hyperlink • Pada kotak dialog Hyperlink masukan berapa ketentuan berikut : a) Text : digunakan untuk memasukkan teks yang dijadikan hyperlink b) Link : digunakan untuk menggunakan path ke target link yang diinginkan c) Target : digunakan untuk menentukan jendela atau frames yang akan di tuju oleh suatu link d) Tab index : Suatu nomor yang menyatakan urutan link dalam link-link e) Title : Digunakan untuk memberi nama pada link yang dibuat f) Access key : Digunakan untuk membuat tombol pintas ke linklink yang ada di halaman web. 3.7 Uji Coba Uji coba ini dilakukan untuk melihat perkembangan terakhir dari website yang telah dibuat. Uji coba juga dilakukan sebagai sarana evaluasi sehingga dapat diketahui letak kekurangan dan kesalahan yang mungkin terdapat didalamnya. Untuk pembuatan Website ini ada beberapa hal yang perlu diperhatikan untuk mendapatkan hasil yang sempurna. Hal ini perlu diperhatikan tersebut ialah mengenai spesifikasi teknisi system. Spesifikasi teknisi system yang dimaksud disini adalah perangkat keras dan perangkat lunak yang saling mendukung dan memiliki kemampuan untuk menjalankan website Movies Freak ini. 3.8 Publikasi Website Setelah halaman Web telah siap, penulis mempublukasikannya ke dalam format WWW agar hasil yang dibuat dapat dipergunakan oleh setiap pengguna jasa Internet. Namun sebelumnya ada beberapa persyaratan yang harus di penuhi, antara lain : Hyperlink harus sudah terhubung dan tidak rusak. Tampilan halaman Web sudah sesuai keinginan. Mengetahui letak direktori pada server Web beserta Provider Pastikan besar File tidak melewati batas anjuran dari provider. Penulis memanfaatkan jasa provider dari Geocities, karena server Web ini penulis dapat mempublikasikannya dengan lebih cepat setelah dikirim ke Server Web dibandingkan dengan provider yang lain. Selain itu dari segi ekonomis pempublikasian Web ini juga tidak memerlukan biaya (gratis). Penulis menetapkan besar file yang akan dikirim sebesar kurang dari 5 MB, karena ukuran tersebut sudah ditetapkan oleh pihak provider jika ingin mempublikasikan sebuah halaman Web secara gratis.
