BAB IV PERANCANGAN DAN IMPLEMENTASI 4.1 Concept (Konsep) Website yang dibuat adalah media informasi profile pada masyarakat atau fans. Adapun aplikasi ini lebih menekankan sebagai media informasi, dapat di katakan juga sebuah Profile the TITANS band management. Adapun deskripsi konsep perancangan dan implementasi media informasi tersebut adalah sebagai berikut. Tabel 1. Deskripsi konsep informasi perusahaan berbasis Web. Objek Deskripsi/Uraian Judul Website Profile (Studi Kasus the TITANS Band Management) menggunakan Macromedia Adobe Photoshop CS3 dan Adobe Dreamweaver CS3 Audiens Masyarakat Indonesia, yang ingin mengetahui tentang the TITANS band Image Menggunakan format (.jpg) dan kumpulan image dalam dokumen dari instansi dan dibuat sendiri Format Web Berbentuk HTML 4.2 Design (Desain) Pada tahap ini ada beberapa design atau rancangan yang dibuat yaitu, design struktur navigasi yang digunakan untuk menentukan link dari halaman satu kehalaman lainnya. 4.2.1. Struktur Navigasi Struktur navigasi yang akan digunakan adalah Spoke-and-Hub model dengan modifikasi seperlunya. Tambahan pada model ini digunakan intro scene 1 yang dihubungkan dengan scene 2. Hubungan dinyatakan dengan halaman utama yang mempunyai hubungan dengan setiap node dapat kembali lagi ke halaman utama. Pada model ini terdapat enam macam link, yaitu dari halaman ke halaman tertent, dari halaman tertentu kembali lagi ke halaman utama dan dari halaman tertentu ke halaman berikutnya ke halaman tertentu. 12
Tampilan struktur navigasi Spoke-and Hub model untuk program media promosi informasi perusahaan dapat dilihat pada gambar 2. Halaman Pembuka Halaman Menu 1. Home 2. Profile Band 3. Berita 4. Agenda 5. Titanium 6. Galery 7. Contact Home Profile Band Berita Agenda Titanium Galery Contact Gambar 2. Tampilan Rancangan program menggunakan Struktur Navigasi Spoke-and-Hub mode 4.2.2. Flowchart View Dalam tahapan ini pertama tama digambarkan tampilan flowchart view untuk halaman awal yang merupakan awal penggunaan aplikasi oleh user, kemudian dibuat flowchart view untuk scene berikutnya, yaitu halaman untuk tiap bagian bagian Promosi perusahaan. Disusun berdasarkan bagian bagiannya antara lain : a. Halaman Menu Halaman ini terdapat empat pilihan antara lain : Home, Profile, Produk, Contact. b. Halaman Home Halaman ini merupakan halaman utama yang terdapat pada tampilan promosi promosi yang sedang berlangsung di perusahaan. c. Halaman Profile Band Pada halaman ini dijabarkan mengenai sejarah band. d. Halaman Berita Halaman ini berisikan berita berita terbaru dari band. 13
e. Halaman Agenda Halaman ini berisikan agenda atau jadwal dari band. f. Halaman Titanium Halaman ini berisikan tentang fans atau sebagai forum diskusi. g. Halaman Galery Halaman ini berisikan galery atau photo. h. Halaman Contact Halaman ini berisikan alamat management dan pemesanan mercandise. Scene1 Menu Home Scene2 Home Scene3 Profile Band Scene4 Berita Scene5 Agenda Scene6 Titanium Scene7 Galery Scene8 Contact Gambar 3. Flowchart View untuk media informasi 4.2.3. Flowchart Sistem Selain dirancang Flowchart View dan Struktur Navigasi, dibuat pula rancangan sistem secara menyeluruh menggunakan Flowchart System. Flowchart System ini menggambarkan tahap proses program yang akan dibuat pada media promosi perusahaan 14
dengan tampilan intro (pembuka), kemudian masuk pada tampilan menu dalam menu utama tersebut terdapat empat pilihan yang meliputi halaman menu, Home, Profile Band, Berita, Agenda, Titanium, Galery, Contact. Pada setiap halaman selalu menampilkan menu sehingga mudah dalam proses pencarian halaman berpindah dari satu scene ke scene lainnya. Start Halaman Menu 1. Home 2. Profile Band 3. Berita 4. Agenda 5. Titanium 6. Galery 7. Contact Pilih 1 Pilih 2 Pilih 3 Pilih 4 Pilih 5 Pilih 6 Pilih 7 Home Profile Band Berita Agenda Titanium Galery Contact End Gambar 4. Tampilan rancangan Flowchart System media promosi perusahaan 4.3 Analisis Sistem Dalam tahap ini perencanaan dimulai dengan melakukan konsultasi maupun tanya jawab secara interaktif kepada pihak management the TITANS. Data yang diperoleh kemudian diolah untuk perencanaan sistem informasi yang akan dibuat. 15
Analisis sistem dibagi menjadi dua yaitu Analisis Sistem Yang Berjalan dan Analis Sistem Yang Sedang Dikembangkan. 4.3.1 Analisis Sistem Yang Berjalan Pada saat ini, alur sistem yang berjalan di management the TITANS dalam pengolahan promosi berbasis web belum ada, maka disini diharapkan dapat memberikan solusi dan manfaat yang lebih baik lagi terhadap permasalahan tersebut. Untuk lebih jelasnya dapat dilihat dari diagram alir sistem yang berjalan di management the TITANS: Calon Titanium/Fans Management Bagian Penyampaian Laporan START Pengisian buku pemesanan merchandise input data pemesanan data calon titanium data lengkap calon titanium periksa data calon titanium data lengkap calon titanium proses END Gambar 5. Analisis Sistem Yang Sedang Berjalan Keterangan : Calon titanium datang mengisi buku tamu, menemui bagian management untuk memesan merchandise sebagai syarat member resmi, kemudian bagian management menginput data pemesanan, lalu mengisi data calon titanium, kemudian mendokumenkannya, pada bagian penyampaian laporan memeriksa data data di proses, selesai. 4.3.2 Analisis Sistem Yang Sedang Dikembangkan Berdasarkan analisis sistem yang sedang berjalan, untuk mengatasi permasalahan yang ada maka perlu adanya aplikasi yang dapat mengedit, menghapus, menyimpan dan pelaporan data dengan menggunakan komputerisasi. Untuk lebih jelasnya dapat dilihat dari diagram alur sistem yang akan dibangun dibawah ini. 16
User/ Calon Titanium/ Fans Admin START input data pemesanan membuka halaman web data calon titanium membuka halaman profile, dll data lengkap calon titanium periksa data calon titanium membuka halaman contact proses/merespon pemesanan END Gambar 6. Analisis Sistem Yang Dikembangkan Keterangan : User / Calon Titanium membuka halaman web, kemudian membuka halaman profile dll, ketika mulai tertarik dengan merchandise maka titanium membuka halaman contact dan mulai memesan merchandise, lalu admin menginput data pemesanan, menginput data calon titanium, kemudian admin mendokumenkannya dan memeriksa lagi data titanium, setelah itu diproses atau direspon dan selesai. 4.4 Rancangan tampilan web yang digunakan Tampilan web yang akan dibuat dalam aplikasi web ini terdiri dari delapan halaman bagian yaitu ; tampilan menu, tampilan home, tampilan profile band, tampilan berita, tampilan agenda, tampilan titanium, tampilan galery, tampilan contact. 4.4.1 Rancangan pada tampilan Menu 17
Promosi : Berikut ini adalah Rancangan Tampilan Menu yang akan dibuat untuk Website NAMA Home Profile Band Berita Agenda Titanium Galery Contact Logo Foto Keterangan Keterangan Keterangan Gambar 7. Rancangan Tampilan Menu 4.5 Material Collecting (Pengumpulan Bahan) Pengumpulan bahan (Material Collecting) dikerjakan secara parallel dengan tahap Assembly. Pada tahap ini dilakukan pengumpulan bahan berupa image, dan data data yang dibutuhkan pada tahapan berikutnya. 18
4.5.1 Hardware (Perangkat Keras) Intel Core Duo Memory 2 GB Hard disk 512 GB CD-R/RW Samsung 52x Keyboard + Mouse Optik Speaker Aktif Printer Hp Deskjet F2400 Series 4.5.2 Software (Perangkat Lunak) Perangkat lunak yang digunakan untuk pengolahan design dan web menggunakan system operasi Windows XP, sedangkan program pendukungnya antara lain : 1. Adobe Photoshop CS3 2. Adobe Dreamweaver CS3 4.5.3 Bahan Bahan yang dugunakan selama penelitian adalah data sekunder, yakni : tutorial dari internet, buku pembelajaran Adobe Dreamweaver CS4, adobe Photoshop CS3. 4.5.4 Objek Web yang meliputi 4.5.4.1 Teks Objek teks yang dugunakan dalam media informasi ini dibuat semenarik mungkin agar masyarakat tertarik. 4.5.4.2 Image Image atau gambar yang digunakan dalam media informasi ini sebagian besar diperoleh dari management itu sendiri, serta data yang ada dalam internet. 4.6 Tahap Proses Implementasi (Assembly) Implementasi merupakan tahap pembuatan website, adapun software yang digunakan adalah Adobe Dreamweaver CS3. Pada tahap ini perancangan yang sudah dibuat secara konsep mulai diterapkan kedalam rancangan yang sebenarnya, meliputi pembuatan tampilan halaman halaman. 4.6.1 Pembuatan Header Halaman Web 19
Header merupakan bagian paling atas didalam sebuah halaman web. Pembuatan header disini menggunakan Adobe Photoshop CS3. Langkah langkahnya sebagai berikut : 1. Install program Adobe Photoshop CS3 2. Buka program Adobe Photoshop CS3 melalui start menu 3. Klik dan Pilih Adobe Photoshop CS3 Gambar 8. Membuka program Adobe Photoshop CS3 melalui start menu 20
4. Klik file dan pilih new Gambar 9. Tampilan awal Adobe Photoshop CS3 Gambar 10. Membuka dokumen / lembar baru 21
5. Header dibuat dengan ukuran lebar 960px dan tinggi 205px Gambar 11. Menentukan ukuran pembuatan header 6. Lakukan pembuatan proses header menggunakan Adobe Photoshop CS3 7. Klik file save as dengan format.jpg Gambar 12. Header yang sudah jadi 22
4.6.2 Pembuatan Halaman Menu Cara membuat halaman menu di Adobe Dreamweaver CS3 : 1. Install program Adobe Dreamweaver CS3 2. Buka program Adobe Dreamweaver CS3 melalui start menu 3. Klik dan Pilih Adobe Dreamweaver CS3 Gambar 13. Buka program Adobe Dreamweaver CS3 melalui start menu 4. Klik HTML 23
Gambar 14. Tampilan Layar HTML 5. Lakukan pembuatan proses halaman menu menggunakan Adobe Dreamweaver CS3 Gambar 15. Halaman menu yang sudah jadi 6. Klik file save as dengan format.htm /.html 24