BAB III ANALISIS DAN PEMBAHASAN MASALAH

BAB III ANALISIS DAN PEMBAHASAN MASALAH

DE LA ROSSA CAFÉ & RESTAURANT yang beralamat di Jl. Kemang Selatan raya No.111 Jakarta Selatan merupakan usaha yang bergerak di bidang makanan dan minuman ( food and beverages ) yang menyajikan berbagai macam produk mulai dari makanan yaitu berbagai makanan pembuka sampai penutup, minuman dari yang beralkol yaitu berbagai macam wine dan minuman nonalcohol, selain itu juga, restaurant ini menawarkan tempat yang digunakan untuk berbagai macam acara yang disajikan dalam bentuk buffet dan set menu yang disajikan belum dilengkapi dengan Website sebagai sarana promosi dan informasi bagi para pelanggannya. Oleh karena itu saya sebagai penulis akan merancang dan mempromosikan secara singkat seluruh informasi yang berkaitan dengan restaurant tersebut ke dalam sebuah website. Untuk membangun situs web tersebut sebelumnya penulis akan membuat struktur hirarki dari web tersebut, karena struktur hirarki merupakan sebuah gambaran secara umum di dalam perancangan dan juga pembuatan situs web itu.

3.1

Struktur Navigasi Website ini tergolong website yang memiliki struktur navigasi hirarki. Hal

ini dikarenakan navigasi ini memiliki percabangan dengan slavepageslavepagenya yang dapat kembali ke halaman utama.

31

prereloader

menu

aboutUs

product

gallery

guestbk

contact

banquet

food

wine

signup

map

apptzr

australia

View

soup

californi

salad

french

seafood

italia

meat

desertw

dessert

Gambar 3.1. Rancangan Struktur Navigasi Keterangan :

1. PRERELOADER, merupakan tampilan awal website De la rossa . 2. MENU, merupakan tampilan dari website yang berisi link-link untuk menuju ke halaman berikutnya dalam website De la rossa cafe. 3. ABOUTUS, berisikan informasi singkat mengenai De la rossa cafe. 4. PRODUCT, merupakan halaman mengenai product-product yang dimiliki De la rossa café yaitu makanan, banqueting dan aneka wine 5. GALLERY, merupakan halaman berisikan gambar tempat, makanan, dan acara yang pernah diadakan di delarossa café

32

6. GUEST BOOK, merupakan halaman yang berfungsi sebagai buku tamu yang dapat diisi langsung oleh pengunjung site. 7. CONTACT, merupakan halaman web mengenai alamat dan no. telepon yang dapat dihubungi yang disertakan dengan gambar peta lokasi.

3.2

Persiapan Perangkat Pembuatan Website (Perancangan situs) Dalam pembuatan website ini ada 6 perangkat utama yang disediakan

yaitu : 1.

Web server Penulis menggunakan web server Apache versi 1.3.33 (Win32) yang dijalankan pada system operasi Windows XP.

2.

Web Browser Sebenarnya jenis web browser yang digunakan tidaklah penting, karena pada dasarnya PHP merupakan bahasa script yang browser independent, yaitu script-script PHP yang digunakan akan diproses dan diterjemahkan pada posisi server (web server) bukan pada client (web browser) sehingga script-script PHP tersebut dapat dilihat di browser manapun. Namun dalam pembuatan aplikasi ini, penulis menggunakan browser Microsoft Internet Explorer versi 5.

3.

Database server Karena website ini menggunakan database, maka diperlukan database server sebagai penyedia informasi database yang kemudian dapat diolah ataupun dimanipulasi dari dalam website. Dalam hal ini penulis menggunakan MySQL database server versi

4.1.13a-nt

for Win32 sebagai

server database. 4.

PHP sebagai modul web server Agar dapat menterjemahkan dan memproses dokumen PHP oleh server, maka diperlukanlah PHP yang dijadikan sebagai modul dari web tersebut. Penulis menggunakan PHP versi 5.1.0 for Win32.

33

Adapun hubungan antar perangkat tersebut di atas dapat dilihat pada gambar berikut : REQ

Web Browser (Internet Explorer 5)

Web server Apache dan PHP

HTTP

MYSQL

ServerDB (MySQL)

Response Gambar 3.2 Hubungan Antar Komponen Web

3.3

Rancangan Halaman Dalam membuat website ini penulis merancang pembuatan semua

halaman site dengan menggunakan Macromedia Flash MX, dipadu dengan bahasa pemrograman PHP serta MySQL sebagai relational data base management sistem. 3.3.1 Rancangan Halaman Prereloader halaman ini merupakan tampilan paling awal pada website. Pada halaman ini terdapat link yang menuju ke halaman home.

1

1

1

1

2 4 5

6

7 3

1

1

1

Gambar 3.3. Rancangan halaman index

1

34

Keterangan: 1.

merupakan animasi gambar tempat,makanan,wine yang dimiliki oleh de la rossa café.

2.

merupakan animasi text berjalan mengenai selogan de la rossa café.

3.

merupakan animasi text berjalan mengenai alamat de la rossa café.

4.

merupakan animasi text “de la rossa café”

5.

merupakan animasi text “proudly present”

6.

merupakan animasi berjalan object.

7.

merupakan animasi text yang berisikan link ke halaman menu.

3.3.2

Rancangan Halaman menu Halaman ini adalah tampilan ke dua pada website. Pada halaman ini

terdapat link-link untuk menuju ke halaman berikutnya.

10 1

2

1

3 4 5 6

8

7 9 Gambar 3.4. Rancangan Halaman Menu

35

Keterangan: 1.

Merupakan animasi text ucapan “ welcome visitor to our website”,

2.

Merupakan Logo dari de la Rossa cefe.

3.

Merupakan link animasi yang menuju ke halaman ABOUTUS.

4.

Merupakan link animasi yang menuju ke halaman PRODUCT

5.

Merupakan link animasi yang menuju ke halaman GALLERY

6.

Merupakan link animasi yang menuju ke halaman GUESTBOOK.

7.

Merupakan link animasi yang menuju ke halaman CONTACT

8.

Merupakan animasi gambar bunga mawar

9.

Berisikan hari dan tanggal sekarang..

10. Merupakan animasi text de la rosa café.

3.3.3 Rancangan Halaman About Us Halaman ini merupakan sekilas tentang dela rossa café yang berisikan link ke halaman home.

10 1

2

1

3 4 5

7

6 8 9

Gambar 3.5. rancangan halaman about us.

36

Keterangan: 1.

Merupakan animasi gambar bunga mawar.

2.

Merupakan animasi gambar berjalan logo de la rossa café.

3.

Merupakan tulisan about us.

4.

Merupakan animasi gambar dinning room de la rossa café.

5.

Merupakan animasi gambar lobby room de la rossa café.

6.

Merupakan animasi gambar waterfall de la rossa café.

7.

Merupakan sekilas tentang de la rossa café.

8.

Merupakan object yang mengandung link yang menuju ke halaman menu

9.

Merupakan tanggal dan hari seharang.

3.3.4

Rancangan Halaman Product Halaman ini berisikan mengenai product yang dimiliki dela rossa café yang berisikan link ke halaman banqueting, food, wine dang kembali ke home.

1 2

3

2

4 5

6

7

8

9

10 11 12

Gambar 3.6. Rancangan halaman product.

37

Keterangan: 1.

Merupakan animasi text de la rossa café.

2.


3.

Merupakan animasi logo de la rossa café.

4.

Merupakan text product.

5.

Merupakan animasi gambar mengenai banqueting.

6.

Merupakan animasi gambar mengenai food.

7.

Merupakan animasi gambar mengenai wine.

8.

Merupakan link yang menuju ke halaman banqueting.

9.

Merupakan link yang menuju ke halaman food.

10. Merupakan link yang menuju ke halaman wine. 11. Merupakan link yang menuju ke halaman menu. 12. Merupakan tanggal dan hari sekarang.

3.3.4.1 Rancangan Halaman Banqueting Halaman ini berisi informasi mengenai banqueting dan juga mengenai persyaratan yang harus diketahui oleh para pelanggan. 10 1

2

1

3 4 5

7

6 8 11

9

Gambar 3.7. rancangan halaman banqueting.

38

Keterangan: 1. Merupakan animasi gambar bunga mawar. 2.


3.

Merupakan tulisan product.

4.

Merupakan animasi gambar banqueting1 de la rossa café.

5.


6.


7.

Merupakan

sekilas

