Anda di halaman 1dari 33

BAB III

PEMBAHASAN MASALAH

3.1 Sejarah Singkat Perusahaan


SEM Depok merupakan suatu usaha showroom motor Suzuki yang beralamat
di jalan Margonda Raya No.27. SEM Depok ini telah berdiri 10 tahun yang lalu.
Industri ini merupakan cabang dari Wisma Mobil yang merupakan kantor pusat dari
Suzuki di Indonesia. Secara garis besar showroom ini menjual beberapa merek motor
Suzuki seperti Shogun, Smash, Spin, Sky Wave, Thunder, Satria, dll. Seiring
berjalannya waktu, industri ini terus berkembang dan memiliki beberapa konsumen.
Dalam perancangan website ini terdapat berbagai macam fasilitas di antaranya
adalah fasilitas pemesanan motor, fasilitas buku tamu sehingga interaksi dengan
pengunjung dapat dioptimalkan. Karena website ini bertujuan untuk mempromosikan
produk maka di sini terdapat foto dan keterangan dari setiap produk. Selain itu juga
terdapat beberapa tips dan file yang dapat didownload oleh user.
Pengunjung dapat mengetahui informasi motor yang tersedia dalam showroom
tersebut. Sehingga konsumen tidak perlu datang langsung ke showroom agar dapat
lebioh menghemat waktu dan biaya dari konsumen yang bersangkutan.

3.2 Struktur Navigasi


Struktur navigasi yang digunakan pada website Showroom Motor Suzuki ini
adalah struktur navigasi komposit (campuran), yaitu merupakan gabungan dari ketiga
struktur sebelumnya, struktur navigasi ini disebut juga dengan struktur navigasi bebas.
Dalam membuat website, hal terpenting terlebih dahulu adalah merancang
suatu navigasi agar tidak menimbulkan kesalahan dan kesulitan dalam penyampaian
informasi. Dalam aplikasi website ini terdapat dua bentuk perancangan navigasi yaitu
perancangan navigasi pengunjung (user) dan perancangan navigasi administrator.

3.2.1 Struktur Navigasi Pengunjung ( User )


Seperti telah dijelaskan sebelumnya bahwa struktur navigasi yang dipakai
untuk pengunjung adalah struktur navigasi composite, dengan bagannya adalah
sebagai berikut:

19
Gambar 3.1 Struktur Navigasi User ( Composite )

3.2.2 Struktur Navigasi Administrator

Struktur Navigasi administrator berbeda dengan struktur navigasi pengunjung.


Nantinya halaman administrator ini hanya bisa dikunjungi oleh Administrator.
Struktur Navigasi yang digunakan adalah struktur navigasi composite. Strukturnya
antara lain :

Gambar 3.2 Struktur Navigasi Admin ( Composite )

3.3 Analisis Perancangan


Dalam pembuatan rancangan, akan dijelaskan tahapan pembuatan halaman
dari website Showroom Motor Suzuki, dimana nantinya pengunjung dan
administrator dapat dengan mudah melakukan kegiatan transaksi dan update pada
website ini. Halaman website ini akan dibagi menjadi dua, yaitu :
1. Halaman yang bisa diakses oleh seluruh pengunjung ( user ). Halaman ini berisisi
tentang katalog produk yang dijual, profile tentang Showroom Motor Suzuki
tersebut, file-file yang dapat di download, guestbook, comment dan juga news atau
tips-tips dalam merawat motor dengan baik.

20
2. Halaman administrator, halaman ini dibuat untuk mempermudah administrator web
dalam mengatur keseluruhan isi web seperti add, edit dan delete. Halaman ini tidak
di khususkan untuk admin saja dan tidak dapat dikunjungi oleh user.

3.3.1 Halaman Pengunjung ( User )


Halaman ini menampilkan halaman yang bisa diakes oleh seluruh pengunjung
Website Showroom Motor Suzuki, yaitu :

a. Halaman Home, menampilkan halaman utama dari website tersebut yang


berisi tentang news dan tips, dan kategori dari produk.
b. Halaman Products, Halaman ini menampilkan daftar produk-produk yang
dijual, jenis motor, spesifikasinya, dan harga motor tersebut.
c. Halaman Gallery/Tips. Halaman ini berisi tentang tips untuk merawat motor.
d. Halaman News, berisi tentang berita-berita terbaru dari dunia otomotif baik
dalam maupun luar negeri.
e. Halaman Download, berisi tentang file-file yang bisa di download oleh user,
seperti daftar harga motor, tips tentang motor, dan brosur motor suzuki.
f. Halaman Guestbook, berisi form pengisian buku tamu untuk pengunjung
website, pada halaman ini user dapat berinteraksi dengan cara mengisi form-
form yang ada. Dalam halaman ini juga terdapat kode verifikasi yang bersifat
random.
g. Halaman Order, berisi tentang form pemesanan produk yang ingin dipesan.
h. Halaman Comment, berisi form pengisian pesan dan kritik pengunjung, disini
user juga dapat melihat comment, nama pengirim yang ada dalam website
tersebut.
i. Halaman About Us, berisi tentang profil perusahaan, sejarah, apa yang dijual
dan penghargaan apa saja yang telah dicapai perusahaan.
j. Halaman How To order, berisi tentang bagaimana cara mengajukan
pemesanan, syarat apa saja yang diperlukan dan daftar harga motor.

