Pengembangan E-Commerce Khusus Pakaian Muslimah Syar‟i “Alsyaf Shop”

PENGEMBANGAN E-COMMERCE KHUSUS PAKAIAN
MUSLIMAH SYAR’I “ALSYAF SHOP”

MELISA ILLINA ALSYAFDI

DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
BOGOR
2014

PERNYATAAN MENGENAI SKRIPSI DAN
SUMBER INFORMASI SERTA PELIMPAHAN HAK CIPTA*
Dengan ini saya menyatakan bahwa skripsi berjudul Pengembangan ECommerce Khusus Pakaian Muslimah Syar‟i “Alsyaf Shop” adalah benar karya
saya dengan arahan dari komisi pembimbing dan belum diajukan dalam bentuk
apa pun kepada perguruan tinggi mana pun. Sumber informasi yang berasal atau
dikutip dari karya yang diterbitkan maupun tidak diterbitkan dari penulis lain telah
disebutkan dalam teks dan dicantumkan dalam Daftar Pustaka di bagian akhir
skripsi ini.
Dengan ini saya melimpahkan hak cipta dari karya tulis saya kepada Institut
Pertanian Bogor.

Bogor, 8 Juli 2014
Melisa Illina Alsyafdi
NIM G64090128

ABSTRAK
MELISA ILLINA ALSYAFDI. Pengembangan E-Commerce Khusus
Pakaian Muslimah Syar‟i “Alsyaf Shop”. Dibimbing oleh IRMAN HERMADI.
Saat ini, bisnis online semakin populer di dunia luas. Hal ini ditandai
dengan munculnya sejumlah situs e-commerce di Indonesia. Penelitian ini
bertujuan untuk mengembangkan toko online untuk wanita muslim (muslimah)
pakaian syar'i (mematuhi aturan agama Islam). Selain itu, website ini juga
dimaksudkan untuk mengedukasi pengguna atau pelanggan pada bagaimana
muslimah harus berpakaian dengan cara yang benar dan syar'i. Sistem ini
dinamakan Alsyaf Shop, dikembangkan dengan menggunakan pendekatan
prototyping dan diimplementasikan dengan menggunakan Joomla 2.5 Content
Management System (CMS) dengan modul VirtueMart. Kami berharap website ecommerce ini akan membuat pengguna dan pelanggan dapat memesan dan
membeli pakaian, serta untuk mendapatkan informasi pakaian muslimah syar'i.
Kata kunci: e-commerce, baju muslimah, online shop, syar‟i

ABSTRACT

MELISA ILLINA ALSYAFDI. The Development of E-Commerce "Alsyaf
Shop" Specialty Muslimah Shar'i Clothing. Supervised by IRMAN Hermadi.
Today, online businesses are getting popular world-widely. This is
indicated by emerging of number of e-commerce websites in Indonesia. This
research is to develop an online shop for muslim women (muslimah) shar‟i
(obeying the Islamic religion rules) clothes. In addition, this website is also meant
to educate its users or customers on how muslimah should dress in the right way
and shar‟i. The system is named as Alsyaf Shop, it was developed using
prototyping approach and implemented using Joomla 2.5 Content Management
System (CMS) with Virtuemart module. We hope this e-commerce website will
make its users and customers are able to order and purchase the clothes, as well as
to obtain information of muslimah shar‟i clothing.
Keywords: e-commerce, muslimah clothes, online shop, shar‟i

PENGEMBANGAN E-COMMERCE KHUSUS PAKAIAN
MUSLIMAH SYAR’I “ALSYAF SHOP”

MELISA ILLINA ALSYAFDI

Skripsi

sebagai salah satu syarat untuk memperoleh gelar
Sarjana Ilmu Komputer
pada
Departemen Ilmu Komputer

DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
BOGOR
2014

Penguji : 1. Ir Meuthia Rachmaniah, MSc
2. Auzi Asfarian, SKomp MKom

Judul Skripsi : Pengembangan E-Commerce Khusus Pakaian Muslimah Syar‟i
“Alsyaf Shop”
Nama
: Melisa Illina Alsyafdi
NIM
: G64090128

Disetujui oleh

Irman Hermadi, SKom MS PhD
Pembimbing

Diketahui oleh

Dr Ir Agus Buono, MSi MKom
Ketua Departemen

Tanggal Lulus:

PRAKATA
Puji serta syukur penulis panjatkan kepada Allah Subhanahu Wa Ta'ala
karena atas berkah, rahmat, dan hidayah-Nya, akhirnya skripsi yang berjudul
Pengembangan E-Commerce Khusus Pakaian Muslimah Syar‟i “Alsyaf Shop” ini
bisa diselesaikan dengan baik. Sholawat serta salam tidak lupa penulis tujukan
kepada Rasulullah Muhammad Sholallahu 'alaihi Wa Sallam yang telah menuntun
kita dari jaman yang gelap gulita menuju jaman yang terang benderang dan penuh

dengan ilmu pengetahuan.
Ucapan terima kasih tak lupa penulis sampaikan kepada semua pihak yang
telah membantu dalam penulisan skripsi ini, khususnya kepada beberapa pihak
yang turut berpartisipasi langsung diantaranya yaitu, Bapak Irman Hermadi selaku
dosen pembimbing skripsi yang telah memberikan saran dan masukan yang
membangun. Ungkapan terima kasih kepada ibunda Nila Kandi dan almarhum
ayahanda Syafedi Syafei serta keluarga tercinta, adik, dan kakak yang telah
menyemangati dan selalu mengingatkan dalam menyelesaikan tugas akhir ini,
terima kasih kepada seluruh teman-teman Ilmu Komputer angkatan 46. Serta
sahabat-sahabat seperjuangan Nuresti, Ani, Sasa, Haikal yang mendukung dan
menyemangati dalam penyelesaian skripsi. Serta teman-teman lain yang tidak bisa
saya sebutkan satu persatu, terima kasih atas doa dan kebersamaannya selama ini.
Semoga karya tulis ini bisa bermanfaat dan memberikan kontribusi positif
untuk perkembangan e-commerce di Indonesia.

Bogor, 8 Juli 2014
Melisa Illina Alsyafdi

DAFTAR ISI
DAFTAR TABEL

vi

DAFTAR GAMBAR

vi

DAFTAR LAMPIRAN

vi

PENDAHULUAN

1

Latar Belakang

1

Perumusan Masalah

2

Tujuan Penelitian

2

Manfaat Penelitian

2

Ruang Lingkup Penelitian

2

METODE

3

Komunikasi

3

Rencana Cepat dan Pemodelan Rancang Cepat

4

Konstruksi Prototipe

4

Penyerahan Produk dan Pengumpulan Umpan Balik

5

HASIL DAN PEMBAHASAN

5

Iterasi 1

5

Komunikasi

5

Rencana Cepat dan Pemodelan Rancang Cepat

7

Konstruksi Prototipe

10

Penyerahan Produk dan Pengumpulan Umpan Balik

10

Iterasi 2

12

Komunikasi

12

Rencana Cepat dan Pemodelan Rancang Cepat

13

Konstruksi Prototipe

15

Penyerahan Produk dan Pengumpulan Umpan Balik

17

SIMPULAN DAN SARAN

17

Simpulan

17

Saran

17

DAFTAR PUSTAKA

18

DAFTAR TABEL
1
2
3
4
5
6
7

Kebutuhan Pengguna Iterasi 1
Kebutuhan Fungsional Iterasi 1
Kebutuhan Non-Fungsional
Hasil Pengujian Iterasi 1
Kebutuhan Pengguna Iterasi 2
Kebutuhan Fungsional Iterasi 2
Hasil Pengujian Iterasi 2

6
7
7
10
12
12
17

