BAB III PEMBAHASAN MASALAH

BAB III PEMBAHASAN MASALAH

3.1

Tahapan Pembuatan Website Toko Furniture. Pada bab ini, menjelaskan analisis dan perancangan dari pembuatan

situs Promosi Furniture The Private Room dengan menggunakan Macromedia Dreamweaver MX. Pada kesempatan ini, penulis mencoba untuk membangun sebuah website yang dijalankan pada sebuah Internet Browser. Untuk membangun perancangan web tersebut, menggunakan bahasa pemrograman HTML sebagai bahasa pemrograman utama.. HTML merupakan sebuah bahasa pemrograman standar dalam aplikasi web yang berbasiskan pada sisi client/pengguna (client side), sehingga tidak diperlukan instansi yang rumit. Untuk dapat menjalankan file HTML ini diperlukan sebuah program penjelajah internet (Internet Browser). Internet Browser yang umum dipakai adalah Microsoft Internet Explorer atau Firefox. Proses pembangunan perancangan situs Promosi Furniture The Private Room dalam tiga tahapan utama. Tahap pertama adalah pendefinisian kebutuhan. Pada tahap ini penulis melakukan inventarisasi terhadap elemen apa saja yang dimasukkan dalam aplikasi situs ini. Tahap kedua adalah tahap perancangan. Pada tahap ini dilakukan perancangan antarmuka grafis untuk tampilan utama situs ini. Pada tahap perancangan antarmuka ini penulis menggunakan bantuan perangkat lunak web editor macromedia dreamweaver sebagai alat utama. Tahapan ketiga adalah tahap implementasi. Merupakan tahap uji coba yang dilakukan untuk melihat perkembangan terakhir dari web yang telah dibuat. Uji coba juga dilakukan sebagai sarana evaluasi sehingga dapat diketahui letak kekurangan dan kesalahan yang mungkin terdapat didalamnya.

30

3.2

Pendefinisian Kebutuhan Website Promosi Furniture The Private Room yang mempunyai

beberapa syarat untuk dapat dijalankan. Aplikasi ini membutuhkan 1. Satu buah format tampilan home. 2. Empat buah format tampilan product. 3. Satu buah format tampilan contact Situs ini dirancang berdasarkan tiga kebutuhan diatas. Daftar ini menjadi pegangan bagi penulis untuk melakukan tahap berikutnya yaitu perancangan antarmuka grafis. Pada akhir pendefinisian kebutuhan ini, penulis sudah mempunyai gambaran kasar tentang bentuk dan fitur-fitur yang ada pada aplikasi utuh ditahap akhir nanti. Format tampilan utama dirancang dengan HTML. Inti utama dari perancangan website ini menggunakan PHP script, Macromedia Flash MX, Page editor yang digunakan adalah Macromedia Dreamweaver MX.

3.3

Perancangan Website

3.3.1 Struktur Navigasi Pada saat pertama kali pengguna akan langsung dihadapkan pada halaman index, kemudian pengguna dapat mengakses halaman-halaman yang ada pada menu pilihan. Menu tersebut adalah Home, Product, Contact. Jenis yang dipakai adalah jenis composite.

31

Home. htm

Home.htm

Livingroom.htm

Contact. htm

Product.htm

Chairs Collecion.htm

Kidsroom.htm

Gambar 3.1 Struktur Navigasi

3.3.2 Menentukan Perancangan Yang Ingin Dibuat 1. Buka program dreamweaver MX. Pilih Html document. 2. Akan muncul sebuah document kosong. 3. Pilih Site, Klik Manage Site.

Gambar 3.2 Manage Site

32

Lampcollection. htm

4. Masukkan nama situs yang diinginkan. 5. Pilih Refresh. 6. Klik Table. 7. Pada Rows anda ketik 3 dan Columns anda ketik 1, dan pada Table Width anda ketik 700. 8. Tekan OK.

Gambar 3.3 Rancangan Table

3.3.3 Membuat Rancangan Header 1. Buka Program Dreamweaver anda. 2. Tarik gambar yang ada didalam Files (Header.gif) kedalam Table baris pertama.

Gambar 3.4 Rancangan Header 33

3. Pilih Table. 4. Pada rows anda ketik 1 dan pada Columns anda ketik 3, dan pada Table Width anda ketik 700. 5. Tekan tombol OK.

