BAB III PEMBAHASAN MASALAH

BAB III PEMBAHASAN MASALAH

3.1 Sekilas Tentang Istana Kepresidenan Republik Indonesia Indonesia tercatat memiliki lima istana kepresidenan yakni : Istana Jakarta, Istana Bogor di Bogor, Istana Cipanas di Cipanas, Istana Tampaksiring di Bali dan Istana Gedung Agung di Yogyakarta. Dari Sejarahnya, Istana Merdeka, Istana Negara, Gedung Agung, Istana Cipanas, dan Istana Bogor dibangun pada masa Pemerintah Hindia Belanda. Istana Tampaksiring dibangun pada masa Presiden Soekarno. Karena pemerintahan Republik Indonesia sejak pengakuan kedaulatan berpusat di Jakarta, maka Istana yang sering digunakan adalah Istana Negara dan terkadang Istana Merdeka yang dulu dikenal dengan Istana Gambir. Baik untuk pemerintahan maupun upacara maupun acara resmi kenegaraan. Selain berfungsi sebagai kantor, Istana Negara digunakan sebagai kediaman Presiden yang sebelumnya merupakan kediaman Gubernur Jendral Hindia Belanda dan Panglima pendudukan Jepang. Sejak Indonesia merdeka tercatat Presiden Soekarno (sejak tahun 1950, sebelumnya di kediamannya di Jalan Pegangsaan Timur 56, dan di Gedung Agung Yogyakarta), Presiden Abdurrahman Wahid, dan Presiden Susilo Bambang Yudhoyono. Sementara Presiden Soeharto dan Presiden B.J.Habibie lebih sering menggunakan Bina Graha sebagai ruang kerjanya. Presiden Soeharto sendiri memilih tinggal di Jalan Cendana sementara Presiden B.J.Habibie tinggal di kawasan Patra Kuningan. Pada masa Presiden Megawati Soekarnoputri, ruang kerja presiden pindah di Istana Negara dengan alasan karena Bina Graha berada di Jalan Veteran yang lalu lintasnya ramai sehingga mengganggu, selain pertimbangan keamanan. Bina Graha sendiri diubah fungsinya menjadi Museum Istana. Untuk kediamannya, Presiden Megawati memilih tinggal di kediamannya di Jalan kebagusan atau Jalan Teuku Umar.

15

16

Istana Bogor jarang digunakan sebagai tempat kantor kepresidenan. Pernah digunakan ketika ada acara acara kenegaraan seperti Konfrensi Tingkat Tinggi APEC 1996. Sedangkan Istana Cipanas, Istana Tampaksiring dan Gedung Agung digunakan sebagai tempat peristirahatan atau acara-acara informal kenegaraan. Pada masa pemerintahan Hindia Belanda,khususnya pada tahun 1920-1930'an pusat pemerintahan yang berada di Batavia (Jakarta) dianggap tidak ideal khususnya dari segi pertahanan dan militer serta agar pemerintah Hindia Belanda dapat bertindak "lebih independen". Untuk itu dicari daerah yang dianggap cocok sebagai Ibukota pemerintahan selain Bogor. Pilihan tersebut jatuh ke kota Bandung ditambah letaknya yang strategis (dataran tinggi dengan ketinggian kurang lebih 709 meter diatas permukaan laut). Sehingga pemerintah Hindia Belanda membangun pusat pusat militer, pos dan telekomunikasi di sana ditambah mulai maraknya pusat pusat perdagangan di sana. Untuk mempersiapkan kota Bandung sebagai ibukota, dibangunlah Gedung Sate, dan gedung lainnya seperti Gedung Merdeka. Namun karena dihalang-halangi oleh pemerintah Belanda di Den Haag serta pecahnya Perang Dunia

II,

rencana

itu

dibatalkan.

