Laporan ini dibuat guna memenuhi tugas UAS mata kuliah Rekayasa Perangkat Lunak. Projek yang dibuat merupakan aplikasi online shop berbasis website. Model perancangan perangkat ini menggunakan waterfall.

1. LAPORAN REKAYASA PERANGKAT LUNAK
APLIKASI ONLINE SHOP BERBASIS WEBSITE
Memenuhi Tugas Mata Kuliah Rekayasa Perangkat Lunak
Dosen Pengampu : DewiKhairani, M.Sc
DISUSUN OLEH:
KELOMPOK 2
Wahyu Nur Arizky (11180910000054)
SyaifulBahri (11180910000034)
IndriSukmawatiRahayu (11180910000057)
Fauzy Ramadhan Sukasno (11180910000075)
Rifat Wigar Adanendra (11180910000079)
PROGRAM STUDI TEKNIK INFORMATIKA (3C)
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
2019

2. 2
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat,
karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan laporan tentang aplikasi
online shop berbasis website ini dengan baik meskipun banyak kekurangan didalamnya.
Dan juga kami berterima kasih pada Ibu Dewi Khairani, M.Sc selaku Dosen mata kuliah
Rekayasa Perangkay Lunak UIN Jakarta yang telah memberikan tugas ini kepada kami.
Kami sangat berharap laporan ini dapat berguna dalam rangka menambah wawasan
serta pengetahuan kita. Kami juga menyadari sepenuhnya bahwa di dalam laporan ini
terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, kami berharap adanya
kritik, saran dan usulan demi perbaikan laporan yang telah kami buat di masa yang akan
datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun.
Semoga laporan sederhana ini dapat dipahami bagi siapapun yang membacanya.
Sekiranya laporan yang telah disusun ini dapat berguna bagi kami sendiri maupun orang
yang membacanya. Sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata
yang kurang berkenan dan kami memohon kritik dan saran yang membangun dari Anda
demi perbaikan laporan ini di waktu yang akan datang.
Ciputat, 18 Desember 2019
Penyusun

3. 3
DAFTAR ISI
KATA PENGANTAR..............................................................................................................................2
BAB I ANALISA KEBUTUHAN ................................................................................................................5
1.1 Pendahuluan.............................................................................................................................5
1.2 Use Case...................................................................................................................................6
1.2.1 Pendaftaran User Baru ........................................................................................................7
1.2.2 User and Admin Login .........................................................................................................7
1.2.3 ViewProduct......................................................................................................................8
1.2.4 Search Product....................................................................................................................8
1.2.5 Pilih Produk ........................................................................................................................9
1.2.6 Add to Cart.........................................................................................................................9
1.2.7 Order Produk......................................................................................................................9
1.2.8 Transfer Pembayaran........................................................................................................10
1.2.9 Simpan Bukti Pembayaran.................................................................................................11
1.2.10 Upload Bukti Pembayaran ...............................................................................................11
1.2.11 Kelola Produk..................................................................................................................11
1.2.12 Terima Orderan...............................................................................................................12
1.2.13 Konfirmasi Order.............................................................................................................12
1.2.14 Membuat Laporan Penjualan...........................................................................................13
BAB II DESAIN...................................................................................................................................14
2.1 Activity Diagram......................................................................................................................14
2.2 Desain Layar/ Mockup.............................................................................................................21
2.2.1. Tampilan Sign In(Admin & Pegawai) .................................................................................21
2.2.2. Tampilan Halaman Utama Website ...................................................................................21
2.2.3. Tampilan Utama Produk...................................................................................................22
2.2.4. Tampilan Keranjang Belanja..............................................................................................22
2.2.5. Tampilan Data User..........................................................................................................23
2.3. Desain Entity Relationship Diagram.........................................................................................23
2.4. Desain Arsitektur....................................................................................................................24
BAB III IMPLEMENTASI......................................................................................................................25
3.1. Screen Capture.......................................................................................................................25

4. 4
3.1.1. Tampilan Halaman Utama ................................................................................................25
3.1.2. Tampilan Sign-In/Sign-Up.................................................................................................26
3.1.3. View Produk ....................................................................................................................28
3.1.4. Search Product.................................................................................................................29
3.1.5. Order Product..................................................................................................................30
3.1.6. Dashboard Admin ............................................................................................................33
BAB IV TESTING................................................................................................................................36
4.1 Deskripsi.................................................................................................................................36
4.2 Skenario .................................................................................................................................36
4.2.1 Skenario 1: Register...........................................................................................................36
4.1.2 Skenario 2: Login...............................................................................................................38
4.1.3 Skenario 3: View Product...................................................................................................39
4.2.4 Skenario 4: Search Product................................................................................................40
4.2.5 Skenario 5: Pilih Produk.....................................................................................................41
4.2.6 Skenario 6: Add to Cart......................................................................................................41
4.2.7 Skenario 7: Order Produk ..................................................................................................42
4.2.8 Skenario 8: Transfer Pembayaran.......................................................................................43
4.2.9 Skenario 9: Simpan Bukti Pembayaran................................................................................44
4.2.10 Skenario 10: Upload Bukti Pembayaran............................................................................45
4.2.11 Skenario 11: Kelola Produk ..............................................................................................45
4.2.12 Skenario 12: Terima Orderan ...........................................................................................46
4.2.13 Skenario 13: Konfirmasi Order.........................................................................................47
4.2.14 Skenario 14: Membuat Laporan Penjualan........................................................................48
BAB V PENUTUP ...............................................................................................................................50
5.1 Kesimpulan.............................................................................................................................50
5.2 Saran......................................................................................................................................50
KATA PENUTUP ................................................................................................................................51
DAFTAR ISI .......................................................................................................................................52