Gambar 3.5 Table 6. Tarik gambar yang ada didalam Files (Home.gif), masukkan kedalam Table baris ke 2, Columns pertama.

Gambar 3.6 Home 7. Tarik gambar yang ada di Files (Product.gif), masukkan kedalam Table baris ke 2 Column ke 2. 34

Gambar 3.7 Product 8. Tarik gambar yang ada di Files (Contact.gif), masukkan kedalam Table baris ke 2 Column ke 3.

Gambar 3.8 Contact 9. Pilih Table. 10. Pada Rows anda ketik 1 dan pada Columns anda ketik 0 dan pada Table Width anda ketik 700. 11. Tekan tombol OK. 12. Tarik gambar yang ada didalam Files (welcome.gif), masukkan kedalam table baris ke 3. 13. Pilih Table. 35

14. Pada Rows anda ketik 5, pada Columns anda kosongkan dan pada Table Width ketik 700. 15. Tekan tombol OK. 16. Tarik gambar yang ada didalam Files (judul.gif), masukkan kedalam table baris ke 4. 17. Ketik kata-kata yang anda inginkan pada baris ke 5. 18. Tarik gambar yang ada didalam Files (opening flash.swf), masukkan kedalam table baris ke 6. 19. Ketik kata-kata yang anda inginkan pada baris ke 7. 20. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 8. 21. Tekan tombol F12. 22. Program akan berjalan.

3.3.4 Membuat Rancangan Product 1. Buka Program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 700. 4. Tekan tombol OK. 5. Tarik gambar yang ada didalam Files (gallery.gif), masukkan kedalam table baris ke 4. 6. Pilih Table. 7. Pada Rows anda ketik 1,pada Columns anda ketik 2 dan pada Table Width anda ketik 700. 8. Tekan tombol OK. 9. Ketik kata-kata yang anda inginkan pada baris ke 4, column pertama.. 10. Ketik kata-kata yang anda inginkan pada baris ke 4, column kedua.. 11. Pilih Table.

36

12. Pada Rows anda ketik 1, pada Columns anda ketik 2 dan pada Table Width anda ketik 700. 13. Tekan tombol OK. 14. Tarik gambar yang ada didalam Files (livingroom.gif), masukkan kedalam table baris ke 4, column pertama. 15. Tarik gambar yang ada didalam Files (kidsroom.gif), masukkan kedalam table baris ke 4, column ke 2. 16. Pilih Table. 17. Pada Rows anda ketik 1, pada Columns anda ketik 6 dan pada Table Width anda ketik 700. 18. Tekan tombol OK. 19. Masukkan gambar furniture living room, tarik kedalam baris ke 5 dan column pertama. 20. Ketik nama barang furniture dan harga furniture. 21. Masukkan gambar furniture living room, tarik kedalam baris ke 5 dan column kedua. 22. Ketik nama barang furniture dan harga furniture. 23. Masukkan gambar furniture living room, tarik kedalam baris ke 5 dan column ketiga. 24. Ketik nama barang furniture dan harga furniture. 25. Masukkan gambar furniture kids room, tarik kedalam baris ke 5 dan column ke 4. 26. Ketik nama barang furniture dan harga furniture. 27. Masukkan gambar furniture kids room, tarik kedalam baris ke 5 dan column ke 5. 28. Ketik nama barang furniture dan harga furniture. 29. Masukkan gambar furniture kids room, tarik kedalam baris ke 5 dan column ke 6. 30. Ketik nama barang furniture dan harga furniture.

37

Gambar 3.9 Rancangan Product 31. Pilih Table. 32. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 700. 33. Tekan tombol OK. 34. Tarik gambar yang ada didalam Files (cue word.swif), masukkan kedalam table baris ke 6. 35. Pilih Table. 36. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 700. 37. Tarik gambar yang ada didalam Files (chairs.gif), masukkan kedalam table baris ke 7. 38. Tekan tombol OK. 39. Pilih Table. 40. Pada Rows anda ketik 1, pada Columns anda ketik 5 dan pada Table Width anda ketik 700. 41. Tekan tombol OK. 42. Masukkan gambar furniture chairs, tarik kedalam baris ke 8 dan column pertama. 38