DAFTAR GAMBAR
1
2
3
4
5
6
7
8
9
10

Tahapan metode prototyping
Diagram Konteks Iterasi Pertama
Proses Bisnis Alsyaf Shop
DFD Level 1 Iterasi pertama
Antarmuka Iterasi Pertama
Diagram Konteks Iterasi Kedua
DFD Level 1 Iterasi Kedua
Entity Relationship Diagram (ERD)
Peta Situs
Antarmuka Iterasi Kedua

3
8
8
9
11
13
14
14
15
16

DAFTAR LAMPIRAN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Antarmuka Alsyaf Shop
Test case fungsi login anggota
Test case fungsi menampilkan produk
Test case fungsi pemesanan produk.
Test case fungsi mengubah pemesanan.
Test case fungsi memasukkan data pembeli.
Test case fungsi menampilkan artikel
Test case fungsi menambah komentar pada artikel.
Test case fungsi mengubah profil anggota.
Test case fungsi search.
Test case fungsi pembayaran.
Test case fungsi logout anggota.
Test case fungsi login administrator.
Test case fungsi menambah produk.
Test case Fungsi menambah kategori produk
Test case fungsi menambah artikel.
Test case fungsi mengubah detail produk.
Test case fungsi pengelolaan pemesanan.
Test case fungsi pengelolaan pembayaran.
Test case fungsi menampilkan panduan
Test case fungsi menampilkan pemesanan

19
27
27
28
28
29
30
30
31
31
32
32
32
33
33
34
34
34
35
35
35

22 Test case fungsi menampilkan kontak kami
23 Test case fungsi menampilkan katalog

36
36

PENDAHULUAN
Latar Belakang
Teknologi Informasi semakin berkembang pesat saat ini, hal ini membawa
perubahan besar dan signifikan dalam berbagai bidang kehidupan, termasuk bisnis
di dalamnya. Persaingan di dalam dunia bisnis yang semakin kompetitif menuntut
suatu perusahaan untuk selalu mengikuti perkembangan jaman, agar dapat tetap
bersaing dengan perusahaan-perusahaan sejenis lainnya (Aprilia 2012). Bisnis
yang awalnya dilakukan secara langsung antara pembeli dan penjual kini
berevolusi menjadi bisnis yang bisa dilakukan tanpa pelaku bertemu secara
langsung.
Penjualan barang secara online sering disebut sebagai e-marketing. Menurut
Kotler et al. (2003) e-marketing adalah sisi pemasaran e-commerce, terdiri atas
upaya perusahaan untuk berkomunikasi, mempromosikan, dan menjual produk
dan jasa melalui Internet. E-commerce itu sendiri adalah penyebaran, pembelian,
penjualan, pemasaran barang dan jasa melalui sistem elektronik seperti Internet
atau televisi, www, atau jaringan komputer lainnya (Nugroho 2006).
Topik yang diambil dalam skripsi ini adalah pengembangan sistem penjualan
e-commerce pada “Alsyaf Shop”. Aplikasi ini memfokuskan penjualan terhadap
pakaian wanita muslimah yang syar‟i. Website yang sudah ada dan sejenis,
sebagian besar menjual pakaian muslimah yang tidak menerapkan kaidah syar‟i.
Dengan semakin berkembangnya trend busana muslim di Indonesia, tentu bisnis
pakaian muslimah ini akan menguntungkan, namun akan lebih baik jika selain
keuntungan materi yang didapat, juga mengajak para pembeli untuk berpakaian
muslimah yang syar‟i.
Perintah berpakaian syar‟i pun tertulis jelas pada ayat Al Quran yang
berbunyi “Hai Nabi katakanlah kepada isteri-isterimu, anak-anak perempuanmu
dan isteri-isteri orang mu‟min: ”Hendaklah mereka menjulurkan jilbabnya ke
seluruh tubuh mereka“. Yang demikian itu supaya mereka lebih mudah untuk
dikenal, karena itu mereka tidak diganggu. Dan Allah adalah Maha pengampun
lagi Maha penyayang.” (QS. Al-Ahzab: 59).
Diriwayatkan pula di dalam hadist yaitu: Rasulullah SAW bersabda, ”Ada
dua kelompok termasuk ahli neraka, aku belum pernah melihatnya: Suatu kaum
yang memiliki cambuk seperti ekor sapi, mereka memukul manusia dengan
cambuknya, dan wanita yang kasiyat (berpakain tapi telanjang baik karena tipis,
atau pendek yang tidak menutup semua auratnya), Mailat mumilat (bergaya ketika
berjalan, ingin diperhatikan orang) kepala mereka seperti punuk onta yang
berpunuk dua. Mereka tidak masuk surga dan tidak mendapatkan baunya padahal
bau surga itu akan didapati dari sekian dan sekian (perjalanan 500 tahun). (HR.
Muslim 3971, Ahmad 8311 dan Imam Malik 1421).
Dari ayat dan hadist itulah aplikasi ini dibuat, agar membantu muslimah
dalam berbelanja pakaian muslimah syar‟i serta mensyiarkan perintah Allah.
Definisi pakaian syar‟i berdasarkan Alquran dan hadist rasulullah, yaitu: menutup
seluruh badan kecuali yang nampak padanya yaitu muka dan telapak tangan (QS.
An Nuur: 31), bukan berfungsi sebagai perhiasan (QS. An Nuur: 31), kainnya
harus tebal tidak tipis (HR. Muslim 3971, Ahmad 8311 dan Imam Malik 1421),
harus longgar tidak ketat (HR. Ad Dhiya‟ Al Maqdisi, Ahmad dan Baihaqi dengan

2
sanad hasan), tidak menyerupai pakaian laki-laki (HR. Abu Dawud), tidak
menyerupai pakaian wanita-wanita kafir (QS. Al Hadid [57]: 16), bukan pakaian
untuk mencari popularitas (HR. Abu Daud dan Ibnu Majah).
Dengan definisi pakaian syar‟i tersebut penjualan pakaian muslimah akan
mengikuti kaidah yang disyariatkan. Oleh karena itu online shop penjualan busana
muslimah syar‟i diperlukan untuk mempermudah penggunanya dalam berbelanja
karena cukup mengakses lewat Internet tanpa harus datang langsung ke toko.
Dalam implementasi web Alsyaf Shop, penggunaan modul VirtueMart yang
merupakan modul tambahan dari Joomla dipilih. Hal ini dikarenakan Joomla
sebagai salah satu sistem Content Management System (CMS) yang populer di
negeri ini yang memiliki modul e-commerce (Rifqi et al. 2013). Selain itu, Joomla
memiliki fitur lengkap dan banyak modul-modul gratis sebagai adds on untuk
website e-commerce yang akan dibangun, juga sudah ada developer dari indonesia
dan sub forum berbahasa indonesia yang memudahkan pengguna untuk belajar
tentang Joomla.

Perumusan Masalah
Berdasarkan latar belakang, maka dapat dirumuskan permasalahan dalam
penelitian ini adalah bagaimana mengembangkan web e-commerce khusus
penjualan busana muslimah yang syar‟i. Dalam hal ini, syar‟i mengacu kepada
produk-produk yang dijual dan berbagi pengetahuan tentang tata cara berbusana
yang sesuai syariah Islam.

Tujuan Penelitian
Tujuan dilakukannya penelitian ini adalah mengembangkan website ecommerce pakaian muslimah syar‟i Alsyaf Shop. Hal ini mengacu kepada produk
yang syar‟i yang dijual dalam web e-commerce.
Manfaat Penelitian
Manfaat dari penelitian ini adalah:
1 Memudahkan pengguna dalam melakukan pembelian busana muslimah yang
syar‟i.
2 Pengguna dapat memperoleh pengetahuan tentang tata cara berpakaian yang
syar‟i.
Ruang Lingkup Penelitian
Penelitian ini memiliki batasan-batasan sebagai berikut:
1 Produk-produk yang dijual memenuhi kaidah syariat Islam.
2 Pengembangan sistem menggunakan pendekatan prototyping.
3 Sistem yang dikembangkan berbasis web menggunakan teknologi Joomla dan
plug-in Virtuemart.

