e-commerce motor honda menggunakan teknologi …ketikatibasaat perpisahan janganlah kalian berduka,...

179
E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI JSP DAN MySQL (Studi kasus : Astra Honda Motor cabang Yogyakarta) SKRIPSI Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Teknik Program Studi Teknik Informatika Oleh : Melinda NIM : 025314079 PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA YOGYAKARTA 2007 i

Upload: others

Post on 21-Nov-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

E-COMMERCE MOTOR HONDA MENGGUNAKAN

TEKNOLOGI JSP DAN MySQL

(Studi kasus : Astra Honda Motor cabang Yogyakarta)

SKRIPSI

Diajukan untuk Memenuhi Salah Satu Syarat

Memperoleh Gelar Sarjana Teknik

Program Studi Teknik Informatika

Oleh :

Melinda

NIM : 025314079

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS SANATA DHARMA

YOGYAKARTA

2007

i

Page 2: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

HONDA MOTORCYCLE E-COMMERCE

USING JSP TECHNOLOGY AND MySQL

( Case study : Astra Honda Motor branch Yogyakarta)

A Thesis

Presented as Partial Fulfillment of the Requirements

To Obtain the Sarjana Teknik Degree

In Informatics Engineering

By :

Melinda

Student Number : 025314079

INFORMATICS ENGINEERING STUDY PROGRAM

DEPARTMENT OF INFORMATICS ENGINEERING

FACULTY OF SAINS AND TECHNOLOGY

SANATA DHARMA UNIVERSITY

YOGYAKARTA

2007

ii

Page 3: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

iii

Page 4: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

iv

Page 5: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

v

Page 6: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

MOTTO

Ti dak ada bal asan kebai kan kecual i kebai kan ( pul a)( Q. S Ar - Rahmaan, ayat 60)

“Sebai k - Bai k Per kat aan adal ah Al qur an dan sebai k - bai k pet unj uk

adal ah Sunnah Rasul Muha mad SA W”

Kei ngi nan, har apa n dan ci t a - ci t a t ak akan per nah t er wuj ud

t anpa di awal i dngan per buat an

vi

Page 7: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

KATA-KATA MUTIARA

kebenaran adalah sederhana

kebenaran tidak memerlukan tipu muslihat untuk meyakinkan

Ketika tiba saat perpisahan janganlah kalian berduka, sebab apa

yang paling kalian kasihi darinya mungkin akan nampak lebih

nyata dari kejauhan - seperti gunung yang nampak lebih agung

terlihat dari padang dan dataran

jika hati sejernih air jangan biarkan ia keruhjika hati secerah awan jangan biarkan ia mendung

jika hati seputih salju jangan biarkan ia habis

jika hati seindah bulan hiasi ia dengan iman

vii

Page 8: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

"Kepunyaan ALLAH lah apa yang ada di langit dan apa yang ada di

bumi, dan adalah (pengetahuan) ALLAH Maha meliputi segala

sesuatu" (Q.S An-Nisaa' , ayat 126)

Kupersembahkan Karya ini Kepada

Sang Maha Kasih ALLAH SWT

Kedua OrangTua-ku yang Tercintayang tiada pernah berhenti memberikan semangat, dukungan dan doa yang

tulus

Kakakku Susan dan adik-adikku Dino danSelvi

Yang selalu memberikan perhatian, cinta dan doa´Just keep in touch ´ ^u^

My little angels : Violetta dan Virginatawa dan canda kalian selalu membuat keceriaan dalam hidupku

DanALMAMATERKU :

UNIVERSITAS SANATA DHARMAyang akan selalu ku banggakan....

viii

Page 9: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

INTISARI

e-Commerce atau Electronic Commercial adalah cara berbisnis (belanja

atau berdagang) yang dilakukan secara online melalui mesin electronic (dalam hal

ini adalah komputer) yang memanfaatkan fasilitas Internet dimana terdapat situs-

situs yang menyediakan layanan "get and delivery".

Pada tugas akhir ini dibangun suatu sistem e-Commerce motor honda

yang digunakan oleh Astra Motor Honda Cabang Yogyakarta sebagai media

promosi sekaligus sebagai media pemesanan motor Honda secara online oleh

konsumen. Sistem dibangun dengan menggunakan teknologi JSP sebagai bahasa

pemrograman dan MySQL sebagai database engine.

Hasil akhir yang diperoleh adalah suatu sistem e-Commerce yang

digunakan untuk menyediakan informasi-informasi detail mengenai produk motor

Honda, berita-berita terkini, fasilitas untuk melakukan pemesanan secara online

kapanpun dimanapun selama terdapat jaringan internet, dan fasilitas bagi admin

untuk melakukan peng-update-an data-data kedalam sistem.

ix

Page 10: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

ABSTRACT

e-Commerce or Electronic Commercial is the way in bussiness (buying

or trading) which is done online through the electronic machine (computer)

making use of internet facility where there is available site which provides “get

and delivery” service.

In this thesis, established Honda motorcycle e-Commerce system which

is used by Astra Honda Motor Yogyakarta as promotion media and as a media for

ordering Honda motorcycle in online system by the consumer. This system is

establish using JSP technology as a programming language and MySQL as

database engine.

The result is an e-Commerce system which is used to provide detail

information about Honda product, the latest news, facility for consumer to order in

online system wherever and whenever as long as there is internet link, and

facility for admin to update data into the system.

x

Page 11: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

KATA PENGANTAR

Bismillahirrahmanirrahim

Assalamu·alaikum dan Salam Sejahtera,

Puji dan syukur penulis panjatkan atas kehadirat Allah Subhanahu Wa

Ta’Alla yang senantiasa melimpahkan rahmat dan karunia-Nya, sehingga

bertepatan dengan dibulan yang penuh berkah bulan suci Ramadhan 1428H ini

penulis dapat menyelesaikan tugas akhir dengan baik dan benar.

Dalam penyelesaian tugas akhir ini penulis menyadari bahwa penulis telah

begitu banyak mendapatkan bantuan dari berbagai pihak baik berupa bimbingan,

petunjuk-petunjuk, kerjasama, dukungan, kritikan maupun saran. Oleh karena itu

penulis dengan segenap hati mengucapkan banyak terimakasih kepada :

1. Bapak Ir. Gregorius Heliarko S.J., S.S., B.S.T., M.A., M.Sc, selaku Dekan

Fakultas Sains dan Teknologi Universitas Sanata Dharma.

2. Ibu Agnes Maria Polina, S.Kom., M.Sc., selaku Ketua Jurusan Teknik

Informatika Universitas Sanata Dharma dan selaku Dosen Pembimbing

Akademik TI angkatan 2002, terimakasih yang sebesar-besarnya atas kasih

sayang dan kesabaran ibu dalam mendidik dan membina penulis dari

semenjak penulis memasuki perkuliahan hingga sekarang.

3. Bapak JB. Budi Darmawan, S.T., M.Sc, selaku Dosen Pembimbing yang

telah memberikan bimbingan dan dukungan yang sangat membantu penulis

dalam menyelesaikan tugas akhir ini dengan baik dan benar.

4. Bapak Drs. J. Eka Priyatma, M.sc, selaku Dosen Pembimbing Pra–TGA

yang telah banyak memberikan bimbingan selama penulis menyelesaikan

xi

Page 12: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

laporan pra tugas akhir dan membantu penulis dalam menentukan konsep

program untuk tugas akhir ini.

5. Panitia Penguji Tugas Akhir yang telah memberikan banyak kritik dan saran

demi sempurnanya tugas akhir penulis.

6. Seluruh Staff Lab komputer TI dan Sekretariat Teknik yang telah banyak

membantu penulis dalam bebagai hal selama penulis berkuliah di TI USD,

terutama selama penyelesaian tugas akhir ini.

7. Mas Heru, Mas Wiliam dan Mba’ Anggie serta seluruh Staff divisi

penjualan di Astra Honda Motor cabang Yogyakarta, yang telah menerima

penulis dan bekerjasama dengan baik.

8. Seluruh keluarga besar penulis, yang tiada pernah berhenti dalam

memberikan perhatian, dukungan dan doa selama penulis menyelesaikan

masa studinya.

9. Mr. Abdul Kadir, Mas Isaac, Mitchel, Braveheart dan Loginer lainnya yang

telah meluangkan waktu berdiskusi dan memberikan “pencerahan” tentang

JSP dan MySQL kepada penulis.

10. Arry “Squarepants” (AMIKOM SI’04), yang dengan ikhlas meminjamkan

komputer selama seminggu menjelang penulis ujian plus selama penulis

merevisi tugas akhir ini. Tengkyu cah! Semoga Allah SWT membalas

semua kebaikanmu.

11. Qiko dan Ully, sahabat-sahabatku yang selalu memberikan semangat dan

dukungan dan yang selalu membuat “iri” karena kalian lulus duluan, tapi

semua itu yang memotivasiku, Arigato«

xii

Page 13: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

12. Kang Apro buat wejangannya, Mimi, Gissa, Dilan, Nica, Rio, Yana, Messy,

Dung’x’ dan semua sahabat PP yang sudah memberikan dukungan penuh

dan terimakasih buat semua info-infonya. ³Kiss and Hugs for you all´.

13. Wiwi Etta, my best bestfriend that I ever had in Sanata Dharma University.

Semoga persahabatan kita tak pernah lekang oleh jarak dan waktu.

14. Tree atas pinjaman printernya, Yane atas terjemahannya, Radit yang selalu

meminjamkan motor, Budi dan Santo teman seperjuangan dalam seminar

KP, Andi Raharjo yang membantu membawakan komputerku setelah ujian,

dan semua teman-teman TI seangkatan lainnya. Yang pasti kalian telah

memberikan bantuan sekecil apapun itu.

15. Adeth Fis’02, terimakasih buat pinjaman printernya. Hanik Fis’02 dan Kia

Fis’02, terimakasih buat pertemanan dan semua bantuan kalian. Tiwi

Ikom’02, terimakasih support dan doa-nya, barokallahu. Ayu TM’02 dan

Bibin TM’02, terimakasih sudah menjadi teman curhatku. Sisca TE’02, Puri

PMat’02, Mba’ Elly TM’97, Yuni Far’02, Ghita Pfis’03, Asti Far’02, Eka

Far’03 dan semua mantan teman kost-ku serta cewe-cewe asrama 3 dara,

nomaden tak membuatku lelah karena dampaknya aku memperoleh teman-

teman yang terbaik seperti kalian semua. Arigato, xiexie, mercy, and

thankyou very much for everything..

Penulis sadar bahwa tugas akhir ini masih jauh dari sempurna, oleh karena

itu penulis sangat mengharapkan kritik dan saran untuk perbaikan di masa yang

akan datang. Penulis juga memohon maaf jika ada kekeliruan atau kesalahan yang

penulis perbuat baik yang disengaja maupun tidak disengaja kepada semua pihak.

xiii

Page 14: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

Semoga segala kebaikan yang telah disumbangkan kepada penulis mendapat

imbalan dari Tuhan Yang Maha Esa. Akhir kata semoga tugas akhir ini

bermanfaat bagi kita semua.

Wassalam.

Yogyakarta, 28 Sepetember 2007

Penulis,

Melinda

xiv

Page 15: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

DAFTAR ISI

JUDUL ......................................................................................................................

HALAMAN PERSETUJUAN ................................................................................

HALAMAN PENGESAHAN .................................................................................

PERNYATAAN KEASLIAN KARYA ..................................................................

HALAMAN MOTTO ..............................................................................................

HALAMAN KATA MUTIARA..............................................................................

HALAMAN PERSEMBAHAN ..............................................................................

INTISARI .................................................................................................................

ABSTRACT .............................................................................................................

KATA PENGANTAR .............................................................................................

DAFTAR ISI ............................................................................................................

DAFTAR GAMBAR ...............................................................................................

DAFTAR TABEL ....................................................................................................

i

iii

iv

v

vi

vii

viii

ix

x

xi

xv

xviii

xxi

BAB I PENDAHULUAN

1.1 Latar Belakang Masalah .................................................................... 1

1.2 Rumusan Masalah .............................................................................. 3

1.3 Batasan Masalah.................................................................................. 3

1.4 Tujuan dan Manfaat Penelitian .......................................................... 3

1.5 Metodologi Penelitian......................................................................... 4

1.6 Sistematika Penulisan ......................................................................... 5

BAB II. LANDASAN TEORI

2.1 Konsep Dasar Sistem.......................................................................... 6

2.2 Konsep Dasar Informasi...................................................................... 7

2.3 Konsep Dasar Sistem Informasi.......................................................... 7

2.4 Mengenal Internet............................................................................... 9

2.5 Dunia e-Commerce ............................................................................ 10

xv

Page 16: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

2.6 Entity-Relational Diagram (E-R Diagram) ...................................... 13

2.7 Data Flow Diagram (DFD Diagram) ................................................ 14

2.8 World Wide Web (WWW).................................................................... 15

2.9 Hipertext Markup Language (HTML)................................................. 17

2.10 Pemrograman Web.............................................................................. 17

2.11 Java Server Pages (JSP)…………..................................................... 19

3..1 Penulisan Skrip JSP………............................................... 19

3..2 Elemen-elemen JSP……………………………………… 20

3..2.1 Skripting………………………………………... 20

II.11.2.2 Pengantar (Directive)………………………..... 22

II.11.2.3 Action…………………………………………. 25

II.11.2.4 Impor Java Class……………………………... 27

II.11.2.5 Tipe Data dan Variabel dalam Java…………... 27

3..3 Operator………………………………………………….. 29

3..4 Kontrol Alur Program……………………………………. 30

3..4.1 Pengkondisian……….......................................... 30

2.11.4.2 Looping.............................................................. 33

3..5 Exception Handling............................................................ 34

3..6 Object Implisit.................................................................... 34

3..7 Transaksi Parameter............................................................ 36

3..8 Session................................................................................ 37

2.12 Tomcat ............................................................................................... 38

2.13 MySQL................................................................................................ 38

2.14 JDBC (Java database Connectivity) .................................................. 38

BAB III. ANALISA DAN PERANCANGAN SISTEM

III.1 Analisa Sistem yang Ada dan Analisa Sistem yang baru.................... 40

III.2 Konseptual Disain Sistem Informasi e-Commerce Motor Honda…... 42

III.2.1 Diagram Berjenjang............................................................. 43

III.2.2 Diagram Konteks................................................................. 44

III.2.3 Data Flow Diagram............................................................. 44

III.2.4 Entity ± Relational Diagram................................................ 50

xvi

Page 17: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

III.3 Perancangan Sistem Informasi e-Commerce Motor Honda...............

III.3.1 Perancangan Database................................................

III.3.1.1 Logical Database Design..................................

III.3.1.2 Physical Database Design................................

III.3.1.3 Tahap Normalisasi………………………….....

III.3.2 Perancangan Dialog (User Interfaces) .......................

III.3.2.1 Perancangan Menu...........................................

III.3.2.1 Perancangan Halaman Web.............................

BAB IV. IMPLEMENTASI SISTEMIV.1 Instalasi Perangkat Lunak.....................................................................

IV.2 Implementasi Database Sistem e-Commerce Motor Honda..............

IV.3 Mengakses Database Via JSP............................................................

IV.4 Implementasi Halaman Web e-Commerce Motor Honda...................

IV.4.1 Implementasi Halaman Web untuk Pengunjung.........

IV.4.2 Implementasi Halaman Web untuk Admin.................

IV.4.2.1 Implementasi Halaman Web untuk

Admin “Kepala Divisi Penjualan”....................

IV.4.2.1 Implementasi Halaman Web untuk

Admin Web........................................................

BAB V. ANALISA HASILV.1 Kelebihan dan Kekurangan Sistem e-Commerce motor Honda…….

V.1.1 Kelebihan sistem……………………………………

V.1.2 Kekurangan sistem…………………………………..

V.2 Teknologi JSP Pembangun Sistem e-Commerce motor Honda……

V.3 Manfaat Sistem...................................................................................

V.3.1 Manfaat Sistem bagi Pengunjung Selaku Konsumen.

V.3.2 Manfaat Sistem bagi Pihak AHM Yogyakarta……...

BAB VI. PENUTUPVI.1 Kesimpulan............................................................................................

VI.2 Saran.....................................................................................................

DAFTAR PUSTAKA

50

50

50

51

54

59

59

62

78

83

88

91

92

119

124

133

150

150

151

152

152

152

153

154

155

xvii

Page 18: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

DAFTAR GAMBAR

Gambar Keterangan Halaman

2.1 Simbol Entity 13

2.2 Simbol Relasi 13

2.3 Simbol Proses 15

2.4 Simbol Externl Agent 15

2.5 Simbol Data Store 15

2.6 Simbol Data Flow 15

2.7 Siklus Hidup JSP 19

3.1 Diagram Berjenjang 43

3.2 Diagram Konteks 44

3.3 Overview Diagram 45

3.4 DFD level 1 Proses 1 46

3.5 DFD level 2 Proses 1 47

3.6 Lanjutan DFD level 2 Proses 1 48

3.7 Lanjutan DFD level 2 Proses 1 49

3.8 DFD level 1 Proses 2 49

3.9 DFD level 2 Proses 2 50

3.10 E-R Diagram 50

3.11 Relationship Database sebelum Normalisasi 51

3.12 Relationship Database setelah Normalisasi 58

3.13 Struktur Rancangan Menu Index 59

3.14 Struktur Rancangan Menu Admin 59

3.15 Struktur Rancangan Menu Pengunjung 60

3.16 Rancangan Halaman Index 60

3.17 Rancangan Halaman Home 61

3.18 Rancangan Halaman Semua Kategori 62

3.19 Rancangan Halaman Detail Kategori 63

3.20 Rancangan Halaman Detail Motor 64

3.21 Rancangan Halaman Pesanan 65

xviii

Page 19: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

3.22 Rancangan Halaman Informasi Order 66

3.23 Rancangan Halaman Lihat Status Order 67

3.24 Rancangan Halaman Input Login Admin 67

3.25 Rancangan Halaman Menu Admin 68

3.26 Rancangan Halaman Daftar Order Status Pesan 69

3.27 Rancangan Halaman Daftar Order Status Bayar 70

3.28 Rancangan Halaman Daftar Order Status Kirim 71

3.29 Rancangan Halaman Detail Data Order 71

3.30 Rancangan Halaman Input Data Kategori 72

3.31 Rancangan Halaman Input Data Motor Baru 73

3.32 Rancangan Halaman Data Warna dan Stok 74

3.33 Rancangan Halaman Daftar Tipe Motor Terbaru 74

4.1 Window ³System Properties´ 77

4.2 Window ³Environtment Variable´ 78

4.3 Implementasi Halaman Index 88

4.4 Implementasi Halaman Home 89

4.5 Implementasi Halaman Menu “New Release” 93

4.6 Implementasi Halaman Menu “All Type” 95

4.7 Implementasi Halaman Menu “Lihat Detil” 98

Kategori Motor

4.8 Implementasi Halaman Menu “Lihat Detil” Motor 101

4.9 Implementasi Halaman Data Pesanan dan Form

Input Data Pemesan

105

4.10 Implementasi Halaman Informasi Order 115

4.11 Implementasi Halaman Pengecekan Status 116

4.12 Implementasi Halaman Form Login Admin 120

4.13 Implementasi Halaman Login Admin 121

4.14 Implementasi Halaman Daftar Order Status Pesan 122

4.15 Implementasi Halaman Daftar Order Status Bayar 124

4.16 Implementasi Halaman Daftar Order Status Kirim 125

xix

Page 20: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

4.17 Implementasi Halaman Detail Order 126

4.18 Implementasi Halaman Input Data Kategori 131

4.19 Implementasi Halaman Input Data Motor Baru 133

4.20 Implementasi Halaman Data Warna dan Stok 136

4.21 Implementasi Halaman Daftar Tipe Motor Terbaru 138

xx

Page 21: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

DAFTAR TABEL

Tabel Keterangan Halaman

2.1 Muatan Relasi 14

2.2 Tipe Data Integer 28

2.3 Operator Assignment 29

2.4 Penggunaan Operator Logika 30

3.1 Tabel Motor 52

3.2 Tabel Kategori 52

3.3 Tabel Tipe_Baru 53

3.4 Tabel Pemesan 53

3.5 Tabel pesan 53

3.6 Tabel Bayar_Kirim 53

3.7 Tabel Spek_Motor Hasil Tahap Normalisasi 55

3.8 Tabel Real_Motor Hasil Tahap Normalisasi 56

3.9 Tabel Kategori Setelah Tahap Normalisasi 56

3.10 Tabel Fitur Hasil Tahap Normalisasi 56

xxi

Page 22: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

BAB I

PENDAHULUAN

I.1 Latar Belakang Masalah

Perkembangan ilmu pengetahuan dan teknologi khususnya di bidang

komputer dan informasi telah membawa banyak kemajuan di bidang ekonomi.

Seiring berkembangnya perekonomian di negara Indonesia saat ini,

mengakibatkan keinginan pemenuhan kebutuhan juga dirasa semakin meningkat.

Dalam dunia bisnis terlihat pula semakin meningkatnya persaingan di antara

perusahaan-perusahaan yang ada, baik perusahaan swasta maupun perusahaan

milik negara. Dalam kompetisi yang semakin ketat, masing-masing perusahaan

mencoba berusaha menjadi pemimpin pasar dengan mengoptimalkan sasaran

pasar. Luasnya jaringan sasaran pasar yang dimiliki oleh suatu perusahaan

menandakan ada indikasi yang baik dalam perolehan laba penjualan perusahaan.

Peningkatan penjualan yang disertai dengan efisiensi akan mendorong

meningkatnya profitabilitas perusahaan yang semakin baik.

Dewasa ini, tidak sedikit perusahaan yang memanfaatkan teknologi

komputer dan teknologi informasi untuk memperluas jaringan pasar yang akan

meningkatkan perolehan laba penjualan. Salah satu produk teknologi informasi

yang sangat digemari adalah internet, karena internet memberikan banyak fasilitas

dan kemudahan informasi dan bisnis yang dapat diakses oleh siapa saja, kapan

saja dan dimana saja.

Untuk dapat melakukan persaingan bisnis dan berkompetisi dalam

persaingan pasar sepeda motor, pihak PT. Astra International Tbk – Honda alias

Page 23: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

2

Astra Honda Motor yang merupakan retailer motor Honda terbesar di Indonesia

mungkin dapat menggunakan sistem informasi penjualan secara online dengan

memanfaatkan teknologi internet, penulis memfokuskan sistem pemasaran atau

penjualan pada Astra Honda Motor cabang Yogyakarta. Selama ini proses

pemasaran atau penjualan sepeda motor pada Astra Honda Motor cabang

Yogyakarta dilakukan secara konvensional, artinya pihak dealer menyebarkan

brosur atau memasang iklan produk Honda pada media-media massa dan

kemudian konsumen datang langsung ke dealer dan menanyakan jenis-jenis

motor Honda beserta harganya, jika cocok maka konsumen akan membelinya.

Adapun masalah-masalah yang terjadi dengan sistem penjualan

konvensional tersebut, diantaranya adalah :

1. Penjualan motor Honda tidak optimal, karena penyebaran brosur

atau pemasangan iklan yang sangat terbatas jangkauannya.

2. Banyak menyita waktu kerja karyawan bagian penjualan, karena

mereka harus melayani konsumen yang bertanya tentang jenis-jenis

motor Honda dan harganya.

3. Konsumen tidak memperoleh informasi yang detail tentang motor-

motor Honda dari brosur atau iklan.

Dengan adanya berbagai masalah diatas, maka penulis tertarik untuk

membuat sebuah sistem informasi penjualan online berbasis web yang

memanfaatkan fasilitas internet atau biasa dikenal dengan e-Commerce yang

dapat digunakan untuk memberikan informasi detail dan memasarkan produk

motor Honda kepada konsumen luas, sehingga sistem informasi ini diharapkan

Page 24: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

3

dapat meyelesaikan masalah-masalah yang ada.

I.2 Rumusan Masalah

Dari latar belakang masalah di atas dapat dirumuskan menjadi satu

permasalahan yaitu sebagai berikut : Bagaimana membuat suatu e-Commerce

penjualan motor Honda dengan menggunakan teknologi JSP dan MySql ?.

I.3 Batasan Masalah

Dalam pembuatan sistem e-Commerce motor Honda dengan menggunakan

teknologi JSP dan MySql dilakukan beberapa batasan sebagai berikut :

