105
RANCANG BANGUN SISTEM INFORMASI PENJUALAN KOSMETIK PADA MYSHOP BERBASIS WEBSITE PROYEK AKHIR Program Studi DIII SISTEM INFORMASI Oleh: FITRIYANI 16390100010 FAKULTAS TEKNOLOGI DAN INFORMATIKA INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA 2019

PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

RANCANG BANGUN SISTEM INFORMASI PENJUALAN KOSMETIK

PADA MYSHOP BERBASIS WEBSITE

PROYEK AKHIR

Program Studi

DIII SISTEM INFORMASI

Oleh:

FITRIYANI

16390100010

FAKULTAS TEKNOLOGI DAN INFORMATIKA

INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA

2019

Page 2: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

RANCANG BANGUN SISTEM INFORMASI PENJUALAN KOSMETIK

PADA MYSHOP BERBASIS WEBSITE

Diajukan sebagai salah satu syarat untuk menyelesaikan

Program Ahli Madya Komputer

Oleh:

Nama : FITRIYANI

NIM : 16390100010

Program Studi : DIII (Diploma Tiga)

Jurusan : DIII Sistem Informasi

FAKULTAS TEKNOLOGI DAN INFORMATIKA

INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA

2019

Page 3: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Aku persembahkan hasil karya kecilku kepada

orang tua, Kakak-kakakku, teman-teman di kelas,

Serta Dosen DIII Sistem Informasi, maupun semua pihak Yang sudah

membantu menyelesaikan program dan laporan Proyek Akhir

-FITRIYANI-

Page 4: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

“In The Name of Allah, the Most Gracious, the Most Merciful”

“Bapak dan Ibu adalah alasan utamaku untuk harus selalu kuat, harus

selalu menyelesaikan segala sesuatu yang ada didepan mata”

- FITRIYANI-

Page 5: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi
Page 6: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi
Page 7: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

ABSTRAK

Sistem Informasi penjualan kosmetik ini merupakan suatu sistem yang

memberikan pelayanan informasi yang berupa data transaksi penjualan, cek stok

barang serta pengiriman barang. Teknologi berkembang sangat cepat seperti

halnya penjualan online. MyShop adalah sebuah usaha bergerak dalam bidang

produk-produk kosmetik. MyShop saat ini hanya mengandalkan media social

sebagai sarana promosi dan penjualan yang dapat membantu pelanggan

mendapatkan informasi lengkap tentang produk yang dijual.

Maka dari itu MyShop memerlukan sistem informasi penjualan berbasis

web sebagai media promosi dan penjualan. Aplikasi ini akan menampilkan

produk yang dijual di MyShop saja dan proses order hanya sampai proses

pembayaran/transfer yang harus dilakukan oleh pelanggan. Tujuan pembuatan

aplikasi penjualan kosmetik berbasis web ini sendiri adalah dapat memberikan

pelanggan kemudahan dalam mencari produk. Perancangan aplikasi ini adalah

menggunakan medote waterfall. Bahasa pemrograman dana database yang

digunakan dalam pembuatan aplikasi ini adalah PHP dan MYSQL. Hasil dari

penelitian ini adalah dihasilkan suatu program aplikasi penjualan kosmetik pada

MyShop berbasis web. Pengujian aplikasi tersebut ditinjau berdasarkan beberapa

hal yaitu dari tampilan aplikasi, isi materi aplikasi, dan manfaat aplikasi terhadap

pengguna. Berdasarkan hasil pengujian program aplikasi yang dibuat dapat

disimpulkan bahwa aplikasi sudah memenuhi tujuan pembuatan aplikasi dan

sesuai dalam memenuhi kebutuhan pengguna.

Kata kunci: Sistem Informasi Penjualan, Online Shop, Penjualan, Web, PHP, dan

MYSQL

Page 8: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

ABSTRACT

This cosmetic sales information system is a system that provides

information services in the form of sales transaction data, check stock items and

shipping goods. Technology develops very fast like online sales. MyShop is a

business engaged in cosmetic products. MyShop currently only relies on social

media as a means of promotion and sales that can help customers get complete

information about products sold.

Therefore, MyShop requires a web-based sales information system as a

media for promotion and sales. This application will display only products sold at

MyShop and the order process is only until the payment / transfer process must be

carried out by the customer. The purpose of making this web-based cosmetic sales

application itself is to be able to provide customers the convenience of finding

products. The design of this application is to use the medote waterfall. The

database funding programming language used in making this application is PHP

and MYSQL. The results of this study are a cosmetic sales application program on

web-based MyShop. Testing the application is reviewed based on several things,

namely from the appearance of the application, the contents of the application

material, and the benefits of the application to the user. Based on the results of

testing the application program made it can be concluded that the application has

met the purpose of making the application and is suitable in meeting the needs of

users.

Keywords: Sales Information System, Online Shop, Sales, Web, PHP, and MYSQL

Page 9: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

KATA PENGANTAR

Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha

Panyayang, Penulis panjatkan puja dan puji syukur atas kehadirat-Nya, yang telah

melimpahkan rahmat, hidayah, dan inayah-Nya, sehingga penulis dapat

menyelesaikan Laporan Proyek Akhir dengan judul “Rancang Bangun Sistem

Informasi Penjualan Kosmetik Pada MyShop Berbasis Website”.

Pada laporan proyek akhir ini membahas tentang proses transaksi

penjualan dan pembelian yang dapat membantu memudahkan pelanggan dalam

kegiatan pemesanan barang secara online serta membantu pemilik dalam mencatat

setiap perubahan data.

Dalam pembuatan laporan proyek akhir ini tidak terlepas dari bantuan,

bimbingan, dan arahan dari berbagai pihak kepada penulis. Pada kesempatan ini,

maka penulis mengucapkan banyak terima kasih kepada:

1. Orang tua yang selalu memberikan doa, bantuan, nasihat, dukungan moral

dan motivasi kepada penulis.

2. Ibu Nunuk Wahyuningtyas, M.Kom., OCJA., selaku Dosen Pembimbing

yang telah memberikan arahan dalam pelaksanaan proyek akhir.

3. Ibu Titik Lusiani, M.Kom., OCP., selaku Dosen Pembahas yang telah

memberikan arahan dan saran dalam ujian proyek akhir.

4. Fitriyani dan Lia Ayu Tania Safitri selaku pemilik MyShop.

5. Teman-teman di Institut Bisnis dan Informatika Stikom Surabaya khususnya

DIII Sistem Informasi angkatan 2016 yang selalu menemani, memberikan

dukungan, dan membantu penulis.

Page 10: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Penulis menyadari bahwa laporan proyek akhir dan penyusunan laporan

ini, masih memiliki banyak kekurangan. Oleh karena itu penulis meminta maaf

apabila ada kesalahan yang disengaja atau tidak disengaja. Penulis berharap

laporan proyek akhir ini bermanfaat bagi penulis dan semua pihak.

Surabaya, Agustus 2019

Penulis

Page 11: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

DAFTAR ISI

Halaman

ABSTRAK ........................................................................................................ vii

ABSTRACT ..................................................................................................... viii

KATA PENGANTAR ........................................................................................ ix

DAFTAR ISI ...................................................................................................... xi

DAFTAR TABEL ............................................................................................ xiv

DAFTAR GAMBAR ......................................................................................... xv

DAFTAR LAMPIRAN................................................................................... xviii

BAB I PENDAHULUAN ................................................................................... 1

1.1 Latar Belakang Masalah ................................................................ 1

1.2 Rumusan Masalah ......................................................................... 2

1.3 Batasan Masalah ........................................................................... 2

1.4 Tujuan ........................................................................................... 3

1.5 Manfaat ......................................................................................... 3

1.6 Sistematika Penulisan .................................................................... 4

BAB II HASIL SURVEY ................................................................................... 5

2.1 Gambaran Umum MyShop ............................................................ 5

2.2 Analisis Sistem yang Sedang Berjalan ........................................... 6

2.3 Document Flow Pemesanan Barang............................................... 6

2.4 Document Flow Penjualan............................................................. 7

BAB III LANDASAN TEORI ............................................................................. 9

3.1 Sistem ........................................................................................... 9

Page 12: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

3.2 Informasi ....................................................................................... 9

3.3 Sistem Informasi ......................................................................... 10

3.4 E-commerce ................................................................................ 10

3.5 Penjualan .................................................................................... 11

3.6 Internet ........................................................................................ 11

3.7 Database ..................................................................................... 12

3.8 System Development Life Cycle ................................................... 13

BAB IV ANALISIS DAN DESAIN SISTEM .................................................... 15

4.1 Analisis Sistem............................................................................ 15

4.2 Desain Sistem ............................................................................. 15

4.2.1 System Flow ....................................................................... 15

4.2.2 Data Flow Diagram ........................................................... 17

4.2.3 Entity Relationship Diagram .............................................. 22

4.2.4 Struktur Tabel .................................................................... 25

4.2.5 Desain Input/Output ........................................................... 28

BAB V IMPLEMENTASI DAN PEMBAHASAN ............................................ 54

5.1 Sistem yang Digunakan ............................................................... 54

5.2 Cara Setup Program .................................................................... 54

5.3 Penjelasan Pemakaian Program ................................................... 55

5.3.1 Halaman Login Admin ....................................................... 55

5.3.2 Halaman Dashboard .......................................................... 56

5.3.3 Halaman Admin Kelola ..................................................... 57

5.3.4 Halaman Admin Pesanan ................................................... 60

5.3.5 Halaman Admin Pelanggan ................................................ 63

Page 13: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

5.3.6 Halaman Admin Testimonial ............................................. 64

5.3.7 Halaman Admin Pesan ....................................................... 64

5.3.8 Halaman Admin Polling ..................................................... 65

5.3.9 Halaman Admin Toko ........................................................ 67

5.3.10 Halaman Admin Pengaturan .............................................. 72

5.3.11 Halaman Dashboard Customer .......................................... 73

5.3.12 Halaman Login Customer .................................................. 74

5.3.13 Halaman Panduan belanja .................................................. 76

5.3.14 Halaman Akun ................................................................... 76

5.3.15 Halaman Keranjang Belanja ............................................... 77

5.3.16 Halaman Tagihan ............................................................... 79

5.3.17 Halaman Pesan .................................................................. 81

5.3.18 Halaman Testimoni ............................................................ 82

5.3.19 Tampilan Footer ................................................................ 83

BAB VI PENUTUP ........................................................................................... 84

6.1 Kesimpulan ................................................................................. 84

6.2 Saran ........................................................................................... 84

DAFTAR PUSTAKA ........................................................................................ 85

LAMPIRAN ...................................................................................................... 89

Page 14: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

DAFTAR TABEL

Halaman

Tabel 4.1 Tabel Master Member ........................................................... 25

Tabel 4.2 Tabel Master Order ............................................................... 26

Tabel 4.3 Tabel Master Detail Order .................................................... 26

Tabel 4.4 Tabel Master Kategori .......................................................... 26

Tabel 4.5 Tabel Master Produk ............................................................. 27

Tabel 4.6 Tabel Master Tagihan ........................................................... 27

Tabel 4.7 Tabel Keranjang ................................................................... 28

Tabel 4.8 Tabel Testimonial ................................................................. 28

Page 15: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

DAFTAR GAMBAR

Halaman

Gambar 2.1 Logo MyShop ..................................................................... 5

Gambar 2.2 Document Flow Pemesanan Barang..................................... 7

Gambar 2.3 Document Flow Penjualan ................................................... 8

Gambar 4.1 System Flow Pemesanan Barang ........................................ 16