informasi

tentang

banqueting

dan

persyaratannya. 8.


9.


10.

Merupakan animasi teks berjalan de la rossa café.

11.

Merupakan object yang mengandung link kembali ke halaman product

3.3.4.2 Rancangan Halaman Food. Halaman ini berisi mengenai menu makanan yang dimiliki oleh de la rossa café dan juga mengandung link ke halaman food berikutnya dari soup sampai ke dessert. 10 1

2

1

3 4 5

7

6 8 11

12

Gambar 3.8. rancangan halaman food.

9

39

Keterangan: 1.


2.


3.


4.

Merupakan animasi gambar food1 de la rossa café.

5.


6.


7.

Merupakan sekilas informasi tentang food dan persyaratannya.

8.


9.


10.


11.


12.

Merupakan link menuju ke halaman food berikutnya.

3.3.4.3 Rancangan Halaman Wine. Merupakan halaman mengenai berbagai macam wine yang dimiliki oleh de la rossa café dari berbagai Negara penghasil wine, halaman ini mengandung link ke halaman wine berikutnya.

40

10 1

2

1

3 4 7

5 6

8 12

11

9

Gambar 3.9. Rancangan halaman wine. Keterangan: 1.


2.


3.


4.

Merupakan animasi gambar wine1 de la rossa café.

5.


6.


7.

Merupakan sekilas informasi tentang wine dan persyaratannya.

8.


9.


10.


11.


12.

3.3.5

Merupakan link menuju ke halaman wine berikutnya.

Rancangan Halaman Gallery

41

Halaman ini berisikan gambar mengenai tempat yang dimiliki oleh de la rossa café, makanan,wine dan acara-acara yang pernah diadakan di de la rossa café.

1 2

3

2

4 5

14

6

15

7

16

19

8

17

9

18 10

11

12

13 20 21

Gambar 3.10. Rancangan halaman gallery. Keterangan: 1.

Merupakan animasi text de la rossa café.

2.

Merupakan animasi gambar bunga mawar

3.

Merupakan animasi logo de la rossa café.

4.

Merupakan text gallery.

5.

Merupakan gambar lobby kecil mengandung link menuju ke ukuran yang lebih besar

6.

Merupakan gambar dinning room kecil mengandung link menuju ke ukuran yang lebih besar

7.

Merupakan gambar waterfall kecil mengandung link menuju ke ukuran yang lebih besar

42

8.

Merupakan gambar dinning entrance kecil mengandung link menuju ke ukuran yang lebih besar

9.

Merupakan gambar garden kecil mengandung link menuju ke ukuran yang lebih besar

10. Merupakan gambar garden view kecil mengandung link menuju ke ukuran yang lebih besar 11. Merupakan gambar dessert buffet kecil mengandung link menuju ke ukuran yang lebih besar 12. Merupakan gambar murble buffet kecil mengandung link menuju ke ukuran yang lebih besar 13. Merupakan gambar aneka soup kecil mengandung link menuju ke ukuran yang lebih besar 14. Merupakan gambar full buffet kecil mengandung link menuju ke ukuran yang lebih besar 15. Merupakan gambar wine kecil mengandung link menuju ke ukuran yang lebih besar 16. Merupakan gambar dessert item kecil mengandung link menuju ke ukuran yang lebih besar 17. Merupakan gambar garden wedding kecil mengandung link menuju ke ukuran yang lebih besar 18. Merupakan gambar dinning wedding kecil mengandung link menuju ke ukuran yang lebih besar 19. Merupakan tempat menamplkan gambar yang lebih besar. 20. Merupakan link yang menuju ke halaman menu. 21. Merupakan tanggal dan hari sekarang.

43

3.3.6

Rancangan Halaman Guestbook Halaman ini merupakan guest book yang dapat disikan oleh pegunjung web.

1 2 3: 4 : 5

: :

:

6

7 8

Gambar 3.11. Rancangan Halaman GuestBook Keterangan: 1.

Merupakan animasi gambar logo de la rossa café.

2.

Merupakan tulisan dari signup tersebut.

3.

Merupakan kolom nama dan diisikan inputan nama.

4.

Merupakan kolom email dan diisikan inputan email.

5.

Merupakan kolom pesan dan diisikan inputan pesan.

6.

Merupakan tombol kirim yang akan megirim jika kolon signup telah diisi.

7.

Merupakan tombol reset yang akan meghapus atau menulis ulang.

8.

Merupakan tombol link yang menuju ke halaman menu.

44

3.3.7

Rancangan Halaman Contact Halaman ini berisikan mengenai alamat dan no. telepon tang dapat dihungi oleh pengunjung yang berisikan link ke peta lokasi dan kembali ke halaman home.

1 2

2 3 4

5

8

6

9 7

10

Gambar 3.12. Rancangan halaman contact Keterangan: 1. Merupakan animasi text De La Rossa Café. 2. Merupakan animasi gambar bunga mawar 3. Merupakan animasi logo dari De La Rossa Café. 4. Merupakan tulisan dari contact tersebut. 5. Merupakan tulisan object tulisan contact 6. Merupakan daftar alamat dan nomor telepon de la rossa café. 7. Merupakan animasi bunga mawar. 8. merupakan gambar peta lokasi dari de la rossa café dalam ukuran yang kecil. 9. Merupakan text yang mengandung link ke gambar peta lokasi dari de la rossa café dengan ukuran yang lebih besar. 10. Merupakan tanggal dan hari sekarang.

45

3.4

Pembuatan Website DE LA ROSSA CAFÉ & RESTAURANT Setelah pendefinisian rancangan keseluruhan halaman, selanjutnya kita

akan memulai pembuatan website tersebut. Selanjutnya akan dijelaskan langkahlangkah bagaimana membuat halaman tersebut dari awal hingga akhir.

3.4.1. Halaman prereloader. Halaman Home yang penulis sajikan menampilkan animasi logo, animasi nama dan alamat restaurant, animasi gambar-gambar tempat dan product de la rossa, animasi object dan serta satu buah link yang dapat menghubungkan index ke halaman-halaman berikutnya. Berikut ini adalah urutan langkah-langkah pembuatan halaman index dengan menggunakan Macromedia Flash Mx: 1.

Klik start > Macromedia > Macromedia Flash Mx kemudian akan muncul tampilan berikut:

Gambar 3.13. Tampilah area kerja flash Mx. 2.

Untuk perancangan ukuran kanvas lakukan sesuai dengan keinginan, maka prosedur yang dapat dilakukan yaitu dengan mengklik menu Modify > Documents.

46

Gambar 3.14 Kotak Dialog Documents Properties

3.

kemudian layer 1 diubah menjadi background dengan membuat kotak seukuran dengan ukuran dokumen dengan cara Tools tab > pilih rectangle tool

dan di beri warna linear hitam color mixer.

Gambar.3.15.kotak dialog linear colour.

4.

Kemudian pada background tersebut diberi dua buah object panjang diatas dan dibawah dengan cara Tools > Rectangle tool , buat lebar seukuran background, kemudian beri warna linear.

47

Gambar. 3.16. Warna linear pada color mixer. 5.

Setelah background dibuat, kemudian tambah kan 1 buah layer diberi nama “ textanimasi1” untuk membuat animasi text pembuka : o Di layer textanimasi1 kita akan membuat animasi text “ de la rossa café”. Pada frame1, klik menu insert > new symbol atau F8 > create new symbol > name= textanimasi1 >movieclip.

3.17. kotak dialog symbol Kemudian masukkan keyframe dengan mengklik menu Insert > Timeline > Keyframe di frame 12 lalu kembali lagi ke frame 1. Di frame 1 ini klik object kemudian tarik ke sebelah kiri klik kembali kemudian kita ganti warna oject tersebut dengan warna apha para tab properties dan beri angka 0 % pada alpha amount.

3.18. kotak dialog color alpha

48

Kemudian masukkan keyframe dengan mengklik menu insert >Timeline > Keyframe di frame 23, kemudian klik kembali menu insert > timeline > blankkeyframe, pemberian keyframe dan blank keyframe dilakukan sampai di frame ke 35. 6.

Kemudian kita akan membuat layer baru beri nama “texanimasi2” dengan tulisan “proudly present”. Tata cara pembuatan layer ini sama dengan textanimasi1, tetapi layer ini di mulai pada frame ke 35 sampai di frame ke 48.

7.

