PENGAPLIKASIAN DAN PERANCANGAN ONE STOP SHOPPING PORTAL BERBASIS WEBSITE (INTERFACE KONSUMEN) DESIGN AND APPLICATION OF ONE STOP SHOPPING PORTAL BASED ON WEBSITE (OWNER INTERFACE)

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3634

PENGAPLIKASIAN DAN PERANCANGAN ONE STOP SHOPPING PORTAL
BERBASIS WEBSITE (INTERFACE KONSUMEN)
DESIGN AND APPLICATION OF ONE STOP SHOPPING PORTAL BASED ON
WEBSITE (OWNER INTERFACE)
1

2

Erick Haditya P

3

R.Rumani M

Andrew B. Osmond

Jurusan Sistem Komputer – Universitas Telkom

Jl. Telekomunikasi, Dayeuhkolot, Bandung 40257, Indonesia
1,2,3

1

erick.haditya@gmail.com

2

rumani@telkomuniversity.ac.id

3

abosmond@telkomuniversity.ac.id

ABSTRAK
Kemajuan teknologi telah sangat terasa dalam kehidupan ini, termasuk dalam hal pemenuhan
kebutuhan hidup yaitu belanja. Tercatat saat ini transaksi via internet sudah sangat besar. Sistem berbelanja via
internet, yang lebih dikenal sebagai e-commerce, sungguh efisien, tidak perlu mengunjungi toko, tetapi tetap
bisa kita dapatkan apa yang kita kehendaki. Sistem e-commerce tersebut memberikan manfaat tidak hanya bagi

pihak penjual, tapi juga kepada konsumen. Bagi penjual, dengan adanya e-commerce dapat menjangkau pasar
yang lebih luas, tanpa tambahan biaya sewa bangunan, karyawan dan biaya operasional lainnya, serta sebagai
media promosi dan pemasaran. Sedangkan bagi konsumen, dapat memberi kemudahan dan kenyamanan dalam
bertransaksi tanpa adanya batasan waktu ataupun lokasi pelanggan berada, selama terdapat akses internet. Akan
tetapi, beragamnya kebutuhan manusia menuntut untuk adanya efisiensi dan kemudahan dalam pemenuhan
berbagai macam kebutuhan tersebut. Dari tuntutan itulah konsep one stop shopping tercipta. Sebuah konsep
berbelanja berbagai macam kebutuhan dalam sekali berbelanja.
Pada tugas akhir ini, dibangun suatu web, one stop shopping portal yang dapat mempermudah pelanggan
untuk mengetahui informasi mengenai barang ataupun penjual. Kali ini penulis juga berkempatan untuk studi
kasus pada Pasar Tradisional Sayati. Aplikasi ini dibuat berbasis web.
Kata kunci: web, one stop shopping, website
ABSTRACT
Lately,technology development is really exquisite in this life, for example in fulfilling human needs. for
the record, transaction by internet is really popular. shopping by internet, or better known as e -commerce, is
really efficient, we don't have to visit the store, but still able to get what we want. This e-commerce system give
many benefits not only to sellers, but also to customers. For sellers, with e-commerce, they can expand their
market to wider area, with no extra building rent, staff and other operational cost. Besides, for the customers,it
give ease and comfort in transaction with no time or customers location limitation, as long as there is internet
connection. But, the diverse needs of every people demands to have efficiency and simplicity to fulfill the diverse
needs. From that demands, one stop-shopping concept created. A shopping concept to get variety needs in one

shopping.
In this paper, an one stop-shopping portal created, to help customers to get information about items or
sellers. in this paper, writer have an opportunity to case study in Pasar Tradisional Sayati. This application is
created as a web-based application.
Keywords: web, one stop-shopping, website

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3635

1. PENDAHULUAN
1.1

