PERANCANGAN WEBSITE E-COMMERCEPADA

TOKO DJONO SILVER YOGYAKARTA

( Study Kasus : Toko Djono Silver )

Naskah Publikasi

diajukan oleh

Jatmikanto Aribowo

07.11.1547

kepada

JURUSAN TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM

YOGYAKARTA

2011

NASKAH PUBLIKASI

NASKAH PUBLIKASI

PERANCANGAN WEBSITE E-COMMERCEPADA

TOKO DJONO SILVER YOGYAKARTA

( Study Kasus : Toko Djono Silver )

disusun oleh

Jatmikanto Aribowo

07.11.1547

DOSEN PEMBIMBING

Armadyah Amborowati, S.Kom, M.Eng

NIK. 190302063

Ketua Jurusan S1 Teknik Informatika

Abas Ali Pangera, Ir, M.Kom

NIK. 190302008

DESIGN OF E-COMMERCE WEBSITE AT

DJONO SILVER SHOP YOGYAKARTA

PERANCANGAN WEBSITE E-COMMERCE PADA

TOKO DJONO SILVER YOGYAKARTA

Jatmikanto Aribowo

Jurusan Teknik Informatika

STMIK AMIKOM YOGYAKARTA

ABSTRACT

Djono Silver is a shop that specializes at sales and silver making with design from customers like miniatures, puppets, frames and accessories.

Website is an advertising and information media that can be accessed from anywhere, anytime and anyone. The design of an e-commerce website is a bright idea for Djono Silver shop to increase the sales and it can be known by domestic and foreign customers. The goal is to present information that customer need in order to more efficiently and flexibility.

The result that be achieved is the making of e-commerce website that able to fulfill information requirement about up-to-date shop, product sales and online orders. So e-commerce website can be alternative for customers to get their needs and it is expected to make easier for customers when transact without difficulty.

Keyword: design, website, e-commerce, up-to-date

1. PENDAHULUAN

Perdagangan merupakan hal yang tidak dapat dipisahkan dari kehidupan

manusia.Karena itulah perdagangan selalu mengalami perkembangan yang sangat pesat

seiring dengan perkembangan teknologi yang ada.Dengan semakin populer dan

menjamurnya internet, maka kini perdagangan on-line atau yang sering disebut dengan

e-commerce pun semakin berkembang pesat.

Toko Djono Silver merupakan toko home industri yang telah berdiri sejak tahun

1991. Toko tersebut menawarkan jasa berupa pemesanan dan penjualan berbagai

macam barang yang terbuatdari bahan dasar tembaga, kuningan dan perak seperti

miniatur, wayang, hiasan dinding dan aksesoris. Kebanyakan pelanggan meminta untuk

dibuatkan miniatur seperti kendaraan,binatang atau bangunan khas dari tempat tinggal

pemesan yang notabene adalah orang dari luar daerah jawa, seperti padang, makasar

dan juga pernah mendapat pemesanan dari Timor Leste. Toko sering kesulitan jika

mendapatkan pemesanan dari luar daerah Yogyakarta. Pihak pemesan harus datang ke

toko atau dengan media email seorang pemesan mengirimkan gambarnya. Dengan

bantuan website penulis harapkan mampu untuk menengahi baik proses pemesanan

maupun penjualan produk dari toko Djono Silver yang dapat menguntungkan baik pihak

toko maupun pihak pelanggan.

2. LANDASAN TEORI

2.1 E-Commerce

Electronic Commerce mendeskripsikan hal yang luas mengenai teknologi, proses

dan praktek yang dapat melakukan transaksi bisnis tanpa menggunakan kertas sebagai

sarana mekanisme transaksi, karena hal-hal tersebut dapat dilakukan dengan cara

menggunakan e-mail, Electronic Data Interchange (EDI), bahkan dengan menggunakan

jalur World Wide Web (WWW).

Definisi dari e-Commerce tidak dapat distandarkan dengan pasti, namun secara

umum e-Commerce merupakan satu set dinamis teknologi, aplikasi dan proses bisnis

yang menghubungkan perusahaan, konsumen dan komunitas tertentu melalui transaksi

elektronik dan perdagangan barang, pelayanan dan informasi yang dilakukan secara

elektronik. (Purbo & Wahyudi, 2001, p. 2)

3. ANALISIS DAN PERANCANGAN SISTEM

3.1. Analisis Sistem

Analisis sistem adalah sebuah istilah secara kolektif mendeskripsikan fase-fase

awal pengembangan sistem.Analisis sistem adalah teknik pemecahan masalah yang