21
3.3.2 Halaman Administrator
Pada halaman ini user tidak dapat mengaksesnya karena halaman ini hanya
bisa diakses oleh administrator. Halaman Administrator ini meliputi :

a. Halaman Login, berisi tentang form login admin yang didalamnya terdapat
nama dan password yang harus di isi untuk dapat masuk kedalam halaman
admin.
b. Halaman Home, berisi tentang tampilan daftar order, jenis motor Suzuki yang
dipesan, nama pemesan, nomor telepon pemesan, tanggal atau waktu
pemesanan, dan alamat pemesan.
c. Halaman Category, berisi tentang list daftar kategori dari jenis motor.
Dihalaman ini admin dapat menambah, mengupdate dan menghapus kategori
yang ada.
d. Halaman Products. Pada halaman ini berisi tentang daftar produk yang
tersedia pada Showroom Motor Suzuki, admin juga dapat menambah,
mengupdate dan menghapus produk-produk yang ada.
e. Halaman News, berisi tentang daftar berita yang telah ada, disini admin juga
dapat menambah, menginput dan menghapus berita-berita yang ada.
f. Halaman Upload, berisi tentang file-file yang di upload, file yang di upload
otomatis akan tampil dalam halaman download yang dapat diakses dan
didownload oleh user.
g. Halaman Logout, halaman yang berfungsi untuk keluar dari halaman admin
dan kembali pada halaman user.

3.4 Rancangan Story board


Sebelum pembuatan tahap pelaksanaan pembuatan halaman aslinya, terlebih
dahulu dibuat rancangan atau story boardnya. Berikut akan ditampilkan rancangan
storyboard, dalam merancang website Showroom Motor Suzuki ini penulis
menggunakan bantuan css dalam mengatur tinggi, lebar, warna, dan ukuran untuk
tampilan layout halaman web. Pada pembuatan website Showroom Motor Suzuki ini,
setiap halaman dibagi menjadi tiga bagian, yaitu : header, body, dan footer. Berikut
adalah rancangan output website Showroom Motor Suzuki, yang terdiri dari halaman
user dan halaman admin.

22
3.4.1 Rancangan Halaman User
Pada rancangan tampilan halaman user berisikan, rancangan tampilan yang
dapat dilihat oleh user. Isi dari rancangan tampilan halaman user sendiri adalah
rancangan halaman home, rancangan halaman products, rancangan halaman detail
dari produk yang ada, rancangan halaman gallery/tips, rancangan halaman news,
rancangan halaman download, rancangan halaman guestbook, rancangan halaman
look comment, rancangan halaman about us, dan rancangan halaman how to order.

3.4.1.1 Rancangan Halaman Home


Pada halaman home ini, header berisikan menu atas, pada body berisikan
tentang promosi yang sedang dilakukan, sidebaritem berisi tentang kategori produk
dan tips, dan pada footer berisikan menu bawah. Pada kategori produk, akan secara
langsung menuju halaman produk, dan melihat tips apa saja yang dapat diperoleh
user.

Logo Showroom Header


Home Products Galery/Tip News Download Guestbook

Sidebaritem Body
• Daftar produk Gambar pruduk atau promosi tentang produk
-
-

• Tips dan news


-
-

About Us | How To Order | Contact Us


Footer

Gambar 3.3 Rancangan Halaman Home

3.4.1.2 Rancangan Halaman Products


Pada halaman products, bagian body berisikan kategori dari produk, dan juga
produk. Kategori produk ini adalah kategori yang sebelumya dibuat dari database, dan
kemudian diurutkan berdasarkan abjad. Sidebaritem berisi tentang kategori produk
dan tips. Untuk header berisikan menu atas, sedangkan untuk footer berisikan menu
bawah.

23
Logo Showroom Header
Home Products Galery/Tip News Download Guestbook

Sidebaritem Body
• Daftar produk Gambar pruduk dan keterangan produk
-
-

• Tips dan news


-
-

About Us | How To Order | Contact Us


Footer

Gambar 3.4 Rancangan Halaman Products

3.4.1.3 Rancangan Halaman Galery/Tips


Pada halaman gallery/tips ini berisi tentang tips-tips untuk merawat dan
menggunakan kendaraan bermotor dengan baik dan benar, selain itu juga terdapat
gambar-gambar dari dunia otomotif baik dalam dan luar negeri.

Logo Showroom Header


Home Products Galery/Tip News Download Guestbook

Sidebaritem Body
• Daftar produk Daftar tips dan gambar
-
-

