11. BAB III

19

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:

20

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.

21

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.

22

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.

23

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.

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.

Logo Showroom Header

About Us | How To Order | Contact Us Footer

Home Products Galery/Tip News Download Guestbook

Sidebaritem Body • Daftar produk

- -

• Tips dan news

- -

Gambar pruduk atau promosi tentang produk

24

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.

Gambar 3.5 Rancangan Halaman Galery/Tips




Sidebaritem Body

• Daftar produk - -

• Tips dan news

- -

Gambar pruduk dan keterangan produk




Sidebaritem Body


• Tips dan news

- -

Daftar tips dan gambar

25

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.

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.




Sidebaritem Body


• Tips dan news

- -

Berisi tentang News

26

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.




Sidebaritem Body


• Tips dan news

- -

Berisi tentang nama-nama file

27

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.

Gambar 3.9 Rancangan Halaman About Us




Sidebaritem Body


• Tips dan news

- -

Nama Addres E-mail Comment Insert Code

Submit Reset

Code




Body

Berisi tentang profil dan sejarah perusahaan

28

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.

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.




Body

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

29

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.

Gambar 3.12 Rancangan Halaman Home Admin


Suzuki © SEM Depok 2009. Powered by Suzuki Motor Footer

Home Category Products News Upload Logout

Body

Login Admin Nama Pass

Submit Reset

Gambar Logo Suzuki




Body

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

30

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.

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.

Gambar 3.14 Rancangan Halaman Product Admin




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




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

31

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.

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.

Gambar 3.16 Rancangan Halaman Upload Admin




Body

Judul News Nama pengirim, Tanggal update news Action : Edit / delete

Add News




Body

File yang di upload : Daftar file yang telah di upload * *

Browse Upload

32

3.4.2.7 Rancangan Halaman Add Categroy

Halaman ini berisi tentang form untuk menambah Category yang ada.

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.

Gambar 3.18 Rancangan Halaman Add Product




Body

Category :

Back

Submit




Body

Category : Code : Price : Spesifikasi : Image :

Back Browse

Submit

33

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.

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.




Body

Subject : Category : Headline : Focus : From :

Back Submit Reset

34

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

35

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

36

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

37

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

38

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


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


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

39

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


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


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


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

40

3.5.3.7 Tabel Produk

Pada tabel produk menyimpan data produk yang tersedia.

Tabel 3.11 Tabel Produk


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


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.

41

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

42

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.



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

dengan format *.jpg

43

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 :

44

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

45

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.

46

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

47

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

48

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> |

<a href="syarat.php" title"Syarat">Syarat</a> |

<a href="how.php" title="How">How To Order</a> |

<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 :

49

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

50

• 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.

51

• 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/

11. BAB III

Documents

Transcript of 11. BAB III