PENGEMBANGAN E-COMMERCE KHUSUS PAKAIAN …repository.ipb.ac.id/jspui/bitstream/123456789/72747/1/G14mia.pdf · disebutkan dalam teks dan dicantumkan dalam Daftar Pustaka di bagian

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

Commerce 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 e-commerce 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

Skripsi

sebagai salah satu syarat untuk memperoleh gelar

Sarjana Ilmu Komputer

pada

Departemen Ilmu Komputer

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

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




Iterasi 2 12

Komunikasi 12




SIMPULAN DAN SARAN 17

Simpulan 17

Saran 17

DAFTAR PUSTAKA 18

DAFTAR TABEL

1 Kebutuhan Pengguna Iterasi 1 6

2 Kebutuhan Fungsional Iterasi 1 7

3 Kebutuhan Non-Fungsional 7

4 Hasil Pengujian Iterasi 1 10

5 Kebutuhan Pengguna Iterasi 2 12

6 Kebutuhan Fungsional Iterasi 2 12

7 Hasil Pengujian Iterasi 2 17

DAFTAR GAMBAR

1 Tahapan metode prototyping 3

2 Diagram Konteks Iterasi Pertama 8

3 Proses Bisnis Alsyaf Shop 8

4 DFD Level 1 Iterasi pertama 9

5 Antarmuka Iterasi Pertama 11

6 Diagram Konteks Iterasi Kedua 13

7 DFD Level 1 Iterasi Kedua 14

8 Entity Relationship Diagram (ERD) 14

9 Peta Situs 15

10 Antarmuka Iterasi Kedua 16

DAFTAR LAMPIRAN

1 Antarmuka Alsyaf Shop 19

2 Test case fungsi login anggota 27

3 Test case fungsi menampilkan produk 27

4 Test case fungsi pemesanan produk. 28

5 Test case fungsi mengubah pemesanan. 28

6 Test case fungsi memasukkan data pembeli. 29

7 Test case fungsi menampilkan artikel 30

8 Test case fungsi menambah komentar pada artikel. 30

9 Test case fungsi mengubah profil anggota. 31

10 Test case fungsi search. 31

11 Test case fungsi pembayaran. 32

12 Test case fungsi logout anggota. 32

13 Test case fungsi login administrator. 32

14 Test case fungsi menambah produk. 33

15 Test case Fungsi menambah kategori produk 33

16 Test case fungsi menambah artikel. 34

17 Test case fungsi mengubah detail produk. 34

18 Test case fungsi pengelolaan pemesanan. 34

19 Test case fungsi pengelolaan pembayaran. 35

20 Test case fungsi menampilkan panduan 35

21 Test case fungsi menampilkan pemesanan 35

22 Test case fungsi menampilkan kontak kami 36

23 Test case fungsi menampilkan katalog 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 e-

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

http://www.joomla.org/

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

commerce Alsyaf Shop dan data yang dibutuhkan. Pengambilan data yang

digunakan dalam pengembangan website ini diambil dari beberapa website e-

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

Pengunjung Menampilkan halaman website yang berisi produk,

katalog, panduan, keranjang belanja, info muslimah

Admin Mengelola fungsi modul-modul utama, baik

menambahkan, mengurangi, dan mengubah

7

Tabel 2 Kebutuhan Fungsional Iterasi 1

Kode Fungsi Pengguna

WMW-001 Fungsi menampilkan produk P

WMW-002 Fungsi pemesanan produk P

WMW-003 Fungsi mengubah pemesanan P

WMW-004 Fungsi memasukkan data pembeli P

WMW-005 Fungsi menampilkan artikel P

WMW-006 Fungsi menambah komentar pada artikel P

WMW-007 Fungsi search P

WMW-008 Fungsi pembayaran P

WMW-009 Fungsi login administrator Ad

WMW-010 Fungsi menambah produk Ad

WMW-011 Fungsi menambah kategori produk Ad

WMW-012 Fungsi menambah artikel Ad

WMW-013 Fungsi mengubah detail produk Ad

WMW-014 Fungsi pengelolaan pemesanan Ad

WMW-015 Fungsi pengelolaan pembayaran Ad

WMW-016 Fungsi menampilkan panduan P