3

METODE
Metode yang digunakan pada penelitian ini adalah metode Prototyping
(Gambar 1). Metode ini terdiri atas tahap communication (komunikasi), quick
plan and modeling quick design (rencana cepat dan pemodelan rancang cepat),
construction

Gambar 1 Tahapan metode prototyping
of prototype (konstruksi prototipe), dan deployment delivery & feedback
(penyerahan produk dan pengumpulan umpan balik). Pendekatan secara prototipe
lebih efektif, karena identifikasi rumusan masalah secara tepat dapat mengurangi
perputaran siklus evaluasi sehingga pengembangan menjadi lebih singkat
(Pressman 2010).
Pada tahapan metode Prototyping terdapat interaksi antara pengembang dan
pengguna. Dimana hasil dari sistem yang dikembangkan bergantung pada
kepuasan dan persetujuan dari pengguna. Maka dalam praktiknya apabila pada
tahapan akhir pengguna mengharapkan dilakukannya perbaikan pada sistem,
maka dilakukanlah iterasi kedua, ketiga, dan seterusnya guna mendapati sistem
yang sesuai dengan keinginan pengguna. Iterasi akan berhenti bila pengguna
sudah setuju dengan sistem yang sudah dibangun oleh pengembang.

Komunikasi
Dalam proses komunikasi dilakukan proses pengumpulan informasi untuk
kebutuhan sistem dari pengguna. Langkah pertama dilakukan pengumpulan
informasi untuk memperoleh sistem yang selanjutnya akan dikembangkan
berdasarkan kebutuhan pengguna pakaian muslimah syar‟i. Pengumpulan literatur,
studi pustaka, dan wawancara tidak terstruktur dilakukan kepada pelaku penjual

4
pakaian muslimah (toko pakaian) dan pengguna online shop untuk memperoleh
proses bisnis serta fungsi-fungsi yang akan diterapkan ke dalam web.
Pada analisis kebutuhan diperoleh spesifikasi yang dimiliki oleh ecommerce Alsyaf Shop dan data yang dibutuhkan. Pengambilan data yang
digunakan dalam pengembangan website ini diambil dari beberapa website ecommerce yang dipilih berdasarkan jenis produk yang dijual yaitu hanya terbatas
pakaian muslimah yang syar‟i seperti baju muslim, gamis, rok, mukena, jilbab.
Web e-commerce tersebut yaitu: muslimahonline.net, zalora.co.id, hijabenka.com.
Hasil yang akan didapatkan dari proses komunikasi ini selanjutnya akan
dibuat proses bisnis, tabel kebutuhan fungsional dan non fungsional serta tabel
kebutuhan pengguna. Dari hasil analisis tersebut yang nantinya akan dijadikan
landasan dari pembuatan sistem.

Rencana Cepat dan Pemodelan Rancang Cepat
Tahapan ini merupakan tahapan menentukan proses bisnis, rencana
pengembangan sistem, serta rancangan cepat yang dapat menjawab kebutuhan
sistem. Pengembang membuat prototype berdasarkan kebutuhan yang sudah
didefinisikan sebelumnya, kebutuhan tersebut dimodelkan dalam pembuatan
diagram konteks (DK), data flow diagram (DFD), entity relationship diagram
(ERD), serta struktur program atau biasa disebut peta situs (site map).
Pemodelan ini membantu dalam pembuatan prototipe dimana diagram proses
bisnis dapat menunjukkan alur proses pembelian dalam sistem Alsyaf Shop.
Rancangan DK, DFD, dan ERD memberikan gambaran alur proses antara
pengguna sistem dan web Alsyaf Shop serta struktur database perancangan sistem.
Rancang cepat yang sudah dirancang sesuai dengan kesepakatan pengembang dan
pengguna selanjutnya akan mulai dikembangkan pada tahap konstruksi prototipe.

Konstruksi Prototipe
Pada tahap ini dilakukan konstruksi prototipe, dimana pemodelan desain
yang sudah dirancang mulai dikembangkan menjadi suatu program. Pembuatan
antarmuka sistem dan modul sebagai fungsi utama sistem dilakukan pada tahap
ini. Setelah program selesai baik itu sebagian maupun secara keseluruhan, maka
dilakukan proses pengujian dengan metode black box.
Pengujian dengan metode black box pada prototipe yang sudah dibangun
dilakukan oleh pengembang, yang bertujuan untuk melihat apakah program
tersebut terdapat kesalahan atau tidak sebelum diaplikasikan, serta mengetahui
sejauh mana aplikasi ini dapat bekerja dengan baik dan dapat memenuhi tujuan
yang ingin diperoleh oleh pengguna.
Dalam membangun aplikasi website Alsyaf Shop, perangkat lunak yang
digunakan adalah sebagai berikut:
 Joomla installer, software open source yang digunakan dalam membangun
website e-commerce
 Modul VirtueMart, modul digunakan untuk fitur tambahan yang
dibutuhkan dalam website e-commerce

5




Xampp, software web server apache yang didalamnya sudah tersedia
database server mysql dan support php programming
Notepad ++, digunakan untuk mengubah coding yang perlu diganti
Photoshop, digunakan untuk membuat desain logo banner perusahaan
yang biasanya di letakkan pada bagian header

Penyerahan Produk dan Pengumpulan Umpan Balik
Pada tahap ini web yang sudah dibuat diserahkan kepada pengguna.
Pengguna bisa memberikan tanggapan akan sistem yang sudah dibuat serta
persetujuan mengenai sistem tersebut. Adapun hal terpenting adalah bahwa
keterlibatan pengguna sangat diperlukan supaya sistem yang dikembangkan dapat
memberikan kepuasan kepada pengguna. Untuk melihat fungsi yang sudah
berjalan maka dilakukan pengujian kembali dengan metode black box yang
dilakukan oleh pengguna, bila ada perbaikan dan penambahan pada sistem maka
akan langsung disampaikan kepada pengembang untuk selanjutnya dilakukan
perbaikan kembali.

HASIL DAN PEMBAHASAN
Pada penelitian ini dilakukan beberapa tahapan iterasi yang harus dilalui pada
metode Prototyping. Iterasi dilakukan untuk mendapatkan hasil yang sesuai
dengan kebutuhan pengguna. Berikut adalah hasil penelitian yang dilakukan untuk
mengembangkan website Alsyaf Shop.
Iterasi 1
Komunikasi
Pengumpulan Informasi
Pada tahap komunikasi dilakukan pengumpulan informasi untuk memperoleh
sistem yang selanjutnya akan dikembangkan berdasarkan kebutuhan pengguna
web Alsyaf Shop. Pengumpulan informasi dilakukan untuk mendapatkan
kebutuhan dari web Alsyaf Shop. Hal tersebut diperoleh dengan dua cara, cara
pertama yaitu memperoleh referensi dari web e-commerce, diantaranya:
muslimahonline.net, zalora.co.id, dan hijabenka.com. Data yang didapatkan dari
referensi tersebut dijadikan sebagai data utama yang diacu pada sistem Alsyaf
Shop. Data yang didapatkan diantaranya adalah sebagai berikut:
 Info produk, terdiri atas gambar produk, deskripsi produk, dan spesifikasi
produk. Dalam spesifikasi produk terdapat info mengenai warna dan
ukuran.
 Info kategori produk, pengumpulan kategori produk dilakukan untuk