1. Sistem dibuat untuk menyelesaikan masalah-masalah yang sudah

diuraikan di latar belakang masalah.

2. Pembayaran dilakukan dengan via transfer dan tidak secara kredit.

3. Batas pembayaran pemesanan produk adalah 3 hari dari tanggal

pemesanan, jika melebihi batas pembayaran maka pemesanan akan

dibatalkan.

4. Tidak membahas keamanan sistem informasi berbasis web.

5. Tidak membahas sistem pengiriman dan pengembalian barang.

6. Hanya melayani pembelian sepeda motor Honda baru.

7. Program dibuat dengan menggunakan bahasa pemrograman Java Server

Pages dan database MySQL.

I.4 Tujuan dan Manfaat Penelitian

Adapun tujuan dan manfaat dari penulisan skripsi ini adalah:

Page 25: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

4

1. Membuat sebuah sistem e-Commerce yang dapat digunakan oleh Astra

Honda Motor cabang Yogyakarta sebagai media promosi dan penjualan

motor Honda.

2. Dengan sistem ini pihak dealer akan dapat menyediakan informasi dan

memperluas penjualan sepeda motor Honda tanpa dibatasi ruang dan

waktu.

3. Dengan sistem ini akan mempermudah konsumen dalam mendapatkan

informasi sepeda motor Honda dan konsumen akan bisa memesan atau

membeli sepeda motor Honda tanpa harus mendatangi dealer.

I.5 Metodologi Penelitian

Metodologi atau langkah-langkah spesifik yang penulis gunakan dalam

proses pembuatan skripsi ini adalah:

1. Melakukan studi pustaka dengan mempelajari referensi atau landasan-

landasan teori yang berhubungan dengan judul skripsi ini.

2. Case study, dengan tahap-tahap berikut:

a) Interview dengan kepala bagian divisi penjualan dan beberapa

karyawan divisi penjualan.

b) Mengamati dan mempraktekkan kegiatan-kegiatan penjualan yang

ada pada divisi penjualan.

3. Merancang sistem

a) Menganalisa sistem yang sudah ada

b) Membuat rancangan sistem baru yang akan dibuat.

Page 26: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

5

c) Membuat disain database, disain menu dan disain user interface

sistem.

4. Mengimplementasikan rancangan sistem e-Commerce motor Honda

dengan menggunakan teknologi JSP dan MySql yaitu dengan

mengkonversikan rancangan-rancangan yang sudah dibuat sebelumnya ke

dalam bentuk program.

I.6 Sistematika Penulisan

Bab I adalah pendahuluan yang berisi latar belakang masalah, perumusan

masalah berdasarkan latar belakang, batasan masalah, tujuan dan manfaat

penelitian bagi perusahaan dan konsumen, metodologi penelitian dan sistematika

penulisan yang berisi tentang penjelasan singkat setiap Bab.

Bab II adalah landasan teori yang berisi teori-teori yang digunakan dalam

pembuatan skripsi.

Bab III adalah analisa dan perancangan sistem, Bab ini berisi analisa

sistem yang telah ada, rekomendasi sistem yang akan dibuat dan rancangan sistem

yang akan diimplementasikan.

Bab IV adalah implementasi sistem, berisi tentang pembahasan

implementasi sistem ke dalam program berdasarkan perancangan sistem yang

telah dibuat.

Bab V adalah analisa hasil, Bab ini berisi tentang kelebihan dan

kekurangan sistem serta menjawab permasalahan yang dinyatakan di bagian

pendahuluan.

Page 27: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

6

Bab VI adalah penutup, Bab VI berisi tentang kesimpulan yang dapat

diambil oleh penulis untuk menjawab permasalahan dan tujuan yang dijabarkan

pada Bab I, dan saran yang penulis usulkan untuk pengembangan sistem agar

menjadi lebih baik.

Page 28: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

7

BAB II

LANDASAN TEORI

I.7 Konsep Dasar Sistem

Terdapat dua kelompok pendekatan di dalam mendefinisikan sistem, yaitu

pendekatan yang menekankan pada prosedur dan pendekatan yang menekankan

pada komponen/elemen ( Jogiyanto, 1995 ).

Sistem yang lebih menekankan pada prosedur didefinisikan sebagai

berikut : “Suatu sistem adalah suatu jaringan kerja dari prosedur-prosedur yang

saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan

atau untuk menyelesaikan suatu sasaran tertentu” ( Jogiyanto , 1995 ).

Pendekatan sistem yang merupakan jaringan kerja dari prosedur diatas

lebih menekankan pada urut-urutan operasi di dalam sistem.

Prosedur didefinisikan oleh Richard F. Neuschel sebagai berikut :

“Suatu prosedur adalah suatu urut-urutan operasi tulis-menulis, biasanya

melibatkan beberapa orang di dalam satu atau lebih department yang diterapkan

untuk menjamin penanganan yang seragam dari transaksi-transaksi bisnis yang

terjadi”.

Sistem yang lebih menekankan pada elemen/komponen didefinisikan

sebagai berikut: “Sistem adalah kumpulan dari elemen-elemen yang berinteraksi

untuk mencapai suatu tujuan tertentu” ( Jogiyanto, 1995 ).

Page 29: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

8

I.8 Konsep Dasar Informasi

Informasi adalah hal yang sangat penting di dalam suatu organisasi. Suatu

sistem yang kurang mendapatkan informasi akan menjadi luruh, kerdil, dan

akhirnya berakhir. Informasi dapat didefinisikan sebagai berikut : “Informasi

adalah data yang diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi

yang menerimanya” (Jogiyanto, 1995).

Sumber informasi adalah data. Data merupakan sekumpulan fakta mentah

yang belum diolah sehingga menjadi bentuk yang dapat dengan mudah dimengerti

dan dipergunakan oleh manusia.

I.9 Konsep Dasar Sistem Infomasi

Telah diketahui bahwa informasi merupakan hal yang sangat penting bagi

manajemen di dalam pengambilan keputusan. Informasi dapat diperoleh dari

sistem informasi atau disebut juga dengan processing sistem atau information

generating sistem.

Sistem informasi didefinisikan oleh Robert A. Leith dan Roscoe davis

sebagai berikut :

“Sistem informasi adalah suatu sistem di dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi,

bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan

pihak luar tertentu dengan laporan-laporan yang diperlukan”.

Definisi lain dari Sistem Informasi adalah : “An information system ( IS )

is an arrangement of people, data, processes, information presentasion, and

Page 30: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

9

information technologi that interact to support and improve day-to-day operation

in a business as well as support the problem-solving and decision making needs of

management and users (Whitten, 2001). Atau “Serangkaian komponen yang

terkait satu sama lain dan bekerja bersama-sama untuk mengumpulkan, mengolah,

menyimpan dan menyebarluaskan informasi guna mendukung pengambilan

keputusan, koordinasi, kontrol, analisis dan visualisasi dalam suatu organisasi”

(Laudon & laudon, 1998).

Komponen Sistem Informasi :

1. Input

Input adalah data yang masuk ke dalam sistem informasi. Input disini

termasuk metode-metode dan media untuk menangkap data yang akan

dimasukan.

2. Model

Model merupakan kombinasi prosedur, logika dan model matematik

yang akan dipakai untuk memanipulasi data input dan data yang

tersimpan di database, dengan cara yang sudah tertentu, untuk

menghasilkan keluaran yang diinginkan.

3. Output

Output merupakan informasi yang berkualitas dan dokumentasi yang

berguna untuk semakin meningkatkan manajemen serta semua user

sistem.

4. Teknologi

Page 31: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

10

Teknologi digunakan untuk menerima input, menjalankan model,

menyimpan dan mengakses data, menghasilkan dan mengirimkan output

dan membantu pengendalian dari sistem secara keseluruhan. Teknologi

terdiri dari tiga bagian utama yaitu user (humanware/brainware),

perangkat lunak (software) dan perangkat keras (hardware).

5. Database

Database merupakan sekumpulan data yang saling berhubungan satu

dengan yang lainnya, yang dirancang untuk memenuhi kebutuhan

informasi dari berbagai pihak dalam suatu organisasi.

6. Kendali

Kendali berfungsi untuk mencegah hal-hal yang merusak sistem atau

kesalahan yang terjadi dapat segera teratasi.

I.10 Mengenal Internet

Internet adalah suatu jaringan komputer yang bersifat global. Seperti

halnya pada jaringan komputer lokal suatu kantor yang terdiri dari beberapa

komputer, internet juga terbentuk dari jaringan-jaringan komputer yang berbeda

dari seluruh dunia, jaringan-jaringan ini saling terhubung. Suatu jaringan

terhubung dengan jaringan lain, kemudian terhubung ke jaringan yang lain lagi,

begitu seterusnya.

Internet bukanlah suatu bentuk jaringan yang dimiliki oleh suatu badan

atau perusahaan melainkan merupakan suatu media yang terbentuk sebagai hasil

Page 32: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

11

dari kesepakatan para user komputer untuk saling berkomunikasi, singkatnya

internet bukanlah milik siapapun.

Komunikasi di dalam internet didukung oleh suatu jalur komunikasi

dengan kecepatan tinggi (high speed communication) atau sering disebut dengan

internet Back-Bone. Internet Back-Bone dalam kenyataannya dapat berupa saluran

komunikasi yang mampu mendukung komunikasi kecepatan tinggi.

I.11 Dunia e-Commerce

e-Commerce atau Electronic Commercial adalah cara berbisnis (belanja

atau berdagang) yang dilakukan secara online melalui mesin electronic (dalam hal

ini adalah komputer) yang memanfaatkan fasilitas Internet dimana terdapat situs-

situs yang menyediakan layanan "get and delivery". e-Commerce akan mengubah

semua kegiatan marketing dan juga sekaligus memangkas biaya-biaya operasional

untuk kegiatan trading (perdagangan).

e-Commerce menurut Amir Hartman adalah mekanisme bisnis secara

elektroniks, fokusnya transaksi melalui internet.

Association for Electronic Commerce secara sederhana mendefinisikan e-

Commerce sebagai “Mekanisme bisnis secara elektroniks”. Beberapa kalangan

akademisi sepakat mendefinisikan e-Commerce sebagai “Salah satu cara

memperbaiki kinerja dan mekanisme pertukaran barang, jasa, informasi dan

pengetahuan dengan memanfaatkan teknologi berbasis jaringan peralatan digital”.

Page 33: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

12

Terlepas dari berbagai definisi yang dipergunakan oleh beberapa kalangan,

terdapat kesamaan dari masing-masing definisi tersebut. Kesamaan tersebut

memperlihatkan bahwa e-Commerce memiliki karakteristik sebagai berikut :

1. Terjadinya transaksi antara 2 belah pihak atau lebih secara online.

2. Adanya pertukaran barang, jasa dan informasi.

3. Internet merupakan media utama dalam proses atau mekanisme

perdagangan tersebut.

Dari karakteristik diatas terlihat jelas bahwa pada dasarnya e-Commerce

merupakan dampak dari perkembangan teknologi informasi dan telekomunikasi.

Secara signifikan ini mengubah cara manusia melakukan interaksi dengan

lingkungannya, yang dalam hal ini terkait dalam mekanisme dagang.

Seperti halnya bisnis konvensional, e-Commerce juga membawa

keuntungan dan kerugian bagi pihak yang menjalankannya. Berikut adalah sedikit

dari banyaknya keuntungan yang ditawarkan oleh e-Commerce:

1. Para penjual (merchant) dapat menjajakan produknya secara lintas

negara karena sudah memakai teknologi internet yang tidak mengenal

batasan geografis. Transaksi dapat berlangsung kapan saja dan dimana

saja, serta dapat diakses oleh siapa saja asalkan terhubung dalam

jaringan internet.

2. Pemesanan barang dan jasa dapat dilakukan secara langsung dan

tersedianya tagihan.

3. Meskipun sering terdengar berita tentang pembobolan sistem keamanan

internet, akan tetapi umumnya vendor dan analis komputer

Page 34: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

13

berargumentasi bahwa transaksi di internet jauh lebih aman dan praktis

daripada di dunia biasa.

4. e-Commerce juga banyak menguntungkan perusahaan, diantaranya

meningkatkan pendapatan dengan menggunakan online channel yang

biayanya lebih murah, mengurangi biaya-biaya yang berhubungan

dengan kertas (seperti : biaya pos surat, pencetakan, laporan, dll),

mengurangi keterlambatan pembayaran dengan mengunakan transfer

elektronik yang tepat waktu dan dapat langsung di check, mempercepat

pelayanan ke pelanggan, dan pelayanan lebih responsif.

5. Meningkatkan supplier manager dan meningkatkan value chain (mata

rantai pendapatan).

Selain keuntungan, e-Commerce juga memiliki kerugian atau lebih

tepatnya resiko, yaitu :

1. Keamanan yang tidak begitu handal/baik dalam suatu sistem e-

Commerce, kemungkinan besar akan menimbulkan adanya

penyalahgunaan (penipuan, pengintipan) informasi dan kartu kredit (jika

user menggunakan kartu kredit untuk pembayaran).

2. Dikarenakan transaksi yang dilakukan menggunakan teknologi yang

canggih (internet/bukan dunia nyata/non real) maka hubungan antar

manusia (relasi secara sosial) berkurang.

3. Komputer yang merupakan sarana penting dalam e-Commerce bisa saja

mengalami berbagai masalah, misalnya kerusakan komponen-

komponennya atau juga jaringan yang rusak, listrik mati, database-nya

Page 35: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

14

jebol, dan sebagainya. Semua itu kemungkinan akan menghilangkan

kesempatan bisnis karena butuh waktu untuk memperbaiki masalah

tersebut padahal bagi bussinesman waktu adalah uang.

I.12 Entity Relational Diagram (ER-Diagram)

Model actual yang sering digunakan untuk menggambarkan data

modeling adalah Entity Relational Diagam (ER-Diagram).

Simbol –simbol yang digunakan dalam ER-Diagram adalah sebagai berikut :

1. Entity

An entity something about which the businnes needs to store

data (Whitten, 2001 ) . Entity instance adalah kejadian tunggal

dari sebuah entity.

Nama Entity

Gambar 2.1 Simbol Entity

2. Relationship

A relationship is a natural business association that exists

between one more entitas ( Whitten, 2001 ).

Nama Relasi

Gambar 2.2 Simbol Relasi.

Page 36: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

15

Muatan relasinya dapat dilihat pada tabel 2.1 berikut ini :

NOTASI

MUATAN RELASI

( Minimum, Maksimum )

Atau ( 0, N )

Atau ( 1, N )

Atau ( 1, 1 )

Atau ( 0, 1 )

Tabel 2.1 Muatan Relasi

I.13 Data Flow Diagram (DFD)

Data flow diagram digunakan untuk menggambarkan suatu sistem yang

telah ada atau sistem baru yang akan dikembangkan secara logika tanpa

mempertimbangkan lingkungan fisik dimana data tersebut mengalir atau

lingkungan fisik dimana data tersebut akan disimpan. DFD merupakan alat yang

digunakan pada metodologi pengembangan sistem yang terstruktur (Structural

analysis and design ).

Sebelum menggambarkan DFD, proses modeling juga dapat dibantu

dengan context data flow diagram dan decomposition diagram.

Simbol –simbol umum yang dipakai dalam DFD adalah :

1. Proses

Proses adalah kerja yang dilakukan oleh sistem dalam merespon data

flow yang datang atau suatu kondisi.

Page 37: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

16

NamaProses

Gambar 2.3 Simbol Proses

2. External Agent / External Entity

External agent adalah orang, unit orang, sistem atau orang luar yang

berinteraksi dengan sistem.

External Agent

Gambar 2.4 Simbol External Agent

3. Data Store

Data store adalah penyimpanan data untuk penggunaan selanjutnya.

Data Store

Gambar 2.5 Simbol Data Store

4. Data Flow

Menggambarkan aliran data dari suatu proses ke proses lainnya.

nama data flow

Gambar 2.6 Simbol Data Flow

I.14 World Wide Web (WWW)

Word Wide Web (WWW) atau lebih dikenal dengan Web merupakan satu

layanan yang didapat oleh user komputer yang terhubung ke internet. Dengan

menggunakan teknologi hypertext, user dituntut untuk menemukan informasi

Page 38: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

17

dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan

dalam browser web. Internet yang pada awalnya sebagai penyedia informasi, kini

digunakan juga untuk keperluan komunikasi yaitu email dan chatting, sehingga

berfungsi sebagai media transaksi bisnis (commerce). Terdapat dua komponen

web yaitu :

1. Web server

Web server adalah komputer yang digunakan untuk menyimpan

dokumen-dokumen web. Komputer sebagai web server ini akan

melayani permintaan dokumen web dari client-nya. Browser web seperti

Explorer atau Navigator berkomunikasi melalui jaringan (termasuk

jaringan internet) dengan server web dan menggunakan HTTP

(Hypertext Transfer Protocol). Browser akan mengirimkan request

kepada server meminta dokumen tertentu atau layanan lain yang

disediakan oleh server. Server memberikan dokumen atau layanannya

jika tersedia juga dengan menggunakan protocol HTTP.

2. Web Client

Web client adalah aplikasi yang memanfaatkan HTTP (Hypertext

Transfer Protokol) untuk berkomunikasi dengan web server. Web client

berfungsi menampilkan data yang diminta oleh user dari web server

melalui web client.

Page 39: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

18

I.15 Hipertext Markup Language (HTML)

Hypertext Markup Language (HTML) adalah suatu bahasa pemrograman

yang dipergunakan untuk menyusun dan membentuk suatu dokumen agar dapat

ditampilkan pada program browser World Wide Web dalam bentuk yang

dikehendaki. Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan

istilah bagi komponen-kmponen dasar pembentuk dokumen HTML seperti head,

body, table, paragraph dan list.

Untuk menandai berbagai elemen dalam dokumen HTML digunakan tag.

Adapun petunjuk penggunaan tag HTML aadalah sebagai berikut :

1. Tag HTML diapit dengan dua karakter kurung bersudut seperti < head>

2. Tag HTML selalu berpasangan seperti <a></a>

3. Tag pertama dalam suatu pasangan adalah tag awal dan tag kedua

merupakan tag akhir.

4. Tag HTML tidak case sensitive ( tidak dibedakan antara huruf besar dan

huruf kecil ).

5. Jika dalam tag ada tag lagi maka penulisan tag akhir tidak boleh

bersilang ( harus berurutan ). Misalnya <a><b> dan tag akhir </b></a>.

I.16 Pemrograman Web

Pemrograman web adalah teknik pemrograman yang digunakan untuk

membangun suatu web. Pada dasarnya bahasa pemrogaman untuk membuat web

dibagi atas dua jenis, yaitu : server side dan client side.

Page 40: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

19

1. Server Side

Sifat server side berarti pengerjaan skrip akan dilakukan di server, baru

kemudian hasilnya dikirimkan ke browser. Dengan kata lain server side

digunakan untuk memproses segala yang berhubungan dengan server

atau untuk memanipulasi suatu data pada database. Kelebihan server

side adalah tidak diharuskan menggunakan browser tertentu serta dapat

memanfaatkan aplikasi yang dimiliki oleh server, misalnya koneksi ke

database. Contoh server side : JSP, PHP, ASP, CGI.

2. Client Side

Pada client side informasi yang disampaikan akan di eksekusi di

client/browser saja, tidak sampai dikirimkan ke server. Client side

digunakan untuk mengadakan interaksi dengan user yang frekuensinya

tinggi namun data yang diperlukan relative sedikit atau telah tersedia

sebelumnya.

Skrip client side merupakan suatu program yang dapat digabungkan

dengan halaman HTML atau dengan kata lain HTML membungkus skrip

tersebut. Program tersebut di eksekusi hanya pada computer client saat

halaman dibuka atau pada saat link diaktifkan. Kelebihan skrip client

side adalah halaman web dapat dibuat lebih indah serta interaktif.

Kekurangan client side adalah skrip dapat dilihat dengan fasilitas view

HTML source. Contoh pemrograman web yang client side adalah

HTML, VB Script, Java Script.

Page 41: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

20

I.17 Java Server Pages (JSP)

JSP atau Java Server Pages adalah sebuah pemrograman web yang

berjalan pada sisi server bukan pada sisi client seperti Java Script, VB Script

ataupun HTML. JSP dapat berupa gabungan antara baris HTML dan fungsi-fungsi

dari JSP itu sendiri. Berbeda dengan Servlet yang harus dikompilasi oleh user

menjadi class sebelum dijalankan, JSP tidak perlu dikompilasi oleh user tapi web

server-nya yang akan melakukan tugas tersebut. Makanya pada saat user

membuat pertama kali atau melakukan modifikasi halaman dan mengeksekusinya

pada web browser akan memakan sedikit waktu sebelum ditampilkan.

Sebagai gambaran bagaimana JSP melalui masa hidupnya bisa dilihat pada

gambar 2.7 berikut :

Gambar 2.7 Siklus Hidup JSP

II.11.1 Penulisan Skrip JSP

Penulisan skrip JSP menggunakan tag-tag yang memiliki aturan yang

sama dengan XML. Misalnya, ada tag pembuka maka harus ada tag penutup.

Berikut adalah listing program sederhana hanya sebagai contoh dasar

pemrogramaan web menggunakan JSP :

<HTML><HEAD><TITLE>JSP Dasar</TITLE></HEAD><BODY><%

Page 42: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

21

out.println("ini pake script JSP lho..!");%></BODY></HTML>

Dapat dilihat pada contoh skrip diatas, bahwa JSP bersifat embedded

(disisipkan) pada kode HTML biasa. Jadi JSP bukanlah bahasa pemrograman yang

berdiri sendiri (standalone).

II.11.2 Elemen-elemen JSP

Sebagai teknologi pemrograman web, JSP memiliki bermacam-macam

elemen yang dapat digunakan dalam suatu halaman JSP. Elemen-elemen tersebut

antara lain :

II.11.2.1 Skripting

Elemen skripting terdiri atas tiga macam, yaitu :

• Scriplet, berisi statement-statement yang merupakan logika dari suatu

proses.

• Deklarasi, digunakan untuk mendeklarasikan variabel atau method.

• Ekspresi, digunakan untuk menampilkan nilai dari suatu variabel atau

method.

Pada contoh listing program sebelumnya, yang dimaksud dengan scriplet

adalah berikut ini : <%out.println("ini pake script JSP lho..!");%>

Seperti yang telah disebutkan sebelumnya, deklarasi berguna untuk

mendeklarasikan atau inisialisai suatu variabel. Berikut adalah contoh yang

berhubungan dengan deklarasi variabel :

<%!//deklarasi variabelprivate int PENCACAH = 1;

%><HTML>

Page 43: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

22