5. 5
BAB I
ANALISA KEBUTUHAN
1.1 Pendahuluan
E-Commerce adalah penyebaran, pembelian, penjualan, pemasaran barang dan jasa
yang dilakukan oleh konsumen melalui sistem elektronik seperti internet, WWW
(World Wide Web), atau jaringan komputer lainnya. E-commerce dapat melibatkan
transfer dana elektronik, pertukaran data elektronik, sistem manajemen inventori
otomatis dan sistem pengumpulan data otomatis.
Toko pakaian Pink Label merupakan salah satu toko yang bergerak di bidang fashion
Muslimah. Pink Label menjual produk fashion berkualitas dengan harga terjangkau yang
bervariasi dari pakaian muslimah, gamis, jilbab, jaket dan aksesoris lainnya.
Dalam penjualannya, Pink Label mengalami kendala yaitu keterbatasan promosi,
karena pemasaran yang dilakukan selama ini hanya berada di dalam toko. Dalam proses
transaksi masih melibatkan pembukuan yang diisi secara manual, seperi nota dan daftar
produk yang di jual. Dengan adanya kendala tersebut, toko pakaian Pink Label tidak
memenuhi target penjualan. Maka dari itu, kami memperbaiki sistem penjualan yang
masih konvensional menjadi penjualan online, jalan ini kami tempuh untuk
meningkatkan kepuasanpelayanansertamenjalin hubunganyangbaik antaraownerdan
customer.
Untuk memberikan pengalaman belanja yang menyenangkan, mudah dan terpercaya
bagi pelanggan, kami harus inovatif dan selalu memberikan yang terbaik. Inovatif berarti
kami menjual produk sesuai kebutuhan pelanggan mengikuti perkembangan fashion.
Dan, memberikan yang terbaik artinya kami memberikan kemudahan dalam
bertransaksi serta menjalin hubungan jangka panjang yang baik dengan pelanggan.
Berdasarkan dari kebutuhan sistem informasi tersebut dalam memfasilitasi
penjualan, maka sistem online menjadi salah satu sarananya, oleh karena itu kami
mengambil judul “APLIKASI ONLINE SHOP BERBASIS WEBSITE”.

6. 6
1.2 Use Case
Gambar 1 Use Case Customer
Gambar 2 Use Case Admin

7. 7
1.2.1 Pendaftaran User Baru
Use Case Name Registrasi
Use Case Id 01
Actor Customer
Description Case ini merupakan proses saat user baru mendaftar untuk
mendapatkan akun pada aplikasi, agar dapat melakukan login
pada aplikasi Online Shop PinkLable
Pre-condition User harus membuka website PinkLable terlebih dahulu.
TypicalCourse of Event Actor Action System Response
Step 1 User Baru mengisi
data informasi yang
dibutuhkanuntukmembuat
akunbaru pada aplikasi
Step 2 Sistemakanmeresponsemua
data yang telahdiisi olehuser
Step 3: Sistemmemverifikasi
informasi datayangtelahterekamke
dalamdatabase
Step 4: Sistemmenyimpandata
informasi milikuser
Step 5: Sistemmenyiapkanakunbaru
untukuser
Step 6: Akundigenerate olehsistem
Step 7: Sistemmemberikan notifikasi
dan konfirmasi bahwaakuntelah
tedaftardan siapdigunakanolehuser
Post-condition Akunbaru telahdisimpandanterdaftarpadasistem.DanUserdapat
menggunakanakuntersebutuntukmengoperasikanaplikasi
1.2.2 User and Admin Login
Use Case Name Login
Use Case Id 02
Actor Asmin, Customer
Description Case ini merupakan proses masuk dengan akun yang telah
terdaftar, berguna saat admin atau customer hendakmengakses
webite pinklable
Pre-condition Customer harus melakukan registrasi terlebih dahulu, untuk
mendapatkan akun.
TypicalCourse of Event Actor Action System Response
Step 1 User mengisi
username danpassowrd
Step 2 Sistemakanmemeriksavalid
atau tidakdata yang dimasukkan
kedalamdatabase table user
Step 3 Masuk ke tampilanutama
website sesuaidashboarduser
Alternative Flow Step 2 Sistem akan memberikan
warning kalau username atau
password yang dimasukkan tidak valid