Gambar 4.2 System Flow Penjualan ...................................................... 17

Gambar 4.3 Context Diagram ............................................................... 18

Gambar 4.4 Data Flow Diagram Level 0 ............................................. 19

Gambar 4.5 Data Flow Diagram Level 1 Data Master .......................... 20

Gambar 4.6 Data Flow Diagram Level 1 Penjualan ............................. 21

Gambar 4.7 Conceptual Data Model .................................................... 23

Gambar 4.8 Physical Data Model ......................................................... 24

Gambar 4.9 Halaman Login Admin ....................................................... 29

Gambar 4.10 Halaman Login Customer ................................................ 30

Gambar 4.11 Desain Halaman Dashboard Admin ................................. 31

Gambar 4.12 Desain Halaman Dashboard Customer ............................ 32

Gambar 4.13 Desain Halaman Kategori ................................................ 33

Gambar 4.14 Desain Halaman Produk .................................................. 33

Gambar 4.15 Desain Halaman Daftar Pesanan ...................................... 34

Gambar 4.16 Desain Halaman Konfirmasi Pembayaran ........................ 35

Gambar 4.17 Desain Halaman Pelanggan ............................................. 36

Gambar 4.18 Desain Halaman Testimonial ........................................... 37

Page 16: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Gambar 4.19 Desain Halaman Kotak Masuk ........................................ 38

Gambar 4.20 Desain Halaman Kirim Pesan .......................................... 38

Gambar 4.21 Desain Halaman Hasil Polling ......................................... 39

Gambar 4.22 Desain Halaman Polling .................................................. 40

Gambar 4.23 Desain Halaman Laporan Penjualan ................................ 41

Gambar 4.24 Desain Halaman Produk Terlaris ..................................... 42

Gambar 4.25 Desain Halaman Panduan Belanja ................................... 42

Gambar 4.26 Desain Halaman Kontak .................................................. 43

Gambar 4.27 Desain Halaman Sosial Media ......................................... 43

Gambar 4.28 Desain Halaman Rekening .............................................. 44

Gambar 4.29 Desain Halaman Pengaturan Shipping ............................. 45

Gambar 4.30 Desain Halaman Pengaturan Slider .................................. 45

Gambar 4.31 Desain Halaman Panduan Belanja ................................... 46

Gambar 4.32 Desain Halaman Daftar ................................................... 47

Gambar 4.33 Desain Halaman Keranjang Belanja ................................ 48

Gambar 4.34 Desain Halaman CheckOut .............................................. 49

Gambar 4.35 Desain Halaman Tagihan ................................................ 50

Gambar 4.36 Desain Halaman Lihat Tagihan ....................................... 50

Gambar 4.37 Desain Halaman Konfirmasi ............................................ 51

Gambar 4.38 Desain Halaman Pesan .................................................... 52

Gambar 4.39 Desain Halaman Testimoni.............................................. 53

Gambar 5.1 Halaman Login Admin ...................................................... 56

Gambar 5.2 Halaman Dashboard Admin .............................................. 57

Gambar 5.3 Halaman Kategori ............................................................. 58

Page 17: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Gambar 5.4 Halaman Tambah Kategori ................................................ 58

Gambar 5.5 Halaman Edit Kategori ...................................................... 59

Gambar 5.6 Halaman Produk................................................................ 59

Gambar 5.7 Halaman Tambah Produk .................................................. 60

Gambar 5.8 Halaman Edit Produk ........................................................ 60

Gambar 5.9 Halaman Daftar Pesanan ................................................... 61

Gambar 5.10 Halaman Detil Pesanan ................................................... 62

Gambar 5.11 Halaman Konfirmasi Pembayaran ................................... 62

Gambar 5.12 Halaman Pelanggan ......................................................... 63

Gambar 5.13 Halaman Detil Pelanggan ................................................ 63

Gambar 5.14 Halaman Testimonial ...................................................... 64

Gambar 5.15 Halaman Pesan Masuk .................................................... 65

Gambar 5.16 Halaman Kirim Pesan ...................................................... 65

Gambar 5.17 Halaman Hasil Polling..................................................... 66

Gambar 5.18 Halaman Polling .............................................................. 66

Gambar 5.19 Halaman Edit Polling ...................................................... 67

Gambar 5.20 Halaman Laporan Penjualan ............................................ 68

Gambar 5.21 Halaman Produk Terlaris ................................................. 68

Gambar 5.22 Halaman Panduan Belanja ............................................... 69

Gambar 5.23 Halaman Kontak ............................................................. 70

Gambar 5.24 Halaman Sosial Media..................................................... 70

Gambar 5.25 Halaman Rekening .......................................................... 71

Gambar 5.26 Halaman Edit Rekening ................................................... 71

Gambar 5.27 Halaman Shipping ........................................................... 72

Page 18: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Gambar 5.28 Halaman Edit Shipping .................................................... 72

Gambar 5.29 Halaman Edit Rekening ................................................... 73

Gambar 5.30 Halaman Dashboar Sebelum Login ................................. 74

Gambar 5.31 Halaman Dashboard Setelah Login .................................. 74

Gambar 5.32 Halaman Login................................................................ 75

Gambar 5.33 Halaman Daftar ............................................................... 75

Gambar 5.34 Halaman Panduan Belanja ............................................... 76

Gambar 5.35 Halaman Akun ................................................................ 77

Gambar 5.36 Halaman Update ............................................................. 77

Gambar 5.37 Halaman Keranjang Belanja ............................................ 78

Gambar 5.38 Halaman Checkout .......................................................... 79

Gambar 5.39 Halaman Tagihan ............................................................ 80

Gambar 5.40 Halaman Lihat Tagihan ................................................... 80

Gambar 5.41 Halaman Konfirmasi Pembayaran ................................... 81

Gambar 5.42 Halaman Pesan ................................................................ 82

Gambar 5.43 Halaman Testimoni ......................................................... 83

Gambar 5.44 Tampilan Footer ............................................................. 83

Page 19: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

DAFTAR LAMPIRAN

Halaman

Lampiran 1. Surat Hasil Survey ............................................................ 89

Lampiran 2. Hasil Wawancara .............................................................. 90

Lampiran 3. Kode Program Transaksi .................................................. 91

Lampiran 4. Kartu Bimbingan Proyek Akhir ........................................ 95

Page 20: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Di era globalisasi saat ini teknologi informasi berkembang sangat pesat.

Seperti halnya penjualan secara online. Penjualan secara online (Online Shop)

merupakan penjualan dengan menggunakan media internet sebagai media

promosi. Saat ini banyak sekali wirausaha ataupun perusahaan yang menjual dan

mempromosikan produknya dengan melalui media internet. Online Shop dangat

dibutuhkan bagi orang-orang yang tidak memiliki banyak waktu berbelanja.

Karena sangat praktis, ekonomis, dan banyak diminati konsumen, online shop ini

sudah banyak digunakan bahkan hampir semua toko.

MyShop adalah sebuah usaha yang bergerak dibidang penjualan

kosmetik. Produk yang dijual adalah semua produk kecantikan wajah, badan, dan

rambut, tentunya produk yang dijual selalu update tetapi tidak menutup

kemungkinan produk yang lama masih tersedia.

Sistem penjualan pada MyShop ini masih menggunakan fasilitas media

sosial seperti facebook, instagram, dan whatsapp. Dalam pencatatan data transaksi

masih manual sehingga sering terjadi kesalahan dalam pembuatan laporan

penjualan serta belum ada informasi detail produk yang lengkap. Dengan

penjualan melalui media sosial maka lingkup penjualan dan promosi masih sangat

minim. Dengan memanfaatkan kemajuan teknologi saat ini dapat diterapkan

diberbagai bidang salah satu diantaranya yaitu bidang penjualan. Website

merupakan satu solusi dalam permasalahan ini.

Page 21: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

2

Berdasarkan permasalahan tersebut penulis memiliki ide untuk

merancang suatu aplikasi penjualan berbasis website yang diharapkan dapat

mengatasi permasalahan diatas. Mengacu pada latar belakang masalah diatas

maka diambil judul penelitian yaitu “SISTEM INFORMASI PENJUALAN

KOSMETIK PADA MYSHOP BERBASIS WEBSITE”.

1.2 Rumusan Masalah

Berdasarkan latar belakang masalah, maka dapat dirumuskan

permasalahan adalah sebagai berikut:

a. Bagaimana merancang dan membangun Sistem Informasi Penjualan

Kosmetik guna memudahkan pelanggan mendapatkan informasi dan

melakukan transaksi secara online?

b. Bagaimana merancang dan membangun Sistem Informasi Penjualan

Kosmetik agar mempermudah pemilik untuk memberikan informasi terkait

produk di MyShop?

c. Bagaimana merancang dan membangun Sistem Informasi Penjualan

Kosmetik yang dapat digunakan untuk menerima dan menyimpan setiap data

pelanggan?

1.3 Batasan Masalah

Berdasarkan rumusan masalah di atas, maka dapat disusun batasan

masalah sebagai berikut:

a. Data yang digunakan untuk simulasi diambil dari Pemilik MyShop.

b. Sistem yang dibahas meliputi:

1. Proses pemesanan barang secara online.

Page 22: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

3

2. Proses transaksi penjualan barang secara online.

3. Penyimpanan data pelanggan dan data barang melalui sistem.

c. Untuk pengguna aplikasi adalah pemilik (owner) dan pelanggan.

d. Tidak membahas tentang keamanan jaringan.

1.4 Tujuan

Tujuan pada penelitian ini, adalah sebagai berikut:

a. Merancang bangun sistem informasi yang dapat diakses oleh pelanggan untuk

melakukan pemesanan dan transaksi secara online.

b. Merancang bangun sistem informasi untuk melakukan pencatatan data stok

barang melalui sistem.

c. Merancang bangun sistem informasi yang dapat menyimpan setiap data

pelanggan dan data barang.

1.5 Manfaat

Manfaat dalam pembuatan Sistem Informasi Penjualan Kosmetik adalah

sebagai berikut:

a. Owner /Admin

1. Meminimalis kesalahan pencatatan data barang maupun data pelanggan.

2. Data tersimpan otomatis dalam database.

3. Memantau setiap laporan penjualan.

4. Membantu pemilik dalam menangani banyak pembeli (many buyers).

b. Customer

1. Memudahkan dalam proses pemesanan barang.

2. Memudahkan dalam transaksi penjualan.

Page 23: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

4

3. Mendapatkan informasi stok barang.

4. Memudahkan dalam pencarian informasi barang.

1.6 Sistematika Penulisan

Sistematika penulisan Laporan Proyek Rancang Bangun Sistem

Informasi Penjualan Kosmetik Pada MyShop adalah sebagai berikut:

Bab pertama membahas tentang latar belakang masalah, rumusan

masalah, batasan masalah, tujuan, manfaat, dan sistematika penulisan.

Bab kedua hasil survey membahas tentang gambaran umum MyShop

yang menguraikan gambaran umum toko seperti keadaan, kondisi, situasi dan hal

lain yang berkaitan dengan toko tersebut.

Bab ketiga landasan teori membahas tentang sistem, informasi, sistem

informasi, E-Commerce, penjualan, internet, databse, dan system development life

cycle.

Bab keempat analisis dan desain sistem membahas tentang prosedur dan

langkah-langkah sistematis dalam menyelesaikan proyek ini. Bab ini juga berisi

tentang Document Flow, System Flow, Context Diagram, Data Flow Diagram,

Entity Relationship Diagram.

Bab kelima implementasi dan pembahasan mengenai sistem yang

digunakan untuk mendukung jalannya aplikasi ini yang meliputi hardware