(http://id.wikipedia.org/wiki/Istana_Presiden_Republik_Indonesia.htm)

3.2 Struktur Navigasi Struktur navigasi adalah struktur atau alur dari suatu program. Menentukan struktur navigasi merupakan tahap pertama dari pembuatan aplikasi multimedia. Navigasi ini dapat digunakan dengan menggunakan flowchart pada program pascal, basic atau yang lainnya. Pada penulisan ini penulis menggunakan struktur navigasi hirarki, dikarenakan dapat memberikan interaktif yang lebih baik dan sesuai dengan kebutuhan penulis. Berikut ini adalah Peta Navigasi Hirarki, yang menghandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu.

17

Guest Book

Menu Utama

Tour Daftar Nama Presiden dan Wakil Presiden

Riwayat Istana

Fungsi Istana

Istana Kepresidenan

Riwayat Istana

(Pendahuluan) Fungsi Istana

Bagian Istana Bagian Istana Bangunan Lain

Istana Tampaksiring

Istana Jakarta

Galery

Galery

Istana Yogyakarta

Istana Bogor

Istana Cipanas

Riwayat Istana

Riwayat Istana

Riwayat Istana

Fungsi Istana

Fungsi Istana

Fungsi Istana

Gedung Induk

Bagian Istana

Bagian Istana

Gedung Utama

Galery

Galery

Paviliun

Bagian Istana

Galery

Gambar 3.1 Struktur Navigasi Hirarki

18

3.3 Perancangan Storyboard Untuk mendesain tampilan antar muka biasanya digunakan storyboard yang disusun secara berurutan, sehingga dapat mempermudah dalam mendesain antar web. Dalam storyboard selain digambarkan perkiraan tampilan akhir yang diinginkan juga ditulis penjelasan tentang spesifikasi yang meliputi keterangan tiap tombol, teks, dan letak penjelasan. Yang perlu diperhatikan dalam membuat storyboard adalah tetap mengikuti rancangan peta navigasi agar setiap desain lebih terarah. Berikut ini desain storyboard aplikasi Pengenalan Istana Kepresidenan Republik Indonesia yang dibuat penulis :

3.3.1 Menu Utama Pada Menu Utama ini pengunjung akan diberikan pilihan-pilihan sub menu lainnya yang dapat dipilih dengan mengklik salah satu tombol menu yang ada, seperti : Animasi Header

Guest Book

Gambar Bendera Indonesia

Tour

Istana Kepresidenan

Nama presiden dan Wakil

Animasi Garis

Gambar 3.2 Rancangan Menu Utama

19

3.3.1.1 Istana Kepresidenan Pada Menu ini pengunjung akan mendapat informasi masing-masing tentang Istana Kepresidenan yang ada di Indonesia. Dan didalamnya terdapat Sub Menu yaitu : riwayat, fungsi, bangunan lainnya,

Animasi Header Teks Judul

Jump Menu

Pendahuluan

Gambar Istana Presiden

Istana Jakarta Istana Bogor Istana Cipanas

Teks

Istana Yogyakarta Istana Tampaksiring Menu

Animasi Garis

Gambar 3.3 Rancangan Istana Kepresidenan (Pendahuluan)

20

Animasi Header Teks judul

Jump Menu

Pendahuluan Istana Jakarta

Teks

Istana Bogor Istana Cipanas

Riwayat

Istana Yogyakarta Fungsi

Istana Tampaksiring Bangunan Lainnya Galery Animasi Garis

Gambar 3.4 Rancangan Istana Kepresidenan (Istana Jakarta)

Animasi Header Teks judul

Jump Menu

Pendahuluan Istana Jakarta Istana Bogor

Gambar Bagian Istana

Istana Cipanas Istana Yogyakarta Istana Tampaksiring

Teks

Animasi Garis

Gambar 3.5 Istana Kepresidenan (Riwayat, Fungsi, Bangunan Lainnya)

21

Animasi Header Teks judul

Jump Menu

Pendahuluan Istana Jakarta Istana Bogor Istana Cipanas

Gambar Bagian Istana

Gambar Bagian Istana

Teks

Teks

Gambar Bagian Istana

Gambar Bagian Istana

Teks

Teks

Istana Yogyakarta Istana Tampaksiring

Animasi Garis

Gambar 3.6 Rancangan Istana Kepresidenan (Galery) 3.3.1.2 Nama Presiden dan Wakil Pada Menu ini pengunjung akan mendapat informasi tentang nama presiden dan wakil presiden yang pernah menjabat di Negara Indonesia. Animasi Header

Daftar Nama Presiden dan Wakil Presiden

Menu Animasi Garis

Gambar 3.7 Rancangan Daftar Nama Presiden dan Wakil

22

3.3.1.3 Tour Pada Menu ini pengunjung dapat melihat foto Istana Kepresidenan yang ada di Indonesia. Animasi Header

Gambar Istana Presiden

Menu Animasi Garis

Gambar 3.8 Rancangan Tour 3.3.1.4 Guest Book Pada Menu Guest Book ini pengunjung dapat mengisi nama, email, dan komentar untuk dijadikan bahan guna memperluas informasi tentang Istana Kepresidenan. Animasi Header Nama : Email : Komentar : KIRIM

CANCEL

Menu Animasi Garis

Gambar 3.9 Rancangan Guest Book

23

3.4 Perangkat Pendukung Perangkat pendukung utama dalam pembuatan website yakni : Macromedia Dreamweaver MX, dan software pendukung Macromedia Flash MX 2004, Swish 2.0 untuk pembuatan animasi teks dan gambar. Spesifikasi Hardware yang digunakan : a. Processor Intel Pentium II dengan 300 Mhz atau yang lebih tinggi. b. Sistem Windows 98, Windows 2000, Windows NT, Windows ME atau Windows XP. c. Menggunakan browser Netscape Navigator versi 4 atau yang lebih tinggi dan menggunakan Internet Explorer. d. Minimal 98 MB RAM (Random Access Memory) atau menggunakan 128 MB RAM yang direkomendasikan. e. Ruangan yang tersisa pada Harddisk minimal 275 MB. f. CD-ROM

3.5 Membuat Situs Lokal Dalam sebuah situs, yang perlu diperhaikan adalah bagaimana mengatur folder atau struktur setiap file karena semakin baik struktur yang anda buat maka semakin mudah mengorganisasikan dan melakukan perubahan atau update bila perlu. (Aplikasi Web Database dengan Dreamweaver MX, Stendy B. Sakur : hal : 23 : 2003). Dalam Dreamweaver untuk membuat situs web perlu mendefinisikan situs dengan kotak Site Definition. Pada kotak dialog site definition tersebut diminta untuk menentukan situs yang akan dibuat. Ada dua cara pross pendefinisian, yaitu dengan pilihan Basic atau Advance. Pilihan Basic diperuntukkan yang masih awam. Dan pilihan Advance, dimana dapat melakukan pengaturan secara langsung tanpa arahan step by step dari program. Adapun langkah-langkah untuk mengatur pendefinisian site yang dijalankan pada versi Basic adalah sebagai berikut : 1. Klik menu Site

New site di mana akan mendefinisikan site/lokasi baru.

24

Selanjutnya akan tampil kotak dialog Site Definition seperti pada gambar 3.10. Pada halaman ini diminta untuk menulis nama untuk situs pada kotak teks yang disediakan. Masukkan nama sesuai yang diinginkan.

Gambar 3.10 Kotak dialog Site Definition

2. Klik Next untuk masuk pada kotak dialog berikutnya. Pada kotak dialog kedua diminta untuk memilih tipe dokumen. Jika memilih No berarti memilih situs yang tidak menggunakan teknologi server, atau pilih Yes untuk memilih situs yang menggunakan tipe dokumen yang menggunakan teknologi server.

Gambar 3.11 Site Definition langkah kedua

25

3. Klik Next untuk melanjutkan kelangkah berikutnya. Pilih pilihan yang kedua agar file yang dibuat dapat langsung ditest oleh server. Klik icon folder browse untuk mencari file sumber, agar terhubung dengan file yang ada di server.

Gambar 3.12 Site Definition langkah ketiga

4. Klik Next untuk kelangkah berikutnya. Pilih pilihan yang ketiga untuk mengubungkannya dengan server PHPMySQL dan pilih tempat untuk menyimpan file di network. Dan buat folder sesuai dengan nama pada kotak dialog pertama untuk situs, seperti Gambar 3.13. Kemudian muncul langkah berikutnya pilih No. Seperti Gambar 3.14.

26

Gambar 3.13 Site Definition langkah keempat

Gambar 3.14 Site Definition langkah kelima

5. Klik Next untuk langkah berikutnya.

27

Dikotak dialog berikutnya akan muncul kotak dialog untuk mengetest apakah site yang dibuat terhubung dengan web server yang dipilih pada kotak dialog kedua. Tambahkan nama site seperti pada kotak dialog pertama pada kotak teks yang ada.

Gambar 3.15 Site Definition langkah keenam

Jangan lupa untuk mengaktifkan web server agar site yang dibuat dapat berjalan dengan baik. Untuk memastikannya dapat meng-klik tombol Test URL pada kotak dialog Site Definition yang keempat. Jika sudah mengaktifkan web server maka akan muncul kotak pesan seperti Gambar 3.16, atau jika belum mengaktifkan web server maka akan muncul kotak peringatan seperti Gambar 3.17.

Gambar 3.16 Test URL sukses

28

Gambar 3.17 Test URL gagal

6. Klik Next untuk menuju langkah selanjutnya. Kotak dialog pada Gambar 3.18 menampilkan ringkasan dari setting yang telah dibuat. Klik tombol Done untuk mengakhiri proses.

Gambar 3.18 Site Definition langkah ketujuh

3.6 Pembahasan Program Pada tahapan ini berisikan pembahasan cara-cara pembuatan website pengenalan istana kepresidenan yang dibuat oleh penulis. Adapun langkah-langkah dalam pembuatan Menu Utama atau Homepage adalah sebagai berikut :

29

1. Pilih Menu File pada Menu Bar > New atau bisa juga dengan menggunakan shortcut Ctrl+N . Kemudian akan tampak tampilan dari kotak dialog New Document seperti pada Gambar 3.19. 2. Pilih Basic Page > HTML > Create. 3. Maka munculah ruang kerja Dreamweaver MX.

Gambar 3.19 New Document

4. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer header, gambar, tombol, dan garis bagian bawah. Beri nama masing-masing layer untuk memudahkan memasukkan gambar atau animasi yang diinginkan. 5. Lalu atur besar kecil layer dan tempatkan layer sesuai dengan desain. 6. Tempatkan kursor didalam layer masing-masing untuk memasukkan objek. 7. Klik Flash pada Insert Bar > Media, untuk memasukkan file animasi header yang berekstension .swf didalam layer header. 8. Klik Insert > Image atau dengan shortcut Ctrl+Alt+I untuk memasukkan gambar pada layer gambar. 9. Klik Flash Button pada Insert Bar > Media, untuk membuat tombol dengan membuka kotak dialog Flash Button, seperti pada Gambar 3.20.

30

Gambar 3.20 Tampilan Insert Flash Button

Dari kotak dialog Insert Flash Button, lakukan beberapa pengaturan sebagai berikut : a. Pilih jenis tombol pada kotak Style. Dapat melihat contoh animasi tombol dengan meletakkan kursor pada kotak Sample. b. Masukkan teks yang akan ditampilkan pada tombol pada kotak teks Button Text. c. Tentukan jenis dan ukuran font yang digunakan. d. Tentukan link yang akan dihubungkan dengan mengetikkan alamat link pada kotak teks Link, atau dapat menentukan link dengan menekan tombol Browse…, kemudian tentukan alamat link yang diinginkan. e. Tentukan target/window dari link pada kotak Target. f. Jika ingin memberikan latar belakang halaman dapat memberikan warna, dapat memilih warna dengan menekan tombol pada palet warna Bg Color. g. Simpan tombol yang dibuat dengan mengetikkan sebuah nama pada kotak Save As, dan tekan tombol OK. 10. Pilih

Style

Button

Soft-Orange,

masukkan

Button

Teks

“ISTANA

KEPRESIDENAN”, lalu pilih Font “Verdana” Size “6” dan Linknya index1.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “istanakepresidenan.swf”.

31

11. Pilih Style Button Soft-Orange, masukkan Button Teks “NAMA PRESIDEN DAN

WAKIL”,

lalu

pilih

Font

“Verdana”

Size

“6”

dan

Linknya

namapresidendanwakil.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “daftarnama.swf”. 12. Pilih Style Button Soft-Orange, masukkan Button Teks “TOUR”, lalu pilih Font “Verdana” Size “6” dan Linknya tour.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “tour.swf”. 13. Pilih Style Button Soft-Orange, masukkan Button Teks “GUEST BOOK”, lalu pilih Font “Verdana” Size “6” dan Linknya guestbook.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “guestbook.swf”. 14. Klik Flash pada Insert Bar > Media, untuk memasukkan file animasi garis yang berekstension .swf didalam layer garis. 15. Pada Document Toolbar > Title diberi Nama “Istana Kepresidenan Republik Indonesia”. 16. Untuk membuat backgroundnya, pada kode HTML di tag tambahkan perintah background=”background.gif”. 17. Lalu save dengan nama menu.htm.

Gambar 3.21 Tampilan Menu Utama

32

Adapun langkah kedua dalam pembuatan halaman istana kepresidenan adalah sebagai berikut : 1. Pendahuluan a. Tampilan header dan garis bawahnya sama penulis mengSave As tampilan menu utama dan menghapus layer yang ada kecuali layer header dan layer garis bawah. Karena agar penempatan posisi layernya tidak berubah. b. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer menu tombol istana, gambar, jumpmenu dan teks. Beri nama masing-masing layer untuk memudahkan memasukkan gambar atau animasi yang diinginkan. c. Lalu atur besar kecil layer dan tempatkan layer sesuai dengan desain. d. Tempatkan kursor didalam layer masing-masing untuk memasukkan objek. e. Klik Flash pada Insert Bar > Media, untuk memasukkan file animasi pendahuluan yang berekstension .swf didalam layer teks judul. f. Pada layer tombol menu istana buatlah tabel dengan 6 baris dan 1 kolom. g. Penulis ingin membuat Rollover Image yaitu dengan cara masing-masing baris dimasukkan gambar dengan cara klik Insert > Interactive Image > Rollover Image. Maka akan tampil kotak dialog seperti Gambar 3.22.

Gambar 3.22 Insert Rollover Image

Dari kotak dialog Insert Flash Button, lakukan beberapa pengaturan sebagai berikut : a. Beri nama pada kotak teks Image Name.

33

b. Klik Browse… untuk mencari gambar pertama pada Original Image. Gambar yang ada pada Original Image adalah gambar yang pertama ketika kursor tidak melewati gambar tersebut. c. Klik Browse... untuk mencari gambar kedua pada Rollover image. Gambar yang ada pada Rollover Image adalah gambar yang kedua akan tampil ketika kursor melewati gambar pertama atau ketika akan diklik gambar pertama tersebut. d. Kotak teks pada Alternate Text bila diisi akan memberikan keterangan ketika kursor berada diatas gambar. e. Klik Browse… pada kotak Go To URL, untuk mencari halaman link ketika gambar diklik. h. Pada layer gambar penulis ingin membuat tampilan banner image builder yaitu dengan cara klik Commands > Banner Image Builder. Maka akan tampil kotak dialog seperti Gambar 3.23.

Gambar 3.23 Banner Image Builder

Dari kotak dialog Insert Flash Button, lakukan beberapa pengaturan sebagai berikut : a. Klik Browse… untuk mencari gambar pertama. b. Lakukan pada Browse… yang berikutnya.

34

c. Beri tanda centang pada kotak Show Transitions in MS Internet Explorer d. Pada kotak URL, berikan link untuk gambar (jika menginginkan gambar memiliki link). e. Pada kotak target tentukan bagaimana browser akan terbuka jika gambar diklik. f. Pada Rotary Every….Seconds, berikan nilai dalam satuan detik untuk lamanya waktu perpindahan /transisi antar gambar. i. Pada layer tombol kembali ke menu utama, klik Flash Button pada Insert Bar > Media, untuk membuat tombol dengan membuka kotak dialog Flash Button. j. Pilih Style Button Soft-Orange, masukkan Button Teks “MENU”, lalu pilih Font “Verdana” Size “6” dan Linknya menu.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “menu.swf”. k. Pada Insert Bar pilih Form dan pilih icon Jump Menu. Maka akan keluar kotak dialog seperti Gambar 3.24.

Gambar 3.24 Kotak Dialog Jump Menu

Beri nama menu pada kotak Text kemudian klik tanda + untuk memasukkan nama menu ke kotak Menu Items. Klik Browse untuk memberikan link terhadap nama dari Menu Items tersebut. Pada kotak Open URLs In biarkan

35

saja. Pada kotak Menu Name beri nama Jump Menu. Untuk pilihan Options tidak usah diberi tanda centang. l. Lalu Save dengan nama index1.htm.

Gambar 3.25 Tampilan Istana Kepresidenan (Pendahuluan)

2. Istana Jakarta a. Tampilan dan posisi header, garis bawahnya, tombol menu istana, teks judul, dan jump menu sama, penulis mengSave As tampilan pendahuluan dan menghapus layer yang ada kecuali layer header, layer garis bawah, tombol menu istana, layer teks judul dan layer jump menu . Karena agar penempatan posisi layernya tidak berubah. b. Pada layer teks judul penulis hanya mengganti isi dari file pendahuluan.swf dengan istanajakarta.swf .

36

c. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer teks, gambar, jumpmenu dan submenu. Beri nama masing-masing layer untuk memudahkan memasukkan teks, gambar atau animasi yang diinginkan. d. Lalu atur besar kecil layer dan tempatkan layer sesuai dengan desain. e. Tempatkan kursor didalam layer masing-masing untuk memasukkan objek atau teks. f. Pada gambar next berikan link sesuai dengan judul dari sub menu tersebut dengan cara klik kanan pada gambar tersebut. Pilih change link, seperti Gambar 3.26. g. Select file yang akan dijadikan link tersebut. Kemudian klik OK. h. Lalu Save dengan nama index2.htm.

Gambar 3.26 Change Link gambar next

37

Gambar 3.27 Tampilan Istana Kepresidenan (Istana Jakarta)

38

3. Riwayat Istana a. Tampilan dan posisi header, garis bawahnya, tombol menu istana, teks judul, dan jump menu sama, penulis mengSave As tampilan pendahuluan dan menghapus layer yang ada kecuali layer header, layer garis bawah,layer tombol menu istana, layer teks judul dan layer jump menu . Karena agar penempatan posisi layernya tidak berubah. b. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer teks, jumpmenu dan gambar. Beri nama masing-masing layer untuk memudahkan memasukkan teks, gambar yang diinginkan. c. Untuk membuat keterangan ketika kursor berada pada posisi diatas gambar tambahkan tag HTML seperti pada Gambar 3.28.

Gambar 3.28 Tag HTML untuk title gambar

d. Pada gambar back berikan link ke menu sebelumnya dengan cara klik kanan pada gambar tersebut. Pilih change link. e. Lalu Save dengan nama index3.htm.

Gambar 3.29 Change Link gambar back

39

Gambar 3.30 Tampilan Istana Kepresidenan (Riwayat)

40

4. Fungsi Istana a. Tampilan dan posisi header, garis bawahnya, tombol menu istana, teks judul, dan jump menu sama, penulis mengSave As tampilan riwayat dan menghapus layer yang ada kecuali layer header, layer garis bawah,layer tombol menu istana, layer teks judul dan layer jump menu . Karena agar penempatan posisi layernya tidak berubah. b. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer teks, jumpmenu dan gambar. Beri nama masing-masing layer untuk memudahkan memasukkan teks, gambar yang diinginkan. c. Untuk membuat keterangan ketika kursor berada pada posisi diatas gambar tambahkan tag HTML lihat pada Gambar 3.25. d. Pada gambar back berikan link ke menu sebelumnya dengan cara klik kanan pada gambar tersebut. Pilih change link. e. Lalu Save dengan nama index4.htm. 5. Bangunan Lainnya a. Tampilan dan posisi header, garis bawahnya, tombol menu istana, teks judul, dan jump menu sama, penulis mengSave As tampilan riwayat dan menghapus layer yang ada kecuali layer header, layer garis bawah,layer tombol menu istana, layer teks judul dan layer jump menu . Karena agar penempatan posisi layernya tidak berubah. b. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer teks, jumpmenu dan gambar. Beri nama masing-masing layer untuk memudahkan memasukkan teks, dan gambar yang diinginkan. c. Untuk membuat keterangan ketika kursor berada pada posisi diatas gambar tambahkan tag HTML . d. Pada gambar back berikan link ke menu sebelumnya dengan cara klik kanan pada gambar tersebut. Pilih change link. e. Lalu Save dengan nama index5.htm

41

Gambar 3.31 Tampilan Istana Kepresidenan (Fungsi)

42

Gambar 3.32 Tampilan Istana Kepresidenan (Bangunan Lainnya)

43

6. Galery a. Tampilan dan posisi header, garis bawahnya, tombol menu istana, teks judul, dan jump menu sama, penulis mengSave As tampilan riwayat dan menghapus layer yang ada kecuali layer header, layer garis bawah, layer tombol menu istana, layer teks judul dan layer jump menu. Karena agar penempatan posisi layernya tidak berubah. b. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer teks, jumpmenu dan gambar. Beri nama masing-masing layer untuk memudahkan memasukkan teks, dan gambar yang diinginkan. c. Agar posisi gambar dan teks yang berada disebelah kanan dan disebelah kiri letaknya sejajar, gambar dan teks yang dibuat pertama diatur posisinya kemudian di copy layernya dan di paste. Kemudian gunakan tanda panah kanan, kiri, atas, bawah untuk menggesernya. Jika gambar dan teksnya sama hanya tinggal merubah tag HTML untuk gambar yang ada di layer setelah di copy. Agar ukurannya tidak berubah.

Gambar 3.33 Letak Gambar dan Teks d. Masukkan gambar back pada layer back dan posisikan paling bawah foto gallery. Pada gambar back berikan link ke menu sebelumnya dengan cara klik kanan pada gambar tersebut. Pilih change link > namahalamanweb > OK.

44

e. Lalu Save dengan nama index6.htm.

Gambar 3.34 Tampilan Istana kepresidenan (Galery)

45

Adapun langkah ketiga dalam pembuatan halaman nama presiden dan wakil presiden yang pernah menjabat di Indonesia adalah sebagai berikut : 1. Tampilan header dan garis bawahnya sama penulis mengSave As tampilan menu utama dan menghapus layer yang ada kecuali layer header dan layer garis bawah. Karena agar penempatan posisi layernya tidak berubah. 2. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer baru. Buat dua layer barudan beri nama layer dengan nama tabel dan kemenu. 3. Lalu atur besar kecil layer dan tempatkan layer sesuai dengan desain. 4. Klik insert > Table atau dengan shortcut Ctrl+Alt+T. Maka akan keluar kotak dialog Insert Table seperti Gambar 3.35.

Gambar 3.35 Insert Table

5. Isikan Rows = 8, Columns = 4, Border = 3 dan klik OK. 6. Maka akan keluar tampilan tabel. Karena bagian pertama tabel untuk judul tabel maka blok baris pertama lalu klik kanan pilih Tabel > Merge Cells. Kolom pada baris pertama akan menjadi satu. 7. Masukkan teks pada baris pertama bagian atas tabel. Ubah properties Size menjadi +1. 8. Beri warna #FF3333 pada baris kedua. Dan untuk teks beri warna #0033CC. 9. Untuk baris kedua kolom pertama isikan “Nomor”, baris kedua kolom kedua untuk “Nama Presiden”, baris kedua kolom ketiga “Awal jabatan”, baris kedua kolom keempat “Akhir Jabatan”. 10. Isi setiap Cell sesuai dengan atributnya.

46

11. Untuk tabel Wakil Presiden sama seperti langkah 4 sampai 10. 12. Pada langkah kelima isikan Rows = 12. 13. Pilih Style Button Soft-Orange, masukkan Button Teks “MENU”, lalu pilih Font “Verdana” Size “6” dan Linknya menu.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “menu.swf”. 14. Lalu Save dengan nama namapresidendanwakil.htm.

Gambar 3.36 Tampilan Daftar Nama Presiden dan Wakil Presiden

47

Adapun langkah keempat dalam pembuatan tour adalah sebagai berikut : 1. Tampilan header dan garis bawahnya sama penulis mengSave As tampilan menu utama dan menghapus layer yang ada kecuali layer header dan layer garis bawah. Karena agar penempatan posisi layernya tidak berubah. 2. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer baru. Buat dua layer. Beri nama layer dengan nama gambar dan nama kemenu. 3. Pada layer gambar penulis ingin membuat tampilan banner image builder yaitu dengan cara klik Commands > Banner Image Builder. Maka akan tampil kotak dialog seperti Gambar 3.37.

Gambar 3.37 Banner Image Builder

Dari kotak dialog Insert Flash Button, lakukan beberapa pengaturan sebagai berikut : a. Klik Browse… untuk mencari gambar pertama. b. Lakukan pada Browse… yang berikutnya untuk mencari gambar berikutnya. c. Beri tanda centang pada kotak Show Transitions in MS Internet Explorer d. Pada kotak URL, berikan link untuk gambar (jika menginginkan gambar memiliki link).

48

e. Pada kotak target tentukan bagaimana browser akan terbuka jika gambar diklik. f. Pada Rotary Every….Seconds, berikan nilai dalam satuan detik untuk lamanya waktu perpindahan /transisi antar gambar. 4. Pada layer kemenu, klik Flash Button pada Insert Bar > Media, untuk membuat tombol dengan membuka kotak dialog Flash Button. 5. Pilih Style Button Soft-Orange, masukkan Button Teks “MENU”, lalu pilih Font “Verdana” Size “6” dan Linknya menu.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “menu.swf”. 6. Lalu Save dengan nama tour.htm

Gambar 3.38 Tampilan Tour

49

Langkah kelima dalam pembuatan GuestBook adalah : 1. Tampilan header dan garis bawahnya sama, penulis mengSave As tampilan menu utama dan menghapus layer yang ada kecuali layer header dan layer garis bawah. Karena agar penempatan posisi layernya tidak berubah. 2. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer baru. Beri nama layer dengan nama guestbook. 3. Buat tabel didalam form dengan 5 baris dan 3 kolom dan besar border 0. 4. Karena bagian paling atas tabel untuk judul tabel maka blok baris pertama lalu klik kanan pilih Tabel > Merge Cells. Kolom pada baris pertama akan menjadi satu. 5. Pada bagian paling atas tabel beri teks “GUEST BOOK”. 6. Isikan teks pada kolom pertama : a. Baris pertama

: “Nama”

b.Baris kedua

: “Email”

c. Baris ketiga

: “Komentar”

7. Atur teks tersebut dengan Align = Center dan beri warna #0000FF. 8. Beri format tebal pada teks tersebut. 9. Tambahkan Teks Field pada baris Nama. Atur panjang Field 50 dan panjang karakter yang dapat diisikan 30. Pilih type Teks Fields dengan Single Line. Pada Property Inspector tampil property Text Fields seperti yang terlihat pada Gambar 3.39.

Gambar 3.39 Text Fields Property Pada Property Inspector

10. Tambahkan Teks Field pada baris Email. Atur panjang Field 50 dan Panjang karakter yang dapat diisikan 30. Pilih type Teks Fields dengan Single Line.

50

Gambar 3.40 Tampilan Teks Fields untuk Nama dan Email

11. Tambahkan Teks Field pada baris Komentar. Pilih type Teks Fields dengan Multi Line. Atur Char Width 40 dan Numb Lines 5 pada Property Inspector.

Gambar 3.41 Tampilan Teks Fields untuk Komentar

12. Tambahkan tombol Kirim untuk menyimpan buku tamu dan tombol Cancel untuk menghilangkan teks yang ada di Teks Fields.

Gambar 3.42 Tampilan keseluruhan dari Guest Book

13. Pada layer kemenu, klik Flash Button pada Insert Bar > Media, untuk membuat tombol dengan membuka kotak dialog Flash Button. 14. Pilih Style Button Soft-Orange, masukkan Button Teks “MENU”, lalu pilih Font “Verdana” Size “6” dan Linknya menu.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “menu.swf”. 15. Lalu Save dengan nama guestbook.htm.

51

Gambar 3.43 Tampilan Halaman Guest Book

Langkah keenam pembuatan database dengan MYSQL adalah : 1. Pada browser ketikkan http://localhost/phpmyadmin/ untuk membuat database mysql dengan phpmyadmin. 2. Beri nama databasenya guestbook

52

Gambar 3.44 Database baru 3. Setelah itu klik create. Darabase baru sudah terbentuk, sekarang kita tinggal membuat tabelnya. Tabelnya diberi nama guest. Berikan field sejumlah 4 yaitu : id, nama, email, komentar.

Gambar 3.45 Membuat nama tabel

4. Isikan field sejumlah 4 yaitu : id, nama, email, komentar. Field pertama masukkan id.

53

Gambar 3.46 Membuat field

Tabel 3.1 : Fixed pada tabel guest Field

Tipe

panjang

id

int

5

atribut

kosong

default

Not null

Extra

PIU

Auto_incr

P

eement nama

varchar

25

Null

Null

email

varchar

25

Null

Null

komentar

text

Null

Null

5. Jika sudah klik simpan. Maka hasil tabel guest seperti Gambar 3.47.

54

Gambar 3.47 Tabel guest

Langkah ketujuh pembuatan Lihat GuestBook adalah : 1. Tampilan header dan garis bawahnya sama, penulis mengSave As tampilan menu utama dan menghapus layer yang ada kecuali layer header dan layer garis bawah. Karena agar penempatan posisi layernya tidak berubah. 2. Klik Draw Layer pada Insert Bar > Common, untuk membuat layer baru. Beri nama layer masing-masing. 3. Pilih

Style

Button

Soft-Orange,

masukkan

Button

Teks

“ISTANA

KEPRESIDENAN”, lalu pilih Font “Verdana” Size “6” dan Linknya index1.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “istanakepresidenan.swf”. 4. Pilih Style Button Soft-Orange, masukkan Button Teks “NAMA PRESIDEN DAN

WAKIL”,

lalu

pilih

Font

“Verdana”

Size

“6”

dan

Linknya

namapresidendanwakil.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “daftarnama.swf”. 5. Pilih Style Button Soft-Orange, masukkan Button Teks “TOUR”, lalu pilih Font “Verdana” Size “6” dan Linknya tour.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “tour.swf”.

55

6. Pilih Style Button Soft-Orange, masukkan Button Teks “MENU”, lalu pilih Font “Verdana” Size “6” dan Linknya menu.htm. Targetnya dan Bg Color kosongkan. Lalu Save As “menu.swf”. 7. Pada layer tampil masukkan script php untuk menampilkan isi dari guestbook. Sehingga setelah menekan tombol kirim maka akan tampil isi dari guestbook. 8. Pada Document Toolbar > Title diberi Nama “Lihat Guest Book”. 9. Save dengan nama lihat_guest.php.

Gambar 3.48 Tampilan lihat bukutamu