WMW-017 Fungsi menampilkan kontak kami P

WMW-018 Fungsi menampilkan pemesanan P

WMW-019 Fungsi menampilkan katalog P

*Keterangan: Pengunjung = P, Admin =Ad

Tabel 3 Kebutuhan Non-Fungsional

Kode Parameter Kebutuhan

WMW-101 Availability 24 jam/hari, 7 hari/minggu

WMW-103 Security Keamanan menggunakan username dan

password untuk administrator dan anggota


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

Pengunjung AdminAlsyaf ShopPesanan

Bukti Pesanan

Informasi Pembayaran

Informasi Pesanan

Ongkos Kirim

Produk

Laporan Pesanan

Username,Password

Daftar Produk

Kategori Produk

Data User

Validasi Login

Gambar 2 Diagram Konteks Iterasi Pertama

MULAI

Tampilkan Produk

Tambah Pembelian

Stok Produk

Tersedia?

Produk

Edit Pembelian?

T

Y

Y T

Metode Pembayaran

Konfirmasi

Pembayaran

Pengiriman Barang

SELESAI

Keranjang Belanja

Data Pembeli

Data

Pengiriman

Cetak Bukti

Pembayaran

Bukti Pembayaran

Daftar Produk

Tambahkan ke

Keranjang Belanja

Gambar 3 Proses Bisnis Alsyaf Shop

9

Pengunjung Admin

1

Login

7

Mengelola

Pengguna

4

Mengelola

Pesanan

Username,Password

Validasi Login Admin

8

Membuat

Laporan

5

Mengelola

Produk

Username,Password

Produk

Kategori

Kategori

Produk

Kategori

Produk

Kategori

PesananBukti Pesanan

Data

Pengguna

Pesanan

PesananProduk

Laporan

PesananPengguna

Data

Pengguna

Data

Pengguna

Data Pengguna

Informasi Pesanan

Kategori

Kategori

6

Mengelola

Transaksi

Produk

Pesanan

Pesanan

3

Mengelola

Admin

Username,

Password


Daftar Produk

Data Admin

Daftar

Pesanan

2

Mengelola

Ongkos

Kirim

Daftar

Ongkir

OngkirOngkir

Ongkir

Daftar

Admin

Data

Produk

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


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 Nama Fungsi Hasil Keterangan

WMW-001 Fungsi menampilkan produk √ Skenario Lampiran 3

WMW-002 Fungsi pemesanan produk √ Skenario Lampiran 4

WMW-003 Fungsi mengubah pemesanan √ Skenario Lampiran 5

WMW-004 Fungsi memasukkan data pembeli √ Skenario Lampiran 6

WMW-005 Fungsi menampilkan artikel √ Skenario Lampiran 7

WMW-006 Fungsi menambah komentar pada

artikel

√ Skenario Lampiran 8

WMW-007 Fungsi search √ Skenario Lampiran 10

WMW-008 Fungsi pembayaran √ Skenario Lampiran 11

WMW-009 Fungsi login administrator √ Skenario Lampiran 13

WMW-010 Fungsi menambah produk √ Skenario Lampiran 14

WMW-011 Fungsi menambah kategori

produk


WMW-012 Fungsi menambah artikel √ Skenario Lampiran 16

WMW-013 Fungsi mengubah detail produk √ Skenario Lampiran 17

WMW-014 Fungsi pengelolaan pemesanan √ Skenario Lampiran 18

WMW-015 Fungsi pengelolaan pembayaran √ Skenario Lampiran 19

WMW-016 Fungsi menampilkan panduan √ Skenario Lampiran 20

WMW-017 Fungsi menampilkan kontak kami √ Skenario Lampiran 21

WMW-018 Fungsi menampilkan pemesanan √ Skenario Lampiran 22

WMW-019 Fungsi menampilkan katalog √ Skenario Lampiran 23


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

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

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

5 Pada main menu yang diletakkan di samping kiri halaman web, ditambahkan

fungsi pencarian (search) agar memudahkan pengunjung dalam mencari

produk yang diinginkan

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

Pengunjung Menampilkan halaman website yang berisi produk,

katalog, panduan, keranjang belanja, info muslimah