maupun software. Selain itu, di dalam bab ini juga menjelaskan tentang cara

penggunaan dari aplikasi ini.

Bab keenam penutup membahas tentang kesimpulan atau ringkasan/inti

dari bab-bab sebelumnya dan bab ini juga memuat saran-saran yang bisa

diterapkan untuk perbaikan dan pengembangan sistem selanjutnya.

Page 24: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

5

BAB II

HASIL SURVEY

2.1 Gambaran Umum MyShop

MyShop adalah sebuah wirausaha kecil yang menjual perlengkapan

kecantikan, baik itu untuk kecantikan rambut, kecantikan badan dan kulit, dan

terutama kecantikan wajah.

MyShop dibentuk pada tahun 2018 dan dikelola oleh dua orang

mahasiswa sebagai pemilik yaitu Fitriyani dan Lia Ayu Tania Safitri. MyShop

sendiri beralamat di Jl.Semampir Selatan 3A No.18 Sukolilo – Surabaya. MyShop

tidak memiliki karyawan karena dikelola sendiri oleh pemilik. Pemilik memiliki

tugas yang sama yaitu promosi dan penjualan.

Gambar 2.1 Logo MyShop

Pada Gambar 2.1 merupakan logo MyShop. MyShop memiliki logo

berwarna hitam dan membentuk shilouette wajah wanita dengan rambut

membentuk huruf “S” sebagai simbol Shop pada MyShop, Juga terdapat hiasan

bunga dikepala.

Page 25: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

6

2.2 Analisis Sistem yang Sedang Berjalan

MyShop ingin membangun bagian pengelolahan proses transaksi

penjualan yang saat ini masih belum tersistem dengan baik. Berdasarka

pernyataan pemilik perusahaan, segala proses transaksi yang terjadi hanya

memanfaatkan media kertas sehingga sulit dalam pengelolaan. Pada tahapan

analisi sitem yang dibuat document flow, yang terdiri dari 2 proses sebagai

berikut:

a. Document Flow Pemesanan Barang.

b. Document Flow Penjualan.

2.3 Document Flow Pemesanan Barang

Document Flow pemesanan barang merupakan proses pemesanan barang

yang dilakukan setiap pelanggan yang dijelaskan pada Gambar 2.2. Proses

dimulai dari Pelanggan, pelanggan memilih barang sesuai keinginan, kemudian

pegawai mencatat pemesanan barang dan memproses pemesanan barang. Setelah

itu pegawai membuat bukti pemesanan barang. Terakhir pelanggan mendapatkan

bukti pemesanan barang dari pegawai.

Page 26: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

7

Gambar 2.2 Document Flow Pemesanan Barang

2.4 Document Flow Penjualan

Document Flow Penjualan merupakan proses transaksi penjualan yang

dijelaskan pada Gambar 2.3. Proses dimulai dari Pegawai mencatat data

pelanggan. Kemudian pelanggan menyerahkan bukti pemesanan barang. Setelah

itu pegawai melakukan pengecekan bukti pemesanan. Kemudian Pegawai

melakukan pengecekan ketersediaan barang. Jika barang tidak tersedia, maka

pegawai akan memberikan informasi kepada pelanggan. Jika barang tersedia ,

maka pegawai akan membuat rekap pemesanan rangkap 2. Terakhir pegawai

membuat bukti pembayaran rangkap 2.

Document Flow Pemesanan Barang

Pegawai PelangganPh

ase

Barang DIpilih

Pemesanan Barang

Bukti Pemesanan Barang

Bukti Pemesanan Barang

Mulai

Selesai

Mencatat Pemesanan

Barang

Membuat Bukti Pemesanan

Barang

Konfirmasi Bukti Pemesanan

Barang

Memilih Barang

Page 27: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

8

Gambar 2.3 Document Flow Penjualan

Document Flow Proses Penjualan

Pegawai PelangganP

ha

se

Start

Data Pelanggan

Tersedia ?

Info Ketersediaan

Barang

iya

Info Barang Kosong

Memilih Barang Lain ?

tidak

iya

3

2

Rekap Pemesanan

Selesai

tidak

Bukti Pembayaran

Mengecek Ketersediaan

Barang

Membuat Bukti

Pembayaran

Membuat rekap

Pemesanan

Mencatat Data

Pelanggan

Pengecekan bukti

pemesanan

Bukti Pemesanan Barang

Page 28: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

9

BAB III

LANDASAN TEORI

3.1 Sistem

Pengertian sistem menurut (Mulyani, 2017) dalam bukunya yang

berjudul Metode Analisa Perancangan Sistem, yaitu: “Sistem dapat diartikan

sebagai suatu kumpulan atau himpunan dari unsur, komponen, atau variable-

variabel yang terorganisasi, saling berinteraksi, saling tergantung satu sama lain

dan terpadu. Sistem juga merupakan kumpulan elemen-elemen saling terkait dan

bekerja sama untuk memproses masukan (input) yang ditujukan kepada system

tersebut dan mengolah masukan tersebut sampai menghasilkan keluaran (output)

yang diinginkan”.

Definisi sistem menurut (Marshall, 2014) adalah rangkaian dari dua atau

lebih komponen-komponen yang saling berhubungan, yang berinteraksi untuk

mencapai suatu tujuan. Sebagian besar sistem terdiri dari subsistem yang lebih

kecil yang mendukung sistem yang lebih besar.

3.2 Informasi

Informasi adalah data yang diolah menjadi bentuk yang lebih berguna

dan lebih berarti bagi pengguna dan penerimanya serta bermanfaat dalam

pengambilan keputusan pada saat sekarang atau pada saat yang akan yang datang.

Selain itu informasi juga merupakan fakta-fakta atau data yang diproses

sedemikian atau proses transformasi sehingga berubah menjadi informasi (Adies,

2019).

Page 29: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

10

Definisi menurut (Mulyanto, 2009)informasi adalah sekumpulan fakta

(data) yang diorganisasikan dengan cara tertentu sehingga mereka mempunyai arti

bagi si penerima. Informasi adalah data yang telah diolah menjadi bentuk yang

memiliki arti bagi si penerima dan bermanfaat bagi pengambilan keputusan saat

ini atau mendatang.

3.3 Sistem Informasi

Pengertian sistem informasi menurut (Hartono, 2009) dalam bukunya

yang berjudul Sistem Teknologi Informasi: Pendekatan Terintegrasi: Konsep

Dasar, Teknologi, Aplikasi, Pengembangan, dan Pengelolaan yaitu “Sistem

Informasi merupakan kumpulan dari perangkat keras dan perangkat lunak

komputer serta perangkat manusia yang akan mengolah data menggunakan

perangkat keras memegang peranan yang penting dalam sistem informasi. Data

yang akan dimasukkan dalam sebuah sistem informasi dapat berupa formulir -

formulir, prosedur-prosedur dan bentuk data lainya”.

Definisi menurut (Krismaji, 2015) Sistem informasi adalah cara-cara

yang diorganisasi untuk mengumpulkan, memasukkan, dan mengolah serta

menyimpan data, dan cara-cara yang diorganisasi untuk menyimpan, mengelola,

mengendalikan, dan melaporkan informasi sedemikian rupa sehingga sebuah

organisasi dapat mencapai tujuan yang telah ditetapkan.

3.4 E-commerce

Electronic commerce (E-commerce) adalah penyebaran, pembelian,

penjualan, pemasaran barang dan jasa melalui sistem elektronik seperti internet

atau televisi, www, atau jaringan komputer lainnya. E-commerce dapat

Page 30: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

11

melibatkan transfer dana elektronik, pertukaran data elektronik, sistem

manajemen inventori otomatis, dan sistem pengumpulan data otomatis (Fatimah,

2013).

3.5 Penjualan

Penjualan adalah suatu usaha yang terpadu untuk mengembangkan

rencana-rencana strategis yang diarahkan pada usaha pemuasa n kebutuhan dan

keinginan pembeli guna mendapatkan penjualan yang menghasilkan laba.

Penjualan juga merupakan sumber hidup suatu perusahaan, karena dari

perusahaan dapat diperoleh laba serta suatu usaha memikat konsumen yang

diusahakan untuk mengetahui daya tarik mereka sehingga dapat mengetahui hasil

produk yang dihasilkan (Fatin, 2017).

Definisi Penjualan menurut winardi dalam artikel (Aisha, 2019)

Penjualan adalah saat berkumpulnya dua aspek penting yaitu penjual dan pembeli

yang melaksanakan kegiatan dengan tujuan untuk melaksanakan proses tukar

menukar barang atau jasa yang mempunyai pertimbangan akurat seperti uang.

3.6 Internet

Internet adalah merupakan kependekan dari “interconnected networking”

yang berarti jaringan-jaringan komputer yang saling tersambung atau terhubung

antara satu komputer dengan komputer yang lainnya, sehingga membentuk sebuah

jaringan komputer yang luas di seluruh dunia, sehingga jaringan komputer

tersebut dapat saling berkomunikasi, berinteraksi, saling bertukar informasi

ataupun saling tukar-menukar data (Sora, Pengertian Internet Dan Intranet

Lengkap Dengan Fungsinya, 2014).

Page 31: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

12

Definisi dan Pengertian internet menurut strauss, El-Ansary, Frost dalam

artikel (Ngabito, 2019) Internet adalah seluruh jaringan yangsaling terhubung satu

sama lain. Beberapa komputer dalam jaringan ini menyimpan file, seperti halaman

web, yang dapat diakses oleh seluruh jaringan komputer.

3.7 Database

Pengertian database atau basis data adalah kumpulan berbagai data dan

informasi yang tersimpan dan tersusun di dalam komputer secara sistematik yang

dapat diperiksa, diolah atau dimanipulasi dengan menggunakan program

komputer untuk mendapatkan informasi dari basis data tersebut (Kadir, 2010).

Jika dilihat dari segi Bahasa maka database juga dapat disebut basis data.

Suatu data dapat dimaksudkan informasi yang diperoleh dan disimpan sedangkan

basis adalah semacam perkumpulan atau tempat berkumpul. Maka dapat diambil

kesimpulan bahwa arti dari database adalah kumpulan data atau informasi yang

diperoleh dan selanjutnya disimpan dalam suatu media, umumnya adalah di

komputer (Hermawan, 2019).

Menurut artikel (Sora, Pengertian Database Dan Keuntungannya Yang

Didapat, 2017) database adalah kumpulan data-data yang tersimpan, tersusun, dan

saling terhubung satu sama lain pada suatu komputer serta digunakan perangkat

lunak untuk mengakses maupun mengelolanya sehingga dapat dihasilkan

informasi yang berguna. Atau secara singkatnya definisi database yaitu kumpulan

data yang tersimpan pada suatu komputer dan saling terhubung antara satu sama

lain sehingga dapat digunakan untuk tujuan tertentu.

Page 32: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

13

3.8 System Development Life Cycle

Menurut (bassil, 2012), System Development Life Cycle atau SDLC

adalah proses pengembangan perangkat lunak yang berurutan (sequential) dimana

prosesnya dari atas ke bawah (seperti air terjun) melalui tahapan-tahapan yang

harus dijalankan untuk keberhasilan pembuatan perangkat lunak:

a. Analisis

Analysis sering disebut juga sebagai spesifikasi kebutuhan perangkat lunak

(Software Requirements Specification), yaitu deskripsi lengkap tentang perilaku

perangkat lunak yang akan dikembangkan. Ini berimplikasi system dan bisnis

analis untuk menetapkan persyaratan fungsional dan non-fungsional. Biasanya,