<HEAD><TITLE>JSP : Deklarasi Variabel</TITLE></HEAD><BODY><%out.println("Halaman ini telah "+PENCACAH+" kali

dikunjungi");PENCACAH++;%></BODY></HTML>

Selain deklarasi variabel, fungsi pada JSP juga harus dideklarasikan.

Contoh deklarasi fungsi adalah sebagai berikut :

<%!public int fungsiTambah(int bilangan1, int bilangan2){int jumlah = 0;jumlah = bilangan1 + bilangan2;return jumlah;}%><HTML><HEAD><TITLE>JSP : Deklarasi Fungsi</TITLE></HEAD><BODY><%int nilaiJumlah; int bil1 = 3; int bil2 = 9;nilaiJumlah = fungsiTambah(4, 6);out.println("Jumlah 4 + 6 : "+nilaiJumlah);%><BR><%nilaiJumlah = fungsiTambah(bil1, bil2);out.println("Jumlah "+bil1+" + "+bil2+" adalah"+nilaiJumlah);%></BODY></HTML>

Pembatas yang digunakan pada suatu ekspresi adalah : <% = %>, contoh

pemakaiannya untuk menampilkan nilai suatu variabel adalah sebagai berikut :

<HTML><HEAD><TITLE>JSP : Pembatas Ekspresi</TITLE></HEAD><BODY><% for (int i=1; i<=5; i++) { %><%=i%> Hello World....Hello JSP <br><% } %></BODY></HTML>

Page 44: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

23

Untuk pemakaian fungsi, berikut adalah contohnya :

<%!public int fungsiTambah(int bilangan1, int bilangan2){int jumlah = 0;jumlah = bilangan1 + bilangan2;return jumlah;}%><HTML><HEAD><TITLE>JSP : Pembatas Ekspresi </TITLE></HEAD><BODY><%int bil1 = 3;int bil2 = 8;out.println("Jumlah "+bil1+" + "+bil2+" adalah ");%><%= fungsiTambah(bil1, bil2) %></BODY></HTML>

II.11.2.2 Pengantar (Directive)

Directive adalah media yang digunakan JSP untuk mengirimkan “pesan”

ke JSP container. Directive berguna untuk melakukan setting nilai global seperti

deklarasi class atau method yang berlaku pada halaman tersebut. Secara umum

sintak directive adalah sebagai berikut : <%@ nama_directive

atribut1=´nilai1´ atribut2=´nilai2´...%>

Directive pada JSP terdiri dari tiga jenis yang masing-masing mempunyai

fungsi berbeda. Berikut adalah ketiga jenis directive :

1. Page Directive, Directive yang berfungsi untuk mendefinisikan atribut-

atribut yang akan berlaku pada halaman tersebut. Sebagai contoh dengan

menggunakan directive ini suatu halaman bisa diberikan informasi

bahasa pemrograman yang digunakan, meng-import package-package

yang akan digunakan, menyatakan halaman tersebut terlibat dalam

Page 45: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

24

HTTP session, mendefinisikan URL yang akan ditampilkan apabila

terjadi error pada halaman JSP tersebut dan lain-lain. Pada sebuah

halaman JSP dapat berisi banyak page directive. Tanda yang digunakan

directive ini adalah :

<%@ page atribut1 atribut2...%>

Sedangkan atribut-atribut untuk tipe directive ini adalah :

Atribut language : Atribut ini mendefinisikan bahasa pemrograman apa

yang digunakan pada halaman tersebut. Atribut ini ada dikarenakan

apabila dimasa yang akan datang JSP engine dapat men-support bahasa

pemrograman lain. Berikut adalah contoh penggunaanya :

<%@ page language=´java´%>

Atribut import

Berikut adalah contoh penggunaannya :

<%@ page import=´java.io.*,java.sql.*´%>

Atribut errorPage : Atribut ini mendefinisikan URL yang akan

ditampilkan apabila terjadi error pada halaman JSP tersebut. Contoh

penggunaanya adalah :

<%@ page errorPage=´error.jsp´%>

Atribut session : Menyatakan halaman tersebut terlibat dalam HTTP

session. Apabila halaman JSP menggunakan directive page dengan

atribut ini artinya halaman tersebut nantinya akan digunakan untuk

mengakses atau memberikan nilai pada variabel yang disimpan pada

session. Penggunaanya sebagai berikut :

<%@ page session=´true´%>

Page 46: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

25

Atribut lain yang dimiliki oleh directive ini adalah : extends, buffer,

autoFlush, isErrorPage dan isThreadSafe. Untuk penggunaan atribut

tentu saja tidak harus dituliskan satu-satu seperti contoh di atas, tapi

dapat disatukan sekaligus, seperti contoh berikut :

<%@ page language=´java´%> import=´java.sql.*, java.io.*,java.util.*´ session=´true´ buffer=´24kb´ autoFlush=´true´info=´Contoh penggunaan Directive´ errorPage=´error.jsp´isErrorPage=´false´ isTreadSafe=´false´ %>

2. Include Directive, directive ini berfungsi untuk menyisipkan isi dari

suatu file dengan tipe teks pada suatu halaman JSP. Ada dua cara dalam

menyisipkan file. Pertama, penyisispan dilakukan sewaktu proses

penerjemahan kode JSP, yang kedua dilakukan ketika pemakai

melakukan permintaan terhadap halaman JSP. Sintak yang digunakan

oleh directive include dengan cara yang pertama adalah :

<%@ include file="/namafile_yang_akan_disisipkan" %>

Deangan cara yang kedua :

<jsp:include page="/namafile_yang_akan_disisipkan"

flush=´true´/>

3. Taglib Directive, directive ini berfungsi untuk penggunaan tag-tag yang

dibuat sendiri oleh user pada halaman JSP. Tag-tag tersebut biasanya

disimpan dalam “tag library” dalam bentuk file yang dikompres (ZIP

atau JAR). Dalam file yang dikompres tersebut terdapat class-class

dalam suatu paket. Dan untuk memanggil atau mengoperasikan method

atau properti dalam class tersebut digunakan directive ini. Sintak dari

directive ini adalah : <%@taglib uri=´tag_library_URI´

prefix=´tag_prefix´ %>

Page 47: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

26

Atribut uri (Uniform Resource Identifier) berfungsi sebagai “tag library

descriptor”. Dan atribut prefix berfungsi sebagai ID yang akan

mempermudah “JSP Compiler” menentukan tag-tag dari “external

library”. Tag-tag yang telah dikenali oleh “JSP Compiler” adalah jsp,

jspx, java, javax, servlet dan sunw.

II.11.2.3 Action

Action merupakan salah satu elemen JSP berupa tag-tag. JSP mengenal

dua macam Action, yaitu :

Ø Standard Action Tag

Standard Action adalah tag yang berfungsi untuk menjalankan suatu

operasi yang spesifik, seperti :

• Mem-forward dari suatu halaman JSP ke halaman JSP yang

lain.

• Menyisipkan suatu halaman/operasi pada halaman JSP dari

halaman JSP lainnya.

• Penanganan Applet atau Java Bean pada suatu halaman JSP.

Berikut adalah Standard Action yang terdapat dan dikenali oleh JSP :

• param action (jsp:param), tag yang digunakan untuk

melengkapi tag <jsp:params>, <jsp:plugin>, <jsp:forward>.

Translation error akan terjadi apabila digunakan di tempat

lain.

Page 48: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

27

• params action <jsp:params>, tag ini digunakan hanya dalam

jsp:plugin saja. Penggunaan di tempat lain akan

mengakibatkan translation time error.

• forward action (jsp:forward), tag ini digunakan untuk mem-

forward ke file JSP, Servlet atau file statik lain.

• include action (jsp:include), tag ini digunakan untuk

mengikutsertakan file lain dalam JSP saat permintaan

dilakukan.

• plugin action (jsp:plugin), tag ini digunakan untuk

menghasilkan kode-kode yang sesuai target browser dalam

menyisipkan komponen Java bean atau Applet secara

otomatis.

• use bean action (jsp:useBean), tag ini digunakan untuk

mengasosiasikan Java bean dalam JSP sehingga objek yang

terdapat dalam Java bean dapat digunakan untuk

diaplikasikan dalam kode JSP.

• set property action (jsp:setProperty), tag ini digunakan untuk

melengkapi penggunaan tag <jsp:usebean>.

• get property action (jsp:getProperty), tag ini digunakan untuk

mendapatkan nilai properti dari bean dan merupakan

pelengkap dari tag <jsp:getproperty>.

Page 49: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

28

Ø Custom Tag

Custom tag adalah tag baru yang dapat didefinisikan sendiri. Custom

tag merupakan salah satu kelebihan dari JSP sebagai teknologi

pemrograman web.

II.11.2.4 Impor Java Class

Jika telah diketahui bahwa JSP adalah suatu teknologi web berbasis bahasa

pemrograman Java dan berjalan di Platform Java, maka dalam penggunaannya

pasti akan dibuat objek ataupun mengakses metode-metode yang sudah tersedia

dari class-class standar Java (Java API). Untuk mengakses class-class Java dari

JDK, dilakukan impor class API dari Java yang dapat dilakukan dengan kode

berikut :

impor java.io.*;

dan di JSP, dapat dilakukan dengan menggunakan directive pages seperti

berikut :

<%@ page import = ³java.io.*´ %>

II.11.2.5 Tipe Data dan Variabel dalam Java

Tipe dan variabel merupakan salah satu elemen yang sangat penting dalam

pemrograman, tak terkecuali dalam JSP. Variabel dalam Java harus didefinisikan

dulu tipe datanya secara eksplisit. Berikut adalah beberapa tipe data :

Ø Tipe data integer, ada empat tipe data integer dalam Java yang

dijelaskan dalam tabel 2.2. berikut ini :

Page 50: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

29

Tipe Data Keterangan

byte Memiliki nilai integer dari -128 sampai +127 danmenempati 1 byte (8 bits) di memori.

short Memiliki nilai integer dari -32768 sampai 32767 danmenempati 2 bytes (16 bits) di memori.

int Memiliki nilai dari -2147483648 sampai 2147483647dan menempati 4 bytes (32 bits) di memori.

long Memiliki nilai dari -9223372036854775808 sampai9223372036854775807 dan menempati 8 bytes (64bits) di memori.

Tabel 2.2 Tipe Data Integer

Ø Floating point, merupakan tipe data primitif dalam Java dan

digunakan untuk menangani bilangan floating point. Ada dua macam

floating point, yaitu :

Float : memiliki nilai -3.4 x 108 sampai +3.4 x 108 dan menempati 4

bytes di memori. Double : memiliki nilai -1.7 x 10308 sampai +1.7 x

10308.

Ø Boolean, dalam java dikenal tipe data boolean yang terdiri atas dua

nilai saja, yaitu true atau false. Pendeklarasian tipe data boolean bisa

tanpa nilai awal dan bisa dengan nilai awal.

Ø String, dalam Java String sebenarnya adalah objek dari class String

yang merupakan class standar dalam java, yang digunakan untuk

menangani string.

Ø Array, array bukan tipe data melainkan struktur data yaitu suatu

kesatuan variabel dengan tipe yang sama dan yang dapat menyimpan

data lebih dari satu dengan menggunakan indeks angka integer.

Page 51: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

30

II.11.3 Operator

Dalam bahasa pemrograman Java, biasanya menggunakan beberapa

operator dalam penulisannya, operator-operator tersebut adalah :

Ø Operator Aritmetika

Dalam Java, kita menggunakan tanda (+) untuk penjumlahan, (-) untuk

pengurangan, (*) untuk perkalian, (/) untuk pembagian, dan (%) untuk

mendapatkan hasil sisa pembagian.

Ø Operator Assignment

Berikut adalah contoh dari operator assignment :

Ekspresi ArtiX + = Y X = X + YX - = Y X = X – YX * = Y X = X * YX / = Y X = X / YX % = Y X = X % Y

Tabel 2.3 Operator Assignment

Ø Operator Increament dan Decrement

Operator increament adalah ++ yang berarti naik satu unit. Apabila int,

++a memiliki nilai yang sama dengan a=a+1. ada dua versi operator ini

yaitu, prefix yang berarti operator digunakan sebelum variabel atau

ekpresi, dan postfix yang berarti operator digunakan sesudah variabel

atau ekpresi.

Ø Operator Relasi

Operator ini menghasilkan nilai boolean dan menggunakan operator

berikut :

> : lebih dari

Page 52: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

31

< : kurang dari

>= : lebih dari atau sama dengan

<= : kurang dari atau sama dengan

= = : sama dengan

!= : tidak sama dengan

Operator ini sering digunakan untuk kontrol program, misalnya pada

pengkondisian if. Untuk String, dapat digunakan metode equals yang

dapat menggantikan operator relasi sama dengan (= =).

Ø Operator Logical

Operator ini digunakan untuk ekspresi logikal yang menghasilkan nilai

boolean, yaitu AND (&&), OR (||) dan NOT (!). berikut adalah tabel

penggunaan dari operator logika :

A B A || B A && B

true true true true

true false true false

false true true false

false false false false

Tabel 2.4 Penggunaan Operator Logika

II.11.4 Kontrol Alur Program

Dalam bahasa pemrograman Java, dikenal dua macam kontrol alur

program yaitu pengkondisian dan looping.

II.11.4.1 Pengkondisian

Pengkondisian mengatur alur program berdasarkan pada kondisi tertentu

yang didefinisikan. Untuk masalah dengan satu atau dua percabangan dapat

Page 53: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

32

digunakan statement if dan else, untuk multiple alternatif dapat digunakan

if...elseif dan switch.

Ø Statement if

Digunakan jika satu atau lebih operasi akan dilaksanakan apabila

syaratnya (kondisinya) terpenuhi atau bernilai true. Sintaks-nya

adalah:

<%if (kondisi){

operasi program;}%>

Ø Statement if....else

Pada statement if....else ditemui adanya dua alternatif operasi program

yang akan dijalankan. Apabila operasi pertama memenuhi kondisi

maka akan dijalankan, tetapi bila tidak memenuhi kondisi maka

operasi kedua akan dijalankan. Sintaks-nya adalah :

<%if (kondisi){

operasi program 1;}else{

Operasi program 2;}%>

Ø Statement if...elseif

Statement if...elseif digunakan apabila terdapat beberapa kondisi yang

berbeda-beda yang masing-masing kondisi memiliki operasi program

yang akan dijalankan apabila kondisi tersebut terpenuhi. Sintaks-nya

adalah :

Page 54: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

33

<%if (kondisi1){

operasi program 1;}elseif (kondisi2){

Operasi program 2;}elseif (kondisi3){

Operasi program 3;}else{

Operasi program 4;}

%>

Ø Statement switch

Seperti halnya if..elseif, switch juga digunakan untuk memilih berdasar

banyak pilihan (kondisi) dimana masing-masing pilihan akan

menghasilkan pernyataan atau aksi yang berlainan sesuai dengan

pilihan yang dilakukan. Biasanya penggunaan switch berkaitan dengan

menu dimana apabila menu pertama dipilih maka switch akan

menjalankan blok dari case 1, lalu apabila menu kedua dipilih maka

switch akan menjalankan blok dari case 2, demikian seterusnya.

Sintaks-nya adalah :

<%switch(ekspresi){

case <ekspresi konstanta>; <pernyataan>...break;

case yang lain...default: <pernyataan>...

}%>

Page 55: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

34

II.11.4.2 Looping

Kontrol looping atau pengulangan dalam program JSP dapat

menggunakan while, do-while dan for.

Ø while

Selama ekspresi boolean bernilai benar/true, blok pernyataan akan

dijalankan terus menerus. Sintaks-nya adalah :

<%....while(ekspresi boolean)

{<pernyataan>}%>

Ø do-while

Perbedaan utama antara while dan do-while adalah pada do-while

pernyataan dijalankan terlebih dahulu minimal satu kali sedangkan

pada while memungkinkan pernyataan sama sekali tidak dijalankan

apabila kondisi boolean pada saat pertama kali sudah salah. Sintaks-

nya adalah :

<%....do

%>

Ø for

{<pernyataan>}while(ekspresi boolean);

Loop dengan for melakukan inisialisasi sebelum iterasi/loop pertama,

kemudian melakukan test kondisional dan pada akhir dari tiap iterasi

melakukan penambahan atau pengurangan pada variabel yang

digunakan sebagai basis pengkondisian untuk perulangan. Sintaks-nya

adalah :

Page 56: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

35

<%for (inisialisasi;ekspresi boolean;step){

<pernyataan>;}%>

II.11.5 Exception Handling

Setiap program pasti tidak akan bebas dari bug atau kesalahan. Dalam

bahasa pemrograman Java digunakan exception handling untuk

penanganan/penelusuran kesalahan. Untuk menangkap exception, digunakan blok

try. Bentuk blok try yang paling sederhana adalah seperti berikut :

try{

}Kode yang akan dijalankan

catch (parameter){

Kode yang akan dijalankan jika terjadi eksepsi}

Dalam hal ini parameter berupa nama kelas yang berhubungan dengan

penanganan eksepsi dan diikuti dengan nama parameter.

Selain dengan cara menambahkan blok try/catch, cara yang lain dalam

menangkap eksepsi adalah dengan melemparkan eksepsi (throw exception) pada

suatu fungsi yang mempunyai eksepsi.

II.11.6 Object Implisit

Pada JSP ada beberapa objek dimana user tidak perlu membuatnya secara

manual dari class-nya yaitu Objek Implisit. Objek-objek tersebut adalah :

Ø Objek request

Variabel ini berhubungan dengan objek permintaan HTTP (HTTP

Servlet Request). Variabel ini memungkinkan pengaksesan seperti

Page 57: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

36

parameter-parameter permintaan, tipe permintaan (GET atau POST),

dan judul HTTP.

Ø Objek response

Variabel ini berhubungan dengan objek tanggapan terhadap klien

(HTTP Servlet Request). Antara lain dapat digunakan untuk

menciptakan cookie.

Ø Objek pageContext

Menyimpan informasi tentang objek halaman sekarang.

Ø Objek session

Variabel ini digunakan untuk menangani sesi. Merupakan variabel

yang merujuk ke objek HTTP Session.

Ø Objek application

Mewakili class ServletContext yang diperoleh dari objek konfigurasi

servlet. Objek ini digunakan untuk menangani aplikasi dalam

Application Scoope.

Ø Objek out

Variabel ini digunakan untuk mengirimkan keluaran ke klien (merujuk

ke objek PrintWriter, yang terdapat pada paket

javax.servlet.jsp.JspWriter)

Ø Objek config

Variabel yang merujuk ke objek ServletConfig untuk halaman

sekarang.

Page 58: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

37

Ø Objek page

Merupakan sinonim untuk this dan mewakili HttpJspPage, Page disini

berfungsi sebagai keyword this dalam bahasa pemrograman Java.

Ø Objek exception

Objek throwable yang tidak tertangkap yang menghasilkan tampilan

halaman error. Objek ini dapat diakses hanya dari halaman error

(memiliki atribut direktif isErrorPage= true ).

Objek-objek ini hanya dapat digunakan di antara tag scriptlet dan ekspresi.

Masing-masing objek memiliki properti yang berbeda.

II.11.7 Transaksi Parameter

Pada aplikasi berbasis web transaksi parameter sangat sering ditemui.

Sebagai contoh pada aplikasi web sering ditemui form yang didalamnya terdapat

kolom masukan, radio button atau checkbox. Kemudian nilai-nilai tersebut di

kirim ke halaman lain atau halaman itu sendiri. Nama dari kolom masukkan, radio

button dan checkbox tersebut disebut parameter sedangkan nilainya adalah apa

yang diinputkan kedalamnya.

Ø Metode Pengiriman dan Pengambilan Parameter

Ada dua metode pengiriman yang digunakan pada saat pengiriman

parameter pada halaman suatu web site yaitu POST dan GET. Pada bahasa

pemrograman lain, misalnya PHP, untuk mengambil nilai parameter yang dikirim

dengan metode POST atau GET digunakan fungsi yang berbeda. Pada JSP, untuk

mengambil nilai dari parameter tersebut digunakan method yang sama. Method

tersebut dimiliki oleh objek request sebagai objek implisit.

Page 59: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

38

Method yang digunakan untuk mengambil parameter adalah :

getParameter(namaParameter). Keluaran dari method ini adalah bertipe string,

sehingga tipe dari variabel yang menangkap hasil tersebut juga harus bertipe

string.

II.11.8 Session

Sesion secara harfiah diartikan sebagai event yang terjadi selama waktu

tertentu. Arti secara harfiah bersesuaian dengan arti teknikal di pemrograman web,

dimana session berkaitan erat dengan event ketika user mengakses suatu situs.

Fasilitas session merupakan fasilitas yang penting dalam pembuatan

aplikasi pemrograman web. Penggunaan session yang umum adalah untuk

menangani autentifikasi atau sistem login. Contoh lain penggunaan session adalah

shopping chart, dimana konsumen yang ingin membeli dapat meyimpan informasi

barang belanjaan yang akan dibeli pada keranjang belanja yang menggunakan

fasilitas session, sehingga konsumen dapat melihat sewaktu-waktu barang apa saja

yang telah dibeli.

Tiga metode utama yang dimiliki oleh objek session adalah :

Ø Untuk menyimpan data dalam session

public void setAttribute(String nama, Object value)throws illegalStateException

Ø Untuk mendapatkan data tersebut kembali

public Object getAttribute(String nama)throws illegalStateException

Ø Untuk menghapus data tersebut

public void removeAttribute(string nama, Object value)throws illegalStateException

Page 60: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

39

I.18 Tomcat

Tomcat merupakan sebutan untuk web container, yang merupakan

implementasi resmi spesifikasi JSP dan servlet dari Sun Microsystem. Web

container adalah layanan yang dijalankan oleh Java Application Server khususnya

untuk layanan yang kompatibel dengan Servlet dan JSP.

I.19 MySQL

MySQL ( My Structure Query Language ) atau yang biasa dibaca “ mai-

se-kuel” adalah sebuah program pembuat database yang bersifat open source,

artinya siapa saja boleh menggunakannya dan tidak dicekal.

MySQL sebenarnya produk yang berjalan pada platform Linux. Karena

sifatnya yang open source, dia dapat dijalankan pada semua platform baik

Windows maupun Linux. Selain itu MySQL juga merupakan program pengakses

database yang bersifat jaringan sehingga dapat digunakan untuk aplikasi Multi

User ( banyak pengguna ).

Kelebihan lain dari MySQL adalah dapat menggunakan bahasa Query

standart yang dimlliki SQL ( Structure Query Language ). SQL adalah suatu

bahasa permintaan yang terstruktur yang telah distandarkan untuk semua program

pengaksesan database seperti Oracle, Posgres SQL, SQL Server, dan lain-lain.

I.20 JDBC (Java database Connectivity)

JDBC adalah API (Application Programming Interfaces) yang

dikembangkan oleh Sun Mycrosystem untuk menyediakan akses data universal

Page 61: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

40

dalam bahasa pemrograman Java. JDBC merupakan bagian dari J2SDK Standart

Edition.

Page 62: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

41

BAB III

ANALISA DAN PERANCANGAN SISTEM

I.21 Analisa Sistem yang Ada dan Analisa Sistem yang baru

Sistem pemasaran/penjualan yang saat ini dijalankan di Astra Honda

Motor cabang Yogyakarta masih menggunakan cara yang konvensional. Hal

tersebut dinilai tidak praktis dan memiliki beberapa kelemahan diantaranya adalah

penjualan motor Honda yang hanya terbatas pada wilayah sekitar Astra Honda

Motor cabang Yogyakarta saja, konsumen harus datang langsung ke showroom

untuk melakukan transaksi penjualan ataupun sekedar hanya untuk melihat produk

terbaru dari motor Honda dan karyawan bagian penjualan harus menyediakan

waktu relatif banyak untuk melayani konsumen yang bertanya tentang spesifikasi

motor Honda.

Ø Analisa kebutuhan

Dari analisa kebutuhan yang dilakukan penulis, dapat disimpulkan bahwa

Astra Honda Motor cabang yogyakarta membutuhkan suatu media web

sebagai sarana promosi sekaligus sebagai sarana penjualan motor. Alasan

dipilihnya media web sebagai sarana promosi dan penjualan adalah :

• Media web dapat menjangkau konsumen yang lebih luas karena

web dapat diakses dimana saja dan siapa saja, serta akan

memudahkan konsumen dalam melakukan transaksi.

• Media web dinilai lebih cepat dalam memberikan informasi motor

terbaru, happening discount dan informasi-informasi lain yang

berkaitan dengan Astra Honda Motor cabang Yogyakarta.

Page 63: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

42

Ø Tujuan dan sasaran sistem

Tujuan dan sasaran sistem yang akan dirancang ini adalah menyediakan

sistem informasi penjualan berbasis web atau e-Commerce untuk penjualan

motor Honda pada Astra Honda Motor cabang Yogyakarta, yang dapat

mengatasi masalah-masalah yang telah dijelaskan sebelumnya. Sistem yang

akan dikembangkan ini dikhususkan untuk penjualan sepeda motor Honda

kepada konsumen dengan memanfaatkan fasilitas internet. Sistem ini akan

dirancang menggunakan pemrograman berbasis web, dimana terdapat fasilitas

untuk melihat informasi produk Astra Honda Motor, fasilitas untuk melakukan

pemesanan motor Honda dan fasilitas khusus bagi admin untuk mengupdate

informasi dalam web. Adapun data-data dan sumber daya spesifik yang akan

digunakan untuk merancang sistem ini, adalah :

1. Data lengkap mengenai motor Honda.

2. Gambar – gambar produk motor Honda.

3. Seperangkat komputer lengkap dengan software-software pendukung

untuk pembuatan program aplikasi. Dengan spesifikasi komputer

sebagai berikut :

Hardware : Prosessor pentium IV, Hard Disk 40G, RAM 256Mb

Software : Java Server Pages, MySQL, Tomcat, Macromedia

Dreamweaver, Photoshop, dan sistem operasi Windows Xp.

4. Staff penjualan yang memiliki kemampuan mengoperasikan

komputer secara umum.

Page 64: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

43

5. Kondisi keuangan perusahaan yang menunjang untuk pemeliharaan

sistem ini kedepannya

I.22 Konseptual Disain Sistem e-Commerce Motor Honda

Dari analisa diatas dapat dibuat diagram-diagram sebagai gambaran

konseptual dari proses-proses yang ada dalam sistem yang akan dirancang.

Diagram-diagram tersebut adalah :

III.2.1 Diagram Berjenjang

Diagram berjenjang adalah sebuah diagram yang menggambarkan susunan

keseluruhan proses yang terdapat dalam sistem. Diagram berjenjang dari sistem

yang akan dibuat dapat dilihat pada gambar 3.1 berikut :

Page 65: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

43

Gambar 3.1 Diagram Berjenjang

Page 66: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

44

III.2.2 Diagram Konteks

Diagram Konteks adalah sebuah diagram sederhana yang menggambarkan

hubungan antara entitas luar, masukan dan keluaran sistem. Diagram konteks dari

sistem yang akan dibuat dapat dilihat pada gambar 3.2 berikut :

Gambar 3.2 Diagram Konteks

III.2.3 Data Flow Diagram

Tujuan dari pembuatan diagram aliran data atau Data Flow Diagram

(DFD) adalah untuk menggambarkan aliran data yang terlibat dalam suatu

prosedur, dari mana data masuk, ke mana data yang keluar dan dimana data

tersebut disimpan. DFD menggambarkan penyimpanan data dan proses yang

mentransformasikan data. DFD menunjukkan hubungan antara data dengan proses

yang ada pada sistem. Overview Diagram sistem yang akan dibuat dapat dilihat

pada Gambar 3.3 berikut :

Page 67: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

45

Gambar 3.3 Overview Diagram

Page 68: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

46

DFD level 1 proses 1 sistem yang akan dibangun dapat dilihat pada Gambar 3.4

Gambar 3.4 DFD Level 1 Proses 1

DFD level 2 proses 1 sistem yang akan dibangun dapat dilihat pada Gambar 3.5

Gambar 3.5 DFD Level 2 Proses 1

Page 69: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

47

DFD level 1 proses 2 sistem yang akan dibangun dapat dilihat pada Gambar 3.6

Gambar 3.6 DFD Level 1 Proses 2

DFD level 2 proses 2 sistem yang akan dibangun dapat dilihat pada Gambar 3.7

2.2.1p

data-data motor data motor yang disimpanInput data

motor

Admin Webdata-data motor

detail datamotor

2.2.2p

Edit datamotor

data motoryang diedit

data motorterupdate

D5 Data motor

detail datamotor

2.2.3p

Del datamotor

data motor yang dihapus

Gambar 3.7 DFD Level 2 Proses 2

Page 70: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

48

Gambar 3.7 Lanjutan DFD Level 2 Proses 2

Page 71: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

49

Gambar 3.8 Lanjutan DFD Level 2 Proses 2

DFD level 1 proses 3 sistem yang akan dibangun dapat dilihat pada Gambar 3.9

Gambar 3.8 DFD Level 1 Proses 2

DFD level 2 proses 3 sistem yang akan dibangun dapat dilihat pada Gambar 3.9

Gambar 3.9 DFD Level 2 Proses 3

Page 72: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

50

III.2.4 Entity ± Relational Diagram

Entity - Relational Diagram adalah diagram untuk menggambarkan

hubungan antara entitas yang digunakan oleh sistem secara keseluruhan. Diagram

E-R sistem yang akan dibuat dapat dilihat pada gambar 3.10 berikut :

Gambar 3.10 E-R Diagram

I.23 Perancangan Sistem e-Commerce Motor Honda

III.3.1 Perancangan Database

III.3.1.1 Logical Database Design

Dalam tahap ini akan dilakukan proses translasi dari pemodelan data (conseptual

design) yang sudah dibuat menggunakan diagram E-R pada gambar 3.10 menjadi

disain database secara logis (Logical database design) yang digambarkan

menggunakan relational model seperti pada gambar 3.11 berikut ini :

Page 73: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

51

Gambar 3.11 Relationship Database

III.3.1.2 Physical Database Design

Dari gambar 3.11 dapat dilihat bahwa akan terbentuk 6 tabel, yaitu tabel

motor, tabel kategori, tabel tipe_baru, tabel pemesan, tabel pesan dan tabel

bayar_kirim. Selanjutnya adalah mentranslasikan disain database secara logis

menjadi disain database secara fisik. Tabel-tabel ini akan ditentukan tipe dan

panjang setiap field-nya.

1. Tabel motor

Field Name Data Type Length Descriptionkd_motor varchar 20 Kode motor (primary key)

Page 74: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

52

kd_kat varchar 20 Kode kategori motor (foreign key)nm_motor varchar 40 Nama motorthn_prod char 6 Tahun produksi motorwarna varchar 40 Warna motorP*l*t varchar 40 Ukuran panjang x lebar x tinggi motor satuan mmberat varchar 40 Berat kosong motor dalam satuan kgjarak_roda varchar 40 Jarak sumbu roda dalam satuan mmban_depan varchar 40 Ukuran ban depanban_blkng varchar 40 Ukuran ban belakangsus_depan varchar 40 Spesifikasi suspensi depansus_blkng varchar 50 Spesifikasi suspensi belakangrem_depan varchar 50 Spesifikasi rem depanrem_blkng varchar 40 Spesifikasi rem belakangrangka varchar 40 Tipe rangka motorkap_bb varchar 40 Kapasitas tangki bahan bakar dalam satuan litersistem_bb varchar 40 Sistem bahan bakarmesin varchar 40 Spesifikasi tipe mesinvolum varchar 40 Volume langkah dalam satuan ccdaya varchar 40 Daya maksimum motorpelumas varchar 40 Kapaistas minyak pelumas mesin dalam satuan literkopling varchar 50 Spesifikasi koplingtrans_gigi varchar 40 Transmisi Gigipola_gigi varchar 40 Pola pengoperan gigistarter varchar 40 Spesifikasi starteraki varchar 40 Spesifikasi varcharbusi varchar 40 Spesifikasi busipengapian varchar 40 Sistem pengapianvelg varchar 50 Tipe velg motorgaransi varchar 40 Lama garansi mesin motor Hondastok int 4 Stok motorharga int 10 Harga satuan motorpot_harga int 8 Potongan harga untuk harga satuan motor

Tabel 3.1 Tabel Motor

2. Tabel kategori

Field Name Data Type Length Descriptionkd_kat varchar 20 Kode kategori (primary key)kategori varchar 40 Nama kategori motorInfo varchar 500 Info umum kategori motorfitur varchar 200 fitur utama tiap tipe motor

Tabel 3.2 Tabel Kategori

Page 75: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

53

3. Tabel tipe_baru

Field Name Data Type Length Descriptionno bigint 15 Nomor daftar motor terbaru (primary key-auto inc.)kd_kat varchar 20 Kode kategori terbaru (foreign key)

Tabel 3.3 Tabel Tipe_Baru

4. Tabel pemesan

Field Name Data Type Length Descriptionno_pemesan bigint 15 nomor pemesan (primary key-auto increment)sandi varchar 40 Kata sandi untuk pengecekan statusnama varchar 40 Nama pemesanktp varchar 40 No KTP pemesanalamat varchar 50 Alamat pemesankota varchar 30 Kota tempat tinggal pemesankd_pos int 8 Kode pos rumah pemesanpropinsi varchar 30 Propinsi tempat tinggal pemesanno_telp varchar 20 Nomor telpon rumah pemesanno_hp varchar 20 Nomor handphone pemesanno_rekening varchar 25 Nomor rekening pemesanbank varchar 30 Nama bank pemesan

Tabel 3.4 Tabel Pemesan

5. Tabel pesan

Field Name Data Type Length Descriptionno_pesan bigint 15 Nomor pemesanan (primary key-auto increment)kd_motor varchar 20 Kode motor yang dipesan (foreign key)no_pemesan bigint 15 Nomor pemesan (foreign key)tgl_pesan date 10 Tanggal pemesananharga_pesan int 10 Harga motor saat di pesanpot_hargapesan int 6 Potongan harga motor pemesananstatus varchar 10 Status pemesanantgl_bayar date 10 Tanggal pembayarantgl_kirim date 10 Tanggal pengiriman

Tabel 3.5 Tabel Pesan

6. Tabel bayar_kirim

Field Name Data Type Length Descriptionno_bayar_kirim bigint 15 No pembayaran dan pengiriman (primary key-auto)no_pesan bigint 15 Nomor pemesanan (foreign key)

Page 76: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

54

tgl_bayar date 10 Tanggal pembayarantgl_kirim date 10 Tanggal pengiriman

Tabel 3.6 Tabel Bayar_Kirim

III.3.1.3 Tahap Normalisasi

Normalisasi adalah mengubah suatu tabel yang memiliki masalah

(anomali) tertentu ke dalam 2 buah tabel atau lebih yang tak memiliki anomali.

Ada tiga kondisi yang harus dipenuhi oleh suatu tabel dalam proses normalisasi,

yaitu :

1. tidak terdapat group yang berulang dalam satu kolom

2. tidak terdapat kolom bukan kunci yang tidak bergantung pada kolom

kunci

3. tidak terdapat kolom bukan kunci yang bergantung pada kolom

bukan kunci

Selanjutnya adalah menganalisa kenormalan tabel-tabel tersebut dengan memberi

record pada masing-masing field.

1. Tabel motor

Setelah melakukan pengisian contoh data pada tabel motor, terlihat

bahwa tabel sudah memenuhi kondisi normal, akan tetapi masih terdapat

anomali yaitu nilai yang berulang untuk satu atribut kunci yang sama,

akibatnya terjadi redudansi data. Hal tersebut dikarenakan satu kd_motor

bisa mempunyai banyak warna dan setiap warna mempunyai stok

tersendiri. Jika tabel motor mengalami bentuk anomali seperti ini maka

tabel motor harus dipecah menjadi dua tabel, yaitu tabel spek_motor

Page 77: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

55

yaitu tabel yang menyimpan data spesifikasi motor dan tabel real_motor

yang menyimpan data warna dan stok motor berdasarkan warna motor.

Berikut adalah struktur fisik kedua tabel :

1. Tabel spek_motor

Field Name Data Type Length Descriptionkd_spek_motor varchar 20 Kode spesifikasi motor (primary key)kd_kat varchar 20 Kode kategori motor (foreign key)nm_motor varchar 40 Nama motorthn_prod char 6 Tahun produksi motorP*l*t varchar 40 Ukuran panjang x lebar x tinggi motor satuan mmberat varchar 40 Berat kosong motor dalam satuan kgjarak_roda varchar 40 Jarak sumbu roda dalam satuan mmban_depan varchar 40 Ukuran ban depanban_blkng varchar 40 Ukuran ban belakangsus_depan varchar 40 Spesifikasi suspensi depansus_blkng varchar 50 Spesifikasi suspensi belakangrem_depan varchar 50 Spesifikasi rem depanrem_blkng varchar 40 Spesifikasi rem belakangrangka varchar 40 Tipe rangka motorkap_bb varchar 40 Kapasitas tangki bahan bakar dalam satuan litersistem_bb varchar 40 Sistem bahan bakarmesin varchar 40 Spesifikasi tipe mesinvolum varchar 40 Volume langkah dalam satuan ccdaya varchar 40 Daya maksimum motorpelumas varchar 40 Kapaistas minyak pelumas mesin dalam satuan literkopling varchar 50 Spesifikasi koplingtrans_gigi varchar 40 Transmisi Gigipola_gigi varchar 40 Pola pengoperan gigistarter varchar 40 Spesifikasi starteraki varchar 40 Spesifikasi varcharbusi varchar 40 Spesifikasi busipengapian varchar 40 Sistem pengapianvelg varchar 50 Tipe velg motorgaransi varchar 40 Lama garansi mesin motor Hondaharga int 10 Harga satuan motorpot_harga int 6 Potongan harga untuk harga satuan motor

Tabel 3.7 Tabel Spek_Motor Hasil Tahap Normalisasi

Page 78: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

56

2. Tabel real_motor

Field Name Data Type Length Descriptionkd_motor varchar 20 Kode Motor untuk setiap warna dan stok

(primary key)

kd_spek_motor varchar 20 Kode spesifikasi motor (foreign key)warna varchar 40 Warna motorstok int 4 Stok motor

Tabel 3.8 Tabel Real_Motor Hasil Tahap Normalisasi

2. Tabel kategori

Setelah melakukan pengisian contoh data pada tabel kategori, juga

terlihat bahwa terdapat anomali yaitu nilai yang berulang untuk satu

atribut kunci yang sama. Ini berarti bahwa tabel kategori belum dalam

bentuk normal. Hal tersebut dikarenakan satu kd_kat bisa mempunyai

banyak fitur utama. Untuk mengatasi anomali ini, maka tabel kategori

harus dipecah menjadi dua tabel, yaitu tabel kategori dan tabel fitur.

Berikut adalah struktur fisik kedua tabel :

1. Tabel kategori

Field Name Data Type Length Descriptionkd_kat varchar 20 Kode kategori (primary key)kategori varchar 40 Nama kategori motorInfo varchar 300 Info umum kategori motorfitur varchar 500 fitur utama tiap tipe motor

Tabel 3.9 Tabel Kategori Setelah Tahap Normalisasi

2. Tabel fitur

Field Name Data Type Length Descriptionkd_fitur varchar 20 Kode fitur (primary key)kd_kat varchar 20 Kode kategori (foreign key)fitur varchar 200 fitur utama tiap tipe motor

Tabel 3.10 Tabel Fitur Hasil Tahap Normalisasi

Page 79: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

57

3. Tabel tipe_baru

Setelah melakukan pengisian contoh data pada tabel tipe_baru, terlihat

bahwa tidak terdapat nilai yang berulang dalam satu kolom, semua

atribut bukan kunci bergantung penuh pada atribut kunci dan tidak

terdapat atribut bukan kunci yang bergantung pada atribut bukan kunci.

Ini berarti bahwa tabel tipe_baru sudah dalam bentuk normal.

4. Tabel pemesan

Setelah melakukan pengisian contoh data pada tabel pemesan, terlihat

bahwa tidak terdapat nilai yang berulang dalam satu kolom, semua

atribut bukan kunci bergantung penuh pada atribut kunci dan tidak

terdapat atribut bukan kunci yang bergantung pada atribut bukan kunci.

Ini berarti bahwa tabel pemesan sudah dalam bentuk normal.

5. Tabel pesan

Setelah melakukan pengisian contoh data pada tabel pesan, terlihat

bahwa tidak terdapat nilai yang berulang dalam satu kolom, semua

atribut bukan kunci bergantung penuh pada atribut kunci dan tidak

terdapat atribut bukan kunci yang bergantung pada atribut bukan kunci.

Ini berarti bahwa tabel pesan sudah dalam bentuk normal.

6. Tabel bayar_kirim

Setelah melakukan pengisian contoh data pada tabel bayar_kirim,

terlihat tidak terdapat nilai yang berulang dalam satu kolom, semua

atribut bukan kunci bergantung penuh pada atribut kunci dan tidak

Page 80: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

58

terdapat atribut bukan kunci yang bergantung pada atribut bukan kunci.

Ini berarti bahwa tabel bayar_kirim sudah dalam bentuk normal.

Selain tabel-tabel yang berelasi, terdapat juga beberapa tabel tambahan

yang tidak saling berelasi yaitu tabel pemakai untuk menyimpan data login

seorang admin, tabel berita untuk menyimpan data berita, tabel buku_tamu untuk

menyimpan data buku tamu dan tabel rekening untuk menyimpan informasi

rekening tempat pembayaran motor. Sehingga logical database design setelah

proses normalisasi terlihat pada gambar 3.12 berikut ini :

Gambar 3.12 Relationship Database setelah tahap Normalisasi

Page 81: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

59

III.3.2 Perancangan Dialog (User Interfaces)

Dengan subsistem dialog yang baik dan terstruktur, user yang mempunyai

tingkat pengetahuan minim mengenai komputer tetap bisa menggunakan sistem

informasi e-Commerce ini. Perancangan dialog yang akan dibuat berupa menu-

menu, form-form dan window untuk pesan-pesan. Berikut ini adalah rancangan

menu-menu dan halaman-halaman yang akan ada dalam sistem.

III.3.2.1 Perancangan Menu

INDEX

ADMIN PENGU NJU NG

Gambar 3.13 Struktur Rancangan Menu Index

Page 82: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

60

ADMIN

LOGIN

UPDATESPEKMOTOR

UPDATEDATA

KATEGORI

UPDATEDAFTA RTIPE BARU

UPDATEWARNASTOK

UPDATEFITUR

LIHATBUKUTAM U

UPDTEBERITAASTRA

EDITDATAMOTOR

INPUTDATAMOTOR

HAPUSDATAMOTOR

INPUT DATAKATEGORI

INP UTDAFTAR

EDIT DATAKATEGORI

HAPUSDAFTAR

INPUTWARNA

INPUTFITUR

EDITWARNA

EDITFITUR

HAP USWARNA

HAP USFITUR

HAPUSDATABUKUTAM U

INP UTDATABERITA

EDITDATABERITA

HAP USDATA

KATEGORIEDIT

DAFTA R

STOK STOK STOK HAPU S DATABE RITA

EDITDATA

REKENING

UPDATEDATALOGIN

INP UTDATALOGIN

EDITDATALOGIN

HAPUSDATALOGIN

Gambar 3.14 Struktur Rancangan Menu Admin Login Sebagai Admin Web

Page 83: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

61

ADM IN

LOGIN

UPDATEDATAORDER

LIHATDATABAY AR

LIHATDATAKIRIM

DETAIL ORDERHAPUSDATABAYAR

EDITDATAKIRIM

UBAHSTATUSORDER

Gambar 3.15 Struktur Rancangan Menu Admin Login Kepala Divisi Penjualan

PENGUNJUNG

HOME LIHATTIPE

TERBARU

LIHATKATEGORIMOTOR

LIHATBE RITAASTRA

LIHATBUKUTAMU

LIHATKONTAKASTRA

LIHATSTATUSORDE R PILIH

MOTOR DETAILMOTOR

ISI BUKUTAMU

BELIMOTOR

INP UTIDENTITAS

INFORMASIORDER

Gambar 3.16 Struktur Rancangan Menu Pengunjung

Page 84: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

62

III.3.2.1 Perancangan Halaman Web

1. Rancangan halaman index (awal)

Halaman ini adalah halaman awal yang ditampilkan saat user membuka

alamat web ASTRA MOTOR yang dibangun. Rancangan halaman index

sebagai berikut :

Gambar 3.17 Rancangan Halaman Index

Menu “Admin area” bertipe “hiden” dan hanya diketahui oleh admin saja,

sedangkan menu “welcome” disediakan untuk pengunjung.

2. Rancangan halaman pengunjungJika menu “welcome” di-klik, maka halaman yang akan tampil adalah

rancangan halaman “Depan”.

Ø Halaman “HOME”

Halaman ini menampilkan fasilitas untuk pengecekan status order,

potongan berita-berita terbaru tentang ASTRA MOTOR dan gambar-

gambar produk motor Honda yang baru.

Page 85: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

63

Gambar 3.18 Rancangan Halaman Home

Ø Halaman Semua Kategori

Halaman ini menampilkan semua kategori motor Honda, pengunjung

bisa meng-klik nama kategori untuk melihat motor Honda apa saja

yang termasuk dalam kategori tersebut. Rancangan tampilan halaman

untuk semua kategori adalah :

Page 86: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

64

Tampilan yang dinamis,trendy dan elegan, hadirpada anda motor Honda SUPRA

Tampilan yang dinamis,trendy dan elegan, hadir pada anda motor Honda SUPRA X

Revo you’re style…

Matic Vario..skuter matic khusus bagi andapenggemar matic

MEGA PRO kini hadir dengan teknologi terbaru dari Honda..lebih keren

Gambar 3.19 Rancangan Halaman Semua Kategori

Ø Halaman Detail Kategori

Halaman ini akan tampil apabila pengunjung memilih salah satu

kategori pada halaman “All Type”. Halaman ini menampilkan fitur

utama dan pilihan motor untuk kategori yang dipilih. Rancangan

tampilan halaman adalah sebagai berikut :

Page 87: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

65

keterangan singkat tentang fitur utama

keterangan singkat tentang fitur utama

keterangan singkat tentang fitur utama

keterangancara

berbelanjaataumelakukanpemesananon line motorHonda

Gambar 3.20 Rancangan Halaman Detail Kategori

Ø Halaman Detail Motor

Halaman ini menampilkan daftar spesifikasi dari motor yang dipilih

pada halaman detail kategori sebelumnya. Rancangan tampilan

halaman detail motor adalah sebagi berikut :

Page 88: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

66

15450000

keterangan caraberbelanja ataumelakukanpemesanan online motorHonda

spesifikasi motor

Gambar 3.21 Rancangan Halaman Detail Motor

Ø Halaman data motor yang dipesan dan form untuk input data pemesan

Jika pengunjung memilih menu “beli sekarang” pada halaman detail

motor, maka pengunjung akan dibawa ke halaman ini. Halaman ini

menampilkan data motor yang dipilih sebelumnya dan sekaligus juga

Page 89: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

67

menampilkan form untuk penginputan data-data pemesan. Rancangan

tampilannya adalah sebagi berikut :

Supra X 125R Merah 12500000

12500000

300000

12200000

Gambar 3.22 Rancangan Halaman Pesanan

Ø Halaman Informasi Order

Jika konsumen meng-klik tombol “simpan” pada halaman Pesanan,

maka halaman yang akan ditampilkan adalah halaman yang

menyajikan informasi order yang telah dilakukan sebelumnya. Berikut

adalah rancangan tampilannya :

Page 90: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

68

Gambar 3.23 Rancangan Halaman Informasi Order

Ø Halaman Lihat Status Pemesanan

Konsumen akan dibawa kehalaman ini apabila konsumen mengisikan

alamat email dan sandi dengan benar pada form pengecekan status

Page 91: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

69

pemesanan yang ada pada halaman home. Rancangan tampilan

halaman lihat status pemesanan adalah sebagai berikut :

Gambar 3.24 Rancangan Halaman Informasi Order

3. Rancangan halaman untuk admin

Ø Halaman Input Login Admin

Halaman ini digunakan untuk menginputkan username dan password

agar seorang admin dapat melakukan proses pengupdetan data-data

yang ada pada database. Jika menu “admin area” pada halaman index

di-klik maka halaman ini akan tampil, rancangan tampilannya adalah :

Login AS

Gambar 3.25 Rancangan Halaman Input Login Admin

Page 92: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

70

Ø Halaman menu admin kepala divisi penjualan

Jika login yang dilakukan berjalan dengan sukses dan seorang admin

login sebagai ”Kepala Divisi Penjualan”, maka admin akan dibawa

kehalaman menu admin seperti berikut :

UPDATE DATA ORDERLIHAT DATA PEMBAYARANLIHAT DATA PENGIRIMAN

Gambar 3.26 Rancangan Halaman Menu Admin Login Kepala Divisi

Penjualan

Ø Halaman Daftar Order Status Pesan

Jika admin memilih menu ”update data order”, maka halaman yang

muncul adalah halaman yang menyajikan daftar order yang statusnya

masih proses pesan (status default dari pemesanan). Admin bisa

memilih menu ”detail” untuk melihat detail order dan menu hapus

Page 93: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

71

untuk menghapus data order. Rancangan tampilannya adalah sebagai

berikut :

nama admin

UPDATE DAT AORDE RLIHAT DATAPEMBAYARANLIHAT DATAPENGIRIM AN

001 01-02-07

meli sapen,jogja

Gambar 3.27 Rancangan Halaman Daftar Order Status Pesan

Ø Halaman Daftar Order Status Bayar

Jika admin memilih menu ”Lihat data pembayaran”, maka halaman

yang muncul adalah halaman yang menyajikan daftar order yang

statusnya ”bayar”. Admin bisa memilih menu ”detail” untuk melihat

detail order dan menu hapus untuk menghapus data order status bayar.

Rancangan tampilannya adalah sebagai berikut :

Page 94: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

72

nama admin

UPDATE DATAORDE RLIHAT DATAPEMBAYARANLIHAT DATAPENGIRIM AN

01-01-07

02-01-07

meli sapen,j ogja

Gambar 3.28 Rancangan Halaman Daftar Order Status Bayar

Ø Halaman Daftar Order Status Kirim

Jika admin memilih menu ”Lihat data pengiriman”, maka halaman

yang muncul adalah halaman yang menyajikan daftar order yang

statusnya ”kirim”. Admin bisa memilih menu ”detail” untuk melihat

detail order dan menu edit untuk mengedit tgl kirim, apabila tgl kirim

berbeda dengan tgl bayar. Rancangan tampilannya adalah sebagai

berikut :

Page 95: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

73

nama admin

01-01-07

02-01-07

03-01-07

meli sapen,jogja

edit

edit

Gambar 3.29 Rancangan Halaman Daftar Order Status Kirim

Ø Halaman Detail Order

Halaman detail order adalah halaman yang menampilkan semua data

dari pemesan dan data motor apa yang dipesan. Pada halaman ini juga

seorang admin dapat merubah status order. Rancangan tampilannya

adalah sebagai berikut :

nama admin

bayar

Gambar 3.30 Rancangan Halaman Detail Data Order

Page 96: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

74

Ø Halaman menu admin untuk web admin

Jika login yang dilakukan pada halaman form login sukses dan admin

memilih login sebagai ”admin web” maka rancangan halaman menu

admin yang tampil adalah sebagai berikut :

Gambar 3.31 Rancangan Halaman Menu Admin Login Admin Web

Ø Halaman Input Data Kategori Motor

Halaman ini digunakan untuk menambahkan kategori baru kedalam

tabel kategori. Seorang admin akan menjumpai halaman ini apabila

memilih menu ”Update Kategori”, pada halaman Update Kategori

admin memilih menu ”tambah kategori baru”. Rancangan tampilannya

adalah sebagai berikut :

Page 97: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

75

nama admin

update spekmotorupdatewarna&stokmotorupdatekategoriupdate fituruta maupdate dataloginupdate datarekening

Gambar 3.32 Rancangan Halaman Input Data Kategori Baru

Ø Halaman Input Spesifikasi Motor

Halaman ini digunakan untuk menambahkan satu spesifikasi motor

kedalam tabel motor. Seorang admin akan menjumpai halaman ini

apabila memilih menu ”Update Spesifikasi Motor”, pada halaman

Update Spesifikasi Motor admin memilih menu ”tambah motor baru”.

Rancangan tampilannya adalah sebagai berikut :

Page 98: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

76

nama admin

update spekmotorupdatewarna&stokmotorupdatekategoriupdate fituruta maupdate dataloginupdate datarekening

Gambar 3.33 Rancangan Halaman Input Data Motor Baru

Ø Halaman Input Data Warna dan Stok Motor

Setiap satu spesifikasi motor pasti mempunyai paling sedikit satu

warna dan mempunyai stok berdasarkan warna tersebut. Seorang

Page 99: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

77

admin dapat menginputkan data warna dan stok untuk setiap

spesifikasi motor pada halaman ini. Rancangan tampilannya adalah

sebagai berikut :

nama admin

update spekmotorupdatewarna&stokmotorupdatekategoriupdate fituruta maupdate dataloginupdate datarekening

Gambar 3.34 Rancangan Halaman Input Data Motor Baru

Ø Halaman Input Data Kategori ke dalam Daftar Kategori Terbaru

Rancangan tampilan untuk halaman ini adalah sebagai berikut :

nama admin

update spekmotor updatewarna&stokmotor updatekategoriupdate fituruta ma updatedata loginupdate datarekening

cw_006

vario info umum

Gambar 3.35 Rancangan Halaman Daftar Tipe Motor Terbaru

Page 100: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

78

BAB IV

IMPLEMENTASI SISTEM

Dalam Bab ini akan dibahas mengenai implementasi sistem e-Commerce

motor Honda berdasarkan pada analisa dan perancangan sistem yang telah

dilakukan pada Bab IV sebelumnya. Beberapa Perangkat lunak yang digunakan

untuk pembuatan sistem ini antara lain :

1. Microsoft Windows Xp, sebagai sistem operasi.

2. JDK 1.6.0, sebagai JVM (Java Virtual Machine) yang berfungsi

untuk menterjemahkan program java supaya dapat dimengerti oleh

komputer.

3. Apache Tomcat 5.0, sebagai web application container.

4. MySQL 5, sebagai database sistem.

5. Driver JDBC (Java Database Connectivity) untuk MySQL, sebagai

API (Application Programming Interface) Java yang ditujukan

untuk menangani koneksi ke database MySQL.

6. Macromedia Dreamweaver MX 2004 sebagai editor dalam

pembuatan file-file JSP untuk sistem e-Commerce motor Honda.

7. Adobe Photoshop 7 untuk pembuatan dan pengeditan file-file

gambar yang digunakan dalam disain user interfaces sistem.

IV.1 Instalasi Perangkat Lunak

Semua perangkat lunak yang telah dituliskan sebelumnya harus di instal

terlebih dahulu untuk dapat digunakan dalam pembuatan sistem. Yang pertama

kali di instal adalah sistem operasi komputer yaitu Microsoft Windows Xp. Setelah

Page 101: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

79

penginstalan Windows Xp selesai, maka komputer telah dapat digunakan untuk

menginstal perangkat lunak pendukung lainnya. Urutan penginstalan perangkat

lunak yang digunakan adalah sebagai berikut :

1. Instal perangkat lunak JDK 1.6.0 pada drive C.

Setelah JDK 1.6.0 terinstal, selanjutnya perlu dilakukan pen-setting-an

nilai path yang ada pada environment variable for system. Yang

ditambahkan pada variabel path adalah nilai : c:jdk1.6.0\bin\; . Folder

c:jdk1.6.0\bin\ adalah tempat file Java dan Javac berada. Untuk

menambahkan nilai variabel path pada sistem operasi Windows Xp dapat

dilakukan langkah-langkah berikut :

ü Klik kanan pada My Computer

ü Pilih Properties, maka akan tampil window “system

properties”.

Gambar 4.1 Window “System Properties”

ü Pilih advanced, kemudian pilih tombol environtment variable,

maka akan tampil window “environtment variable”, kemudian

di pilih variabel path untuk ditambahkan nilainya dengan

mengklik tombol “edit”. Selanjutnya, menambahkan nilai

Page 102: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

80

c:jdk1.6.0\bin\; sesudah kalimat \System32\Wbem;. hasilnya

terlihat seperti gambar 4.2 berikut ini :

Gambar 4.2 Window “Edit System Variable”

2. Instal tomcat 5 pada drive C. Ada beberapa konfigurasi yang dilakukan

setelah penginstalan tomcat, yaitu :

a) Menambahkan system variable Java_Home pada komputer supaya

