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 Judul
Deskripsi/Uraian 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. 2. 3. 4. 5. 6. 7.
Home
Profile Band
Berita
Home Profile Band Berita Agenda Titanium Galery Contact
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. 2. 3. 4. 5. 6. 7.
Pilih 1
Home
Home Profile Band Berita Agenda Titanium Galery Contact
Pilih 2
Pilih 3
Pilih 4
Pilih 5
Profile Band
Berita
Agenda
Titanium
Pilih 6
Pilih 7
Contact
Galery
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
pemesanan merchandise
START
data lengkap calon titanium
input data pemesanan
Pengisian buku tamu
periksa data calon titanium
data calon titanium
proses data lengkap calon titanium
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
START
membuka halaman web
membuka halaman profile, dll
Admin
input data pemesanan
data calon titanium
data lengkap calon titanium
periksa data calon titanium membuka halaman contact
pemesanan
proses/merespon
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
Berikut ini adalah Rancangan Tampilan Menu yang akan dibuat untuk Website Promosi :
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
Gambar 9. Tampilan awal Adobe Photoshop CS3 4. Klik file dan pilih new
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
Gambar 12. Header yang sudah jadi 7. Klik file save as dengan format .jpg
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