8. 8
Step 1 User mengisi
username danpassword
(salah)
Step 3 User mengisi
username danpassword
kembali
Step 4 Sistemakanmemeriksavalid
atau tidakdata yang dimasukkan
kedalamdatabase table user
Step 5 Masuk ke tampilanutama
website sesuaidashboarduser
Post-condition User telahmelakukanlogindanmasukke dalamhalamanwebsite
PinkLable
1.2.3 View Product
Use Case Name Lihat Produk
Use Case Id 03
Actor Customer
Description Case ini merupakan proses saat user dapat melihat produk yang
di jual oleh website Pink Lable
Pre-condition User tidak harus melakukan login jika hanya melihat produk
yang dijual.
TypicalCourse of Event Actor Action System Response
Step 1 User membuka
websitePink Lable
Step 3 User memilih
produk berdasarkan
kategori
Step 2 Sistemmenampilkanhalaman
utama website
Step 4 Sistemmemeriksadatayang
ada di dalam database table
kategori_produk
Step 5 Sistemmenampilkanproduk
sesuai kategori yangdipilihuser
Post-condition Berhasil menampilkanprodukyangdijual berdasarkanpilihan
kategori
1.2.4 Search Product
Use Case Name Cari Produk
Use Case Id 04
Actor Customer
Description Case ini merupakan proses saat user mencari produk yang di jual
oleh website PinkLable. Pencarian dilakukan dengan memuat
nama produk yang di jual.
Pre-condition User tidak harus melakukan login jika ingin mencari produk
yang dijual.
TypicalCourse of Event Actor Action System Response
Step 1 User mencari produk
dengannamaprodukyang
di jual.
Step 2 Sistemmemeriksaapakahada
data yang dicari user
Step 3 Sistemmenampilkanproduk
yang di cari olehuser

9. 9
Post-condition Berhasil menampilkanproduk yangdicari berdasarkan namaproduk
yang di jual
1.2.5 Pilih Produk
Use Case Name Pilih Produk
Use Case Id 05
Actor Customer
Description Case ini merupakan proses saat user memilih produk yang di jual
oleh website PinkLable. Saat user memilih produk, user akan
melihat deskripsi produk Actoryang bisa memilih produk adalah
customer yang sudah melakukan login.
Pre-condition User tidak dapat memilih produk jika belum melakukan login
TypicalCourse of Event Actor Action System Response
Step 1 User memilihsalah
satu produkyangdi jual
Step 2 Sistemmencari datayang di
pilih
Step 3 Sistemmenampilan deskripsi
dari salahsatuprodukyang di pilih
Post-condition User dapat meilhat deskripsi dari produk yang di pilih
1.2.6 Add to Cart
Use Case Name Memasukkan produk ke dalam keranjang
Use Case Id 06
Actor Customer
Description Case ini merupakan proses saat user inginmemesanprodukyang
di pilih.Lalu,halamankeranjangakanmenampilkan produkyang
mau di pesanpengguna. Informasi yangdisajikanberupanama,
harga, dan gambarproduk,jumlahyangdipesanyangbisadiubah,
dan tombol checkout.Jikatombol checkout di tekanmaka user
akan dibawapadahalaman check out.
Pre-condition User sudah memilih salah satu produk di dalam halaman produk
yang di jual.
TypicalCourse of Event Actor Action System Response
Step 1 User memasukkan
jumlahprodukyangdi beli
Step 3 Usermenekan
tombol check out
Step 2 Sistemmengubahinformasi
jumlahprodukyangdi beli
Step 4 Sistemmenampilkanhalaman
check out
Post-condition User melihat halaman check out
1.2.7 Order Produk

10. 10
Use Case Name Order Produk
Use Case Id 07
Actor Customer
Description Case ini merupakan proses saat user sudah melakukan check out,
maka akan menampilkan data-data, seperti alamat, metode
pembayaran, daftarbelanja, serta rincian harga yang di dalamnya
terdapat ongkos kirimnya. Jika sudah terisi, bisa menekan
‘Lanjutkan BAYAR!!’ untuk melihat halaman selanjutnya.
Pre-condition User sudah melakukan check out
TypicalCourse of Event Actor Action System Response
Step 1 User membukaform
data order
Step 3 User memasukkan
data pemesanan atau
menambahkan produk
yang di pesan
Step 4 User mengupdate
data pemesanan
Step 7 User menekan
tombol ‘Lanjutkan Bayar’
Step 2 Sistemmenampilkandata
pemesanan
Step 5 Sistemmengecekapakah
formulirdatayang diisikanusersudah
terisi lengkap,jikatidaklengkap
systemmemberikanwarning.
Step 6 Sistemmenyimpandata
pemesanan yangsudahterisi dengan
lengkap
Step 8 Ssitemmenampilkanhalaman
pembayaran
Post-condition User melihat halaman pembayaran
1.2.8 Transfer Pembayaran
Use Case Name Transfer Pembayaran
Use Case Id 08
Actor Customer
Description Case ini merupakan proses saat user inginmelakukanpembayaran
sesuai denganbankyangtelahdi pilih.Diberikankode pembayaran
sesuai bankyangdi pilih.Lalu,setelahusermengirim,terdapatfitur
uploadsebagai bukti transferbahwausertelahmelakukan
pembayaran.
Pre-condition Sebelumnya user sudah menekan tombol ‘Lanjutkan Bayar!!’
TypicalCourse of Event Actor Action System Response
Step 1 Membukahalaman
pembayaran
Step 3 User melakukan
pembayaran ke lewat
bank
Step 4 User diberikan
bukti transfer
Step 2 Menampilkanhalaman
pembayarandanmemberikankode
pembayaransesuai bankyangdi pilih
usersebelumnya
Post-condition User berhasil melakukan transfer menggunakan kode
pembayaran salah satu jenis bank yang di pili dan user mendapat
bukti pembayaran.