43. Ketik nama barang furniture dan harga furniture. 44. Masukkan gambar furniture chairs, tarik kedalam baris ke 8 dan column ke 2. 45. Ketik nama barang furniture dan harga furniture. 46. Masukkan gambar furniture chairs, tarik kedalam baris ke 8 dan column ke 3. 47. Ketik nama barang furniture dan harga furniture. 48. Masukkan gambar furniture chairs, tarik kedalam baris ke 8 dan column ke 4. 49. Ketik nama barang furniture dan harga furniture. 50. Masukkan gambar furniture chairs, tarik kedalam baris ke 8 dan column ke 5. 51. Ketik nama barang furniture dan harga furniture. 52. Pilih Table. 53. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 700. 54. Tekan tombol OK. 55. Tarik gambar yang ada didalam Files (lamp.gif), masukkan kedalam table baris ke 9. 56. Pilih Table. 57. Pada Rows anda ketik 1, pada Columns anda ketik 5 dan pada Table Width anda ketik 700. 58. Tekan tombol OK. 59. Masukkan gambar furniture lamp, tarik kedalam baris ke 9 dan column pertama. 60. Ketik nama barang furniture dan harga furniture. 61. Masukkan gambar furniture chairs, tarik kedalam baris ke 9 dan column ke 2. 62. Ketik nama barang furniture dan harga furniture.

39

63. Masukkan gambar furniture chairs, tarik kedalam baris ke 9 dan column ke 3. 64. Ketik nama barang furniture dan harga furniture. 65. Masukkan gambar furniture chairs, tarik kedalam baris ke 9 dan column ke 4. 66. Ketik nama barang furniture dan harga furniture. 67. Masukkan gambar furniture chairs, tarik kedalam baris ke 9 dan column ke 5 68. Ketik nama barang furniture dan harga furniture. 69. Ketiklah kata-kata yang anda inginkan pada baris ke 10.

Gambar 3.10 Rancangan Chairs Collection 70. Pilih Table. 71. Pada Rows anda ketik 1, pada Columns anda ketik 1 dan pada Table Width anda ketik 156. 72. Tekan tombol OK. 73. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11.

40

74. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 11. 75. Tekan tombol F12. 76. Program akan berjalan.

Gambar 3.11 Rancangan Lamp Collection 3.3.5 Membuat Rancangan Living Room 1. Buka program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 2, pada Columns anda ketik 4 dan pada Table Width anda ketik 700. 4. Tekan tombol OK. 5. Masukkan gambar living room, tarik kedalam baris ke 4 dan column pertama. 6. Ketik harga furniture. 7. Masukkan gambar living room, tarik kedalam baris ke 4 dan column ke 2. 8. Ketik harga furniture. 9. Masukkan gambar living room, tarik kedalam baris ke 4 dan column ke 3. 41

10. Ketik harga furniture. 11. Masukkan gambar living room, tarik kedalam baris ke 5 dan column pertama. 12. Ketik harga furniture. 13. Masukkan gambar living room, tarik kedalam baris ke 5 dan column ke 2. 14. Ketik harga furniture. 15. Masukkan gambar living room, tarik kedalam baris ke 5 dan column ke 3 16. Ketik harga furniture. 17. Pilih Table. 18. Pada Rows anda ketik 1, pada Columns anda ketik 3 dan pada Table Width anda ketik 700. 19. Tekan tombol OK. 20. Masukkan gambar living room, tarik kedalam baris ke 6 dan column pertama. 21. Ketik harga furniture. 22. Masukkan gambar living room, tarik kedalam baris ke 6 dan column ke 2 23. Ketik harga furniture. 24. Masukkan gambar living room, tarik kedalam baris ke 6 dan column ke 3. 25. Ketik harga furniture. 26. Pilih Table. 27. Pada Rows anda ketik 1, pada Columns anda ketik 1 dan pada Table Width anda ketik 156. 28. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11. 29. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 11. 42

30. Tekan tombol F12. 31. Program akan berjalan.

Gambar 3.12 Rancangan Furniture Living Room 3.3.6 Membuat Rancangan Kids Room 1. Buka program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 3, pada Columns anda ketik 4 dan pada Table Width anda ketik 700. 4. Tekan tombol OK. 5. Masukkan gambar kids room, tarik kedalam baris ke 4 dan column pertama. 6. Ketik harga furniture. 7. Masukkan gambar kids room, tarik kedalam baris ke 4 dan column ke 2. 8. Ketik harga furniture. 9. Masukkan gambar kids room, tarik kedalam baris ke 4 dan column Ke. 3 10. Ketik harga furniture. 11. Masukkan gambar kids room, tarik kedalam baris ke 4 dan column Ke 4. 43