kemudian kita akan membuat folder yang diberi nama “ garis”di layer dan kita akan membuat dua buah layer: o layer pertama diberi nama “garis1”. Masukan keyframe dengan mengklik menu insert > timeline > keyframe pada frame35 dan 38, setelah itu kita buat sebuar garis lurus kemudian comfort garis tersebut dengan mengklik menu insert > new symbol / F8 > create new symbol > name=garis1 > graphic. Pada frame ke 35 kita klik pada object dan ubah warnanya menjadi alpha dengan alpha amount = 0%. o Layer ke dua dibri nama “garis2”, pada layer ini tata cara pembuatan sama dengan layer pertama tetapi frame dimulai pada frame ke 38 sampai ke 41.

8.

Kemudian kita akan membuat satu buah folder di layer diberi nama “maskright”, di folfer ini kita akan membuat dua buar layer: o Layer “line” kita akan membuat garis melengkung ke bawah di sebelah kanan dengan menggunakan line tool pada tools kemudian masukan keyframe pada frame ke 48 dan 58. o

Pada “layer1” kita akan membuat object kotak dengan menggunakan rectangle tool

pada tools yang akan

menutupi object garis pada frame ke 48 dan 58, proser

49

selanjutnya kita akan membuat animasi “masking” dengan cara mengklik kanan pada layer1 kemudian pilih mask.

3.19. kotak dialog masking. 9.

kemudian kita akan membuat folder lagi di layer beri nama “maskleft”, di folder ini kita akan membuat dua folder lagi: o Layer “line” kita akan membuat garis panjang dan melengkung di sebelah kiri dengan menggunakan “line tool”

kemudian masukan pada line ke 48 dan 70.

o Layer1 kita akan membuat object kotak yang akan menutupi object garis kemudia kita akan membuat keyframe pada frame ke 48 dan 53, frame ke 53 dan 62 dan frame ke 62 dan 70. sebelumnya kotak tersebut kita akan membuat symbol dengan cara menu insert > new symbol / F8 > create new symbol > movieclip. Setelah itu kita akan membuat animasi masking dengan cara yang sama pada langkah 8. 10.

Buat layer baru dan beri nama “text”, disini kita akan membuat text slogan dan alamat de la rossa café dengan menggunakan “text tool” pada tab tools yang akan diletakan di atas dan dibawah stage. o Pada slogan kita akan membuat symbol, menu insert > new symbol > create new symbol > movieclip, kemudian

50

klik object slogan yang sudah

di beri symbol untuk

membuat text animasi berjalan, masukan keyframe pada frame ke 1,16,32 dan 48 dan masukan kembali keyframe pada frame ke 34 dan 80. setiap frame kita akan beri tween > motion pada tab property.

Gambar 3.20. kotak dialog keyframe

o Pada alamat kita akan membuat symbol, menu insert > new symbol > create new symbol > movieclip, kemudian klik object slogan yang sudah

di beri symbol untuk

membuat text animasi berjalan, masukan keyframe pada frame ke 1,18,36,54,72,90 kemudian keyframe lagi pada frame ke 105 dan 118. setiap frame kita akan beri tween > motion pada tab property.

Gambar 3.21. kotak dialog keyframe 11.

Buat folder pada layer dengan nama “gambar”, disini kita akan membuat beberapa animasi gambar tempat-tempat dan product yang ada di de la rossa café. o Pada layer1 kita beri nama “ loby “ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 75, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=loby > movieclip. Kemudian kita akan

51

membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 76,79,82, pada frame awal (75) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masing-masing frame > create motion tween atau pada tab properties. o Pada layer2 kita beri nama “dinning“sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 80, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=dinning > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 8184,87, pada frame awal (80) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masing-masing frame > create motion tween atau pada tab properties. o Pada layer3 kita beri nama “terjun“ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 85, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=loby > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 86,89,92, pada frame awal (85) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masing-masing frame > create motion tween atau pada tab properties. o Pada layer4 kita beri nama “buffet“ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 90, setelah itu gambar kita akan beri symbol

52

dengan cara menu insert > symbol > create new symbol / F8 > name=buffet > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 91,94,97, pada frame awal (90) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masing-masing frame > create motion tween atau pada tab properties. o Pada layer5 kita beri nama “garden“,sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 95, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=garden > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 96,99,102, pada frame awal (95) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masing-masing frame > create motion tween atau pada tab properties. o Pada layer6 kita beri nama “ stage “ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 100, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=stage > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 101,104,107, pada frame awal (100) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masingmasing frame > create motion tween atau pada tab properties.

53

o Pada layer7 kita beri nama “buffet2 “ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 105, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=buffet2 > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 106,109,112, pada frame awal (105) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masingmasing frame > create motion tween atau pada tab properties. o Pada layer8 kita beri nama “ wine “ sebelumnya kita akan mengimport gambar ke stage degan cara menu File > import > import to stage atau ctrl + R, dan diletakan pada frame ke 110, setelah itu gambar kita akan beri symbol dengan cara menu insert > symbol > create new symbol / F8 > name=loby > movieclip. Kemudian kita akan membuat animasi pada gambar tersebut buat keyframe baru pada frame ke 111,114,117, pada frame awal (110) warna kita ganti dengan warna alpha pada tab properties terakhir kita akan buat tween klik kanan pada masingmasing frame > create motion tween atau pada tab properties. 12.

Buat layer baru bari nama “explore” di sini kita akan membuat animasi teks yang berisi link menuju ke halaman berikutnya. Pertamatama kita buat keyframe pada frame ke 75 kemudian buat teks dengan dengan tulisan “explore??”, rubah symbol tulisan tersebut dengan cara klik menu insert > symbol > create new symbol > name= explore?? > movieclip. Setelah itu kita akan membuat animasi warna pada teks tersebut yaitu klik menu edit > edit symbol / ctrl + 5 kemudian

54

masukan keyframe pada frame ke 1,2,3,4,5. kemudian kita beri action klik Windows > Action / F9.

Gambar 3.22 Kotak Dialog Actions

Action scriptnya sebagai berikut : on (release) { getURL("menu.html"); } 13.

Buat layer baru beri nama “object”, disini kita akan membuat animasi object bergerak. Masukan keyframe pada frame ke 75, buat bentuk segitiga dengan menggunakan line tool pada tools kemudian beri warna putih pada object tersebut setelah itu copy object tersebut menjadi beberapa buah, setelah tercopy dan jadikan menjadi satu, buat symbol pada object tersebut dengan cara klik menu insert > new symbol > create new symbol / F8 > name=object > movieclip. Kemudian kita akan membuat object tersebut bergerak klik menu edit > edit symbol / Ctrl + E . kemudian masukan keyframe pada frame ke 7,13,20,26,33,39, ubah posisi object tersebut pada tiap frame dan beri tween klik kanan > create motion tween.

14.

Buat layer baru beri nama “line”, disini kita akan membuat anamasi garis, masukan keyframe pada frame ke 76 dan 80, buat garis memanjang pada tiap-tap frame, geser garis pada frame 76 kearah kakan stage, lalu berikan motion tween pada frame 76.

55

15.

Setelah semua langkah-langkah di atas dilakukan maka keseluruhan layer yang telah dibuat dan disain tampilan dalam ruang kerja Macromedia Flash MX adalah sebagai berikut :

Gambar 3.23. Tampilan layer keseluruhan pada halaman index

3.4.2

Halaman Menu Pada halaman ini berisi berbagai macam animasi

menu link yang

menghubungkan ke halaman berikutnya. Berikut ini adalah urutan langkah-langkah pembuatan halaman menu tersebut: 1.

Klik Start > Macromedia > Macromedia Flash MX, kemudian akan keluar tampilan seperti pada gambar 3.11 di atas.

2.

Untuk perancangan ukuran kanvas, prosedur yang dilakukan sama dengan cara pembuatan ukuran kanvas pada halaman index.

3.

Buat layer baru “layer 1” disini kita akan memasukanbackground bingkai dengan mengimport ke library dengan cara klik file > import > import to library kemudian pada color mixer pilih pada tab fill style > pilih bitmap > pilih gambar bingkai.

4.

Buat layer baru lagi “ layer 2” buat object persegi panjang pada rectangle tools sepanjang dari bingkai tersebut, beri warna putih.

56

Pada object tersebut kita akan membuat animasi yang akan menutupi warna background di stage, kita akan rubah object tersebut insert > new symbol > create new symbol > movieclip, tampilan pada gambar 3.15. pada layer tesebut masukan keyframe pada frame ke 19 insert > timeline > keyframe kemudian beri motion klik kanan frame > create motion tween selanjutnya kita akan membuat efek masking kilk kanan pada layer ke2 > pilih masking tampilan pada gambar 3.17. 5.