tomcat mengetahui lokasi tool Java.

Penambahan system variable pada sistem operasi Windows Xp bisa

dilakukan dengan cara sebagai berikut :

ü Klik kanan pada My Computer

ü Pilih Properties, maka akan tampil window “system

properties” seperti pada gambar gambar 4.1.

ü Pilih advanced, kemudian pilih tombol environtment variable,

maka akan tampil window “environtment variable”, kemudian

klik new untuk membuat variable “Java_Home” dengan value

“c:\jdk1.6.0”. Folder c:\jdk1.6.0\bin adalah lokasi file Java dan

javac berada. Hasilnya seperti yang ditampilkan pada gambar

4.2, selanjutnya klik ok untuk menyimpan setting yang telah

dilakukan.

Page 103: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

81

Gambar 4.3 Window “Environtment Variable”

b) Menghidupkan kemampuan servlet loading.

Pada saat membuat suatu dokumen JSP, akan sering dilakukan

perubahan pada dokumen tersebut. Dengan menghidupkan fitur

reloadable maka perubahan yang dilakukan pada dokumen JSP

akan dapat diproses ketika dilakukan pemanggilan pada browser.

Cara untuk menghidupkan fitur ini adalah sebagai berikut :

ü Masuk ke direktori c:\tomcat\conf\. Buka file “server.xml”

