12 BAB IV PERANCANGAN DAN IMPLEMENTASI 4.1 Concept

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