46
3.2 Struktur Navigasi 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 Hotaiment.com ini adalah struktur navigasi campuran (Composite). Melalui struktur navigasi ini, terlihat bagaimana isi dan susunan dari sebuah website secara menyeluruh. Situs web ini menggunakan struktur navigasi composite atau campuran, dikarenakan situs ini memiliki link yang saling terhubung pada tiap halamannya.
Index
Home
Music
Movie
Novel
Cool Site
About Us
Gambar 3.1 Struktur Navigasi Composite (Campuran)
Guest Book
47
3.3 Rancangan Storyboard Pada rancangan situs web Hotaiment.com ini penulis mendesain bentuk dari suatu halaman situs web dengan menampilkan beberapa link, text, gambar, dan suara. Rancangan dan model layout dari situs web Hotaiment.com dimulai dari pembuatan halaman index. 3.3.1
Halaman Index Halaman Index yaitu halaman depan dari semua halaman. Halaman ini disebut sebagai halaman pembuka. Halaman pembuka ini akan tampil pertama kali website ini dibuka. Tampilan pembuka ini berisi teks bergerak yang berisi tulisan “Welcome In This Site, you will get more than the other site, about”. Tampilan gambar, suara, dan teks yang berisi tulisan “Hot Movie, Hot Musik, Hot Novel, dan ENTER”.
Untuk teks
“ENTER” jika diklik maka akan masuk ke menu tampilan utama. Rancangan tampilan halaman index yaitu sebagai berikut:
Teks
Image
ENTER
Gambar 3.2 Rancangan Halaman Index
48
3.3.2
Halaman Home Halaman ini menampilkan banner dan beberapa tombol link yang telah dikelompokkan. Halaman ini terdiri dari kelompok yang berisi link Home, Music, Movie, Novel, Cool Site dan About Us. Dimana antara satu dan yang lainnya saling terhubung.
BANNER hg Home
Sekilas Hot’s Movie
Sekilas Hot’s Musik
Sekilas Hot’Novel
Sekilas Hot’s Cool Site
Review Movie
Review Music
Music Movie Novel Cool Site About Us Guest Book
Gambar 3.3 Rancangan Halaman Home
49
3.3.3
Rancangan Halaman Music. Halaman ini tidak jauh berbeda dengan halaman home, namun informasi tangga lagu dihilangkan. Di dalam halaman ini berisi informasi tentang musik namun halaman ini memiliki kesamaan layout atau tata letak.
BANNER
Home
MUSIC REVIEW
Music Movie Novel
Gambar
Sekilas Music
Cool Site About Us Guest Book
Gambar 3.4 Rancangan Halaman Music
50
3.3.4
Rancangan Halaman Movie. Halaman ini memiliki kesamaan dengan halaman music, namun gambar dan informasinya saja yang berbeda. Di dalam halaman ini akan berisi informasi film-film terbaru serta cerita sekilasnya, namun halaman ini memiliki kesamaan layout atau tata letak.
BANNER
Home
MOVIE REVIEW
Music Movie Novel
Gambar
Sekilas Movie
Cool Site About Us Guest Book
Gambar 3.5 Rancangan Halaman Movie
51
3.3.5
Rancangan Halaman Novel. Halaman ini memiliki kesamaan dengan halaman sebelumnya, namun gambar dan informasinya saja yang berbeda. Di dalam halaman ini akan berisi informasi novel terbaru, namun halaman ini memiliki kesamaan layout atau tata letak.
BANNER
Home
NOVEL REVIEW
Music Movie Novel
Gambar
Sekilas Novel
Cool Site About Us Guest Book
Gambar 3.6 Rancangan Halaman Novel
52
3.3.6
Rancangan Halaman Cool Site. Halaman ini memiliki kesamaan dengan halaman sebelumnya, namun gambar dan informasinya saja yang berbeda. Di dalam halaman ini akan berisi informasi tentang situs-situs web yang sedang diminati saat ini, namun halaman ini memiliki kesamaan layout atau tata letak.
BANNER
Home
COOL SITE REVIEW
Music Movie Novel Cool Site
Gambar
Sekilas Cool Site
About Us Guest Book
Gambar 3.7 Rancangan Halaman Cool Site
53
3.3.7
Rancangan Halaman About Us Pada halaman About Us ini berisikan foto dan biodata atau identitas penulis.
BANNER
Home Music Movie Gambar Novel
Sekilas About Us
Cool Site About Us Guest Book
Gambar 3.8 Rancangan Halaman About Us
54
3.3.8
Rancangan Halaman Guest Book Halaman ini berisikan data tamu yang masuk pada website ini dan memasukan biodata Nama, Email, Address, City, dan Message.
BANNER
Home Music Movie
Buku Tamu
Novel Cool Site About Us Gambar 3.4 Rancangan Halaman Buku tamu Guest Book
Gambar 3.9 Rancangan Halaman Guest Book
55
3.4
Langkah-langkah Pembuatan Halaman Web Setelah membuat struktur navigasi dan rancangan halaman situs web, maka langkah selanjutnya adalah mengimplementasikannya kedalam pembuatan situs
web.
Langkah
pertama
adalah
membuka
program
Macromedia
Dreamweaver MX 2004, dengan cara klik menu Start Program Macromedia Macromedia Dreamweaver MX 2004. Kemudian tentukan site name dan lokasinya. Selanjutnya adalah membuat halaman situs web, caranya dengan mengklik File pilih New. Lalu dimulai dengan membuat halaman Index, yaitu sebagai berikut :
Gambar 3.10 Tampilan Utama Macromedia Dreamweaver MX 2004 Untuk membuat animasi serta efek suara dengan menggunakan Macromedia Flash MX 2004, yaitu dengan langkah awal sama seperti membuka Macromedia Dreamweaver MX 2004, dengan cara klik menu Start Program Macromedia Macromedia Flash MX 2004, maka tampil seperti berikut:
56
Gambar 3.11 Tampilan Utama Macromedia Flash MX 2004 3.4.1
Pembuatan Halaman Index Dalam pembuatan halaman Index pada Flash, langkah pertama adalah membuka program Macromedia Flash MX 2004, kemudian buat flash document baru. Setelah tampil layer kerja Flash, Tentukan ukuran dari seluruh halaman aplikasi pada Panel Properties dengan ukuran 640 x 480 pixels dan warna Background Hitam (#00000) seperti pada gambar berikut :
Gambar 3.12 Panel Properties
57
Maka hasil layar kerja yang telah diatur backgroundnya seperti dibawah ini:
Gambar 3.13 Tampilan Bidang Kerja Flash dengan
Background Hitam Pada layer 1 frame 1 buatlah teks “Welcome In This Site“ klik kanan pilih Insert Keyframe, kemudian klik Selection Tool yang ada pada tool yang terletak disebelah kiri frame, selanjutnya browse teks tersebut lalu pindahkan diluar frame, setelah itu diframe 5 klik kanan pilih Insert Frame. Kemudian tekan Enter pada keyboard untuk melihat hasil tampilannya. Ulangi langkah tersebut sampai semua teks tertulis “Welcome In This Site, You Will Get More Than The Other Site”. Agar teks bergerak berputar pada panel Properties ubah Tween menjadi Motion dengan Rotate CW. Setelah itu klik kanan pada frame berikutnya pilih Insert Frame. Begitu pula untuk menambahkan gambar yang sudah tersedia dengan efek suara dilakukan dengan langkah yang sama, perbedaanya hanya pada Behavior pilih Movie Clip. Buat Simbol baru bernama Button Enter pada Behavior pilih Button. Pada frame Up gambar tombol berbentuk seperti boomerang dan
58
teks “Enter” berwarna hijau. Klik kanan frame Over, Down dan Hit pilih Insert Keyframe ubah warna teks menjadi putih pada Panel Properties ubah Sound untuk frame Over dan Down. Hasil dari langkah diatas adalah sebagai berikut :
59
60
Gambar 3.14 Halaman Index
3.4.2
Pembuatan Halaman Home
61
Pembuatan halaman home ini dikerjakan pada Macromedia Dreamweaver MX 2004 yang dimulai dengan pemberian warna background yang caranya telah dijelaskan diatas, kemudian langkah memasukan table yaitu dengan memklik Table pada Toolbar lalu atur baris dan kolomnya.
Gambar 3.15 Dialog Tabel Pembuatan halaman ini dimulai dari 3 buah frame yang terdiri dari frame top yaitu untuk banner yang terdiri dari logo Hotaiment.com. Pada Frame Top, letakkan titik Insertasi pada frame top buat 2 buah layer dengan cara klik tab Layout Draw Layer. Layer pertama lalu klik menu Insert Image. Pada Select Image pilihlah file Logo. Frame Left adalah untuk menuliskan menu button.dengan cara yang sama seperti pembuatan button “Enter“ pada halaman Index, perbedaanya hanya pada button ini ditambahkan menjadi Home, Music, Movie, Novel, Cool Site, About Us, dan Guest Book. Setiap menu dilink sesuai dengan namanya masing-masing sehingga apabila menu tersebut diklik akan menuju halaman link tersebut. Link untuk setiap menu dilakukan pada Table Link yang berada pada jendela Properties. Setelah itu simpan frame left dan beri nama Menu.htm. Lalu ketikkan teks menu yaitu :
62
a.Home, pada table dialog link klik Home.htm dan pada target pilihlah Mainframe. b.
Music, pada table dialog link klik Music.htm dan pada target
pilihlah Mainframe. c.Movie, pada table dialog link klik Movie.htm dan pada target pilihlah Mainframe. d.
Novel, pada table dialog link klik Novel.htm dan pada target
pilihlah Mainframe. e.Cool Site, pada table dialog link klik Cool_Site.htm dan pada target pilihlah Mainframe. f. About Us, pada table dialog link klik About_Us.htm dan pada target pilihlah Mainframe. g.
Guest Book, pada table dialog link klik Guest_Book.htm dan
pada target pilihlah Mainframe. Frame Right untuk menampilkan keterangan sekilas tentang halaman-halaman berikutnya. Untuk frame right adalah mainframe yang merupakan target untuk tempat isi dari setiap menu, apabila salah satu dari menu tersebut diklik. Frame Right untuk halaman ini terdiri dari image dan penjelasan informasi. Caranya letakkan titik insertasi pada frame right. Klik tab Layout pada Insert Bar, maka akan muncul toolbar-toolbar lalu klik Draw Layer, setelah layer dibuat insert image ke dalam layer pilihlah file Image.jpg, kemudian di bawah image ketikkanlah teks penjelasan informasi. Simpan frame right dan beri nama Home.htm, selain itu juga untuk setiap frame diberi warna background yang telah dijelaskan pada langkah pemberian warna background pada halaman Index.htm. Setelah semua selesai simpan framesets dan beri nama Home.htm. Frame Right adalah Main Frame atau frame utama yaitu merupakan tempat dari halamanhalaman menu apabila salah satu menu diklik maka halaman itu akan
63
muncul pada frame right. Setiap salah satu menu diklik maka isi dari frame top dan frame left tidak akan berubah, sehingga yang terjadi hanyalah perubahan pada frame rightnya saja. Untuk memasukan image ke dalam windows klik menu Insert Image atau dengan shortcut Ctrl+Alt+I, kemudian pada jendela Select Image Source pada kotak file pilihlah file Image.jpg lalu klik Ok.
Gambar 3.16 Tampilan Select Image Hasil dari diatas adalah sebagai berikut :
Gambar 3.17
Halaman
Home 3.4.3
Pembuatan Halaman Music Langkah awal pembuatan halaman ini sama dengan pembuatan halaman
home,
karena mempunyai bentuk yang tak jauh berbeda. Halaman music ini terdiri dari image berupa logo kaset dengan disertai button “Play” yang jika diklik
64
akan terdengar sekilas lagunya. Cara pembuatannya dengan Macromedia Dreamweaver MX 2004 yang sudah dijelaskan sebelumnya, disertai pula penjelasan informasi berupa cerita sekilas tentang album dan penyanyinya. Seperti halaman sebelumnya, halaman music juga diberi warna background hitam. Agar teks terlihat rapih dan menarik maka editlah teks tersebut. Pengeditan dapat dilakukan dijendela Properties dengan cara memblok teks yang telah diketikan. Aturlah size, type, dan warna huruf agar teks terlihat lebih menarik. Hasilnya adalah sebagai berikut :
Gambar 3.18 Halaman Music 3.4.4
Pembuatan Halaman Movie Pembuatan halaman ini relatif sama dengan pembuatan halaman home mulai dari memasukan table, banner, link dan gambar. Perbedaanya hanya tidak terdapat suara. Tetapi pada gambarnya, pembuatan flashnya
65
ditambah dengan teks “Now On Teater dan Coming Soon” yang langkahnya sama seperti pembuatan teks di index. Hasil dari langkah diatas adalah :
Gambar 3.19 Halaman Movie
3.4.5
Pembuatan Halaman Novel Pembuatan halaman ini relatif sama dengan pembuatan halaman movie, mulai dari memasukan table, banner, link dan gambar. Letak
66
pebedaanya pada gambar diberi teks flash yaitu “New Realease dan Best Seller“. Hasil dari langkah di atas adalah :
Gambar 3.20 Halaman Novel
3.4.6
Pembuatan Halaman Cool Site Halaman Cool Site sangat identik dengan halaman music, movie dan novel, yang menjadi perbedaan hanya contentnya saja, pada halaman ini
67
akan berisi situs-situs yang berhubungan dengan website hotaiment.com, jika situs tersebut diklik maka akan meng-link ke situs yang bersangkutan. Hasilnya adalah sebagai berikut :
Gambar 3.21 Halaman Cool Site
3.4.7
Pembuatan Halaman About Us Pembuatan halaman about us juga tidak berbeda dengan halaman sebelumnya, dimulai dengan memasukan table, banner, dan link. Kemudian
68
pada halaman detailnya disi dengan foto dan biodata penulis. Untuk membuat biodata ini cukup diketik langsung pada Flash sedangkan untuk memasukan foto sudah dibahas diatas. Hasil dari langkah diatas sebagai berikut :
69
Gambar 3.22 Halaman About Us
3.4.8
Pembuatan Halaman Guest Book Dalam pembuatan halaman ini sama seperti halaman yang sebelumnya perbedaanya pada halaman guest book ini memakai scrip PHP dengan database MyAdmin, sebelumnya aktifkan dahulu PHP triad pada Start Pilih PHPMyAdmin, kemudian isi database dengan Email sebagai Query, buat database sebanyak 6 buah yaitu Id, Nama, Email, Alamat, Kota, dan Pesan. Isi ketentuan yang sudah tersedia pada database tersebut setelah selesai semua simpan database tersebut dalam HTML Document dengan nama file GuestDB. Kemudian aktifkan pula Apache, barulah buku tamu dapat dijalankan. Dan pesan-pesan yang masuk dapat ditampilkan. Hasil dari langkah diatas sebagai berikut :
70
71
Gambar 3.23 Halaman Guest Book 3.5 Hardware Yang Digunakan Pada pembuatan situs web ini penulis menggunakan komputer dengan spesifikasi sebagai berikut : 1.
Sistem operasi Windows XP 2003
2.
Intel Pentium 4
3.
RAM 128 Mbyte DDR
4.
Diperlukan kapasitas hardisk minimal 40 Gbyte
3.6 Software Yang Digunakan Sedangkan software yang digunakan untuk menyelesaikan penulisan ini baik pembuatan situsnya ataupun dokumentasinya adalah sebagi berikut : 1.
Macromedia Dreamweaver MX 2004
2.
Macromedia Flash MX 2004
3.
Macromedia Fireworks MX 2004
4.
Browser : Internet Explorer, Netscape Communicator, dan lain-lain.