mengelompokan produk berdasarkan jenisnya. Terdiri atas gamis, pakaian,
rok, jilbab, mukena.

6


Info profil perusahaan, untuk mempermudah komunikasi pelanggan dalam
memberikan saran, kritik atau masukan dan untuk memperoleh informasi.
Biasanya menggunakan nomor HP, telepon, dan alamat email.
 Info pembayaran, menunjukkan bagaimana proses pembayaran dan bank
yang bisa digunakan untuk melakukan pembayaran.
 Info artikel muslimah, artikel-artikel bermanfaat mengenai bagaimana
berpakaian syar‟i dan artikel mengenai islam dikumpulkan sebagai bahan
bacaan pengunjung.
Cara kedua pengumpulan informasi, yaitu dengan dilakukannya wawancara
tidak terstruktur kepada calon pengguna untuk mengklarifikasi serta
mengkonfirmasi fungsi-fungsi yang sudah ada di referensi sebelumnya dan
penyesuaian fungsi-fungsi yang sudah ada. Calon pengguna yang diwawancarai
adalah pengguna pakaian muslimah syar‟i serta penjual pakaian muslimah secara
langsung dengan kata lain mempunyai toko fisik.
Kesimpulan yang didapatkan pada hasil wawancara tersebut yaitu, calon
pengguna sangat mengapresiasi pembangunan web e-commerce khusus pakaian
muslimah syar‟i ini. Diharapkan penjualan produk pakaian muslimah sesuai
dengan kaidah syar‟i yang sesungguhnya. Penambahan artikel info muslimah agar
bisa dijadikan acuan untuk pengguna mendapatkan informasi yang terkait dengan
tata cara berbusana muslim yang benar.
Oleh karena itu sistem yang akan dikembangkan sebagai proses bisnis untuk
toko online Alsyaf Shop adalah sebagai berikut:
1 Alsyaf Shop diakses secara online sehingga memudahkan pelanggan untuk
memesan dan berbelanja busana muslimah.
2 Alsyaf Shop berlandaskan penjualan busana muslimah yang syar‟i yang
membedakan dengan toko online lainnya.
3 Alsyaf Shop menyediakan info muslimah sebagai tambahan fungsi yang
berbeda dengan online shop lainnya.
Identifikasi Pengguna dan Fungsi Sistem
Identifikasi kebutuhan pengguna diperlukan agar terlihat perbedaan dari
masing-masing pengguna dalam menggunakan sistem sesuai dengan keperluan
pengguna. Analisis kebutuhan pengguna hasilnya dapat dilihat pada Tabel 1.
Selain itu untuk memperlihatkan fungsi yang tersedia pada sistem, bagaimana
hasil dari suatu fungsi serta penggunanya maka dapat dilihat pada Tabel 2
kebutuhan fungsional, sedangkan kebutuhan nonfungsional adalah batasan dari
kebutuhan fungsional, yang dapat dilihat pada Tabel 3.
Tabel 1 Kebutuhan Pengguna Iterasi 1
Pengguna
Pengunjung
Admin

Kebutuhan
Menampilkan halaman website yang berisi produk,
katalog, panduan, keranjang belanja, info muslimah
Mengelola fungsi modul-modul utama, baik
menambahkan, mengurangi, dan mengubah

7
Tabel 2 Kebutuhan Fungsional Iterasi 1
Kode
Fungsi
WMW-001
Fungsi menampilkan produk
WMW-002
Fungsi pemesanan produk
WMW-003
Fungsi mengubah pemesanan
WMW-004
Fungsi memasukkan data pembeli
WMW-005
Fungsi menampilkan artikel
WMW-006
Fungsi menambah komentar pada artikel
WMW-007
Fungsi search
WMW-008
Fungsi pembayaran
WMW-009
Fungsi login administrator
WMW-010
Fungsi menambah produk
WMW-011
Fungsi menambah kategori produk
WMW-012
Fungsi menambah artikel
WMW-013
Fungsi mengubah detail produk
WMW-014
Fungsi pengelolaan pemesanan
WMW-015
Fungsi pengelolaan pembayaran
WMW-016
Fungsi menampilkan panduan
WMW-017
Fungsi menampilkan kontak kami
WMW-018
Fungsi menampilkan pemesanan
WMW-019
Fungsi menampilkan katalog
*Keterangan: Pengunjung = P, Admin =Ad

Pengguna
P
P
P
P
P
P
P
P
Ad
Ad
Ad
Ad
Ad
Ad
Ad
P
P
P
P

Tabel 3 Kebutuhan Non-Fungsional
Kode
WMW-101
WMW-103

Parameter
Availability
Security

Kebutuhan
24 jam/hari, 7 hari/minggu
Keamanan menggunakan username dan
password untuk administrator dan anggota

Rencana Cepat dan Pemodelan Rancang Cepat
Ketika aplikasi e-commerce ini dimulai, halaman utama (home) yang berisi
modul-modul utama dalam aplikasi Alsyaf Shop ditampilkan. Adapun tahapan
proses bisnis dapat dilihat pada Gambar 3. Setelah tahap analisis selesai, maka
selanjutnya adalah merancang aplikasi yang telah didefinisikan sebelumnya.
Perancangan sistem dimulai dengan pembuatan proses bisnis, diagram konteks,
DFD, ERD, serta peta situs (site map).
Perancangan diagram konteks dapat dilihat pada Gambar 2 yang terdapat dua
pengguna utama, yaitu pengunjung dan admin dalam sistem Alsyaf shop. Setelah
perancangan diagram konteks atau DFD level 0 kemudian dikembangkan menjadi
DFD level 1 yang dapat dilihat pada Gambar 4. Menurut (Jogiyanto 2005) DFD
menggambarkan suatu sistem yang telah ada atau sistem yang baru yang akan
dikembangkan secara logika dan menjelaskan arus data dari mulai pemasukan
sampai dengan keluaran data tingkatan diagram arus data mulai dari diagram
konteks yang menjelaskan secara umum suatu sistem atau batasan sistem dari
level 0 dikembangkan menjadi level 1 sampai sistem tergambarkan secara rinci.

8
Validasi Login
Username,Password

Pengunjung

Informasi Pesanan

Data User
Daftar Produk
Pesanan
Bukti Pesanan

Produk

Alsyaf Shop

Ongkos Kirim
Kategori Produk

Informasi Pembayaran

Laporan Pesanan

Gambar 2 Diagram Konteks Iterasi Pertama

MULAI

Tampilkan Produk

Produk

Daftar Produk
Tambah Pembelian

Stok Produk
Tersedia?

T

Y
Tambahkan ke
Keranjang Belanja

Keranjang Belanja
T

Y
Edit Pembelian?

Data Pembeli
Data
Pengiriman
Metode Pembayaran
Konfirmasi
Pembayaran
Cetak Bukti
Pembayaran
Pengiriman Barang
Bukti Pembayaran
SELESAI

Gambar 3 Proses Bisnis Alsyaf Shop

Admin

9
Validasi Login Admin
Username,Password

1
Login

Daftar
Admin
Username,Password

Data Admin

Informasi Pesanan
2
Username,
Mengelola
Password
Ongkos
Kirim

Pengunjung

Pesanan
Bukti Pesanan
Pesanan

Ongkir
Ongkir
Ongkir
4
5
Mengelola
Mengelola
Produk
Daftar
Pesanan
Produk
Kategori
Ongkir

Daftar Produk

Admin

Kategori

Produk
Kategori

6
Mengelola
Transaksi

Pesanan

3
Mengelola
Admin

Data
Produk
Produk
Kategori

Pesanan

Daftar
Pesanan

Data
Pengguna