• Tips dan news


-
-

About Us | How To Order | Contact Us


Footer

Gambar 3.5 Rancangan Halaman Galery/Tips

24
3.4.1.4 Rancangan Halaman News
Halaman news ini merupakan halaman tentang berita apa saja yang telah
diinput. berisikan berita terbaru seputar produk, berita seputar kegiatan dunia otomotif
atau tentang perusahaan dan event-event yang akan atau yang telah diadakan.

Logo Showroom Header


Home Products Galery/Tip News Download Guestbook

Sidebaritem Body

• Daftar produk Berisi tentang News


-
-

• Tips dan news


-
-

About Us | How To Order | Contact Us


Footer

Gambar 3.6 Rancangan Halaman News

3.4.1.5 Rancangan Halaman Download


Pada halaman ini tidak jauh berbeda dengan halaman sebelumnya, halaman ini
berisi tentang file-file yang dapat di download oleh user yang sebelumnya telah di
upload oleh admin. File tersebut berupa document, pdf, jpg dan lain-lain yang
berhubungan dengan website ini, maupun dengan produk-produk yag tersedia.
Selain itu kita juga dapat mendownload list harga, dan juga tips tentang kendaraan
bermotor yang disediakan oleh admin.

25
Logo Showroom Header
Home Products Galery/Tip News Download Guestbook

Sidebaritem Body

• Daftar produk Berisi tentang nama-nama file


-
-

• Tips dan news


-
-

About Us | How To Order | Contact Us


Footer

Gambar 3.7 Rancangan Halaman Download

3.4.1.6 Rancangan Halaman Guestbook


Pada halaman ini tidak jauh berbeda dengan halaman sebelumnya. Halaman
guestbook, berisikan form inputan yang diperuntukan bagi user yang mempunyai
saran, dan kritik tentang website Showroom Motor Suzuki. Dan semua saran atau
kritik yang dikirim, akan langsung tersimpan pada database guestbook. Dalam
halaman ini terdapat kode acak yang digunakan untuk mensubmit pesan yang ditulis
oleh user. Terdapat button Submit yang berfungsi untuk mengirim pesan kedalam
database website dan Button Reset yang berfungsi untuk menghapus data yang diisi
pada form.

26
Logo Showroom Header
Home Products Galery/Tip News Download Guestbook

Sidebaritem Body
• Daftar produk Nama
- Addres
- E-mail
Comment
• Tips dan news
- Insert Code
-
Code
Submit Reset

About Us | How To Order | Contact Us


Footer

Gambar 3.8 Rancangan Halaman Guestbook

3.4.1.7 Rancangan Halaman About Us


Pada halaman ini berisi tentang profil dari perusahaan, sejarah, bagaimana
showroom ini terbentuk, struktur kepengurusan, produk yang telah dipasarkan dan
penghargaan yang didapatkan oleh Showroom Motor Suzuki.

Logo Showroom Header


Home Products Galery/Tip News Download Guestbook

Body

Berisi tentang profil dan sejarah perusahaan

About Us | How To Order | Contact Us


Footer

Gambar 3.9 Rancangan Halaman About Us


27
3.4.1.8 Rancangan Halaman How To Order
Halaman ini menjelaskan secara rinci bagaimana tata cara yang dilakukan
untuk pemesanan motor, apa saja yang dibutuhkan sebagai syarat, dan harga-harga
motor yang ada dalam Showroom Motor Suzuki. Halaman ini berbeda dengan
halaman sebelumnya disini tidak terdapat sidebaritem dikarenakan pada halaman ini
akan ditampilkan file berbentuk pdf.

Logo Showroom Header


Home Products Galery/Tip News Download Guestbook

Body
Berisi tentang bagaimana cara pemesanan, syarat dan harga motor (*.pdf)

About Us | How To Order | Contact Us


Footer

Gambar 3.10 Rancangan Halaman How To Order

3.4.2 Rancangan Halaman Admin


Pada rancangan tampilan halaman admin berisikan, rancangan tampilan yang
dapat dilihat oleh admin saja, user tidak dapat masuk kedalam halaman admin ini. Isi
dari rancangan tampilan halaman admin sendiri adalah rancangan halaman login,
rancangan halaman home, rancangan halaman category, rancangan add, edit, delete
category, rancangan halaman products, rancangan halaman add, edit, delete products,
rancangan halaman detail dari product, rancangan halaman news, rancangan halaman
daftar category, rancangan halaman upload, dan rancangan halaman logout.

3.4.2.1 Rancangan Halaman Login Admin


Pada halaman ini akan menampilkan form login untuk admin, di halaman ini
admin di haruskan melakukan pengisian nama dan password. Jika keduanya benar
maka akan tampil halaman home, jika salah maka akan tampil halaman wrong.
Halaman admin ini hanya dapat dikunjungi oleh administrator.
28
Logo Showroom Header
Home Category Products News Upload Logout

Body
Login Admin

Nama