LatarBelakang
Pesatnya perkembangan teknologi yang tiada henti, salah satunya ICT (Information and
Communication Technology). Kehadirannya pun dapat mempermudah untuk menunjang pemenuhan
kebutuhan hidup seseorang. Hal ini terlihat dengan meningkatnya penggunaan Internet khususnya dalam
bidang perdagangan.
Berbagai kemudahan yang diperoleh oleh user dalam mendapatkan informasi yang cepat, tepat, dan akurat.
Tak hanya sampai disitu, beragam informasi pun mudah didapat dari mulai tentang pendidikan, pekerjaan,

hingga kebutuhan sehari-hari. Kemudahan ini menimbulkan pola pikir kepada konsumen, untuk
memperoleh kemudahan dalam memenuhi kebutuhannya dengan memanfaatkan kemajuan bidang ICT.
Perkembangan penggunaan internet semakin meluas, begitu pula pengguna smartphone, yang
menambah kemudahan berkomunikasi dengan internet. Seiring itu pula, semakin pesat tingkat konsumtif
masyarakat dalam memenuhi kebutuhan hidupnya, banyak kemudahan yang ingin didapatkan oleh
masyarakat saat melakukan kegiatan perbelanjaan. Dengan meningkatnya tingkat konsumtif masyarakat
dan kemajuan teknologi, menuntut kemudahan dalam memenuhi kebutuhan yang bermacam-macam
tanpa harus bersusah payah ke beberapa tempat tujuan yang berbeda dan akan menghabiskan banyak
waktu.
Maka untuk menunjang hal tersebut timbulah inisiatif untuk membuat suatu aplikasi web One
Stop Shopping Portal yang bertujuan untuk memudahkan konsumen untuk mendapatkan kebutuhannya,
kapanpun dan dimanapun konsumen berada tanpa ada batasan jarak dan waktu.

1.2

RumusanMasalah
Permasalahan yang diangkat dalam pembuatan tugas akhir ini adalah :
1. Bagaimana membuat sebuah webOne Stop Shopping Portal pada Website?
2. Bagaimana web ini dapat membantu konsumen untuk kemudahan dalam memenuhi kebutuhannya?


1.3

BatasanMasalah
Adapun batasan ruang lingkup permasalahan dari pengerjaan tugas akhir ini adalah sebagai berikut :
1. Portal yang dibangun berbasiskan website.
2. Toko yang dijadikan objek dalam pembuatan web One Stop Shopping Portal adalah 4 toko yang
terletak di Pasar Tradisional Sayati.
3. Database yang digunakan adalah MYSQL.
4. Aplikasi ini tidak diimplementasikan pada pusat Pasar Tradisional Sayati.
5. Tidak membahas mengenai keamanan data dan jaringan.

1.4

TujuanPenelitian
Adapuntujuandaripadatugasakhiriniadalah:
1.
Membuat web One Stop Shopping Portal pada website.
2.
Membantu konsumen dalam mendapatkan kebutuhannya


2. DASAR TEORI
2.1 Basis Data
Menurut Nugroho (2011)[1], Basis Data adalah sekumpulan data yang terintegrasi yang diorganisasi
untuk memenuhi kebutuhan pemakai dengan cara sedemikian rupa sehingga mudah dalam disimpan dan
dimanipulasi untuk keperluan organisasi. DBMS (Data Base Management System) adalah perangkat lunak yang
menangani semua pengaksesan ke database.
Keuntungan file manajemen database antara lain tidak terjadi kerangkapan data, data lebih konsisten,
dapat digunakan bersama-sama, dapat distandarisasi, keamanan dapat terjamin, integritas terpelihara, dan
independen.
2.2 Sistem Informasi
Menurut James dan Marakas (2010)[2], Sistem informasi adalah gabungan yang terorganisasi dari
manusia, perangkat lunak, perangkat keras, jaringan komunikasi dan sumber data dalam mengumpulkan,
mengubah, dan menyebarkan informasi dalam organisasi.
Sistem informasi dalam suatu pemahaman yang sederhana dapat didefinisikan sebagai satu sistem
berbasis computer yang menyediakan informasi bagi beberapa pemakai dengan kebutuhan yang serupa. Para

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3636