Kategori
Produk

Pesanan

Data Pengguna
7
Mengelola
Pengguna

Produk

Kategori
Pengguna

Data
Pengguna

Data
Pengguna

Laporan
Pesanan

8
Membuat
Laporan

Informasi Pembayaran

Gambar 4 DFD Level 1 Iterasi pertama
Terdapat delapan proses utama pada DFD level satu, yaitu Proses satu yakni
proses login. Admin memasukkan username dan password agar bisa masuk pada
menu halaman admin. Proses dua yakni proses mengelola ongkos kirim, yaitu
admin memasukkan data ongkir. Proses tiga yakni proses mengelola admin, yaitu
untuk mengelola data admin. Proses empat yakni proses mengelola pesanan, yaitu
pengunjung melakukan pesanan dan mendapatkan bukti pesanan serta admin
mendapatkan informasi pesanan. Proses lima yakni proses mengelola produk,
yaitu admin mengubah, menghapus, dan menambah produk, kategori produk.
Proses enam yakni proses mengelola transaksi, yaitu pengunjung memasukkan
pesanan. Proses tujuh yakni proses mengelola pengguna, yaitu pengguna
memasukkan data pribadi untuk melakukan pemesanan. Terakhir adalah Proses
delapan yakni proses membuat laporan, yaitu sistem mencetak laporan pesanan
kepada admin dan informasi pembayaran kepada pengunjung.

10
Konstruksi Prototipe
Rancangan modul menu utama terdiri atas beranda, profil, cara pembelian,
produk, keranjang belanja, hubungi kami dan info muslimah. Rancangan modul
menu utama ini berfungsi untuk memanggil sub-program lain untuk dijalankan.
Maka dihasilkan tampilan antarmuka struktur rancangan menu utama untuk
pengunjung seperti terlihat pada Gambar 5. Prototype iterasi pertama dibuat untuk
memberikan gambaran dan fungsionalitas kepada user mengenai antarmuka yang
nantinya akan digunakan pada Alsyaf Shop.
Setelah prototipe selesai dirancang, lalu dilakukan pengujian terlebih dahulu
sebelum diserahkan kepada pengguna untuk dinilai lebih lanjut. Berdasarkan hasil
pengujian black box dengan beberapa skenario yang diberikan menunjukkan
bahwa seluruh fungsi yang ada pada web Alsyaf Shop telah berjalan dengan baik
ditunjukkan pada Tabel 4.
Tabel 4 Hasil Pengujian Iterasi 1
Kode
WMW-001
WMW-002
WMW-003
WMW-004
WMW-005
WMW-006
WMW-007
WMW-008
WMW-009
WMW-010
WMW-011
WMW-012
WMW-013
WMW-014
WMW-015
WMW-016
WMW-017
WMW-018
WMW-019

Nama Fungsi
Fungsi menampilkan produk
Fungsi pemesanan produk
Fungsi mengubah pemesanan
Fungsi memasukkan data pembeli
Fungsi menampilkan artikel
Fungsi menambah komentar pada
artikel
Fungsi search
Fungsi pembayaran
Fungsi login administrator
Fungsi menambah produk
Fungsi menambah kategori
produk
Fungsi menambah artikel
Fungsi mengubah detail produk
Fungsi pengelolaan pemesanan
Fungsi pengelolaan pembayaran
Fungsi menampilkan panduan
Fungsi menampilkan kontak kami
Fungsi menampilkan pemesanan
Fungsi menampilkan katalog

Hasil
√
√
√
√
√
√

Keterangan
Skenario Lampiran 3
Skenario Lampiran 4
Skenario Lampiran 5
Skenario Lampiran 6
Skenario Lampiran 7
Skenario Lampiran 8

√
√
√
√
√

Skenario Lampiran 10
Skenario Lampiran 11
Skenario Lampiran 13
Skenario Lampiran 14
Skenario Lampiran 15

√
√
√
√
√
√
√
√

Skenario Lampiran 16
Skenario Lampiran 17
Skenario Lampiran 18
Skenario Lampiran 19
Skenario Lampiran 20
Skenario Lampiran 21
Skenario Lampiran 22
Skenario Lampiran 23

Penyerahan Produk dan Pengumpulan Umpan Balik
Penyerahan produk dilakukan oleh pengembang kepada pengguna.
Selanjutnya disepakati terdapat beberapa perubahan pada prototipe iterasi pertama
yang nantinya akan diimplementasikan pada iterasi kedua, di antaranya:
1 Perlu penyesuaian antarmuka pada halaman. Pada top menu, cara pembelian
diganti menjadi panduan yang didalamnya berisi tiga sub menu lagi, yaitu cara
pemesanan, metode pembayaran, dan pengiriman

11
2

3

4

5

6

Pada top menu, menu produk diubah menjadi katalog. Sebelumnya pemilihan
menu katalog akan menampilkan produk secara keseluruhan, namun agar
memudahkan pengunjung dan anggota maka ditampilkan pula pemilihan
berdasarkan kategori produk.
Pada main menu yang diletakkan di samping kiri halaman web, ditambahkan
fungsi menu info muslimah dan peletakan banner iklan menjadi di bawah
halaman tidak di bagian kiri halaman.
Antarmuka dibuat dengan lebih menarik agar user lebih mudah dalam
menggunakan website Alsyaf Shop, diantaranya dengan mengecilkan ukuran
header, memindahkan top menu menjadi di atas header, dan penyesuaian
lainnya.
Pada main menu yang diletakkan di samping kiri halaman web, ditambahkan
fungsi pencarian (search) agar memudahkan pengunjung dalam mencari
produk yang diinginkan
Pada halaman info muslimah ditambahkan kolom komentar untuk pengunjung
maupun anggota.

Gambar 5 Antarmuka Iterasi Pertama

12
Iterasi 2
Komunikasi
Pada iterasi kedua dilakukan analisis lagi, dimana perlu dilakukan
penambahan fungsi anggota pada pengunjung. Pada awalnya pengunjung bisa
membeli produk dengan memasukkan data pembeli. Akan tetapi, untuk
memudahkan pengunjung yang akan menjadi pelanggan, diberikan fungsi anggota,
agar pengunjung tidak perlu memasukkan data pembeli berulangkali saat hendak
membeli produk. Maka setelah dilakukan penambahan pengguna, didapatlah
kebutuhan pengguna seperti terlihat pada Tabel 5. Tabel kebutuhan fungsional
mengalami penyesuaian dengan adanya penambahan user anggota, penambahan
fungsi tersebut dapat dilihat pada Tabel 6.
Tabel 5 Kebutuhan Pengguna Iterasi 2
Pengguna
Pengunjung
Admin
Anggota

Kebutuhan
Menampilkan halaman website yang berisi produk,
katalog, panduan, keranjang belanja, info muslimah
Mengelola fungsi modul-modul utama, baik
menambahkan, mengurangi, dan mengubah
Login (Memasukkan username dan password),
Menampilkan halaman website yang berisi produk,
katalog, profil anggota, panduan, keranjang belanja,
info muslimah, Logout

Tabel 6 Kebutuhan Fungsional Iterasi 2
Kode
WMW-001
WMW-002
WMW-003
WMW-004
WMW-005
WMW-006
WMW-007
WMW-008
WMW-009
WMW-010
WMW-011
WMW-012
WMW-013
WMW-014
WMW-015
WMW-016
WMW-017
WMW-018