Pass Gambar Logo Suzuki

Submit Reset

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.11 Rancangan Halaman Login Admin

3.4.2.2 Rancangan Halaman Home Admin


Pada halaman ini terdapat gambar logo Suzuki dan kata Welcome untuk admin
yang dapat mengakses halaman tersebut, selain itu pada halaman ini juga terdapat
daftar pemesan motor yang telah memesan motor dari Showroom Motor Suzuki.
Didalamnya terdapat code motor, nama pemesan, nomor telepon pemesan, tanggal
pemesanan, dan alamat dari pemesan. Data-data ini diambil dari table pesan yang ada
dalam database administrator.

Logo Showroom Header


Home Category Products News Upload Logout

Body
Berisi tentang daftar pemesan motor, waktu dan motor yang dipesan.

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.12 Rancangan Halaman Home Admin


29
3.4.2.3 Rancangan Halaman Category Admin
Halaman ini merupakan halaman yang berisi tentang category product yang
ada dalam showroom tersebut. Disini terdapat beberapa category diantaranya, adalah
NigthRider, Satria, Shogun, SkyWave, Smash, Spin, dan Thunder.

Logo Showroom Header


Home Category Products News Upload Logout

Body

Nigth Rider add / edit / delete


Satria F150 add / edit / delete
Shogun 125 add / edit / delete
Sky Wave add / edit / delete
Smash 110 add / edit / delete
Spin add / edit / delete
Thunder 125 add / edit / delete

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.13 Rancangan Halaman Category Admin

3.4.2.4 Rancangan Halaman Product Admin


Pada halaman ini terdapat jenis-jenis product yang ada. Dihalaman ini admin
juga dapat menambah, mengedit dan menghapus daftar product yang ada.

Logo Showroom Header


Home Category Products News Upload Logout

Body
Satria F 150 add / edit / delete
Shogun 125 NR add / edit / delete
Shogun 125 R add / edit / delete
Shogun 125 RR add / edit / delete
Shogun 125 SP add / edit / delete
Skywave 125 add / edit / delete
Skywave 125 NR add / edit / delete
Smash 110 add / edit / delete

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer
Gambar 3.14 Rancangan Halaman Product Admin

30
3.4.2.5 Rancangan Halaman News Admin
Pada halaman ini akan ditampilkan news yang berdasarkan waktu news
tersebut di update. Admin juga dapat menambah, mengedit dan menghapus daftar
news yang ada. Logo Showroom Header
Home Category Products News Upload Logout

Body

Judul News
Nama pengirim, Tanggal update news

Action : Edit / delete

Add News

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.15 Rancangan Halaman News Admin

3.4.2.6 Rancangan Halaman Upload Admin


Halaman ini merupakan halaman untuk mengupload file yang hanya dapat
dilakukan oleh admin. Admin dapat mencari file yang ingin di upload dengangan cara
browse.
Logo Showroom Header
Home Category Products News Upload Logout

Body

File yang di upload :


Browse Upload

Daftar file yang telah di upload


*
*

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.16 Rancangan Halaman Upload Admin

31
3.4.2.7 Rancangan Halaman Add Categroy
Halaman ini berisi tentang form untuk menambah Category yang ada.

Logo Showroom Header


Home Category Products News Upload Logout

Body

Category :

Submit

Back

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.17 Rancangan Halaman Add Categroy

3.4.2.8 Rancangan Halaman Add Product


Halaman ini berisi tentang penambahan product baru yang akan diinput.
Didalamnya juga dapat kita input gambar dari product yang kita masukkan, selain itu
kita juga dapat menuliskan spesifikasi, harga dan code dari product tersebut.

Logo Showroom Header


Home Category Products News Upload Logout

Body

Category :
Code :
Price :
Spesifikasi :
Image :
Browse
Back
Submit

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.18 Rancangan Halaman Add Product

32
3.4.2.9 Rancangan Halaman Add News
Halaman ini berisi tentang penambahan news baru yang akan diinput. Seperti
Judul, focus tentang product atau tentang perusahaan, bahkan event yang diadakan.

Logo Showroom Header


Home Category Products News Upload Logout

Body

Subject :
Category :
Headline :
Focus :
From :

Submit Reset Back

Suzuki © SEM Depok 2009. Powered by Suzuki Motor


Footer

Gambar 3.19 Rancangan Halaman Add News

3.5 Struktur Database


Dalam aplikasi ini dibutuhkan basis data yang konsisten dan mampu melayani
penyimpanan data dan pengambilan data. Maka untuk merancang basis data ini akan
dibuat ERD dan Tabel Databasenya dengan menggunakan program Mysql Versi 5.0.
Perancangan database penting dilakukan untuk memahami alur data, sehingga
memudahkan dalam pengolahan dan perawatan data.
Dalam database suzuki ini terdiri dari 8 buah tabel, yaitu tabel admin berisikan
tentang user dan password admin yang dapat digunakan untuk mengupdate website,
tabel berita berisi tentang daftar berita yang akan ditampilkan, tabel guestbook berisi
tentang komentar dari user, tabel kategori merupakan tabel untuk jenis-jenis produk
yang ada, tabel pesan menyimpan semua bentuk pesanan user, tabel produk
menyimpan semua produk yang telah diupload, dan tabel upload berfungsi untuk
menyimpan file yang diupload oleh admin.