12. Ketik harga furniture. 13. Masukkan gambar kids room, tarik kedalam baris ke 5 dan column pertama. 14. Ketik harga furniture. 15. Masukkan gambar kids room, tarik kedalam baris ke 5 dan column Ke 2. 16. Ketik harga furniture. 17. Masukkan gambar kids room, tarik kedalam baris ke 5 dan column Ke 3. 18. Ketik harga furniture. 19. Masukkan gambar kids room, tarik kedalam baris ke 5 dan column ke 4. 20. Ketik harga furniture. 21. Masukkan gambar kids room, tarik kedalam baris ke 6 dan column Pertama. 22. Ketik harga furniture. 23. Masukkan gambar kids room, tarik kedalam baris ke 6 dan column Ke 2. 24. Ketik harga furniture. 25. Masukkan gambar kids room, tarik kedalam baris ke 6 dan column Ke 3. 26. Ketik harga furniture. 27. Masukkan gambar kids room, tarik kedalam baris ke 6 dan column Ke 4. 28. Ketik harga furniture. 29. Pilih Table. 30. Pada Rows anda ketik 1, pada Columns anda ketik 1 dan pada Table Width anda ketik 156. 31. Tekan tombol OK.

44

32. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11. 32. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 11. 33. Tekan tombol F12. 33. Program akan berjalan.

Gambar 3.13 Rancangan Furniture Kids Room 3.3.7 Membuat Rancangan Chairs Collection 1. Buka program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 3, pada Columns anda ketik 4 dan pada Table Width anda ketik 700. 4. Tekan tombol OK. 5. Masukkan gambar chairs collection, tarik kedalam baris ke 4 dan column pertama. 6. Ketik harga furniture. 7. Masukkan gambar chairs collection, tarik kedalam baris ke 4 dan column ke 2. 8. Ketik harga furniture.

45

9. Masukkan gambar chairs collection, tarik kedalam baris ke 4 dan column ke 3. 10. Ketik harga furniture. 11. Masukkan gambar chairs collection, tarik kedalam baris ke 4 dan column ke 4. 12. Ketik harga furniture. 13. Masukkan gambar chairs collection, tarik kedalam baris ke 5 dan column pertama. 14. Ketik harga furniture. 15. Masukkan gambar chairs collection, tarik kedalam baris ke 5 dan column ke 2 16. Ketik harga furniture. 17. Masukkan gambar chairs collection, tarik kedalam baris ke 5 dan column ke 3. 18. Ketik harga furniture. 19. Masukkan gambar chairs collection, tarik kedalam baris ke 5 dan column ke 4. 20. Ketik harga furniture. 21. Masukkan gambar chairs collection, tarik kedalam baris ke 6 dan column pertama. 22. Ketik harga furniture. 23. Masukkan gambar chairs collection, tarik kedalam baris ke 6 dan column ke 2. 24. Ketik harga furniture. 25. Masukkan gambar chairs collection, tarik kedalam baris ke 6 dan column ke 3. 26. Ketik harga furniture. 27. Masukkan gambar chairs collection, tarik kedalam baris ke 6 dan column ke 4. 28. Ketik harga furniture. 46

34. Pilih Table. 35. Pada Rows anda ketik 1, pada Columns anda ketik 1 dan pada Table Width anda ketik 156. 36. Tekan tombol OK. 37. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11. 34. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 11. 35. Tekan tombol F12. 29. Program akan berjalan.

Gambar 3.14 Rancangan Furniture Chairs Collection 3.3.8 Membuat Rancangan Lamp Collection 1. Buka program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 3, pada Columns anda ketik 4 dan pada Table Width anda ketik 700. 4. Tekan tombol OK. 5. Masukkan gambar lamp collection, tarik kedalam baris ke 4 dan column pertama. 47