pemakai biasanya tergabung dalam suatu entitas organisasi formal, seperti Departemen atau Lembaga suatu Instasi
Pemerintahan yang dapat dijabarkan menjadi Direktorat, Bidang, Bagian sampai pada unit terkecil
dibawahnya.
2.3 MYSQL
Meurut Abdul Kadir (2010)[3], MySQL merupakan software yang tergolong sebagai DBMS (Database
Management System) yang bersifat open source. Open source menyatakan bahwa software ini dilengkapi dengan
source code (kode yang dipakai untuk membuat MySQL), selain tentu saja bentuk sistem operasi, dan
bisa diperoleh dengan cara men-download (mengunduh) di Internet secara gratis.
PHP
Menurut Anhar (2011)[5], PHP adalah script yang digunakan untuk membuat halaman website yang dinamis.
Dinamis berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client. Mekanisme ini
menyebabkan informasi yang diterima client selalu yang terbaru atau up to date.Semua script PHP dieksekusi
pada server dimana script tersebut dijalankan.
2.4

2.5 HTML
HTML (Hypertext Markup Language) merupakan salah satu format yang digunakan dalam permbuatan
halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan
pada web browser.
Dalam HTML terdapat Tag, tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII

menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu dan tag
penutup yaitu yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Dalam penamaan sebuah dokumen yang akan ditampilkan pada web browser maka nama yang digunakan
harus diakhiri dengan ekstensi (.html) atau (.htm).Ekstensi dokumen HTML awalnya 3 karakter, adalah untuk
mengakomodasikan sistem penamaan dalam DOS.
2.6 Evaluasi Heuristik
Menurut Chauncey Wilson (2014)[10], Evaluasi Heuristik adalah jenis inspeksi User Interface (UI) atau
usability, dimana seorang individu, atau sebuah tim yang terdiri dari beberapa individu, melakukan evaluasi
spesifikasi, prototype, atau produk dengan daftar prinsip usability atau User Experience (UX) atau bagian-bagian
yang berhubungan.
2.7 One Stop Shopping
Sebuah konsep berbelanja apa pun kebutuhan dalam sekali pemberhentian. Diharapkan OSS (One Stop
Shopping) mampu mensuplai kebutuhan semua pelanggan dalam satu lingkup/komplek.Contoh sederhananya
adalah shopping mall yang banyak bermunculan di Indonesia. Biasanya dalam shopping mallakan disediakan
berbagai jasa dan produk untuk semua orang sehingga seseorang yang datang ke lokasi itu tidak lagi perlu pindahpindah ke lokasi lain untuk mendapatkan yang diinginkannya. Tidak cuma untuk shopping mall yang besar,
tetapi konsep OSS juga bisa diaplikasikan dalam cakupan bisnis yang lebih kecil.
Konsep OSS menuntut beberapa hal penting agar tidak merugi.Yang pertama adalah studi kebutuhan
pelanggan. Studi ini mempelajari apa saja perilaku dan kebutuhan pelanggan jika mendatangi gerai bisnis.
Contoh sederhananya yaitu, apa latar belakang memulai gerai bisnis ini? Siapa yang akan menjadi pangsa pasar
dari gerai bisnis yang dibangun? Dan berbagai pertanyaan lain yang menjadi latar belakang membuka gerai

bisnis ini.
Prinsip kedua yang penting dalam membangun OSS adalah spesialisasi. Jika masing-masing bagian
produk/jasa tidak dikerjakan dengan khusus dan fokus, maka hasilnya tidak akan maksimal. Prinsip OSS yang
ketiga adalah harus ada kekompakan tema antar produk yang dipasarkan.
2.8 Web Portal
Web Portal adalah website yang menjadi pintu gerbang, starting point bagi pengunjung untuk memulai
aktivitasnya di Internet. Web portal yang bersifat horizontal menyediakan berbagai informasi dan layanan yang
spesifik untuk bidang tertentu saja, sehinggabisabersifat personal bagi pengunjungnya.
Layanan umum yang tersedia biasanya adalah search engine, berita, pooling, berbagai macam rubric
dan fasilitas seperti SMS sertachat room.Bersifat personal bisaberupapersonal diarydankalender, account e-mail
bahkan personal web. Web portal vertical bahkan bersifat ekslusif dan hanya menampilkan informasi yang
dikehendaki komunitasnya. Misalnya portal yang bersifat religious seperti scientology, namun bias saja sebaliknya
bersifat terbuka meskipun membahas hal spesifik seperti toko buku amazon.

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3637