menguraikan bagian-bagian komponen dengan mempelajari seberapa bagus bagian-

bagian komponen tersebut bekerja dan berinteraksi untuk mencapai tujuan

mereka.Analisis sistem merupakan tahapan paling awal dari pengembangan sistem yang

menjadi fondasi menentukan keberhasilan sistem informasi yang dihasilkan

nantinya.Tahapan ini sangat penting karena menentukan bentuk sistem yang harus

dibangun. Tahapan ini bisa merupakan tahap yang mudah jika klien sangat paham pada

masalah yang dihadapi dalam organisasinya dan tahu betul fungsionalitas dari sistem

informasi yang akan dibuat. Tetapi tahap ini bisa menjadi tahap yang paling sulit jika klien

tidak bisa mengidentifikasi kebutuhannya atau tertutup terhadap pihak luar yang ingin

mengetahui detail proses-prosesnya. (Fatta, 2007, p. 44)

3.1.1 Identifikasi Pelanggan Target

Segmentasi pasar pada Toko Djono Silver adalah untuk semua umur baik yang

berada di daerah, Indonesia maupun luar negeri.Dilihat dari segmentasi pelanggan yang

melibatkan semua golongan ini maka jenis e-commerce yang tepat bagi Toko Djono

Silver adalah Business-to-Consumer (B2C) yang menggambarkan kegiatan bisnis

melayani konsumen akhir dengan produk atau jasa.

3.2. Perancangan Sistem

3.2.1 Perancangan Model

Perancangan model adalah gambaran yang menjelaskan suatu bentuk sistem,

salah satunya adalah logika model yang digambarkan dengan data flow diagram.Data

Flow Diagram (DFD) yang pertama digambarkan adalah level teratas (top level) dan

diagram ini disebut dengan diagram konteks (context diagram).

Diagram konteks digunakan untuk menggambarkan aliran data secara umum dari

suatu entitas luar ke dalam sistem maupun sebaliknya dari sistem ke suatu entitas luar.

Melalui diagram konteks ini diharapkan dapat memperoleh gambaran umum secara garis

besar apa saja entitas luar yang terlibat dalam sistem. Diagram konteks hanya

mempunyai satu proses saja, proses ini mewakili dari seluruh sistem. Diagram konteks

untuk Sistem Informasi Toko Djono Sistem adalah seperti pada Gambar berikut :

Sistem Informasi Website B2C djonosilver

Admin User Biasa

User Terdaftar

Data KotaData UserData Kategori ProdukData ProdukData PembeliData PembelianData Pemesanan ProdukData InformasiData Kategori BeritaData BeritaData Komentar ProdukData Komentar BeritaData Komentar PesanData Komentar Pesan LoginData Hubungi Admin

Data BeritaData Pemesanan Produk

Data Komentar Pesan LoginData User

Info UserInfo Komentar Pesan LoginInfo Pemesanan ProdukInfo Berita

Info ProdukInfo Berita

Info InformasiInfo Komentar Produk

Info Komentar BeritaInfo Komentar Pesan

Data Keranjang BelanjaData Pembeli

Data Pendaftaran UserData Komentar Produk

Data Komentar BeritaData Komentar PesanData Hubungi Admin

Laporan PembelianLaporan PemesananInfo KotaInfo UserInfo Kategori ProdukInfo ProdukInfo PembelianInfo Pemesanan ProdukInfo InformasiInfo Kategori BeritaInfo BeritaInfo Komentar ProdukInfo Komentar BeritaInfo Komentar PesanInfo Komentar Pesan LoginInfo Hubungi Admin

Gambar 3.1 Diagram Konteks Sistem Yang Diusulkan

Gambar 3.1 menunjukkan bahwa sistem ini berinteraksi dengan tigaexternal entity

yaitu Admin, User Biasa dan User Terdaftar.Seorang Admin web dapat memasukkan

data informasi ke dalam sistem dan memperoleh seluruh hasil laporandatadari sistem

informasi yang diusulkan.User dapat melihat informasi dari, mengisikan komentar dan

melakukan proses pembelian tanpa harus registrasi.Untuk dapat melakukan pemesanan

produk user biasa diharuskan melakukan registrasi untuk menjadi user terdaftar.User

terdaftar dapat menginputkan berita untuk website, pemesanan produk dan manajemen

user.

Dari diagram konteks diatas kemudian akan digambar dengan lebih terinci lagi

yang disebut dengan overview diagram (level 0).Tiap-tiap proses di overview diagram

akan digambar secara lebih terinci lagi dan disebut dengan level 1. Tiap-tiap proses di

