Skripsi
Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Teknik
Jurusan Teknik Informatika
Oleh :
Linus Wedar Duanto NIM : 055314024
PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA
YOGYAKARTA
2010
COLOUR AND WEB BASED PAINT COLOR STORING
THESIS
Submitted as a partial fulfilment of the requirements for the degree of Sarjana Teknik
By :
Linus Wedar Duanto
Student ID : 055314024
INFORMATICS ENGINEERING STUDY PROGRAM
INFORMATICS ENGINEERING DEPARTMENT
FACULTY OF SCIENCE AND TECHNOLOGY
SANATA DHARMA UNIVERSITY
YOGYAKARTA
2010
untuk Tuhan Yang Maha Menakjubkan, yang selalu penuh kejutan dan selalu
membuatku terkejut dengan seluruh keajaiban semestanya, baik ketika mataku
terbuka maupun tertutup.
untuk keluargaku yang juga menakjubkan, untuk semua dukungan dan
kehangatan
untuk almamaterku
dan untuk Indonesia serta dunia otomotifnya.
Salah satu kegiatan salon mobil adalah pengecatan mobil. Pengecatan mobil dalam usaha memodifikasi dan mempercantik mobil akan lebih komplek jika menggunakan warna cat yang berbeda – beda pada setiap panel mobil tanpa ada gambaran/visualisasi pengecatan pada mobil tersebut. Akibatnya pelanggan yang akan mengecatkan mobilnya belum merasa mantap, apakah warna yang dipilih akan sesuai dengan warna panel yang lainnya yang berbeda warnanya. Kesulitan utama dari pihak pelanggan memprediksi hasil jadi pengecatan mobil.
Tugas akhir ini akan membuat program simulasi pemilihan warna cat mobil dan pencatatan warna cat berbasis web dengan tampilan flash. Pemrograman flash akan digabungkan dengan pemrograman php untuk pengembangan web. Metodologi yang digunakan dalam pembuatan program ini menggunakan waterfall yang didalamnya menggunakan analisis OOAD.
Dengan menggunakan web ini diharapkan pihak pelanggan dapat menghemat waktu tanpa harus datang ke bengkel. Pihak pelanggan dapat melakukan simulasi pemilihan warna serta melakukan uji coba warna pada objek gambar mobil. Setelah cocok dengan simulasi warna tersebut, pihak pelanggan dapat memesan pengecatan ke bengkel. Hasil simulasi tersebut berupa gambar mobil yang sudah dicustomisasi warnanya dan informasi warna pada bagian mobil bermode hexadecimal.
Painting cars for modifying and improving cars’ performance will be more complicated if it uses more than one colour at different parts of the car without having the sketch. Customers will likely to feel doubtful whether the colours they choose will look good on their cars. The main problem for customers is predicting the final result of the car painting.
This thesis mainly discusses, and at the end, creates a simulation program of choosing car paint colour and web based paint colour storing by using flash. Flash programming will be combined with PHP programming for web developing. The methodology used in this programming is using waterfall which applies OOAD analysis.
By using this web, the customer will save their time because they do not need to go to the automotive shop. Customers will do the simulation at home and choose the best colours for their cars. After they are ready, they are able to order car painting service to the shop. The result of the simulation is a picture of a car which colours have been customized. The information of the RGB colours is in hexadecimal mode.
Puji syukur kepada Tuhan Yang Maha Esa yang telah memberikan segala karunia-Nya sehingga penulis dapat menyelesaikan skripsi dengan judul
“ Program Simulasi Pemilihan Warna Cat Mobil dan Pencatatan Warna Cat
Berbasis Web”.
Dalam kesempatan ini, penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang turut memberikan dukungan, semangat dan bantuan hingga selesainya skripsi ini :
1. Bapak Puspaningtyas Sanjoyo Adi, S.T., M.T. sebagai dosen pembimbing dan sebagai Kaprodi, atas semua bantuan, bimbangan, kesabaran, waktu, dan semangat yang telah bapak berikan, membuat skripsi ini dapat terselesaikan.
2. Bapak Iwan Binanto, S.Si., M.Cs. dan sebagai dosen penguji, atas saran dan kritikan yang diberikan.
3. Bapak J.B. Budi Darmawan, S.T., M.Sc. dan sebagai dosen penguji, atas saran dan kritikan yang diberikan.
4. Bengkel Jogja Speed yang telah memberikan keleluasaan dalam melakukan observasi untuk menyelesaikan skripsi ini.
5. Seluruh Dosen TI yang selama empat setengah tahun ini telah membagikan ilmunya yang sangat berguna kepada penulis.
6. Laboran Laboratorium Komputer yang telah membantu mempersiapkan jalannya pendadaran.
kakakku, Brigita Galuh Prima Astiwi, atas kasih sayang, perhatian, dukungan, semangat dan doa yang mengiringi proses pembuatan skripsi ini.
9. Angela Ami Asmarani, CBSoftHouse yang sangat banyak membantu dalam proses pembuatan skripsi ini, atas dukungan, semangat, dan bantuan. 10.Serta semua pihak yang telah membantu kelancaran dalam penulisan tugas
akhir ini. Penulis mengucapkan banyak terima kasih.
Yogyakarta, Januari 2010
Penulis
HALAMAN JUDUL BAHASA INDONESIA ... i
HALAMAN JUDUL BAHASA INGGRIS ... ii
HALAMAN PERSETUJUAN PEMBIMBING ... iii
HALAMAN PENGESAHAN ... iv
HALAMAN PERSEMBAHAN ... v
PERNYATAAN KEASLIAN KARYA ... vi
HALAMAN PERSETUJUAN PUBLIKASI... vii
ABSTRAK ... viii
ABSTRACT ... x
KATA PENGANTAR ... xi
DAFTAR ISI ... xii
DAFTAR TABEL ... xxii
DAFTAR GAMBAR ... xxvii
BAB I PENDAHULUAN 1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 2
1.3 Tujuan dan Manfaat ... 3
1.4 Batasan Masalah ... 3
1.5 Metodologi Penelitian ... 4
2.1 Simulasi... 7
2.2 WWW(World Wide Web)... 7
2.3 Interaktivitas dengan Flash... 8
2.4 Flash, PHP dan MySQL... 11
2.4.1 Flash ... 11
2.4.2 PHP ... 13
2.4.3 Menggabungkan Flash dan PHP... 13
2.4.4 Mengakses MySQL dengan Flash... 14
2.5 Teori Warna ... 15
2.6 Warna Pantone ... 16
2.7 CR Plus ... 17
BAB III ANALISA DAN PERANCANGAN 3.1. Analisa Sistem... 20
3.2. Analisa Kebutuhan ... 21
3.3. Proses bisnis pada bengkel saat pelanggan akan mengecatkan mobil .... 22
3.4. Gambar proses kerja sistem yang baru... 23
3.5. Diagram Use Case... 24
3.5.1. Definisi aktor... 24
3.6. Model Analisis ... 26
3.6.1. Realisasi Use Case... 26
3.6.2. Diagram Kelas Keseluruhan ... 27
3.7. Model Perancangan... 29
3.7.1. Kelas Perancangan ... 29
3.7.2. Atribut dan Method... 31
3.7.3. Diagram Kelas... 32
3.7.4. User Interface ... 33
3.7.5. ER Diagram... 33
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1Model Implementasi ... 34
4.2Model Pengujian ... 35
4.2.1 Model Pengujian tiap – tiap Use case... 36
4.2.1.1 Use case Login... 36
4.2.1.2 Use case Tambah Data Mobil ... 36
4.2.1.3 Use case Menampilkan dan Menyembunyikan Mobil... 38
4.2.1.4 Use case Mencari Data Pesanan Pengecatan ... 39
4.2.1.5 Use case Mengedit Profile Home ... 40
4.2.1.6 Use case Logout... 40
4.2.1.7 Use case Melihat Profile Painting Division ... 41
4.2.1.11 Use case Memilih Warna ... 44
4.2.1.12 Use case Pesan Pengecatan Mobil ... 46
4.2.2 Kuisioner ... 48
BAB V ANALISA HASIL dan PEMBAHASAN 5.1Analisis Hasil ... 49
5.1.1 Use case Login... 49
5.1.2 Use case Tambah Data Mobil ... 50
5.1.3 Use case Menampilkan dan Menyembunyikan Mobil... 50
5.1.4 Use case Mencari Data Pesanan Pengecatan ... 51
5.1.5 Use case Mengedit Profile Home ... 51
5.1.6 Use case Logout... 51
5.1.7 Use case Melihat Profile Painting Division ... 52
5.1.8 Use case Memilih Mobil... 52
5.1.9 Use case Memilih Posisi Mobil ... 53
5.1.10 Use case Memilih Bagian Mobil ... 53
5.1.11 Use case Memilih Warna ... 53
5.1.12 Use case Pesan Pengecatan Mobil ... 54
5.2Pembahasan Kuisioner ... 54
BAB IV KESIMPULAN DAN SARAN
6.1Kesimpulan ... 57
6.2Saran... 58
DAFTAR PUSTAKA ... 59
LAMPIRAN 1 SKENARIO USE CASE 1.1 Skenario Use case Login... 61
1.2 Skenario Use case Tambah Data Mobil... 62
1.3 Skenario Use case Menampilkan dan Menyembunyikan Mobil ... 65
1.4 Skenario Use case Mencari Data Pesanan Pengecatan ... 66
1.5 Skenario Use case Mengedit Profile Home ... 68
1.6 Skenario Use case Logout... 69
1.7 Skenario Use case Melihat Profile Painting Division... 70
1.8 Skenario Use case Memilih Mobil... 70
1.9 Skenario Use case Memilih Posisi Mobil ... 72
1.10 Skenario Use case Memilih Bagian Mobil ... 74
1.11 Skenario Use case Memilih Warna... 75
1.12 Skenario Use case Pesan Pengecatan Mobil... 77
2.3 Realisasi Use case Menampilkan dan Menyembunyikan Mobil ... 83
2.4 Realisasi Use case Mengedit Profile Home ... 85
2.5 Realisasi Use case Mencari Data Pesanan Pengecatan... 86
2.6 Realisasi Use case Logout ... 87
2.7 Realisasi Use case Melihat Profile Painting Division ... 88
2.8 Realisasi Use case Memilih Mobil ... 89
2.9 Realisasi Use case Memilih Posisi Mobil... 90
2.10 Realisasi Use case Memilih Bagian Mobil ... 93
2.11 Realisasi Use case Memilih Warna... 94
2.12 Realisasi Use case Pesan Pengecatan Mobil... 95
LAMPIRAN 3 Diagram Kelas keseluruhan ... 98
LAMPIRAN 4 REALISASI USE CASE 4.1 KelasPerancangan login ... 99
4.2 KelasPerancangan tambah data Mobil ... 99
4.3 KelasPerancangan tampilkan dan senyembunyikan mobil ... 100
4.4 KelasPerancangan edit profile home... 100
4.5 Realisasi Use case Mencari Data Pesanan Pengecatan... 100
4.7 KelasPerancangan melihat profile painting division... 100
4.8 KelasPerancangan memilih mobil... 102
4.9 KelasPerancangan memilih posisi mobil ... 102
4.10 KelasPerancangan memilih bagian mobil... 103
4.11 KelasPerancangan memilih warna ... 103
4.12 KelasPerancangan pesan pengecatan mobil... 103
LAMPIRAN 5 ATRIBUT dan METHOD 5.1 Halaman Login... 103
5.2 Halaman Template Administrator... 103
5.3 Halaman Administrator... 104
5.4 Halaman Edit Profile Home ... 106
5.5Halaman Tampil Sembunyikan Mobil ... 106
5.6Halaman Tambah Data Mobil... 108
5.7Halaman Pencarian Pesanan ... 110
5.8 Halaman Index Pengunjung ... 114
5.9 HalamanHome ... 116
5.10 HalamanCustomisasiWarna ... 116
5.11 Flash Template ... 116
5.12 Flash List Nama dan Gambar Mobil... 121
5.13 Flash tombol Kiri ... 123
5.17 Flash Pengaturan Warna Dengan Warna Color Spectrum... 129
5.18 Flash Form Pesanan ... 130
5.19 Konfirmasi ... 132
5.20 Logout ... 134
5.21 Pilih ... 134
5.22 Edit Profile ... 136
5.23 Kirim Data Mobil ... 137
5.24 Admin... 138
5.25 Mobil ... 138
5.26 Mobil(.swf) ... 139
5.27 Mobil(.jpg) ... 139
5.28 Home ... 139
5.29 Pesanan... 140
5.30 Pemesan ... 140
LAMPIRAN 6 6.1 Diagram Kelas ... 141
7.1 Halaman Index Pengunjung ... 142
7.2 Halaman Home ... 142
7.3 Halaman Customisasi Warna ... 143
7.4 Halaman Flash Template ... 143
7.5 Flash List Nama dan Mobil Gambar... 144
7.6 Flash Tombol Bagian – Bagian Mobil ... 144
7.7 Flash Pengaturan Warna ... 144
7.8 Flash Pengaturan Warna dengan Spectrum... 145
7.9 Flash Tombol Kiri ... 145
7.10 Flash Tombol Kanan ... 145
7.11 Flash Form Pesanan ... 145
7.12 Halaman Login... 146
7.13 Halaman Template Administrator... 146
7.14 Halaman Administrator... 147
7.15 Halaman Tambah Data Mobil... 147
7.16 Halaman Edit Profile Home ... 148
7.17 Halaman Tampil Sembunyikan Mobil ... 148
7.18 Halaman Cari Pesanan ... 149
LAMPIRAN 8 ER DIAGRAM... 150
9.2 Halaman Customisasi Warna, Flash Templa, Flash List Nama dan
Mobil Gambar ... 151
9.3 Flash Tombol Bagian Mobil, Flash Tombol Kiri, Flash Tombol Kanan... 152
9.4 Flash Pengaturan Warna ... 152
9.5 Flash Pengaturan Warna dengan Spectrum... 152
9.6 Flash Form Pesanan ... 154
9.7 Halaman Login... 154
9.8 Halaman Template Administrator dan Halaman Administrator ... 155
9.9 Flash Tambah Data Mobil... 155
9.10 Halaman Tampil Sembunyikan Mobil ... 156
9.11 Halaman Pencarian Pesanan ... 156
9.12 Halaman Edit Profile Home ... 157
LAMPIRAN 10 Lampiran Kuisioner ... 158
LAMPIRAN 11 Pembentukan file mobil dengan format .SWF... 159
Tabel 1 Jenis, nama dan deskripsi event... 8 Tabel 2 nama action dan deskripsinya ... 10 Tabel 3 Definisi Aktor... 23 Tabel 4 Skenario Use Case ... 23 Tabel 5 Realisasi Use Case... 24 Tabel 6 Kelas Analisis ... 25 Tabel 7 Kelas perancangan dengan Kelas Analisis... 27 Tabel 8 Prototype Atribut dan Method ... 29 Tabel 9 Prototype kelas perancangan yang menjadi tabel ... 31 Tabel 10 Model implementasi... 34 Tabel 11 Model pengujian use case login ... 36 Tabel 12 Model pengujian Use case Tambah Data Mobil... 36 Tabel 13 Model pengujian Use case Menampilkan dan
Menyembunyikan Mobil... 38 Tabel 14 Model pengujian Use case Mencari Data Pesanan
Pengecatan ... 39 Tabel 15 Model pengujian Use case Mengedit Profile Home ... 40 Tabel 16 Model pengujian Use case Logout... 40 Tabel 17 Model pengujian Use case Melihat Profile Painting
Division ... 41
Tabel 21 Model pengujian Use case Memilih Warna... 45 Tabel 22 Model pengujian Use case Pesan Pengecatan Mobil... 46 Tabel 23 Perhitungan Nilai Kuisioner... 55
LAMPIRAN 1
Tabel 24 Skenario Use case Login... 61 Tabel 25 Skenario Use case Tambah Data Mobil... 62 Tabel 26 Skenario Use case Menampilkan dan Menyembunyikan Mobil ... 64 Tabel 27 Skenario Use case Mencari Data Pesanan Pengecatan... 65 Tabel 28 Skenario Use case Mengedit Profile Home ... 68 Tabel 29 Skenario Use case Logout... 69 Tabel 30 Skenario Use case Melihat Profile Painting Division... 70 Tabel 31 Skenario Use case Memilih Mobil... 70 Tabel 32 Skenario Use case Memilih Posisi Mobil ... 72 Tabel 33 Skenario Use case Memilih Bagian Mobil ... 73 Tabel 34 Skenario Use case Memilih Warna... 75 Tabel 35 Skenario Use case Pesan Pengecatan Mobil... 77
Tabel 36 Realisasi Use case Login ... 80 Tabel 37 Realisasi Use case Tambah Data Mobil ... 81 Tabel 38 Realisasi Use case Menampilkan dan Menyembunyikan Mobil ... 83 Tabel 39 Realisasi Use case Mengedit Profile Home... 85 Tabel 40 Realisasi Use case Mencari Data Pesanan Pengecatan... 86 Tabel 41 Realisasi Use case Logout ... 87 Tabel 42 Realisasi Use case Melihat Profile Painting Division ... 88 Tabel 43 Realisasi Use case Memilih Mobil ... 89 Tabel 44 Realisasi Use case Memilih Posisi Mobil... 91 Tabel 45 Realisasi Use case Memilih Bagian Mobil ... 92 Tabel 46 Realisasi Use case Memilih Warna ... 94 Tabel 47 Realisasi Use case Pesan Pengecatan Mobil... 96
LAMPIRAN 5
Tabel 48 Atribut halaman login ... 103 Tabel 49 Atribut halaman template administrator ... 103 Tabel 50 Method halaman template administrator... 104 Tabel 51 Method halaman administrator ... 104 Tabel 52 Atribut halaman edit profile home ... 105 Tabel 53 Method halaman edit profile home ... 105 Tabel 54Atribut halaman tampil sembunyikan mobil... 106
Tabel 58Atribut halaman pencarian pesanan ... 110 Tabel 59Methodhalaman pencarian pesanan ... 110 Tabel 60 Atribut halaman index pengunjung... 114 Tabel 61 Method halaman index pengunjung... 114 Tabel 62 Atribut HalamanHome... 115 Tabel 63 Method HalamanHome ... 115 Tabel 64 Atribut HalamanCustomisasiWarna ... 116 Tabel 65 Atribut Flash Template ... 116 Tabel 66 Method flash Template ... 117 Tabel 67 Atribut flash nama dan gambar mobil... 121 Tabel 68 Method flash nama dan gambar mobil... 121 Tabel 69 Atribut Flash tombol Kiri... 123 Tabel 70 Method Flash tombol Kiri... 123 Tabel 71 Atribut Flash tombol Kanan... 125 Tabel 72 Method Flash tombol Kanan... 125 Tabel 73 Atribut Flash Tombol Bagian – Bagian Mobil ... 126 Tabel 74 Method Flash Tombol Bagian – Bagian Mobil ... 127 Tabel 75 Atribut Flash Pengaturan Warna ... 127 Tabel 76 Method Flash Pengaturan Warna ... 128
Color Spectrum ... 129 Tabel 78 Method Flash Pengaturan Warna Dengan Warna
Color Spectrum ... 129 Tabel 79 Atribut Flash Form Pesanan... 130 Tabel 80 Method Flash Form Pesanan... 131 Tabel 81 Atribut Konfirmasi... 132 Tabel 82 Method Konfirmasi ... 132 Tabel 83 Atribut Logout ... 133 Tabel 84 Atribut Pilih ... 134 Tabel 85 Method Pilih... 134 Tabel 86 Method Edit Profile... 136 Tabel 87 Method Kirim Data Mobil ... 137 Tabel 88 Atribut Admin ... 138 Tabel 89 Atribut Mobil ... 138 Tabel 90 Atribut Mobil(.swf)... 139 Tabel 91 Atribut Mobil(.jpg) ... 139 Tabel 92 Atribut Home ... 139 Tabel 93 Atribut Pesanan ... 140 Tabel 94 Atribut Pemesan... 140
Gambar 2 Contoh mode warna pantone pms, RGB dan hexadecimal ...16
Gambar 3 merubah mode warna hexadecimal ke pantone...18
Gambar 4 hasil mode pantone...18
Gambar 5 hasil warna cat yang didapatkan...19
Gambar 6merubah mode warna hexadecimal ke pantone... 19
Gambar 7 Gambaran umum proses pemilihan warna ... 20
Gambar 8 Diagram Use Case... 22
Lampiran 2
Gambar 9 Realisasi Use case Login ... 80
Gambar 10 Realisasi Use case Tambah Data Mobil ... 81
Gambar 11 Realisasi Use case Menampilkan dan Menyembunyikan
Mobil ... 83
Gambar 12 Realisasi Use case Mengedit Profile Home... 85
Gambar 13 Realisasi Use case Mencari Data Pesanan Pengecatan ... 86
Gambar 14 Realisasi Use case Logout ... 87
Gambar 15 Realisasi Use case Melihat Profile Painting Division ... 88
Gambar 16 Realisasi Use case Memilih Mobil ... 89
Gambar 17 Realisasi Use case Memilih Posisi Mobil ... 91
Gambar 19 Realisasi Use case Memilih Warna ... 94
Gambar 20 Realisasi Use case Pesan Pengecatan Mobil ... 96
Lampiran 3
Gambar 21 Diagram Kelas keseluruhan ... 98
Lampiran 4
Gambar 22 KelasPerancangan login... 99
Gambar 23 KelasPerancangan tambah data mobil ... 99
Gambar 24 KelasPerancangan tampilkan dan senyembunyikan mobil... 100
Gambar 25 KelasPerancangan edit profile home ... 100
Gambar 26 Realisasi Use case mencari data pesanan pengecatan ... 100
Gambar 27 KelasPerancangan Logout ... 101
Gambar 28 KelasPerancangan melihat profile painting division ... 102
Gambar 29 KelasPerancangan memilih mobil ... 102
Gambar 30 KelasPerancangan memilih posisi mobil... 102
Gambar 31 KelasPerancangan memilih bagian mobil ... 103
Gambar 32 KelasPerancangan memilih warna... 103
Gambar 33 KelasPerancangan pesan pengecatan mobil ... 104
Lampiran 7
Gambar 35 Halaman Index Pengunjung... 142
Gambar 36 Halaman Home ... 142
Gambar 37 Halaman Customisasi Warna... 143
Gambar 38 Halaman Flash Template ... 143
Gambar 39 Flash List Nama dan Mobil Gambar ... 144
Gambar 40 Flash Tombol Bagian – Bagian Mobil... 144
Gambar 41 Flash Pengaturan Warna ... 145
Gambar 42 Flash Pengaturan Warna dengan Spectrum ... 145
Gambar 43 Flash Tombol Kiri... 145
Gambar 44 Flash Tombol Kanan... 145
Gambar 45 Flash Form Pesanan ... 145
Gambar 46 Halaman Login ... 146
Gambar 47 Halaman Template Administrator ... 146
Gambar 48 Halaman Administrator ... 147
Gambar 49 Halaman Tambah Data Mobil ... 147
Gambar 50 Halaman Edit Profile Home... 148
Gambar 51 Halaman Tampil Sembunyikan Mobil... 148
Gambar 52 Halaman Cari Pesanan ... 149
Gambar 53 ER Diagram ... 150
Lampiran 9 CAPTURE CLASS BOUNDARY
Gambar 54 Halaman Index Pengunjung dan Halaman Home... 151
Gambar 55 Halaman Customisasi Warna, Flash Templa, Flash List Nama
dan Mobil Gambar ... 152
Gambar 56 Flash Tombol Bagian Mobil, Flash Tombol Kiri, Flash
Tombol Kanan... 152
Gambar 57 Flash Pengaturan Warna ... 152
Gambar 58 Flash Pengaturan Warna dengan Spectrum ... 153
Gambar 59 Flash Form Pesanan ... 154
Gambar 60 Halaman Login ... 154
Gambar 61 Halaman Template Administrator dan Halaman
Administrator ... 155
Gambar 62 Flash Tambah Data Mobil ... 155
Gambar 63 Halaman Tampil Sembunyikan Mobil... 156
Gambar 64 Halaman Pencarian Pesanan ... 156
Gambar 65 Halaman Edit Profile Home... 157
Lampiran 11
Gambar 66 pembuatan file mobil ... 160
1.1 LATAR BELAKANG
Dunia otomotif yang semakin berkembang menuntut bengkel – bengkel otomotif semakin berkembang pesat dalam pelayanannya. Bengkel otomotif khusunya pada bengkel Jogja Speed ini menyediakan jasa salon mobil, yang didalamnya mempunyai divisi painting. Tugas dari divisi painting ini mengecat ulang mobil pelanggan (repaint), memodifikasi cat dan mengecat mobil pelanggan per panel. Pemilihan warna cat mobil sangatlah penting karena warna cat yang akan dipilih merupakan warna keinginan pihak pelanggan. Dalam menentukan warna cat yang akan digunakan pihak pelanggan melakukan negosiasi dengan divisi painting. Divisi painting
menunjukkan kepada pihak pelanggan berupa gambar mobil yang pernah di cat di bengkel ini dengan menggunakan foto - foto yang terdapat pada komputer di bengkel dan menggunakan sampel/katalog (color guide) cat Spies Hecker yang ada. Proses negosiasi pemilihan warna untuk pengecatan mobil sering menjadi lama, kurang lebih 1-2 minggu hingga pelanggan benar – benar mantap dalam memilih warna yang akan digunakan dalam proses pengecatan.
Seiring pesatnya kemajuan teknologi dan persaingan antar bengkel – bengkel mobil yang ada di jogja, divisi painting pada Jogja Speed ingin meningkatkan pelayanan dalam proses simulasi pemilihan warna cat, menampilkan prediksi hasil pengecatan dari simulasi pemilihan warna cat
yang telah dipilih oleh pihak pelanggan dan juga memperkenalkan divisi painting ini ke khalayak umum. Divisi painting dalam usaha tersebut akan menggunakan media website yang berkontenkan flash yang didalamnya terdapat visualisasi dan simulasi pemilihan warna untuk pengecatan mobil.
Untuk membuat sebuah website agar dapat menampilkan visualisasi dan simulasi pengecatan mobil menggunakan tool macromedia flash. Dengan macromedia flash, gambar mobil dapat dijadikan animasi sehingga gambar mobil dapat dicustom warnanya. Selain itu action script 2.0 pada macromedia
flash dapat digabungkan dengan bahasa pemrograman php untuk membuat
suatu website.
Dengan website ini, diharapkan dapat membantu pihak pelanggan dan divisi painting dalam memprediksi hasil pengecatan. Pihak pengunjung dapat memilih warna sesuai dengan keinginannya tanpa harus mengeluarkan biaya dalam usaha memodifikasi dan mempercantik mobilnya secara virtual. Selain itu pihak pelanggan dapat memesan pengecatan sesuai dengan warna customisasi pengunjung web sehingga dapat menghemat waktu pelanggan, tanpa harus datang ke bengkel untuk mendiskusikan warna apa yang cocok untuk pengecatan mobilnya.
1.2 RUMUSAN MASALAH
1.3 TUJUAN DAN MANFAAT
Pengunjung web ini adalah calon pelanggan bengkel yang ingin mengetahui prediksi hasil pengecatan mobil.
Tujuan dari tugas akhir ini adalah :
1. Membantu pihak pelanggan dan divisi painting dalam memprediksi hasil pengecatan mobil.
2. Membantu pihak pelanggan dan divisi painting dalam proses pemilihan warna untuk pengecatan mobil.
1.4 BATASAN MASALAH
Tugas akhir ini akan dibuat batasan - batasan sebagai berikut:
1. Contoh mobil yang disimulasikan merupakan gambar mobil yang sudah diolah. Pengolahan gambar mobil tidak dijelaskan di dalam skripsi ini.
2. Menggunakan visualisasi 2 dimensi sehingga objek mobil bisa dilihat dari sisi kiri dan sisi kanan.
3. Dalam penambahan data objek mobil(.swf) atribut dari objek mobil harus sesuai dengan nama objek yang sudah ditentukan agar dapat dilakukan pengcustomisasian warna.
4. Administrator harus bisa menggunakan Macromedia Flash dan
Photoshop untuk menambahkan data mobil.
tidak termasuk dalam sistem ini.
7. Dalam program simulasi pengecatan mobil ini hanya terdapat 4 bagian pengecatan yaitu all body, down body, engine cap dan up body.
1.5 METODOLOGI PENELITIAN
Metodologi skripsi ini sebagai berikut :
1. Studi pustaka tentang pemrograman di Macromedia Flashdan PHP. 2. Mengembangkan sistem dengan metode waterfall[7] dengan
pemodelan UML[7]. Langkah – langkahnya metode sebagai berikut : a. Analisis
Bertujuan menganalisis data – data yang digunakan untuk kebutuhan pembuat program. Sehingga pembuatan program simulasi dapat maksimal.
b. Perancangan
Perancangan dengan menggunakan pemodelan UML
menggunakan diagram use case, melakukan skenario pada tiap – tiap use case, merealisasikan diagram use case dalam bentuk kolaborasi berbagai objek dengan kelas diagram pada tiap – tiap
use case. Membuat sequence diagram untuk menjelaskan relisasi tiap – tiap kelas diagram, menggabungkan semua diagram kelas sehingga terbentuk diagram kelas keseluruhan sebagai kelas analisis atau kelas yang ber-stereotype “boundary”, “control”,
agar dalam pelaksanaan pembuatan program akan lebih mudah. Pemodelan perancangan dengan membuat kelas perancangan (menggambarkan himpunan objek yang memiliki relasionship, operasi dan attribut) dari tiap – tiap kelas analisis. Menjabarkan tiap – tiap kelas perancangan pada operasi dan atribut. Pada kelas perancangan yang terdapat method akan dijelaskan input, output, algoritma dan pengimplementasiannya. Menggabungkan kelas perancangan agar terbentuk diagram kelas lengkap dengan operasi dan attribut.
c. Implementasi
Mengimplementasikan hasil perancangan ke dalam pemrograman
PHP dan pemrograman FLASH. d. Pengujian
Mengadakan pengujian program simulasi yang telah dibuat apakah sudah layak atau belum.
1.6 SISTEMATIKA PENULISAN
Untuk memudahkan dalam menyusun dan pemahaman isi dari tugas akhir ini, digunakan sistematika penulisan sebagai berikut :
BAB I PENDAHULUAN
BAB II LANDASAN TEORI
Bab II berisi berbagai teori yang mendukung pokok pembahasan tugas akhir meliputi simulasi, WWW(World Wide Web), animasi flash, flash dan
php,fungsi koneksi php dan flash, teori warna dan penggunaan Macromedia Flash untuk melakukan simulasi.
BAB III ANALISIS DAN PERANCANGAN SISTEM
Bab III berisi analisa dan perancangan dari program simulasi ini. Perancangan ini diawali dengan proses bisnis pada bengkel saat pelanggan akan mengecatkan mobil, memaparkan spesifikasi program, pencarian warna dengan CR plus, membuat diagram use case, definisi aktor, membuat skenario tiap – tiap use case, realisasi use case, diagram kelas keseluruhan, atribut dan
method, diagram kelas, user interface, ER diagram.
BAB IV IMPLEMENTASI dan PENGUJIAN SISTEM
Bab IV berisi hasil rancangan dan mengimplementasikannya ke dalam bahasa pemrograman dengan menggunakan PHP dan Macromedia Flash.
BAB V ANALISA HASIL dan PEMBAHASAN
Bab V berisi tentang uraian mengenai analisa hasil tiap – tiap use case dan pembahasan.
BAB VI KESIMPULAN dan SARAN
2.1 Simulasi
Simulasi adalah proses pembuatan desain model dari suatu sistem yang nyata, kemudian model tersebut diimplementasikan dengan percobaan berbasis komputer untuk menjelaskan, menggambarkan dan memprediksikan dari suatu sistem yang nyata[6].
Apabila simulasi dibandingkan dengan relita, maka simulasi merupakan prediksi, penjelasan, gambaran serta perilaku dari sistem yang nyata yang direpresentasikan dan diterjemahkan kedalam bentuk program komputer. Hal ini kemudian menjadi tujuan utama dari simulasi. Keuntungan dari simulasi adalah sebagai suatu pendekatan untuk pemecahan suatu masalah, mendeskripsikan dan menggambarkan suatu sistem yang kompleks sehingga hasil dari simulasi yang didapat mampu mendekati hasil dari sistem yang nyata[6].
2.2 WWW(World Wide Web)
WWW adalah sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain dipresentasikan dalam bentuk hypertext dan dapat diakses oleh perangkat lunak yang disebut browser. Informasi di web pada umumnya ditulis dalam format HTML. Informasi lainnya disajikan dalam bentuk grafis (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek
multimedia lainnya (seperti MIDI, Shockwave pada flash, Quicktime Movie,
3D World). WWW dijalankan dalam server yang disebut HTTPD.
Web juga menjadi sistem pengiriman multimedia, karena fitur browser
dan browser plug-in extension yang terus bermunculan menyediakan peluang untuk suara, gambar, telepon, animasi 3D dan videoconferencing melalui Net[14].
2.3. Interaktivitas
Interaktivitas adalah kemampuan pengguna untuk berkomunikasi secara langsung dengan komputer dan memiliki dampak pada pesan apapun yang sedang dibuat[18]. Interaktivitas secara sederhana menekan keyboard, mengklik mouse. Interaktivitas kompleks misalnya simulasi dengan program untuk mengubah – ubah suatu variabel, atau dimana pengguna menggerakan suatu joystick untuk menirukan gerakan mengemudikan pesawat terbang. Interaktivitas dapat terwujud jika ada GUI (Graphical User Interface). GUI memiliki banyak komponen seperti button, checkbox, radiobutton, textbox dll. Dengan adanya interaktivitas dapat menimbulkan antusiasme, ketertarikan, dan keterlibatan pengguna program / sistem[19].
Interaktivitas pada flash dengan menggunakan UI (User Interface) yang diberi ActionScript. Dalam menggunakan ActionScript harus memahami tiga komponen penting dalamnya, yaitu event, action dan target[3].
jenis, nama event serta pendeskripsian event.
Tabel 1. Jenis, nama dan deskripsi event
Jenis Nama Deskripsi
Mouse Event on(press)
on(release)
on(releaseOutside)
on(rollOver)
on(rollOut)
on(dragOver)
Mouse event akan terjadi ketika seorang user berintegrasi
menggunakan
tombol. Kebanyakan
mouse event juga disebut
button actions karena
selalu menggunakan tombol dan memicu sebuah action.
Keyboard Event Event ini akan terjadi
ketika user menekan sebuah tombol karakter, angka, tombol fungsi (F1-F12), symbol (#, $,% dll), panah dan lain-lain. Dalam keyboard event ini berlaku case sensitive.
diletakan pada keyframe.
Kegunaan dari event ini yaitu action yang diberikan didasarkan atas satuan waktu. Misalnya suatu movie clip akan diberi action
stop setelah 2 detik,
maka diberikan
action stop pada frame
ke-24 (standard 12.0 fps)
Movie Clip Event onClipEvent(load)
onClipEvent(frame)
Merupakan event yang disertakan pada suatu
movie clip.
b. Action : merupakan aksi atau kerja yang dikenakan atau diberikan pada suatu objek. Pemberian action merupakan bagian terpenting dalam membuat sebuah movieClip menjadi interaktif. Pada prinsipnya suatu event dapat memanggil atatu memicu beberapa action yang akan dilaksanakan secara simultan pada sebuah target atau beberapa target yang berbeda. Pada tabel 2 dibawah ini cotoh nama action dan deskripsinya :
Tabel 2. Nama action dan deskripsinya
Nama Action Deskripsi
GoTo Action yang akam menyebabkan
sebuah movie menjalankan frame
tertentu atau scene tertentu.
Play Action yang akan menyebabkan
sebuah movie mulai dijalankan pada posisi tertentu pada
timeline.
Get URL Action yang menyebabkan
terbukanya sebuah browser dan memanggil alamat URL yang diberikan
c. Target : merupakan objek yang dikenai oleh aksi sehingga dapat
dikendalikan, Seperti : Movie yang sedang aktif (current movie),Movie
2.4 Flash, PHP dan MySQL
2.4.1 Flash
Flash didesain dengan kemapuan untuk membuat animasi 2 dimensi yang
handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Keunggulan yang dimiliki oleh flash ini mampu diberikan sedikit kode pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti
HTML, PHP, dan Database dengan pendekatan XML[14].
Flash memiliki fasilitas untuk membuat objek, kemudian
objek-objek ini dapat ditambah dengan action script(bahasa pemrograman pada
Flash) sehingga antar objek yang satu dan yang lain dapat saling berinteraksi. Beberapa hal yang dapat dilakukan dengan Flash :
a. Menampilkan objek yang ingin ditampilkan atau menyembunyikan objek yang tidak ingin ditampilkan dengan mengirimkan parameter dari suatu objek ke objek lain.
a. Membuat suatu objek memiliki behavior yang berbeda sehingga objek tersebut dapat dibuat sesuai keinginan agar mempunyai kemampuan yang berbeda.
b. Meload movieClip (.SWF) di dalam movie clip (.SWF) contoh : loadMovie("alamat folder/file.SWF")
c. Memanggil file SWF lainnya dengan code : getURL("alamat folder/file.SWF").
d. Melompat ke frame atau scene tertentu.
contoh : gotoAndPlay(7) // berpindah ke frame 7. e. Menjalankan dan menghentikan animasi.
contoh : play(1); //jalankan frame 1. f. Mengendalikan animasi dan movieClip lainnya.
contoh : tellTarget(“my_movie”); gotoAndPlay(2)
// Memberitahukan pada movieClip my_movie untuk menjalankan animasi pada frame ke – 2.
g. Mengecek masukan perintah dari mouse. Contoh : on(press) { startDrag(”my_movie”); }
// saat movieClip my_movie ditekan oleh mouse, my_movie dapat di drag.
2.4.2 PHP
PHP merupakan salah satu bahasa pemrograman yang berjalan disisi server (server side). Dimana proses penerjemahan kode program dijalankan di
bentuk HTML. Dengan menggunakan PHP, sebuah web akan terlihat lebih dinamis dan interaktif dengan pengunjung web (user). Selain itu juga mudah melakukan perubahan data (update data) setiap saat dari web browser. Data yang dikirimkan dari komputer client dengan menggunakan web browser, akan disimpan dalam database web server dan selanjutnya dapat ditampilkan kembali bila user mengakasesnya[2].
2.4.3 Menggabungkan Flash dan PHP
Flash dapat digabungkan dengan php maka file flash harus dipublish
dengan menggunakan tombol CTRL+SHIFT+F12. Maka nama file yang telah
dipublish tadi akan menjadi berekstensi. SWF (ShockWaveFlash) dan
berekstensi .HTML. Saat melakukan penggabungan dengan php pindahkan file
.SWF ke dalam folder pada file htdoc yang ada pada server xampp. Pada file .HTML dibuka menggunakan notpate kemudian copy listing yang diawali dengan tag <object classid=”...”> sampai dengan tag </object> ke dalam file php yang akan ditampilkan.
2.4.4 Mengakses MySQL dengan Flash
Untuk melakukan koneksi dengan MySQL , pada action script 2.0 yang terdapat pada flash membutuhkan konektor yaitu bahasa pemrograman php.
Action script 2.0 memanggil file php yang didalam file php tersebut terdapat
query ke dalam MySQL[17]. Contoh potongan program untuk mengakses
a. File flash memanggil file php
myData.sendAndLoad('http://localhost/anyar/viewDataMenu1.php?tampil=' +varJenisMenu, menuLoad);
b. File php bernama viewDataMenu1.php melakukan query ke dalam MySQL $queryMenu=mysql_query("select * from mobil where status = '$var
JenisMenu'");
while($dataMenu=mysql_fetch_array($queryMenu)){ $judulnya=ucwords($dataMenu['nama']);
echo "&id".$jumData."=".$dataMenu['id']."&"; echo "<b>&nama".$jumData."=".$judulnya."&</b>"; echo "&merk".$jumData."=".$dataMenu['merk']."&"; echo "&tahun".$jumData."=".$dataMenu['tahun']."&"; echo "&gambar".$jumData."=".$dataMenu['gambar']."&"; echo "&swf".$jumData."=".$dataMenu['swf']."&";
echo "<br><br>"; $jumData=$jumData+1;}
c. Agar flash dapat membaca hasil query dari php ditambahkan echo "&... " seperti pada contoh program echo "&id", echo "&merk" .
2.5 Teori Warna
Kejadiannya warna dibagi menjadi dua, yaitu warna additive dan
subtractive. Warna additive adalah warna yang berasal dari cahaya dan
hijau (Green), biru (Blue), dalam komputer disebut model warna RGB. Warna pokok subtractive adalah Sian (Cyan), Magenta, dan Kuning (Yellow), dalam komputer disebut model warna CMY[9].
RGB memiliki spektrum yang lebih luas dibanding era text-based. Beberapa tools menggunakan RGB dengan nilai 0 s/d 255. Dan ada juga yang menggunkan nilai hexadecimal dari nilai 00 sampai dengan FF[6].
RGB(255,0,0): RGB(0,255,0): RGB(0,0,255): RGB(100,0,0):
RGB(0,100,0): RGB(0,0,100):
Gambar 1. Contoh efek warna RGB.
2.6 Warna Pantone
Warna Pantone adalah warna yang dikeluarkan oleh perusahaan Pantone yang menjadi warna standar International, perusahaan Pantone hanya mengeluarkan warna. Warna pantone digunakan untuk menyamakan persepsi warna dengan menggunakan kode angka[15]. Contoh mode warna pantone pms, RGB dan hexadecimal dapat dilihat pada gambar 2.
Gambar 2. Contoh mode warna pantone pms, RGB dan hexadecimal.
2.7 CR Plus
didalamnya sudah terdapat rumus warna dan warna percampuran yang absolut dan akurat dalam pemilihan cat. Untuk mendapatkan warna percampuran dengan cara memasukkan data yang relevan seperti pabrik atau warna model deskripsi / nama atau kode warna[16].
Fitur dalam CR Plus terdapat proses perubahan warna RGB bermode
hexadecimal ke mode warna pantone. Pada contoh menggunakan warna
hexadecimal 30e68, seperti pada gambar 3.
Gambar 3. Merubah mode warna hexadecimal ke pantone
Hasil setelah tombol submit query di klik terdapat pada gambar 4
Mode kode warna pantone 281 setelah dipilih dan menekan tombol OK pada gambar 5.
Gambar 5. Mode warna patone sebagai inputan
Hasil warna cat yang didapat setelah tombol search ditekan terdapat pada gambar 6
ANALISA DAN PERANCANGAN
3.1 Analisa Sistem
Berdasarkan latar belakang yang ada, permasalahan yang timbul dari sistem lama yaitu proses negosiasi pemilihan warna untuk pengecatan mobil sering menjadi lama, kurang lebih 1-2 minggu. Proses lama dalam negosiasi ini terjadi dikerenakan pihak pelanggan tidak bisa memprediksi hasil jadi dari pengecatan mobil dengan menggunakan warna cat yang telah dipilihnya.
Program yang akan dibuat untuk membantu pihak pelanggan dan divisi
painting dalam memprediksi hasil pengecatan mobil serta pemilihan warna cat untuk pengecatan mobil. Pengunjung web dapat memilih warna sesuai dengan keinginannya tanpa harus mengeluarkan biaya dalam usaha memodifikasi dan mempercantik mobilnya. Masukan dari aplikasi ini berupa kode warna bermode RGB dengan nilai hexadecimal yang nantinya akan diolah lagi dengan menggunakan software CR plus milik cat Spies Hecker yang digunakan pada bengkel. Keluaran dari aplikasi ini adalah visualisasi warna pada bagian/panel mobil yang telah dicustom warnanya. Manfaat dari aplikasi ini adalah membantu pelanggan dalam memprediksi hasil pengecatan mobil. Pada program simulasi ini terdapat dua aktor yaitu pengunjung web dan administrator. Pengunjung web dapat memilih tipe mobil yang ada, melakukan pemilihan tiap – tiap bagian dari mobil dan melakukan proses customisasi warna mobil dengan menggunakan spectrum color dan memesan
pengecatan mobil sesuai dengan hasil customisasi. Administrator terdapat fasilitas login sehingga dapat melakukan penambahan gambar data mobil, menampilkan mobil, menyembunyikan mobil, dan mencari data pesanan pengecatan.
3.2 Analisa Kebutuhan
Program simulasi pengecatan mobil akan berjalan baik jika pada server terdapat perangkat lunak web server apache, PHP, MySQL. Sedangkan pada
client rincian perangkat lunak pada client sebagai berikut : 1. Browser yang sudah terinstall plug in flash.
2. Operating system : Windows XP, Linux berbasis grafis. Rincian perangkat keras pada client sebagai berikut: 1. Processor : intel Pentium III
2. Memori : 512 GB
3. Monitor : resolusi 1024 x 768
Rincian yang perangkat lunak, perangkat keras dan pengetahuan yang digunakan penyumbang (pembuat program) dalam membangun program simulasi pengecatan mobil sebagai berikut :
a. Perangkat lunak :
1. Database : SQL Server 5.0.22
2. Database browser : MySQL yog 5.0.22
3. Web server : Apache 2.0
4. Konektor : PHP 5.2.5
5. User Interface : PHP 5.2.5 dan Macromedia Flash 8 Proffesional
6. Operating System : Windows XP SP 2
b. Perangkat keras :
1. Processor : intel Pentium Dual-Core
2. Memori : 1 GB
3. Monitor : resolusi 1024 x 768 c. Pengetahuan
1. pengetahuan Database
2. Action script 2.0 pada flash
3. Editing foto dengan adobe photoshop
4. Pemrograman php
5. Pemodelan UML
3.3 Proses bisnis pada bengkel saat pelanggan akan mengecatkan mobil
Setelah pelanggan selesai melakukan perbaikan mobil dari body repair
atau body conversion, pelanggan menentukan warna dengan divisi painting
dengan warna hitam dan warna down body menggunakan warna cat putih. Pihak divisi painting hanya bisa memberikan jawaban kepada pihak pelanggan dengan menggunakan sampel/katalog (color guide) cat Spies Hecker ditempelkan pada panel/bagian mana yang dicat warnanya. Pihak pelanggan merasa belum mantab apakah warna yang dipilih akan cocok dan bagus menurut pihak pelanggan. Akibat lain dari proses negosiasi pemilihan warna untuk pengecatan mobil sering menjadi lama, kurang lebih 1-2 minggu hingga pelanggan benar – benar mantap dalam memilih warna yang akan digunakan dalam proses pengecatan.
3.4 Gambaran proses kerja sistem yang baru
Gambar 7 adalah gambaran umum dari proses pemilihan warna dengan sistem yang akan dibuat.
3.5 Diagram Use Case
Diagram use case program simulasi pemilihan warna cat mobil dan pencatatan warna cat berbasis web dapat dilihat pada gambar 8.
Gambar 8. Diagram use case
3.5.1 Definisi Aktor
Tabel 3. Definisi aktor
Aktor Hak Akses
Administrator • Login
• Menambah data mobil
• Menyembunyikan dan menampilkan mobil
• Mencari data pesanan pengecatan
• Mengedit profil home
• Logout
Pengunjung web • Melihat profil painting division • Memilih mobil yang ada
• Memilih bagian mobil
• Memilih posisi mobil
• Memilih warna
• Pesan pengecatan mobil
3.5.2 Skenario Use Case
Bagian ini menjelaskan mengenai langkah-langkah kegiatan dalam setiap use case. Detail dari bagian ini terdapat pada lampiran 1. Skenario use case terdapat pada tabel 4
Tabel 4. Skenario use case
Use Case Skenario Use Case
Tambah data mobil lampiran 1.2
Menampilkan dan
menyembunyikan mobil
lampiran 1.3
Mencari data pesanan pengecatan lampiran 1.4
Mengedit profile home lampiran 1.5
Logout lampiran 1.6
Melihat profil painting division lampiran 1.7
Memilih mobil lampiran 1.8
Memilih posisi mobil lampiran 1.9
Memilih bagian mobil lampiran 1.10
Memilih warna lampiran 1.11
Pesan pengecatan mobil lampiran 1.12
3.6 Model Analisis
3.6.1 Realisasi Use Case
Bagian ini menjelaskan mengenai realisasi setiap use case dalam bentuk kelas dan sequence diagram. Detail dari bagian ini terdapat pada lampiran 2. Relisasi use case terdapat pada tabel 5.
Tabel 5. Realisasi use case
Use Case Realisasi Use Case
Login lampiran 2.1
Menampilkan dan menyembunyikan
mobil
lampiran 2.3
Editprofilehome lampiran 2.4
Mencari data pesanan pengecatan lampiran 2.5
Logout lampiran 2.6
Melihat profil painting division lampiran 2.7
Memilih mobil lampiran 2.8
Memilih posisi mobil lampiran 2.9
Memilih bagian mobil lampiran 2.10
Memilih warna lampiran 2.11
Pesan pengecatan mobil lampiran 2.12
3.6.2 Diagram Kelas Keseluruhan
Bagian ini menjelaskan mengenai realisasi keseluruhan dari semua use case. Detail dari bagian ini terdapat pada lampiran 3. Kelas analisis terdapat pada tabel 6
Tabel 6. Kelas analisis
No Kelas Analisis Jenis
1 Halaman login
2 Halaman template administrator
3 Halaman administrator
5 Halaman tampil sembunyikan mobil
6 Halaman tambah mobil
7 Halaman cari pesanan
8 Halaman index pengunjung
9 Halaman home
10 Halaman customisasi warna
11 Flash template
12 Flash list nama dan gambar mobil
13 Flash tombol kiri
14 Flash tombol kanan
15 Flash tombol bagian – bagian mobil
16 Flash pengaturan warna
17 Flash pengaturan warna dengan
26 Mobil(.SWF)
27 Mobil(.JPG)
28 Home
29 Pesanan
Entity
3.7 Model Perancangan
3.7.1 Kelas Perancangan
Bagian ini menjelaskan mengenai kelas-kelas yang dibuat pada perancangan sistem per use case. Tabel 7 merupakan rincian dari kelas perancangan , detail kelas perancangan per usecase dan kelas analisis. Detail dari bagian ini terdapat pada lampiran 4.
Tabel 7. Kelas perancangan dengan kelas analisis
No Kelas Perancangan Kelas Analisis
1 Halaman login Halaman login
2 Halaman template
administrator
Halaman template
administrator
3 Halaman administrator Halaman administrator
4 Halaman edit profile home Halaman edit profile home
5 Halaman tampil sembunyikan
mobil
Halaman tampil sembunyikan
mobil
6 Halaman tambah data mobil Halaman tambah data mobil
8 Halaman index pengunjung Halaman index pengunjung
9 Halaman home Halaman home
10 Halaman customisasi warna Halaman customisasi warna
11 Flash template Flash template
12 Flash list nama dan gambar
mobil
Flash list nama dan gambar
mobil
13 Flash tombol kiri Flash tombol kiri
14 Flash tombol kanan Flash tombol kanan
15 Flash tombol bagian – bagian
mobil
Flash tombol bagian – bagian
mobil
16 Flash pengaturan warna Flash pengaturan warna
17 Flash pengaturan warna
dengan warna spectrum
Flash pengaturan warna
dengan warna spectrum
18 Flash form pesanan Flash form pesanan
19 konfirmasi konfirmasi
20 Logout Logout
21 Pilih Pilih
22 Edit profile Edit profile
23 Kirimdatamobil Kirimdatamobil
24 Admin Admin
25 Mobil Mobil
27 Mobil(.JPG) Mobil(.JPG)
28 Home Home
29 Pesanan Pesanan
3.7.2 Atribut dan Method
Bagian ini menjelaskan atribut-atribut dan method (fungsi) yang terdapat pada setiap kelas. Tabel 8 merupakan rincian dari atribut dan method setiap kelas. Detail dari bagian ini terdapat pada lampiran 5.
Tabel 8. Prototype atribut dan method
No Kelas Perancangan Detail Atribut dan Method
1 Halaman login Lampiran 5.1
2 Template administrator Lampiran 5.2
3 Halaman administrator Lampiran 5.3
4 Halaman edit profile home Lampiran 5.4
5 Halaman tampil sembunyikan mobil Lampiran 5.5
6 Halaman tambah data mobil Lampiran 5.6
7 Halaman pencarian pesanan Lampiran 5.7
8 Halaman index pengunjung Lampiran 5.8
9 Halaman home Lampiran 5.9
10 Halaman customisasi warna Lampiran 5.10
11 Flash template Lampiran 5.11
13 Flash tombol kiri Lampiran 5.13
14 Flash tombol kanan Lampiran 5.14
15 Flash tombol bagian – bagian mobil Lampiran 5.15
16 Flash pengaturan warna Lampiran 5.16
17 Flash pengaturan warna dengan
warna spectrum
Lampiran 5.17
18 Flash form pesanan Lampiran 5.18
19 Konfirmasi Lampiran 5.19
20 Logout Lampiran 5.20
21 Pilih Lampiran 5.21
22 Editprofile Lampiran 5.22
23 Kirimdatamobil Lampiran 5.23
24 Admin Lampiran 5.24
25 Mobil Lampiran 5.25
26 Mobil(.SWF) Lampiran 5.26
27 Mobil(.JPG) Lampiran 5.27
28 Home Lampiran 5.28
29 Pesanan Lampiran 5.29
3.7.3 Diagram Kelas
3.7.4 User Interface
Bagian ini menjelaskan user interface terdapat pada lampiran 7.
3.6.5 ER Diagram
Kelas – kelas perancangan yang menjadi tabel dapat dilihat pada tabel 9
Tabel 9. Prototype kelas perancangan yang menjadi tabel
Kelas Entitas Deskripsi
Mobil Menyimpan data mobil berupa id, nama, merk, tahun, gambar, swf, status.
Home Menyimpan data mobil berupa id, isihome, judul
Admin Menyimpan data mobil berupa id, username, password
Pesanan Menyimpan data mobil berupa idpesanan, idpemesan, idmobil, warnaallbody, warnacapengine,
warnaupbody, warnadownbody, tgl, view Pemesan Idpemesan, nama, alamat, telp, email
IMPLEMENTASI DAN PENGUJIAN
4.1Model Implemetasi
Model implementasi terdapat pada tabel 10
Tabel 10. Model implementasi
No Kelas Perancangan File Fisik
1 Halaman login a/index
2 Template administrator a/index3.php
3 Halaman administrator a/index3/HalamanAdministrator
4 Halaman edit profile home a/index3/editprofilehome
5 Halaman tampil sembunyikan
mobil
a/index3/tampilsembunyikan
6 Halaman tambah data mobil a/index3/tambahmobil
7 Halaman pencarian pesanan a/index3/caripesanan
8 Halaman index pengunjung index.php
9 Halaman home HalamanHome.php
10 Halaman customisasi warna HalamanCustomisasiWarna2.php
11 Halaman template flash lihatDatMenu22.swf
12 Halaman menampilkan
gambar dan nama mobil
Listgambar
13 Tombol kiri kiri
14 Tombol kanan kanan
15 Halaman bagian – bagian
mobil
Bgmenu
16 Halaman pengaturan warna Warnalain
17 Halaman pengaturan warna
dengan warna Spectrum
Warnaspectrum
18 Halaman pesanan Bg2
19 konfirmasi konfirmasi
20 Logout Logout
21 Pilih Cmod
22 Edit profile Text-edit
23 Kirimdatamobil Kirimdatamobil
24 Admin Admin
25 Mobil Mobil
26 Mobil(.SWF) /swf
27 Mobil(.JPG) /gambar
28 Home Home
29 Pesanan Pesanan
32
Capture dari kelas boundary pada model implementasi dapat dilihat pada lampiran 9.
4.2Model Pengujian
kuisioner tentang aplikasi.
4.2.1 Pengujian dilakukan pada tiap – tiap Usecase
4.2.1.1Use Case Login
Tabel model pengujian use case login terdapat pada tabel 11
Table 11. Model pengujian usecase login
No Kasus uji Masukan keluaran yang diharapkan
1 Pemanggilan melalui url
Ketikan pada url : ”http://localhost/an yar/a/index3.php”
The requested URL /anyar/a/index3.php was not found on this server.
2 Isian username dan password
Username : kosong
Password : kosong
Maaf username dan password anda salah
3 Username : dkfhk
Password: ●●●●●
Maaf username dan password anda salah
4.2.1.2Use Case Tambah Data Mobil
Tabel model pengujian use case tambah data mobilterdapat pada tabel 12
Table 12. Model pengujian usecase tambah data mobil
No Kasus uji Masukan keluaran yang diharapkan
1 Isian pada form
tambah data mobil
File image(.jpg) : kosong
File flash(.swf) : kosong
Merk : kosong
Nama : kosong Tahun : kosong
2 File image(.jpg) :
kosong
File flash(.swf) : kosong
Merk : toyota Nama : kosong Tahun : kosong
Error: No file uploaded
3 File image(.jpg) :
C:\xampp\htdocs\Anya r\images\header.jpg
File flash(.swf) : C:\xampp\htdocs\Anya r\button.swf
Merk : toyota Nama : kosong Tahun : kosong
fill the blank please
4 File image(.jpg) :
C:\xampp\htdocs\Anya r\images\header.txt
File flash(.swf) :
C:\xampp\htdocs\Anya
File image(.jpg) : C:\xampp\htdocs\Anya r\images\jazz.jpg
File flash(.swf) : C:\xampp\htdocs\Anya r\jazz.swf
Merk : honda Nama : jazz Tahun : 2001
Error: File volkswagen.jpg
already exists Error: File jazz2.swf already
exists
4.2.1.3Use Case Menampilkan dan Menyembunyikan Mobil
Tabel model pengujian use case menampilkan dan menyembunyikan terdapat pada tabel 13
Table 13. Model pengujian usecase menampilkan dan menyembunyikan mobil
No Kasus uji Masukan keluaran yang diharapkan
1 Pemilihan mobil yang
tidak ditampilkan.
(x).
- Pada halaman customisasi warna nama mobil berkurang tanda menajadi link centang (v).
- Pada halaman customisasi warna nama mobil bertambah satu
4.2.1.4Use Case Mencari Data Pesanan Pengecatan
Tabel model pengujian use case mencari data pesanan pengecatan terdapat pada tabel 14
Table 14. Model pengujian usecase mencari data pesanan pengecatan
No Kasus uji Masukan keluaran yang diharapkan
1 Isian pada form
pencarian
Input : kosong Menampilkan table semua pemesanan
4.2.1.5Use Case Mengedit Profile Home
Tabel model pengujian use case mengedit profile home terdapat pada tabel 15.
Table 15. Model pengujian mengedit profile home
No Kasus uji Masukan keluaran yang diharapkan
1 Isian pada Form judul dan isi
Judul : tidak dirubah Isi : tidak dirubah Klik tombol edit
Form judul dan isi tetap
2 Judul : dihapus
Isi : tetap
Klik tombol edit
form judul kosong
4.2.1.6Use Case Logout
Tabel model pengujian use case logout terdapat pada tabel 16.
Table 16. Model pengujian logout
No Kasus uji Masukan keluaran yang diharapkan
1 Pegujian mengguna kan browser
Klik :
Tombol back pada browser setelah admin melakukan logout
The requested URL /anyar/a/index3.php was not found on this server.
4.2.1.7Use Case Melihat Profil Painting Division
pada tabel 17
Table 17. Modelpengujian melihat profile painting division
No Kasus uji Masukan keluaran yang diharapkan
1 Pengujian d=1 dirubah menjadi : ”http://localhost/anyar/ ?id=2”
Menampilkan halaman customisasi warna
4.2.1.8Use Case Memilih mobil
Tabel model pengujian use case memilih mobil terdapat pada tabel 18
Table 18. Model pengujian memilih mobil
No Kasus uji Masukan keluaran yang diharapkan
1 Pengujian dilakukan
pada list nama mobil
Klik : nama mobil Menampilkan gambar mobil
2 Klik : nama mobil Tombol custom
4.2.1.9Use Case Memilih posisi mobil
Table 19. Model pengujian memilih posisi mobil
No Kasus uji Masukan keluaran yang diharapkan
1 Pengujian
Klik : tombol kiri Menampilkan posisi mobil sebelah kiri
2 Klik : tombol kanan Menampilkan posisi mobil sebelah kanan
4.2.1.10 Use Case Memilih bagian mobil
Tabel model pengujian use case memilih bagian mobil terdapat pada tabel 20
Table 20. Model pengujian memilih bagian mobil
No Kasus uji Masukan keluaran yang diharapkan
1 Pengujian dilakukan pada bagian mobil
Klik : tombol allbody 1. Menampilkan halaman pengaturan warna.
2. Menampilkan tombol other custom
3. tombol upbody, allbody,
tertampil.
4. Menampilkan informasi mobil yaitu merk dan tahun.
5. Menampilkan informasi mobil gambar mobil penuh
6. tombol allbody terdapat navigasi
2 Klik : tombol
capengine
1. Menampilkan halaman pengaturan warna.
2. Menampilkan informasi mobil yaitu merk dan tahun
3. Menampilkan informasi mobil gambar mobil pada bagian capengine
4. tombol capengine
terdapat navigasi
3 Klik : tombol upbody 1. Menampilkan halaman pengaturan warna.
tahun.
3. Menampilkan informasi mobil gambar mobil pada bagian upbody
4. tombol upbody terdapat navigasi
4 Klik : tombol
downbody
1. Menampilkan halaman pengaturan warna.
2. Menampilkan informasi mobil yaitu merk dan tahun
3. Menampilkan informasi mobil gambar mobil pada bagian downbody tombol downbody terdapat navigasi
3.2.1.11 Use Case Memilih warna
Tabel model pengujian use case memilih warna ada pada tabel 21 dengan catatan pengunjung web sudah melakukan pemilihan bagian mobil
Table 21. Model pengujian memilih warna
1 Pengujian
Klik : spectrum warna 1. kotak indikator menjadi berwarna
2. tampil kode
hexadecimal dari warna
2 Klik : warna lain 1. kotak indikator menjadi berwarna
Klik : bagian mobil Klik : tombol OK
1. tidak terjadi perubahan warna pada mobil
4.2.1.12 Use Case Pesan pengecatan mobil
Table 22. Model pengujian pesan pengecatan mobil
No Kasus uji masukan keluaran yang diharapkan
1 Isian pada form
pemesanan
Name : kosong Address : kosong Phone : kosong Email : kosong
INPUT NAME, ADDRESS, PHONE, EMAIL IN ORDER FORM
2 Name : saya
Address : kosong Phone : kosong Email : kosong
Please fill the blank form
3 Name : saya
Address : kosong Phone : kosong Email : kosong
Input address
4 Name : saya
Address : Jogja Phone : kosong Email : kosong
Input phone number
5 Name : saya
Address : Jogja Phone : jogjakarta Email : kosong
Input phone number
Address : Jogja
Phone : jogjakarta3444 Email : kosong
7 Name : saya
Address : Jogja
Phone : 085643008417 Email : kosong
Input email
8 Name : saya
Address : Jogja
Phone : 085643008417 Email : tes ya...
Input email
9 Name : saya
Address : Jogja
Phone : 085643008417 Email : 8387589224
Input email
10 Name : saya
Address : Jogja
Phone : 085643008417
Email : [email protected]
3.2.2Kuisioner
Contoh kuisioner yang disebarkan ke responden.
Penilaian mendekati 5 maka
nilai akan semakin baik,
semakin mendekati 1 maka
penilaian akan semakin tidak
baik(kurang baik) Pertanyaan yang diajukan
1 2 3 4 5
Tampilan (Interface) website ini
Jika anda mempunyai mobil dan akan melakukan pengecatan mobil, apakah website ini membantu anda ?
Apakah website ini dapat membantu anda dalam pemilihan warna untuk pengecatan mobil ? Apakah website ini mudah digunakan
5.1 Analisis Hasil
Proses pengujian dilakukan dengan menggunakan test alfa dan test beta. Test alfa dilakukan oleh pembuat sistem dengan melakukan pengujian pada tiap – tiap usecase dan hasilnya dituliskan sebagai modul. Sedangkan test beta dilakukan oleh user/orang awam dengan menggunakan modul dari test alfa yang ada pada halaman user dan pengisian kuisioner. Sedangkan pihak bengkel (admin) melakukan pengujian dengan menggunakan modul dari test alfa pada halaman user dan administrator.
Karakteristik dari user/orang awam yang dipilih untuk melakukan test beta adalah mahasiswa dan karyawan yang berumur 20 th dan ada beberapa user yang mempunyai mobil. Analisis hasil pada usecase :
5.1.1 Use Case Login :
Tujuan pengujian dan deskripsi use case ini agar pengunjung web tidak bisa mengakses halaman administrator secara langsung tanpa melalui login. Prosedur yang dilakukan melalui URL(menembak halaman administrator
secara langsung) dan form login. Hasil pengujian melaui URL dengan
mengetikan “http://localhost/anyar/a /index3.php” sistem menampilkan ”The requested URL /anyar/a/index3.php was not found on this server”. Sedangkan pengujian pada form login dengan melakukan inputan Username : kosong,
Password : kosong dan Username : dkfhk Password: ●●●●●, sistem menampilkan ”Maaf username dan password anda salah”.
5.1.2 Use Case Tambah Data Mobil :
Tujuan pengujian dan deskripsi use case ini agar web menjadi lebih lengkap jika terdapat file mobil yang banyak sehingga pengunjung web dapat melakukan pengcustomisasian warna sesuai dengan mobil yang ada. Prosedur pengujian yang dilakukan dengan melakukan Isian pada form tambah data mobil. Hasil pengujian pada form jika form tidak terdapat inputan dan menekan tombol tambah maka sistem akan menampilkan ” fill the blank please”. Jika file yang diupload tidak sesuai dengan inputan makan sistem akan menampilkan ” ekstension file not. jpg and swf”. Jika inputan hanya diisi salah satu saja sistem akan menampilkan “Error: No file uploaded”.
5.1.3Use Case Menampilkan dan Menyembunyikan Mobil :