Fungsi
Fungsi menampilkan produk
Fungsi pemesanan produk
Fungsi mengubah pemesanan
Fungsi memasukkan data pembeli
Fungsi menampilkan artikel
Fungsi menambah komentar pada artikel
Fungsi search
Fungsi pembayaran
Fungsi login administrator
Fungsi menambah produk
Fungsi menambah kategori produk
Fungsi menambah artikel
Fungsi mengubah detail produk
Fungsi pengelolaan pemesanan
Fungsi pengelolaan pembayaran
Fungsi menampilkan panduan
Fungsi menampilkan kontak kami
Fungsi menampilkan pemesanan

Pengguna
P,A
P,A
P,A
P
P,A
P,A
P,A
P,A
Ad
Ad
Ad
Ad
Ad
Ad
Ad
P,A
P,A
P,A

13
Kode
Fungsi
WMW-019
Fungsi menampilkan katalog
WMW-020
Fungsi login anggota
WMW-021
Fungsi menampilkan profil anggota
WMW-022
Fungsi logout anggota
*Keterangan: Pengunjung = P, Admin = Ad, Anggota = A

Pengguna
P,A
A
A
A

Rencana Cepat dan Pemodelan Rancang Cepat
Setelah dilakukan perancangan pada iterasi pertama, disepakati bahwa perlu
dilakukan penambahan fungsi anggota pada pengunjung. Pada awalnya
pengunjung bisa membeli produk dengan memasukkan data pembeli. Akan tetapi
untuk memudahkan pengunjung yang akan menjadi pelanggan, maka diberikan
fungsi anggota, agar pengunjung tidak perlu memasukkan data pembeli
berulangkali saat hendak membeli produk. Oleh karena itu, dirancang kembali
konteks diagram iterasi kedua (Gambar 6) dan DFD level 1 iterasi kedua (Gambar
7), yang memperlihatkan penambahan user anggota. Sehingga dapat dilihat pada
konteks diagram dan DFD level 1 terdapat penambahan proses pendaftaran untuk
anggota.
Selanjutnya dirancang ERD yang merupakan proses perancangan basis data
untuk membuat permodelan data. Basis data ini terintegrasi dengan database yang
sudah tersedia pada Joomla dan Virtuemart. Perancangan ERD dapat dilihat pada
Gambar 8.
Untuk memberikan gambaran modul fungsi utama yang terdapat dalam
aplikasi web Alsyaf Shop maka dibuatlah peta situs yang ditunjukkan pada
Gambar 9. Pada peta situs terlihat beberapa modul atau menu yang berulang,
seperti menu pencarian, kategori, produk terlaris, icon keranjang dan iklan. Menu
tersebut merupakan submenu yang terletak pada bagian kiri web Alsyaf Shop.
Submenu akan selalu ditampilkan pada menu utama web, yaitu pada menu utama:
beranda, profil, panduan, katalog, keranjang, kontak kami, dan info muslimah.
Submenu difungsikan untuk mempermudah pengguna dalam mencari menu-menu
yang sering digunakan.
Validasi Login

Anggota

Username, Password
Data Anggota
Daftar Produk
Pesanan
Bukti Pesanan

Informasi Pembayaran
Daftar Produk
Pesanan
Data Pengunjung
Pengunjung
Bukti Pesanan
Informasi Pembayaran

Validasi Login

Alsyaf Shop

Username,Password
Informasi Pesanan
Produk
Ongkos Kirim
Kategori Produk
Laporan Pesanan

Gambar 6 Diagram Konteks Iterasi Kedua

Admin

14
Validasi Login Member
Username,Password
Username,Password
Data Anggota

9
Pendaftaran

Bukti Pesanan
Pesanan

Pesanan
Daftar Produk
Daftar Poduk
Pesanan

Pengunjung

3
Mengelola
Admin
Ongkos Kirim
Kategori

Ongkos
5
Kirim Mengelola
produk
Kota

4
Mengelola
Pesanan

Admin

Produk
Kategori

Produk
Kategori
Data
Produk

6
Mengelola
Transaksi

Produk
Kategori
Produk

Kategori Produk

Pesanan
Pesanan

Produk

Pesanan
Data Pengguna

7
Mengelola
Pengguna

Data
Pengguna

Data Admin

Kirim

Pesanan
Bukti Pesanan

Anggota

Daftar
Admin

Username,Password
Informasi Pesanan
Username,
2
Password
Mengelola
Ongkos
Ongkos Kirim

Daftar
Anggota

Username,Password
Data Anggota

Validasi Login Admin
Username,Password

1
Login

Laporan
Pesanan

Kategori

Pengguna

Data
Pengguna

8
Pembuatan
Laporan

Data
Pengguna

Informasi Pembayaran

Gambar 7 DFD Level 1 Iterasi Kedua
Id_produk

Id_kategori

deskripsi

Id_kategori

Nama_kategori

Tgl_masuk

harga

gambar

stok

M

Produk
nama_produk

1

Memiliki

Kategori

1
Memiliki
Jumlah

subtotal
Id_pesanan
M

M
Detail
Pesanan

passid

Id_produk

userid
1

User

Id_user
Telp_hp

nama

Melakukan

Telp_rumah

alamat
kota

telepon
email

Id_order

Id_kota
Status_order

Kode_pos
alamat
Tgl_order

M
Pesanan

Mempunyai
1

email

Nama_user

1
Ongkos_kirim
Mengirim

1

Nama_kota
Id_kota
Kota

Gambar 8 Entity Relationship Diagram (ERD)

15
Menu Utama

Beranda
Pencarian
Kategori
Gamis
Baju
Rok
Hijab/Jilbab
Mukena
Produk Terlaris
Gambar
produk
Icon beli
Icon
Keranjang

Profil

Panduan

Katalog

Pencarian
Kategori

Pencarian
Kategori

Pencarian
Kategori

Diskon dan
Promo

Cara Pemesanan
Metode
Pembayaran
Pengiriman

Produk

Layanan
Antar
Stok
Tersedia
Produk Terlaris
Icon
Keranjang
Iklan

Produk Terlaris
Icon
Keranjang
Iklan

Gambar
Produk
Detail
Produk
Icon beli
Produk
Terlaris
Icon
Keranjang
Iklan

Iklan

Keranjang
Pencarian
Kategori
Keranjang
belanja
Ubah Belanja
Teruskan
Belanja
Check Out
Data
pembeli

Kontak Kami
Pencarian
Kategori
Kontak
Alamat
No Telp
Email
Produk Terlaris
Icon
Keranjang

Iklan
Icon proses
Data pemesanan
Harga total+
ongkos kirim
Produk Terlaris
Icon
Keranjang
Iklan

Info Muslimah
Pencarian
Kategori
Artikel
Muslimah
Kolom
Komentar
Produk Terlaris
Icon
Keranjang
Iklan

Gambar 9 Peta Situs
Konstruksi Prototipe
Website Alsyaf Shop diimplementasikan dengan menggunakan Content
Management System (CMS) Joomla 2.5 dengan modul VirtueMart 2.6.6, Modul
VirtueMart merupakan modul yang disediakan CMS joomla dalam membangun
website penjualan (Barakat 2013). Selain itu untuk menrancang antarmuka
mengunakan CSS. Basis data menggunakan MySQL yang terdapat pada XAMPP.
Tabel basis data sudah terintegrasi dari Joomla dan VirtueMart. Dalam
pembuatannya pengembang menggunakan acuan dari buku (Irawan 2012) dan
(Musliadi 2012) yang berisi informasi mengenai pembuatan web e-commerce
menggunakan Joomla dan modul VirtueMart.
Dalam melakukan pembelian produk, pengunjung ataupun anggota dapat
melakukan pembelian. Bagi pengunjung pembelian produk harus melalui tahapan
pengisian data diri dan data pengiriman barang. Bagi anggota cukup dengan
melakukan login, dan tidak perlu mengisikan data diri lagi, kecuali pengiriman
barang dilakukan pada alamat yang berbeda. Setelah memasukkan barang
belanjaan ke dalam keranjang belanja pengguna dapat langsung memilih tata cara
pembayaran yang diinginkan. Web Alsyaf Shop menyediakan tata cara
pembayaran dengan transfer yang diinformasikan pada web.
Pada halaman admin yang sudah disediakan dari Joomla, admin secara aktif
dapat merubah dan menambahkan modul-modul fungsi utama yang terdapat pada
web. Di antaranya admin dapat menambahkan produk, kategori produk, maupun