11. 11
1.2.9 Simpan Bukti Pembayaran
Use Case Name Simpan Bukti Pembayaran
Use Case Id 09
Actor Customer
Description Case ini merupakan proses setelah user melakukan pembayaran.
User dapat melakukan upload bukti pembayaran agar
pembayaran dapat di konfirmasi oleh admin.
Pre-condition Sebelumnya user sudah melakukan pebayaran pada bank yang di
tuju
TypicalCourse of Event Actor Action System Response
Step 1 User mendapatkan
bukti pembayaran
Step 2 User mengambil
gambar dari bukti
pembayarandengan format
.jpg/.jpeg
Step 3 User menyimpan
bukti pembayaran
-
Post-condition User menyimpan bukti pembayaran untuk kemudian di upload
1.2.10 Upload Bukti Pembayaran
Use Case Name Upload Bukti Pembayaran
Use Case Id 10
Actor Customer
Description Case ini merupakan proses setelah user melakukan pembayaran
lalu mendapatkan bukti transfer. User dapatn meng-upload bukti
pembayaran agar admin dapat mengkonfirmasi pesanan yang
dibuat oleh user,
Pre-condition Sebelumnya user sudah mendapatkan bukti pembayaran
TypicalCourse of Event Actor Action System Response
Step 1 User mengupload
fotobukti pembayaran
Step 2 Ssitemmenyimpanbukti
transferuser
Step 3 Sistemmengkonfirmasi
pesananjikabukti pembayarannya
sudahsesuai
Post-condition User berhasil mengupload bukti pembayaran dan pesanan akan
di proses
1.2.11 Kelola Produk
Use Case Name Kelola Produk
Use Case Id 11

12. 12
Actor Admin
Description Case ini merupakan proses bahwa user dapat menegelola produk
dengan menambah, mengedit, menghapus data produk .
Pre-condition Sebelumnya user sudah melakukan login untuk mengakses fitur
ini
TypicalCourse of Event Actor Action System Response
Step 1 User melihatdaftar
produk
Step 3 User menambah,
mengedit,menghapusdata
produk
Step 4 User mengupdate
data produk
Step 2 Ssitemmenampilkandaftar
kategori produk
Step 5 Sistemmenampilkanform
data produkyang telahdiinputkan
user
Step 6 Sistemmenyimpandata
produkyang berhasil diinputkan
Post-condition Menu pada website bagian penjualan berhasil menampilkan data
terbaru dari hasil update data admin
1.2.12 Terima Orderan
Use Case Name Terima Orderan
Use Case Id 12
Actor Admin
Description Case ini menggambarkan kegiatan untuk memantau setiap
aktifitas orderan yang masuk dan melakukan update status order
setiap orderan sesuai dengan ketentuan
Pre-condition Sebelumnya user sudah melakukan login
TypicalCourse of Event Actor Action System Response
Step 1 User melihatmenu
dashboarduntukmelihat
aktifitascutomerbeserta
datanya.
Step 2 Sistemmenampilkanmenu
dashboard
Post-condition User berhasil melihat pesanan yang masuk dari customer
1.2.13 Konfirmasi Order
Use Case Name Konfirmasi Order
Use Case Id 13
Actor Admin
Description Case ini menggambarkan kegiatan untuk melakukan update
status order setiap orderan yang masuk sesuai dengan ketentuan
yang berlaku.
Pre-condition Sebelumnya user sudah memiliki orderan yang masuk dari
customer.

13. 13
TypicalCourse of Event Actor Action System Response
Step 1 User mengubah
statuspesananjikabukti
pemabayarancustomer
sudahsesuai.
Step 2 Sistemmenampilkanstatus
pemesananbaru
Post-condition User berhasil mengubah status pesanan dari customer
1.2.14 Membuat Laporan Penjualan
Use Case Name Konfirmasi Order
Use Case Id 14
Actor Admin
Description Case ini menggambarkan user mengelola laporan penjualan
berupa grafik penjualan beserta data barang yang terjual dan
total pendapatannya.
Pre-condition Sebelumnya user sudah login terlebih dahulu
TypicalCourse of Event Actor Action System Response
Step 1 User memilihfitur
lapiranpenjualan
Step 2 Sistemakanmenampilkandata
laporanberupagrafik
Post-condition Sistem akan menampilkan perintah seperti yang diinginkan user