Admin Mengelola fungsi modul-modul utama, baik

menambahkan, mengurangi, dan mengubah

Anggota 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


WMW-001 Fungsi menampilkan produk P,A

WMW-002 Fungsi pemesanan produk P,A

WMW-003 Fungsi mengubah pemesanan P,A

WMW-004 Fungsi memasukkan data pembeli P

WMW-005 Fungsi menampilkan artikel P,A

WMW-006 Fungsi menambah komentar pada artikel P,A

WMW-007 Fungsi search P,A

WMW-008 Fungsi pembayaran P,A

WMW-009 Fungsi login administrator Ad

WMW-010 Fungsi menambah produk Ad

WMW-011 Fungsi menambah kategori produk Ad

WMW-012 Fungsi menambah artikel Ad

WMW-013 Fungsi mengubah detail produk Ad

WMW-014 Fungsi pengelolaan pemesanan Ad

WMW-015 Fungsi pengelolaan pembayaran Ad

WMW-016 Fungsi menampilkan panduan P,A

WMW-017 Fungsi menampilkan kontak kami P,A WMW-018 Fungsi menampilkan pemesanan P,A

13


WMW-019 Fungsi menampilkan katalog P,A

WMW-020 Fungsi login anggota A

WMW-021 Fungsi menampilkan profil anggota A

WMW-022 Fungsi logout anggota A

*Keterangan: Pengunjung = P, Admin = Ad, Anggota = A


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.

Pengunjung

AdminAlsyaf Shop

Pesanan

Bukti Pesanan

Informasi Pesanan

Ongkos KirimProduk

Username,Password

Daftar Produk Kategori Produk

Data Pengunjung

Validasi Login

Anggota

Validasi Login

Pesanan

Username, PasswordData Anggota

Daftar Produk

Bukti Pesanan



Laporan Pesanan

Gambar 6 Diagram Konteks Iterasi Kedua

14

AnggotaAdmin

1

Login

7

Mengelola

Pengguna

4

Mengelola

Pesanan

Username,PasswordValidasi Login Admin

Username,Password

Validasi Login Member

9

Pendaftaran

8

Pembuatan

Laporan

5

Mengelola

produk

Username,Password

Ongkos Kirim

Kategori

Produk

Username,Password

Username,Password

Data Anggota

Data Anggota

Kategori

Produk

Kota

Kategori

Ongkos

Kirim

Produk

Kategori Produk

Ongkos

Kirim

Bukti Pesanan

Data

Pengguna

Pesanan

Pesanan

Pesanan Produk Laporan

PesananPengguna

Data

Pengguna

Data

Pengguna

Data Pengguna

Informasi Pesanan

Kategori

Kategori

6

Mengelola

Transaksi

Produk

Pesanan

Pesanan

3

Mengelola

Admin

Username,

Password


Pengunjung

Pesanan

Daftar Produk

Bukti Pesanan

Daftar Poduk

Pesanan

2

Mengelola

Ongkos

Kirim

Data Admin

Daftar

Admin

Daftar

Anggota

Data

Produk

Gambar 7 DFD Level 1 Iterasi Kedua

Produk

Pesanan

Kota

Detail

Pesanan

Kategori Memiliki

Mengirim

Memiliki

Mempunyai

Id_produkId_kategori

Tgl_masuk

gambar

nama_produk

stok

deskripsi

harga

Nama_kategoriId_kategori

Id_order

telepon

alamat

Tgl_order

Nama_user

Status_order

email

Id_kota

Jumlah

Id_produkId_pesanan

Ongkos_kirimNama_kota

Id_kota

subtotal

1M

1

11

1

Melakukan

User1

Id_user

alamat

nama

kotaemail

Telp_rumah

Telp_hp

userid

passid

Kode_pos

M

M

M

Gambar 8 Entity Relationship Diagram (ERD)

15

Menu Utama

Beranda Profil Panduan Katalog Keranjang Kontak Kami Info Muslimah

Kategori

Produk Terlaris

Icon

Keranjang

Iklan

Kategori

Diskon dan

Promo

Icon

Keranjang

Iklan

Gamis

Baju

Rok

Hijab/Jilbab

Mukena

Gambar

produk

