12

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.

13

Tampilan struktur navigasi Spoke-and Hub model untuk program media promosi

informasi perusahaan dapat dilihat pada gambar 2.

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.

Halaman Pembuka

Halaman Menu

1. Home

2. Profile Band

3. Berita

4. Agenda

5. Titanium

6. Galery

7. Contact

Profile Band Galery Titanium Berita Agenda Home Contact

14

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.

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

Scene1 Menu Home Scene2 Home

Scene3 Profile Band

Scene4 Berita

Scene5 Agenda

Scene6 Titanium

Scene7 Galery

Scene8 Contact

15

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.

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.

Halaman Menu

1. Home

2. Profile Band

3. Berita

4. Agenda

5. Titanium

6. Galery

7. Contact

Pilih 2 Pilih 3 Pilih 5 Pilih 4

Home Profile Band Berita Agenda

End

Pilih 6 Pilih 1 Pilih 7

Titanium Galery Contact

Start

16

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

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.

START

Pengisian

buku

tamu

END

pemesanan merchandise

input data

pemesanan

data calon

titanium

data lengkap

calon titanium

data lengkap

calon titanium

periksa

data calon

titanium

proses

17

User/ Calon Titanium/ Fans Admin

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

START

membuka

halaman

web

END pemesanan

input data

pemesanan

data calon

titanium

data lengkap

calon titanium

periksa

data calon

titanium

proses/merespon

membuka

halaman

profile, dll

membuka

halaman

contact

18

Berikut ini adalah Rancangan Tampilan Menu yang akan dibuat untuk Website

Promosi :

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.

NAMA

Home Profile Band Berita Agenda Titanium Galery Contact

Logo

Keterangan

Keterangan

Keterangan

Foto

19

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

20

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

21

Gambar 9. Tampilan awal Adobe Photoshop CS3

4. Klik file dan pilih new

Gambar 10. Membuka dokumen / lembar baru

22

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

23

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

24

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