BAB III ANALISA DAN PEMBAHASAN MASALAH 3.1. Analisa Masalah Pada era komputerisasi saat ini, perkembangan informasi melalui dunia internet sangat banyak. Dan dalam mengembangkan usaha dari PT. Fanitra Indotama, penulis membuatkan situs Web untuk memberikan informasi kepada pihak yang membutuhkan. 3.1.1. Sekilas mengenai PT. Fanitra Indotama PT. Fanitra Indotama merupakan salah satu perusahaan yang bergerak di bidang jasa Cargo Courier dan Tour & Travel. Pelaksanaan pembangunan di segala sector masih terus dilaksanakan, terutama dibidang export import. Situasi ini menyebabkan setiap pihak terkait terus berbenah diri mempersiapkan sarana dan prasarana sebagai tulang punggung suksesnya pembangunan di segala bidang. Oleh karena itu PT. Fanitra Indotama yang berdiri sejak 30 Maret 2000, hadir sebagai mitra kerjasama untuk memenuhi kebutuhan dibidang cargo courier.
3.1.2. Struktur Organisasi PT.Fanitra Indotama Struktur organisasi pada perusahaan PT. Fanitra Indotama adalah sebagai berikut: Komisaris
: Eko Purwanto
Direktur
: Tavip Dwi Komara
Manager Operasional
: Yudhistira
29
30
3.2. Pembahasan Masalah Web cepat sekali terkenal di lingkungan penguna internet, karena kemudahan yang diberikan kepada pengguna internet untuk melakukan penelusuran, penjelajahan dan pencarian informasi. Salah satu informasi yang dapat diperoleh oleh surfer di internet adalah mengenai export import. Surfer dapat mencari dan memperoleh berbagai jenis informasi yang berhubungan dengan export import.
3.2.1. Peta Navigasi Website Peta Navigasi website digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi dalam website tersebut. Peta navigasi website ini adalah peta navigasi composite. Melalui peta navigasi website ini, terlihat bagaimana isi dan susunan dari sebuah website secara menyeluruh. Sebenarnya dengan membuat peta navigasi ini, sama fungsinya dengan flowchart, yaitu memberikan petunjuk kepada user sehingga user juga bisa menjadikan peta navigasi ini sebagai pedoman dalam mencari informasi yang ada dalam website ini. Pembuatan peta navigasi website ini akan sangat membantu nantinya, ketika akan membuat rancangan seluruh halaman web. Peta navigasi website yang baik adalah mampu memberitahukan pengunjung tentang lokasi mereka sekarang dan lokasi-lokasi yang bisa mereka kunjungi dari lokasi mereka sekarang.
31
Gambar 3.1. Peta Navigasi Website PT. Fanitra Indotama
3.3. Rancangan Website Dalam rancangan website PT. Fanitra Indotama, Penulis memberikan gambaran dan penjelasan dari tiap halaman web. Adapun rancangan setiap halamannya adalah sebagai berikut :
1.
index.html Halaman ini adalah halaman awal saat pertama kali membuka website PT. Fanitra Indotama. Terdiri dari navigasi ke halaman-halaman selanjutnya.
32
Gambar 3.2. Rancangan index.html Jika pengunjung hendak melihat profile perusahaan, maka pengunjung dapat melihat profile perusahaan dengan mengklik tombol yang bertuliskan profile maka akan terlihat informasi seperti gambar 3.3. di bawah ini.
Gambar 3.3. Rancangan profile
33
2.
Structure Jika pengunjung hendak melihat struktur organisasi yang ada pada perusahaan, maka pengunjung dapat melihat struktur perusahaan dengan mengklik tombol yang bertuliskan structure maka akan terlihat informasi seperti gambar 3.4. di bawah ini.
Gambar 3.4. Rancangan structure 3.
Service Jika pengunjung hendak melihat service atau layanan yang diberikan oleh perusahaan, maka pengunjung dapat melihat layanan dalam perusahaan dengan mengklik tombol yang bertuliskan service maka akan terlihat informasi seperti gambar 3.5. di bawah ini.
34
Gambar 3.5. Service 4.
Product Jika pengunjung hendak melihat daftar layanan dan daftar harga yang diberikan oleh perusahaan, maka pengunjung dapat melihat daftar tersebut di bagian ini dengan mengklik tombol yang bertuliskan product maka akan terlihat informasi seperti gambar 3.6. di bawah ini.
Gambar 3.6. Product
35
5.
Download Di bagian ini pengunjung dapat mendownload website ini dalam format flash atau *.swf untuk dijadikan presentasi kepada perusahaannya nanti, untuk mendownloadnya pengunjung tinggal meng-klik tombol yang bertuliskan download seperti gambar 3.8. di bawah ini.
Gambar 3.7. Download 6.
Contact Jika pengunjung ingin mengetahui informasi lebih tentang perusahaan dan pelayanannya, maka pengunjung dapat menghubungi perusahaan lewat e-mail, telepon atau fax, pengunjung dapat meng-klik tombol yang bertuliskan contact seperti gambar 3.9. di bawah ini.
36
Gambar 3.8. Contact 7.
GuestBook Di bagian ini pengunjung dapat mengisi buku tamu yang telah disediakan oleh perusahaan yang nantinya akan dihubungi kembali oleh perusahaan apabila ada layanan terbaru dari perusaaan, untuk mengisi buku tamu pengunjung dapat mgklik tombol guestbook seperti gambar 3.10 di bawah ini.
Gambar 3.9. GuestBook
37
3.4. Tahapan Pembuatan Website Adapun langkah-langkah dalam membuat halaman index.html pada website PT. Fanitra Indotama adalah sebagai berikut : 3.4.1 Membuat image untuk tampilan flash menggunakan Adobe photoshop CS 1. Aktifkan Adobe Photoshop CS dengan cara klik menu Start > Program > Adobe Photoshop CS.
Gambar 3.10. Adobe Photoshop CS 2. Setelah lembar kerja terbuka buatlah layer baru dengan ukuran 850x142 pixels dengan cara klik menu File > New, pada kotak dialog isi nama dengan background, preset Custom, ukurannya Width 850 x Height 142 Pixels, Resolution 72 Pixels/Inch, Color Mode biarkan default, lalu background contentnya White, setelah itu lalu klik OK atau dengan cara menekan tombol shortcut yaitu Ctrl+N untuk membuat layer baru.
38
Gambar 3.11. Kotak Dialog New 3. Setelah layer background terbuka buatlah image yang nantinya akan di slice dengan menggunakan Slice Tool, dengan cara klik custom shape tool pada toolbox atau dengan menekan tombol shortcut (U), lalu carilah gambar berbentuk Not Balok, lalu Drag pada layer background buatlah sebanyak dua buah.
Gambar 3.12. Custom Shape Tool
39
4. Lihatlah pada Layer Palette telah terdapat 2 buah layer, rename 2 buah layer tersebut dengan cara klik kanan pada salah satu layer pilih Layer Properties nama back_1 dan back_2.
Gambar 3.13. Rename Layer Back_1 & Back_2
5. Setelah Layer telah diberi nama, klik menu Layer > Rasterize > Layer untuk me-rasterize layer agar efek yang akan diberikan pada layer back_1 dan back_2 nantinya akan terlihat lebih tajam dan kita akan lebih mudah bekerja dengan layer dengan mode yang sudah ter-Rasterize, lakukan hal yang sama pada layer back_2 untuk me-Rasterize layer.
40
Gambar 3.14. Rasterize Layer pada layer back_1 dan back_2 6. Hapuslah 2 titik yang ada dibawah not pada pada kedua layer, dengan cara klik Eraser Tool (E) lalu hapus, lihat gambar dibawah ini.
Gambar 3.15. Eraser Tool (U) 7. Setelah layer back_1 dan back_2 di-Rasterize, aturlah letak kedua image pada stage, lihatlah gambar dibawah ini.
41
Gambar 3.16. Image yang sudah diatur letaknya 8. Setelah image diatur pada layer, gabunglah layer back_1 dan back_2 menjadi satu layer. Dengan cara klik menu Layer > Merge Down atau dengan menekan tombol Ctrl+E.
Gambar 3.17. Menggabungkan image dengan Merge Down 9. Lalu pada Layer Palette ubahlah namanya menjadi back, klik kanan pada layer back lalu pilih Blending Options, aturlah seperti gambar dibawah ini.
42
Gambar 3.18. Blending Options pada layer back
10. Setelah itu buatlah text yang nantinya akan di Slice menggunakan Slice Tool dan untuk membuat tombol-tombol navigasi nantinya, lihatlah gambar dibawah ini.
Gambar 3.19. Membuat Tombol Navigasi dengan Text Tools
43
11. Kemudian Remove layer Background untuk men-Transparankan image.
Gambar 3.20. Membuat Tombol Navigasi dengan Text Tools
12. Kemudian gunakan Slice Tools untuk memotong text Home, Profile, Structure, Service, Product, Download, Contact dan GuestBook kemudian simpan dengan Exstensi File *.PNG agar image terlihat transparant saat di lihat nantinya.
Gambar 3.21. Memotong Layer untuk membuat tombol dengan Slice Tools
44
Gambar 3.22. Menyimpan hasil slice dan image 13. Untuk pembuatan image radar, buatlah layer baru dengan nama radar ukurannya 200x200 pixels.
Gambar 3.23. Pembuatan Image Radar
45
14. Tekan shortcut (U) untuk membuat image radar, atau dengan mengklik Custom Shape tools (U) pada ToolBox lalu drag gambar radar kedalam stage.
Gambar 3.24. Drag image radar pada Custom Shape Picker 15. Klik menu Layer > Rasterize > Layer untuk menghilangkan mask pada layer
Gambar 3.25. Rasterize Layer pada layer radar
46
16. Klik kanan pada layer lalu pilih layer properties untuk merubah nama layer menjadi radar lalu klik OK.
Gambar 3.26. me-Rename layer radar 17. Klik kanan lagi lalu pilih Blending Options untuk mendesign tampilan radar.
Gambar 3.27. Blending Options pada layer radar
47
18. Remove layer background pada layer palette untuk mentransparankan layer
Gambar 3.28. Me-Remove Layer Background pada Layer Palette 19. Setelah mendesign tampilan radar lalu simpan layer radar dengan nama radar dan exstensinya *.PNG
Gambar 3.29. Menyimpan layer radar
48
3.4.2 Membuat index.html dengan Macromedia Flash MX 1.
Aktifkan Macromedia Flash MX dengan cara klik menu Start > Program > Macromedia > Macromedia Flash MX,
Gambar 3.30. Membuka aplikasi Macromedia Flash MX 2.
Dengan otomatis file baru dengan nama [Untitled 1] akan terbuka, jika dengan manual klik menu File > New atau tekan kombunasi tombol Control dengan tombol N, lihat gambar dibawah ini.
Gambar 3.31. Membuat lembar kerja baru pada Flash
49
3.
Kemudian import image background dan radar yang telah dibuat dengan Adobe Photoshop CS tadi ke dalam Library dengan cara klik menu File > Import to Library
Gambar 3.32. Meng-Import image ke dalam Library 4.
Setelah di Import bukalah Library dengan cara klik menu Window > Library atau dengan menekan tombol F11
Gambar 3.33. Membuka Library pada Flash
50
5.
Kemudian drag image Background kedalam stage.
Gambar 3.34. Men-Drag image ke Stage
6.
Rubahlah nama layer 1 pada Timeline Palette menjadi background.
Gambar 3.35. Me-Rename Layer1 dengan Background
51
7.
Kemudian buatlah layer baru dengan nama Home
Gambar 3.36. Membuat Layer Home
8.
Setelah itu buatlah layer baru dengan nama Profile, Structure, Service, Product, Download, Contact dan GuestBook.
Gambar 3.37. Membuat Layer baru untuk masing-masing tombol
52
9.
Pada setiap layer masukkan masing-masing image untuk rollover nantinya
Gambar 3.38. Membuat Rollover 10. Klik kanan image Home pada stage pilih Convert to Symbol
Gambar 3.39. Convert to Symbol
53
11. Ubahlah nama symbol menjadi Home0 dan behaviornya Button.
Gambar 3.40. Merubah Behavior 12. Setelah berubah menjadi symbol klik 2 kali pada symbol tadi terbukalah jendela button buatlah Keyframe baru pada frame Over.
Gambar 3.41. Membuat rollover untuk tombol home 13. Klik kanan pada Keyframe Over lalu pilih Create Motion Tween
54
Gambar 3.42. Membuat Motion Tween untuk tombol home 14. Lalu pada Property Panel ubahlah Color menjadi Brightness 70%
Gambar 3.43. Mengubah Brightness symbol home0 menjadi 70% 15. Kemudian kembali lagi pada Frame Up yang ada pada timeline palette dan hapuslah symbol home0 yang ada pada stage.
55
16. Lalu kembali ke Scene1 lihatlah hasilnya dengan cara klik menu Control > Test Movie atau dengan shortcut Ctrl+Enter
Gambar 3.44. Melihat hasil dari Rollover pada tombol Home
Gambar 3.45. Hasil dari efek Rollover pada button Home 17. Untuk tombol navigasi yang lain caranya sama seperti membuat tombol Home diatas.
56
18. Kemudian klik kanan pada symbol home pada stage lalu pilih Action.
Gambar 3.46. Memasukkan Action Script pada symbol home 19. Setelah Action Palette terbuka ketikkan skrip seperti dibawah ini. Tujuan skrip dibawah adalah untuk membuat link yang menuju movie external.
Gambar 3.47. Memasukkan Action Script pada symbol home 20. Untuk tombol navigasi yang lainnya caranya sama saja hanya pada skrip bagian untuk movie externalnya saja yang berbeda.
57
21. Setelah itu buatlah symbol baru dengan nama “Target Movie” Behaviornya Movie Klip lalu klik OK.
Gambar 3.48. Membuat symbol baru dengan nama TargetMovie
22. Biarkan symbol kosong, bukalah Library cari symbol dengan nama TargetMovie lalu drag symbol kedalam stage.
Gambar 3.49. Drag symbol Target Movie kedalam Stage
58
23. Lalu menambahkan teks serti gambar dibawah ini.
Gambar 3.50. Menambahkan Teks pada stage 24. Untuk membuat animasi radar, bukalah Library lalu drag symbol radar yang ada pada Library ke dalam stage, kemudian buatlah layer untuk radar dengan cara klik kanan pada symbol radar lalu pilih Distribute to Layer
Gambar 3.51. Membuat layer baru untuk symbol radar
59
25. Kemudian buatlah Motion Tween untuk image radar ubahlah Brightness menjadi 90% pada Property Palette, lalu klik 2 kali pada symbol radar yang ada pada stage.
Gambar 3.52. Membuat Motion Tween untuk symbol radar 26. Masukkan symbol shadow pada stage sebanyak empat buah symbol, kemudian membuatkan layer untuk masing-masing shadow.
Gambar 3.53. Membuatkan layer untuk masing-masing shadow 27. Setelah itu lakukan tes movie dan menyimpan hasil kerja 28. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari home.
60
Gambar 3.54. Membuat layer baru untuk home.swf 29. lalu membuat tampilan seperti ini dengan menggunakan Text Tools
Gambar 3.55. Membuat prakata dengan Text Tools 30. Kemudian simpan dengan nama home dan melakukan tes movie 31. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari profile
61
Gambar 3.56 Membuat layer baru untuk profile.swf 32. lalu membuat tampilan seperti ini dengan menggunakan Text Tools
Gambar 3.57 Membuat profile dengan Text Tools 33. Kemudian simpan dengan nama profile dan melakukan tes movie 34. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari structure
62
Gambar 3.58 Membuat layer baru untuk structure.swf 35. lalu membuat tampilan seperti ini dengan menggunakan Text Tools
Gambar 3.59 Membuat structure dengan Text Tools 36. Kemudian simpan dengan nama structure dan melakukan tes movie 37. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari service.
63
Gambar 3.60 Membuat layer baru untuk servce.swf 38. lalu membuat tampilan seperti ini dengan menggunakan Text Tools
Gambar 3.61 Membuat service dengan Text Tools 39. Kemudian simpan dengan nama structure dan melakukan tes movie 40. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari product.
64
Gambar 3.62 Membuat layer baru untuk product.swf 41. lalu membuat tampilan seperti ini dengan menggunakan Text Tools
Gambar 3.63 Membuat product dengan Text Tools 42. Kemudian simpan dengan nama product dan melakukan tes movie 43. Buatlah layer baru dengan ukuran 420x250 untuk membuat movie external dari download