33
3.5.1 Struktur Entity Relational Database (ERD)
Entity Relational Diagram merupakan suatu model jaringan yang
menggunakan susunan data yang disimpan dari sistem secara abstrak. Tujuan dari
penggambaran struktur ERD adalah untuk menunjukkan obyek-obyek data atau entity
dan relationship dari obyek-obyek didalam database. Sebelum membuat ERD tersebut
kita harus mengumpulkan data dan menganilisis, kemudian kita mengidentifikasi
entity dan menentukan atribut dari entitas yang digunakan.
Sebelum membuat entity dari website tersebut kita terlebih dahulu :
• Menentukan data dan analisis yang didapat dari survey hasil pencarian data,
• Mengidentifikasi entitas yang digunakan, seperti pemesan, produk, kategori.
• Mengidentifikasi atribut setiap entitas, dan
• Mengidentifikasi relasi yang terjadi diantara entitas-entitas tersebut.

Tabel 3.1 Relasi ERD


Entitas 1 Relasi Entitas 2
Pemesan Pesan Produk
Pemesan Lihat Berita
Pemesan Isi Guestbook
Admin Lakukan Upload
Produk Punya Kategori

Hasil Entity Relational Databasenya adalah Sebagai berikut :

Gambar 3.20 Struktur ERD

34
3.5.2 Normalisasi
Proses normalisasi database dengan menganalisis data-data berdasarkan
persyaratan tertentu dalam beberapa tingkatan berdasarkan asumsi berikut :
• Setiap produk yang dipesan harus mempunyai id_produk.
• Setiap pemesan boleh memesan lebih dari satu produk.

3.5.2.1 Bentuk Tidak Normal ( Unnormalized )

Tabel 3.2 Bentuk Tidak Normal ( Unnormalized )

id
nama
alamat
email
tanggal
coment
id_pesan
produk
tgl_pesan
nama
kategori_id
produk_id
produk
harga
spesifikasi
image

35
3.5.2.2 Bentuk Normal Pertama ( 1NF )

Tabel 3.3 Bentuk Normal Pertama ( 1NF )

Pemesan
id
nama*
email
alamat
tanggal
coment
Pesan
id_pesan*
produk
tgl_pesan
nama
Produk
produk_id*
kategori_id
produk
harga
spesifikasi
image

36
3.5.2.3 Bentuk Normal Kedua ( 2NF )

Tabel 3.4 Bentuk Normal Kedua ( 2NF )

Pemesan Pesan Produk

id id_pesan* produk_id*
nama* produk** kategori_id
email tgl_pesan produk
alamat nama** harga
tanggal spesifikasi
coment image

3.5.3 Struktur Tabel


Tabel yang ada dalam web tersebut dibuat dengan menggunakan aplikasi
MySQL versi 5.0 dengan PhpMyAdmin sebagai database. Dalam tabel akan ada field-
field yang diperlukan dalam perancangan tabel. Berikut ini nama-nama tebel dan field
yang dibuat.

3.5.3.1 Tabel Admin


Tabel admin berisi data id yaitu nomor urut dari admin, username yang
berisikan nama dari admin tersebut, password yang berisikan password dari admin
yang telah terdaftar.
Tabel 3.5 Tabel Admin

Field Tipe Ukuran Keterangan


id_admin tinyint 4 Berisikan Urutan Id
username varchar 30 Berisikan Nama Admin
password varchar 25 Berisikan Password Admin

37
3.5.3.2 Tabel Berita
Pada tabel berita ini berisikan tentang berita yang akan ditampilkan dalam
news dihalaman user, tabel berita ini terdiri dari urutan berita, kategori berita, judul
berita, tema berita, isiberita , pengirim, dan tanggal berapa berita itu dimasukan.

Tabel 3.6 Tabel Berita

Field Tipe Ukuran Keterangan


id_berita int 5 Berisikan urutan berita
id_kategori int 3 Berisikan kategori berita
judul varchar 100 Berisikan judul berita
headline text - Berisikan tema berita
isi text - Berisikan isi dari berita
pengirim varchar 15 Berisikan tentang Pengirim
tanggal datetime - Berisikan waktu pengiriman

3.5.3.3 Tabel Guestbook


Pada tabel guestbook berfungsi untuk menyimpan testimonial baik berupa
kesan, pesan, saran dan kritik dari user yang telah diinputkan sehingga user lain dapat
melihat testimonial yang lama. Berikut susunan tabel guestbook :

Tabel 3.7 Tabel Guestbook

Field Tipe Ukuran Keterangan