16
menghapus produk yang sudah terjual habis. Pada modul info muslimah admin
dapat membalas komentar dari pengunjung web.
Setelah prototipe selesai dibangun, maka dilakukan pengujian kembali.
Namun pengujian yang dilakukan pada iterasi kedua lebih singkat daripada
pengujian yang dilakukan pada iterasi pertama, karena sudah banyak komponen
yang telah diuji sebelumnya. Komponen baru harus diuji kembali dan semua
interface harus dilatih secara penuh. Pengujian yang dilakukan pada iterasi kedua
dapat dilihat pada Tabel 7, serta tampilan antarmuka halaman utama pada web
Alsyaf shop pada iterasi kedua selanjutnya dapat dilihat pada Gambar 10.

Gambar 10 Antarmuka Iterasi Kedua

17
Penyerahan Produk dan Pengumpulan Umpan Balik
Sistem yang sudah disempurnakan pada iterasi kedua oleh pengembang,
selanjutnya diserahkan kepada pengguna untuk kemudian dinilai kembali apakah
sudah sesuai dengan keinginan pengguna. Berdasarkan prototipe yang sudah
diberikan, maka disimpulkan bahwa fungsi pada sistem sudah sesuai dengan
keinginan pengguna. Dan berdasarkan pengujian yang sudah dilakukan oleh
pengembang, dengan hasil yang menunjukkan bahwa fungsi sudah berjalan
dengan baik. Maka disimpulkan tidak diperlukan iterasi kembali, sehingga iterasi
berhenti pada iterasi kedua.
Tabel 7 Hasil Pengujian Iterasi 2
Kode
WMW-003
WMW-004
WMW-006
WMW-007
WMW-015
WMW-016
WMW-017
WMW-018
WMW-019
WMW-020
WMW-022

Nama Fungsi
Hasil
Fungsi mengubah profil anggota
√
Fungsi memasukkan data pembeli
√
Fungsi menambah komentar pada
√
artikel
Fungsi search
√
Fungsi pengelolaan pembayaran
√
Fungsi menampilkan panduan
√
Fungsi menampilkan kontak kami
√
Fungsi menampilkan pemesanan
√
Fungsi menampilkan katalog
√
Fungsi login anggota
√
Fungsi logout anggota
√

Keterangan
Skenario Lampiran 9
Skenario Lampiran 6
Skenario Lampiran 8
Skenario Lampiran 10
Skenario Lampiran 19
Skenario Lampiran 20
Skenario Lampiran 21
Skenario Lampiran 22
Skenario Lampiran 23
Skenario Lampiran 2
Skenario Lampiran 12

SIMPULAN DAN SARAN
Simpulan
Penelitian ini menghasilkan aplikasi e-commerce Alsyaf Shop berbasis web
yang dikembangkan dengan metode Prototyping. Aplikasi ini diharap mampu
menjawab kebutuhan wanita muslimah khususnya, dalam menyediakan berbagai
busana muslimah syar‟i. Modul info muslimah yang disediakan dalam aplikasi
berisi artikel tentang cara berpakaian muslimah syar‟i yang informatif sehingga
mengajak pengunjung untuk berpakaian syar‟i.
Saran
Sistem Alsyaf Shop selanjutnya dapat ditambahkan menu testimoni dari
pelanggan ataupun pembeli. Testimoni berisi komentar dari pembeli yang sudah
merasakan dan menggunakan produk yang dijual oleh web Alsyaf Shop.
Tujuannya untuk meningkatkan daya minat beli pengunjung, karena dapat
membaca testimoni dari pembeli mengenai kualitas produk tersebut.

18