level 1 akan digambar secara lebih terinci lagi dan disebut dengan level 2, dan

seterusnya sehingga tiap-tiap proses dapat digambar lebih terinci lagi1.

Tabel 3.1 Keterangan dan Lambang DFD

Nama Keterangan Lambang

Data Proses

Aktivitas atau fungsi yang dilakukan untuk alasan

bisnis yang spesifik, biasa berupa manual maupun

terkomputerisasi

Data Flow Satu data tunggal atau kumpulan logis suatu data,

selalu diawali atau berakhir pada suatu proses.

Data Store Kumpulan data yang disimpan dengan cara

tertentu. Data yang mengalir disimpan dalam data

store. Aliran data di-update atau ditambahkan ke

data store

External

Entity

Orang, Organisasi, atau sistem yang berada di luar

sistem tetapi berinteraksi dengan sistem

3.2.2 Pemodelan Data

Data model adalah cara formal untuk menggambarkan data yang digunakan dan

diciptakan dalam suatu sistem bisnis. Model ini menunjukkan orang, tempat atau benda

di mana data di ambil dan hubungan antar data tersebut.

a. Entity Relationship Diagram (ERD)

ERD adalah gambar atau diagram yang menunjukkan informasi dibuat,

disimpan dan digunakan dalam sistem bisnis. Entitas biasanya

menggambarkan jenis informasi yang sama. Dalam entitas digunakan untuk

menghubungkan antar entitas yang sekaligus menunjukkan hubungan antar

data. Pada akhirnya ERD bisa juga digunakan untuk menunjukkan aturan-

aturan bisnis yang ada pada sistem informasi yang akan dibangun. Terdapat

tiga notasi dasar yang bekekerja pada model E-R yaitu entity sets,

relationshipsets dan attributes.

1Jogiyanto.HM, Analisis & Desain Sistem Informasi, Edisi kedua, Cetakan pertama, 1999,

Penerbit Andi, Yogyakarta. hal 714

Gambar 3.2 Entity Relationship Diagram Sistem Yang Diusulkan

b. Relasi Antar Tabel

Komentar_berita

PK id_komentar

nama_komentar

url

isi_komentar

tgl

jam_komentar

aktif

FK1 id_berita

Berita

PK id_berita

FK2 username

FK1 id_kategori

judul

judul_seo

isi_berita

hari

tanggal

jam

gambar

dibaca

tag

headline

aktif

Kategori_berita

PK id_kategori

nama_kategori

kategori_seo

Users

PK username

users

password

nama_lengkap

alamat

email

no_telp

level

blokir

id_sessionpesan

PK id_pesan

FK1 username

judul

judul_seo

isi_pesan

jumlah

tgl_masuk

gambar

harga

berat

FK2 id_kota

status_pesan

aktif

komentar_pesan_login

PK id_komentar

FK2 id_pesan

FK1 username

isi_komentar

tgl

jam_komentar

kota

PK id_kota

nama_kota

ongkos_kirim

komentar_pesan

PK id_komentar

FK1 id_pesan

nama_komentar

url

isi_komentar

tgl

jam_komentar

aktif

orders

PK id_orders

nama_kustomer

alamat

pesan

telpon

email

status_order

tgl_order

jam_order

FK1 id_kota

orders_detail

FK1 id_orders

FK2 id_produk

jumlah

Produk

PK id_produk

FK1 id_kategori

nama_produk

produk_seo

deskripsi

harga

berat

stok

tgl_masuk

gambar

dibeli

kategori_produk

PK id_kategori

nama_kategori

kategori_seo

orders_temp

PK id_orders_temp

FK1 id_produk

id_session

jumlah

tgl_order_temp

jam_order_temp

stok_temp

komentar_produk

PK id_komentar

FK1 id_produk

nama_komentar

url

isi_komentar

tgl

jam_komentar

aktif

hubungi

PK id_hubungi

nama

email

subjek

pesan

tanggal

modul

PK id_modul

nama_modul

link

static_content

gambar

urutan

link_seo

Gambar 3.3 Relasi Antar Tabel Sistem Yang Diusulkan

3.2.3 Perancangan Antar Muka

Gambar 3.4 Diagram Link Menu User Biasa

3.2.4 Perancangan Halaman Web

Perancangan halaman web digunakan sebagai patokan dalam membuat

sebuah antar muka (interface) yang akan mewakili tampilan dari website

yang akan dibuat. Berikut adalah rancangan tiap–tiap halaman untuk

pengguna web ini.

Halaman index merupakan halaman utama dimana setiap pengguna sistem akan