id int 11 Berisikan urutan guestbook
nama varchar 20 Berisikan nama pengirim
alamat varchar 30 Berisikan alamat pengirim
email varchar 30 Berisikan email pengirim
tanggal datetime - Berisikan waktu pengiriman
komentar text - Berisikan isi pesan

38
3.5.3.4 Tabel Kategori
Pada tabel kategori berfungsi sebagai penyimpan kategori dari produk yang
akan ditampilakan. Berikut susunan tabel kategori :

Tabel 3.8 Tabel Kategori

Field Tipe Ukuran Keterangan


kategoriID tinyint 4 Berisikan urutan kategori
kategori varchar 30 Berisikan nama kategori

3.5.3.5 Tabel Pemesan


Pada tabel pemesan berisi data - data dari pemesan produk.

Tabel 3.9 Tabel Pemesan

Field Tipe Ukuran Keterangan


id int 11 Berisikan urutan pemesan
nama varchar 20 Berisikan nama pemesan
alamat varchar 30 Berisikan alamat pemesan
email varchar 30 Berisikan email pemesan
tanggal datetime - Berisikan waktu pemesan
komentar text - Berisikan catatan tentang produk

3.5.3.6 Tabel Pesan


Berikut susunan tabel pesan yang berisikan tentang daftar pesanan.

Tabel 3.10 Tabel Pesan

Field Tipe Ukuran Keterangan


id_pesan int 11 Berisikan urutan pesanan
produk varchar 30 Berisikan kode produk
tgl_pesan datetime - Berisikan waktu pemesanan
nama varchar 30 Berisikan nama pemesan

39
3.5.3.7 Tabel Produk
Pada tabel produk menyimpan data produk yang tersedia.

Tabel 3.11 Tabel Produk

Field Tipe Ukuran Keterangan


produk_id int 11 Berisikan code produk
kategori_id tinyint 4 Berisikan kategori produk
produk varchar 30 Berisikan nama produk
harga decimal 10,0 berisikan harga produk
spesifikasi text - beriskan informasi produk
image varchar 50 berisikan lokasi gambar

3.5.3.8 Tabel Upload


Pada tabel upload berisi gambar dan text yang telah diupload oleh admin.

Tabel 3.12 Tabel Upload

Field Tipe Ukuran Keterangan


id_upload int 11 Berisikan urutan upload
name varchar 90 Berisikan nama file
type varchar 50 Berisikan tipe file
size int 90 berisikan ukuran file
content mediumblob - beriskan file yang diupload

3.6 Rancangan Tampilan Website


Disini penulis akan menjelaskan langkah-langkah dalam pembuatan website
Suzuki SEM Depok dengan menggunakan beberapa aplikasi yang dipakai untuk
membuat website tersebut.

40
3.6.1 Pembuatan Tampilan Website
Dalam membuat tampilan website tersebut penulis menggunakan aplikasi
Adobe Photoshop CS3, langkah-langkahnya adalah sebagai berikut :
• Buka aplikasi Adobe Photoshop CS3, kemudian pilih New

Gambar 3.21 Adobe Photoshop CS3

• Kemudian akan tampil jendela setting yang berfungsi untuk menentukan


ukuran gambar, resolusi, dan warna yang digunakan. Setelah itu klik ok.

Gambar 3.22 Tampilan Jendela Setting

Gambar 3.23 Tampilan Layer Untuk Website


41
Gambar 3.24 bg_01.jpg

• Gambar diatas merupakan logo dari website yang dibuat dengan menggunakn
Adobe Photoshop CS3, dalam logo tersebut digunakan beberapa layer style
seperti gradient, emboss, dan shadow.

Gambar 3.25 Layer Style

• Jika ingin menggunakan style tersebut kita harus menceklis style yang kita
inginkan kemudian klik ok. Sedangkan Tampilan dibawah ini merupakan
tampilan dari background website yang digunakan oleh penulis.

Gambar 3.26 bg_02.jpg

Gambar 3.27 bg_03.jpg

• Setelah selesai membuat tampilan maka gambar-gambar tersebut kita save


dengan format *.jpg

