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 Kota
Data User Data Kategori Produk Data Produk Data Pembeli Data Pembelian Data Pemesanan Produk Data Informasi Data Kategori Berita Data Berita Data Komentar Produk Data Komentar Berita Data Komentar Pesan Data Komentar Pesan Login Data Hubungi Admin
Data Berita Data Pemesanan Produk Data Komentar Pesan Login Data User
Info User
Info Komentar Pesan Login Info Pemesanan Produk Info Berita
Info Produk Info Berita Info Informasi Info Komentar Produk Info Komentar Berita Info Komentar Pesan Data Keranjang Belanja Data Pembeli Data Pendaftaran User Data Komentar Produk Data Komentar Berita Data Komentar Pesan Data Hubungi Admin
Laporan Pembelian Laporan Pemesanan Info Kota Info User Info Kategori Produk Info Produk Info Pembelian Info Pemesanan Produk Info Informasi Info Kategori Berita Info Berita Info Komentar Produk Info Komentar Berita Info Komentar Pesan Info Komentar Pesan Login Info 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_session pesan
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 WebPerancangan 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 Up Profil
Home Produk Berita Informasi Sign In 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