secara otomatis memasuki halaman ini disaat pertama kali membuka sistem. Terdapat

menu link untuk berpindah halaman sepertimenuinformation, produk, berita, order dan

faq.

Halaman Index

Sign UpProfilHome Produk Sign InInformasiBerita Keranjang Belanja Hubungi Kami

Pencarian : Text box form pencarian produk

Logo Headline News

Footer

Daftar Kategori Produk

Daftar Pelayanan Pelanggan

Daftar Produk Terlaris

Keranjang Belanja

Statistik User

Daftar Produk Pesan

Produk Produk Produk

Produk Produk Produk

Produk Terbaru

Gambar 3.5 Rancangan Halaman Index

4. IMPLEMENTASI

4.1. Homepage Web

Gambar 4.1 Manual Program Homepage Web

Pada homepage web terdiri dari 4 bagian terpenting

1. Header, yang terdiri dari logo web dan headline berita.

2. Menu, yang terdiri dari tombol navigasi (home, profil, produk, berita,

informasi, sign in, sign up, kerangjang belanja, hubungi kami).

3. Content, yang terdiri dari content sebelah kiri, tengah dan kanan. Content

sebelah kiri terdiri dari kategori produk, pelayanan pelanggan, produk

terbaru. Content tengah berisikan tentang produk-produk terbaru yang

dimiliki oleh website. Content sebelah kanan berisikan keranjang belanja,

statistik user dan produk dari user.

4. Footer, yang terdiri dari tombol navigasi home, about, produk, order, hubungi

kami.

Keterangankegunaan program :

1. Tombol angka pada header untuk melihat headline berita yang terbaru.

2. Tombol details pada headline berita untuk melihat informasi berita secara

lebih lengkap.

3. Tombol Navigasi pada menu digunakan untuk masuk atau menuju ke

halaman yang di inginkan.

4. Link nama kategori pada content sebelah kiri digunakan untuk melihat

semua kategori produk yang diinginkan.

5. Judul dan gambar pada content sebelah kiri produk terlaris apabila di klik

akan menuju detail dari produk.

6. Judul, gambar dan tombol navigasi selengkapnya pada content tengah

produk terbaru apabila di klik akan menuju ke detail produk yang diinginkan.

7. Link navigasi beli pada content tengah produk terbaru apabila di klik akan

menuju ke keranjang belanja beserta produk yang dibeli akan terlihat di

menu keranjang belanja.

8. Link selengkapnya pada content sebelah kanan keranjang belanja akan

muncul apabila user telah klik navigasi beli. Link selengkapnya apabila di

klik akan menuju ke menu keranjang belanja.

9. Judul, gambar pada content sebelah kanan produk dari user apabila di klik

akan menuju detail produk pemesanan dari user.

10. Link pada footer digunakan untuk masuk atau menuju ke halaman yang di

inginkan.

4.2. Implementasi Program

Pemograman merupakan proses implementasi terhadap pembuatan sistem

dengan melakukan pengkodean berdasarkan hasil perancangan perangkat lunak yang

telah dibuat sehingga berbentuk sistem baru yang sedemikian rupa seperti yang telah

direncanakan. Pengkodean ini dilakukan dengan menggunakan bahasa pemrograman

PHP (Php Hypertext Preposessor), database yang digunakan adalah MySQL dan

webserver yang digunakan adalah Apache.

4.1.1 Koneksi

<?php

$server = "localhost";

$username = "linukdes_silver";

$password = "djonosilver";

$database = "linukdes_djonosilver";

mysql_connect($server,$username,$password)

or die("Koneksi gagal");

mysql_select_db($database)

or die("Database tidak bisa dibuka");

?>

Kode Modul 4.1 Potongan Script Koneksi Database

Mysql_connect dipergunakan untuk membuat koneksi menggunakan PHP ke

server MySQL.Data untuk hostname, mysql username, dan password yang digunakan

telah dideklarasikan oleh variabel $server, $username, $password.

Penulisannya pada script akan sama dengan mysql_connect(”localhost”,

”linukdes_silver”,”djonosilver”); Mysql_select_db dipergunakan untuk memilih database

yang akan digunakan. Or die (”Koneksi gagal”); jika terjadi kegagalan dalam melakukan

koneksi atau or die (“Database tidak bisa dibuka”); jika database tidak bisa dibuka.

Disini koneksi.php dibuat terpisah dikarenakan untuk memudahkan pemanggilan

database tanpa harus menuliskan kembali baris program kode modul 4.1 di atas pada