42
3.6.2 Pembuatan Halaman Index
Halaman index pada website ini dibuat dengan menggunakan script PHP,
sedangkan design gambarnya dibuat dengan menggunakan Adobe Photoshop CS3 dan
Dreamweaver MX. Halaman ini merupakan halaman yang pertama ditampilkan pada
saat kita membuka website Suzuki SEM Depok. Langkah-langkahnya adalah sebagai
berikut :
• Pilih Dreamweaver Buat New file PHP Create
• Kemudian ketikan listing program untuk menampilkan nama website
<title>Suzuki SEM Depok</title>
• Buatlah menu dengan menggunakan gambar yang telah kita buat sebelumnya.
<div id="menu">
<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li><a href="index_produk.php" title="Products">Products</a></li>
<li><a href="galery.php" title="Galery Tips">Galery Tips</a></li>
<li><a href="news.php" title="News">News</a></li>
<li><a href="download.php" title="Download">Download</a></li>
<li><a href="link.php" title="Guest Book">Guest Book</a></li>
</ul> </div>
• Kemudian kita buat isi dari website tersebut, dalam halaman index ini terdapat
2 buah kolom, yaitu bagian sidebaritem dan bagian isi. Disini kita dapat
menuliskan tentang informasi mengenai Suzuki SEM Motor atau tips-tips
mengendarai kendaraan bermotor.
• Buatlah bagian footer ( yeah.php ) untuk melengkapi tampilan dari website.
• Terakhir save file yang telah kita buat dengan extension *.php
• Untuk melihat tampilan yang telah kita buat, kita aktifkan Apache, MySQL
dan internet explorer atau Mozilla. Ketikkan http://localhost/suzuki/ Maka
akan keluar tampilan seperti gambar dibawah ini :

43
Gambar 3.28 Tampilan index.php

3.6.3 Pembuatan Halaman Product


Pada pembuatan halaman ini cara yang dilakukan hampir sama dengan cara
membuat halaman index.php. Pada halaman ini ditampilkan list produk yang ada,
selain itu kita juga dapat melihat produk-produk yang baru dikeluarkan oleh suzuki.
Di bagian isi dari halaman ini ditampilkan gambar produk.

Gambar 3.29 Tampilan product.php

44
3.6.4 Pembuatan Halaman Galery / Tips
Di halaman ini kita dapat melihat beberapa koleksi gambar yang berhubungan
dengan produk yang ada. Pada bagian menu dari halaman ini cara membuatnya masih
sama dengan pembuatan menu pada halaman index.php. Dibagian sidebaritemnya
terdapat beberapa tips&trik yang dapat kit abaca ataupun kita download. Sedangkan
dibagian isi dari gallery terdapat frame untuk melihat beberapa gambar.

Gambar 3.30 Tampilan gallery.php

3.6.5 Pembuatan Halaman News


Pada halaman ini kita dapat membaca dan mengetahui isi berita yang ada pada
database, berita-berita tersebut diurutkan berdasarkan waktu diupload oleh admin.
Berita terbaru akan muncul di list yang teratas. Berita ini didapat dari table berita,
halaman ini juga terdapat listing php yang digunakan untuk menampilkan isi berita,
waktu dan tanggal berita diupload, judul berita, headline, dan bahkan pengupload dari
berita tersebut. Dalama table berita tersebut terdapat dua category, yang pertama
adalah untuk category produk, category ini di khususkan untuk berita mengenai
produk terbaru dari Suzuki. Sedangkan category yang kedua adalah category other,
category ini memungkinkan admin untuk menulis berita sekitar dunia otomotif atau
event yang sedang berlangsung. Pada bagian menu dari halaman ini cara membuatnya
masih sama dengan pembuatan menu pada halaman index.php.