dengan menggunakan editor text notepad.

ü Tambahkan perintah berikut :

<DefaultContext Reloadable="true"/>

diatas baris perintah :

<!-- Tomcat Root Context -->.

c) Menentukan CLASSPATH

Agar nantinya tomcat dapat berhubungan dengan database Mysql,

maka harus ditambahkan path untuk driver MySql pada berkas

“setclasspath.bat” yang terletak pada direktori c:\tomcat\bin. Edit

Page 104: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

82

berkas tersebut dengan menggunakan editor text notepad,

tambahkan perintah berikut :

c:\drivermysql\;c:\oreilly\

dibelakang baris :

set CLASSPATH=%JAVA_HOME%\lib\tools.jar;

Direktori “c:\driverm ysql” digunakan untuk meletakkan driver

MySql dan direktori c:\oreilly\ digunakan untuk menaruh pustaka

untuk upload gambar.

3. Instal MySQL 5 pada direktori c:\program files\.

4. Instal Driver MySQL pada drive C.

5. Instal Macromedia Dreamweaver MX 2004 pada direktori c:\program

files\.

6. Instal Adobe Photoshop 7 pada direktori c:\program files\.

Setelah semua perangkat lunak yang dibutuhkan terinstal, maka

pembuatan sistem e-Commerce Motor Honda dapat dilakukan. Hal pertama yang

dilakukan adalah membuat folder ahm_yogya yang akan digunakan sebagai

tempat dokumen-dokumen root (file-file JSP pembangun sistem). Folder ini

diletakkan pada direktori c:\tomcat\webapps\root\. Dan pembuatan folder img

yang diletakkan didalam folder ahm_yogya. Folder img digunakan sebagi tempat

file-file gambar yang dibutuhkan oleh sistem.

Page 105: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

83

IV.2 Implementasi Database Sistem e-Commerce Motor Honda

Database yang dibuat adalah database dengan nama Honda. Pada

database Honda inilah akan disimpan tabel-tabel yang telah dirancang pada Bab

IV sebelumnya. Pembuatan database Honda dilakukan dengan menjalankan mysql

comand line client dan memasukkan password root. Dari prompt mysql

diketikkan perintah berikut :

mysql>Create database Honda;

mysql>use Honda;

Ø Pembuatan tabel-tabel

1. Tabel pemakai