2.9 Usability
Usability adalah kualitas yang dimiliki sebagian macam produk, tapi hanya sebagian, sebagian lainnya

tidak memiliki. ada sejarah, kultur, organisasi, keuangan, dan alasan lainnya, yang melebihi cakupan buku ini.
Untungnya, walau demikian, ada perubahan dan metode yang dipercaya untuk menilai mana yang termasuk
usability dan mana yang tidak, dan untuk menilai perubahan seperti apa untuk membuat desain sehingga sebuah
produk dinilai cukup bermanfaat untuk tetap bertahan atau bahkan sukses di pasaran.
3. PERANCANGAN SISTEM
3.1 Deskripsi Sistem
Aplikasi pada kali ini yang akan dibuat merupakan aplikasi One Stop Shopping Portal, yang berbasis
website dengan memberikan kemudahan bagi pemilik toko maupun konsumen. Terdapat 3 akun yang tersedia
pada sistem ini yaitu, Admin, Pemilik toko, dan member. Sistem ini mengharuskan konsumen/pembeli untuk
login dulu apabila sudah terdaftar, jika belum maka konsumen/pembeli hanya bisa melihat barang-barang sesuai
dengan jenis toko yang ada di website ini.
Untuk memudahkan proses perancangan dan implementasi, diperlukan flowchart. Flowchart yang dibuat
akan menjelaskan garis besar proses yang dilakukan konsumen pada system one stop shopping portal ini:
START

PENCARIAN

TIDAK SETUJU
BELUM
PIIH BARANG


SETUJU

KERANJANG
BELANJA

YA

SELESAI?

CETAK INVOICE
DAN DATA
PEMBELI

SELESAI

Gambar 3.1 Flowchart Konsumen di Sistem

3.2 Context Diagram
Context Diagram merupakan level tertinggi dari DFD (Data Flow Diagram) yang menggambarkan
seluruh input ke sistem atau output dari sistem :
Login Admin

ADMIN

Login Pemilik Toko
Update data akun