Buat later baru “ layer3” buat object kotak yang akan menutupi bagian dalam dari bingkai tersebut beri warna putih.

6.

Buat layer baru lagi “layer4” buat persegi panjang sepanjang bagian dalam bingkai tersebut, rubah object tersebut menjadi symbol klik insert > new symbol > create new symbol > movieclip masukan keyframe pada frame ke19 masukan motion pada frame ke1 klik kanan > create tween motion, kemudian kita akan membuat animasi masking kilk kanan pada layer ke4 > pilih masking tampilan pada gambar 3.17.

7.

Buat layer baru beri nama “ rose” kita akan membuat animasi rose yang akan muncul dari bawah stage, masukan keyframe pada frame ke80 masukan object klik file > import > import file to stage > pilih bunga mawar > ok , rubah object tersebut menjadi symbol, kemidian masukan keyframe baru pada frame ke 85,91,98,104 pada setiap keyframe masukan motion tween.

8.

Buat folder layer beri nama “navigasi” yang akan menampung layerlayer navigasi tersebut : o buat layer baru beri nama “aboutUs”, kita akan membuat animasi yang mengandung link, masukan teks” aboutUs” pada frame ke25 ubah menjadi symbol klik insert > new symbol > create new symbol > name=button. Masukan keyframe baru pada frame ke 30,31,38,41,49, pada setiap keyframe buat motion klik kanan frame > create motion tween. Pada frame ke25 kita akan

57

memasukan efek suara klik sound name pada tab properties > pilih suara yang diinginkan. Kemudian kita akan membuat animasi berkedip pada object tersebut, buat keyframe baru pada frame ke80 dan beri efek suara caranya sama penjelasan diatas, masukan blankkeyframe pada frame ke82 klik insert > timeline > blank keyframe kemudian masukan key frame dan blank keyframe pada frame83 sampai ke 91, lakukan sama dengan frame ke81 dan 91, pada frame ke81 beri efek suara pilih jenis suara pada “sound name”pada frame terakhir frame ke91 kita akan action klik Windows > Action / F9klik pada object tuliskan script sebagai berikut:

on (release) { getURL("aboutus.html"); } o buat layer baru beri nama “product”, kita akan membuat animasi yang mengandung link, masukan teks” product” pada frame ke33 ubah menjadi symbol klik insert > new symbol > create new symbol > name=button. Masukan keyframe baru pada frame ke 38,39,46,49,57, pada setiap keyframe buat motion klik kanan frame > create motion tween. Pada frame ke33 kita akan memasukan efek suara klik sound name pada tab properties > pilih suara yang diinginkan. Kemudian kita akan membuat animasi berkedip pada object tersebut, buat keyframe baru pada frame ke92 dan beri efek suara caranya sama penjelasan diatas, masukan blankkeyframe pada frame ke93 klik insert > timeline > blank keyframe kemudian masukan key frame dan blank keyframe pada frame94 sampai ke 102, lakukan sama dengan frame ke92 dan 93, pada frame ke92 beri efek suara pilih jenis suara pada “sound name” pada frame terakhir frame ke91 kita

58

akan action klik Windows > Action / F9 klik pada object tuliskan script sebagai berikut: on (release) { getURL("product.html"); } o buat layer baru beri nama “gallery”, kita akan membuat animasi yang mengandung link, masukan teks” product” pada frame ke41 ubah menjadi symbol klik insert > new symbol > create new symbol > name=button. Masukan keyframe baru pada frame ke 46,53,62, pada setiap keyframe buat motion klik kanan frame > create motion tween. Pada frame ke41 kita akan memasukan efek suara klik sound name pada tab properties > pilih suara yang diinginkan. Kemudian kita akan membuat animasi berkedip pada object tersebut, buat keyframe baru pada frame ke103 dan beri efek

suara

caranya

sama

penjelasan

diatas,

masukan

blankkeyframe pada frame ke104 klik insert > timeline > blank keyframe kemudian masukan key frame dan blank keyframe pada frame105 sampai ke 113, lakukan sama dengan frame ke103 dan 104, pada frame ke92 beri efek suara pilih jenis suara pada “sound name” pada frame terakhir frame ke113 kita akan action klik Windows > Action / F9 klik pada object tuliskan script sebagai berikut: on (release) { getURL("gallery.html"); } o buat layer baru beri nama “guestbook”, kita akan membuat animasi yang mengandung link, masukan teks” product” pada frame ke48 ubah menjadi symbol klik insert > new symbol > create new symbol > name=button. Masukan keyframe baru pada frame ke 53,54,61,64,72, pada setiap keyframe buat motion klik kanan frame > create motion tween. Pada frame ke48 kita

59

akan memasukan efek suara klik sound name pada tab properties > pilih suara yang diinginkan. Kemudian kita akan membuat animasi berkedip pada object tersebut, buat keyframe baru pada frame ke114 dan beri efek suara caranya sama penjelasan diatas, masukan blankkeyframe pada frame ke115 klik insert > timeline > blank keyframe kemudian masukan key frame dan blank keyframe pada frame116 sampai ke 124, lakukan sama dengan frame ke114 dan 115, pada frame ke114 beri efek suara pilih jenis suara pada “sound name” pada frame terakhir frame ke124 kita akan action klik Windows > Action / F9 klik pada object tuliskan script sebagai berikut: on (release) { getURL("product.php"); } o buat layer baru beri nama “product”, kita akan membuat animasi yang mengandung link, masukan teks” product” pada frame ke56 ubah menjadi symbol klik insert > new symbol > create new symbol > name=button. Klik edit > edit symbols/ ctrl+E, masukan key frame pada frame up beri warna merah, over beri warna kuning dan masukan efek suara, down beri warna abu-abu, kemudian masih dalam keadaan edit symbol masukan 2 layer “ki” dan “ka” masukan keyframe pada frame over, masukan object pada kedua layer tersebut, ubah object menjadi symbol menjadi movieclip.

gambar 3.24. kotak dialog edit symbol

60

Masukan keyframe baru pada frame ke 61,62,69,72,80, pada setiap keyframe buat motion klik kanan frame > create motion tween. Pada frame ke56 kita akan memasukan efek suara klik sound name pada tab properties > pilih suara yang diinginkan. Kemudian kita akan membuat animasi berkedip pada object tersebut, buat keyframe baru pada frame ke125 dan beri efek suara caranya sama penjelasan diatas, masukan blankkeyframe pada frame ke126 klik insert > timeline > blank keyframe kemudian masukan key frame dan blank keyframe pada frame127 sampai ke 135, lakukan sama dengan frame ke125 dan 126, pada frame ke125 beri efek suara pilih jenis suara pada “sound name” pada frame terakhir frame ke125 kita akan action klik Windows > Action / F9 klik pada object tuliskan script sebagai berikut: on (release) { getURL("product.html"); } Masukkan action script pada frame 135 dengan action scriptnya sebagai berikut : stop(); 9.

Buat layer baru “ logo” disini kita akan membuat naimasi logo bergerak dari luar atas stage ke bagian ata stage ,pertama-tama buat keyframe pada frame ke20 masukan object logo ke stage ubah object tersebut menjadi symbol klik insert > new symbol > create new symbol > name=movieclip. Kemudian masukan lagi keyframe yang baru pada frame ke 22,25,28,31,34,37,46

pada setip frame beri

motion klik kanan frame > create tween motion. 10. Buat layer baru beri nama “ welcome”, masukan dua object pada frame ke 85 yaitu “welcome” dan “to our website” ubah kedua object symbol tersebut menjadi movieclip. Pada object welcome edit symbol klik edit > edit symbol / ctrl+E. Masukan keyframe 15,25,35,45,57, pada setiap frame pindahkan object kesebelah kiri

61

dan kanan, kemudian beri tween motion pada setiap frame. Selanjutnya pada object To our website ubah juga object tersebut menjadi movieclip. Pada object tersebut edit klik edit > edit symbol / ctrl+E. msukan keyframe pada frame ke 10,20,30,40,54,73,88 pada setiap frame pindahkan juga object kesebelah kiri dan kanan, kemudian beri tween motion pada setiap frame. 11. Buat layer baru “ sound”, kita akan membuat efek suara, klik pada leyer tersebut kemudian pilih suara pada sound name pada tab properties pada sync = event dan loop. 12. Selanjutnya kita akan membuat tampilan tanggal, bulan dan tahun saat ini. Buat satu buah layer baru dan beri nama layer “Date untuk menampilkan