CREATE TABLE `pemakai` (`id_admin` bigint(15) NOT NULL auto_increment,`pemakai` varchar(30) NOT NULL,`sandi` varchar(30) NOT NULL,`level` varchar(40) NOT NULL,PRIMARY KEY (`id_admin`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Tabel Kategori

CREATE TABLE `kategori` (`kd_kat` varchar(20) NOT NULL,`kategori` varchar(30) NOT NULL,`info` varchar(500) default NULL,PRIMARY KEY (`kd_kat`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

3. Tabel Fitur

DROP TABLE IF EXISTS `fitur`;CREATE TABLE `fitur` (

`kd_kat` varchar(20) NOT NULL,`kd_fitur` varchar(20) NOT NULL,`fitur` varchar(250) NOT NULL,PRIMARY KEY (`kd_fitur`),KEY `kd_kat` (`kd_kat`),CONSTRAINT `fitur_ibfk_1` FOREIGN KEY (`kd_kat`) REFERENCES

`kategori` (`kd_kat`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Page 106: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

84

4. Tabel Spek_Motor

CREATE TABLE `spek_motor` (`kd_kat` varchar(20) NOT NULL,`kd_spek_motor` varchar(20) NOT NULL,`nm_motor` varchar(40) NOT NULL,`tahun` varchar(6) NOT NULL,`plt` varchar(40) NOT NULL,`jarak_roda` varchar(40) NOT NULL,`berat` varchar(40) NOT NULL,`rangka` varchar(40) NOT NULL,`sus_dpn` varchar(50) NOT NULL,`sus_blkng` varchar(50) NOT NULL,`ban_dpn` varchar(40) NOT NULL,`ban_blkng` varchar(40) NOT NULL,`rem_dpn` varchar(40) NOT NULL,`rem_blkng` varchar(40) NOT NULL,`kap_bb` varchar(40) NOT NULL,`sistem_bb` varchar(40) NOT NULL,`sistem_pengapian` varchar(50) NOT NULL,`tipe_mesin` varchar(50) NOT NULL,`volume` varchar(40) NOT NULL,`daya` varchar(40) NOT NULL,`torsi` varchar(40) NOT NULL,`pelumas` varchar(40) NOT NULL,`kopling` varchar(50) NOT NULL,`gigi_trans` varchar(50) NOT NULL,`pola_gigi` varchar(40) NOT NULL,`starter` varchar(40) NOT NULL,`aki` varchar(40) NOT NULL,`busi` varchar(40) NOT NULL,`garansi` varchar(40) default NULL,`harga` int(10) NOT NULL,`pot_harga` int(8) NOT NULL default '0',`velg` varchar(40) NOT NULL,PRIMARY KEY (`kd_spek_motor`),KEY `kd_kat` (`kd_kat`),CONSTRAINT `spek_motor_ibfk_1` FOREIGN KEY

(`kd_kat`) REFERENCES `kategori` (`kd_kat`) ONDELETE CASCADE ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=latin1;

5. Tabel Real_Motor

CREATE TABLE `real_motor` (`kd_spek_motor` varchar(20) NOT NULL,`kd_motor` varchar(20) NOT NULL,`warna` varchar(30) NOT NULL,`stok` int(3) NOT NULL,PRIMARY KEY (`kd_motor`),KEY `kd_spek_motor` (`kd_spek_motor`),CONSTRAINT `real_motor_ibfk_1` FOREIGN KEY (`kd_spek_motor`)

REFERENCES `spek_motor` (`kd_spek_motor`) ON DELETE CASCADE ONUPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Page 107: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

85

6. Tabel Tipe_Baru

CREATE TABLE `tipe_baru` (`no` int(5) NOT NULL auto_increment,`kd_kat` varchar(20) NOT NULL,PRIMARY KEY (`no`),KEY `kd_kat` (`kd_kat`),CONSTRAINT `tipe_baru_ibfk_1` FOREIGN KEY

(`kd_kat`) REFERENCES `kategori` (`kd_kat`) ONDELETE CASCADE ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=latin1;

7. Tabel Pesan

CREATE TABLE `pesan` (`no_pemesan` bigint(15) NOT NULL,`kd_motor` varchar(20) NOT NULL,`no_pesan` bigint(15) NOT NULL auto_increment,`tgl_pesan` date NOT NULL,`harga_pesan` int(10) NOT NULL,`pot_hargapesan` int(8) default NULL,`status` varchar(15) default NULL,PRIMARY KEY (`no_pesan`),KEY `no_pemesan` (`no_pemesan`),KEY `kd_motor` (`kd_motor`),CONSTRAINT `pesan_ibfk_1` FOREIGN KEY

(`no_pemesan`) REFERENCES `pemesan` (`no_pemesan`),CONSTRAINT `pesan_ibfk_2` FOREIGN KEY (`kd_motor`)

REFERENCES `real_motor` (`kd_motor`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

8. Tabel Pemesan

CREATE TABLE `pemesan` (`no_pemesan` bigint(15) NOT NULL auto_increment,`nama` varchar(30) NOT NULL,`alamat` varchar(50) NOT NULL,`kd_pos` int(8) NOT NULL,`kota` varchar(30) NOT NULL,`propinsi` varchar(40) NOT NULL,`no_telp` varchar(20) default NULL,`no_hp` varchar(20) default NULL,`email` varchar(40) default NULL,`rek` varchar(40) default NULL,`bank` varchar(40) default NULL,`sandi` varchar(20) NOT NULL,`ktp` varchar(30) NOT NULL,PRIMARY KEY (`no_pemesan`),UNIQUE KEY `sandi` (`sandi`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

9. Tabel Bayar_Kirim

Page 108: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

86

CREATE TABLE `bayar_kirim` (`no_pesan` bigint(15) NOT NULL,`no_bayar_kirim` bigint(15) NOT NULL,`tgl_bayar` date NOT NULL,`tgl_kirim` date NOT NULL,PRIMARY KEY (`no_bayar_kirim`),KEY `no_pesan` (`no_pesan`),CONSTRAINT `bayar_kirim_ibfk_1` FOREIGN KEY

(`no_pesan`) REFERENCES `pesan` (`no_pesan`) ONDELETE CASCADE ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=latin1;

10. Tabel Berita

CREATE TABLE `berita` (`no` bigint(15) NOT NULL auto_increment,`tanggal` date NOT NULL default '0000-00-00',`judul` varchar(200) NOT NULL default '',`isi` varchar(300) NOT NULL default 'none',`ket` varchar(10) NOT NULL default 'baru',PRIMARY KEY (`no`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

11. Tabel buku_tamu

CREATE TABLE `buku_tamu` (`no` bigint(15) NOT NULL auto_increment,`nama` varchar(30) NOT NULL default '',`gender` varchar(15) NOT NULL default '',`email` varchar(100) NOT NULL default '',`komentar` text NOT NULL,`tgl` date default NULL,PRIMARY KEY (`no`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

12. Tabel Rekening

CREATE TABLE `rekening` (`no` int(5) NOT NULL auto_increment,`nama` varchar(40) NOT NULL,`rekening` varchar(30) NOT NULL,`bank` varchar(20) NOT NULL,PRIMARY KEY (`no`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Ø Penginputan data contoh ke dalam tabel

1. Penginputan data contoh ke dalam tabel pemakai :

Page 109: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

87

INSERT INTO `pemakai` VALUES (1,'melind','meli','Web Admin');

2. Penginputan data contoh ke dalam tabel kategori :

INSERT INTO `kategori` VALUES('HON_FITS','FIT S','Gaya yang sangat dinamis,ramping dansangat elegan'),('HON_FITX','FIT X','new comer'),('HON_MG','MEGA PRO','Mega Pro'),('HON_SPX125R','SUPRA X 125R',''),('HON_TG','TIGER',''),('HON_VR','MATIC VARIO','Tampil sporty dan powerful. InilahSkuter matik yang sesungguhnya!');

3. Penginputan data contoh ke dalam tabel fitur :

INSERT INTO `fitur` VALUES ('HON_SPX125R','spx_001','spidometermodern dan sporty. Dengan kaca cembung,angka-angka jadi lebihjelas terbaca.')

4. Penginputan data contoh ke dalam tabel spek_motor :

INSERT INTO `spek_motor` VALUES ('HON_SPX125R','SPX_125R','Supra X 125R(PGM F1)','2006','1.881x706x1.081,5mm','1.239 mm','105,6 kg','tulang punggung','Telekospik','Lengan ayun pegas ganda','70/90-17 M/C 38P','80/90-17 M/C 44P','cakram hidrolik piston ganda','tromol','3,7 liter', 'Fuel Injection(PGM-F1)','fulltransistorized','4 langkah,SOHC,pendingin udara','124,8cc','9.18 PS / 7.500 rpm','0.99 PS / 5000 rpm','0.7liter / periodik','ganda,otomatis,sentrifugal,tipebasah','4 kecepatan rotari/bertautan tetap','N-1-2-3-4-N','Pedal dan elektrik','MF 12V - 3.5 Ah.','NGK CPR6EA-9','3 tahun',15000000,0);

5. Penginputan data contoh ke dalam tabel real_motor:

INSERT INTO `real_motor`VALUES('SPX_125R','SPX125R_OP','Oranye-Putih',50);

6. Penginputan data contoh ke dalam tabel tipe_baru :

INSERT INTO `tipe_baru` VALUES (1,'HON_FITX');

Page 110: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

88

7. Penginputan data contoh ke dalam tabel berita :

INSERT INTO `berita` VALUES (1,'2007-05-01','DISKONTERBESAR SEMUA PRODUK','kami memberikan diskon terbesarpada Anda di tahun ini menyambut anniversary Astra MotorHonda cabang Yogyakarta. Dapatkan potongan harga hingga1jt rupiah dan subsidi kredit hingga 1,5jt. Janganlewatkan kesempatan ini','baru');

8. Penginputan data contoh ke dalam tabel rekening

INSERT INTO `rekening` VALUES (1,'Anggie Dwitanirmala','0029-01-055336-501','BRI Cik Ditiro Yogya');

IV.3 Mengakses Database Via JSP

Setelah melakukan implementasi database Honda pada MySql, selanjutnya

adalah pembuatan dokumen JSP yang dapat memudahkan user dalam melakukan

perubahan terhadap nama server maupun pemakai yang boleh mengakses

database Honda. Dokumen tersebut disimpan dengan nama server_db.jsp, listing

programnya sebagai berikut :

<%!String server = "localhost";String database = "jdbc:mysql://localhost/Honda";

String user = "root"; String pass = "melinda";

public String empty(String emp) { String str = emp; if (str == null) str = "";

}%>

return(str);

Listing program server_db.jsp sekaligus juga digunakan untuk

mendefinisikan sebuah fungsi bernama empty() yang berfungsi untuk mengubah

nilai null menjadi string kosong, fungsi ini akan banyak digunakan pada

dokumen-dokumen JSP yang dibangun. Adapun listing program untuk koneksi ke

Page 111: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

89

database Honda disisipkan ke dokumen-dokumen JSP yang memerlukan koneksi

ke database Honda. Berikut adalah contoh listing program JSP untuk melakukan

koneksi ke database Honda :

Page 112: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

90

<%@ page language="java" import="java.sql.*" %><%@ include file = "server_db.jsp" %><%

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan pada: " + e);salah = true;

if (!salah) {

Connection connect = null; try {

}connect = DriverManager.getConnection(database, user, pass);

catch (Exception e) {

}

out.println("Kesalahan pada: " + e);salah = true;

if (!salah){

ResultSet query = null; try {

Statement my = connect.createStatement();String query2 = "SELECT * FROM rekening";query = my.executeQuery(query2);

}catch (Exception e) {

salah = true; }

if (!salah) {

try {while (query.next())

{String nm = query.getString("nama"); Stringrekg = query.getString("rekening"); Stringbankk = query.getString("bank");

}}

%>No.Rek : <%=rekg%><br>A.n : <%=nm%> <br>Bank : <%=bankk%>

<% } }

catch (Exception e) {salah = true;

} }

if (salah) {

out.print( "Ada kesalahan dalam mengakses database");}%>

Page 113: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

91

Jika tidak terdapat kesalahan maka hasil yang akan ditampilkan adalah

isi dari tabel rekening yang ada pada database Honda. Jika terdapat kesalahan

dalam mengakses database Honda maka yang ditampilkan adalah pesan “ ada

kesalahan dalam mengakses database”.

IV.4 Implementasi Halaman Web e-Commerce Motor Honda

Sistem e-Commerce Motor Honda mempunyai halaman index yang akan

tampil apabila pada web address diketikkan alamat web e-Commerce motor

Honda. Tampilan halaman index.jsp adalah :

Gambar 4.3 Implementasi Halaman Index

Pada halaman index terdapat tombol bagi pengunjung dan menu “private

access” bagi seorang admin yang akan melakukan pengupdetan pada isi web.

Page 114: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

92

IV.4.1 Implementasi Halaman Web untuk Pengunjung

1. Halaman Home

Gambar 4.4 Implementasi Halaman Home

Halaman home adalah halaman awal yang akan dijumpai oleh pengunjung

apabila pada halaman index memilih tombol “Enter Now”. Halaman ini

berisi ucapan selamat datang kepada pengunjung. Halaman ini juga

menampilkan index berita terkini dan tipe-tipe motor yang terbaru.

Pengunjung yang sudah pernah melakukan pemesanan motor Honda dapat

melihat status pemesanannya dengan mengisi kolom email dan sandi yang

disediakan pada halaman home, apabila terjadi kesalahan dalam

pengecekan status pemesanan maka pesan kesalahan akan ditampilkan

Page 115: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

93

juga pada halaman home ini, yaitu tepat dibawah form pengecekan status

pemesanan.

Dibutuhkan dua dokumen JSP sebagai program untuk menangani form

pengecekan status pada halaman home, yaitu dokumen cek_status.jsp dan

lihat_status.jsp. Listing kedua dokumen tersebut adalah sebagai berikut :

<%@ page import="java.sql.*" %>

<%@ include file="server_db.jsp" %>

<%! public boolean cek(String mail, String sandi) {

if (mail == null || sandi == null) return(false);

if (mail.equals("") || mail.equals(""))return(false);

boolean salah = false; boolean sandi_benar = false;

try {Class.forName("org.gjt.mm.mysql.Driver");

} catch (Exception ex) { salah = true; }

if (!salah) { Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception ex) {

salah = true; }if (!salah) {

ResultSet query = null;try {

Statement my = connect.createStatement(); query = my.executeQuery("SELECT sandi FROM pemesan WHERE email = '" + mail + "'"); } catch (Exception ex) {

salah = true;

}if (!salah) {

String sand = "";try {

if (query.next())

}sand = query.getString("sandi");

Page 116: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

94

catch (Exception ex) {salah = true;

}

if (!salah) if (sandi.equals(sand)) sandi_benar = true;

} } }

}

%>

return(sandi_benar);

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.util.*" import="java.sql.*"errorPage="" %><%@ include file="cek_status.jsp" %><!--Kode-kode HTML--><%

String imel = empty(request.getParameter("mail"));String sandi = empty(request.getParameter("sandi"));

if (! cek(imel, sandi)) {

String mess = "data yang anda masukkan masih salah";response.sendRedirect("home.JSP?mess=" + mess +

"&mail=" + imel);

}else {

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;

}

if (!salah) {

Connection connect = null;try {

connect =DriverManager.getConnection(database, user, pass);

}catch (Exception e) {

out.println("Kesalahan pada: " + e);salah = true; }

Page 117: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

95

if (!salah) {ResultSet query = null;try {

Statement my =connect.createStatement();

query = my.executeQuery("SELECT pemesan.nama,pesan.status

FROM pemesan,pesan WHERE "+"pemesan.no_pemesan =

pesan.no_pemesan AND pemesan.sandi =\"" + sandi + "\"");}

catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;

}if (!salah) {

try {while (query.next()) {String nama =

query.getString("nama");String status =

query.getString("status");String dstatus ="";if(status.equals("pesan")){dstatus="masih proses pesan";}else if(status.equals("bayar")){dstatus="Motor telah dibayar";}elsedstatus="Motor telah dikirim";

%><table><tr><td>Nama Lengkap : <%=nama%></td></tr><tr><td>Status Pemesanan Anda :<%=dstatus%></td></tr></table><%

}}catch (Exception e) {

out.println("Kesalahan pada: " + e);salah = true;

} } } }}

%><!--Kode-kode HTML-->

Page 118: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

96

2. Halaman menu “New Release”

Gambar 4.5 Implementasi Halaman Menu “New Release” Halaman

ini menampilkan semua daftar tipe motor Honda yang terbaru.

Pengunjung dapat melihat lebih detail lagi tentang tipe motor yang terbaru

dengan meng-klik menu “lihat detail”.

Berikut adalah potongan script untuk menampilkan daftar tipe motor

terbaru :

Page 119: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

97

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%

boolean salah = false;

try {Class.forName("org.gjt.mm.mysql.Driver");

}catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }if (!salah) {Connection connect = null;

try { connect = DriverManager.getConnection(database,user, pass); }

catch (Exception e) {out.println("Kesalahan pada: " + e);

salah = true; }

if (!salah) {ResultSet query = null;try {Statement my = connect.createStatement();query = my.executeQuery("SELECT

kategori.*,spek_motor.*,tipe_baru.no,tipe_baru.kd_kat FROMkategori,spek_motor,tipe_baru " +

"WHERE kategori.kd_kat =tipe_baru.kd_kat AND kategori.kd_kat = motor.kd_kat ORDER BYtipe_baru.no");

}catch (Exception e) {

out.println("Kesalahan pada: " + e);salah = true;

}if (!salah) {

try {while (query.next()) {String kd_kat = query.getString("kd_kat");String kat = query.getString("kategori");String info =query.getString("info");String nama = query.getString("nm_motor");int harga =query.getInt("harga");

%><table width="500" style="border:#993300 1px solid "><tr><td width="200" height="69" class="tblRow1"><%

String berkasFoto =getServletContext().getRealPath("/")+

"/ahm_yogya/"+"/"+"/img/" + kd_kat.toLowerCase()+".jpg";

File berkas = new File(berkasFoto);if (berkas.exists())out.println("<IMG SRC = " +

erkasFoto + ">"); %><br>Harga (per unit) : <%=harga%></td><td width="250" height="69" class="tblRow2">TIPE MOTOR :

<%=kat%><br><%=info%><br><ahref='<%=response.encodeURL("lihat_det_kat.jsp?kate="+kat)%>'>lihat detail</a></td></tr></table><%

} }

Page 120: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

98

catch (Exception e){

out.println("Kesalahan pada: " + e);salah = true;

} } } }if (salah) {

}%>

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.jsp?mess=" + mess);

<!--Kode-kode HTML-->

3. Halaman menu “All Type”

Gambar 4.6 Implementasi Halaman Menu “All Type”

Page 121: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

99

Halaman ini menampilkan semua kategori motor Honda. Pengunjung

dapat melihat detail kategori dan pilihan motor apa saja yang termasuk

dalam kategori ini dengan meng-klik nama kategori motor Honda.

Berikut adalah potongan script untuk menampilkan semua kategori motor

Honda :

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%boolean salah = false; try {

Class.forName("org.gjt.mm.mysql.Driver"); }

catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;

}

if (!salah) {

Connection connect = null;try {connect = DriverManager.getConnection(database,

user, pass); }catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }

if (!salah) {ResultSet query = null;try {

Statement my = connect.createStatement();query = my.executeQuery("SELECT * FROM kategori order by kategori");

}catch (Exception e) {

out.println("Kesalahan pada: " + e);salah = true;

}

Page 122: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

100

if (!salah){try {while (query.next()) {String kd_kat = query.getString("kd_kat");String kat =query.getString("kategori");String info =query.getString("info");

%><tr><td width="20" valign="top"><img src="img/a3.gif"

width="25" height="25"></td><td width="150" class="tblRow1"><a href='<%=response.encodeURL("lihat_det_kat.jsp?kate="+kat)%>'><%=kat%></a><br></td><td width="360" class="tblRow2"><%=info%><br></td>

</tr><%

}}catch (Exception e){

out.println("Kesalahan pada: " + e);salah = true;

} } } }

if (salah) {

}%>

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.JSP?mess=" + mess);

<!--Kode-kode HTML-->

4. Halaman menu “Lihat Detail” Kategori Motor

Halaman ini menampilkan fitur utama yang dimiliki oleh tipe motor yang

dipilih. Juga menampilkan pilihan motor apa saja yang termasuk dalam

tipe motor/kategori yang dipilih.

Page 123: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

101

Gambar 4.7 Implementasi Halaman Menu “Lihat Detail” Kategori Motor

Berikut adalah potongan script untuk menampilkan detail kategori motor

Honda

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%String kat = empty(request.getParameter("kate")); if (kat == "") {

String mess = "Tidak ada nilai kategori yang diberikan";response.sendRedirect("mess.jsp?mess=" + mess); }

kat = kat.toUpperCase();

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true; }

Page 124: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

102

if (!salah){

Connection connect = null;try {

connect =DriverManager.getConnection(database, user, pass);

}catch (Exception e){

out.println("Kesalahan pada: " + e);salah = true;

}%><!--Kode-kode HTML--><%

if (!salah) {ResultSet query = null;try{Statement my = connect.createStatement();query = my.executeQuery ("SELECT kategori.*, fitur.* FROM kategori, fitur" +" WHERE kategori.kd_kat = fitur.kd_kat AND

kategori.kategori = \"" + kat + "\"");}catch (Exception e){out.println("Kesalahan ada pada : " + e);salah = true;

}if (!salah) {

try{

while (query.next()){String kode =query.getString("kd_kat");kat =query.getString("kategori");String kd_fitur =query.getString("kd_fitur");String fitur =query.getString("fitur");%>

<tr><td width="97" height="22" style="border: #993300 1pxsolid"><div align="center"><%String berkasFoto =getServletContext().getRealPath("/")+"/ahm_yogya/"+"/"+"/img/" + kd_fitur.toLowerCase() + ".jpg";

File berkas = new File(berkasFoto);if (berkas.exists())out.println("<img src = " + berkasFoto + " height=80width=80>");%></div></td><td width="10"></td>

<td width="295"><font face="verdana" size="-

2"><%=fitur%></font></div></td></tr>

<%} }

catch (Exception e) {out.println("Kesalahan pada : " + e);salah = true;

Page 125: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

103

} }

}%>

<!--Kode-kode HTML--><%

if (!salah) { ResultSet query = null;try{Statement my = connect.createStatement();query = my.executeQuery ("SELECT kategori.*, spek_motor.*, real_motor.* FROM

kategori, spek_motor, real_motor" +" WHERE kategori.kd_kat = motor.kd_kat ANDspek_motor.kd_spek_motor=real_motor.kd_spek_motor AND"+" kategori.kategori = \"" + kat + "\"");

}catch (Exception e){out.println("Kesalahan ada pada : " + e);salah = true;

}if (!salah) {

try{while (query.next())

{String nama =query.getString("nm_motor");

String kode_real =query.getString("kd_motor");String warna =query.getString("warna");int harga =query.getInt("harga");int stok = query.getInt("stok");

%><tr class="tblRow2"><td width="157" height="82" ><divalign="center"><br><%=nama%><br><%=warna%><br></div></td><td width="139" ><div align="left">Harga : Rp <%=harga%><br>Stok Tersedia : <%=stok%> unit<br><ahref='<%=response.encodeURL("lihat_det_mtr.jsp?kd="+kode_real)%>'>lihat detail</a></div></td></tr><%

}} catch (Exception e) {

out.println("Kesalahan pada : " + e);salah = true;}

} }

%></table>

<% }%><!--Kode-kode HTML-->

Page 126: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

104

5. Halaman menu “Lihat Detail” Motor Honda

Gambar 4.8 Implementasi Halaman Menu “Lihat Detail” Kategori Motor

Pada halaman ini pengunjung bisa memilih menu “Beli Sekarang” untuk

memesan motor yang sedang ditampilkan.

Berikut adalah potongan script untuk menampilkan detail motor Honda :

Page 127: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

105

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%String kode_real = empty(request.getParameter("kd"));

if (kode_real == "") {String mess = "Tidak ada kode real yang diberikan";response.sendRedirect("mess.jsp?mess=" + mess);

}

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;}

if (!salah) {

Connection connect = null;try {

pass);connect = DriverManager.getConnection(database, user,

}catch (Exception e){

out.println("Kesalahan pada: " + e);salah = true;

}

if (!salah) {ResultSet query = null;try{Statement my = connect.createStatement();query = my.executeQuery("SELECT real_motor.*,spek_motor.*,kategori.* FROMreal_motor,spek_motor,kategori" +" WHERE real_motor.kd_spek_motor = motor.kd_spek_motor ANDmotor.kd_kat = kategori.kd_kat AND"+" real_motor.kd_motor = \"" + kode_real + "\"");}catch (Exception e){out.println("Kesalahan ada pada : " + e);salah = true;

}if (!salah) { try

{while (query.next())

{kode_real =query.getString("kode");

Page 128: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

106

String warna = query.getString("warna");String nama =query.getString("nm_motor");String tahun =query.getString("tahun");String plt =query.getString("plt");String berat =query.getString("berat");String rangka =query.getString("rangka");String mesin =query.getString("tipe_mesin");String daya = query.getString("daya");String pelumas =query.getString("pelumas");String kp_bb =query.getString("kap_bb");String volum =query.getString("volume");String jarak_roda =query.getString("jarak_roda");String ban_dpn = query.getString("ban_dpn");String ban_blkng =query.getString("ban_blkng");String rem_dpn =query.getString("rem_dpn");String rem_blkng =query.getString("rem_blkng");String sus_dpn =query.getString("sus_dpn");String sus_blkng =query.getString("sus_blkng");String kopling = query.getString("kopling");String pola_gigi = query.getString("pola_gigi");String starter = query.getString("starter");String velg = query.getString("velg");String aki = query.getString("aki");String busi = query.getString("busi");String sis_api = query.getString("sistem_pengapian");String torsi = query.getString("torsi");String garansi = query.getString("garansi");int harga = query.getInt("harga");%><table width="200" height="200"> <tr>

<td>Harga/unit : <%=harga%></td></tr><tr>

<td height="128"><%String berkasFoto =getServletContext().getRealPath("/")+"/ahm_yogya/"+"/"+"/img/" +kode_real.toLowerCase() + ".jpg";

File berkas = newFile(berkasFoto);

if (berkas.exists())out.println("<img src = " + berkasFoto + " height=200width=250>");%></td></tr></table><p class="judul"><ahref='<%=response.encodeURL("pesanan.jsp?kd="+kode_real)%>'>Beli Sekarang</a></p><table width="509" align="center"style="border:#993300 1px solid "><tr><td width="180" class="tblRow1">Warna motor</td><td width="317" class="tblRow1"><%=warna%></td></tr><tr><td class="tblRow2">Tahun Produksi</td><td class="tblRow2"><%=tahun%></td></tr><tr><td class="tblRow1">Panjang*Lebar*Tinggi</td><td class="tblRow1"><%=plt%></td></tr><tr><td class="tblRow2">Berat Kosong</td><td class="tblRow2"><%=berat%></td></tr><tr><td class="tblRow1">jarak sumbu roda</td><td class="tblRow1"><%=jarak_roda%></td></tr>

Page 129: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

107

<tr><td class="tblRow2">ukuran ban depan</td><td class="tblRow2"><%=ban_dpn%></td></tr><tr><td class="tblRow1">ukuran ban belakang</td><td class="tblRow1"><%=ban_blkng%></td></tr><tr><td class="tblRow2">tipe suspensi depan</td><td class="tblRow2"><%=sus_dpn%></td></tr><tr><td class="tblRow1">tipe suspensi belakang</td><td class="tblRow1"><%=sus_blkng%></td></tr><tr><td class="tblRow2">rem depan</td><td class="tblRow2"><%=rem_dpn%></td></tr><tr><td class="tblRow1">rem belakang</td><td class="tblRow1"><%=rem_blkng%></td></tr><tr><td class="tblRow2">tipe rangka</td><td class="tblRow2"><%=rangka%></td></tr><tr><td class="tblRow1">kapasitas bahan bakar</td><td class="tblRow1"><%=kp_bb%></td></tr><tr><td class="tblRow2">tipe mesin</td><td class="tblRow2"><%=mesin%></td></tr><tr><td class="tblRow1">volume langkah</td><td class="tblRow1"><%=volum%></td></tr><tr><td class="tblRow2">daya maksimum</td><td class="tblRow2"><%=daya%></td></tr><tr><td class="tblRow1">torsi maksimum</td><td class="tblRow1"><%=torsi%></td></tr><tr><td class="tblRow2">kapasitas minyak pelumas

mesin</td><td class="tblRow2"><%=pelumas%></td></tr><tr><td class="tblRow1">kopling</td><td class="tblRow1"><%=kopling%></td></tr><tr><td class="tblRow2">pola pengoperan gigi</td><td class="tblRow2"><%=pola_gigi%></td></tr><tr><td class="tblRow1">Sistem pengapian</td><td class="tblRow1"><%=sis_api%></td></tr><tr><td class="tblRow2">starter</td><td class="tblRow2"><%=starter%></td></tr><tr><td class="tblRow1">Velg</td><td class="tblRow1"><%=velg%></td></tr><tr><td class="tblRow1">aki</td><td class="tblRow1"><%=aki%></td></tr><tr><td class="tblRow2">garansi</td><td class="tblRow2"><%=garansi%></td></tr>

<%} }

catch (Exception e) {out.println("Kesalahan pada : " + e);salah = true;

} } } }%><!--Kode-kode HTML-->

Page 130: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

108

6. Halaman data pesanan

Halaman ini akan ditampilkan apabila pengunjung melakukan pemesanan

motor dengan meng-klik menu “Beli Sekarang” pada halaman detail

motor. Pada halaman ini juga disediakan form untuk memasukkan data-

data pemesan.

Gambar 4.9 Implementasi Halaman Data Pesanan dan Form Input DataPemesan

Berikut adalah potongan script untuk menampilkan detail data pesanan

motor dan form input data pemesan :

Page 131: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

109

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%String kode = empty(request.getParameter("kd")); if (kode == "") {

String mess = "Tidak ada kode yang diberikan";response.sendRedirect("mess.jsp?mess=" + mess);

}

boolean salah = false;

try {Class.forName("org.gjt.mm.mysql.Driver");}catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;}if (!salah) {

Connection connect = null;try {connect = DriverManager.getConnection(database, user, pass);}catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;}if (!salah) {ResultSet query = null;float tot = 0;

try{Statement my = connect.createStatement();query = my.executeQuery("SELECT real_motor.*,spek_motor.* FROM

real_motor,spek_motor WHERE real_motor.kd_spek_motor =motor.kd_spek_motor AND"+

" real_motor.kd_motor = \"" + kode + "\"");}catch (Exception e){

out.println("Kesalahan ada pada : " + e);salah = true;

}if (!salah) { try

{while (query.next()){kode =query.getString("kd_motor");String nama =query.getString("nm_motor");String warna =query.getString("warna");int harga =query.getInt("harga");int pot =query.getInt("pot_harga");int stok =query.getInt("stok");tot = harga - pot;

Page 132: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

110

<tr valign="middle" class="tblInName"><td width="169" height="39" valign="middle"><div

align="center">Tipe Motor </div></td><input type="hidden" name="tipe" id="tipe"

value="<%=nama %>"><td width="147" valign="middle"><div

align="center">Warna</div></td><input type="hidden" name="wrn" id="wrn"

value="<%=warna %>"><td width="120" valign="middle"><div

align="center">Harga</div></td><input type="hidden" name="hrg" id="hrg"

value="<%=harga %>"> </tr>

<tr class="tblRow2"><td height="20"><div align="center"><%=

nama%></div></td><td><div align="center"><%=warna %></div></td><td><div align="center">Rp <%=harga %></div></td>

<input type="hidden" name="stk" id="stk"value="<%=stok %>"> </tr>

</table></div> </td>

<td rowspan="6">&nbsp;</td><td rowspan="6">&nbsp;</td>

</tr><tr>

<td height="21"><div align="right">Sub-total : Rp_</div></td>

<td height="21"> <input name="sub" type="text" id="sub"value="<%=harga %>" readonly=""></td> </tr>

<tr><td height="30" valign="middle"><div align="right">Potongan

Harga : Rp_ </div></td><td height="30" valign="middle"><input name="pot_hrg"

type="text" id="pot_hrg" value="<%=pot %>" readonly=""></td>

</tr><tr>

<td height="42" valign="top"><div align="right">Total :Rp_ </div></td>

<td height="42" valign="top"><input name="total"type="text" id="total" value="<%= tot %>" readonly=""></td>

</tr><%

} }

catch (Exception e) {out.println("Kesalahan pada : " + e);salah = true;

}%>

Page 133: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

111

<tr><td height="486" colspan="9" valign="top">

<TABLE width="82%" align="center" cellPadding=3cellSpacing=1 style="border:#993300 1px solid">

<tr class="tblInName"><td height="44" colspan="3" class=main><div

align="center">SELANJUTNYA, SILAHKAN ISI DATA ANDA DENGAN

LENGKAP DAN BENAR</div></td></tr><tr valign="middle"><td width="166" height="28"

class=main>Sandi Anda </td><td width="7" class=main>:</td><td width="404" class=main>

<%String sandi =

empty(request.getParameter("sandi"));%><input name="sandi" id="sandi"

value="<%=sandi%>">*<font class="mini">sandi untuk pengecekan

status</font> </td> </tr>

<tr valign="middle"><td width="166"class=main>Nama Lengkap Penerima </td>

<td width="7" class=main>:</td><td width="404" class=main>

<%String nama =

empty(request.getParameter("nama"));%><input name="nama" id="nama"

value="<%=nama%>" size="30" maxlength="29">*</td>

</tr><tr valign="middle">

<td class=main>No KTP (untuk STNK) </td><td class=main>:</td><td class=main>

<% Stringktp =

empty(request.getParameter("ktp"));%>

<input name="ktp" id="ktp"value="<%=ktp%>" size="30">

*</td> </tr>

<tr valign="middle"><td class=main>Alamat </td><td class=main>:</td><td class=main>

<%String alamat =

empty(request.getParameter("alamat"));%>

<textarea name="alamat" cols="30"rows="2" id="alamat" value="<%=alamat%>"></textarea>

*</td>

Page 134: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

112

</tr><tr valign="middle">

<td class=main>Kota </td><td class=main>:</td><td class=main>

<%String kota =

empty(request.getParameter("kota"));%>

<select name="kota" size="1"id="kota">

<option>Pilih Kota</option><option>Sleman</option><option>Bantul</option><option>Wonosari</option><option>Klaten</option><option>Magelang</option>

</select>*</td>

</tr><tr valign="middle"><td class=main>Kode Pos </td><td class=main>:</td><td class=main>

<% Stringpos =

empty(request.getParameter("pos"));%>

<input name="pos" id="pos"value="<%=pos%>">*</td>

</tr><tr valign="middle"><td class=main>Propinsi</td><td class=main>:</td><td class=main>

<%String propinsi =

empty(request.getParameter("propinsi"));%>

<select name="propinsi" size="1"id="propinsi">

<option>Pilih Propinsi</option><option>DIY</option><option>Jawa Tengah</option>

</select>*</td>

</tr><tr valign="middle"><td class=main>Alamat Email (aktif )</td><td class=main>:</td><td class=main>

<%

String email = empty(request.getParameter("email"));%>

<input name="email" id="email"value="<%=email%>" size="30" maxlength="40">

* </td>

Page 135: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

113

</tr><tr valign="middle"><td class=main>Nomor Telpon Rumah </td><td class=main>:</td><td class=main>

<%String telp =

empty(request.getParameter("telp"));%>

<input name="telp" id="telp"value="<%=telp%>" size="30">

* </td></tr><tr valign="middle"><td class=main>Nomor Handphone</td><td class=main>:</td><td class=main>

<%

String hp =empty(request.getParameter("hp"));

%><input name="hp" id="hp"

value="<%=hp%>" size="30">* </td>

</tr><tr valign="middle"><td class=main>Nomor Rekening</td><td class=main>:</td><td class=isi>

<% Stringrek =

empty(request.getParameter("rek"));%>

<input name="rek" id="rek"value="<%=rek%>" size="30"> *

<font class="mini">diisi apabila andamembayar via transfer</font></td>

</tr><tr valign="middle"><td class=main>Cabang Bank</td><td class=main>:</td><td class=isi>

<%String bank =

empty(request.getParameter("bank"));%>

<input name="bank" id="bank"value="<%=bank%>" size="30" maxlength="40"> *

<font class="mini">diisi apabila andamembayar via transfer</font></td>

</tr><tr valign="middle">

<td class=main><div align="center">* harusdiisi</div></td>

<td class=main>&nbsp;</td><td class=isi><input type="submit"

name="Submit" value="Simpan"></td></tr>

Page 136: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

114

</table><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></td>

</tr><input type="hidden" name="kode" id="kode"value="<%=kode%>"></table></td>

</form> </tr>

<% } } }%><!--Kode-kode HTML-->

Kemudian dokumen selesai_order.jsp digunakan untuk menangani nilai

parameter yang diinputkan oleh pemesan dalam form pemesanan dan juga

data pesanan motor. Berikut adalah potongan script selesai_order.jsp :

<%@ page contentType="text/html; charset=iso-8859-1"language="java" import="java.sql.*" import="java.io.File"errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><%String kode = empty(request.getParameter("kode"));

if (kode == "") {

}

String mess = "Tidak ada kode yang dilewatkan";response.sendRedirect("mess.jsp?mess=" + mess);

String tip = empty(request.getParameter("tipe"));String wrna = empty(request.getParameter("wrn"));String harga = empty(request.getParameter("hrg"));String pot = empty(request.getParameter("pot_hrg"));String nama = empty(request.getParameter("nama"));String ktp = empty(request.getParameter("ktp"));

String sandi = empty(request.getParameter("sandi"));String alamat = empty(request.getParameter("alamat"));String kota = empty(request.getParameter("kota"));String no_pos = empty(request.getParameter("pos"));String propinsi = empty(request.getParameter("propinsi"));String email = empty(request.getParameter("email")); Stringtelp = empty(request.getParameter("telp"));String hp = empty(request.getParameter("hp"));String rek = empty(request.getParameter("rek"));String bank = empty(request.getParameter("bank"));String stok = empty(request.getParameter("stk"));

Page 137: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

115

int X = Integer.valueOf(stok).intValue();int hrga = Integer.valueOf(harga).intValue();int pot_hrga = Integer.valueOf(pot).intValue();int kode_pos = Integer.valueOf(no_pos).intValue();int no=0;

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan : " + e + "<BR>");salah = true;

if (!salah) {

Connection connect = null; try

{connect = DriverManager.getConnection(database, user,

pass); }

catch (Exception e){out.println("Kesalahan ada pada: " + e + "<BR>");salah = true;

}if(!salah){if (sandi.equals("") || nama.equals("") || ktp.equals("") ||alamat.equals("")|| kota.equals("")||no_pos.equals("")||propinsi.equals("")|| email.equals("") ||telp.equals("") || hp.equals("")){out.print("<script>alert(\'Data Anda belumlengkap\');</script>");out.print("<script>history.back()</script>");}else{%><!--Kode-kode HTML--><%int tambah_pemesan = 0;

int tambah_order = 0;int ubah_stok = 0;

if(!salah){

try{

Statement my = connect.createStatement();String query = "INSERT INTO pemesan

(nama,alamat,kd_pos,kota,propinsi,email,"+"no_telp,no_hp,rek,bank,ktp,sandi) VALUES (" +

Page 138: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

116

"\'" + nama + "\'," +"\'" + alamat + "\'," +"\'" + kode_pos + "\'," +"\'" + kota + "\'," +"\'" + propinsi + "\'," +"\'" + email + "\'," +"\'" + telp + "\'," +"\'" + hp + "\'," +"\'" + rek + "\'," +"\'" + bank + "\'," +"\'" + ktp + "\'," +"\'" + sandi + "\'" +")";

tambah_pemesan = my.executeUpdate(query);}catch (Exception e)

{salah = true;

}if (tambah_pemesan > 0)out.print("Berikut adalah data anda :" + "<BR>Nama Pemesan :"+request.getParameter("nama")+"<BR>Nomor KTP :"+request.getParameter("ktp")+"<BR>Alamat :"+request.getParameter("alamat")+","+request.getParameter("kota")+","+request.getParameter("pos")+","+request.getParameter("propinsi")+"<BR>Email :"+request.getParameter("email")+"<BR>Nomor Telpon :"+request.getParameter("telp")+"<BR>Nomor HP :"+request.getParameter("hp")+"<BR>Kata Sandi untuk pengecekanstatus pemesanan Anda : "+request.getParameter("sandi"));else

salah = true;

if (!salah){

ResultSet query2 = null;try{Statement my2 = connect.createStatement();String query3 ="SELECT no_pemesan FROM pemesan where sandi =\"" + sandi

+ "\"";query2 = my2.executeQuery(query3);}catch (Exception e) {salah = true;}

if (!salah){try{if (query2.next()){no = query2.getInt("no_pemesan");

Page 139: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

117

}}catch (Exception e){salah = true; }if (!salah){try{GregorianCalendar today = new GregorianCalendar();String month[] = {"01", "02", "03", "04", "05", "06", "07","08", "09", "10","11","12"};String date = today.get(Calendar.YEAR)+"-"+month[today.get(Calendar.MONTH)]+"-"+today.get(Calendar.DATE);String stat = "pesan";Statement my3 = connect.createStatement();String query4 ="insert into pesan(no_pemesan,kd_motor,tgl_pesan,harga_pesan,pot_hargapesan,status) VALUES (" +

"\'" + no + "\'," +"\'" + kode + "\'," +"\'" + date + "\'," +"\'" + hrga + "\'," +"\'" + pot_hrga + "\'," +"\'" + stat + "\'" +")";

tambah_order = my3.executeUpdate(query4);}catch (Exception e){out.println("Kesalahan ad pada: " + e + "<BR>");salah = true;}int tot = hrga - pot_hrga;if (tambah_order > 0)out.print("<BR><BR>Motor yang anda pesan adalah :" +"<BR>Tipe Motor : "+tip+"<BR>Warna Motor : "+wrna+"<BR>Harga Motor : "+tot);elsesalah = true;

if(!salah){//stok baruX = X-1;try{Statement my4 = connect.createStatement();String query5 ="UPDATE real_motor SET stok =\"" + X + "\" where kd_motor = \""+ kode + "\"";ubah_stok = my4.executeUpdate(query5);}catch (Exception e) {

salah = true; }

Page 140: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

118

if (ubah_stok > 0)out.print("<BR><BR>Terimakasih..atas kepercayaan andaberbelanja"+" di website AstraMotorYogya.com."+" Motor yang anda pesan akan segera kami kirim selambat-lambatnya"+" 2 hari setelah anda melakukan pembayaran." + "<BR>");elsesalah = true;

} }

} } }%><!--Kode-kode HTML-->

Berikut tampilan halaman selesai_order.JSP :

Gambar 4.10 Implementasi Halaman Selesai Order

7. Halaman Lihat Status Pemesanan

Pengunjung akan dibawa kehalaman ini apabila data pengecekan status

yang dilakukan pada halaman home terbukti valid.

Page 141: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

119

Gambar 4.11 Implementasi Halaman Pengecekan Status

IV.4.2 Implementasi Halaman Web untuk Admin

Sistem e-Commerce motor Honda menyediakan halaman-halaman web

yang dibangun dari kode-kode JSP yang digunakan oleh seorang admin untuk

melakukan pengubahan data-data yang ada dalam database Honda. Halaman ini

di implementasikan sesuai dengan hasil perancangan pada bab IV sebelumnya.

Pada sistem e-Commerce motor Honda terdapat 2 level admin, yaitu admin

sebagai Kepala divisi penjualan dan admin sebagai web administrator. Kedua level

admin ini memiliki hak akses yang bebeda. Proses sistem yang bisa diakses oleh

kedua level admin telah dijelaskan pada diagram berjenjang sebelumnya.

Berikut adalah implementasi halaman-halaman web untuk admin :

1. Halaman Form Login Admin

Page 142: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

120

Kedua level admin mempunyai halaman form login yang sama. Halaman

form login admin akan ditampilkan apabila seorang admin meng-klik

menu “Private Acsess” pada halaman index. Namun, sebelum membuat

halaman form untuk login, terlebih dahulu dibuat beberapa dokumen JSP

yang nantinya akan digunakan untuk proses login. Beberapa dokumen JSP

yang dibutuhkan untuk proses login adalah :

ü iden.JSP

Dokumen iden.jsp digunakan untuk mengidentifikasi pemakai (admin)

didasarkan pada username, password dan level yang dicocokkan

dengan data pada tabel pemakai.

ü valid.jsp

Dokumen valid.jsp digunakan untuk memvalidasi data login yang ada

pada data sesi dan kemudian di identifikasi melalui fungsi iden( ).

Apabila identifikasi memberikan nilai balik berupa “false” maka

metode sendResponse() akan dijalankan untuk menampilkan dokumen

form_login_admin.jsp dengan menyertakan parameter berupa mess

yang nilainya adalah “Anda tidak berhak, Silahkan login dulu”. Jika

nilai balik yang diberikan “true” maka akan ditampilkan dokumen

login_admin.jsp

Listing program JSP untuk membangun dokumen iden.jsp adalah

sebagai berikut :

Page 143: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

121

<%@ page import="java.sql.*" %>

<%@ include file="server_db.jsp" %>

<%! public boolean iden(String pemakai, String password, String level) {

if (pemakai == null || password == null || level == null) return(false);

(""))if (pemakai.equals("") || password.equals("") || level ==

return(false);

boolean salah = false;boolean pass_benar = false;

try { Class.forName("org.gjt.mm.mysql.Driver"); } catch (Exception ex) { salah = true; }

if (!salah) { // Bentuk koneksi

Connection connect = null; try { connect = DriverManager.getConnection(database, user,pass); }

catch (Exception ex) {salah = true;

}

if (!salah) {ResultSet query = null;

try { Statement my = connect.createStatement(); query = my.executeQuery( "SELECT sandi FROM pemakai WHERE pemakai = '" +pemakai + "' and level ='" + level + "'"); } catch (Exception ex) { salah = true; }

if (!salah) {String data_pass = "";

try { if (query.next())

data_pass = query.getString("sandi"); }

Page 144: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

122

catch (Exception ex) {salah = true;

}

if (!salah) if (password.equals(data_pass))

pass_benar = true; } } }

}%>

return(pass_benar);

Berikut adalah listing program valid.jsp :

<%@ include file="iden.jsp" %>

<% String pemakai = (String) session.getAttribute("ses_user"); String password = (String) session.getAttribute("ses_pass"); String level =

(String) session.getAttribute("ses_lev");if (! iden(pemakai, password, level)) {

}%>

String mess = "Silakan login dulu";response.sendRedirect("form_login_admin.jsp?mess=" + mess);

Tampilan halaman form_login_admin.jsp adalah sebagai berikut :

Gambar 4.12 Implementasi Halaman form Login Admin

Page 145: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

123

Program JSP untuk membuat Form Login Admin pada gambar 4.12

adalah :

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.sql.*" errorPage="" %><%@ include file="server_db.jsp" %><!--Kode-kode HTML--><FORM ACTION="login_admin.JSP" METHOD="POST"><--Kode-kode HTML-->

<TABLE width="312" height="115" align="center"> <TR>

<TD width="95"><font color="#FFFFFF">Username</font></TD><TD width="150">

<% String pemakai = empty(request.getParameter("pemakai"));

%><INPUT TYPE="TEXT" NAME="pemakai" VALUE = "<%= pemakai %>">

</TD> </TR> <TR>

<TD><font color="#FFFFFF">Password</font></TD><TD><INPUT TYPE="PASSWORD" NAME="sandi_lewat"></TD>

</TR> <TR>

<TD><span class="style2">Login As </span></TD><TD><select name="level">

<option>Kepala Divisi Penjualan</option><option>Web Admin</option>

</select></TD> </TR>

</TABLE><p align="center">

<INPUT name="SUBMIT" TYPE="SUBMIT" VALUE="Masuk"><INPUT name="RESET" TYPE="RESET" VALUE="Ulang"></p>

<TR><TD height="100" valign="middle"><h2 align="center"><font color="#FFFFFF">

<% String mess=request.getParameter("mess");if(mess != null)out.println(mess + "<br>\n");

%> </h2></TD>

</TR><!--Kode-kode HTML--></FORM><!--Kode-kode HTML-->

Page 146: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

124

IV.4.2.1 Implementasi Halaman Web untuk Admin “Kepala Divisi

Penjualan"

Apabila seorang admin melakukan login dengan sukses sebagai kepala

divisi penjualan, maka halaman yang akan ditampilkan adalah halaman

login_admin.jsp yang menampilkan menu-menu untuk admin kepala divisi

penjualan. Tampilannya sebagai berikut :

Gambar 4.13 Implementasi Halaman Login Admin Kepala Divisi

Penjualan

Page 147: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

125

Program JSP untuk membuat login_admin.jsp pada gambar 4.13 adalah:

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.util.*" import="java.sql.*" errorPage="true" %><%@ include file="iden.jsp" %>

<%String ses_user = empty(request.getParameter("pemakai"));String ses_pass = empty(request.getParameter("sandi_lewat"));String ses_lev = empty(request.getParameter("level"));

if (! iden(ses_user, ses_pass, ses_lev)) {

String mess = "data yang anda masukkan masih salah";response.sendRedirect("form_login_admin.jsp?mess=" + mess +

"&pemakai=" + ses_user);

}else

{

}

session.invalidate();session = request.getSession(true);session.setAttribute("ses_user",ses_user);session.setAttribute("ses_pass",ses_pass);session.setAttribute("ses_lev",ses_lev);

%><!--Kode-kode HTML-->SELAMAT DATANG : <%=ses_user %> , dan SELAMAT BEKERJA !<!--Kode-kode HTML--><%@ include file = "date.JSP" %><!--Kode-kode HTML--><%

if (ses_lev.equals( "Kepala Divisi Penjualan")) { %>

MENU ADMIN DIVISI PENJUALAN</p> <table align="center" bgcolor="#FFFFFF">

<tr><td><div align="center"><%@ include file = "menu_admin_divisi.html" %></div></td></tr></table>

<% } else { %>

<p class="judul">MENU WEB ADMINISTRATOR</p><table><tr><td><%@ include file = "menu_admin.html" %></td></tr></table>

<% } %><!--Kode-kode HTML-->

Page 148: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

126

2. Halaman Daftar Order (status pesan)

Gambar 4.14 Implementasi Halaman Daftar Order (status pesan)

Berikut adalah potongan program untuk menampilkan daftar order status

pesan :

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.util.*" import="java.sql.*" errorPage="true" %><%@ include file="valid.jsp" %><!--Kode-kode HTML-->boolean salah = false;try {Class.forName("org.gjt.mm.mysql.Driver");}catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;}

if (!salah) {Connection connect = null;try {connect = DriverManager.getConnection(database, user, pass);

}catch (Exception e) {

out.println("Kesalahan pada: " + e);salah = true;

}

Page 149: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

127

if (!salah) {ResultSet query = null; try {Statement my = connect.createStatement();query = my.executeQuery(

"SELECT pesan.*,pemesan.* FROM pesan,pemesan " + "WHERE pemesan.no_pemesan = pesan.no_pemesan AND "+

"pesan.status='pesan'"); } catch (Exception e) {out.println("Kesalahan pada: " + e);salah = true;}if (!salah) {

try {while (query.next()) {int no_cust =query.getInt("no_pemesan");String nama = query.getString("nama");String alamat =query.getString("alamat");String kota = query.getString("kota"); intno = query.getInt("no_pesan");String tgl =query.getString("tgl_pesan");String strTahun = tgl.substring(0,4);if (strTahun == "") strTahun = "0";String strBulan = tgl.substring(5,7);if (strBulan == "") strBulan = "0"; StringstrTanggal = tgl.substring(8,10); if(strTanggal == "") strTanggal = "0";

%><tr class="tblInName">

<td><div align="center"><%=no%></div></td><td><div align="center"><%=strTanggal+"-"+strBulan+"-

"+strTahun%></div></td><td><div align="center"><%=nama%></div></td>

<td><div align="left"><%=alamat%> <br><%=kota%></div></td>

<td><div align="center"><ahref='<%=response.encodeURL("det_pesan.jsp?kd="+no)%>'>Detail</a></div></td>

<td><div align="center"><ahref='<%=response.encodeURL("del_pesan.jsp?kd="+no)%>'>Hapus</a></div></td>

<input type="hidden" name="no" value="<%=no_cust%>" ></tr>

<%}

} catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } } } } if (salah) {

}%>

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.JSP?mess=" + mess);

<!--Kode-kode HTML-->

Page 150: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

128

3. Halaman Daftar Order (status bayar)

Gambar 4.15 Implementasi Halaman Daftar Order (status bayar)

Pada dasarnya kode JSP yang digunakan untuk menampilkan data order

status bayar sama dengan kode JSP yang digunakan pada halaman daftar

order status pesan. Yang membedakan adalah perintah sql-nya. Berikut

adalah sql untuk menampilkan daftar order status bayar :

query = my.executeQuery("SELECT bayar_kirim.*, pesan.*, pemesan.* FROM bayar_kirim,pesan,pemesan " +"WHERE bayar_kirim.no_pesan = pesan.no_pesan AND pemesan.no_pemesan =pesan.no_pemesan AND pesan.status = 'bayar' ");

4. Halaman Daftar Order (status kirim)

Gambar 4.16 Implementasi Halaman Daftar Order (status kirim)

Page 151: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

129

Berikut adalah sql untuk menampilkan daftar order status kirim :

Statement my = connect.createStatement();query = my.executeQuery("SELECT bayar_kirim.*, pesan.*, pemesan.* FROMbayar_kirim,pesan,pemesan " +"WHERE bayar_kirim.no_pesan = pesan.no_pesan AND pemesan.no_pemesan =pesan.no_pemesan");

5. Halaman Detail Order

Halaman ini bisa di tampilkan dengan memilih menu “detail” pada

halaman daftar order status pesan. Pada halaman ini tersedia form untuk

mengubah status order pesan menjadi status order bayar. Apabila suatu

data order telah diubah statusnya menjadi status “bayar” maka data order

tersebut juga berstatus “kirim”. Karena data order yang telah dibayar

otomatis akan dikirim. Berikut adalah tampilan detail order :

Gambar 4.17 Implementasi Halaman Detail Data Order

Page 152: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

130

Berikut adalah potongan program untuk menampilkan detail data order :

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.util.*" import="java.sql.*" errorPage="true" %><%@ include file="valid.JSP" %><!--Kode-kode HTML-->String kode = empty(request.getParameter("kd")); if (kode == "") {

String mess = "Salah pemakaian";response.sendRedirect("mess.JSP?mess=" + mess);

}

%>

int no_order = Integer.valueOf(kode).intValue();String tgll = request.getParameter("tggl");

<!--Kode-kode HTML--><% boolean salah = false;

try {Class.forName("org.gjt.mm.mysql.Driver");

} catch (Exception e) { out.println("Kesalahan pada: " + e);

salah = true; }if (!salah) {

ResultSet query = null; try {

Statement my = connect.createStatement();query = my.executeQuery("SELECT pesan.*,pemesan.*,motor.*,real_motor.* FROMpesan,pemesan,motor,real_motor" +" WHERE pemesan.no_pemesan = pesan.no_pemesan AND real_motor.kode =pesan.kode AND"+" motor.kd_motor = real_motor.kd_motor AND pesan.no_pesan = \"" +no_order + "\"");

while (query.next()) {

String tgl = query.getString("tgl");String strTahun = tgl.substring(0,4);if (strTahun == "") strTahun = "0";String strBulan = tgl.substring(5,7);if (strBulan == "") strBulan = "0";String strTanggal = tgl.substring(8,10);if (strTanggal == "") strTanggal = "0";String status = query.getString("status");String kd_motor =query.getString("kd_motor");String nm_motor =query.getString("nm_motor");String warna =query.getString("warna");int no_cust =query.getInt("no_pemesan");String nama = query.getString("nama");String alamat =query.getString("alamat");String kota =query.getString("kota");String propinsi =query.getString("propinsi");int pos =query.getInt("kd_pos");String email =query.getString("email");String telp =query.getString("no_telp");String hp =query.getString("no_hp");String rek =query.getString("rek");

Page 153: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

131

if (rek == "") rek = "bayar ditempat";String bank = query.getString("bank"); if(bank == "") bank = "bayar ditempat";int harga =query.getInt("harga");int pot =query.getInt("pot_harga");int total = harga - pot;

%><TR class="tblRow1"><TD height="50"><%=kd_motor%></TD><TD><%=nm_motor%></TD><TD><%=warna%></TD><TD><%=harga%></TD><TD><%=pot%></TD><TD><%=total%></TD></TR><TR class="tblRow2"><TD height="76" colspan="5">TANGGAL ORDER : <%=strTanggal+"-"+strBulan+"-"+strTahun%><br><strong>Data Pemesan</strong><br>Nama : <%=nama%> <br> Alamat Lengkap : <%=alamat%>, kode pos :<%=pos%><br><%=kota%>, <%=propinsi%> <br>No Telpon / Hp : <%=telp%> / <%=hp%> <br>Email : <%=email%> <br>No Rekening : <%=rek%> <br>Bank : <%=bank%> </TD></TR><form action="edit_status.jsp" method="get"><TR><TD height="61" colspan="5"><div align="center">Ubah status Order<input type="text" name="status" value="bayar" readonly=""> -<input type="submit" name="Submit" value="Simpan"><input type="hidden" name="no" value="<%=no_order%>"></div></TD></TR></form><%

} } catch (Exception e) {

out.println("Kesalahan pada : " + e); salah = true; } } } if (salah) {

}%>

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.JSP?mess=" + mess);

<!--Kode-kode HTML--><% } } catch (Exception e) {

out.println("Kesalahan pada : " + e); salah = true; } } } if (salah) {

}%>

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.JSP?mess=" + mess);

<!--Kode-kode HTML-->

Page 154: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

132

Dan script untuk menangani form edit status adalah :

<%@ include file="valid.JSP" %><% String no_odr = empty(request.getParameter("no"));

String stat = empty(request.getParameter("status"));

int no_ord = Integer.valueOf(no_odr).intValue();if (no_odr == null || stat == null)

{String mess = "Salah pemakaian";response.sendRedirect("mess.jsp?mess=" + mess);

}boolean salah = false;try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if (!salah) {Connection connect = null; try

{connect = DriverManager.getConnection(database, user, pass); }catch (Exception e) {

out.println("Kesalahan: " + e + "<BR>"); salah = true; }int ubah_status = 0; int tambah_data = 0;GregorianCalendar today = new GregorianCalendar();String month[] = {"01", "02", "03", "04", "05", "06", "07", "08","09", "10","11","12"};String date = today.get(Calendar.YEAR)+"-"+month[today.get(Calendar.MONTH)]+"-"+today.get(Calendar.DATE);if (!salah) {

try {Statement my = connect.createStatement(); String query =

"INSERT INTO bayar_kirim (no_pesan, tgl_bayar, tgl_kirim) " + "VALUES (" +

"\'" + no_ord + "\'," +"\'" + date + "\'," +"\'" + date + "\'" +

")";tambah_data = my.executeUpdate(query); }catch (Exception e) {salah = true; }if (tambah_data > 0) out.print("Data pembayaran telah disimpan" +"<BR>"); else salah = true;if(!salah) {try{Statement my = connect.createStatement();String query = "UPDATE pesanSET " +"status = 'bayar' WHERE no_pesan = \"" + no_ord + "\"";ubah_status = my.executeUpdate(query); }catch (Exception e) {

salah = true; }if (ubah_status > 0)out.print("Status Pemesanan telah diubah");

else

if (salah)salah = true; }}}

out.print("Gagal menyimpan");%>

Page 155: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

133

IV.4.2.1 Implementasi Halaman Web untuk Admin Web

Admin web adalah seorang admin yang berhak untuk

mengubah/memanipulasi semua data yang ada dalam sistem e-Commerce motor

Honda. Admin web juga yang berhak untuk menambah, mengedit dan menghapus

data login dari semua pemakai sistem. Apabila seorang admin melakukan login

dengan sukses sebagai admin web, maka halaman yang akan ditampilkan adalah

halaman login_admin.jsp yang menampilkan menu-menu untuk admin web.

Tampilannya sebagai berikut :

Gambar 4.18 Implementasi Halaman Login Admin Web

Berikut adalah implementasi halaman-halaman dari menu-menu admin sebagai

admin web :

1. Halaman Input Kategori Motor

Halaman ini digunakan untuk menginputkan data kategori motor. Halaman

ini akan tampil apabila menu “update kategori” di-klik, dan pada halaman

Page 156: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

134

menu “update kategori” dipilih menu “tambah kategori motor”. Berikut

adalah tampilan halaman form input kategori motor :

Gambar 4.19 Implementasi Halaman Input Kategori Motor

Potongan script untuk menangani form input kategori adalah :

<%@ page import="java.sql.*" %>

<%@ include file="valid.jsp" %>

<%String kode = empty(request.getParameter("kode"));

if (kode == "") {

}

String mess = "Salah pemakaian";response.sendRedirect("mess.jsp?mess=" + mess);

kode = kode.toUpperCase(); String kat = empty(request.getParameter("kat"));

String info = empty(request.getParameter("info"));

if (kode.equals("") || kat.equals("") || info.equals("")) { out.print("ada data yang belum diisi" + "<BR>"); }boolean salah = false;try {

}Class.forName("org.gjt.mm.mysql.Driver");

Page 157: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

135

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if (!salah) { // Bentuk koneksi

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true; }

int tambah_data = 0;

if (!salah) { try

{Statement my = connect.createStatement();

String query ="INSERT INTO kategori (kd_kat, kategori, info) " +

"VALUES (" +"\'" + kode+ "\'," +"\'" + kat + "\'," +"\'" + info + "\'" +

")";

}tambah_data = my.executeUpdate(query);

catch (Exception e) {salah = true;

}

if (tambah_data > 0)out.print("Data telah disimpan" + "<BR>");

elsesalah = true;

} }

if (salah)out.print("Data gagal disimpan" + "<BR>");

%>

Page 158: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

136

2. Halaman Input Data Spesifikasi Motor

Gambar 4.20 Implementasi Halaman Input Spesifikasi Motor

Potongan script untuk menangani form input data spesifikasi motor adalah

sebagai berikut :

<%@ page import="java.sql.* " %>

<%@ include file="valid.jsp" %>

<%String kd_mtr = empty(request.getParameter("kd_mtr"));

if (kd_mtr == ""){String mess = "Tidak ada kode motor yang diberikan";response.sendRedirect("mess.jsp?mess=" + mess);

}kd_mtr = kd_mtr.toUpperCase();String kat = empty(request.getParameter("kat"));String nama = empty(request.getParameter("nama"));String tahun = empty(request.getParameter("tahun"));String plt = empty(request.getParameter("plt"));String berat = empty(request.getParameter("berat"));String jarak = empty(request.getParameter("jarak"));String torsi = empty(request.getParameter("torsi"));String daya = empty(request.getParameter("daya"));String kap_bb = empty(request.getParameter("kap_bb"));String kopling = empty(request.getParameter("kopling"));String pelumas = empty(request.getParameter("pelumas"));String starter = empty(request.getParameter("starter"));

String sis_bb = empty(request.getParameter("sis_bb"));String garansi = empty(request.getParameter("garansi"));

Page 159: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

137

String rangka = empty(request.getParameter("rangka"));String mesin = empty(request.getParameter("mesin"));String sus_dpn = empty(request.getParameter("sus_dpn"));String sus_blkng = empty(request.getParameter("sus_blkng"));String rem_dpn = empty(request.getParameter("rem_dpn"));String rem_blkng = empty(request.getParameter("rem_blkng"));String ban_dpn = empty(request.getParameter("ban_dpn"));String ban_blkng = empty(request.getParameter("ban_blkng"));

String pola_gigi = empty(request.getParameter("pola_gigi")); String gigi_trans = empty(request.getParameter("trans_gigi")); String aki = empty(request.getParameter("aki"));

String velg = empty(request.getParameter("velg"));String busi = empty(request.getParameter("busi"));String volum = empty(request.getParameter("volum"));String api = empty(request.getParameter("api"));String harga = empty(request.getParameter("harga"));String pot_harga = empty(request.getParameter("pot_harga"));

int hrg = Integer.valueOf(harga).intValue();int pot_hrg = Integer.valueOf(pot_harga).intValue();

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if(!salah) { if (kat.equals("") || nama.equals("") || tahun.equals("") ||plt.equals("")|| berat.equals("")|| jarak.equals("")||torsi.equals("")

|| daya.equals("")|| kap_bb.equals("")||kopling.equals("")||pelumas.equals("") || starter.equals("") || sis_bb.equals("")

|| sus_dpn.equals("")|| sus_blkng.equals("")||rem_dpn.equals("")|| rem_blkng.equals("") || ban_dpn.equals("") ||ban_blkng.equals("")

|| api.equals("")|| busi.equals("")|| volum.equals("")||aki.equals("") || velg.equals("") || mesin.equals("") ||rangka.equals("")|| garansi.equals("")

|| harga.equals("")|| pot_harga.equals("") )

{out.print("<script>alert(\'Data Anda belum lengkap\');</script>");out.print("<script>history.back()</script>");

} else{if (!salah) {

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true;

Page 160: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

138

int tambah_data = 0;if (!salah) { try

{Statement my = connect.createStatement();

String query ="INSERT INTO spek_motor (kd_kat,kd_spek_motor,nm_motor,tahun,plt,"+

"jarak_roda,berat,rangka,sus_dpn,sus_blkng,ban_dpn,ban_blkng,"+

"rem_dpn,rem_blkng,kap_bb,sistem_bb,sistem_pengapian,tipe_mesin,"+

"volume,daya,torsi,pelumas,kopling,gigi_trans,pola_gigi,starter,"+"aki,busi,velg,garansi,harga,pot_harga) VALUES

(" +"\'" + kat + "\'," +"\'" + kd_mtr + "\'," +"\'" + nama + "\'," +"\'" + tahun + "\'," +"\'" + plt + "\',"+"\'" + jarak + "\'," +"\'" + berat + "\'," +"\'" + rangka + "\'," +"\'" + sus_dpn+ "\'," +"\'" + sus_blkng + "\'," +"\'" + ban_dpn + "\'," +"\'" + ban_blkng + "\'," +"\'" + rem_dpn + "\'," +"\'" + rem_blkng + "\'," +"\'" + kap_bb + "\'," +"\'" + sis_bb + "\'," +"\'" + api + "\'," +"\'" + mesin + "\', " +"\'" + volum + "\'," +"\'" + daya + "\'," +"\'" + torsi + "\'," +"\'" + pelumas + "\'," +"\'" + kopling + "\'," +"\'" + gigi_trans + "\'," +"\'" + pola_gigi + "\'," +"\'" + starter + "\'," +"\'" + aki + "\'," +"\'" + busi + "\'," +"\'" + velg + "\'," +"\'" + garansi + "\'," +"\'" + hrg + "\'," +"\'" + pot_hrg + "\'" +")";tambah_data = my.executeUpdate(query);} catch (Exception e) {

salah = true; }if (tambah_data > 0)

out.print("Data telah disimpan" + "<BR>"); else

salah = true; }} }}

if (salah)out.print("Data gagal disimpan" + "<BR>");

%>

Page 161: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

139

3. Halaman Input Data Warna dan Stok Motor

Gambar 4.21 Implementasi Halaman Input Data Warna dan Stok Motor

Potongan script untuk menangani form input data warna dan stok motor

adalah sebagai berikut :

<%@ page import="java.sql.*" errorPage="true" %>

<%@ include file="valid.jsp" %>

<%String kode = empty(request.getParameter("kode"));

if (kode == "") {

}

String mess = ("Tidak ada kode yang di;ewatkan");response.sendRedirect("mess.JSP?mess=" + mess);

kode = kode.toUpperCase();String mtr = empty(request.getParameter("mtr"));String warna = empty(request.getParameter("warna"));String stok = empty(request.getParameter("stok"));int in_stok = Integer.valueOf(stok).intValue();

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {out.println("Kesalahan: " + e + "<BR>");salah = true;

}

Page 162: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

140

if(!salah) {if (mtr.equals("") || warna.equals("")|| stok.equals("")) {

out.print("<script>alert(\'Data Anda belumlengkap\');</script>");

out.print("<script>history.back()</script>"); } else {

if (!salah) { // Bentuk koneksi

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true; }

int tambah_data = 0;

if (!salah) { try

{Statement my = connect.createStatement();

String query ="INSERT INTO real_motor (kd_spek_motor, kd_motor,

warna, stok) " + "VALUES (" + "\'" + mtr+ "\'," + "\'" + kode + "\'," +

"\'" + warna + "\'," +"\'" + in_stok + "\'" +

")";

}tambah_data = my.executeUpdate(query);

catch (Exception e) { salah = true; }

if (tambah_data > 0)out.print("Data telah disimpan" + "<BR>");

elsesalah = true;

} } }}

if (salah)out.print("Data gagal disimpan" + "<BR>");

%>

Page 163: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

141

4. Halaman Input Data Kategori ke dalam Daftar Kategori Terbaru

Gambar 4.22 Implementasi Halaman Input Data Kategori ke dalamDaftar Kategori Terbaru

Potongan script untuk menangani form input kategori ke daftar kategori

terbaru adalah :

<%@ page import="java.sql.*" %><%@ include file="valid.jsp" %><%

boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if (!salah) {

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); }

Page 164: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

142

catch (Exception e){out.println("Kesalahan: " + e + "<BR>");salah = true;

}

int tambah_data = 0;

if (!salah){

try{

Statement my = connect.createStatement();String query =

"INSERT INTO tipe_baru (kd_kat) " +"VALUES (" +"\'" +request.getParameter("kate") + "\'" +

")";tambah_data = my.executeUpdate(query); }

catch (Exception e) {salah = true;

}

if (tambah_data > 0)out.print("Data Tipe Motor "+request.getParameter("kate")+"telah

disimpan dalam"+"<br>"+" daftar tipe motor terbaru" + "<BR>");

elsesalah = true;

} }

if (salah)out.print("Data tipe motor gagal disimpan" + "<BR>");

%>

5. Halaman Daftar Data Login User

Gambar 4.23 Implementasi Halaman Daftar Data Login User

Page 165: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

143

Berikut adalah script untuk menampilkan daftar data login user :

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.util.*" import="java.sql.*" errorPage="" %><%@ include file="valid.jsp" %><%boolean salah = false;try {Class.forName("org.gjt.mm.mysql.Driver"); }catch (Exception e){ out.println("Kesalahan pada: " + e);salah = true; }if (!salah) {Connection connect = null;try {connect = DriverManager.getConnection(database, user, pass); }catch (Exception e) {out.println("Kesalahan pada: " + e); salah= true; }if (!salah) { ResultSet query = null; try {Statement my = connect.createStatement();query = my.executeQuery("SELECT * FROM pemakai ORDER BY id_admin desc");}catch (Exception e){out.println("Kesalahan pada: " + e); salah = true; }if (!salah){try {while (query.next()){int no = query.getInt ("id_admin");String nm =query.getString("pemakai");String pwd = query.getString("sandi");String lev = query.getString("level");%>

<tr class="tblInName"><td><div align="center"><%=nm%></div></td><td><div align="center"><%=pwd%></div></td><td><div align="left"><%=level%></div></td>

<td><div align="center"><ahref='<%=response.encodeURL("form_edit_login.jsp?no="+no)%>'>Edit</a><br><a href='<%=response.encodeURL("del_login.jsp?no="+no)%>'>Hapus</a>

</div></td> </tr> <%

} } catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } } } } if (salah) { String mess = "Ada kesalahan dalam mengakses database";

response.sendRedirect("mess.jsp?mess=" + mess); }%>