6. Ketik harga furniture. 7. Masukkan gambar lamp collection, tarik kedalam baris ke 4 dan column ke 2. 8. Ketik harga furniture. 9. Masukkan gambar lamp collection, tarik kedalam baris ke 4 dan column ke 3. 10. Ketik harga furniture. 11. Masukkan gambar lamp collection, tarik kedalam baris ke 4 dan column ke 4. 12. Ketik harga furniture. 13. Masukkan gambar lamp collection, tarik kedalam baris ke 5 dan column pertama. 14. Ketik harga furniture. 15. Masukkan gambar lamp collection, tarik kedalam baris ke 5 dan column ke 2. 16. Ketik harga furniture. 17. Masukkan gambar lamp collection, tarik kedalam baris ke 5 dan column ke 3. 18. Ketik harga furniture. 19. Masukkan gambar lamp collection, tarik kedalam baris ke 5 dan column ke 4. 20. Ketik harga furniture. 21. Masukkan gambar lamp collection, tarik kedalam baris ke 6 dan column pertama. 22. Ketik harga furniture. 23. Masukkan gambar lamp collection, tarik kedalam baris ke 6 dan column ke 2. 24. Ketik harga furniture. 25. Masukkan gambar lamp collection, tarik kedalam baris ke 6 dan column ke 3. 48

26. Ketik harga furniture. 27. Masukkan gambar lamp collection, tarik kedalam baris ke 6 dan column ke 4. 28. Ketik harga furniture. 29. Pilih Table. 30. Pada Rows anda ketik 1, pada Columns anda ketik 1 dan pada Table Width anda ketik 156. 31. Tekan tombol OK. 32. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11. 33. Tarik gambar yang ada didalam Files (next.gif), masukkan kedalam table baris ke 11. 34. Tekan tombol F12. 35. Program akan berjalan.

Gambar 3.15 Rancangan Furniture Lamp Collection

49

3.3.9 Membuat Rancangan Contact 1. Buka program dreamweaver anda. 2. Pilih Table. 3. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 500.. 4. Tekan tombol OK. 5. Ketiklah alamat showroom Toko Furniture The Private Room beserta contact person. 6. Pilih Table. 7. Pada Rows anda ketik 1, pada Columns anda ketik 0 dan pada Table Width anda ketik 156. 8. Tekan tombol OK. 9. Tarik gambar yang ada didalam Files (back.gif), masukkan kedalam table baris ke 11. 36. Tekan tombol F12. 10. Program akan berjalan.

Gambar 3.16 Rancangan Contact Showroom

50

2.4

Penjelasan script-script pada Website Promosi Furniture The Private Room

3.4.1 Penjelasan script Pada Halaman Pertama Halaman ini terdiri dari beberapa menu diantaranya home, product, dan contact. Pada menu product hanya berfungsi untuk meng-link ke halaman selanjutnya, script yang dimaksud adalah : 1. , script ini berfungsi untuk meng-link ke halaman product.

2. , script ini berfungsi untuk meng-link ke halaman contact.

3. , script ini berfungsi untuk meng-link ke halaman next.

3.4.2 Penjelasan Script Pada Halaman Poduct Halaman ini berfungsi untuk menampilkan jenis-jenis furniture yang ada. Penjelasan scripnya yaitu : 1.
width="247" height="46" border="0">, sscript ini berfungsi untuk meng-link ke halaman living room.

2.
href="kidsroom.htm"

onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Image30','','banner/kids%20room% 20b.gif',1)">, script ini berfungsi untuk meng-link ke halaman kids room.

3. , script ini berfungsi untuk meng-link ke halaman chairs collection.

4.
src="banner/lamp.gif"

name="Image32"

width="247"

height="46" border="0">, script ini berfungsi untuk meng-link ke halaman lamp collection.

5. , script ini berfungsi untuk meng-link ke halaman back.

6.
border="0">, script ini berfungsi untuk meng-link ke halaman next.

3.4.3 Penjelasan Script Pada Halaman Contact Halaman ini berfungsi untuk menampilkan showroom took The Private Room. Penjelasan scriptnya sebagai berikut : 1. , script ini berfungsi untuk meng-link ke halaman contact.

3.5

Implementasi Implementasi merupakan tahap uji coba yang dilakukan untuk melihat

perkembangan terakhir dari web yang telah dibuat. Uji coba juga dilakukan sebagai sarana evaluasi sehingga dapat diketahui letak kekurangan dan kesalahan yang mungkin terdapat didalamnya. Dalam pembuatan peancangan website ini penulis menggunakan computer dengan spesifikasi software dan hardware sebagai berikut : 1. Sistem Operasi Microsoft Windows XP. 2. Macromedia Dreamweaver MX 2004. 3. Macromedia Flash MX 2004. 4. Internet Explorer 6.0 5. Prosesor Intel 2.66GHZ. 6. Memori 256 MB. 7. VGA 256 MB. 8. Hardisk 80 GB.

53