persyaratan fungsional didefinisikan dengan cara menggunakan kasus yang

menggambarkan interaksi pengguna dengan perangkat lunak.

b. Design

Design adalah proses perencanaan dan pemecahan masalah (problem solving)

untuk sebuah solusi perangkat lunak. Ini berimplikasi pengembang perangkat

lunak dan desainer untuk menentukan rencana untuk solusi yang meliputi desain

algoritma, desain arsitektur perangkat lunak, skema database konseptual dan

desain diagram logis, desain konsep, desain GUI (Graphical User Interface) dan

definisi struktur data. Desain sistem dibuat dalam bentuk:

a) Entity Relationship Diagram, adalah suatu diagram yang mendefinisikan

strutur file, format record, serta ciri-ciri proses yang bergantung pada

perangkat keras dan karakteristik database management system.

Page 33: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

14

b) Context Diagram, adalah suatu diagram yang menggambarkan proses input

dan output secara garis besar.

c) Data Flow Diagram, adalah suatu diagram yang menggambarkan proses

input dan output secara rinci, lengkap dengan database yang tersusun dalam

level-level yang saling berhubungan.

c. Code Program

Desain harus diubah menjadi bentuk yang dapat dimengerti mesin (komputer).

Maka dilakukan langkah penulisan program. Jika desain-nya detail, maka code

dapat dicapai secara mekanis. Perangkat lunak yang digunakan dalam proses

penulisan program ini adalah Visual Basic 6.0, SQL Server 2000 dan Crystal

report 8.5.

d. Implementation

Implementation mengacu pada realisasi kebutuhan bisnis dan spesifikasi desain ke

dalam bentuk program nyata, database, website, atau komponen perangkat lunak

melalui pemrograman dan penempatan (deployment). Pada tahap ini, kode ditulis

dan disusun menjadi sebuah aplikasi operasional, dan dimana database dan file

teks juga dibuat. Dengan kata lain, fase implementasi adalah proses mengubah

seluruh persyaratan (requirements) ke dalam sebuah lingkungan produksi.

e. Maintenance

Maintenance atau perawatan adalah proses memodifikasi solusi perangkat lunak

setelah dibuat dan diterapkan untuk memperbaiki output, memperbaiki error dan

meningkatkan kinerja dan kualitas. Kegiatan pemeliharaan tambahan dapat

dilakukan dalam fase ini, termasuk beradaptasi perangat lunak.

Page 34: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

15

BAB IV

ANALISIS DAN DESAIN SISTEM

4.1 Analisis Sistem

Analisis sistem ini digunakan untuk melihat proses-proses sistem baru

yang akan dibuat. Dari analisa sistem ini juga bisa melihat perbedaan antara

sistem yang lama dengan sistem yang baru. Analisa sistem ini berisi dan System

Flow, Data Flow Diagram dan Entity Relationship Diagram.

4.2 Desain Sistem

Berdasarkan analisis yang telah dilakukan, maka dibuatlah sistem yang

baru. Sistem yang baru tersebut dapat digambarkan pada system flow

komputerisasi berikut ini:

4.2.1 System Flow

System flow (Sysflow) memuat hasil analisis yang dibuat berdasarkan hasil

survey ke MyShop. System flow menggambarkan seluruh proses, yang berhubungan

dalam kegiatan pendistribusian dokumen yang dirancang sekarang ini. Setelah

menggambarkan Document Flow yang ada pada MyShop, maka langkah selanjutnya

adalah mengajukan atau merancang sistem baru untuk menunjang atau mempercepat

dan agar tidak kehilangan data. Berikut ini adalah System Flow yang

direkomendasikan guna menunjang penjualan kosmetik pada MyShop.

A. System Flow Pemesanan Barang

System Flow pemesanan barang adalah suatu proses pemesanan barang

pelanggan melalui sistem. Pada Gambar 4.1 dijelaskan awal proses pemesanan

Page 35: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

16

barang dimulai dari pelanggan mendapatkan informasi data pemesanan.

Kemudian sistem menampilkan data pemesanan. Setelah itu pelanggan

mendapatkan informasi data detil pemesanan. Kemudian sistem menampilkan

detil pemesanan yang tersedia. Setelah itu pelanggan mendapatkan informasi data

konfirmasi pesanan. Kemudian sistem menampilkan konfirmasi pemesanan.

Setelah itu pelanggan mendapatkan informasi data konfirmasi pemesanan.

Terakhir sistem menampilkan pemesanan.

Gambar 4.1 System Flow Pemesanan Barang

B. System Flow Penjualan

System Flow penjualan adalah proses penjualan yang dilakukan pada

setiap pelanggan. Pada Gambar 4.2 dijelaskan pelanggan memasukan data

penjualan, sistem menampilkan data penjualan dan menyimpan data penjualan,

Page 36: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

17

pelanggan memasukan detil penjualan, sistem menampilkan detil penjualan dan

menyimpannya, pelanggan melakukan konfirmasi pembayaran, sistem

menampilkan konfirmasi pembayaran dan menyimpannya, dan sistem

nemampilkan penjualan.

Gambar 4.2 System Flow Penjualan

4.2.2 Data Flow Diagram

Data Flow Diagram digunakan untuk menggambarkan aliran data dan

proses yang terjadi dalam sebuah sistem serta entitas-entitas apa saja yang terlibat.

A. Context Diagram

Context diagram dari aplikasi sistem informasi penjualan dan pembelian

barang kosmetik di MyShop ini terdiri dari dua entitas dengan aliran data masing-

masing yang saling terkait. Dua entitas tersebut adalah entitas Owner (admin) dan

Page 37: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

18

Customer. Dua entitas tersebut memberikan masukan dan keluaran data yang

diperlukan seperti yang digambarkan pada Gambar 4.3.

Gambar 4.3 Context Diagram

B. Data Flow Diagram Level 0

Data Flow Diagram digunakan untuk menggambarkan aliran data dan

proses yang terjadi dalam sebuah sistem serta entitas-entitas yang terlibat

didalamnya. Context diagram dibagi menjadi sub-sub proses yang lebih kecil,

dengan cara decompose context diagram dan disebut DFD Level 0. DFD Level 0

sistem informasi penjualan kosemtik pada MyShop terdiri dari empat proses, dua

entitas eksternal dan tiga data store. Proses yang pertama adalah proses mengelola

data master, proses kedua adalah proses penjualan, dan ketiga proses mencatat

laporan. Sedangkan untuk dua entitas eksternal adalah Customer dan admin. Tiga

data store yang tertera adalah data master, penjualan, dan Laporan Pnejualan.

Pada Gambar 4.4 dijelaskan proses pengisian data master dilakukan oleh

Info_Master_Kategori

Info_Master_Barang

Info_Penjualan

Info_Penjualan

Info_Pelanggan

Data_Master_Pelanggan

Data_Penjualan

Info_Master_Pelanggan

Laporan_Penjualan

Data_Master_Barang

Data_Master_Kategori

0

Sistem Inform asi

Penjualan

Kosmetik

+

Admin

Pelanggan

Page 38: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

19

pelanggan dan admin. Kemudian proses penjualan yang dilakukan oleh

pelanggan. Dan yang terakhir proses cetak laporan penjualan.

Gambar 4.4 Data Flow Diagram Level 0

Data Penjualan

Data Master

[Laporan_Penjualan]

[Info_Pelanggan]

[Info_Penjualan]

[Data_Penjualan]

[Info_Penjualan]

[Info_Master_Kategori]

[Info_Master_Barang]

[Data_Master_Pelanggan]

[Info_Master_Pelanggan]

[Data_Master_Barang]

[Data_Master_Kategori]Admin

Admin

Admin

Admin

Pelanggan

Pelanggan

Pelanggan

Pelanggan

Admin

Pelanggan

Pelanggan

1

Data Master

+

2

Penjualan

+

3

Laporan

Penjualan

+

Page 39: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

20

Pada DFD level 1 proses mengelola data master, menjelaskan secara

umum proses yang dilakukan saat mengelola data master. DFD level 1 proses

mengelola data master dapat dilihat pada Gambar 4.5.

Gambar 4.5 Data Flow Diagram Level 1 Data Master

Pada Gambar 4.6 menjelaskan DFD level 1 dari proses penjualan

(pemesanan barang). Pada DFD level 1 pemesanan barang ini, terdapat lima

macam proses, dua entitas eksternal dan dua data store. Proses yang pertama

adalah menampilkan detil barang, proses yang kedua adalah menambahkan ke

keranjang, proses yang ketiga adalah konfirmasi pembayaran, proses yang

keempat adalah menyimpan data penjualan, dan proses kelima adalah

menampilkan data penjualan. Dari data penjualan tersebut, akan menampilkan

[Data Master]

Data_Barang

Data_Kategori

DIbaca

Disimpan

Dibaca

DIsimpan

Dibaca

Disimpan

[Info_Master_Barang]

[Data_Master_Barang]

[Info_Master_Kategori]

[Data_Master_Kategori]

[Info_Master_Pelanggan]

[Info_Pelanggan]

[Data_Master_Pelanggan]

Admin

Admin

Admin

Pelanggan

Pelanggan

Pelanggan

Pelanggan

Penjualan

1.1

Mengelola Data

Master

Pelanggan

1.2

Mengelola Data

Master Kategori

1.3

Menegelola

Data Master

Barang

1 Pelanggan

2 Kategori

3 Barang

Page 40: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

21

laporan penjualan yang hanya dapat diakses oleh admin. DFD level 1 proses

penjualan dapat dilihat pada Gambar 4.6.

Gambar 4.6 Data Flow Diagram Level 1 Penjualan

Disimpan

Disimpan

[Info_Penjualan]

[Data_Penjualan]

[Data Penjualan]

[Info_Penjualan]

[Data Master]

Data Penjualan

Hasil Konfirmasi Pembayaran

List Belanja

Detil Barang

Pelanggan

Pelanggan

Admin

Data Master

Laporan Penjualan

2.1

Menampilkan

Detil Barang

2.2

Menambahkan

Keranjang

2.3

Konfirm asi

Pembayaran

2.4

Menyim pan

Data Penjualan

2.5

Menampilkan

Data Penjualan

4 Penjualan

5 Detil Penjualan

[Data Penjualan]

[Laporan_Penjualan]Adm in

Penjualan

3.1

Laporan

Penjualan

Page 41: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

22

4.2.3 Entity Relationship Diagram

Entity Relationship Diagram digunakan untuk menggambarkan tabel-

tabel yang ada dalam sebuah sistem, berikut relasi antar tabel.

A. Conceptual Data Model

Conceptual Data Model pada Rancang Bangun Sistem Informasi

Penjualan Pada MyShop, merupakan model struktur logis dari keseluruhan

aplikasi data. CDM dibawah ini memiliki 7 entity yang saling terhubung. Adapun

Conceptual Data Model tersebut digambarkan pada gambar 4.7.

B. Physical Data Model

Physical Data Model adalah representasi fisik dari database yang dibuat

dengan mempertimbangkan DBMS yang digunakan. Physical Data Model pada

Rancang Bangun Sistem Informasi Penjualan Pada MyShop memiliki 8 tabel yang

digambarkan pada Gambar 4.8.

Page 42: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

23

me

laku

kan

me

mil

iki

me

laku

kan

me

mp

un

yai

t_m

em

be

r

id_

me

mb

er

use

rna

me

pa

ssw

ord

na

ma

_le

ng

kap

em

ail

no

_te

lp

ala

ma

t

pro

vin

si

kota

kod

e_

po

st

forg

et_

key

<p

i>In

teg

er

Va

ria

ble