Data akun pemilik toko dan member
`
Update akun pemilik toko dan member

PEMILIK TOKO
Data akun

Data barang

Update barang

Data
transaksi

Data barang

Data Transaksi
PORTAL
Login Member

Data barang

Data barang
Data Toko

Data Toko
Registrasi
Member

Data akun
Update data akun
Transaksi
MEMBER

Data Transaksi

GUEST

Gambar 3.2 Context Diagram

3.3 Struktur Menu Pemilik Toko
Pada perancangan struktur menu guest dan member ini, dirancang menjadi 1 bagian. Interface untuk
guest dan member akan sama, yang membedakan adalah hak akses yang didapat ketika guest telah terdaftar yaitu

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3638

untuk melakukan transaksi atau pembelian barang. Gambar berikut ini adalah perancangan struktur menu untuk
guest dan member :
Menu Login

Daftar

Cari barang

keluar

Login

Cari barang

cart

Pembelian

Lihat Deskripsi
Barang

Hapus Barang

Tambah ke cart

Kosongkan

Gambar 3.3 Struktur Menu Member

4. IMPLEMENTASI
4.1 Implementasi antarmuka
Antarmuka pada aplikasi ini dirancang sedemikian rupa agar memudahkan konsumen (member) dalam
menggunakan website. Tampilan antarmuka dari perancangan One Stop Shopping Portal sebagai berikut :

1) Tampilan halaman Login

Gambar 4.1 Tampilan Halaman Login

2) Tampilan halaman utama (member/konsumen)

Gambar 4.2 Tampilan Halaman Utama konsumen/member

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3639

3) Tampilan halaman pemesanan barang

Gambar 4.3 Tampilan Halaman Pemesanan Barang

4) Tampilan halaman Profil Member

Gambar 4.4 Halaman Profil Member

4.2 Implementasi Database
Basis Data dibuat dengan menggunakan database MYSQL, dimana aplikasi yang digunakan adalah
XAMPP 1.7.7. Berikut ini adalah implementasi basis data One Stop Shopping Portal.

Gambar 4.5 Implementasi Basis Data

ISSN : 2355-9365

e-Proceeding of Engineering : Vol.2, No.2 Agustus 2015 | Page 3640

5. KESIMPULAN DAN SARAN
5.1

Kesimpulan
Berdasarkan pengujian aplha terhadap one stop shopping portal pada website berjalan dengan baik, namun
berdasarkan analisis dengan menggunakan web usability terdapat kekurangan, diantaranya tampilan yang kurang
interaktif dan cenderung membingungkan antara pemilik toko dan member pada halaman login. Dari sisi pemilik
toko, kurangnya penggunaan tombol button untuk input product/barang yang samadengan text image.
Tidak adanya fitur denah lokasi toko yang terletak di Pasar Tradisional Sayati, membuat kepercayaan calon
pembeli berkurang, tidak adanya fitur testimony dari pelanggan yang telah ada untuk menambah kepercayaan
calon pembeli.
Kekurangan-kekurangan tersebut membuat web ini kurang profesional, sehingga membuat kepercayaan bagi
pemilik toko berkurang.
5.2 Saran
Untuk pengembangan tugas akhir ini selanjutnya, dapat dilakukan dengan cara :
1. Penambahan fitur denah lokasi toko yang terletak di PasarTradisionalSayati.
2. Penambahan fitur testimoni pada website.
3. Perbaikan halaman login untuk pemilik toko dan member dibedakan.
4. Perbaikan tombol button untuk input product/barang
DAFTAR PUSTAKA
[1] Nugroho, A. (2011). Perancangan dan Implementasi Sistem Basis Data. Yogyakarta:Penerbit Andi
[2] Marakas, M George, and O’Brien A James. (2013). Sistem Informasi Manajemen 1. Jakarta:Penerbit
Salemba Empat
[3] Kadir, Abdul. (2010). From Zero To A Pro: Membuat Aplikasi Web Dengan PHP Dan Database
MySql. Yogyakarta:Penerbit Andi
[4] Wahana, Komputer. (2010). Shortcourse SQL Server 2008 Express. Yogyakarta:Penerbit Andi
[5] Anhar. (2010). Panduan Menguasai PHP dan MySQL Secara Otodidak. Jakarta:Penerbit Mediakita
[6] Arief, Rudyanto M. (2011). Pemrograman Web Dinamis Menggunakan PHP dan
MySQL.Yogyakarta:Penerbit Andi
[7] Nielsen, and Loranger, H. (2006). Prioritizing Web Usability. California:New Rider Press
[8] Rubin J, and Chisnell D. (2011). Handbook of UsabilityTesting: How to Plan, Design, and Conduct
Effective Tests. California:New Rider Press
[9] Schmidt A, and Etches A. (2012). User Experience (UX)Design for Libraries. California:New Rider
Press
[10] Wilson, Chauncey. (2014). User Interface Inspection Methods: A User-Centered Design Method.
Amsterdam : Elsevier/Morgan Kaufmann.
[11] Pramono,
Cahyono.
(2007).
One
Stop
Shopping.
[Online].
Tersedia:http://www.waspada.co.id/index.php?option=com_content&view=article&id=1300:one-stopshopping&catid=24:tinjauan-ekonomi [23 November 2014]
[12]
Hakim,
Zainal.
(2013).
Pengertian
Web
Portal.
[online].
Tersedia:
http://www.zainalhakim.web.id/pengertian-web-portal.html [3 oktober 2014]