Index. Home. About Us. Guest Book. Site. Gambar 3.1 Struktur Navigasi Composite (Campuran)

Transkripsi

1 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

2 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 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

3 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

4 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

5 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

6 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

7 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

8 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

9 Rancangan Halaman Guest Book Halaman ini berisikan data tamu yang masuk pada website ini dan memasukan biodata Nama, , 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

10 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 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:

11 56 Gambar 3.11 Tampilan Utama Macromedia Flash MX 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

12 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

13 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 :

14 59

15 60 Gambar 3.14 Halaman Index Pembuatan Halaman Home

16 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 :

17 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

18 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 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

19 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 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

20 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 Pembuatan Halaman Novel Pembuatan halaman ini relatif sama dengan pembuatan halaman movie, mulai dari memasukan table, banner, link dan gambar. Letak

21 66 pebedaanya pada gambar diberi teks flash yaitu New Realease dan Best Seller. Hasil dari langkah di atas adalah : Gambar 3.20 Halaman Novel Pembuatan Halaman Cool Site Halaman Cool Site sangat identik dengan halaman music, movie dan novel, yang menjadi perbedaan hanya contentnya saja, pada halaman ini

22 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 Pembuatan Halaman About Us Pembuatan halaman about us juga tidak berbeda dengan halaman sebelumnya, dimulai dengan memasukan table, banner, dan link. Kemudian

23 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 :

24 69 Gambar 3.22 Halaman About Us 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 sebagai Query, buat database sebanyak 6 buah yaitu Id, Nama, , 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 :

25 70

26 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 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 Macromedia Flash MX Macromedia Fireworks MX Browser : Internet Explorer, Netscape Communicator, dan lain-lain.