45
3.6.6 Pembuatan Halaman Download
Di halaman ini kita dapat mendownload file, seperti daftar harga motor Suzuki
dan brosur dari produk Suzuki. Daftar file ini diupload oleh admin dalam database,
listing untuk halaman download.php :
<?
mysql_connect('localhost','root','');
mysql_select_db('suzuki');
$query = "SELECT id, name FROM upload";
$result = mysql_query($query) or die('Error, query failed');
if(mysql_num_rows($result) == 0){
echo "Database Kosong <br>";}else{
while(list($id, $name) = mysql_fetch_array($result))
?>
<a href="download.php?id=<?=$id;?>"><?=$name;?></a> <br>
Listing diatas berfungsi untuk mencari daftar file yang ada dalam database
Suzuki, kemudian database akan mencari id dari table upload, jika table yang bernama
upload tidak ada maka pesan yang akan disampaikan adalah database kosong, tapi jika
ada datanya makan akan langsung ditampilkan nama file tersebut dihalaman
download.php

Gambar 3.31 Tampilan download.php

46
3.6.7 Pembuatan Halaman Guestbook
Pada pembuatan halaman ini lebih banyak menggunakan form, yang
digunakan untuk mengirim comment, nama, alamat dan email ke dalam table
guestbook di database. Kita juga dapat membuat koneksi dengan address yang lain.
Melihat comment yang ada dalam database, kapan dan siapa pengirimnya. Di halaman
ini juga terdapat code acak yang terdiri dari abjad ( A-Z ) dan angka ( 0-9 ). Jika kita
salah dalam memasukkan code yang ada, maka comment tidak dapat dikirim. Code
ini diambil dari file random.php, berikut potongan listingnya :
<?php
session_start();
$alphanum = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$rand = substr(str_shuffle($alphanum), 0, 5);
$_SESSION['image_random_value'] = md5($rand);
$image = imagecreate(60, 30);
$bgColor = imagecolorallocate ($image, 255, 255, 0);
$textColor = imagecolorallocate ($image, 0, 0, 0);
imagestring ($image, 5, 5, 8, $rand, $textColor);
?>

Gambar3.32 Tampilan link.php

47
3.6.8 Pembuatan Menu Bagian Bawah
Menu ini adalah menu yang terdapat pada bagian footer atau bagian bawah
didalamnya terdapat beberapa pilihan seperti about us, syarat, how to order, dan
contact us. Sebelumnya kita membuat file yeah.php dengan listing :
<div id="footer">
<div class="menubawah">
<ul><a href="about.php" title="About Us">About Us</a>&nbsp;|&nbsp;
<a href="syarat.php" title"Syarat">Syarat</a>&nbsp;|&nbsp;
<a href="how.php" title="How">How To Order</a>&nbsp;|&nbsp;
<a href="contact.php" title="Contact Us">Contact Us</a></ul>
Copyright © 2009 SUZUKI, Inc. All Rights Reserved. <b><a href="about.php"
title="Suzuki SEM Depok">Suzuki SEM Depok</a></b>
</div></div>
Potongan listing diatas berfungsi untuk menghubungkan dengan halaman lain
yang terdapat pada menu tersebut. Kita dapat memlihat profile tentang perusahaan
pada halaman about us, dapat melihat syarat-syarat yang diperlukan untuk melakukan
pemesanan. Pada halaman syarat ini akan ditampilkan file berextension *.pdf dengan
menggunakan listing <embed src="document/syarat.pdf" width="670"
height="500">, bagaimana cara memesan barang, serta alamat dan nomor telepon
dara Suzuki SEM Depok

Gambar 3.33 Tampilan menu bawah

3.7 Implementasi Aplikasi


Setelah menginstall program XAMPP untuk database MySQL, untuk
melakukan koneksi ke MySQL yaitu dengan cara :
• mengaktifkan terlebih dahulu xampp_start yang terdapat di dalam folder
Xampp.
• Setelah itu akan muncul tampilan bahwa Apache dan MySQL telah aktif dan
dapat digunakan :

48
Gambar 3.34 Apache dan MySQL Aktif

• Setelah start Apache dan MySQL telah aktif, kemudian membuka aplikasi
internet browser seperti Microsoft Internet Explorer atau Mozilla Firefox.
• Kemudian ketikkan alamat http:/localhost pada bagian address bar browser
kemudian tekan enter. Maka akan keluar tampilan seperti berikut :

Gambar 3.35 Tampilan Halaman index XAMPP

49
• Kemudian pilih phpMyAdmin untuk membuat database

Gambar 3.36 Tampilan Halaman index phpMyAdmin

3.8 Cara Proses Upload File


Setelah selesai membuat aplikasi website Suzuki SEM Depok dengan
menggunakan PHP dan MySQL ini, selanjutnya kita akan meng-upload hasil desain
kita ke web hosting yang nyata.
Hal yang perlu diperhatikan oleh pembaca sekalian dalam memilih web
hosting sebagai host web kita adalah PHP. Kita membuat website dengan bahasa
pemrograman PHP, sehingga web hosting yang tidak mendukung bahasa ini tidak
akan mempunyai mesin interpreter PHP untuk menampilkan website ke hadapan
pelanggan.
Banyak web hosting gratis yang menawarkan fasilitas yang support PHP, hal
ini karena PHP sudah menjadi bahasa pemrograman web dinamis yang cukup familiar
di kalangan para web desainer. Dalam tulisan ini, penulis memberikan panduan
mengenai langkahlangkah upload ke web hosting yang mendukung PHP dan yang
gratis.

3.8.1 Mendaftarkan Domain Baru di Hosting Gratis


Pada umumnya syarat umum untuk mendaftarkan domain adalah mempunyai
alamat email, yang biasanya digunakan untuk konfirmasi tentang pendaftaran hosting
anda. Oleh karena itu anda harus mempunyai email baik yang gratis atau bayar.
• Buka Internet Explorer.

50
• Ketik http : //geocities.com setelah keluar tampilan pertama, langkah
selanjutnya klik button sign up a free website.
• Pada menu login, tulis nama e-mail dan password lalu klik sign in.
• Akan keluar sebuah halaman register, isilah pertanyaan–pertanyaan yang ada,
lalu klik button submit.
• Pada halaman selanjutnya klik “link build your website now”, lalu akan tampil
sebuah halaman dimana terdapat menu control panel yaitu : home, create &
update, maneger, promote, help, index. Pilih easy upload.
• Masukan file-file halaman website yang ditampilkan ke dalam browser,
setelah memasukan file –file halaman website. Aktifkan kedua chek box yang
ada pada menu easy upload, lalu klik upload files, klik yes.
• Pada halaman selanjutnya klik link “upload more files”.
• Lalu pada halaman selanjutnya klik button file manager, pada halaman
manager klik link “chek All”, dan klik button “upload files”, klik yes.
• Maka website ini sudah terdaftar di internet dengan nama
http://geocities.com/suzukisemdepok.com/

51