Icon beli

Kategori

Cara Pemesanan

Icon

Keranjang

Iklan

Kategori

Produk

Icon

Keranjang

Iklan

Kategori

Keranjang

belanja

Icon

Keranjang

Iklan

Kategori

Kontak

Icon

Keranjang

Iklan

Kategori

Artikel

Muslimah

Icon

Keranjang

Iklan

Gambar

Produk

Detail

Produk

Ubah Belanja

Teruskan

Belanja

Check Out

Data

pembeli

Icon proses

Data pemesanan

Harga total+

ongkos kirim

Alamat

Email

Kolom

Komentar

Metode

Pembayaran

Pengiriman

Layanan

Antar

Stok

Tersedia

Produk Terlaris

Pencarian Pencarian Pencarian Pencarian Pencarian Pencarian Pencarian

Icon beli

Produk Terlaris

Produk

Terlaris

Produk Terlaris

Produk Terlaris

No Telp

Produk Terlaris

Gambar 9 Peta Situs


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


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 Nama Fungsi Hasil Keterangan

WMW-003 Fungsi mengubah profil anggota √ Skenario Lampiran 9

WMW-004 Fungsi memasukkan data pembeli √ Skenario Lampiran 6

WMW-006 Fungsi menambah komentar pada

artikel


WMW-007 Fungsi search √ Skenario Lampiran 10

WMW-015 Fungsi pengelolaan pembayaran √ Skenario Lampiran 19

WMW-016 Fungsi menampilkan panduan √ Skenario Lampiran 20

WMW-017 Fungsi menampilkan kontak kami √ Skenario Lampiran 21

WMW-018 Fungsi menampilkan pemesanan √ Skenario Lampiran 22

WMW-019 Fungsi menampilkan katalog √ Skenario Lampiran 23

WMW-020 Fungsi login anggota √ Skenario Lampiran 2

WMW-022 Fungsi logout anggota √ 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 ke-

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

Nama Kasus Uji Fungsi login anggota

Deskripsi True Case

Kondisi Awal Membuka halaman login anggota

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

anggota

Masuk ke halaman home

anggota

OK

Nama Kasus Uji Fungsi login anggota

Deskripsi Wrong Case

Kondisi Awal Membuka halaman login anggota

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


Menampilkan pop up

keterangan login tidak

berhasil

Menampilkan pesan

“username dan password

tidak cocok atau anda

belum memiliki akun”

OK

Lampiran 3 Test case fungsi menampilkan produk

Nama Kasus Uji Fungsi menampilkan produk

Deskripsi Kondisi normal

Kondisi Awal Membuka halaman katalog


Skenario

1. Membuka halaman katalog

2. Memilih kategori produk

3. Menekan tombol detail produk


Menampilkan produk

detail

Menampilkan produk

detail

OK

28

Lampiran 4 Test case fungsi pemesanan produk.

Nama Kasus Uji Fungsi pemesanan produk

Deskripsi True Case

Kondisi Awal Masuk ke halaman detail produk


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'


Pemesanan berhasil Muncul pesan „cara

pembayaran‟

OK

Nama Kasus Uji Fungsi pemesanan produk


Kondisi Awal Masuk ke halaman detail produk


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'


Menampilkan pop up

“lengkapi kolom yang

belum diisi”

Menampilkan pesan


belum diisi”

OK

Lampiran 5 Test case fungsi mengubah pemesanan.

Nama Kasus Uji Fungsi edit pemesanan

Deskripsi True Case

Kondisi Awal Sudah melakukan pemesanan


Skenario

1. Masuk ke halaman keranjang belanja

2. Ubah pesanan pada kolom pesanan

3. Tekan lambang ‘refresh’


Pesanan berhasil diubah Perubahan pada kolom

harga sesuai pengubahan

OK

29

Nama Kasus Uji Fungsi edit pemesanan


Kondisi Awal Sudah melakukan pemesanan


Skenario


2. Ubah jumlah pesanan dengan angka yang tidak valid (ex:-1)

3. Tekan lambang ‘refresh’


Menampilkan pop up

“masukkan kuantitas

yang valid”

Menampilkan pesan

“masukkan kuantitas

yang valid”

OK