Page 166: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

144

6. Halaman Input Data Login Baru

Gambar 4.24 Implementasi Halaman Input Data Login User Baru

Berikut adalah script untuk menampilkan form input data login user baru :

<FORM ACTION="add_login.jsp" METHOD="POST"><table class="formtable" align="center"><TR><TD width="113" height="37" valign="bottom">Username</TD><TD width="275" valign="bottom"><% String usernm = empty(request.getParameter("usernm"));%><INPUT NAME= "usernm" TYPE= "TEXT" id="usernm" VALUE= "<%= usernm %>"></TD></TR><TR><TD height="38">Password</TD><TD><% String passdd = empty(request.getParameter("passdd"));%><INPUT NAME = "passdd" TYPE= "password" id="passdd"VALUE= "<%= passdd %>" ></TD></TR><TR><TD>Level</TD><TD><select name="level"><option>Kepala Divisi Penjualan</option><option>Web Admin</option></select></TD></TR><TR valign="bottom"><TD height="46">&nbsp;</TD><TD><div align="center"><INPUT name="SUBMIT" TYPE="SUBMIT" VALUE="Simpan"><INPUT name="RESET" TYPE="RESET" VALUE="Reset"></div></TD></TR></TABLE><TABLE BORDER="0"><TR><TD><div align="center"> </div></TD></FORM>