14. 14
BAB II
DESAIN
2.1 Activity Diagram
Gambar 3 Activity Diagram User Side

15. 15
Gambar 4 Activity Diagram Admin Side

16. 16
Nama
Activity
Diagram
1. Login
Gambar
Activity
Diagram
Deskripsi Admin dan cutomer melakukan log in langkah-langkahnya sebagai
berikut,membuka aplikasi website Pink Lable kemudian sistem menampikan
form log in lalu, admin dan customer memasukkan username dan password
jika benar maka sistem akan menampilkan menu utama.
Diagram 2.1.1
Gambar 5 Activity Diagram Login

17. 17
Nama Activity
Diagram
2. Melihat Produk
Gambar
Activity
Diagram
Deskripsi Customer melihat data produk di mulai ketika user meng-klik sebuah
produk. Lalu sistem merespon dengan mencari produk yang di tuju
tersebut di dalam database. Setelah di check ternyata ‘ada’, maka data
akan ditampilan yang berisi deskripsi data produk.
Gambar 6 Melihat Produk

18. 18
Nama Activity Diagram 3. Keranjang
Gambar Activity Diagram
Deskripsi Customerdapat memasukkan produkke dalam keranjang
jika telah melihat gambar produk dan memilih salah satu
gambar produk. Lalu sistem menampilkan detail atau
deskripi produk. Customer dapat menambahkannya ke
dalam keranjang . Setelah itu, sistem merespon dengan
manampilkan sebuahpop-uppadafitur keranjangyang di
dalamnya berisi rincian produk yang ingin di pesan.
Gambar 7 Activity Diagram Keranjang

19. 19
Nama Activity
Diagram
4. Kontrol Data
Gambar Activity
Diagram
Deskripsi Customer dapat mengedit data informasi terkait
nama/username/email/alamat. Lalu sistem merespon dengan
memberikan notifikasi perubahan data. Customer membverivikasi
data dan kemudian sistem merespon data verivikasi. Data
perubahan akan masuk ke dalam database dan kemudian di simpan
ke dalam database.
Nama Activity
Diagram
5. Membeli Produk
Gambar Activity
Diagram
Deskripsi Sistem menampilkan menu keranjang dan rincian produk yan akan di
beli. Kemudian database mencari serta menococokan produk yang
tersedia. Setelah itu, sistem merespon ketersedian barang. Customer
menekan tombol check out yang artinya melakukan pemesanan.
Sistem lalu merespon dan menampilkan menu informasi terkait
pembayaran yang mau di lakukan sesuai bank yang di pilih oleh
customer,
Nama Activity
Diagram
6. Konfrmasi Pembelian
Gambar Activity
Diagram
Gambar 10 ActivityDiagram Konfirmasi Pembelian
Deskripsi Sistem menampilkan menu pengiriman beserta alamat yang
di tuju. Customerdapatmemililih metode pengiriman. Setelah
itu Customer dapat memilih metode pembayaranlewat bank
yang ia inginkan, Lalu, sistem memproses dan menampilkan
konfirmasi terkait pembelian.
Diagram 2.1.5
Diagram 2.1.6
Gambar 8 Control Data
Gambar 9 Activity Diagram Membeli Produk

20. 20
Nama Activity
Diagram
8. Pembayaran
Gambar Activity
Diagram
Deskripsi Ketika Customer berhasil check out maka sistem akan
merespon hal tersebut, dan menampilkan halaman menu
pembayaran. Customer mendapatkan kode pembayaran
sesuai bank yang ia pilih. Kemudian User melakukan
pemabayaran menggunakan kode pembayaran yang di dapat.
Nama Activity Diagram 9. Resi Pengiriman
Gambar Activity
Diagram
Deskripsi Setelah Customer melakukan pembayaran. Customer
melakukan konfirmasi pembayarandengan cara mengupload
bukti pembayaran . Lalu admin melihat bukti menbayaran
dan mengkonfirmasi pesanan jika bukti pembayarannya
dirasa sudah benar. Dan Admin mengirimkan barang
pesanan melalui jasa pengantar . Sistem mendpatkan
informasi pengiriman dari kurir. Stelah itu, customer
mendapatkan resi pengirjman.
Nama Activity Diagram 10. Terima Barang
Gambar Activity Diagram
Gambar 13 Activity Diagram Terima Barang
Deskripsi Customer menerima barang dari kurir. Dan sistem
mendapatkan informasi pengiriman terima barang dari
kurir. Setelah itu admin dapat mengubah ststus bahwa
barang telah di terima. Customer mendapatkan infomrasi
terkait status bahwa barang sudah di terima.
Diagram 2.1.8
Diagram 2.1.9
Gambar 11 Activity Diagram Pembayaran
Gambar 12 Activity Diagram Resi Pengiriman