ch

ara

cte

rs (

20

)

Va

ria

ble

ch

ara

cte

rs (

40

)

Va

ria

ble

ch

ara

cte

rs (

10

0)

Va

ria

ble

ch

ara

cte

rs (

10

0)

Va

ria

ble

ch

ara

cte

rs (

20

)

Va

ria

ble

ch

ara

cte

rs (

30

0)

Va

ria

ble

ch

ara

cte

rs (

50

)

Va

ria

ble

ch

ara

cte

rs (

50

)

Inte

ge

r

Va

ria

ble

ch

ara

cte

rs (

30

)

<M

>

Ide

nti

fie

r_1

<p

i>

t_o

rde

r

id_

ord

er

qty

<p

i>In

teg

er

Inte

ge

r

<M

>

Ide

nti

fie

r_1

<p

i>

t_ke

ran

jan

g

id_

kera

nja

ng

qty

<p

i>In

teg

er

Inte

ge

r

<M

>

Ide

nti

fie

r_1

<p

i>t_

test

imo

nia

l

id_

test

imo

nia

l

isi_

test

imo

nia

l

tgl_

test

imo

nia

l

tam

pil

<p

i>In

teg

er

Va

ria

ble

ch

ara

cte

rs (

10

0)

Da

te

Inte

ge

r

<M

>

Ide

nti

fie

r_1

<p

i>

t_ta

gih

an

id_

tag

iha

n

tgl_

tag

oh

an

tota

l_ta

gih

an

foto

_fa

ktu

r

sta

tus_

tag

iha

n

<p

i>In

teg

er

Da

te

Inte

ge

r

Va

ria

ble

ch

ara

cte

rs (

10

0)

Ch

ara

cte

rs (

50

)

<M

>

Ide

nti

fie

r_1

<p

i>

t_p

rod

uk

id_

pro

du

k

me

rek

na

ma

_p

rod

uk

ha

rga

_p

rod

uk

ga

mb

ar_

pro

du

k

de

skri

psi

_p

rod

uk

sto

k

tgl_

po

st

<p

i>In

teg

er

Va

ria

ble

ch

ara

cte

rs (

20

)

Va

ria

ble

ch

ara

cte

rs (

50

)

Inte

ge

r

Va

ria

ble

ch

ara

cte

rs (

30

)

Lo

ng

va

ria

ble

ch

ara

cte

rs

Inte

ge

r

Da

te

<M

>

Ide

nti

fie

r_1

<p

i>

t_ka

teg

ori

id_

kate

go

ri

na

ma

_ka

teg

ori

<p

i>In

teg

er

Va

ria

ble

ch

ara

cte

rs (

40

)

<M

>

Ide

nti

fie

r_1

<p

i>

me

mil

iki

me

mil

iki

Gam

bar

4.7

Conce

ptu

al

Data

Model

Page 43: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

24

id_m

embe

r = id

_mem

ber

id_k

eran

jang

= id

_ker

anja

ng

id_m

embe

r = id

_mem

ber

id_m

embe

r = id

_mem

ber

id_p

rodu

k =

id_p

rodu

k

id_o

rder

= id

_ord

er

id_t

agih

an =

id_t

agih

an

id_k

ateg

ori =

id_k

ateg

ori

t_m

embe

r

id_m

embe

r

id_k

eran

jang

user

nam

e

pass

wor

d

nam

a_le

ngka

p

emai

l

no_t

elp

alam

at

prov

insi

kota

kode

_pos

t

forg

et_k

ey

inte

ger

inte

ger

varc

har(2

0)

varc

har(4

0)

varc

har(1

00)

varc

har(1

00)

varc

har(2

0)

varc

har(3

00)

varc

har(5

0)

varc

har(5

0)

inte

ger

varc

har(3

0)

<pk>

<fk>

t_or

der

id_o

rder

id_m

embe

r

id_t

agih

an

qty

inte

ger

inte

ger

inte

ger

inte

ger

<pk>

<fk1

>

<fk2

>

t_ke

ranj

ang

id_k

eran

jang

id_m

embe

r

qty

inte

ger

inte

ger

inte

ger

<pk>

<fk>

t_te

stim

onia

l

id_t

estim

onia

l

id_m

embe

r

isi_

test

imon

ial

tgl_

test

imon

ial

tam

pil

inte

ger

inte

ger

varc

har(1

00)

date

inte

ger

<pk>

<fk>

t_ta

giha

n

id_t

agih

an

tgl_

tago

han

tota

l_ta

giha

n

foto

_fak

tur

stat

us_t

agih

an

inte

ger

date

inte

ger

varc

har(1

00)

char

(50)

<pk>

t_pr

oduk

id_p

rodu

k

id_k

ateg

ori

mer

ek

nam

a_pr

oduk

harg

a_pr

oduk

gam

bar_

prod

uk

desk

ripsi

_pro

duk

stok

tgl_

post

inte

ger

inte

ger

varc

har(2

0)

varc

har(5

0)

inte

ger

varc

har(3

0)

long

var

char

inte

ger

date

<pk>

<fk>

t_ka

tego

ri

id_k

ateg

ori

nam

a_ka

tego

ri

inte

ger

varc

har(4

0)

<pk>

deta

il_or

der

id_p

rodu

k

id_o

rder

inte

ger

inte

ger

<pk,

fk1>

<pk,

fk2>

Gam

bar

4.8

Phys

ical

Data

Model

Page 44: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

25

4.2.4 Struktur Tabel

Struktur Tabel digunakan untuk menggambarkan secara detail tentang

tabel-tabel yang terdapat dalam sebuah sistem. Struktur tabel digambarkan

sebagai berikut:

A. Tabel Master Member

Nama Tabel : T_MEMBER

Primary Key : ID_MEMBER

Foreign Key : ID_KERANJANG

Fungsi : Digunakan untuk menyimpan data Customer

Tabel 4.1 Tabel Master Member

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_MEMBER Integer - Primary Key

2 ID_KERANJANG Integer - Fireign Key

3 USERNAME Varchar 20 -

4 PASSWORD Varchar 40 -

5 NAMA_LENGKAP Varchar 100 -

6 EMAIL Long Varchar 100 -

7 NO_TELP Varchar 20 -

8 ALAMAT Varchar 300 -

9 PROVINSI Varchar 50 -

10 KOTA Varchar 50 -

11 KODE_POS Integer - -

12 FORGET_KEY Varchar 30 -

B. Tabel Master Order

Nama Tabel : T_ORDER

Primary Key : ID_ORDER

Foreign Key : ID_TAGIHAN, T_MEMBER

Fungsi : Digunakan untuk menyimpan data Order

Page 45: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

26

Tabel 4.2 Tabel Master Order

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_ORDER Integer - Primary Key

2 ID_MEMBER Integer - Foreign Key

3 NO_TAGIHAN Integer - Foreign Key

4 QTY Integer - -

C. Tabel Master Detail Order

Nama Tabel : DETAIL_ORDER

Primary key : ID_PRODUK, ID_ORDER

Foreign Key :-

Fungsi : Digunakan untuk menyimpan data Order dan data Produk

Tabel 4.3 Tabel Master Detail Order

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_PRODUK Integer - Primary Key1

2 ID_ORDER Integer - Primari Key2

D. Tabel Master Kategori

Nama Tabel : T_KATEGORI

Primary Key : ID_KATEGORI

Foreign Key : -

Fungsi : Digunakan untuk menyimpan data Kategori

Tabel 4.4 Tabel Master Kategori

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_KATEGORI Integer - Primary Key

2 NAMA_KATEGORI Varchar 40 -

Page 46: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

27

E. Tabel Master Produk

Nama Tabel : T_PRODUK

Primary Key : ID_PRODUK

Foreign Key : ID_KATEGORI

Fungsi : Digunakan untuk menyimpan data Produk

Tabel 4.5 Tabel Master Produk

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_PRODUK Integer - Primary Key

2 ID_KATEGORI Integer - Foreign Key

3 MEREK Varchar 20 -

4 NAMA_PRODUK Varchar 50 -

5 HARGA_PRODUK Integer - -

6 GAMBAR_PRODUK Varchar 30 -

7 DESKRIPSI_PRODUK Long Varchar - -

8 STOK Integer - -

9 TGL_POST Date - -

F. Tabel Master Tagihan

Nama Tabel : TAGIHAN

Primary Key : ID_TAGIHAN

Foreign Key : -

Fungsi : Digunakan untuk menyimpan data Tagihan

Tabel 4.6 Tabel Master Tagihan

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_TAGIHAN Integer - Primary Key

2 TGL_TAGIHAN Date - -

3 TOTAL_TAGIHAN Integer - -

4 FOTO_FAKTUR Varchar 100 -

5 STATUS_TAGIHAN Char 50 -

Page 47: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

28

G. Tabel Keranjang

Nama Tabel : KERANJANG

Primary Key : ID_KERANJANG

Foreign Key : -

Fungsi : Digunakan untuk menyimpan data Keranjang

Tabel 4.7 Tabel Keranjang

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_KERANJANG Integer - Primary Key

2 ID_MEMBER Integer - Foreign Key

3 QTY Integer - -

H. Tabel Testimonial

Nama Tabel : T_TESTIMONIAL

Primary Key : ID_TESTIMONIAL

Foreign Key : ID_MEMBER

Fungsi : Digunakan untuk menyimpan data Testimoni

Tabel 4.8 Tabel Testimonial

No Nama Kolom Tipe Data Panjang Keterangan

1 ID_TESTIMONIAL Integer - Primary Key

2 ID_MEMBER Integer - Foreign Key

3 ISI_TESTIMONIAL Varchar 100 -

4 TGL_TESTIMONIAL Date - -

5 TAMPIL Integer - -

4.2.5 Desain Input/Output

Desain input output merupakan langkah pertama untuk membuat sebuah

aplikasi sistem informasi. Dalam tahap ini user diberikan gambaran tentang

bagaimana sistem ini nantinya dibuat.

Page 48: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

29

A. Desain Halaman Login

Desain halaman login ini terdapat dua halaman, pertama halaman login

admin (owner) dan halaman login pelanggan. Desain halaman login dapat dilihat

pada Gambar 4.9 dan 4.10.

Gambar 4.9 Halaman Login Admin

Pada halaman login admin terdapat dua kolom, yaitu kolom Username

dan Password. Apabila pengguna sudah memasukkan data Username dan

Password, sistem akan melakukan pemeriksaan apakah data terdapat di database.

Apabila benar maka mengarah ke halaman dahboard yang isinya sesuai dengan

data yang dimasukkan.

Page 49: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

30

Gambar 4.10 Halaman Login Customer

Pada halaman login customer terdapat tiga kolom, yang pertama kolom

Email, yang kedua kolom Password, dan yang terakhir kolom kode aktivasi.

Apabila pengguna sudah memasukkan data Email, Password, dan kode aktivasi,

sistem akan melakukan pemeriksaan apakah data terdapat di database. Apabila

benar maka mengarah ke halaman dahsboard yang isinya sesuai dengan data yang

dimasukkan.

B. Desain Halaman Dashboard

Desain halaman dashboard ini terdapat dua halaman, pertama halaman

dashboard admin dan halaman dashboard kustomer. Desain halaman dashboard

dapat dilihat pada Gambar 4.11. dan 4.12.

Page 50: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

31

Gambar 4.11 Desain Halaman Dashboard Admin

Halaman dashboard admin menampilkan 10 menu dan beberapa menu

memiliki sub-menu yaitu, menu dashboard (home), kelola memiliki sub-menu:

(produk dan kategori), pesanan memiliki sub-menu: (daftar pesanan dan

konfirmasi pesanan), pelanggan, testimonial, pesan memiliki sub-menu: (kirim

pesan dan kotak masuk), polling memiliki sub-menu: (hasil polling dan polling),

toko memiliki sub-menu: (laporan penjualan, laporan barang terlaris, panduan

belanja, kontak, social media,dan rekening), pengaturan memiliki sub-menu:

(shipping dan slider), dan menu keluar yang tidak memiliki halamn dan sub-

menu.

Halaman dashboard customer menampilkan delapan menu yaitu, menu

home, panduan belanja, login, daftar, kategori, keranjang belanja, kontak, bank

pembayaran.

Page 51: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

32

Gambar 4.12 Desain Halaman Dashboard Customer

C. Desain Halaman Kelola

Halaman ini memiliki dua sub-menu yaitu kategori dan produk. Pada

sub-menu kategori berisi informasi kategori dan terdapat pilihan untuk menambah

kategori, edit kategori, dan hapus kategori, sedangkan sub-menu produk berisi

informasi produk terdapat pilihan untuk menambah produk, edit produk, dan

Page 52: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

33

hapus produk. Desain kategori dan produk dapat dilihat pada Gambar 4.13 dan

Gambar 4.14.

Gambar 4.13 Desain Halaman Kategori

Gambar 4.14 Desain Halaman Produk

Page 53: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

34

D. Desain Halaman Pesanan

Halaman ini berfungsi untuk mengelola informasi Pesanan. Menu

pesanan memiliki dua sub-menu yaitu daftar pesanan dan konfirmasi pembayaran.

Pada halaman ini ditampilkan informasi daftar pesanan yang dilakukan

oleh pelanggan, admin dapat melihat detail order dan dapat melakukan

pembatalan konfirmasi jika pelanggan belum melakukan upload bukti

pembayaran dan dapat melakukan konfirmasi jika pelanggan telah melakukan

upload bukti pembayaran. Desain daftar pesanan dapat dilihat pada Gambar 4.15.

Pada halaman ini ditampilkan informasi konfirmasi pembayaran, admin

dapat melihat detail order dan dapat melakukan konfirmasi jika pelanggan telah

melakukan upload bukti pembayaran. Didalam menu konfirmasi pembayaran juga

dapat melihat bikti pembayaran. Desain daftar pesanan dapat dilihat pada Gambar

4.16.

Gambar 4.15 Desain Halaman Daftar Pesanan

Page 54: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

35

Gambar 4.16 Desain Halaman Konfirmasi Pembayaran

E. Desain Halaman Pelanggan

Halaman ini berfungsi untuk menampilkan informasi data pelanggan.

Desain Informasi Rekening digambarkan pada Gambar 4.17.

Page 55: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

36

Gambar 4.17 Desain Halaman Pelanggan

Pada halaman ini ditampilkan informasi data pelanggan yang sudah

terdaftar. Pada tabel tersebut terdapat kolom aksi yang berisi tombol lihat yang

berfungsi untuk melihat detail data pelanggan.

F. Desain Halaman Testimonial

Desain halaman ini berfungsi untuk mengelola data daftar testimony

yang dilakukan oleh pelanggan, testimony merupakan penilaian dari pelanggan

kepada MyShop, tombol x yang tertera pada kolom berfungsi untuk menghapus

data. Desain halaman kategori produk digambarkan pada Gambar 4.18.

Page 56: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

37

Gambar 4.18 Desain Halaman Testimonial

G. Desain Halaman Pesan

Desain halaman ini berfungsi untuk mengelola data Pesan. Menu Pesan

memiliki dua sub-menu yaitu pesan masuk dan kirim pesan. Halaman pesan

masuk menampilkan data pesan yang dikirim oleh pelanggan, sedangkan halaman

kirim pesan manampilkan form yang digunakan untuk membalas pesan kepada

pelanggan. Desain halaman pesan masuk digambarkan pada Gambar 4.19 dan

halaman kirim pesan digambarkan pada Gambar 4.20.

Page 57: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

38

Gambar 4.19 Desain Halaman Kotak Masuk

Gambar 4.20 Desain Halaman Kirim Pesan

Page 58: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

39

H. Desain Halaman Polling

Halaman ini berfungsi untuk menyimpan data polling. Menu polling

memiliki dua sub-menu yaitu hasil polling dan polling.

Halaman hasil polling menampilkan diagram batang yang menunjukan

hasil polling yang dilakukan oleh pelanggan. Desain halaman hasil polling

digambarkan pada Gambar 4.21.

Halaman polling menampilkan data pertanyaan polling yang tersimpan

didalam database, jika ingin merubah pertanyaan dapat menekan tombol edit.

Desain halaman hasil polling digambarkan pada Gambar 4.22.

Gambar 4.21 Desain Halaman Hasil Polling

Page 59: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

40

Gambar 4.22 Desain Halaman Polling

I. Desain Halaman Toko

Halaman menu toko memiliki enam sub-menu. Sub-menu pertama adalah

laporan penjualan, halaman ini menampilkan laporan penjualan berdasarkan bulan

dan tahun. Desain halaman laporan penjualan digambarkan pada Gambar 4.23.

Sub-menu kedua adalah laporan produk terlaris, halaman ini

menampilkan laporan produk terlaris berdasarkan pembelian pelanggan. Desain

halaman laporan produk terlaris digambarkan pada Gambar 4.24.

Sub-menu ketiga adalah panduan belanja, halaman ini menampilkan form

untuk menambahkan deskripsi panduan belanja. Desain halaman panduan belanja

digambarkan pada Gambar 4.25.

Page 60: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

41

Sub-menu keempat adalah kontak, halaman ini menampilkan kontak

informasi pada MyShop yang dapat dihubungi oleh pelanggan. Desain halaman

kontak digambarkan pada Gambar 4.26.

Sub-menu kelima adalah social media, halaman ini menampilkan

informasi sosial media yang digunakan oleh MyShop. Desain halaman social

media digambarkan pada Gambar 4.27.

Sub-menu keenam adalah rekening, halaman ini menampilkan daftar

akun rekening milik MyShop, yang akan digunakan pelanggan untuk melakukan

pembayaran. Desain halaman rekening digambarkan pada Gambar 4.28.

Gambar 4.23 Desain Halaman Laporan Penjualan

Page 61: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

42

Gambar 4.24 Desain Halaman Produk Terlaris

Gambar 4.25 Desain Halaman Panduan Belanja

Page 62: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

43

Gambar 4.26 Desain Halaman Kontak

Gambar 4.27 Desain Halaman Sosial Media

Page 63: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

44

Gambar 4.28 Desain Halaman Rekening

J. Desain Halaman Pengaturan

Halaman Pengaturan ini memiliki dua sub-menu yaitu shipping dan

slider. Sub-menu shipping menmapilkan daftar kota dan ongkors kirim yang

terdaftar di MyShop. Desain halaman shipping digambarkan pada Gambar 4.29.

Halaman sub-menu slider menampilkan daftar form untuk mengisi slide

yang akan ditampilkan pada Dashboard pelanggan. Pada form tersebut terdapat

tiga slot form untuk memasukan text dan gambar. Desain halaman slider digambar

pada Gambar 4.30.

Page 64: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

45

Gambar 4.29 Desain Halaman Pengaturan Shipping

Gambar 4.30 Desain Halaman Pengaturan Slider

Page 65: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

46

K. Halaman Panduan Belanja

Halaman panduan belanja berfungsi menampilkan infromasi tata cara

belanja atau melakukan pesemasanan pada aplikasi MyShop. Desain halaman

panduan belanja digambarkan pada Gambar 4.31.

Gambar 4.31 Desain Halaman Panduan Belanja

L. Halaman Daftar

Halaman daftar ini berfungsi untuk melakukan pendaftaran akun, yang

akan digunakan untuk login bagi pelanggan yang belum memiliki akun

sebelumnya. Desain halaman panduan belanja digambarkan pada Gambar 4.32.

Page 66: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

47

Gambar 4.32 Desain Halaman Daftar

M. Halaman Keranjang Belanja

Halaman keranjang belanja berfungsi untuk menyimpan produk yang

dipilih oleh pelanggan untuk dibeli, informasi yang tersimpan berupa daftar tabel

yang berisi harga, jumlah barang, dan aksi untuk merubah total barang. Desain

halaman keranjang belanja digambarkan pada Gambar 4.33.

Page 67: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

48

Gambar 4.33 Desain Halaman Keranjang Belanja

N. Halaman CheckOut

Halaman checkout berfungsi menampilkan infromasi alamat tujuan

untuk pengiriman barang dan rincian harga barang yang harus dibayar oleh

pelanggan. Tampilan checkout terdapat tombol ubah alamat yang digunakan

untuk merubaha alamat pelanggan, tombol ubah order yang digunakan untuk

merubah pesanan pelanggan, tombol checkout yang digunakan untuk melanjutkan

transaksi. Desain halaman checkout digambarkan pada Gambar 4.34.

Page 68: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

49

Gambar 4.34 Desain Halaman CheckOut

O. Halaman Tagihan

Halaman tagihan ini berfungsi menyimpan daftar pesanan pelanggan

yang belum dan sudah menyelesaikan pembayaran. Informasi yang tersimpan

dalam tagihan berupa tabel dengan status belum lunas, proses, dan lunas, didalam

tagihan terdapat dua aksi yaitu lihat tagihan dan konfirmasi. Desain halaman

tagihan, lihat tagihan, dan konfirmasi digambarkan pada Gambar 4.35, Gambar

4.36, dan Gambar 4.37.

Page 69: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

50

Gambar 4.35 Desain Halaman Tagihan

Gambar 4.36 Desain Halaman Lihat Tagihan

Page 70: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

51

Gambar 4.37 Desain Halaman Konfirmasi

P. Halaman Pesan

Halaman pesan ini berfungsi untuk mengirimkan pesan kepada admin,

jika pelanggan memiliki pertanyaan atau hal lain kepada admin. Pada halaman ini

terdapat form untuk menyampaikan isi pesan kepada admin, kemudian masukan

kode keamanan kemudian tekan tombol kirim. Pelanggan juga dapat melihat

balasan admin yang terdapat pada kotak masuk atau dibawah form pesan.

Halaman pesan dapat dilihat pada Gambar 4.38.

Page 71: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

52

Gambar 4.38 Desain Halaman Pesan

Q. Halaman Testimoni

Halaman testimoni ini berfungsi untuk memberikan pengalaman

pelanggan menggunakan aplikasi MyShop ataupun pengalalam berbelanja pada

MyShop. Hasil testimonyi akan ditampilkan pada footer. Halaman testimoni berisi

form text yang akan digunakan pelanggan untuk memberikan pengalamannya

kemudian tekan tombol kirim. Halaman testimoni dapat dilihat pada Gambar 4.39.

Page 72: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

53

Gambar 4.39 Desain Halaman Testimoni

Page 73: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

54

BAB V

IMPLEMENTASI DAN PEMBAHASAN

5.1 Sistem yang Digunakan

Berikut ini adalah hardware dan software yang dibutuhkan untuk

menggunakan aplikasi Sistem Informasi Penjualan Kosmetik yaitu:

a. Software Pendukung

Beberapa perangkat lunak yang dibutuhkan dalam Sistem Informasi

Penjualan Kosmetik ini, yaitu:

1. Sistem Operasi Microsoft Windows 7.1

2. XAMPP versi 3.1.0

3. Sublime Text3

b. Hardware Pendukung

Beberapa perangkat keras yang dibutuhkan dalam Sistem Informasi