DAFTAR PUSTAKA
Aprilia EP. 2012, Aplikasi modul shopping cart pada toko Eien berbasis online
[skripsi]. Jakarta (ID): Universitas Islam Negri.
Barakat S. 2013, Agile Programming: as a CMS development Methodology.
Innovative Systems Design and Engineering: 4(1)
Irawan. 2012. Membuat Toko Baju Online dengan Joomla 2.5. Palembang(ID):
Maxikom.
Jogiyanto H. 2005. Analisis dan Rancang Sistem Informasi Ed ke3. Yogyakarta(ID): Andi.
Kotler, Philip, Garu. 2003. Dasar – dasar Pemasaran Jilid 1. Jakarta(ID): Indeks
Gramedia.
Musliadi KH. 2012. Joomla! 2.5 + Ekstensi Populer Untuk Membuat Website
Dinamis. Jakarta(ID): Media Kita.
Nugroho A. 2006. E-Commerce Memahami Perdagangan Modern di Dunia Maya.
Bandung(ID): Informatika.
Pressman RS. 2010. Software Engineering A Practitioner`s Approach. New
York(US): McGraw Hill Higher.
Rifqi, Kerthadi, Riyadi. 2013. Analisis dan Rancang website e-commerce sebagai
media penjualan elektronik (Studi pada CV Adiwahana Computer Kediri).
Jurnal Administrasi Bisnis: 3(1)

19
Lampiran 1 Antarmuka Alsyaf Shop
a. Header Alsyaf Shop, yang terdiri dari: top menu yaitu beranda, profil,
panduan, katalog, keranjang, kontak kami, info muslimah. Lalu terdapat logo
Alsyaf shop pada kiri atas web, serta header yang berada di bawah top menu
yang dapat berganti-ganti secara otomatis. Icon keranjang belanja berada di
kanan atas.

b. Halaman beranda, pada sebelah kiri halaman terdapat main menu yang berisi
menu pencarian, kategori, login anggota, info muslimah, dan produk terlaris.
Beranda berisi deskripsi singkat mengenai alsyaf shop.

20
c. Halaman registrasi anggota, ditujukan kepada pengguna yang ingin menjadi
anggota.

d. Halaman profil, berisi penjelasan diskon, pelayanan, dan kemudahan yang
disediakan Alsyaf shop.

21
e. Halaman panduan, berisi keterangan cara pemesanan, metode pembayaran, dan
pengiriman.

f. Halaman katalog, berisi kategori produk yaitu gamis, pakaian, hijab, mukena.

22
g. Halaman keranjang, produk yang dibeli akan dimasukkan ke dalam keranjang.
Terdapat form pengiriman barang, alamat penagihan, daftar pesanan, dan
fungsi checkout.

h. Halaman detail akun, berisi form yang harus dilengkapi pembeli setelah
memesan produk.

23
i. Halaman kontak kami, berisi alamat, no hp, email Alsyaf shop.

j. Halaman info muslimah, berisi artikel muslimah yang membahas seputar
pakaian syar‟i dan info-info terkait muslimah.

24
k. Kolom artikel, berisi penjelasan artikel yang berada dalam menu info
muslimah.

l. Kolom comment artikel, pengguna dan anggota dapat memberikan komentar
terkait artikel pada menu info muslimah.

25
m. Kolom daftar pesanan, berisi detail pesanan, pembeli dapat mengubah jumlah
pesanan atau menghapusnya.

n. Kolom detail produk, berisi deskripsi produk yaitu warna, ukuran, bahan, dan
harga.

26
o. Halaman list produk mukena, berisi detail gambar produk mukena.

27
Lampiran 2 Test case fungsi login anggota
Fungsi login anggota
True Case
Membuka halaman login anggota
7 Juli 2014
Skenario
1. Membuka halaman login anggota
2. Memasukkan username anggota
3. Memasukkan password
4. Menekan tombol login
Yang Diharapkan
Pengamatan
Kesimpulan
Masuk ke halaman home Masuk ke halaman home
OK
anggota
anggota
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi login anggota
Wrong Case
Membuka halaman login anggota
3 Agustus 2014
Skenario
1. Membuka halaman login anggota
2. Memasukkan username anggota yang belum didaftarkan
3. Memasukkan password yang belum didaftarkan
4. Menekan tombol login
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pop up
Menampilkan pesan
OK
keterangan login tidak
“username dan password
berhasil
tidak cocok atau anda
belum memiliki akun”
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Lampiran 3 Test case fungsi menampilkan produk
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi menampilkan produk
Kondisi normal
Membuka halaman katalog
7 Juli 2014
Skenario
1. Membuka halaman katalog
2. Memilih kategori produk
3. Menekan tombol detail produk
Yang Diharapkan
Pengamatan
Menampilkan produk
Menampilkan produk
detail
detail

Kesimpulan
OK

28
Lampiran 4 Test case fungsi pemesanan produk.
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi pemesanan produk
True Case
Masuk ke halaman detail produk
7 Juli 2014
Skenario
1. Masuk ke halaman detail produk
2. Tekan add to cart
3. Tekan add billing address information
4. Input data pembeli
5. Tekan tombol 'save'
Yang Diharapkan
Pengamatan
Kesimpulan
Pemesanan berhasil
Muncul pesan „cara
OK
pembayaran‟
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi pemesanan produk
Wrong Case
Masuk ke halaman detail produk
3 Agustus 2014
Skenario
1. Masuk ke halaman detail produk
2. Tekan add to cart
3. Tekan add billing address information
4. Data pembeli tidak di input dengan lengkap
5. Tekan tombol 'save'
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pop up
Menampilkan pesan
OK
“lengkapi kolom yang
“lengkapi kolom yang
belum diisi”
belum diisi”
Lampiran 5 Test case fungsi mengubah pemesanan.
Fungsi edit pemesanan
True Case
Sudah melakukan pemesanan
7 Juli 2014
Skenario
1. Masuk ke halaman keranjang belanja
2. Ubah pesanan pada kolom pesanan
3. Tekan lambang ‘refresh’
Yang Diharapkan
Pengamatan
Pesanan berhasil diubah
Perubahan pada kolom
harga sesuai pengubahan
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Kesimpulan
OK

29
Fungsi edit pemesanan
Wrong Case
Sudah melakukan pemesanan
3 Agustus 2014
Skenario
1. Masuk ke halaman keranjang belanja
2. Ubah jumlah pesanan dengan angka yang tidak valid (ex:-1)
3. Tekan lambang ‘refresh’
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pop up
Menampilkan pesan
OK
“masukkan kuantitas
“masukkan kuantitas
yang valid”
yang valid”
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Lampiran 6 Test case fungsi memasukkan data pembeli.
Fungsi input data pembeli
True Case
Pengunjung telah melakukan pemesanan
7 Juli 2014
Skenario
1. Masuk ke halaman keranjang belanja
2. Pilih/tekan “tambah/ubah informasi alamat penagihan
3. Sistem memunculkan halaman “detil akun anda”
4. Masukkan data diri ke dalam form
5. Tekan tombol “simpan”
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pesan
Menampilkan data
OK
“penyimpanan berhasil”
pembeli
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi input data pembeli
Wrong Case
Pengunjung telah melakukan pemesanan
3 Agustus 2014
Skenario
1. Masuk ke halaman keranjang belanja
2. Pilih/tekan “tambah/ubah informasi alamat penagihan
3. Sistem memunculkan halaman “detil akun anda”
4. Masukkan data diri ke dalam form (tidak lengkap)
5. Tekan tombol “simpan”
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pesan
Menampilkan pesan
OK
“lengkapi kolom yang
“lengkapi kolom yang
belum diisi”
belum diisi”
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

30
Lampiran 7 Test case fungsi menampilkan artikel
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi menampilkan artikel
Kondisi normal
Masuk ke halaman info muslimah
7 Juli 2014
Skenario
1. Masuk ke halaman info muslimah
2. Pilih artikel yang mau ditampilkan
3. Pilih/tekan tombol “selengkapnya
Yang Diharapkan
Pengamatan
Kesimpulan
Artikel info muslimah
Artikel ditampilkan
OK
ditampilkan
Lampiran 8 Test case fungsi menambah komentar pada artikel.
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi menambah komentar pada artikel
True Case
Masuk ke kolom artikel
7 Juli 2014
Skenario
1. Masuk ke kolom artikel dalam menu Info muslimah
2. Kolom komentar terletak di bawah artikel
3. Masukkan nama,email, dan komentar
4. Pilih/tekan tombol kirim
Yang Diharapkan
Pengamatan
Kesimpulan
Komentar ditampilkan
Komentar ditampilkan
OK
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi menambah komentar pada artikel
Wrong Case
Masuk ke kolom artikel
3 Agustus 2014
Skenario
1. Masuk ke kolom artikel dalam menu Info muslimah
2. Kolom komentar terletak di bawah artikel
3. Masukkan komentar tanpa disertai nama dan email
4. Pilih/tekan tombol kirim
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pesan
Menampilkan pesan
OK
“lengkapi kolom nama
“lengkapi kolom nama
dan email”
dan email”

31
Lampiran 9 Test case fungsi mengubah profil anggota.
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi edit profil anggota
Kondisi normal
Masuk ke halaman utama
7 Juli 2014
Skenario

1. Masuk ke halaman utama
2. Pilih menu ubah anggota pada main menu
3. Masukkan data yang ingin diubah
4. Pilih/tekan simpan
Yang Diharapkan
Pengamatan
Data berhasil diubah
Data baru ditampilkan

Kesimpulan
OK

Lampiran 10 Test case fungsi search.
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi search
True Case
Masuk ke menu utama
7 Juli 2014
Skenario

1. Masuk ke menu utama
2. Pada main menu yang terdapat di sebelah kiri halaman terdapat fungsi search
(pencarian)
3. Masukkan nama produk yang ingin dicari
Yang Diharapkan
Pengamatan
Kesimpulan
Halaman produk akan
Halaman produk muncul
OK
muncul sesuai dengan
kata yang dimasukkan
dalam kolom pencarian
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi search
Wrong Case
Masuk ke menu utama
3 Agustus 2014
Skenario

1. Masuk ke menu utama
2. Pada main menu yang terdapat di sebelah kiri halaman terdapat fungsi search
(pencarian)
3. Masukkan nama produk yang tidak terdapat pada web
Yang Diharapkan
Pengamatan
Kesimpulan
Menampilkan pesan
Menampilkan pesan
OK
“pencarian tidak
“pencarian tidak
ditemukan”
ditemukan”

32
Lampiran 11 Test case fungsi pembayaran.
Nama Kasus Uji
Deskripsi
Kondisi Awal
Tanggal Pengujian

Fungsi pembayaran
Kondisi normal
Pemasukkan data pembelian telah dilakukan
7 Juli 2014
Skenario
1. Setelah melakukan pembelian, tekan tombol “checkout”
2. Halaman pembayaran ditampilkan
3. Pilih metode pembayaran yang diinginkan
4. Konfirmasi pembayaran 1X24 Jam dari pembelian
Yang Diharapkan
Pengamatan
Kesimpulan
Info pembayaran
Info pembayaran
OK
ditampilkan
ditampilkan
Lampiran 12 Test case fungsi logout anggota.
Nama Kasus Uji
Deskripsi
Kondi