21. 21
2.2 DesainLayar/ Mockup
2.2.1. Tampilan Sign In (Admin & Pegawai)
Gambar 14 Tampilan Login
2.2.2. Tampilan Halaman Utama Website
Gambar 15 Tampilan Halaman Depan

22. 22
2.2.3. Tampilan Utama Produk
Gambar 16 Tampilan Produk
2.2.4. Tampilan Keranjang Belanja
Gambar 17 Tampilan Cart

23. 23
2.2.5. Tampilan Data User
Gambar 18 Tampilan Data User
2.3. Desain Entity RelationshipDiagram
Gambar 19 ERD

24. 24
2.4. Desain Arsitektur
Gambar 20 Desain Arsitektur Online Shop
Pembuatanaplikasi dilakukakandenganmenggunakanbeberapahardware dansoftware.
Hardware yang digunakanantaralainadalahlaptopdenganspesifikasiprosesorIntelCore i3-6006U
dual-core 2GHz, NVIDIA GeForce GT920MX, RAM4G, HDD 1TB. Sedangkansoftware yangdigunakan
adalahsistemoperasi menggunakanMicrosoftWindows10,aplikasi webservermengunakanXAMPP
dan webbrowserGoogle Chrome untukmenampilkanhasil.

25. 25
BAB III
IMPLEMENTASI
3.1. ScreenCapture
3.1.1. Tampilan Halaman Utama
Gambar 21 Halaman Utama
Deskripsi :
Halamanutama merupakantampilanutamasaat user membuka alamat website online shop Pink
Label. Di dalam tampilan utama terdapat beberapa produk yang di jual dan user hanya bisa
melihat produk tidak bisa melakukan order.

26. 26
3.1.2. Tampilan Sign-In/Sign-Up
Gambar 22 Registrasi
Gambar 23 Login

27. 27
Gambar 24 Salah Login
Deskripsi :
Halaman Sign-Up digunakan untuk pendaftaran customer baru yang ingin memiliki akun,
user harus menginputkan data seperti nama, e-mail, dan password. Halaman Sign-In untuk
Admin dan Customer, kedua user tersebut harus memasukkan username dan password yang
sesuai. Jika sudahdiisi silahkan klik “Log in”saat berhasilmaka akan ditampilkan kehalaman
utama. Jika sudah diisi dan klik “Log in” tetapi username dan password salah maka akan akan
ada pop up seperti (Gambar 26) silahkan masukkan ulang username dan password yang
sesuai.

28. 28
3.1.3. View Produk
Gambar 25 View Product
Gambar 26 Detail Produk

29. 29
Deskripsi :
Halaman ini menampilkan produk yang di jual, hal ini merupakan proses saat user dapat
melihat produk yang di jual oleh website PinkLable. Saat user mengklik salah satu produk
maka akan di tampilkan secara detail deskripsi dari produk tersebut.
3.1.4. Search Product
Gambar 27 Search Bar
Gambar 28 Hasil Pencarian

30. 30
Deskripsi :
Halaman ini menampilkan hasil pencarian produk yaitu saat user mencari produk yang di jual
oleh website Pink Lable. Pencarian dilakukan dengan memuat nama produk yang di jual.
3.1.5. Order Product
Gambar 29 Tambahkan Keranjang

31. 31
Gambar 30 Keranjang
Gambar 31 Check Out

32. 32
Gambar 32 Payment
Gambar 33 Upload Gambar

33. 33
Deskripsi :
Terdapat beberapafituruntuk melakukan orderproduk.Fituryang tersediayaitu keranjang,
check out, upload gambar, dan payment.
1. Fitur Keranjang merupakan sebuah fitur dimana user dapat menambahkan produk
yang di pesan.
2. Fitur check out merupakan fitur dimana user dapat membuat pesanan.
3. Fitur upload gambar merupakan fitur dimana user dapat melakukan upload gambar
untuk mengunggah bukti pembayaran.
4. Fitur payment merupakan fitur untuk user melakukan pembayaran dari pesanan
yang dibuat. Di halaman payment di tampilkan kode pembayaran sesuai metode
pembayaran yang di pilih user.
3.1.6. Dashboard Admin
Gambar 34 Dashboard Admin

34. 34
Gambar 35Kelola Kategori
Gambar 36 Kelola Sub Produk

35. 35
Gambar 37 Kelola Produk
Deskripsi :
Halaman utama admin seperti (Gambar 34) memiliki beberapa fitur yang hanya bisa
dikelola oleh admin saja seperti, fitur dashboard admin, kelola kategori, kelola sub-produk,
dan kelola produk.
1. Fitur Dashboard merupakan salah satu fitur untuk mengetahui pesanan masuk yang
di buat oleh customer.
2. Fitur kelola kategori yaitu fitur yang berguna untuk menambahkah kategori produk
seperti atasan, bawahan, dan hijab. Admin juga bisa mengedit serta menghapus
kategori tersebut.
3. Fitur kelola sub-produk yaitu fitur yang bisa menambahkan sub-kategori produk
seperti atasan yang terdiri dari gaun, jaket, dll.
4. Kelola produk merupakan fitur mengelola produk yang di jual seperti menghapus,
menambah, dan mengedit data produk.