tanggal,

bulan,

dan

tahun

saat

ini.

Untuk

pembuatannya seleksi frame 20 pada layer Date dan buka action panel dan masukkan cript berikut untuk membuat Array nama hari, dan nama bulan :

namahari = new Array(); namahari[0] = "Minggu"; namahari[1] = "Senin"; namahari[2] = "Selasa"; namahari[3] = "Rabu"; namahari[4] = "Kamis"; namahari[5] = "Jumat"; namahari[6] = "Sabtu"; namabulan = new Array(); namabulan[0] = "Januari"; namabulan[1] = "Februari"; namabulan[2] = "Maret"; namabulan[3] = "April"; namabulan[4] = "Mei"; namabulan[5] = "Juni";

62

namabulan[6] = "Juli"; namabulan[7] = "Agustus"; namabulan[8] = "September"; namabulan[9] = "Oktober" namabulan[10] = "November"; namabulan[11] = "Desember";

Lalu buat Dynamic Text di stage, di properties panel beri nama Variabel “Display”. Pastikan Dynamic Text tersebut terseleksi dan konversi menjadi simbol (Insert > Convert to symbols) dengan behavior movie klip. Seleksi movie klip tersebut kemudian buka Action Panel dan masukkan script berikut :

onClipEvent (load) { myDate = new Date (); tanggal = myDate.getDate(); hari = myDate.getDay(); bulan = myDate.getMonth (); tahun = myDate.getFullYear (); display

=

_root.namahari[hari]+",

"+tanggal+"

"+_root.namabulan[bulan]+", "+tahun; } 13. setelah semua langkah di atas dilakukan maka tampilan layer sebagaiberikut:

gambar 3.25 Tampilan frame keseluruhan halaman menu.

63

3.4.3

Halaman About Us Pada halaman ini menerangkan informasi sekilas mengenai De La Rossa Café & Restaurant berupa product yang dimiliki dan laini-lain. Berikut ini adalah langkah-langkah pembuatan halaman about us: 1.

Klik Start > Macromedia > Macromedia Flash MX, kemudian akan keluar tampilan seperti pada gambar 3.11 di atas.

2.

Untuk perancangan ukuran kanvas, prosedur yang dilakukan sama dengan cara pembuatan ukuran kanvas pada halaman index.

3.

Buat layer baru beri nama “backround” masukan object ke dalam stage klik file > import > import file to library, pilih fill style = bitmap pada color mixer , kemudian masukan object persegi empat yang akan menutupi bagian dalam bingkai beri warna putih di fill color

4.

pada object tersebut.

Buat folder layer beri nama “navigasi” di folder ini berisi layer-layer navigasi berikut: o Buat layer baru beri nama “aboutus” kemudian ketikan text aboutus dengan menggunakan text tools pada tools

pada frame

ke1 dan ke10 pad frame ke1 kita beri efek suara pada sound name di tab properties dan beri motion pada frame tersebut, pad frame ke10 geser ke atas stage. o Buat layer baru beri nama “product” kemudian ketikan “product” pada frame ke1 beri tween motion, masukan lagi keyframe baru pada frame ke6 beri efek suara di sound name pada tab properties dan motion tween, kemudian masukan keyframe baru pada frame ke13 geser object ke kanan, rubah warna pada frame tersebut di color style pada tab properties ubah menjadi alpha rubah pada alpha amount menjadi 0%. o Buat layer baru beri nama “gallery” ketikan “gallery pada frame ke1,11,18, pada frame ke11 beri efek suara kemudian pada frame ke 18 geser object kesebelah kiri dan rubah color stylenya pada

64

tab properties menjadi alpha ubah ukuran alpha amount 0%, pada setip frame diberi tween motion agar object dapat bergerak teratur. o Buat layer baru beri nama “guestbook” ketikan “guestbook” pada frame ke1,16,23, pada frame ke16 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke23 geser object kearah kanan rubah color style menjadi alpha dan alpha amountnya sebesar 0%. o Buat layer baru beri nama “contact” ketikan “contact” pada frame ke1,21,28, pada frame ke21 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke28 geser object kearah kanan rubah color style menjadi alpha dan alpha amountnya sebesar 0%. 5.

Buat layer baru beri nama “logo” kita akan membuat animasi logo de la rossa, masukan keyframe pada frame ke1 dan ke10, pada frame ke 10 seleksi object klik insert > new symbol/ctrl+F8 > movieclip, geser object logo kearah atas stage, seleksi object logo kemudian klik edit > edit symbol / ctrl+E, masukan keyframe pada frame ke 1,8,16,24,33,40,48, geser object logo pada setiap frame kea rah kiri dan kanan dan berikan tween motion pada setiap frame.

6.

Buat layer baru beri nama ”kotak” masukan keyframe pada frame 31 buat object kotak pada rectangle tools sebelumnya rubah terlebih dahulu rectangle tool radius dengan mengklik tanda rubah radiusnya menjadi 25 points.

kemudian

kemudian masukan keyframe

yang baru pada frame ke32,33,34,35 beri warna kuning, biru, hijau, biru dan hijau, kemudian masukan frame baru lagi pada frame ke51 pada frame tersebut rubah ukuran object kotak tersebut menjadi ukuran yang lebih besar menggunakan transform tools

.

Kemudian masukan object button yang mengandung link ke halaman menu klik windows > other panels > common libraries > button

65

pada libraries button pilih circle button. Beri action klik windows > action / F9 kemudian tuliskan scrip berikut: on (release) { getURL("menu.html"); }

Gambar 3.26 kotak dialog rectangle setting.

7.

Buat layer baru beri nama “ sound “ kita akan memasukan suara pada halaman ini dengan cara seleksi layer sound dan beri suara pada sound name di tab properties pada tab sync = event > loop.

8.

Buat layer baru beri nama “tulisan” di layer ini kita akan membuat tulisan mengenai delarossa, pertama masukan keyframe pada frame ke58 kemudian buat tulisan dengan menggunakan text tool

pada

tab tools kemudian beri warna merah pada text tersebut pada fillcolor , selanjutnya kita buat background untuk text tersebut dengan menggunakan rectangle tool muda.

dan beri warna #e3cda1/ coklat

66

Gambar.3.27 Tampilan isi dalam halaman about us

9.

Buat layer baru beri nama “rose” kita akan membuat animasi gambar yang muncul dari luar stage ke stage bagian atas. Masukan keyframe pada frame ke71 dan import gambar klik file > import > import to stage kemudian masukan kembali keyframe pada frame ke 79,83,88,92, pada setiap frame berikan motion tween agar abject bergerak terarah, pada frame terakhir kita akan berikan action klik Windows > Action / F9 stop(); agar object tersebut tida bergerak berulang-ulang.

10. Buat layer baru bri nama”date” disini kita akan membuat tampilan hari,tanggal, bulan dan tahun sekarang, cara pembuatannya sama pada pembuatan tanggal di halaman menu. 11. Buat layer baru beri nama “ gambar” di sini kita akan membuat animasi 3 gambar, masukan 3 buah gambar pada frame ke75, klik file > import > import to stage letakan ketiga gambar tersebut di sebelah kiri stage, kemudian seleksi gambar tersebut ubah symbol klik insert > new symbol > create new symbol > movieclip kemudian edit symbol klik edit > edit symbol / ctrl+E kemudian

67

masukan keyframe pada frame ke1,3,6,10 pada gambar ke2 masukan frame ke 15,18,22,26 dan terakhir masukan frame ke 30,33,36,40. Setelah seluruh prosedur dilakukan maka tampilan frame secara keseluruhan adalah:

Gambar.3.28 Tampilan keseluruhan frame aboutus.

3.4.4

Halaman Product Pada halaman ini berisi 3 macam link product yang menuju ke halaman product yang lebih jelas. Berikut ini adalah langkah-langkah pembuatan halaman product: 1. Klik Start > Macromedia > Macromedia Flash MX, kemudian akan keluar tampilan seperti pada gambar 3.11 di atas. 2. Untuk perancangan ukuran kanvas, prosedur yang dilakukan sama dengan cara pembuatan ukuran kanvas pada halaman index. 3. Buat layer baru beri nama “backround” masukan object ke dalam stage klik file > import > import file to library, pilih fill style = bitmap pada color mixer , kemudian masukan object persegi empat yang akan menutupi bagian dalam bingkai beri warna putih di fill color pada object tersebut. 4. Buat folder layer beri nama “navigasi” yang akan menanmpung layerlayer navigasi.: o Buat layer baru beri nama “aboutus” kemudian ketikan text aboutus dengan menggunakan text tools pada tools

pada

68

frame ke1,3, dan 13, pada frame ke3 kita beri efek suara pada sound name di tab properties dan beri motion pada frame tersebut, pada frame ke13 seleksi object rubah color style menjadi alpha = 0% geser ke kanan stage. o Buat layer baru beri nama “product” kemudian ketikan “product” pada frame ke1 beri tween motion, masukan lagi keyframe baru pada frame ke9 beri efek suara di sound name pada tab properties dan motion tween, kemudian masukan keyframe baru pada frame ke13 geser object ke kiri, rubah warna pada frame tersebut di color style pada tab properties ubah menjadi alpha rubah pada alpha amount menjadi 0%. o Buat layer baru beri nama “gallery” ketikan “gallery pada frame ke1,11,18, pada frame ke11 beri efek suara kemudian pada frame ke 18 geser object kesebelah kanan dan rubah color stylenya pada tab properties menjadi alpha ubah ukuran alpha amount 0%, pada setiap frame diberi tween motion agar object dapat bergerak teratur. o Buat layer baru beri nama “guestbook” ketikan “guestbook” pada frame ke1,16,23, pada frame ke16 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke23 geser object kearah kiri rubah color style menjadi alpha dan alpha amountnya sebesar 0%. o Buat layer baru beri nama “contact” ketikan “contact” pada frame ke1,21,28, pada frame ke21 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke28 geser object kearah kanan rubah color style menjadi alpha dan alpha amountnya sebesar 0%. 3. Buat layer baru beri nama “logo” kita akan membuat animasi logo de la rossa, masukan keyframe pada frame ke1 dan ke10, pada frame ke 10 seleksi object klik insert > new symbol/ctrl+F8 > movieclip, geser object logo kearah atas stage, seleksi object logo kemudian klik edit >

69

edit

symbol

/

ctrl+E,

masukan

keyframe

pada

frame

ke

1,8,16,24,33,40,48, geser object logo pada setiap frame kea rah kiri dan kanan dan berikan tween motion pada setiap frame 4. Buat layer baru beri nama ”kotak” masukan keyframe pada frame 31 buat object kotak pada rectangle tools sebelumnya rubah terlebih dahulu rectangle tool radius dengan mengklik tanda rubah radiusnya menjadi 25 points.

kemudian

kemudian masukan keyframe

yang baru pada frame ke32,33,34,35 beri warna kuning, biru, hijau, biru dan hijau, kemudian masukan frame baru lagi pada frame ke51 pada frame tersebut rubah ukuran object kotak tersebut menjadi ukuran yang lebih besar menggunakan transform tools

.

5. Buat layer baru beri nama “ sound “ kita akan memasukan suara pada halaman ini dengan cara seleksi layer sound dan beri suara pada “sound name” di tab properties pada tab sync = event > loop. 6. Buat folder layer beri nama “link” yang akan menampung link ke halaman banqueting, food,dan wine: o Buat leyer baru beri nama “banqueting” masukan tulisan banqueting

kemudian masukan tulisan tersebut pada frame ke

54,58,63,64,67 rubah object pada setiap frame menjadi button dan berikan tween motion pada setiap frame agar object bergerak beraturan, pada frame ke 54 rubah color style menjadi alpha > alpha amount = 0% kemudian berikan action object tersebut: on (release) { gotoAndStop("b"); } o Buat leyer baru beri nama “banqueting” masukan tulisan banqueting


60,64,67,70,73 rubah object pada setiap frame menjadi button dan berikan tween motion pada setiap frame agar object bergerak

70

beraturan, pada frame ke 54 rubah colorstyle menjadi alpha > alpha amount = 0% kemudian berikan action object tersebut: on (release) { gotoAndStop("a"); } o Buat leyer baru beri nama “banqueting” masukan tulisan banqueting


66,70,73,76,79 rubah object pada setiap frame menjadi button dan berikan tween motion pada setiap frame agar object bergerak beraturan, pada frame ke 54 rubah colorstyle menjadi alpha > alpha amount = 0% kemudian berikan action object tersebut: on (release) { gotoAndStop("au"); } 7. Buat layer baru beri nama “menu”disini kita akan membuat keyframe yang merupakan tampilan dari folder link. Pertama kita akan mengimport tiga buah gambar ke stage pada frame ke79 beri nama frame tersebut dengan nama “m” pada tab properties, kemudian kita akan merubah symbol ketiga gambar tersebut klik insert > new symbol > create new symbols > movieclip kemudian klik edit > edit symbols / ctrl+E masukan keyframe pada frame ke 1,5,10,15 geser object tersebut ke arah atas dan bawah kemudian beri tween motion agar object tersebut bergerak beraturan. Kembali ke scene1 beri keyframe baru pada frame ke82 yang akan menpilkan halaman banqueting, kemudian beri keyframe baru pada frame ke 85 nama”a”,86 nama”s”, 87 nama”sl”, 88 nama”m1”,89 nama”m2” sampai 90 nama”d”frame tersebut akan menampilkan halaman food dari appetizer sampai dessert. Kemudian masukan keyframe baru yang akan mempilkan halaman wine, masukan pada frame ke 96 nama”au”, 97 nama”c”98 nama”f”99 nama”i”100 nama”ds”.

71

8. Buat layer baru beri nama “rose” kita akan membuat animasi gambar yang muncul dari luar stage ke stage bagian atas. Masukan keyframe pada frame ke71 dan import gambar klik file > import > import to stage

kemudian masukan kembali keyframe pada frame ke

79,83,88,92, pada setiap frame berikan motion tween agar abject bergerak terarah, pada frame terakhir kita akan berikan action klik Windows > Action / F9 stop(); agar object tersebut tida bergerak berulang-ulang. 9. Buat layer baru bri nama”date” disini kita akan membuat tampilan hari,tanggal, bulan dan tahun sekarang, cara pembuatannya sama pada pembuatan tanggal di halaman menu. Setelah langkah-langkah diatas dilakukan

maka

tampilah

secara

keseluruhan sebagai berikut:

Gambar 3.29 tampilah keseluruhan frame product. 3.4.4.1 Halaman Banqueting Pada halaman ini berisi informasi singkat mengenai banqueting macammacam acara yang dapat diadakan di de la rossa café & restaurant. Langkah-langkah pada halaman banqueting sama pada halaman product, tetapi ada tambahan frame pada frame menu : Pada layer menu masukan keyframe ke 82 kemudian masukan tulisan mengenai banqueting.

72

:: Banqueting :: Banqueting with Us where the sweetest memories are not forgotten...... banqueting adalah salah satu produck andalan kami untuk acara-acara khusus sesuai dengan acara yang akan adakan.. kami menerima bookingan untuk acara spesial yang akan anda adakan seperti acara pesta perkawinan, ulang tahun, reuni,acara kantor dan acara lainnya sesuai yang anda inginkan. untuk area kami bagi menjadi dua bagian yaitu garden area dan dinning area yang yang memuat sekitang 800 orang untuk standing party. minimal untuk mengadakan acara dalam bentuk buffet sekitar 50 orang , untuk dinning area minimal 100 orang, dan untuk menutup semua area minimal 350 orang. menu-menu yang kami tawarkan yaitu dalam bentuk paket buffet mulai dai harga Rp.100000 sampai 195000. selain itu juga kami akan membuat menu sesuai keinginan anda dan juga sesuai budget yang anda miliki. disamping itu kami juga menyediakan jasa dekorasi untuk acara yang anda inginkan berupa panggung untuk pelaminan, dekorasi ruangan, meja makan dan dekorasi lain. selain itu kami menyewakan alat pendingin ruangan yang dapat digunakan di garden area . for furter information please contact Us very soon.

Gambar 3.30 Tampilan tulisan banqueting

3.4.4.2 Halaman Food Pada halaman ini berisi mengenai menu makanan yang di miliki oleh de la rossa café & restaurant dan berisi link dari appetizer sampai ke desert. Langkah-langkah pada halaman food sama pada halaman product, tetapi ada tambahan frame pada frame menu : Pada layer menu masukan keyframe ke 85 kemudian masukan tulisan mengenai banqueting. :: appetizer :: Pistachio crusted shrimp cocktail Crispy fried tiger prawncoated with pistachio seved with fresh apple salad Oyster seafood gratin Baked Canadian oyster with spinach and assorted seafood served with royal Iranian caviar. Black papper calamari A black pepper marinated calamari deep fried served with tartar sauce Curried salmon and potato cake Grilled scented curried salmonwith Tomato and Bell Pepper Salsa Served with Chili Aioli Brochette of Mussel and Scallop Char Grilled Mussel and Scallop Skewer with Sweet Corn Relish Baked French Escargot Baked French Escargot with Provencal Herbs and Cheese Crust Raspberry Vinaigrette Pan Seared Foie Gras Pan Seared Goose Liver on Warm Mushroom Salad Lace with White Truffle Oil and Red Wine Jus

Gambar. 3.31. Tampilan tulisan Food

73

3.4.4.3 Halaman Wine Pada halaman ini berisi mengenai macam-macam wine dari berbagai Negara yang dimiliki oleh de la rossa café & restaurant. Langkah-langkah pada halaman wine sama pada halaman product, tetapi ada tambahan frame pada frame menu ,pada layer menu masukan keyframe ke 96 kemudian masukan tulisan mengenai banqueting.

:: AUSTRALIA :: Australian white Orlandojacob’s creek, Riesling Penfold, rowson reatreat semilion cardonay southern bin 21 Chateau xanadu, secession semilion chardonnay Penfold,konungga hill chardonnay Wolfblass,Riesling southern Australia Hardy’s chardonnay semillion Wolfblass, semilion chardonnay southern Australia Chateau xanadu semilion Margaret river Australian red Lindeman cawara shiraz Chateau xanaduseccecion shiraz cabernet westrn cost Penfold konuga hill shiraz cabernet Hardy’s, shiraz cabernet shauvignon Penfold rowson retreat merlot Penfold rowson retreat shirz cabernet Wolfblass cabernet shauvignon shiraz red label Wolfblass cabernet shauvignon shiraz yellow label Penfold bin 389 cabernet chauvignon Penfold bin 407 cabernet chauvignon

Gambar. 3.32. Tampilan tulisan wine

3.4.5

Halaman Gallery Pada halaman ini berisi tentang gambar tempat , function, buffet ,menu yang ada di de la rossa café & Restaurant. Berikut ini adalah langkah pembuatan halaman gallery: 4. Klik Start > Macromedia > Macromedia Flash MX, kemudian akan keluar tampilan seperti pada gambar 3.11 di atas. 5. Untuk perancangan ukuran kanvas, prosedur yang dilakukan sama dengan cara pembuatan ukuran kanvas pada halaman index. 6. Buat layer baru beri nama “backround” masukan object ke dalam stage klik file > import > import file to library, pilih fill style = bitmap

74

pada color mixer , kemudian masukan object persegi empat yang akan menutupi bagian dalam bingkai beri warna putih di fill color pada object tersebut. 7. Buat folder layer beri nama “navigasi” yang akan menampung layerlayer navigasi.: o Buat layer baru beri nama “aboutus” kemudian ketikan text aboutus dengan menggunakan text tools pada tools

pada frame

ke1,5, dan 15, pada frame ke3 kita beri efek suara pada sound name di tab properties dan beri motion pada frame tersebut, pada frame ke15 seleksi object rubah color style menjadi alpha = 0% geser ke kanan stage. o Buat layer baru beri nama “product” kemudian ketikan “product” pada frame ke1 beri tween motion, masukan lagi keyframe baru pada frame ke8 beri efek suara di sound name pada tab properties dan motion tween, kemudian masukan keyframe baru pada frame ke17 geser object ke kiri, rubah warna pada frame tersebut di color style pada tab properties ubah menjadi alpha rubah pada alpha amount menjadi 0%. o

Buat layer baru beri nama “gallery” ketikan “gallery pada frame ke1,15,21, pada frame ke15 beri efek suara kemudian pada frame ke 21 geser object kesebelah kanan dan rubah color stylenya pada tab properties menjadi alpha ubah ukuran alpha amount 0%, pada setiap frame diberi tween motion agar object dapat bergerak teratur.

o Buat layer baru beri nama “guestbook” ketikan “guestbook” pada frame ke1,16,23, pada frame ke16 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke23 geser object kearah kiri rubah color style menjadi alpha dan alpha amountnya sebesar 0%. o Buat layer baru beri nama “contact” ketikan “contact” pada frame ke1,21,28, pada frame ke21 kta akan memberikan efek suara dapat

75

di ambil pada sound name, kemudian pada frame ke28 geser object kearah kanan rubah color style menjadi alpha dan alpha amountnya sebesar 0%. 5. Buat layer baru beri nama “logo” kita akan membuat animasi logo de la rossa, masukan keyframe pada frame ke1 dan ke10, pada frame ke 10 seleksi object klik insert > new symbol/ctrl+F8 > movieclip, geser object logo kearah atas stage, seleksi object logo kemudian klik edit > edit

symbol

/

ctrl+E,

masukan

keyframe

pada

frame

ke

1,8,16,24,33,40,48, geser object logo pada setiap frame kea rah kiri dan kanan dan berikan tween motion pada setiap frame, 6. Buat layer baru beri nama ”kotak” masukan keyframe pada frame 31 buat object kotak pada rectangle tools sebelumnya rubah terlebih dahulu rectangle tool radius dengan mengklik tanda

kemudian

rubah radiusnya menjadi 25 points. kemudian masukan keyframe yang baru pada frame ke32,33,34,35 beri warna kuning, biru, hijau, biru dan hijau, kemudian masukan frame baru lagi pada frame ke51 pada frame tersebut rubah ukuran object kotak tersebut menjadi ukuran yang lebih besar menggunakan transform tools

.

7. Buat layer baru beri nama “ sound “ kita akan memasukan suara pada halaman ini dengan cara seleksi layer sound dan beri suara pada “sound name” di tab properties pada tab sync = event > loop. 8. Buat layer baru beri nama “gambar” disini kita akan menampilkan gambar-gambar pada gallery, masukan keyframe pada frame ke 52 sampai frame ke 66 import gambar ke stage yang akan ditampilkan di frame 52 dan buat satu buah kotak untuk menampilkan gambar yang lebih besar, pada frame 52-66 beri nama “1-14 rubah symbol pada masing frame dan beri action script pada script goandstop angkanya hanya diganti sesuai nama pada masing- masing frame. on (release) { gotoAndStop("1");}

76

kemudian

kita

akan

membuat

satu

buah

butto

yang

akan

menghubungkan ke halaman menu klik windows > other panels > common libraries > button. 9. Buat layer baru beri nama “ sound “ kita akan memasukan suara pada halaman ini dengan cara seleksi layer sound dan beri suara pada “sound name” di tab properties pada tab sync = event > loop. 10. Buat layer baru beri nama “rose” kita akan membuat animasi gambar yang muncul dari luar stage ke stage bagian atas. Masukan keyframe pada frame ke29 dan import gambar klik file > import > import to stage


29,32,35,40, pada setiap frame berikan motion tween agar abject bergerak terarah, pada frame terakhir kita akan berikan action klik Windows > Action / F9 stop(); agar object tersebut tida bergerak berulang-ulang. 11. Buat layer baru bri nama”date” disini kita akan membuat tampilan hari,tanggal, bulan dan tahun sekarang, cara pembuatannya sama pada pembuatan tanggal di halaman menu. Jika keseluruhan langkah-langkah diatas dilakukan maka tampilan frame gallery sebagai berikut:

Gambar. 3.33 Tampilan Frame Gallery.

77

3.4.6

Halaman Contact Pada halaman ini berisi mengenai alamat yang dapat di hubungi oleh para pengunjung website dan disertakan peta lokasi dari de la rossa café & restaurant. Berikut ini adalah langkah-langkah pembuatan halaman contact: 1. Klik Start > Macromedia > Macromedia Flash MX, kemudian akan keluar tampilan seperti pada gambar 3.11 di atas. 2. Untuk perancangan ukuran kanvas, prosedur yang dilakukan sama dengan cara pembuatan ukuran kanvas pada halaman index. 3. Buat layer baru beri nama “backround” masukan object ke dalam stage klik file > import > import file to library, pilih fill style = bitmap pada color mixer , kemudian masukan object persegi empat yang akan menutupi bagian dalam bingkai beri warna putih di fill color pada object tersebut. 4. Buat folder layer beri nama “navigasi” yang akan menampung layerlayer navigasi.: o Buat layer baru beri nama “aboutus” kemudian ketikan text aboutus dengan menggunakan text tools pada tools

pada frame

ke1,5, dan 11, pada frame ke3 kita beri efek suara pada sound name di tab properties dan beri motion pada frame tersebut, pada frame ke11 seleksi object rubah color style menjadi alpha = 0% geser ke kanan stage. o Buat layer baru beri nama “product” kemudian ketikan “product” pada frame ke1 beri tween motion, masukan lagi keyframe baru pada frame ke8 beri efek suara di sound name pada tab properties dan motion tween, kemudian masukan keyframe baru pada frame ke13 geser object ke kiri, rubah warna pada frame tersebut di color style pada tab properties ubah menjadi alpha rubah pada alpha amount menjadi 0%. o Buat layer baru beri nama “gallery” ketikan “gallery” pada frame ke1,11, pada frame ke11 beri efek suara kemudian pada frame ke

78

16 geser object kesebelah kanan dan rubah color stylenya pada tab properties menjadi alpha ubah ukuran alpha amount 0%, pada setiap frame diberi tween motion agar object dapat bergerak teratur. o Buat layer baru beri nama “guestbook” ketikan “guestbook” pada frame ke1,14,19, pada frame ke14 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke19 geser object kearah kiri rubah color style menjadi alpha dan alpha amountnya sebesar 0%. o Buat layer baru beri nama “contact” ketikan “contact” pada frame ke1,21,28, pada frame ke21 kta akan memberikan efek suara dapat di ambil pada sound name, kemudian pada frame ke28 geser object kearah atas stage. Kemudian masukan keyframe baru pada frame ke 53 buat tulisan “ the Map “ yang akan diletakan diatas stage. 5. Buat layer baru beri nama “logo” kita akan membuat animasi logo de la rossa, masukan keyframe pada frame ke1 dan ke10, pada frame ke 10 seleksi object klik insert > new symbol/ctrl+F8 > movieclip, geser object logo kearah atas stage, seleksi object logo kemudian klik edit > edit

symbol

/

ctrl+E,

masukan

keyframe

pada

frame

ke

1,8,16,24,33,40,48, geser object logo pada setiap frame ke arah kiri dan kanan dan berikan tween motion pada setiap frame, 6. Buat layer baru beri nama ”kotak” masukan keyframe pada frame 31 buat object kotak pada rectangle tools sebelumnya rubah terlebih dahulu rectangle tool radius dengan mengklik tanda

kemudian

rubah radiusnya menjadi 25 points. kemudian masukan keyframe yang baru pada frame ke32,33,34,35 beri warna kuning, biru, hijau, biru dan hijau, kemudian masukan frame baru lagi pada frame ke51 pada frame tersebut rubah ukuran object kotak tersebut menjadi ukuran yang lebih besar menggunakan transform tools

.

79

7. Buat layer baru beri nama “content” yang berisi informasi halaman kontak. Masukan keyframe pada frame ke 51, pertama masukan tulisan alamat dan nomor telepon dela rossa café, object contact us, kemudian masukan object peta lokasi dela rossa café dalam ukuran yang kecil klik file > import > import to stage > pilih gambar peta lokasi dan buatkan background pada peta lokasi tersebut dengan rectangle tools beri warna #E3CC97. masukan tulisan “ DISINI” yang mengandung link menuju ke peta lokasi yang lebih besar ketikan action sebagai berikut:

on (release) { gotoAndStop(53); } masukan object lagi yang mengandung link juga ke halaman menu kemudian ketikan action sebagai berikut: on (release) { getURL("menu.html"); } 8. Buat layer baru bri nama”date” disini kita akan membuat tampilan hari,tanggal, bulan dan tahun sekarang, cara pembuatannya sama pada pembuatan tanggal di halaman menu. 9. Buat layer baru beri nama “rose” kita akan membuat animasi gambar yang muncul dari luar stage ke stage bagian atas. Masukan keyframe pada frame ke29 dan import gambar klik file > import > import to stage


29,32,35,40, pada setiap frame berikan motion tween agar abject bergerak terarah, pada frame terakhir kita akan berikan action klik Windows > Action / F9 stop(); agar object tersebut tidak bergerak berulang-ulang.

80

10. Buat layer baru beri nama “ sound “ kita akan memasukan suara pada halaman ini dengan cara seleksi layer sound dan beri suara pada “sound name” di tab properties pada tab sync = event > loop. Jika semua langka-lankah diatas dilakukan maka tampilan frame secara keseluruhannya sebagai berikut:

Gambar. 3.38 Tampilan Frame Contact

3.5

Menyiapkan Berkas-berkas basis Data Untuk Perancangan Basis data Dalam web ini diperlukan sebuah basis data yang konsisten dan mampu

melayani penyimpanan data dan pengambilan data yang didapat maupun diminta oleh konsumen. Basis data merupakan komponen penting yang harus dibuat dalam aplikasi web ini. Karena untuk membuat sebuah website interaktif dengan penggunanya, web ini harus memiliki suatu basis data yang konsisten dalam melayani permintaan data yang diinginkan oleh pengguna web, seperti melihat isi dari buku tamu dan pemesanan produk makanan.

3.5.1

Data base (delarossa)

Sebelum membuat table kita harus membuat database terlebih dahulu di MySql:

MySql > CREATE DATABASE delarossa

81

Gambar. 3.34 Pembuatan database delarossa

3.5.2

Tabe Buku Tamu (tamu) Tabel buku tamu digunakan untuk menyimpan data yang telah diisi oleh

pengunjung situs web. Struktur tabel dapat dilihat sebagai berikut : Mysql> CREATE TABLE tamu ( -id int(4) unsigned NOT NULL auto_increment, -nama varchar(30), -email varchar(50), -pesan text, -primari key (id) );

82

3.5.3

Logika Program

Start Input Id,Nama, Email, Pesan

Send=1

Y

Tabel Buku Y

T Reset=1 T End Gambar. 3.35. Logika Program GuestBook 3.5.4

Perancangan Buku Tamu Berikut ini perancangan input output yang akan terlihat pada bagian

content / isi dalam web site. Sign up Halaman ini berfungsi sebagai buku tamu yang dapat di input pengunjung, adapun rancangan input yaitu seperti gambar Berikut

83

Gambar. 3.36. Tampilan Halaman GuestBook

Tabel buku tamu(tamu) Setelah seluruh sign up diisi maka tampilan pada table tamu di mysql sebagai berikut:

Gambar 3.37 Tampilan table tamu pada Mysql

3.5

Spesifikasi Hardware dan Software Agar aplikasi ini dapat berjalan dengan semestinya diperlukan beberapa

persyaratan minimal hardware dan software sebagai berikut : 1.

Hardware a. Processor 1.7 GHz Pentium 4 b. RAM

: 512 MB

c. Hardisk

: 20 GB (instalasi PHP, MySQL dan Apache)

d. Monitor

: VGA

84

2.

Software a. Sistem Operasi : Windows XP b. Interpreter

: PHP

c. Web server

: Apache

d. DBMS software: MySQL e. Browser

3.6

: Microsoft Internet Explorer 5.x

Meng-upload Data Website Ke Internet Agar website yang telah dibuat dapat ditampilkan melalui internet,

pertama - tama yang harus dilakukan adalah membuka situs www.tripod.com, lalu pilih fasilitas yang free, kemudian klik bagian signup today (untuk mendaftar). Setelah itu, untuk memulai menguploadnya dan mengedit website klik file manager dan masukkan member name serta password kita yang sudah kita daftarkan sebelumnya.

Gambar 3.39 Tampilan Home Pada www.tripod.com Setelah langkah diatas dilakukan kemudian kita akan masuk ke halaman file manager dimana semua data-data yang akan kita upload dapat kita masukkan.

85

Gambar 3.40 Tampilan File Manager

Setelah itu klik tombol Upload via (lihat Gambar 3.36), kemudian pilih data – data yang ingin di upload yang terdapat di dalam hardisk kita.

Upload to: http://www.sticklelep.tripod.com/

Gambar 3.41 Masukkan Data - Data Yang Di Upload

Setelah selesai memasukkan data - data yang ingin di upload, selanjutnya klik tombol Upload.

BAB III ANALISIS DAN PEMBAHASAN MASALAH

Recommend Documents