Penjualan Kosmetik ini, yaitu:

1. Prosesor Intel Core i3-3110M 2.40 Ghz atau lebih tinggi

2. Memori RAM 2.00 GB atau lebih tinggi

3. Hardisk 100 Gb

5.2 Cara Setup Program

Dalam tahap ini, pengguna harus memperhatikan dengan benar terhadap

instalasi perangkat lunak. Berikut langkah-langkah instalasinya:

a. Install XAMPP versi 3.1.0 pada komputer yang digunakan.

b. Install Sublime Text3 pada komputer yang digunakan.

Page 74: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

55

c. Salin folder xampp/ htdocs/myshop/.

d. Buka XAMPP, klik tombol start pada Apache dan Mysql.

e. Buka browser dan ketik localhost/phpmyadmin/.

f. Buat database baru bernama myshop, kemudian impor file db_myshop.sql pada

folder xampp/htdocs/myshop/.

g. Buka browser dan ketik localhost/myshop/.

5.3 Penjelasan Pemakaian Program

Tahap ini merupakan langkah-langkah dari pemakaian aplikasi Sistem

Informasi Penjualan Kosmetik. Adapun penjelasannya akan dijabarkan pada sub

bab dibawah ini.

5.3.1 Halaman Login Admin

Halamn login merupakan halaman awal yang muncul apabila pengguna

aplikasi ingin menjalankan aplikasi tersebut. Aplikasi sistem informasi penjualan

kosmetik ini mengharuskan pengguna untuk melakukan login dengan

memasukkan Username dan Password yang terdaftar pada database. Apabila data

yang dimasukkan benar, maka penguna akan diarahkan ke Halaman dashboard

dan dapat melakukan segala aktifitas penjualan. Halaman login digambarkan pada

Gambar 5.1.

Page 75: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

56

Gambar 5.1 Halaman Login Admin

5.3.2 Halaman Dashboard

Halaman dashboard merupakan halaman lanjutan yang terbuka setelah

pengguna melakukan proses autentifikasi login, halaman ini memiliki tampilan

yang berbeda untuk Admin dan Pelanggan.

Untuk pengguna pada Admin memiliki menu Dashboard, menu Kelola,

menu Pesanan, menu Pelanggan, menu Testimonial, menu Pesan, menu Polling,

menu Toko, menu Pengaturan, menu Keluar. Halaman Dashboard Admin

dijelaskan pada Gambar 5.2.

Page 76: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

57

Gambar 5.2 Halaman Dashboard Admin

5.3.3 Halaman Admin Kelola

Halamn untuk menu kelola hanya terdapat di halaman admin. Menu

kelola memiliki sub-menu yaitu Data Master Kategori dan Data Master Produk.

Pada halaman kategori terdapat tambah kategori yang digunakan untuk

menambah data kategori, kemudian terdapat table yang berisi informasi kategori,

didalam tabel terdapat kolom aksi yang berisi pilihan aksi edit dan hapus. Pilihan

edit digunakan untuk merubah data, untuk pilihan hapus digunakan untuk

menghapus data. Halaman kategori, tambah kategori, dan edit kategori dijelaskan

pada Gambar 5.3, Gambar 5.4, dan Gambar 5.5.

Page 77: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

58

Gambar 5.3 Halaman Kategori

Gambar 5.4 Halaman Tambah Kategori

Page 78: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

59

Gambar 5.5 Halaman Edit Kategori

Halaman Data Master Produk terdapat tambah produk yang digunakan

untuk menambah data produk, kemudian terdapat tabel yang berisi informasi

produk, didalam tabel terdapat kolom aksi yang berisi pilihan aksi edit dan hapus.

Pilihan edit digunakan untuk merubah data produk, untuk pilihan hapus

digunakan untuk menghapus data produk. Halaman produk, tambah produk, dan

edit produk dijelaskan pada Gambar 5.6, Gambar 5.7, dan Gambar 5.8.

Gambar 5.6 Halaman Produk

Page 79: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

60

Gambar 5.7 Halaman Tambah Produk

Gambar 5.8 Halaman Edit Produk

5.3.4 Halaman Admin Pesanan

Halaman Pesanan ini memiliki dua sub-menu yaitu Daftar Pesanan dan

Konfirmasi Pembayaran.

Halaman daftar pesanan terdapat daftar informasi pemesanan pelanggan

dalam bentuk tabel. Didalam tabel terdapat kolom status, konfirmasi,dan aksi.

Page 80: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

61

Kolom status berisi informasi status pembayaran, status awal adalah belum lunas,

apabila admin telah memberikan konfirmasi kepada pelanggan maka status akan

berubah menjaid lunas. Kolom konfirmasi berisi info apakah barang sudah

dikirim atau belum dikirim. Kolom aksi berisi detail order dan konfirmasi, detail

order digunakan untuk melihat detail pesanan pelanggan dan dapat dicetak,

sedangkan konfirmasi digunakan untuk melakukan konfirmasi jika pelanggan

telah melakukan upload bukti pembayaran, konfirmasi akan berubah jika sudah

diklik dan akan berubah menjadi tulisan Batal yang digunakan untuk

membatalkan konfirmasi. Halaman daftar pesanan, detail pesanan disajikan pada

Gambar 5.9 dan Gambar 5.10.

Gambar 5.9 Halaman Daftar Pesanan

Page 81: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

62

Gambar 5.10 Halaman Detil Pesanan

Halaman konfirmasi pembayaran tidak jauh berbeda dengan halaman

daftar pesanan, tetapi pada halaman ini terdapat foto bukti pembayaran dan total

tagihan. Halaman konfirmasi pembayaran disajikan pada Gambar 5.11.

Gambar 5.11 Halaman Konfirmasi Pembayaran

Page 82: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

63

5.3.5 Halaman Admin Pelanggan

Halaman Pelanggan ini berfungsi untuk menampilkan informasi data

pelanggan yang berupa tabel. Didalam tabel terdapat aksi Lihat, yanga dapat

digunakan untuk melihat informasi detil pelanggan. Halaman pelanggan dan detil

pelanggan dapat dilihat pada Gambar 5.12 dan Gambar 5.13.

Gambar 5.12 Halaman Pelanggan

Gambar 5.13 Halaman Detil Pelanggan

Page 83: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

64

5.3.6 Halaman Admin Testimonial

Halaman testimonial ini berfungsi memberikan informasi penilaian

terhadap produk ataupun penilaian kepada MyShop. Didalam halaman ini terdapat

Hapus yang digunakan untuk mengahpus penilaian atau testimony pelanggan.

halaman testimonial dapat dilihat pada Gambar 5.14.

Gambar 5.14 Halaman Testimonial

5.3.7 Halaman Admin Pesan

Halaman pesan memiliki dua sub-menu yaitu kotak masuk dan kirim

pesan. Tampilan kotak masuk berisi daftar pesan masuk yang dikirim oleh

pelanggan, didalam tampilan kotak masuk terdpat aksi balas yang digunakan

untuk membalas pesan tersebut. Halaman kotak masuk dapat dilihat pada Gambar

5.15.

Tampilan kirim pesan berisi form untuk mengirim pesan kepada

pelanggan, tujuan pesan dapat dipilih dengan memilih alamat username pelanggan

yang tersedia lalu tekan tombol kirim. Halaman kirim pesan dapat dilihat pada

Gambar 5.16.

Page 84: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

65

Gambar 5.15 Halaman Pesan Masuk

Gambar 5.16 Halaman Kirim Pesan

5.3.8 Halaman Admin Polling

Menu polling ini memiliki dua sub-menu yaitu hasil polling dan polling.

Halaman hasil poling berisi informasi hasil polling yang dilakukan oleh pelanggan

dalam bentuk presentase diagram batang. Didalam halaman ini terdapat dua

tombol yaitu tombol edit dan reset, tombol edit digunakan untuk mengubah

Page 85: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

66

pertanyaan polling, sedangkan tombil reset digunakan untuk memulai polling dari

awal. Halaman polling dapat dilihat pada Gambar 5.17.

Gambar 5.17 Halaman Hasil Polling

Halaman sub-menu polling berisi data pertanyaan dan jawaban polling

yang akan ditampilkan pada footer aplikasi untuk pelanggan, didalam tampilan

polling terdapat tombol edit yang berisi form untuk merubah pertanyaan dan

jawaban polling. Halaman polling dan edit polling dapat dilihat pada Gambar 5.18

dan Gambar 5.19.

Gambar 5.18 Halaman Polling

Page 86: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

67

Gambar 5.19 Halaman Edit Polling

5.3.9 Halaman Admin Toko

Halaman menu toko memiliki enam sub-menu yaitu: laporan penjualan,

produk terlaris, panduan belanja, kontak, social media, dan rekening.

Halaman laporan penjualan berfungsi untuk menampilkan laporan

penjualan berdasarkan bulan dan tahun. Didalam tampilan ini juga terapat tombol

aksi yang berisi detail pesanan. Halaman laporan penjualan disajikan pada

Gambar 5.20.

Page 87: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

68

Gambar 5.20 Halaman Laporan Penjualan

Halaman produk terlaris berfungsi untuk menampilkan daftar produk

yang terbanyak dijual berdasarkan pembelian pelanggan. Halaman produk terlaris

disajikan pada Gambar 5.21.

Gambar 5.21 Halaman Produk Terlaris

Page 88: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

69

Halaman panduan belanja menampilkan text dan beberapa tombol fungsi

untuk mengatur gaya tulisan. Didalam tampilan ini juga terapat tombol batal dan

simpan. Halaman panduan belanja disajikan pada Gambar 5.22.

Gambar 5.22 Halaman Panduan Belanja

Halaman kontak berisi form untuk menyimpan data kontak person milik

MyShop, didalam tampilan ini juga terdapat tombil batal dan edit. Halaman

kontak disajikan pada Gambar 5.23.

Page 89: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

70

Gambar 5.23 Halaman Kontak

Halaman social media berisi form untuk menyimpan dan merubah

informasi sosial media yang digunakan oleh MyShop, didalam tampilan ini juga

terdapat tombil batal dan edit. Halaman laporan penjualan disajikan pada Gambar

5.24.

Gambar 5.24 Halaman Sosial Media

Page 90: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

71

Halaman rekening menampilkan informasi akun rekening bank milik

MyShop, didalam tampilan ini juga terdapat aksi edit dan hapus, didalam tampilan

edit rekening juga terdapat tombol batal dan simpan. Halaman rekening dan edit

rekening disajikan pada Gambar 5.25 dan Gambar 5.26.

Gambar 5.25 Halaman Rekening

Gambar 5.26 Halaman Edit Rekening

Page 91: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

72

5.3.10 Halaman Admin Pengaturan

Menu pengaturan memiliki dua sub-menu yaitu shipping dan slider.

Halaman shipping terdapat informasi ongkos kirim berdasarkan area yang

terdaftar pada MyShop, didalam halaman ini terdapat aksi edit dan hapus.

Halaman shipping dan edit shipping disajikan pada Gambar 5.27 dan Gambar

5.28.

Gambar 5.27 Halaman Shipping

Gambar 5.28 Halaman Edit Shipping

Page 92: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

73

Halaman silder ini berfungsi untuk mengelola daftar gambar yang akan

ditampilkan pada menu dashboard pelanggan. Didalam halaman ini terdpat

beberapa form yang diperlukan dan upload gambar, juga terdapat tombol batal

dan simpan. Halaman slider disajikan pada Gambar 5.29.

Gambar 5.29 Halaman Edit Rekening

5.3.11 Halaman Dashboard Customer

Halaman Dashboard Customer ada dua tampilan yaitu tampilan sebelum