setiap modul yang terdapat dalam website yang terkoneksi dengan database yang sama.

4.3. Testing

Dilakukan untuk mengetahui apakah pekerjaan pemrograman telah dilakukan

secara benar sehingga bisa menghasilkan fungsi-fungsi yang dikehendaki.Pengujian juga

dimaksudkan untuk mengetahui keterbatasan dan kelemahan sistem yang dibuat agar

dapat sebisa mungkin dilakukan penyempurnaan.

4.3.1 White Box Testing

Pengujian dengan metode white-box adalah test case yang menggunakan strutur

kontrol desain prosedural untuk memperoleh test case. Pengujian white-box perangkat

lunak didasarkan pada pengamatan yang teliti terhadap detail prosedural, jalur-jalur

logika yang melewati perangkat lunak diuji dengan memberikan test case yang menguji

serangkaian kondisi atau loop tertentu. Status program tersebut dapat diuji pada

berbagai titik untuk menentukan apakah status yang diharapkan atau dituntut sesuai

dengan status aktual.

Pengujian white-box yang dilakukan adalah pengujian pada prosedural pengisian

pendaftaran yang jika salah satu atau lebih bagian tidak diisikan maka akan muncul

pesan error. Contoh pengujian white-box adalah dengan mengkosongkan kotak input

data sehingga akan muncul pesan “User Id Masih Kosong”, untuk lebih jelasnya lihat

gambar berikut ini :

Gambar 4.2 Pengujian White-box

4.3.2 Black Box Testing

Proses pengujian sistem dengan menggunakan black-box adalah pengujian

spesifikasi yang menguji suatu fungsi atau modul apakah dapat berjalan sesuai dengan

yang diharapkan atau tidak. Pengujian black-box berfokus pada persyaratan fungsional

perangkat lunak. Dengan demikian pengujian black-box memungkinkan perekayasaan

perangkat lunak mendapatkan serangkaian kondisi input yang sepenuhnya

menggunakan semua persyaratan fungsional untuk suatu programtanpa perlu

mengetahui struktur programnya.

Dalam melakukan pengujian tersebut, diambil contoh modul yang diuji adalah

modul pemesanan produk.Hal ini dikarenakan modul pemesanan produkmerupakan

modul terpenting. Salah satu contoh pengujian modul pemesanan produk adalah pada

proses memasukkan data, menghapus atau mengedit data.

Tabel 4. 1

No. Nama Pengujian

Tujuan Pengujian

Skenario Hasil diharapkan

1. Pengujian tombol

Memastikan kembali apakah tombol berfungsi dengan baik setelah di run.

Mengklik tombol disemua halaman.

Berfungsi dengan baik ( proses input, edit dan delete berjalan dengan baik )

2. Pengujian Efek Jquery BoxOver

Memastikan boxOver berjalan dengan baik

Menaruh pointer dibagian atas tombol

Berjalan dengan baik ( kotak informasi mengenai tombolmuncul )

3. Pengujian Database

Memastikan database berjalan dengan baik

Melihat database terinput, terupdate dan terdelete dengan baik

Database dapat berfungsi dengan baik

5. Kesimpulan

Dari penelitian yang telah dilakukan maka dapat ditarik beberapa kesimpulan

sebagai berikut :

a. Dengan adanya website, pengunjung dapat lebih mudah mendapatkan

informasi mengenai produk, pembelian dan pemesanan secara online pada

Toko Djono Silver.

b. Dengan adanya website yang dinamis dan user friendly, informasi yang

disajikan dapat diakses dengan cepat dan mudah, sehingga bermanfaat bagi

pihak penyaji maupun pengakses informasi.

c. Pembuatan laporan dapat dilakukan kapanpun pihak took inginkan.

d. Memberikan nilai daya saing yang lebih bagi toko.

Daftar Pustaka

Fatta, H. A. (2007). Analisis dan Perancangan Sistem Informasi. Yogyakarta:

ANDI.

Hakim, L. (2009). Trik Rahasia Master PHP Terbongkar Lagi. Yogyakarta:

Lokomedia.

Hakim, L. (2010). Bikin Website Super Keren dengan PHP & jQuery.

Yogyakarta: Lokomedia.

Jogiyanto.HM. (1991). Analisis dan Disain Sistem Informasi. Yogyakarta: ANDI.

Purbo, O. W., & Wahyudi, A. A. (2001). Mengenal eCommerce. Jakarta: PT. Elex

Media Komputindo.

Sunyoto, A. (2007). Membangun Web dengan Teknologi Asynchronouse

Javascript & XML. Yogyakarta: ANDI.