Lampiran 6 Test case fungsi memasukkan data pembeli.

Nama Kasus Uji Fungsi input data pembeli

Deskripsi True Case

Kondisi Awal Pengunjung telah melakukan pemesanan


Skenario


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”


Menampilkan pesan

“penyimpanan berhasil”

Menampilkan data

pembeli

OK

Nama Kasus Uji Fungsi input data pembeli


Kondisi Awal Pengunjung telah melakukan pemesanan


Skenario


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”


Menampilkan pesan


belum diisi”

Menampilkan pesan


belum diisi”

OK

30

Lampiran 7 Test case fungsi menampilkan artikel

Lampiran 8 Test case fungsi menambah komentar pada artikel.

Nama Kasus Uji Fungsi menambah komentar pada artikel

Deskripsi True Case

Kondisi Awal Masuk ke kolom artikel


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


Komentar ditampilkan Komentar ditampilkan OK

Nama Kasus Uji Fungsi menambah komentar pada artikel


Kondisi Awal Masuk ke kolom artikel


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


Menampilkan pesan

“lengkapi kolom nama

dan email”

Menampilkan pesan

“lengkapi kolom nama

dan email”

OK

Nama Kasus Uji Fungsi menampilkan artikel


Kondisi Awal Masuk ke halaman info muslimah


Skenario

1. Masuk ke halaman info muslimah

2. Pilih artikel yang mau ditampilkan

3. Pilih/tekan tombol “selengkapnya


Artikel info muslimah

ditampilkan

Artikel ditampilkan OK

31

Lampiran 9 Test case fungsi mengubah profil anggota.

Nama Kasus Uji Fungsi edit profil anggota


Kondisi Awal Masuk ke halaman utama


Skenario

1. Masuk ke halaman utama

2. Pilih menu ubah anggota pada main menu

3. Masukkan data yang ingin diubah

4. Pilih/tekan simpan


Data berhasil diubah Data baru ditampilkan OK

Lampiran 10 Test case fungsi search.

Nama Kasus Uji Fungsi search

Deskripsi True Case

Kondisi Awal Masuk ke menu utama


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


Halaman produk akan

muncul sesuai dengan

kata yang dimasukkan

dalam kolom pencarian

Halaman produk muncul OK

Nama Kasus Uji Fungsi search


Kondisi Awal Masuk ke menu utama


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


Menampilkan pesan

“pencarian tidak

ditemukan”

Menampilkan pesan

“pencarian tidak

ditemukan”

OK

32

Lampiran 11 Test case fungsi pembayaran.

Nama Kasus Uji Fungsi pembayaran


Kondisi Awal Pemasukkan data pembelian telah dilakukan


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


Info pembayaran

ditampilkan

Info pembayaran

ditampilkan

OK

Lampiran 12 Test case fungsi logout anggota.

Nama Kasus Uji Fungsi logout anggota




Skenario


2. Pilih/tekan tombol logout (keluar) pada main menu di sebelah kiri dalam kolom

login anggota


Logout berhasil Logout berhasil, Kembali

ke halaman pengunjung

OK

Lampiran 13 Test case fungsi login administrator.

Nama Kasus Uji Fungsi login administrator

Deskripsi True Case

Kondisi Awal Masuk ke halaman admin


Skenario

1. Masuk ke halaman admin

2. Masukkan username dan password

3. Pilih/tekan login


Menampilkan halaman

admin

Menampilkan halaman

admin

OK

33

Nama Kasus Uji Fungsi login administrator




Skenario


2. Masukkan username dan password yang belum terdaftar

3. Pilih/tekan login


Menampilkan pesan


tidak terdaftar”

Menampilkan pesan


tidak terdaftar”

OK

Lampiran 14 Test case fungsi menambah produk.

Nama Kasus Uji Fungsi menambah produk




Skenario


2. pilih menu components, pilih virtuemart

3. pilih product

4. pilih tombol new

5. masukkan data produk

6. pilih save


Berhasil menambahkan

produk pada database

produk

Produk berhasil

ditambahkan

OK

Lampiran 15 Test case Fungsi menambah kategori produk

Nama Kasus Uji Fungsi menambah kategori produk




Skenario



3. pilih product categories