login dan setelah login. Secara keseluruhan tubuh aplikasi masih sama, hanya saja

berbeda fitur didalamnya. Jika belum login tetapi ingin melakukan transaksi,

maka aplikasi akan meminta pengguna untuk login terlebih dahulu. Setelah

pengguna melakukan login maka akan terdapat menu home (dashboard), panduan

belanja, akun, tagihan, pesan, testimoni, kategori, keranjang belanja, keluar dan

footer. Halaman dashboard sebelum dan setelah login disajikan pada Gambar

5.30 dan Gambar 5.31.

Page 93: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

74

Gambar 5.30 Halaman Dashboar Sebelum Login

Gambar 5.31 Halaman Dashboard Setelah Login

5.3.12 Halaman Login Customer

Halaman login customer ini digunakan untuk mendapatkan hak akses

pada aplikasi terutama untuk melakukan pemesanan barang. Jika pelanggan

sebelumnya telah memiliki akun yang terdaftar, maka pengguna bisa langsung

melakukan login dengan memasukan username, password, dan kode keamanan

Page 94: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

75

lalu tekan tombol login. Jika pelanggan belum memiliki akun, pelanggan harus

mendaftar terlebih dahulu dengan menekan menu daftar, pelanggan harus mengisi

beberapa form pendaftaran yang tertera pada tampilan daftar, setelah semua form

terisi pelanggan dapat menekan tombol daftar, kemudian pelanggan dapat

melakukan login sesuai dengan username dan password yang telah terdaftar.

Halaman login dan daftar disajikan pada Gambar 5.32 dan Gambar 5.33.

Gambar 5.32 Halaman Login

Gambar 5.33 Halaman Daftar

Page 95: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

76

5.3.13 Halaman Panduan belanja

Halaman paduan belanja ini menampilkan informasi seputar panduan

berbelanja di MyShop bagi yang belum mengetahui cara pemesanan barang.

Halaman panduan belanja digambarkan pada Gambar 5.34.

Gambar 5.34 Halaman Panduan Belanja

5.3.14 Halaman Akun

Halaman akun ini menampilkan informasi akun milik pelanggan tersebut,

pelanggan juga dapat memperbarui informasi akun miliknya sendiri dengan

menekan tombol Update. Tampilan update akan diarahkan pada form yang berisi

informasi akun pelanggan dan dapat di perbarui, kemudain tekan tombol update

jika ingin melanjutkan, tekan tombol batal jika pelanggan ingin membatalkan

update. Halaman akun digambarkan pada Gambar 5.35 dan update akun

digambarkan pada Gambar 5.36.

Page 96: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

77

Gambar 5.35 Halaman Akun

Gambar 5.36 Halaman Update

5.3.15 Halaman Keranjang Belanja

Halaman kernjang belanja ini berfungsi menyimpan produk yang dipilih

pelanggan namun belum ingin melakukan transaksi. Halaman keranjang belanja

terdapat informasi produk, didalam tabel terdapat kolom jumlah barang yang

dipesan dengan mengisi manual kemudian tekan tombol update untuk

Page 97: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

78

memperbarui jumlah pesanan, maka jumlah harga akan otomatis berubah sesuai

dengan update yang dilakukan. pelanggan juga bisa menghapus pesanan jika tidak

ingin membeli produk tersebut dengan menekan tanda silang disebelah tombol

update. Kemudian pelanggan dapat melakukan transaksi selanjutnya. Setelah

produk yang dipesan telah sesuai, pelanggan bisa memilih melanjutkan belanja

dengan menekan tombol lanjut belanja. Jika pelanggan memilih lanjut belanja,

maka pelanggan akan diarahkan pada tampilan home. Jika pelanggan ingin

menyelesaikan pemesanan, pelanggan dapat menekan tombol checkout. Halaman

Keranjang Belanja dapat dilihat pada Gambar 5.37.

Gambar 5.37 Halaman Keranjang Belanja

Halaman checkout ini menampilkan alamat tujuan, biaya kirim dan total

biaya yang harus dibayar oleh pelanggan. Pelanggan dapat merubah alamat sesuai

tujuan pengiriman dengan menekan tombol ubah alamat, maka pelanggan akan

diarahkan pada edit akun. Jika pelanggan ingin merubah pesanan, pelanggan dapat

menekan tombol ubah order, maka pelanggan akan diarahkan pada keranjang

Page 98: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

79

belanja. Jika pelanggan telah selesai memesan dan memastikan informasi alamat

dan kontak telah benar, maka plenggan dapat menekan tombol checkout untuk

melanjutkan transaksi, pelanggan akan diarahkan pada tampilan tagihan. Halaman

Checkout dapat dilihat pada Gambar 5.38.

Gambar 5.38 Halaman Checkout

5.3.16 Halaman Tagihan

Halaman tagihan ini berfungsi menyimpan daftar pesanan pelanggan

yang belum dan sudah menyelesaikan pembayaran. Informasi yang tersimpan

dalam tagihan berupa tabel dengan status belum lunas, didalam tagihan terdapat

dua aksi yaitu lihat tagihan dan konfirmasi. Pelanggan dapat melihat total tagihan

lagi jika ingin memastikan total tagihan dengan menekan lihat tagihan., sedangkan

pelanggan bisa langsung menekan konfirmasi jika telah melakukan pembayaran

dan ingin mengunggah bukti pembayaran. Status tagihan akan berubah menjadi

proses jika pelanggan telah mengunggah bukti pembayaran, kemudian status akan

berubah menjadi lunas jika admin telah memberikan konfirmasi pada pemesanan

Page 99: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

80

tersebut. Halaman tagihan, lihat tagihan, dan konfirmasi dapat dilihat pada

Gambar 5.39, Gambar 5.40, Gambar 5.41.

Gambar 5.39 Halaman Tagihan

Gambar 5.40 Halaman Lihat Tagihan

Page 100: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

81

Gambar 5.41 Halaman Konfirmasi Pembayaran

5.3.17 Halaman Pesan

Halaman pesan ini berfungsi untuk mengirimkan pesan kepada admin,

jika pelanggan memiliki pertanyaan atau hal lain kepada admin. Pada halaman ini

terdapat form untuk menyampaikan isi pesan kepada admin, kemudian masukan

kode keamanan kemudian tekan tombol kirim. Pelanggan juga dapat melihat

balasan admin yang terdapat pada kotak masuk atau dibawah form pesan.

Halaman pesan dapat dilihat pada Gambar 5.42.

Page 101: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

82

Gambar 5.42 Halaman Pesan

5.3.18 Halaman Testimoni

Halaman testimoni ini berfungsi untuk memberikan pengalaman

pelanggan menggunakan aplikasi MyShop ataupun pengalalam berbelanja pada

MyShop. Hasil testimonyi akan ditampilkan pada footer. Halaman testimoni berisi

form text yang akan digunakan pelanggan untuk memberikan pengalamannya

kemudian tekan tombol kirim. Halaman testimoni dapat dilihat pada Gambar 5.43.

Page 102: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

83

Gambar 5.43 Halaman Testimoni

5.3.19 Tampilan Footer

Tampilan footer terletak pada tampilang pelanggan paling bawah. Pada

tampilan footer menampilkan hasil testimoni, penilaian polling, dan sosial media

yang digunakan oleh MyShop. Tampilan footer dapat dilihat pada Gambar 5.44.

Gambar 5.44 Tampilan Footer

Page 103: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

84

BAB VI

PENUTUP

6.1 Kesimpulan

Berdasarkan hasil Rancang Bangun Aplikasi Penjualan Kosmetik Paada

MyShop dapat disimpulkan sebagai berikut:

a. Aplikasi yang telah dibangun dapat melakukan transaksi secara online.

b. Aplikasi yang telah dibangun dapat melakukan proses pencatatan data barang,

laporan penjualan, dan penyimpanan data penjualan.

c. Aplikasi yang telah dibangun dapat menyimpan data pelanggan.

6.2 Saran

Saran pengembangan sistem penjualan kosmetik yaitu dengan

penamabahan fitur rating, cek otomatis, dan tracking area. Fungsi fitur rating

tersebut adalah untuk mengetahui penilaian dari customer pada setiap produk.

Fungsi cek otomatis adalah untuk memudahkan pelanggan, agar tidak perlu

melakukan upload bukti pembayaran karena sudah terdeteksi otomatis oleh

aplikasi. Fungsi tracking area adalah untuk mengetahiu keberadaan barang yang

telah dikirimkan.

Page 104: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

DAFTAR PUSTAKA

Adies. (2019). Pengertian sistem, informasi, berbasis web. Diambil kembali dari

phpdanmysql:https://phpdanmysql.com/pengertian-sistem-informasi-

berbasis-website/

Aisha, M. (2019). Pengertian Penjualan : Tujuan, Jenis dan Faktor Pengaruh.

Diambil kembali dari jagad.id: https://jagad.id/pengertian-penjualan-

fungsi-macam-dan-faktor-pengaruh/

Bassil, Y. (2012). A Simulation Model for the Waterfall Software Development

Life Cycle. Diambil kembali dari ResearchGate: https://www .researchgate

.net/publication/225081395_A_Simulation_Model_for_the_Waterfall_Sof

tware_Development_Life_Cycle

Fatimah, N. (2013). Penjelasan E-Commerce. Diambil kembali dari mylibrary

science.wodpress: https://mylibraryscience.wordpress.com/hubungi-kami/

Fatin, N. (2017). Pengertian Penjualan Serta Jenis Dan Tujuannya. Diambil

kembali dari seputar pengertian.blogspot: http:// seputarpengertian.

blogspot.com/2017/06/pengertian-penjualan-serta-jenis-dan-

tujuannya.html

Hartono, J. (2009). Sistem Teknologi Informasi: Pendekatan Terintegrasi: Konsep

Dasar, Teknologi, Aplikasi, Pengembangan, dan Pengelolaan. Andi.

Hermawan. (2019). Pengertian Database Beserta Fungsi dan Jenis-Jenis

Database yang Paling Umum Digunakan. Diambil kembali dari

nesabamedia: https://www.nesabamedia.com/pengertian-database-dan-

fungsinya/

Kadir, A. (2010). Mudah Mempelajari Database. Andi.

Krismaji. (2015). Sistem Informasi Akuntansi. ykpn.

Marshall, S. (2014). Sistem Informasi Akuntansi: Accounting Information

Systems. Salemba empat.

Mulyani, S. (2017). Metode Analisis dan Perancangan Sistem. Abdi Sistematika.

Mulyanto, A. (2009). sistem informasi konsep dan aplikasi. pustaka pelajar.

Ngabito, Y. A. (2019). Definisi dan pengertian internet. Diambil kembali dari

scribd: https://www.scribd.com/doc/142145086/Definisi-Dan-Pengertian-

Internet-Menurut-Para-Ahli

Page 105: PROYEK AKHIR DIII SISTEM INFORMASI FITRIYANI FAKULTAS ...repository.dinamika.ac.id/id/eprint/3754/1/16390100010-2019-STIKO… · Nama : FITRIYANI. NIM : 1. 6390100010 Program Studi

Sora. (2014). Pengertian Internet Dan Intranet Lengkap Dengan Fungsinya.

Diambil kembali dari pengertianku: http://www.pengertianku.net

/2014/09/pengertian-internet-dan-intranet-lengkap-dengan-fungsinya.html

Sora. (2017). Pengertian Database Dan Keuntungannya Yang Didapat. Diambil

kembali dari pengertianku: http://www. pengertianku.net/2017/04/

pengertian-database-dan-keuntungannya.html