UNIVERSITAS BINA NUSANTARA _______________________________________________________________
Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Ganjil tahun 2006/2007 PERANCANGAN WEBSITE BERBASIS MULTIMEDIA PADA SHOWROOM MOBIL MJ AUTOSHOP WILAYAH SERPONG
William Liady 0600615135 Kelas 09MAT
Abstrak
MJ Autoshop adalah sebuah showroom mobil bekas yang sudah memiliki 2 tempat untuk show unit dan 1 kantor manajemen. Guna meningkatkan daya saing dan kualitas dari pelayanan yang bisa diberikannya, dibuatlah sebuah layanan website bagi para pelanggannya. Selain itu, diharapkan melalui website ini para pelanggan yang berdomisili jauh dari showroom dapat berinteraksi dengan showroom baik dalam pengadakan transaksi ataupun dalam permintaan layanan customer service dari showroom. Metode penelitian yang digunakan dalam pengembangan sistem adalah IMSDD (Interactive Multimedia System Design and Development). Dimana dalam mengumpulkan data yang diperlukan untuk mengembangkan sistem ini adalah melalui studi kepustakaan dan metode penelitian lapangan dengan membagikan kuisioner kepada para pelanggan dari showroom MJ Autoshop. Hasil yang dicapai dari pengimplementasian dan evaluasi sistem ini adalah Website showroom mobil MJ Autoshop ini cukup menarik dan mudah digunakan oleh user. Selain itu berbagai jenis layanan dan fitur yang disediakan juga cukup berguna dan lengkap bagi pelanggan MJ Autoshop. Maka simpulan yang didapat adalah bahwa website ini dapat membantu dalam meningkatkan daya saing dan kualitas penyediaan layanan showroom mobil MJ Autoshop bagi para pelanggannya. Website ini dapat meningkatkan pemasaran showroom mobil MJ Autoshop dan mengurangi biaya operasional dalam mempromosikan showroom MJ Autoshop.
Kata Kunci : Sistem Multimedia, Website, Mobil
iii
PRAKATA
Pertama – tama penulis mengucapkan puji dan syukur kepada Tuhan Yang Maha Esa atas berkat, rahmat, kesehatan dan karunia-Nya yang telah diberikan kepada penulis sehingga penulis dapat menyelesaikan skripsi ini tepat pada waktunya. Penulisan skripsi ini merupakan salah satu syarat untuk memperoleh gelar sarjana Strata-1 jurusan Teknik Informatika pada Universitas Bina Nusantara. Skripsi ini tidak akan selesai dengan baik tanpa bantuan dan dorongan yang telah diberikan oleh semua pihak dalam penyusunan skripsi ini. Oleh karena itu, pada kesempatan ini dari lubuk hati yang paling dalam, penulis ingin mengucapkan terima kasih yang sebesar – besarnya kepada yang terhormat : 1. Bapak Prof. Dr. Gerardus Polla, M.App.Sc. Selaku Rektor Universitas Bina Nusantara yang telah memberikan kesempatan bagi penulis untuk menyelesaikan skripsi di Universitas Bina Nusantara. 2. Bapak H.M. Subekti, BE,M.Sc. Selaku ketua Jurusan Teknik Informatika Universitas Bina Nusantara, yang telah memberikan nasehat dan memotivasi penulis selama mengikuti pendidikan di Universitas Bina Nusantara. 3. Bapak Felix Oktarianto, S.Kom,MM. Selaku dosen pembimbing, yang telah membimbing dan mengarahkan penulis dalam menyelesaikan skripsi ini. 4. Bapak Daniel Bambang dan Bapak Ir.Budianto Gunawan selaku pemilik dari showroom MJ Autoshop yang telah banyak meluangkan waktu dan memberikan bantuan, saran, juga dukungan penuh bagi penulis sehingga penulis dapat menyelesaikan skripsi ini.
iv
5. Segenap staf dosen dan pengajar Universitas Bina Nusantara yang telah memberikan pengarahan dan bimbingan akademis kepada penulis selama masa perkuliahan. 6. Orang tua penulis yang sepenuh hati mendukung dalam doa dan nasehat yang bijak dan berarti yang mendorong penulis untuk menyelesaikan skripsi ini dengan baik. 7. Natania Masuang Zantika, yang senantiasa mendorong dan sangat mendoakan penulis serta memberikan semangat saat penulis mengalami jalan buntu dalam menyelesaikan skripsi ini. 8. Seluruh pihak lain yang telah memberikan bantuan, dukungan dan semangat secara langsung maupun tidak langsung yang namanya penulis tidak cantumkan. Walaupun penulis berusaha semaksimal mungkin, penulis menyadari bahwa penulis tidak lepas dari segala kekurangan karena pengetahuan dan pengalaman yang masih kurang memadai. Oleh karena itu, saran dan kritik yang bersifat membangun akan sangat kami hargai. Akhir kata penulis berharap semoga skripsi ini dapat bermanfaat bagi pengembangan dan penelitian selanjutnya, khususnya di Universitas Bina Nusantara.
Jakarta, Januari 2007
Penulis
v
DAFTAR ISI
Halaman Judul Luar Halaman Judul Dalam Halaman Persetujuan Hardcover..........................................................................................i Halaman Pernyataan dewan penguji....................................................................................ii Abstrak............................................................................................................................... iii Prakata................................................................................................................................iv Daftar Isi.............................................................................................................................vi Daftar Tabel......................................................................................................................xiii Daftar Gambar..................................................................................................................xiv Daftar Lampiran...............................................................................................................xix BAB I PENDAHULUAN 1.1
Latar Belakang.........................................................................................................1
1.2
Ruang Lingkup.........................................................................................................2
1.3
Tujuan dan Manfaat.................................................................................................2
1.4
Metodologi...............................................................................................................3
1.5
Sistematika Penulisan..............................................................................................4
BAB II LANDASAN TEORI 2.1
Multimedia...............................................................................................................6 2.1.1
Sejarah Singkat Multimedia.........................................................................6
2.1.2
Definisi Multimedia.....................................................................................7
vi
2.2
2.1.3
Elemen – elemen Multimedia......................................................................8
2.1.4
Keuntungan Multimedia............................................................................11
2.1.5
Penggunaan Multimedia............................................................................13
Interaksi Manusia dan Komputer..........................................................................13 2.2.1
Definisi Interaksi Manusia dan Komputer................................................13
2.2.2
Definisi User Interface ( Antarmuka Pengguna ) .....................................14 2.2.2.1
2.3
2.2.3
Masalah – masalah Interaksi Manusia dan Komputer..............................17
2.2.4
Pendekatan Interaksi Manusia dan Komputer...........................................18
2.2.5
Sistem Interaktif........................................................................................19
Sistem dan Informasi.............................................................................................19 2.3.1
Sistem........................................................................................................19 2.3.1.1
2.4
2.5
Perancangan User Interface........................................................15
Elemen – elemen Sistem.............................................................20
2.3.2
Informasi....................................................................................................21
2.3.3
Sistem Informasi........................................................................................21
Internet..................................................................................................................23 2.4.1
Pengertian Internet....................................................................................23
2.4.2
Pengertian World Wide Web......................................................................23
2.4.3
Pengertian Website.....................................................................................23
Basis Data..............................................................................................................24 2.5.1
Sistem Basis Data......................................................................................24
2.5.2
Interactive Multimedia System Design and Development (IMSDD) .......24
2.5.3
Struktur Basis Data...................................................................................27
vii
2.6
2.7
Pemasaran..............................................................................................................27 2.6.1
Definisi Pemasaran....................................................................................27
2.6.2
Konsep Pemasaran....................................................................................28
SWOT...................................................................................................................28 2.7.1
Definisi SWOT.........................................................................................28
BAB III ANALISIS SISTEM YANG BERJALAN 3.1
Riwayat Perusahaan..............................................................................................30
3.2
Struktur Organisasi................................................................................................32
3.3
3.4
3.5
3.2.1
Struktur Organisasi Perusahaan.................................................................32
3.2.2
Tugas dan Tanggung Jawab.......................................................................33
Prosedur yang Sedang Berjalan.............................................................................36 3.3.1
Analisa Prosedur yang Berjalan.................................................................36
3.3.2
Tahapan Analisa Prosedur.........................................................................38
Diagram Aliran Data..............................................................................................40 3.4.1
Diagram Hubungan Sistem Informasi.......................................................40
3.4.2
Diagram Nol...............................................................................................41
Analisis Sistem......................................................................................................42 3.5.1
Analisis SWOT.........................................................................................42
3.5.2
Analisis Kebutuhan Sistem.......................................................................45 3.5.2.1 Hasil Pengembalian Kuisioner......................................................46 3.5.2.2 Analisa Hasil Kuisioner Awal.......................................................58 3.5.2.3 Kesimpulan Hasil Kuisioner..........................................................60
viii
3.6
Permasalahan yang Dihadapi................................................................................61
3.7
Alternatif Pemecahan Masalah..............................................................................62
3.8
Solusi yang Dipilih................................................................................................63
3.9
Perancangan Sistem...............................................................................................64 3.9.1
Rancangan Hirarki / Struktur Menu..........................................................64 3.9.1.1 Rancangan Struktur Front End......................................................64 3.9.1.1.1 Rancangan Struktur Menu Utama...................................64 3.9.1.1.2 Rancangan Struktur Menu Gallery.................................66 3.9.1.1.3 Rancangan Struktur Menu Price List..............................66 3.9.1.1.4 Rancangan Struktur Menu Order....................................67 3.9.1.1.5 Rancangan Struktur Menu Leasing.................................67 3.9.1.1.6 Rancangan Struktur Menu Contact Us...........................67 3.9.1.1.7 Rancangan Struktur Menu About Us..............................68 3.9.1.2 Rancangan Struktur Back End...........................................68
3.9.2
Rancangan State Transition Diagram........................................................70 3.9.2.1 Rancangan State Transition Diagram Front End..........................70 3.9.2.1.1 Rancangan State Transition Diagram Website...............70 3.9.2.1.2 Rancangan State Transition Diagram Halaman Utama..............................................................................71 3.9.2.1.3 Rancangan State Transition Diagram Gallery...............71 3.9.2.1.4 Rancangan State Transition Diagram Price List............72 3.9.2.1.5 Rancangan State Transition Diagram Order..................72 3.9.2.1.6 Rancangan State Transition Diagram Leasing...............73
ix
3.9.2.1.7 Rancangan State Transition Diagram Contact Us.........73 3.9.2.1.8 Rancangan State Transition Diagram About Us.............74 3.9.2.2 Rancangan State Transition Diagram Back End...........................75 3.9.2.2.1 Rancangan State Transition Diagram Home Admin......76 3.9.2.2.2 Rancangan State Transition Diagram Gallery Admin.............................................................................77 3.9.2.2.3 Rancangan State Transition Diagram Price List Admin.............................................................................78 3.9.2.2.4 Rancangan State Transition Diagram Order Admin......79 3.9.2.2.5 Rancangan State Transition Diagram Leasing Admin.............................................................................80 3.9.2.2.6 Rancangan State Transition Diagram Contact Us Admin.............................................................................80 3.9.3 Rancangan Layar.......................................................................................81 3.9.3.1 Rancangan Layar Front End..........................................................81 3.9.3.1.1 Rancangan Layar Intro...................................................81 3.9.3.1.2 Rancangan Layar Menu Utama......................................84 3.9.3.1.3 Rancangan Layar Menu Gallery....................................85 3.9.3.1.4 Rancangan Layar Menu Detil Mobil..............................86 3.9.3.1.5 Rancangan Layar Menu Price List.................................87 3.9.3.1.6 Rancangan Layar Menu Order.......................................89 3.9.3.1.7 Rancangan Layar Menu Leasing....................................90 3.9.3.1.8 Rancangan Layar Menu Contact Us...............................91
x
3.9.3.1.7 Rancangan Layar Menu About Us..................................92 3.9.3.2 Rancangan Layar Back End...........................................................93 3.9.3.2.1 Rancangan Layar Admin Menu Login...........................93 3.9.3.2.2 Rancangan Layar Admin Menu Utama..........................94 3.9.3.2.3 Rancangan Layar Admin Menu Gallery.........................95 3.9.3.2.4 Rancangan Layar Admin Menu Price List.....................96 3.9.3.2.5 Rancangan Layar Admin Menu Order...........................98 3.9.3.2.6 Rancangan Layar Admin Menu Update Mobil..............99 3.9.3.2.7 Rancangan Layar Admin Menu Contact Us.................100 3.9.4
Rancangan Database................................................................................101
3.9.5
Spesifikasi Proses.....................................................................................111
BAB IV IMPLEMENTASI DAN EVALUASI 4.1
Implementasi........................................................................................................133 4.1.1
Sarana yang dibutuhkan dalam pembangunan Website showroom MJ Autoshop..................................................................................................133
4.1.2
Sarana yang dibutuhkan dalam implementasi Website showroom MJ Autoshop..................................................................................................134
4.1.3 4.2
4.3
Rencana Implementasi.............................................................................136
Cara Pengoperasian Aplikasi...............................................................................137 4.2.1
Pengoperasian Aplikasi untuk User.........................................................137
4.2.2
Pengoperasian Aplikasi untuk Admin.....................................................158
Evaluasi Aplikasi.................................................................................................181 4.3.1
Evaluasi Kuisioner kepada User..............................................................181
xi
4.3.2
Evaluasi dari Sudut Pandang IMK……………………………………...181
4.3.3
Evaluasi berdasarkan elemen – elemen multimedia……………………………………………………………...183
BAB V SIMPULAN DAN SARAN 5.1
Simpulan..................................................................................................188
5.2
Saran........................................................................................................189
DAFTAR PUSTAKA RIWAYAT HIDUP LAMPIRAN-LAMPIRAN Kuisioner Akhir…………………………………………………………….……L1 FOTOCOPY SURAT SURVEI
xii
DAFTAR TABEL
Tabel 3.1
Tabel Hasil Kuisioner............................................................................58
Tabel 3.2
Tabel tabadmin.......................................................................................101
Tabel 3.3
Tabel tabcars..........................................................................................102
Tabel 3.4
Tabel tabgallery.....................................................................................103
Tabel 3.5
Tabel tabmember...................................................................................105
Tabel 3.6
Tabel tabmerek......................................................................................106
Tabel 3.7
Tabel tabnewcars...................................................................................107
Tabel 3.8
Tabel taborder........................................................................................108
Tabel 3.9
Tabel tabpriceyear.................................................................................110
Tabel 3.10
Tabel tabtesti.........................................................................................111
xiii
DAFTAR GAMBAR
Gambar 2.1
Interactive Multimedia System Design and Development.......................26
Gambar 3.1
Struktur Organisasi MJ Autoshop............................................................32
Gambar 3.2
Tahapan Pembelian Kendaraan................................................................38
Gambar 3.3
Tahapan Penjualan Kendaraan.................................................................39
Gambar 3.4
Diagram Hubungan Sistem Informasi......................................................40
Gambar 3.5
Diagram Nol Sistem.................................................................................41
Gambar 3.6
Struktur Menu Utama...............................................................................64
Gambar 3.7
Struktur Menu Gallery..............................................................................66
Gambar 3.8
Struktur Menu Price List..........................................................................66
Gambar 3.9
Struktur Menu Order................................................................................67
Gambar 3.10 Struktur Menu Leasing.............................................................................67 Gambar 3.11 Struktur Menu Contact Us.......................................................................67 Gambar 3.12 Struktur Menu About Us.........................................................................68 Gambar 3.13 Struktur Menu Back End..........................................................................69 Gambar 3.14 Rancangan StateTransition Diagram Website..........................................70 Gambar 3.15 Rancangan StateTransition Diagram Halaman Utama............................71 Gambar 3.16 Rancangan StateTransition Diagram Gallery..........................................71 Gambar 3.17 Rancangan StateTransition Diagram Price List.......................................72 Gambar 3.18 Rancangan StateTransition Diagram Order............................................72 Gambar 3.19 Rancangan StateTransition Diagram Leasing..........................................73 Gambar 3.20 Rancangan StateTransition Diagram Contact Us....................................73 Gambar 3.21 Rancangan State Transition Diagram About Us......................................74 xiv
Gambar 3.22 Rancangan State Transition Diagram Back End......................................75 Gambar 3.23 Rancangan State Transition Diagram Home Admin................................76 Gambar 3.24 Rancangan State Transition Diagram Gallery Admin.............................77 Gambar 3.25 Rancangan State Transition Diagram Price List Admin.........................78 Gambar 3.26 Rancangan State Transition Diagram Order Admin...............................79 Gambar 3.27 Rancangan State Transition Diagram Leasing Admin............................80 Gambar 3.28 Rancangan State Transition Diagram Contact Us Admin.......................80 Gambar 3.29 Rancangan Layar Intro bagian 1...............................................................81 Gambar 3.30 Rancangan Layar Intro bagian 2...............................................................81 Gambar 3.31 Rancangan Layar Intro bagian 3...............................................................82 Gambar 3.32 Rancangan Layar Intro bagian 4...............................................................82 Gambar 3.33 Rancangan Layar Menu Utama................................................................84 Gambar 3.34 Rancangan Layar Menu Gallery..............................................................85 Gambar 3.35 Rancangan Layar Menu Detil Mobil........................................................86 Gambar 3.36 Rancangan Layar Menu Price List bagian Mobil Baru............................87 Gambar 3.37 Rancangan Layar Menu Price List bagian Mobil Bekas..........................88 Gambar 3.38 Rancangan Layar Menu Order.................................................................89 Gambar 3.39 Rancangan Layar Menu Leasing..............................................................90 Gambar 3.40 Rancangan Layar Menu Contact Us.........................................................91 Gambar 3.41 Rancangan Layar Menu About Us ...........................................................92 Gambar 3.42 Rancangan Layar Admin Menu Login.....................................................93 Gambar 3.43 Rancangan Layar Admin Menu Utama....................................................94 Gambar 3.44 Rancangan Layar Admin Menu Gallery..................................................95 Gambar 3.45 Rancangan Layar Admin Menu Price List untuk Mobil Baru.................96 xv
Gambar 3.46 Rancangan Layar Admin Menu Price List untuk Mobil Bekas...............97 Gambar 3.47 Rancangan Layar Admin Menu Order.....................................................98 Gambar 3.48 Rancangan Layar Admin Menu Update Mobil........................................99 Gambar 3.49 Rancangan Layar Admin Menu Contact Us..........................................100 Gambar 4.1
Tampilan Layar Halaman Intro Bagian 1...............................................137
Gambar 4.2
Tampilan Layar Halaman Intro Bagian 2...............................................138
Gambar 4.3
Tampilan Layar Halaman Intro Bagian 3...............................................139
Gambar 4.4
Tampilan Layar Halaman Intro Bagian 4...............................................140
Gambar 4.5
Tampilan Layar Halaman Utama Website.............................................142
Gambar 4.6
Tampilan Layar Halaman Utama Menu Gallery....................................143
Gambar 4.7
Tampilan Layar Menu Gallery berdasarkan Merk.................................144
Gambar 4.8
Tampilan Layar Menu Gallery bagian Detil Mobil................................145
Gambar 4.9
Tampilan Layar Utama Menu Order......................................................146
Gambar 4.10 Tampilan Layar Utama Menu Order dengan Validasi...........................147 Gambar 4.11 Tampilan Layar Utama Menu Order Sukses..........................................148 Gambar 4.12 Tampilan Layar Utama Menu Leasing via Menu Gallery......................149 Gambar 4.13 Tampilan Layar Utama Menu Leasing...................................................150 Gambar 4.14 Tampilan Layar Utama Menu Leasing dengan Validasi........................151 Gambar 4.15 Tampilan Layar Utama Menu Leasing Sukses.......................................152 Gambar 4.16 Tampilan Layar Utama Menu Price List Harga Mobil Baru..................153 Gambar 4.17 Tampilan Layar Utama Menu Price List Harga Mobil Bekas................154 Gambar 4.18 Tampilan Layar Utama Menu Price List show Harga Mobil Baru........155 Gambar 4.19 Tampilan Layar Utama Menu Price List show Harga Mobil Bekas......156 Gambar 4.20 Tampilan Layar Utama Menu Contact Us.............................................157 xvi
Gambar 4.21 Tampilan Layar Utama Menu About Us................................................158 Gambar 4.22 Tampilan Layar Utama Login Admin....................................................159 Gambar 4.23 Tampilan Layar Login Admin dengan Validasi.....................................160 Gambar 4.24 Tampilan Layar Utama Admin...............................................................162 Gambar 4.25 Tampilan Layar Admin Data Member...................................................163 Gambar 4.26 Tampilan Layar Admin Form Tambah Member Baru...........................164 Gambar 4.27 Tampilan Layar Admin Form Tambah Member dengan Validasi.........165 Gambar 4.28 Tampilan Layar Admin Form Ubah Member........................................166 Gambar 4.29 Tampilan Layar Admin Form Tambah Merk Mobil..............................167 Gambar 4.30 Tampilan Layar Admin Form Tambah Gambar Mobil Bekas...............168 Gambar 4.31 Tampilan Layar Admin Form Tambah Gambar Mobil Bekas...............169 Gambar 4.32 Tampilan Layar Admin Form Ubah Merk Mobil..................................170 Gambar 4.33 Tampilan Layar Admin Form Ubah Gambar Mobil Bekas....................171 Gambar 4.34 Tampilan Layar Admin Harga Mobil Baru............................................172 Gambar 4.35 Tampilan Layar Admin Harga Mobil Bekas..........................................173 Gambar 4.36 Tampilan Layar Admin Form Tambah Data Mobil Baru......................174 Gambar 4.37 Tampilan Layar Admin Form Tambah Data Mobil Bekas....................175 Gambar 4.38 Tampilan Layar Admin Form Ubah Harga Mobil Baru.........................176 Gambar 4.39 Tampilan Layar Admin Form Ubah Harga Mobil Bekas.......................177 Gambar 4.40 Tampilan Layar Admin Menu Order......................................................178 Gambar 4.41 Tampilan Layar Admin Tabel Detil Order.............................................179 Gambar 4.42 Tampilan Layar Admin Menu Contact Us.............................................180 Gambar 4.43 Elemen teks halaman price list website..................................................184 Gambar 4.44 Elemen gambar pada tiap halaman.........................................................185 xvii
Gambar 4.45 Elemen gambar pada halaman galeri......................................................185 Gambar 4.46 Elemen animasi pada layar intro............................................................186 Gambar 4.47 Elemen animasi pada bagian banner website.........................................186 Gambar 4.48 Tombol on / off elemen suara pada halaman utama...............................187 Gambar 4.49 Tombol dengan efek suara......................................................................187
xviii
DAFTAR LAMPIRAN
Kuisioner Akhir.................................................................................................................L1 Surat Keterangan Survey...................................................................................................L9
xix