4. pilih tombol new

5. masukkan data kategori produk

6. pilih save



kategori produk pada

database kategori produk

Kategori produk berhasil

ditambahkan

OK

34

Lampiran 16 Test case fungsi menambah artikel.

Nama Kasus Uji Fungsi menambah artikel




Skenario


2. pilih menu content, pilih article manager

3. pilih tombol new

4. masukkan data artikel

5. pilih save



artikel pada database

artikel info muslimah

Artikel berhasil

ditambahkan

OK

Lampiran 17 Test case fungsi mengubah detail produk.

Nama Kasus Uji Fungsi mengubah detail produk


Kondisi Awal Masuk ke halaman product


Skenario

1. Masuk ke halaman product

2. Pilih produk yang ingin diubah

3. Masukkan data yang ingin diperbaharui

4. pilih save


Berhasil mengubah

deskripsi/detail produk

Detail produk berhasil

diubah

OK

Lampiran 18 Test case fungsi pengelolaan pemesanan.

Nama Kasus Uji Fungsi pengelolaan pemesanan




Skenario



3. pilih orders

4. konfirmasi order pada pembeli

5. update status order


Berhasil memperbaharui

status order

Status order ditampilkan OK

35

Lampiran 19 Test case fungsi pengelolaan pembayaran.

Nama Kasus Uji Fungsi pengelolaan pembayaran




Skenario



3. pilih payment methods

4. pilih tombol new

5. masukkan data tata cara pembayaran


Menampilkan data

pembayaran

Data pembayaran

ditampilkan

OK

Lampiran 20 Test case fungsi menampilkan panduan

Nama Kasus Uji Fungsi menampilkan panduan




Skenario


2. Pilih/tekan menu panduan


Menampilkan menu

panduan

Menampilkan menu

panduan

OK

Lampiran 21 Test case fungsi menampilkan pemesanan

Nama Kasus Uji Fungsi menampilkan pemesanan




Skenario


2. Pilih/tekan menu keranjang / Pilih icon keranjang belanja yang berada di pojok

kanan atas halaman


Menampilkan menu

keranjang belanja

Menampilkan menu

keranjang belanja

OK

36

Lampiran 22 Test case fungsi menampilkan kontak kami

Nama Kasus Uji Fungsi menampilkan kontak kami




Skenario


2. Pilih/tekan menu kontak kami


Menampilkan menu

kontak kami

Menampilkan menu

kontak kami

OK

Lampiran 23 Test case fungsi menampilkan katalog

Nama Kasus Uji Fungsi menampilkan katalog




Skenario


2. Pilih/tekan menu katalog


Menampilkan menu

katalog yang berisi

kategori produk

Menampilkan menu

katalog

OK

37

RIWAYAT HIDUP

Penulis dilahirkan di Chicago pada tanggal 17 Agustus 1992. Penulis

merupakan anak ketiga dari empat bersaudara pasangan alm Dr Syafedi Syafei

dan Nila Kandi Spd. Pada tahun 2009, penulis menamatkan pendidikan di SMA

Islam Al Azhar BSD. Penulis lulus seleksi masuk Institut Pertanian Bogor (IPB)

pada tahun yang sama melalui jalur SNMPTN dan diterima sebagai mahasiswa di

Departemen Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam.

Selama menjadi mahasiswa, penulis aktif di organisasi kemahasiswaan

Serum-G FMIPA (2012) dan Rotaract (2010-2011) serta berbagai kegiatan

kepanitiaan seperti: IT Today (2010&2011), ISC (2010), Masa Perkenalan

Departemen dan Fakultas (MPD dan MPF) (2011). Selain itu, penulis

melaksanakan kegiatan Praktik Kerja Lapangan di Bank Indonesia pada bulan

Juli-Agustus 2012. Saat ini penulis bekerja pada salah satu perusahaan perbankan

syariah swasta, terhitung sejak Agustus 2013 sampai saat ini.

Documents

PENGEMBANGAN E-COMMERCE KHUSUS PAKAIAN …repository.ipb.ac.id/jspui/bitstream/123456789/72747/1/G14mia.pdf · disebutkan dalam teks dan dicantumkan dalam Daftar Pustaka di bagian