36. 36
BAB IV
TESTING
4.1 Deskripsi
Nama Proyek: Pink Label
Nama Modul: Testing
Nama Analis Pelaksana:
Jumlah Skenario Tes: 14
4.2 Skenario
Skenario Deskripsi
Skenario 1 Register
Skenario 2 Login
Skenario 3 View Product
Skenario 4 Search Product
Skenario 5 Pilih Produk
Skenario 6 Add to Cart
Skenario 7 Order Produk
Skenario 8 Transfer Pembayaran
Skenario 9 Simpan Bukti Pembayaran
Skenario 10 Upload Bukti Pembayaran
Skenario 11 Kelola Produk
Skenario 12 Terima Orderan
Skenario 13 KonfirmasiOrder
Skenario 14 Membuat Laporan Penjualan
4.2.1 Skenario 1: Register
Deskripsi: Dalam skenario user diminta untuk menginput data jika ingin membuat akun
Kebutuhan
Data:
Data akan tersedia di dalam database
Fase : 1

37. 37
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 Pengguna mengetik
alamat website
online shop Pink
Label
Menampilkan halaman utama website
Langkah 2 Menekan tombol
register
Menampilkan form register
Langkah 3 Mengisi Full Name Kotak Full Name terisi
Langkah 4 Mengisi E-mail
Address
Kotak E-mail Address terisi
Langkah 5 Mengisi Password Kotak Password terisi
Langkah 6 Mengisi Repeat
Password
Kotak Repeat Password terisi
Langkah 7 Menekan tombol
Register Account
Masuk sebagai pengguna baru
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan

38. 38
4.1.2 Skenario 2: Login
Deskripsi: Dalam skenario ini pengguna di minta untuk memasukkan username dan passoword
dengan akun yang sudah terdaftar
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengetik
alamat website
online shop Pink
Label
Menampilkan form manajemen user
Langkah 2 Menekan tombil
login
Menampilkan form Login
Langkah 3 Mengisi kotak
username,, dengan
akun yang telah
terdaftar
Kotak Username terisi
Langkah 4 Mengisi kotak
Password sesuai
dengan Password
yang telah terdaftar
Kotak Password terisi
Langkah 5 Menekan tombol
Login
Masuk sebagai member Pink Label

39. 39
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.1.3 Skenario 3: View Product
Deskripsi: Dalam skenario ini user melihat produk yang di jual
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User membuka link
website aplikasi
Menampilkan halaman utama website
Langkah 2 Melihat produk
yang di tampilkan
di halaman utama
website
Menampilkan produk

40. 40
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.4 Skenario 4: Search Product
Deskripsi: Dalam skenario ini user bisa mencari product dengan ketentuan tertentu
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengetikkan
alamat website
online shop Pink
Label
Menampilkan halaman utama website
Langkah 2 User mengetik, dan
mengisi keyword
pada bar search di
bagian tengah atas
halaman utama
website Pink Label,
kemudian menekan
button search di
samping bar search
Menampilkan beberapa produk yang di cari sesuai dengan keyword
yang di ketikan user

41. 41
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.5 Skenario 5: Pilih Produk
Deskripsi: Dalam skenario ini user ingin mengetahui detail produk yang di pilih
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 Menekan produk
yang diinginkan
Menampilkan detail produk
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.6 Skenario 6: Add to Cart
Deskripsi: Dalam skenario ini user dapat mennyimpan data produk yang ingin di pesan

42. 42
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 Pengguna menekan
button ‘tambahkan
ke keranjang’ jika
sudah memilih
salah sau produk
yang ada di website
Pink Label
Menampilkan halaman keranjang belanja
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.7 Skenario 7: Order Produk
Deskripsi: Dalam skenario ini user melakukan check out
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes

43. 43
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User menekan
button check out
ketika sudah
berada di halaman
keranjang
Menampilkan halaman check out dan mengisi data dari user
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.8 Skenario 8: Transfer Pembayaran
Deskripsi: Dalam skenario ini user melakukan transaksi pembelian atas produk yang di pesan
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan

44. 44
Langkah 1 Menekan button
‘Lanjutkan Bayar!!’
setelah berada di
halaman check out
Mendapatkan kode pembayaran
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.9 Skenario 9: Simpan Bukti Pembayaran
Deskripsi: Dalam skenario ini user menyimpan bukti transfer
Kebutuhan
Data:
Data di simpan di dalam device
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User melakukan
pembayaran
dengan kode
pembayaran
Mendapatkan struk pembayaran
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan

45. 45
4.2.10 Skenario 10: Upload Bukti Pembayaran
Deskripsi: Dalam skenario ini user melakukan mengunggah bukti pembayaran
Kebutuhan
Data:
Data tersedia di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengupload
bukti pembayaran
Bukti upload pembayaran di simpan
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.11 Skenario 11: Kelola Produk
Deskripsi: Dalam skenario ini admin mengelola data dan detail produk yang ada di website Pink
Label, untuk mengedit produk, menambah produk, dan menghapus produk.
Kebutuhan
Data:
Data terdapat di dalam database
Fase : 1
Dites Oleh
Tanggal Tes

46. 46
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengetik
alamat website Pink
Label
Menampilkan halaman utama website
Langkah 2 Pengguna login
sebagai admin
Masuk ke dashboard admin
Langkah 3 Dari menu Kelola
Kategori, admin
mengelola barang
Menyimpan data terbaru
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.12 Skenario 12: Terima Orderan
Deskripsi: Dalam skenario ini admin memeriksa pesanan yang di buat oleh pengguna
Kebutuhan
Data:
Data terdapat di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:

47. 47
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengetik
alamat website Pink
Label
Menampilkan halaman utama website
Langkah 2 Pengguna login
sebagai admin
Masuk ke dashboard admin
Langkah 3 User menekan
menu dashboard
Menemukan data customer yang memesan pruduct
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.13 Skenario 13: Konfirmasi Order
Deskripsi: Dalam skenario ini admin mengelola data dan detail produk yang ada di website Pink
Label, untuk mengedit produk, menambah produk, dan menghapus produk.
Kebutuhan
Data:
Data terdapat di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:

48. 48
Langkah Deskripsi Hasil yang Diharapkan
Langkah 1 User mengetik
alamat website Pink
Label
Menampilkan halaman utama website
Langkah 2 Pengguna login
sebagai admin
Masuk ke dashboard admin
Langkah 3 Membuka menu
dashboard
Menampilkan data pesanan yang masuk
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan
4.2.14 Skenario 14: Membuat Laporan Penjualan
Deskripsi: Dalam skenario ini admin mengelola laporan penjualan berupa grafik penjualan
beserta data barang yang terjual dan total pendapatannya.
Kebutuhan
Data:
Data terdapat di dalam database
Fase : 1
Dites Oleh
Tanggal Tes
Server/versi
Deployment:
Backup DB:
Keterangan:
Langkah Deskripsi Hasil yang Diharapkan

49. 49
Langkah 1 User mengetik
alamat website Pink
Label
Menampilkan halaman utama website
Langkah 2 Pengguna login
sebagai admin
Masuk ke dashboard admin
Langkah 3 Admin membuka
menu laporan
Menampilkan laporan
Sesuai
(Ya/Tidak)
Validasi/
Pengecualian
No. Log Kesalahan Catatan

50. 50
BAB V
PENUTUP
5.1 Kesimpulan
Berdasarkan laporan yang kami buat, maka dapat diambil kesimpulan dari pembuatan
aplikasi online shop berbasis website sebagai berikut :
a. Sistem Informasi penjualan pada Toko Pink Label membuat proses penjualan lebih
efektif dan efisien, yaitu customer dalam melakukan transaksi jual beli tidak
dibatasi waktu dan tempat
b. Memudahkan penjual dalam merekapitulasi penjualan
c. Memudahkan dalam mengelola data produK.
5.2 Saran
Aplikasi website yang kami buat memiliki banyak kekurangan, artinya masih banyak
fitur yang belum sempurna yang masih bisa dikembangkan. Oleh karena itu diperlukan
sebuah proses pengembangan lebih lanjut dalam memperbaiki sistem yang sudah ada
sehingga menjadi sebuah website kompleks sebagai sarana jual-beli online sesuai dengan
konsep pembuatan website ini, yaitu memberikan kemudahan bagi customer atau user
dalam berbelanja.

51. 51
KATA PENUTUP
Demikian yang dapat kami paparkan mengenai Aplikasi Online Shop dalam laporan
ini, tentunya masih banyak kekurangan dan kelemahannya, kerena terbatasnya
pengetahuan dan kurangnya rujukan atau referensi yang ada hubungannya dengan laporan
ini.
Penulis banyak berharap para pembaca yang budiman memberikan kritik dan saran
yang membangun kepada penulis demi sempurnanya laporan ini dan dan penulisan
laporan di kesempatan-kesempatan berikutnya. Semoga laporan ini berguna bagi penulis
pada khususnya juga para pembaca yang budiman pada umumnya.
Ciputat, 18 Desember 2019
Penyusun

52. 52
DAFTAR ISI
Rivai, Imam. 2016. Aplikasi Toko Online (E-Commerce) Berbasis PHP dan MYSQL [Skripsi]. Surakarta
(ID) : Universitas Muhammadiyah Surakarta.
Hasanah, Ummy. 2017. Perancangan Sistem Informsi Penjualan Online Berbasis Web Pada
Toko Mimy Online [Skripsi]. Batam (ID) : Sekolah Tinggi Manajemen Informatika dan
Komputer Gici Batam.