Page 167: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

145

Berikut adalah script untuk menangani form input data login user baru :

<%@ page import="java.sql.*" %>

<%@ include file="valid.jsp" %>

<%String usernm = empty(request.getParameter("usernm"));String passdd = empty(request.getParameter("passdd"));String lev = empty(request.getParameter("level"));%><%boolean salah = false;

try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if(!salah) {if (usernm.equals("") || passdd.equals("") ||

lev.equals("") ){out.print("<script>alert(\'Data yang dimasukkan belum

lengkap\');</script>");out.print("<script>history.back()</script>");

}else {

if (!salah) {Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true; }int tambah_data = 0;if (!salah) { try

{Statement my = connect.createStatement();

String query ="INSERT INTO pemakai (pemakai, sandi, level) " +

"VALUES (" +"\'" + usernm+ "\'," +"\'" + passdd + "\'," +"\'" + lev + "\'" +

")";

}tambah_data = my.executeUpdate(query);

Page 168: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

146

catch (Exception e) {salah = true;

}

if (tambah_data > 0)out.print("Data telah disimpan" + "<BR>");

elsesalah = true;

} } }}

7. Halaman Edit Data Login User

Gambar 4.25 Implementasi Halaman Edit Data Login User

Berikut adalah script untuk menampilkan form edit data login user :

<%@ page contentType="text/html; charset=iso-8859-1" language="java"import="java.util.*" import="java.sql.*" errorPage="" %><%@ include file="valid.jsp" %><!--Kode-kode HTML--><form action="edit_login.jsp" method="post"><%String kode = empty(request.getParameter("no")); if (kode == "") {

String mess = "Salah pemakaian";response.sendRedirect("mess.jsp?mess=" + mess);

}

String usernm ="";String passdd="";String levl="";

boolean salah = false; try {

}Class.forName("org.gjt.mm.mysql.Driver");

Page 169: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

147

catch (Exception e) {

}

out.println("Kesalahan: " + e + "<BR>");salah = true;

if (!salah) {

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true; }

if (!salah) {

ResultSet query = null; try {

Statement my = connect.createStatement(); String query2 =

"SELECT * FROM pemakai " +"WHERE id_admin = \"" + kode + "\"";

query = my.executeQuery(query2); } catch (Exception e)

{salah = true;

}

if (!salah) {try {

if (query.next()) {usernm = empty(query.getString("pemakai"));passdd = empty(query.getString("sandi"));

levl = empty(query.getString("level"));}

} catch (Exception e) {

salah = true; } } } }if (salah) {

String mess = "Ada kesalahan dalam mengakses database";response.sendRedirect("mess.jsp?msg=" + mess);

}

%>

Page 170: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

148

<tr class="tblInName"><td width="114"><div align="left">Username</div></td><td width="193"><div align="left"><input name="usnm" type="text" id="usnm" value="<%=usernm%>"></div></td><tr class="tblInName"><td><div align="left">Password</div></td><td><div align="left"><input name="passw" type="password" id="passw"value="<%=passdd%>"></div></td><tr class="tblInName"><td><div align="left">Level</div></td><td><select name="level"><option>Kepala Divisi Penjualan</option><option>Web Admin</option></select></td><tr class="tblInName"><td height="52"><div align="right"><INPUT TYPE="HIDDEN" NAME="kode" VALUE="<%= kode %>"><input type="reset" name="Reset" value="Reset"></div></td><td><input type="submit" name="Submit2" value="Simpan" ></td></table></form>

Berikut adalah script untuk menangani form edit data login user :

<%@ page import="java.sql.*" errorPage="true" %>

<%@ include file="valid.jsp" %>

<%String pk = request.getParameter("kode");String usn = empty(request.getParameter("usnm"));String pwd = empty(request.getParameter("passw"));String lev = empty(request.getParameter("level"));

%>boolean salah = false;try {

}Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {out.println("Kesalahan: " + e + "<BR>");salah = true;

}

if(!salah) { if (usn.equals("") || pwd.equals("") || lev.equals("") ) {out.print("<script>alert(\'Data yang dimasukkan belumlengkap\');</script>");

out.print("<script>history.back()</script>"); } else {if (!salah) {Connection connect = null;

try {

Page 171: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

149

connect = DriverManager.getConnection(database, user, pass); } catch (Exception e) { out.println("Kesalahan: " + e + "<BR>"); salah = true; }

int tambah_data = 0;

if (!salah) { try

{Statement my = connect.createStatement();String query = "UPDATE pemakai SET " +

"pemakai = \"" + usn + "\", " +"sandi = \"" + pwd + "\", " +

"level = \"" + lev + "\" WHERE id_admin = \"" + pk +"\"";

}tambah_data = my.executeUpdate(query);

catch (Exception e) {salah = true;

}

if (tambah_data > 0)out.print("Data telah disimpan");

elsesalah = true;

} } }} if (salah)

out.print("Gagal menyimpan");%>

Page 172: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

150

BAB V

ANALISA HASIL

Bab ini menjelaskan analisa yang dilakukan terhadap hasil implementasi

sistem e-Commerce motor Honda. Analisa yang dilakukan meliputi kelebihan dan

kekurangan sistem, keunggulan teknologi yang digunakan sistem serta manfaat

yang dapat diperoleh dari penggunaan sistem ini oleh konsumen dan pihak Astra

Honda Motor cabang Yogyakarta. Setelah melewati tahap implementasi, penulis

berkesimpulan bahwa sistem dapat berjalan dengan baik dengan sistem keamanan

yang memadai sehingga tidak menutup kemungkinan untuk dapat digunakan

dalam kondisi yang sesungguhnya.

V.1 Kelebihan dan Kekurangan Sistem e-Commerce motor Honda

V.1.1 Kelebihan sistem

Sistem e-Commerce motor Honda mempunyai beberapa kelebihan, di

antaranya adalah :

1. Tampilan disain user interface yang user friendly, sehingga

memudahkan pengunjung untuk menjelajahi seluruh halaman web

tanpa kesulitan yang berarti.

2. Menyediakan informasi yang cukup detail bagi pengunjung yang

ingin mengetahui produk-produk motor Honda lengkap dengan

spesifikasi dan daftar harganya, juga menyediakan berita terkini

mengenai Astra Honda Motor cabang yogyakarta dan event-event

yang berhubungan dengan ruang lingkup motor Honda.

Page 173: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

151

3. Sistem e-Commerce motor Honda menyediakan fasilitas-fasilitas

bagi seorang admin untuk dapat selalu meng-update informasi

dalam web.

4. Pengunjung yang telah melakukan pemesanan motor Honda dapat

melihat status pemesanannya sewaktu-waktu melalui situs e-

Commerce motor Honda.

5. Pengunjung situs e-Commerce motor Honda dapat mengisi buku

tamu sebagai pesan, saran atau kritik kepada pihak Astra Honda

Motor cabang Yogyakarta.

V.1.2 Kekurangan sistem

Disamping memiliki kelebihan, sistem e-Commerce motor Honda ini

juga masih mempunyai banyak kekurangan, di antaranya adalah :

1. Tidak menyediakan fasilitas shoping cart bagi konsumen,

Sehingga konsumen tidak dapat memesan motor lebih dari satu

tipe pada saat yang bersamaan.

2. Tidak menyediakan fasilitas login bagi konsumen, sehingga

konsumen yang sudah pernah melakukan pemesanan dan

penginputan data diri tetap harus menginputkan data-data lagi

ketika melakukan pemesanan motor lainnya di lain waktu.

3. Sistem memiliki error handling yang kurang sempurna untuk

proses pengubahan status pemesanan pada daftar order.

4. Keamanan sistem pada halaman untuk admin masih sederhana,

yaitu hanya dengan menggunakan username dan password.

Page 174: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

152

V.2 Teknologi JSP Pembangun Sistem e-Commerce motor Honda

Sistem e-Commerce motor Honda yang bersifat dinamis ini dibangun

dengan menggunakan bahasa pemrograman JSP yang berdasarkan teknologi Java

yang sudah terbukti ketangguhannya dalam pembuatan suatu aplikasi web. Oleh

karena JSP merupakan bagian dari platform Java maka JSP juga mempunyai

karakteristik “Write Once, Run Aywhere”. Selain itu, dengan teknologi JSP,

pembuatan dan manajemen halaman web dinamis menjadi lebih mudah karena

dapat menyisipkan tag atau skrip dengan data atau isi dinamik yang akan

ditampilkan pada bagian-bagian tertentu dari halaman web yang dibangun.

V.3 Manfaat Sistem e-Commerce motor Honda

V.3.1 Manfaat Sistem bagi Pengunjung Selaku Konsumen.

Beberapa manfaat yang bisa diberikan dari hasil implementasi sistem e-

Commerce motor Honda bagi pengunjung adalah :

1. Pengunjung memperoleh informasi yang cukup detail tentang

motor Honda dengan cara yang sangat mudah, karena situs e-

Commerce motor Honda ini dapat diakses tanpa dibatasi ruang dan

waktu selama terdapat jaringan internet.

2. Pengunjung dapat melakukan proses pemesanan motor Honda

yang ada pada Astra Honda Motor cabang Yogyakarta, kapan saja

dan dimana saja selama terdapat akses internet.

Page 175: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

153

3. Pengunjung tidak diharuskan melakukan registrasi terlebih dahulu

untuk dapat melakukan pemesanan motor.

V.3.2 Manfaat Sistem bagi Pihak Astra Honda Motor cabang Yogyakarta

Sistem e-Commerce motor Honda memberikan manfaat yang dapat

menjawab permasalahan seperti yang telah dijelaskan pada Bab I sebelumnya

bagi pihak Astra Honda Motor cabang Yogyakarta. Beberapa manfaat yang

dihasilkan adalah :

1. Promosi dan penjualan produk-produk motor Honda yang ada pada

Astra Motor Yogyakarta menjadi lebih optimal karena media web

mudah dijangkau oleh konsumen selama terdapat akses internet.

2. Astra Honda Motor cabang Yogyakarta dapat memberikan

informasi tentang happening discout dan berita-berita yang akurat

dengan cepat kepada masyarakat umum karena masyarakat umum

dapat mengakses situs e-Commerce motor Honda melalui jaringan

internet setiap saat.

3. Memudahkan kerja karyawan bagian penjualan dalam melakukan

promosi motor Honda kepada konsumen.

Page 176: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

154

BAB VI

PENUTUP

VI.1 Kesimpulan

Setelah melewati tahap analisa dan implementasi sistem e-Commerce

motor Honda untuk Astra Honda Motor cabang Yogyakarta, dapat ditarik

beberapa kesimpulan yaitu :

1. Sistem dapat berjalan dengan baik saat di implementasikan di lab,

sehingga tidak menutup kemungkinan untuk dapat digunakan dalam

kondisi yang sesungguhnya.

2. Teknologi JSP dan database MySql dapat digunakan untuk

mendukung pembangunan sistem e-Commerce motor Honda.

3. Dengan memanfaatkan media web, sistem e-Commerce motor Honda

diharapkan dapat digunakan oleh pihak Astra Honda Motor cabang

Yogyakarta sebagai sarana promosi dan memperluas penjualan

motor Honda, karena media web dapat dijangkau oleh masyarakat

kapanpun dan dimanapun selama terdapat akses internet.

4. Dengan mengakses sistem e-Commerce motor Honda melalui

internet kapanpun dan dimanapun, konsumen dapat memperoleh

informasi yang detail mengenai spesifikasi motor-motor Honda yang

dapat digunakan sebagai referensi sebelum konsumen membeli

motor Honda dan konsumen dapat langsung melakukan pemesanan

motor Honda secara online.

Page 177: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

155

VI.2 Saran

Saran yang dapat penulis usulkan untuk pengembangan sistem e-

Commerece motor Honda menjadi lebih baik dan sempurna adalah :

1. Tampilan antar muka sistem e-Commerce motor Honda khususnya

untuk pengunjung lebih disempurnakan lagi dengan menggunakan

media flash atau video agar presentasi motor terlihat lebih dinamis

dan menarik.

2. Jika diperlukan, sistem bisa ditambahkan fasilitas shooping cart dan

fasilitas home customer.

3. Sistem akan lebih sempurna apabila terdapat fasilitas yang

menangani masalah pengiriman dan pengembalian barang.

4. Program error handling bisa lebih disempurnakan lagi.

Page 178: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

156

DAFTAR PUSTAKA

Budi Sutedjo, Perencanaan & Pengembangan Sistem Informasi , Penerbit Andi

Yogyakarta, 2002

Jogiyanto Hartono, Analisis & Disain Sistem Informasi : Pendekatan

Terstruktur , Penerbit Andi Yogyakarta, 1990

Abdul Kadir, Dasar Pemrograman WEB dengan HTML, CSS, Java Script dan

PHP , Penerbit Andi Yogyakarta, 2002

Abdul Kadir, Dasar Pemrograman WEBDinamis dengan JSP (Java Server

Pages) , Penerbit Andi Yogyakarta, 2004

Isak Rickyanto, ”Belajar Sendiri Java Server Pages”, Penerbit Elex Media

Komputindo Jakarta, 2002

Alb. V. Dian Sano, ”24 Jam Menguasai HTML, JSP dan MySQL”, Penerbit Andi

Yogyakarta, 2005

Rahmat Priyanto, Belajar Sendiri menguasai MySQL 5”, Penerbit Elex Media

Komputindo Jakarta, 2007

Wahana Komputer, ”Apa dan Bagaimana e-Commerce”, Penerbit Andi

Yogyakarta, 2006

Jeffrey F .Rayport & Bernard J. Jaworski, ”Introducing to e-Commerce”,

International Edition

Budi Permana, “Adobe Photoshop CS”, Penerbit Elex Media Komputindo Jakarta,

2005

Modul Kuliah Pengantar Komputer

Modul Kuliah e-Commerce

Page 179: E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI …Ketikatibasaat perpisahan janganlah kalian berduka, sebab apa ... yangtiada pernah berhenti memberikan semangat,dukungan dan doa yang

157

Laporan-laporan Tugas Akhir, Teknik Informatika Sanata Dharma, Yogyakarta.

www.statistic.gunadharma.ac.id/idkf/idkf/aplikasi/e-commerce/10-pertanyaan-

tentang-e-commerce-03-2000.rtf

www.ilmu-komputer.com