PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO...

82
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO TUGAS AKHIR Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Ilmu Komputer Disusun Oleh : ERLINE VITRI ASTIKA NIM. M3208003 PROGRAM DIPLOMA III ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2011

Transcript of PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO...

Page 1: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user i

PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE

DI TOKO ERMA AHMAD BATIK SOLO

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Ilmu Komputer

Disusun Oleh :

ERLINE VITRI ASTIKA

NIM. M3208003

PROGRAM DIPLOMA III ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

2011

Page 2: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user ii

HALAMAN PERSETUJUAN

PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE

DI TOKO ERMA AHMAD BATIK SOLO

Disusun Oleh

ERLINE VITRI ASTIKA

NIM. M3208003

Tugas Akhir ini telah disetujui untuk dipertahankan

Di hadapan dewan penguji

Pada tanggal 13 Juli 2011

Pembimbing Utama

WISNU WIDIARTO, S.SI, M.T

NIP.19700601 200801 1 009

Page 3: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user iii

Page 4: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user iv

ABSTRACT

Erline Vitri Astika, 2011. The Development of Online SaleInformation System at Solo Erma Ahmad Batik Shop. DIII ComputerScience Program, Informatics Engineering Faculty of Mathematic andNatural Sciences, Sebelas Maret University.

Internet with a variety of application is basically a media used forcommunication process efficiency. Through the internet, sale business can bedone online. Some of them include sale through facebook and website. The usersjust need to access the internet and look for the needed site. Such the site willdisplay a variety of products offered and how to make sell-buy transaction. Theobjective of this final project is to develop an online sale information system thatcan give convenience in transaction and information to the consumer for buyingthe goods using internet media.

The research methods used in this Final Project were observation andlibrary study. This program was developed using PHP and MySQL database. Thedisplay design was built using Macromedia Dreamweaver.

The result of research is online sale information system at Solo ErmaAhmad Batik Shop.

Keywords: Erma Ahmad Batik, PHP, online sale.

Page 5: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user v

INTISARI

Erline Vitri Astika, 2011. Pembuatan Sistem Informasi PenjualanOnline di Toko Erma Ahmad Batik Solo. Program DIII Ilmu Komputer,Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas SebelasMaret Surakarta.

Internet dengan berbagai aplikasi pada dasarnya adalah media yangdigunakan untuk efisiensi proses komunikasi. Dengan melalui internet, dapatdilakukan bisnis penjualan secara online. Beberapa diantaranya seperti penjualanmelalui facebook maupun website. Para user hanya perlu mengakses internet danmencari situs yang dibutuhkan. Situs tersebut akan menampilkan berbagai produkyang mereka tawarkan dan bagaimana cara melakukan transaksi jual beli.

Tujuan dari Tugas Akhir ini adalah membuat sistem informasi penjualanonline yang dapat memberikan kemudahan bertransaksi maupun informasi kepadakonsumen untuk pembelian barang dengan menggunakan media internet.

Metode penelitian yang digunakan dalam penyusunan Tugas Akhir iniadalah observasi dan studi pustaka. Program ini dikembangkan menggunakanPHP dan database MySQL. Desain tampilan dibangun menggunakanMacromedia Dreamweaver.

Hasil dari penelitian ini adalah sistem informasi penjualan online di tokoErma Ahmad Batik Solo.

Kata Kunci : Erma Ahmad Batik, PHP, penjualan online

Page 6: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user vi

MOTTO

Kekuatan terbesar kita bukanlah karena kita

Tidak pernah jatuh, melainkan pada kebangkitan di setiap kali kita

jatuh.

Tidak ada yang lebih tinggi dari kenikmatan melampaui kesulitan, dari

satu sukses ke sukses lainnya, membangun keinginan-keinginan baru dan

melihatnya terwujud.

(Samuel Johnson)

Page 7: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user vii

PERSEMBAHAN

Tugas Akhir ini Penulis Persembahkan Kepada :

Allah SWT.

Bapak, dan Ibu yang selalu mendukung, memberikan semangat

dan doa selama ini sehingga tugas akhir ini dapat

terselesaikan.

Mbk2ku mbk ita dan mbk erma yang punya (Erma Ahmad

Batik Solo).

Mbak hari dan mas aji yang gak pernah setengah-setengah

membagikan ilmunya _

Semua teman-teman Manajemen Informatika 2008.

Untuk seluruh sahabatku verdia, nopek, bayu, ike, dini,

yani,ipul dan lainnya yang tidak dapat disebut 1 per 1.

Special someone *Andi si meong lebuuussss :-D

Tempatku mengerjakan TA *Kos Masindo.

Page 8: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user viii

KATA PENGANTAR

Assalamu’alaikum warahmatullahi wa barakatuh.

Syukur Alhamdulillah, penulis panjatkan kepada Allah SWT yang telah

melimpahkan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan

penyusunan Laporan Tugas Akhir ini dengan judul “Pembuatan Sistem

Informasi Penjualan Online di Toko Erma Ahmad Batik Solo”. Shalawat dan

salam selalu tercurah kepada Nabi Besar Muhammad SAW, beserta keluarga,

sahabat dan orang-orang yang senantiasa selalu istiqomah di jalan kebenaran-Nya.

Laporan Tugas Akhir ini disusun untuk memenuhi persyaratan kelulusan

Diploma III Ilmu Komputer Teknik Informatika Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Penulis menyadari bahwa dalam penyusunan laporan Tugas Akhir tidak

lepas dari berbagai pihak yang telah banyak membantu. Dalam kesempatan ini

penulis mengucapkan terima kasih kepada :

1. Ir. Ari Handono Ramelan, M.Sc, Ph.D selaku dekan Fakultas Matematika dan

Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

2. Y.S. Palgunadi M.Sc selaku Ketua Program Diploma III Ilmu Komputer

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret

Surakarta.

3. Wisnu Widiarto, S.Si, M.T selaku dosen pembimbing Tugas Akhir yang telah

memberikan bimbingan selama mengerjakan Tugas Akhir dan penyelesaian

Laporan Tugas Akhir.

4. Erma Ida Yanti yang telah memberikan kesempatan dalam membangun

aplikasi penjualan online Erma Ahmad batik Solo.

5. Kedua orang tua dan keluarga yang senantiasa memberi semangat dan

mendoakan penulis.

Page 9: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user ix

6. Seluruh sahabat yang telah banyak membantu penulis dalam menyelesaikan

laporan ini.

Semoga Allah SWT membalas atas semua kebaikannya. Penulis berharap

laporan Tugas Akhir ini dapat memberikan manfaat bagi pihak yang terkait

maupun bagi khalayak umum yang ingin mengetahui perancangan dan

pembangunan sistem penjualan batik online.

Akhir kata penulis mengucapkan terima kasih dan mohon untuk saran dan

kritik yang bersifat membangun.

Wassalamu’alaikum warahmatullahi wa barakatuh.

Surakarta, 25 Februari 2011

Penulis

Page 10: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user x

DAFTAR ISI

Halaman

HALAMAN JUDUL ................................................................................ i

HALAMAN PERSETUJUAN.................................................................. ii

HALAMAN PENGESAHAN................................................................... iii

ABSTRACT............................................................................................. iv

INTISARI................................................................................................. v

MOTTO ................................................................................................... vi

PERSEMBAHAN .................................................................................... vii

KATA PENGANTAR .............................................................................. viii

DAFTAR ISI ............................................................................................ x

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

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

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

A. Latar Belakang Masalah.......................................................... 1

B. Rumusan Masalah ................................................................... 2

C. Batasan Masalah ..................................................................... 2

D. Tujuan Penelitian .................................................................... 2

E. Manfaat Penelitian................................................................... 3

F. Metodologi Penelitian.............................................................. 3

G. Sistematika Penulisan ............................................................. 4

Page 11: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xi

BAB II. LANDASAN TEORI .................................................................. 5

A. Pengenalan Sistem .................................................................. 5

1. Diagram Konteks................................................................. 5

2. Data Flow Diagram (DFD) ................................................. 5

3. Diagram Entity-Relationship (Diagram E-R) ....................... 6

B. Pengenalan Database .............................................................. 7

C. Pengenalan MySQL ................................................................ 8

D. Pengenalan PHP...................................................................... 9

E. Pengenalan PhpMyAdmin ....................................................... 9

F. Pengenalan XAMPP ................................................................ 9

G. Pengenalan Dreamweaver 8 .................................................... 10

H. Pengenalan E-commerce (Electronic Commerce) .................... 10

I. Pengenalan Internet ................................................................. 11

J. Pengenalan WWW (World Wide Web) .................................... 12

K. Pengenalan CSS (Cascading Style Sheet) ................................ 13

BAB III. DESAIN DAN PERANCANGAN SISTEM .............................. 14

A. Analisis Kebutuhan Sistem ..................................................... 14

1. Perangkat Lunak.................................................................. 14

2. Perangkat Keras................................................................... 14

B. Perancangan Sistem ................................................................ 14

1. Diagram Konteks................................................................. 15

Page 12: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xii

2. Data Flow Diagram (DFD) ................................................. 16

3. Spesifikasi Proses (Process Specification) ........................... 20

4. Flowchart ............................................................................ 22

C. PERANCANGAN DATABASE ............................................. 23

1. Entity Relationship Diagram (ERD) .................................... 23

2. Skema Diagram................................................................... 24

3. Struktur Tabel Data ............................................................. 24

D. DESAIN TAMPILAN SISTEM.............................................. 30

1. Desain Layout Halaman Beranda ......................................... 30

2. Desain Layout Halaman Buku Tamu.................................... 33

3. Desain Layout Halaman Daftar Barang................................ 34

4. Desain Layout Halaman Login Admin ................................. 35

5. Desain Layout Halaman Utama Admin................................ 35

BAB IV. IMPLEMENTASI DAN ANALISA .......................................... 36

A. IMPLEMENTASI SISTEM .................................................... 36

1. Halaman User...................................................................... 36

a. Form Tampilan Halaman Utama (Beranda) ..................... 36

b. Form Tampilan Halaman Buku Tamu ............................. 37

c. Form Tampilan Halaman Berita....................................... 38

d. Form Tampilan Halaman Registrasi ................................ 39

e. Form Tampilan Halaman Login Pelanggan ...................... 41

Page 13: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xiii

f. Form Tampilan Halaman Sub Kategori Barang................ 41

g. Form Tampilan Halaman Daftar Barang.......................... 42

h. Form Tampilan Halaman Pemesanan .............................. 43

i. Form Tampilan Halaman Pelanggan Login....................... 48

2. Halaman Admin .................................................................. 51

a. Form Tampilan Halaman Login Admin ........................... 51

b. Form Tampilan Halaman Utama Admin.......................... 51

c. Form Tampilan Menu File............................................... 53

d. Form Tampilan Menu Pemesanan ................................... 54

e. Form Tampilan Menu Manajemen................................... 57

f. Form Tampilan Halaman Laporan.................................... 59

g. Form Tampilan Cetak Laporan........................................ 60

B. EVALUASI PERANGKAT LUNAK...................................... 61

BAB V. PENUTUP .................................................................................. 62

A. Kesimpulan............................................................................. 62

B. Saran....................................................................................... 62

DAFTAR PUSTAKA ............................................................................... 64

LAMPIRAN ............................................................................................. 65

Page 14: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xiv

DAFTAR TABEL

Nomor Halaman

1. PSPEC Pemesanan........................................................................ 20

2. PSPEC Manajemen Pelanggan ...................................................... 21

3. PSPEC Manajemen Pemesanan Barang......................................... 21

4. Admin........................................................................................... 25

5. Barang .......................................................................................... 25

6. Berita ............................................................................................ 26

7. Bukutamu ..................................................................................... 26

8. Kantong ........................................................................................ 27

9. Kategori ........................................................................................ 27

10. Pelanggan ..................................................................................... 28

11. Pemesanan .................................................................................... 28

12. Pesan_detail .................................................................................. 29

13. Propinsi......................................................................................... 29

14. Sub_kategori ................................................................................. 30

15. Polling .......................................................................................... 30

Page 15: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xv

DAFTAR GAMBAR

Nomor Halaman

1. Diagram Konteks .......................................................................... 15

2. DFD Level 0.................................................................................. 16

3. DFD Level 1 Proses Pemesanan .................................................... 18

4. DFD Level 1 Proses Manajemen Pelanggan................................... 19

5. DFD Level 1 Proses Manajemen Pemesanan Barang ..................... 20

6. Flowchart ...................................................................................... 22

7. ERD (Entity Relationship Diagram).............................................. 23

8. Skema Diagram............................................................................. 24

9. Desain Layout Halaman Beranda................................................... 32

10. Desain Layout Halaman Buku Tamu ............................................. 33

11. Desain Layout Halaman Daftar Barang.......................................... 34

12. Desain Layout Halaman Login Admin........................................... 35

13. Desain Layout Halaman Utama Admin.......................................... 35

14. Tampilan Halaman Beranda .......................................................... 37

15. Tampilan Halaman Buku Tamu..................................................... 38

16. Tampilan Halaman Kesalahan Input Buku Tamu........................... 38

17. Tampilan Halaman Berita.............................................................. 39

18. Tampilan Halaman Berita Detail ................................................... 39

Page 16: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xvi

19. Tampilan Halaman Registrasi........................................................ 40

20. Tampilan Halaman Kesalahan Registrasi....................................... 40

21. Tampilan Halaman Login Pelanggan ............................................. 41

22. Tampilan Halaman Kesalahan Login Pelanggan ............................ 41

23. Tampilan Halaman Sub Kategori Barang ...................................... 42

24. Tampilan Halaman Daftar Barang ................................................. 42

25. Tampilan Halaman Status Belum Login ........................................ 43

26. Tampilan Halaman Status Login.................................................... 44

27. Tampilan Halaman Kantong Belanja ............................................. 45

28. Tampilan Halaman Konfirmasi Pembayaran ................................. 46

29. Tampilan Halaman Konfirmasi Transaksi...................................... 47

30. Tampilan Halaman Transaksi Sukses ............................................ 48

31. Tampilan Halaman Ubah Data Pelanggan ..................................... 49

32. Tampilan Halaman Kantong Belanja ............................................. 49

33. Tampilan Halaman Daftar Transaksi Terakhir ............................... 50

34. Tampilan Halaman Daftar Transaksi Detail ................................... 50

35. Tampilan Halaman Login Admin .................................................. 51

36. Tampilan Halaman Utama Admin ................................................. 52

37. Tampilan Halaman Tambah Admin............................................... 53

38. Tampilan Halaman Kesalahan Tambah Admin.............................. 53

39. Tampilan Halaman Edit Admin..................................................... 54

Page 17: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xvii

40. Tampilan Halaman Ubah Data Admin........................................... 54

41. Tampilan Halaman Pemesanan/Nomor.......................................... 55

42. Tampilan Halaman Pemesanan/Nomor Detail ............................... 55

43. Tampilan Halaman Ubah Status Transaksi .................................... 56

44. Tampilan Halaman Pemesanan/Periode......................................... 56

45. Tampilan Halaman Ubah Status Transaksi .................................... 56

46. Tampilan Halaman Manajemen Tambah Barang ........................... 57

47. Tampilan Halaman Manajemen Edit Barang ................................. 58

48. Tampilan Halaman Manajemen Edit Barang Detail ....................... 58

49. Tampilan Halaman Laporan Semua Barang................................... 59

50. Tampilan Halaman Laporan Data Barang/Sub Kategori ................ 59

51. Tampilan Halaman Laporan Data Barang/Sub Kategori Detail ...... 60

52. Tampilan Halaman Cetak Laporan Sub Kategori ........................... 60

53. Tampilan Halaman Cetak Laporan Semua Pelanggan.................... 61

Page 18: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user xviii

DAFTAR LAMPIRAN

Script Halaman User Web Penjualan Toko Erma Ahmad Batik

Page 19: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user 1

BAB I

PENDAHULUAN

A. LATAR BELAKANG MASALAH

Bisnis penjualan barang secara konvensional biasanya dilakukan hanya

melalui outlet yang tersedia. Sekarang terdapat metode baru dan mulai

berkembang pesat, yaitu dengan cara online. Melalui cara ini user tidak perlu lagi

pergi ke berbagai toko di berbagai daerah hanya untuk mendapatkan barang yang

dicarinya. User hanya perlu mengakses internet dan mencari situs toko online.

Situs-situs tersebut akan menampilkan berbagai barang yang ditawarkan oleh

perusahaan. Bisnis tersebut dapat meraih keuntungan lebih banyak dibandingkan

dengan penjualan melalui toko saja, karena dapat memberikan efisiensi dan

kenyamanan user dalam melakukan pemesanan barang.

Toko Erma ahmad batik adalah toko yang menjual berbagai macam kain

batik, dengan wujud berupa bahan mentah. Penjualan batik ini dilakukan melalui

toko dan melalui facebook. Sistem penjualan yang hanya melalui toko dirasa

kurang efektif untuk dapat menarik banyak pelanggan, karena setiap pelanggan

yang ingin melihat barang dagangannya harus mengunjungi ke tempat toko itu

berada, terlebih lagi jika toko tersebut jauh untuk dijangkau semisal terdapat di

luar kota atau provinsi. Jika melalui facebook, pelanggan harus menjadi teman

dari pemilik toko tersebut untuk dapat melakukan pemesanan barang dan harus

menunggu pemilik toko mengkonfirmasi permintaan untuk menjadi teman. Cara

tersebut dapat mengurangi efisiensi pelanggan untuk segera melakukan

pembelian.

Berdasarkan uraian di atas, maka penulis tertarik untuk membuat situs

bisnis secara online di toko “Erma Ahmad Batik solo”. Diharapkan dengan

adanya website tersebut dapat lebih mudah dan cepat dalam melakukan transaksi

barang.

Page 20: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

2

Keuntungan jika melalui website, user dapat langsung memesan barang yang

diinginkan setelah berhasil melakukan registrasi dan login pelanggan tanpa harus

menunggu konfirmasi dari pemilik toko. Jadi pemilik toko tidak perlu bersusah

payah untuk selalu berhadapan dengan komputer setiap hari demi melayani setiap

user yang ingin melakukan pemesanan melalui facebook.

B. RUMUSAN MASALAH

Berdasarkan latar belakang masalah di atas, maka dapat dibuat rumusan

masalah yaitu : “Bagaimana membuat sebuah aplikasi toko online berbasis PHP

dan MySQL pada toko Erma Ahmad Batik yang dapat membantu dalam

pemasaran dan penjualan produk secara online.”

C. BATASAN MASALAH

Batasan masalah pada pembuatan aplikasi toko online ini adalah :

1. Sistem hanya membahas transaksi yang terjadi dalam negeri saja yaitu

Indonesia.

2. Sistem pembayaran barang dilakukan dengan transfer antar rekening yang

kemudian akan dikonfirmasi oleh admin baik melalui sms maupun email,

setelah pelanggan melakukan konfirmasi pembayaran.

3. Sistem tidak membahas mengenai stok barang, dikarenakan barang yang

terdapat dalam daftar barang merupakan barang indent.

D. TUJUAN PENELITIAN

Tujuan yang ingin dicapai pada masalah yang dibahas adalah membuat

suatu aplikasi toko online yang dapat memberikan kemudahan bertransaksi

Page 21: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

3

maupun informasi kepada konsumen untuk pembelian barang dengan

menggunakan media internet.

E. MANFAAT PENELITIAN

Manfaat yang dapat diperoleh dari penulisan ini adalah sebagai berikut :

1. Bagi pemilik toko Erma Ahmad Batik

a. Dapat dijadikan masukan guna kemajuan penjualan dan pemasaran

produk.

b. Diharapkan dapat mempermudah proses transaksi penjualan batik dengan

menggunakan media internet, meningkatkan mutu pelayanan dan dapat

memberikan informasi secara tepat dan cepat mengenai toko ini.

2. Bagi Pelanggan

a. Memberikan kemudahan bagi masyarakat untuk mendapatkan informasi

yang dicarinya.

b. Terciptanya kenyamanan dan efisiensi bagi masyarakat untuk melakukan

pemesanan barang.

F. METODOLOGI PENELITIAN

Metode yang digunakan dalam pembuatan aplikasi penjualan online

adalah sebagai berikut :

1. Observasi Metode ini dilakukan dengan cara pengamatan langsung tentang

alur sistem penjualan yang dimiliki oleh toko Erma Ahmad Batik.

2. Studi Pustaka Studi pustaka yang dilakukan oleh penulis yaitu dengan cara

pengumpulan data melalui internet dan mencari buku-buku referensi yang

berhubungan dengan tema dalam penyusunan tugas akhir sebagai acuan, serta

sebagai bahan pembanding

Page 22: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

4

1. SISTEMATIKA PENULISAN

Sistematika penulisan dalam tugas akhir ini adalah sebagai berikut :

1. BAB I : PENDAHULUAN

Pada bab ini terdapat tujuh sub bab yang menjelaskan tentang latar

belakang masalah, rumusan masalah, batasan masalah, tujuan penelitian, manfaat

penelitian, metodologi penelitian, dan sistematika penulisan yang penulis gunakan

dalam penyusunan tugas akhir.

2. BAB II : LANDASAN TEORI

Pada bab ini menjelaskan tentang teori yang mendasari tugas akhir ini,

seperti Pengenalan Sistem, Database, MySQL, PHP, PhpMyAdmin, XAMPP,

Dreamweaver 8, E-commerce (Electronic Commerce), Internet, WWW (World

Wide Web), dan CSS (Cascading Style Sheet).

3. BAB III : DESAIN DAN PERANCANGAN

Pada bab ini berisikan analisis kebutuhan sistem, perancangan sistem

dengan menampilkan Diagram Konteks, Data Flow Diagram (DFD), Spesifikasi

Proses, Flowchart, serta perancangan database dengan menampilkan Entity

Relationship Diagram (ERD), Skema Diagram, struktur tabel data, dan desain

tampilan sistem yang digunakan dalam pembuatan aplikasi toko online.

4. BAB IV : IMPLEMENTASI DAN ANALISA

Pada bab ini berisikan implementasi sistem pada halaman user dan admin,

serta kelebihan dan kelemahan perangkat lunak.

5. BAB V : PENUTUP

Bab ini berisi tentang kesimpulan yang diambil dari pembahasan aplikasi

toko online dan saran untuk pengembangan program aplikasi.

Page 23: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user 5

BAB II

LANDASAN TEORI

A. Pengenalan Sistem

Sistem merupakan kumpulan elemen-elemen yang saling terkait dan

bekerja sama untuk melakukan proses masukan (input) yang ditujukan kepada

sistem tersebut dan mengolah masukan tersebut sampai menghasilkan keluaran

(output) yang diinginkan.

Sistem informasi adalah kumpulan dari perangkat keras dan perangkat

lunak komputer serta perangkat manusia yang akan mengolah data menggunakan

perangkat keras dan perangkat lunak tersebut.

Analisis sistem memiliki beberapa pengertian, salah satunya yaitu

seseorang yang memiliki kemampuan untuk merencanakan dan menerapkan

rancangan sistemnya sesuai dengan permasalahan yang terjadi. Rancangan sistem

dapat digambarkan dengan diagram alir data yang terdiri dari (Kristanto, 2003) :

1. Diagram konteks

Diagram konteks adalah suatu diagram alir yang tingkat tinggi yang

menggambarkan seluruh jaringan, masukan dan keluaran. Sistem yang

dimaksud adalah untuk menggambarkan sistem yang sedang berjalan.

Diagram ini merupakan gambaran umum sistem. Secara uraian dapat

dikatakan bahwa diagram konteks itu berisi siapa saja yang memberikan data

(inputan) ke sistem serta kepada siapa data informasi yang harus dihasilkan

sistem (Edukasi, 2009).

2. Data Flow Diagram (DFD)

DFD adalah suatu model logika data atau proses yang dibuat untuk

menggambarkan darimana asal data dan kemana tujuan data yang keluar dari

Page 24: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

6

sistem, dimana data disimpan, proses apa yang menghasilkan data tersebut dan

interaksi antara data yang tersimpan dan proses yang dikenakan pada data

tersebut (Kristanto, 2003).

3. Diagram Entity-Relationship (Diagram E-R)

Model Entity-Relationship yang berisi komponen-komponen

Himpunan Entitas dan Himpunan Relasi yang masing-masing dilengkapi

dengan atribut-atribut yang merepresentasikan seluruh fakta dari “dunia

nyata” yang kita tinjau, dapat digambarkan dengan menggunakan Diagram

Entity Relationship (Diagram E-R). Notasi simbolik di dalam diagram E-R

yang dapat kita gunakan adalah :

a. Persegi panjang, menyatakan himpunan entitas.

b. Lingkaran / elips, menyatakan atribut (atribut yang berfungsi sebagai

primary key diberi garis bawah).

c. Belah ketupat, menyatakan himpunan relasi.

d. Garis, sebagai penghubung antara himpunan relasi dengan himpunan

entitas dan himpunan entitas dengan atributnya.

e. Kardinalitas relasi dinyatakan dengan banyaknya garis cabang atau dengan

pemakaian angka (1 dan 1 untuk relasi satu ke satu, 1 dan N untuk relasi 1

ke banyak, atau N dan N untuk relasi banyak ke banyak).

Ada dua komponen utama pembentuk Model Entity Relationship, yaitu

Entitas (Entity) dan Relasi (Relation). Kedua komponen ini dideskripsikan

lebih jauh melalui sejumlah atribut/properti.

a. Entitas (Entity) : Entitas merupakan individu yang mewakili sesuatu yang

nyata (eksistensinya) dan dapat dibedakan dari sesuatu yang lain.

Sekelompok entitas yang sejenis dan berada dalam lingkup yang sama

membentuk sebuah himpunan entitas (Entity Set).

b. Atribut (Properti) : Setiap entitas pasti mempunyai atribut yang

mendeskripsikan karakteristik (properti) dari entitas tersebut. Penentuan /

pemilihan atribut-atribut yang relevan bagi sebuah entitas merupakan hal

penting lainnya dalam pembentukan model data.

Page 25: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

7

c. Relasi (Relationship): Relasi menunjukkan adanya hubungan di antara

sejumlah entitas yang berasal dari himpunan entitas yang berbeda.

Kardinalitas Relasi menunjukkan jumlah maksimum entitas yang dapat

berelasi dengan entitas pada himpunan entitas yang lain. Kardinalitas

Relasi yang terjadi diantara dua himpunan entitas (misalnya A dan B)

dapat berupa :

1. Satu ke satu (One to one) : Setiap entitas pada himpunan entitas A

berhubungan dengan paling banyak dengan satu entitas pada himpunan

entitas B, dan begitu juga sebaliknya.

2. Satu ke banyak (One to many) : Setiap entitas pada himpunan entitas A

dapat berhubungan dengan banyak entitas pada himpunan entitas B,

tetapi tidak sebaliknya. Setiap entitas pada entitas B dapat berhubungan

dengan satu entitas pada himpunan entitas A.

3. Banyak ke banyak (Many to many) : Setiap entitas pada himpunan

entitas A dapat berhubungan dengan banyak entitas pada himpunan

entitas B, dan demikian juga sebaliknya. (Fathansyah, 1999).

B. Pengenalan Database

Database dapat didefinisikan sebagai kumpulan dari item data (file atau

tabel) yang saling berhubungan satu dengan yang lainnya yang diorganisasikan

berdasarkan sebuah skema atau struktur tertentu, tersimpan dalam perangkat keras

komputer, dan digunakan perangkat lunak untuk memanipulasinya. Alasan

database diperlukan adalah :

a. Database merupakan salah satu komponen penting dalam sistem informasi,

karena merupakan dasar dalam menyediakan informasi.

Page 26: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

8

b. Mampu menentukan kualitas informasi, meliputi : akurasi, tepat pada

waktunya, dan relevan. Karena informasi dapat dikatakan bernilai apabila

manfaatnya lebih besar dibanding biaya yang dikeluarkan.

c. Dapat mereduksi duplikasi data (data redundancy) dan mengurangi

pemborosan tempat simpanan luar.

Proses perancangan database merupakan tahap penting agar sistem yang

dikembangkan efisien dalam pengaksesan data, terjaminnya integritas data, dan

mudah dalam pemanipulasiannya (Riyanto, 2010).

C. Pengenalan MySQL

MySQL (My Structure Query Language) atau yang biasa dibaca “mai-se-

kuel” adalah sebuah program pembuat database yang bersifat open source,

artinya siapa saja boleh menggunakannya dan tidak dicekal. MySQL sebenarnya

produk berjalan pada platform linux, karena sifatnya yang open source MySQL

dapat berjalan pada semua platform pada Windows maupun Linux. Selain itu

MySQL juga merupakan program pengakses database yang bersifat jaringan

sehingga dapat digunakan untuk aplikasi Multi User (Banyak Pengguna).

Kelebihan lain dari MySQL adalah menggunakan bahasa Query standar

yang dimiliki SQL (Structure Query Language). Sebagai sebuah program

penghasil database, MySQL tidak dapat berjalan sendiri tanpa adanya sebuah

aplikasi lain. MySQL dapat didukung oleh hampir semua program aplikasi baik

yang open source seperti PHP maupun yang tidak, yang ada pada platform

Windows seperti Visual Basic, Delphi, dan lainnya.

MySQL memiliki layar utama yang seperti layar DOS yaitu memiliki

prompt utama yang disebut mysql>, sehingga bagi orang yang baru pertama dan

belum mengenal perintah DOS akan merasa kesulitan. Akan tetapi sekarang ada

suatu program dump yang dibuat seperti web dan berjalan di bawah server

database yang disebut PhpMyAdmin. Dengan menggunakan PhpMyAdmin, dapat

Page 27: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

9

melakukan seluruh query yang ada sehingga tidak akan jenuh dalam memrogram

(Nugroho, 2004).

D. Pengenalan PHP

PHP (Hypertext Preeprocesor) merupakan bahasa yang dapat berjalan

pada server yang hasilnya dapat ditampilkan pada klien. Interpreter PHP dalam

mengeksekusi kode PHP pada sisi server (disebut server-side).

PHP merupakan bahasa standar yang digunakan dalam dunia website. PHP

adalah bahasa program yang berbentuk script yang diletakkan di dalam server

web. Jika berdasar sejarah, mulanya PHP diciptakan dari ide Rasmus Lerdof yang

membuat sebuah script “perl”. Script tersebut sebenarnya dimaksudkan untuk

digunakan sebagai program untuk dirinya sendiri. Akan tetapi, kemudian

dikembangkan lagi sehingga menjadi sebuah bahasa yang disebut “Personal

Home Page”. Inilah awal mula munculnya PHP sampai saat ini (Nugroho, 2004).

Kegunaan dari PHP adalah menghubungkan database dengan web.

Interaksi database MySQL dengan PHP memerlukan beberapa fungsi API yang

dimiliki oleh database itu sendiri untuk dapat berinteraksi dengan PHP. Fungsi-

fungsi itu diantaranya adalah mysql_connect(), mysql_select_db(), dan sebagainya

(Nugroho, 2004).

E. Pengenalan PhpMyAdmin

PhpMyAdmin adalah suatu program open source yang berbasis web yang

dibuat menggunakan aplikasi PHP. Program ini digunakan untuk mengakses

database MySQL. Program ini mempermudah dan mempersingkat pekerjaan.

Dengan kelebihannya, para pengguna awam tidak harus paham sintak-sintak SQL

dalam pembuatan database dan tabel (Nugroho, 2004).

Page 28: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

10

F. Pengenalan XAMPP

XAMPP adalah paket PHP berbasis Open Source yang dikembangkan

oleh sebuah komunitas Open Source. Dengan menggunakan XAMPP, tidak perlu

susah lagi untuk melakukan penginstalan program yang lain, karena semua

kebutuhan telah disediakan oleh XAMPP. Beberapa paket yang telah disediakan

adalah apache, MySQL, PHP, FileZilla, phpMyAdmin dan lain-lain (Nugroho,

2008).

G. Pengenalan Dreamweaver 8

Dreamweaver merupakan salah satu perangkat lunak dari kelompok

macromedia yang banyak digunakan untuk mendesain situs web. Adapun

macromedia dreamweaver itu sendiri adalah sebuah HTML editor profesional

yang berfungsi untuk mendesain secara visual dan mengelola situs web maupun

halaman web (Lenawati, 2007).

Sebagai editor Dreamweaver 8 mempunyai sifat WYSIWYG dibaca

(Waysiwig), artinya apa yang kamu lihat akan kamu peroleh. Dengan kelebihan

ini seorang programmer dapat langsung melihat hasil buatannya tanpa harus

membuka di browser (Nugroho, 2004).

Dreamweaver 8 adalah versi terbaru yang memiliki performa lebih baik

dan memiliki tampilan yang memudahkan dalam membuat halaman web, baik

sedang bekerja dalam jendela desain maupun kode rumus (Lenawati, 2007).

Seperti program editor-editor web lain, Dreamweaver 8 juga memiliki dua

bentuk layar, yaitu bentuk halaman design dan halaman code. Hal ini akan

mempermudah kita dalam menambahkan sintak yang berbasis HTML, PHP,

Javascript maupun bentuk program yang lainnya (Nugroho, 2004).

H. Pengenalan E-commerce (Electronic Commerce)

Page 29: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

11

Ada beberapa sebutan untuk E-commerce yaitu Internet Commerce atau

Ecom atau E-commerce atau Immerce, yang pada dasarnya semua sebutan di atas

mempunyai makna yang sama. Istilah-istilah tersebut berarti membeli atau

menjual secara elektronik, dan kegiatan ini dilakukan pada jaringan internet. E-

commerce juga dapat berarti pemasangan iklan, penjualan, dukungan, dan

pelayanan yang terbaik menggunakan sebuah web shop 24 jam sehari bagi seluruh

pelanggannya. (Andi, 2001).

Secara umum E-commerce dapat diklasifasikan menjadi dua jenis yaitu

Business to Business (B2B) dan Business to Consumer (B2C).

Business to Business (B2B) adalah sistem komunikasi bisnis online antar pelaku

bisnis, sedangkan Business to Consumer (B2C) merupakan mekanisme toko

online (electronic shopping mall), yaitu transaksi antara E-merchant dengan E-

customer. (Purba, 2010).

Penggunaan internet sebagai media pemasaran dan saluran penjualan

terbukti mempunyai keuntungan antara lain :

a. Untuk beberapa produk tertentu lebih sesuai ditawarkan melalui internet,

b. Harga lebih murah mengingat membuat situs di internet lebih murah biayanya

dibandingkan dengan membuka outlet retail di berbagai tempat,

c. Internet merupakan media promosi perusahaan dan produk yang paling tepat

dengan harga yang relatif lebih murah,

d. Pembelian melalui internet akan diikuti dengan layanan pengantaran barang

sampai di tempat pemesan. (Purba, 2010).

I. Pengenalan Internet

Internet (Inter-Network) adalah sebutan untuk sekumpulan jaringan

komputer yang menghubungkan situs akademik, pemerintahan, komersial,

organisasi, maupun perorangan. Internet menyediakan akses untuk layanan

Page 30: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

12

telekomnunikasi dan sumber daya informasi untuk jutaan pemakainya yang

tersebar di seluruh dunia. Layanan internet meliputi komunikasi langsung (email,

chat), diskusi (Usenet News, email, milis), sumber daya informasi yang

terdistribusi (World Wide Web, Gopher), remote login dan lalu lintas file (Telnet,

FTP), dan aneka layanan lainnya.

Jaringan yang membentuk internet bekerja berdasarkan suatu set protokol

standar yang digunakan untuk menghubungkan jaringan komputer dan

mengalamati lalu lintas dalam jaringan. Protokol ini mengatur format data yang

diijinkan, penanganan kesalahan (error handling), lalu lintas pesan, dan standar

komunikasi lainnya. Protokol standar pada internet dikenal sebagai TCP/IP

(Transmission Control Protocol/Internet Protocol). Protokol ini memiliki

kemampuan untuk bekerja diatas segala jenis komputer, tanpa terpengaruh oleh

perbedaan perangkat keras maupun sistem operasi yang digunakan. (Ramadhani,

2003).

J. Pengenalan WWW (World Wide Web)

Secara teknis WWW atau yang sering disebut sebagai "web" adalah

sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain

yang tersimpan dalam sebuah internet web server dipresentasikan dalam bentuk

hypertext.

Web server merupakan aplikasi perangkat lunak yang menyediakan

layanan dokumen web yang dapat diakses di seluruh dunia melalui internet yang

berjalan pada sebuah computer yang disebut server.

Web dapat diakses oleh perangkat lunak web client yang secara populer

disebut sebagai browser. Web browser merupakan aplikasi perangkat lunak yang

digunakan untuk membaca halaman-halaman web yang tersimpan dalam web

server melalui protokol yang disebut HTTP (Hypertext Transfer Protocol).

Beberapa diantara perangkat lunak browser yang cukup populer dan digunakan

Page 31: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

13

secara meluas, contohnya seperti Microsoft Internet Explorer, Mozilla Firefox,

maupun Opera, namun ada juga beberapa produk browser yang kurang dikenal

dan hanya digunakan di lingkungan yang terbatas.

Sebagai dokumen hypertext, dokumen-dokumen di web dapat memiliki

link (sambungan) dengan dokumen lain, baik yang tersimpan dalam web server

yang sama maupun di web server lainnya. Link memudahkan para pengakses web

berpindah dari satu halaman ke halaman lainnya, dan dari satu server ke server

lain. Kegiatan penelusuran halaman web ini biasa disebut sebagai browsing.

(Ramadhani, 2003).

K. Pengenalan CSS (Cascading Style Sheet)

CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan

untuk mengatur format pemakaian style (font, warna, jarak baris, dan sebagainya)

untuk dokumen terstruktur suatu halaman HTML. CSS memisahkan presentation

sebuah dokumen dari content dokumen itu sendiri. CSS memudahkan pembuatan

dan pemeliharaan dokumen web.

Keuntungan menggunakan CSS adalah dapat mengubah format pemakaian

style seluruh halaman website dalam satu waktu saja yaitu cukup dengan

mengubah satu baris kode css pada halaman css, tidak perlu mengubah satu per

satu halaman pada website.

Kekurangan menggunakan CSS adalah tidak semua browser mengartikan

kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan

CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain.

(Dini Shanti, 2009).

Page 32: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user 14

BAB III

DESAIN DAN PERANCANGAN SISTEM

A. ANALISIS KEBUTUHAN SISTEM

Dalam perancangan aplikasi toko online berbasis PHP dan MySQL pada

toko Erma Ahmad Batik terdapat beberapa perangkat lunak dan perangkat keras

yang digunakan untuk mendukung proses perancangan aplikasi, yaitu :

1. Perangkat Lunak

a. Sistem Operasi : Microsoft Windows 7 Ultimate

b. Bahasa Pemrograman : PHP 5.3.0

c. Database : MySql 5.0.45

d. Web Server : Xampp

e. Database Manager : PhpMyAdmin 2.10.2

f. Web Editor : Macromedia Dreamweaver 8, Adobe

Photoshop CS2

2. Perangkat Keras

a. Leptop dengan Processor Intel ® Dual Core ™

b. RAM 512 GB

c. Harddisk 1 GB

B. PERANCANGAN SISTEM

Perancangan Sistem informasi penjualan online berikut digambarkan

dalam diagram alir data dan spesifikasi proses. Diagram alir data sistem ini terdiri

dari diagram konteks, DFD Level 0, DFD Level 1, dan flowchart. Spesifikasi

proses menggambarkan kejadian di dalam setiap proses pada level terbawah pada

DFD. Model ini berfungsi mendeksripsikan apa yang dilakukan ketika masukan

ditransformasi menjadi keluaran. Diagram alir data dapat digambarkan sebagai

berikut :

Page 33: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

15

1. Diagram Konteks

Diagram konteks pada sistem informasi penjualan online toko Erma

Ahmad Batik Solo ditampilkan pada Gambar 1 berikut ini :

Gambar 1 : Diagram Konteks

Keterangan :

a. Pengunjung hanya bisa melihat informasi website, produk dan mengisi

buku tamu, untuk dapat melakukan pembelian harus melakukan

pendaftaran terlebih dahulu. Setelah mendaftar akan mendapat data

konfirmasi daftar.

b. Pelanggan dapat melakukan proses login, akses informasi website dan

produk, dan pemesanan barang. Setelah melakukan pemesanan barang

akan mendapat konfirmasi daftar transaksi.

c. Admin bertugas untuk melakukan manajemen pelanggan, manajemen

admin, dan manajemen pemesanan barang.

Page 34: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

16

2. Data Flow Diagram (DFD)

DFD pada sistem informasi penjualan online toko Erma Ahmad Batik

Solo ditampilkan pada Gambar 2 berikut ini :

Gambar 2 : DFD Level 0

Page 35: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17

Keterangan :

a. Proses 1 Daftar Sebelum melakukan pendaftaran, pengunjung dapat

memperoleh informasi website, produk, mengisi buku tamu dan polling.

Jika ingin melakukan pemesanan barang, pengunjung harus melakukan

proses daftar dengan memberikan data pendaftaran. Kemudian data

pendaftaran akan disimpan ke dalam data store pelanggan, kemudian

pengunjung akan memperoleh konfirmasi daftar.

b. Proses 2 Login Untuk dapat login, pelanggan dan admin harus

memberikan ID login berupa user name dan password masing-masing.

Untuk admin, akan memperoleh konfirmasi login admin dengan

mengambil data pada data store admin. Untuk pelanggan, akan

memperoleh data konfirmasi login pelanggan dan informasi data pribadi

dengan mengambil data pada data store pelanggan.

c. Proses 3 Pemesanan Barang untuk melakukan pemesanan barang,

pelanggan harus memilih barang yang telah tersedia. Setelah memilih

barang, maka data tersebut akan disimpan ke dalam data store kantong.

Setelah itu akan mendapat data transaksi terakhir dan data barang detail.

Kemudian pelanggan mendapat data konfirmasi daftar transaksi.

d. Proses 4 Manajemen Pelanggan Admin melakukan proses manajemen

pelanggan dengan mengambil data store pada data buku tamu, data

propinsi, data pelanggan, dan data polling. Admin juga melakukan

konfigurasi dengan memasukkan data propinsi, berita, kategori, sub

kategori, dan barang.

e. Proses 5 Manajemen Admin Admin melakukan proses manajemen

admin dengan melakukan konfigurasi data admin.

f. Proses 6 Manajemen Pemesanan Barang Untuk barang yang dibeli akan

masuk pada data store kantong untuk penyimpanan sementara. Kemudian

barang akan masuk ke data store pemesanan dan pesan detail.

Page 36: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

18

g. Proses 7 Lihat Data Informasi Data berita, kategori, sub kategori, dan

barang dapat diakses oleh pengunjung dan pelanggan. Proses lihat data

informasi berdiri sendiri karena tidak berhubungan dengan proses

pembelian produk dan dapat diakses setelah website berhasil dibuka.

DFD LEVEL 1 PROSES 3 PEMESANAN

SISTEM INFORMASI PENJUALAN ONLINEERMA AHMAD BATIK SOLO

Pelanggan3.1

PilihBarang

DataPemesanan

3.3Transaksi

Lanjut Data PesanDetail

Konfirmasi DaftarTransaksi

3.2Masuk

KantongBelanja

Data Kantong

ID Barang

DataBarang Detail

Data TransaksiTerakhir

DataKantong

Data KantongBelanja

Data KantongBelanja

Gambar 3 : DFD Level 1 Proses Pemesanan

Page 37: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

19

Gambar 4 : DFD Level 1 Proses Manajemen Pelanggan

Page 38: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

20

Gambar 5 : DFD Level 1 Proses Manajemen Pemesanan Barang

3. Spesifikasi Proses (Process Specification)

a. PSPEC 0.3 Pemesanan pada Gambar 3 dapat dijelaskan sebagai berikut :

Tabel 1. PSPEC Pemesanan

PSPEC 0.3 Pemesanan

Masukan ID barang.

Keluaran konfirmasi daftar transaksi.

Algoritma Pelanggan memilih barang, kemudian data barang yang sudah

dipilih akan masuk pada kantong belanja. Jika barang dibeli

maka terjadi proses transaksi lanjut yaitu pembeli akan

mendapat data transaksi terakhir dan data barang detail.

Page 39: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

21

b. PSPEC 0.4 Pemesanan pada Gambar 4 dapat dijelaskan sebagai berikut :

Tabel 2. PSPEC Manajemen Pelanggan

PSPEC 0.4 Manajemen Pelanggan

Masukan Data polling, data propinsi, data buku tamu, data pelanggan.

Keluaran Data kategori, data sub kategori, data berita, data barang.

Algoritma Admin mengelola data polling, propinsi, buku tamu,

pelanggan yang dimasukkan oleh user. Admin juga

melakukan konfigurasi dengan memasukkan data kategori,

sub kategori, berita, dan barang.

c. PSPEC 0.6 Pemesanan pada Gambar 5 dapat dijelaskan sebagai berikut :

Tabel 3. PSPEC Manajemen Pemesanan Barang

PSPEC 0.6 Manajemen Pemesanan Barang

Masukan Data kantong belanja.

Keluaran Data transaksi terakhir, dan data barang detail

Algoritma Admin melakukan manajemen pemesanan barang dengan

mengelola data kantong belanja yang dimasukkan oleh user

yang kemudian menghasilkan keluaran data transaksi

terakhir, dan data barang detail yang kemudian disampaikan

kepada user.

Page 40: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

22

4. Flowchart

Flowchart pada sistem informasi penjualan online toko Erma Ahmad

Batik Solo ditampilkan pada Gambar 6 berikut ini :

PENGUNJUNG PELANGGAN ADMIN

Start

DataPendaftaran

LoginPelanggan

DataKonfirmasi

Daftar

Data KonfirmasiLogin

Pelanggan

DataPelanggan

Daftar

Data BukuTamu

ManajemenPelanggan

ManajemenPemesanan

BarangPemesananBarang

ID Barang

KonfirmasiDaftar

Transaksi

DataKategori

Data SubKategori

DataBarang

Data PesanDetail

ID LoginPelanggan

DataPropinsi

DataPolling

DataKantong

DataPemesanan

ManajemenAdmin

DataBerita

DataAdmin

Data InformasiProduk &Website

Data InformasiProduk &Website

LoginAdmin

Data KonfirmasiLogin Admin

ID LoginAdmin

Stop

Lihat DataInformasi

Gambar 6 : Flowchart

Page 41: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

23

C. PERANCANGAN DATABASE

1. Entity Relationship Diagram (ERD)

ERD sistem informasi penjualan online toko Erma Ahmad Batik Solo

ditampilkan pada Gambar 7 berikut ini :

Gambar 7 : ERD (Entity Relationship Diagram)

Page 42: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

24

2. Skema Diagram

Skema Diagram pada sistem informasi penjualan online toko Erma

Ahmad Batik Solo ditampilkan pada Gambar 8 berikut ini :

Gambar 8 : Skema Diagram

3. Struktur Tabel Data

Struktur tabel data untuk pembuatan aplikasi penjualan batik online

adalah sebagai berikut :

a. Tabel Admin

Tabel admin digunakan untuk menyimpan data admin untuk program

autentifikasi. Program autentifikasi ini mempunyai fungsi sebagai gerbang

login masuk pada sistem. Struktur tabel admin digambarkan pada Tabel 4

berikut :

Page 43: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

25

Tabel 4. admin

Nama Field Tipe Data Ukuran Key Null Keterangan

id_admin char 6 * No Primary Key

username varchar 20 No

password varchar 32 No

nama_lengkap varchar 50 No

Email varchar 40 No

b. Tabel Barang

Tabel barang digunakan untuk menyimpan data barang yang dijual

pada toko tersebut. Struktur tabel barang digambarkan pada Tabel 5 berikut :

Tabel 5. barang

Nama Field Tipe Data Ukuran Key Null Keterangan

id_barang char 6 * No Primary Key

id_kategori char 5 No

id_subkat char 5 No

nm_barang varchar 40 No

file_gambar varchar 100 No

gambar_zoom varchar 100 No

ukuran_kain varchar 10 No

harga_satuan int 15 No

Diskon int 2 No

min_pesan Int 15 No

keterangan text No

Page 44: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

26

c. Tabel Berita

Tabel berita digunakan untuk menyimpan data informasi mengenai

perkembangan batik terbaru yang dijual di toko tersebut yang dimasukkan

oleh administrator. Struktur tabel berita digambarkan pada Tabel 6 berikut :

Tabel 6. berita

Nama Field Tipe Data Ukuran Key Null Keterangan

id_berita int 3 * No Primary Key, Auto

Increment

judul varchar 50 No

ringkasan varchar 100 No

lengkap text No

tanggal date No

d. Tabel Buku Tamu

Tabel buku tamu digunakan untuk menyimpan data komentar atau

saran tentang web yang diisi oleh user. Struktur tabel buku tamu digambarkan

pada Tabel 7 berikut :

Tabel 7. bukutamu

Nama Field Tipe Data Ukuran Key Null Keterangan

id_bktamu int 3 * No Primary Key, Auto

Increment

nama varchar 50 No

email varchar 40 No

komentar text No

tanggal date No

Page 45: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

27

e. Tabel Kantong

Tabel kantong digunakan untuk menyimpan data barang yang dipilih

oleh pelanggan. Struktur tabel kantong digambarkan pada Tabel 8 berikut :

Tabel 8. kantong

Nama Field Tipe Data Ukuran Key Null Keterangan

id_kantong int 5 * No Primary Key, Auto

Increment

id_barang char 6 No

jumlah int 3 No

harga int 15 No

tanggal date No

jam time No

id_plg char 6 No

f. Tabel Kategori

Tabel kategori digunakan untuk menyimpan data kategori barang yang

dijual. Struktur tabel kategori digambarkan pada Tabel 9 berikut :

Tabel 9. kategori

Nama Field Tipe Data Ukuran Key Null Keterangan

id_kategori char 5 * No Primary Key

nama_kategori varchar 25 No

keterangan text No

g. Tabel Pelanggan

Tabel pelanggan digunakan untuk menyimpan data pelanggan yang

telah melakukan proses registrasi, yang meliputi data-data pribadi pelanggan.

Struktur tabel pelanggan digambarkan pada Tabel 10 berikut :

Page 46: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

28

Tabel 10. pelanggan

Nama Field Tipe Data Ukuran Key Null Keterangan

id_plg char 6 * No Primary Key

nama_plg varchar 50 No

kelamin enum No 'P','W'

alamat varchar 150 No

Alamat_tujuan Varchar 150 No

kota varchar 20 No

id_propinsi char 4 No

negara varchar 30 No

kode_pos int 5 No

email varchar 40 No

telp_rumah varchar 15 No

telp_hp varchar 15 No

no_fax varchar 15 No

status_pesan enum No 'FREE','ORDER'

id_user varchar 20 No

password varchar 32 No

h. Tabel Pemesanan

Tabel pemesanan digunakan untuk menyimpan semua data yang

sebelumnya berada pada tabel kantong. Struktur tabel pemesanan

digambarkan pada Tabel 11 berikut :

Tabel 11. pemesanan

Nama Field Tipe Data Ukuran Key Null Keteranganno_pesan char 5 * No Primary Keyid_plg char 25 Notanggal Date Nojam time Nostatus_bayar enum No 'PESAN','LUNAS'

Page 47: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

29

i. Tabel Pesan Detail

Tabel pesan detail digunakan untuk menyimpan data detail pesanan

barang pelanggan. Struktur tabel pesan detail digambarkan pada Tabel 12

berikut:

Tabel 12. pesan_detail

Nama Field Tipe Data Ukuran Key Null Keterangan

id_pesdet int 4 * No Primary Key, Auto

Increment

no_pesan char 8 No

id_barang char 6 No

jumlah int 3 No

harga int 15 No

j. Tabel Propinsi

Tabel propinsi digunakan untuk menyimpan data-data propinsi di

Indonesia beserta biaya kirim sesuai dengan propinsi tujuan. Struktur tabel

propinsi digambarkan pada Tabel 13 berikut :

Tabel 13. propinsi

Nama Field Tipe Data Ukuran Key Null Keterangan

id_propinsi char 4 * No Primary Key

nm_propinsi varchar 40 No

harga_kirim int 12 No

Page 48: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

30

k. Tabel Sub Kategori

Tabel sub kategori digunakan untuk menyimpan data sub kategori

barang yang dijual. Struktur tabel sub kategori digambarkan pada Tabel 14

berikut :

Tabel 14. sub_kategori

Nama Field Tipe Data Ukuran Key Null Keterangan

id_subkat char 5 * No Primary Key

nm_subkat varchar 30 No

id_kategori char 5 No

l. Tabel Polling

Tabel polling digunakan untuk menyimpan data polling yang

dimasukkan oleh user terhadap penilaian website. Struktur tabel polling

digambarkan pada Tabel 15 berikut :

Tabel 15. polling

Nama Field Tipe Data Ukuran Key Null Keterangan

id_polling int 5 * No Primary Key

nilai enum ('b','j') No

ip varchar 15 No

tanggal date No

D. DESAIN TAMPILAN SISTEM

Berikut adalah desain layout halaman user (beranda, buku tamu, daftar

barang), halaman login admin, dan halaman utama admin.

1. Desain Layout Halaman Beranda

Page 49: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

31

Halaman beranda adalah halaman yang paling pertama muncul pada

saat website ini diakses. Pada halaman profil, kontak, dan berita memiliki

desain yang sama pada halaman beranda hanya bagian isinya saja yang

dirubah. Dalam halaman beranda terdapat beberapa bagian, yaitu :

a. Header Header berisi gambar logo Erma Ahmad Batik.

b. Menu Utama Berisi menu link Beranda, Profil, Buku Tamu,

Kontak, Berita, Kategori Barang, Subkat Barang, dan Daftar Barang.

c. Menu Pelanggan Berisi form Login Pelanggan dan menu link

Registrasi.

d. Menu Iklan Berisi teks ajakan.

e. Menu Polling Layanan user terhadap penilaian website.

f. Menu Pencarian Pencarian produk berdasar kata kunci.

g. Menu Informasi Berisi mengenai info cara pembelian.

h. Menu Koleksi Kita Berisi slide show gambar produk yang dijual.

i. Menu Jejaring Sosial Berisi link menuju facebook pemilik toko.

j. Menu Admin Berisi menu link login admin.

k. Isi Berisi halaman yang dipanggil.

l. Footer Bagian ini sama halnya dengan bagian header,

yaitu akan selalu ditampilkan walaupun isi website berubah. Terletak

dibagian paling bawah website yang berisi tentang Copyright (hak cipta)

tahun pembuatan situs.

Tampilan desain layout halaman beranda dapat dilihat pada Gambar 9

berikut :

Page 50: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

32

Gambar 9 : Desain Layout Halaman Beranda

Page 51: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

33

2. Desain Layout Halaman Buku Tamu

Tampilan desain layout halaman buku tamu dapat dilihat pada Gambar

10 berikut :

Simpan Reset Tampil

Nama

Email

Komentar

BUKU TAMU

HEADER

BERANDA PROFIL BUKU TAMU KONTAK

MENU UTAMA

Teks

IKLAN

User

Password

Login

Registrasi

PELANGGAN

FOOTER

BerandaProfilBuku TamuKontakBerita

Kategori BarangSubkat BarangDaftar Barang

POLLING

Info Cara Pembelian

INFORMASI

PENCARIAN

Kata Kunci

KOLEKSI KITA

JEJARINGSOSIAL

FACEBOOK

ADMIN

Login Admin

Gambar Gambar

Gambar 10 : Desain Layout Halaman Buku Tamu

Page 52: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

34

3. Desain Layout Halaman Daftar Barang

Tampilan desain layout halaman daftar barang dapat dilihat pada

Gambar 11 berikut :

HEADER

BERANDA PROFIL BUKU TAMU KONTAK

MENU UTAMA

Teks

IKLAN

User

Password

Login

Registrasi

PELANGGAN

FOOTER

BerandaProfilBuku TamuKontakBerita

Kategori BarangSubkat BarangDaftar Barang

Gambar NamaBarang

HargaBarang Beli

Gambar NamaBarang

HargaBarang Beli

POLLING

Info Cara Pembelian

INFORMASI

PENCARIAN

Kata Kunci

KOLEKSI KITA

JEJARINGSOSIAL

FACEBOOK

ADMIN

Login Admin

Gambar Gambar

Gambar NamaBarang

HargaBarang Beli

Gambar 11 : Desain Layout Halaman Daftar Barang

Page 53: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

35

4. Desain Layout Login Admin

Tampilan desain layout halaman login admin dapat dilihat pada

Gambar 12 berikut :

Gambar 12 : Desain Layout Halaman Login Admin

5. Desain Layout Halaman Utama Admin

Halaman administrator berfungsi untuk melakukan pengaturan

terhadap semua objek yang tampil dalam website, memberikan hak akses

terhadap user, melakukan konfigurasi sistem, merubah content website baik

yang berupa teks atau gambar. Tampilan desain layout halaman utama admin

dapat dilihat pada Gambar 13 berikut :

Gambar 13 : Desain Layout Halaman Utama Admin

Page 54: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user 36

BAB IV

IMPLEMENTASI DAN ANALISA

A. IMPLEMENTASI SISTEM

Sesuai dengan perancangan sistem yang telah dijelaskan sebelumnya, pada

sistem penjualan batik online ini terdapat dua tingkatan pengguna yaitu user

(pengunjung dan pelanggan), dan administrator. Pengunjung adalah orang yang

hanya dapat melihat informasi website, produk barang, namun belum dapat

melakukan proses pembelian, sedangkan pelanggan adalah orang yang sudah

mendapat account dari proses registrasi sehingga dapat melakukan proses

pembelian. Berikut adalah implementasi halaman yang dapat diakses oleh masing-

masing pengguna.

1. HALAMAN USER

a. Form Tampilan Halaman Utama (Beranda)

Halaman beranda adalah halaman yang pertama kali muncul ketika

aplikasi ini dibuka. Pada halaman beranda terdiri dari menu yaitu :

1. menu utama yang terdiri dari beranda, profil, buku tamu, kontak, berita,

kategori barang, subkat barang, merk barang, dan daftar barang,

2. sekilas info tentang produk yang dijual,

3. form login untuk login anggota,

4. menu sign up untuk registrasi pengunjung,

5. menu fasilitas yang terdiri dari polling, pencarian, informasi, koleksi,

jejaring sosial dan menu admin (untuk login admin).

Tampilan halaman beranda dapat dilihat pada Gambar 14 berikut ini :

Page 55: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

37

Gambar 14 : Tampilan Halaman Beranda

b. Form Tampilan Halaman Buku Tamu

Halaman buku tamu dapat diakses oleh user umum (pengunjung dan

pelanggan). Untuk memberi komentar, user harus memasukkan nama, email,

dan komentar. Kemudian untuk menampilkan semua komentar pilih tampil.

Pada halaman ini pengunjung bisa menyampaikan saran dan kritik yang

Page 56: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

38

membangun bagi toko Erma Ahmad Batik. Tampilan halaman buku tamu

dapat dilihat pada Gambar 15 berikut :

Gambar 15 : Tampilan Halaman Buku Tamu

Apabila terjadi kesalahan input yaitu penulisan email salah atau field

masih kosong, maka akan muncul pesan peringatan seperti pada Gambar 16

berikut :

Gambar 16 : Tampilan Halaman Kesalahan Input Buku Tamu

c. Form Tampilan Halaman Berita

Halaman ini memuat info berita, bisa diakses oleh user umum. Pada

tampilan awal yang ditampilkan hanya sekilas berita saja, namun disediakan

juga link untuk melihat berita detail selengkapnya. Tampilan halaman berita

dan berita detail dapat dilihat pada Gambar 17 dan Gambar 18 berikut :

Page 57: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

39

Gambar 17 : Tampilan Halaman Berita

Gambar 18 : Tampilan Halaman Berita Detail

d. Form Tampilan Halaman Registrasi

Halaman registrasi adalah halaman untuk melakukan pendaftaran

sebagai pelanggan baru. Untuk melakukan pendaftaran, user harus mengisi

biodata lengkap pada form yang telah disediakan. Form registrasi berisikan

data berikut :

1. data pelanggan (nama lengkap, jenis kelamin, dan email),

2. alamat pelanggan (negara dengan default Indonesia, propinsi, kota, alamat,

dan kode pos),

3. data no kontak (no telepon, no handphone, dan no fax),

4. data login (user name dan password untuk login).

Page 58: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

40

Tampilan halaman registrasi dapat dilihat pada Gambar 19 berikut :

Gambar 19 : Tampilan Halaman Registrasi

Semua kolom pada form harus diisi dengan lengkap dan harus sesuai

dengan tulisan bertanda (*), jika tidak maka akan muncul peringatan

kesalahan input di bawah form. Tampilan halaman kesalahan registrasi dapat

dilihat pada Gambar 20 berikut :

Gambar 20 : Tampilan Halaman Kesalahan Registrasi

Page 59: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

41

e. Form Tampilan Halaman Login Pelanggan

Halaman login pelanggan adalah halaman untuk dapat melakukan

pembelian sehingga pelanggan harus melakukan login terlebih dahulu dengan

memasukkan user dan password yang telah dibuat pada saat melakukan

registrasi. Pada form pelanggan ini memuat form login dan link untuk form

registrasi. Tampilan halaman login pelanggan dapat dilihat pada Gambar 21

berikut :

Gambar 21 : Tampilan Halaman Login Pelanggan

Apabila pelanggan melakukan kesalahan input yaitu penulisan user

atau password salah dan field masih kosong, maka akan muncul pesan

peringatan seperti pada Gambar 22 berikut :

Gambar 22 : Tampilan Halaman Kesalahan Login Pelanggan

f. Form Tampilan Halaman Sub Kategori Barang

Halaman ini dapat diakses oleh user umum. Halaman ini menampilkan

produk barang berdasarkan sub kategori sehingga memudahkan pembeli

melihat pembagian-pembagian sub kategori barang. Tampilan halaman sub

kategori barang dapat dilihat pada Gambar 23 berikut :

Page 60: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

42

Gambar 23 : Tampilan Halaman Sub Kategori Barang

Untuk tampilan halaman kategori barang memiliki desain yang sama

dengan halaman sub kategori barang.

g. Form Tampilan Halaman Daftar Barang

Pada halaman daftar barang user umum bisa melihat lebih jelas daftar

barang apa saja yang dijual. Barang disertai gambar dan harga masing-masing

barang. Tampilan halaman daftar barang dapat dilihat pada Gambar 24.

Gambar 24 : Tampilan Halaman Daftar Barang

Page 61: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

43

Jika ingin membelinya maka harus melakukan login terlebih dahulu,

jika belum login maka akan tampil halaman belum login seperti pada Gambar

25 berikut :

Gambar 25 : Tampilan Halaman Status Belum Login

h. Form Tampilan Halaman Pemesanan

Berikut akan ditampilkan langkah awal untuk memulai pemesanan

barang. Hanya pelanggan yang dapat melakukan pembelian, maka harus login

dahulu dengan menggunakan account yang sudah diperoleh masing-masing

pada saat registrasi. Bukti bahwa pelanggan sudah berhasil login yaitu pada

gambar yang dilingkari merah, yaitu pada status dan pada menu pelanggan.

Untuk membelinya, klik “beli” seperti pada gambar yang dilingkari

merah. Jika sudah dipilih, maka barang akan masuk pada kantong belanja

pelanggan. Tampilan halaman status login dapat dilihat pada Gambar 26

berikut :

Page 62: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

44

Gambar 26 : Tampilan Halaman Status Login

Setelah pelanggan memilih tombol beli maka pelanggan akan masuk

ke halaman keranjang belanja. Tombol yang disediakan adalah :

1. tombol daftar barang untuk kembali ke halaman daftar barang, jika

pelanggan ingin membeli barang lagi.

2. tombol ubah jika pelanggan ingin mengubah jumlah barang yang

dibeli. Minimal pemesanan yaitu satu barang, dan tidak boleh diisi kosong.

3. tombol hapus (x) jika pelanggan ingin menghapus barang pada kantong

belanja.

4. tombol lanjutkan jika pelanggan sudah yakin dengan barang yang akan

dibeli, maka akan masuk ke halaman konfirmasi pembayaran.

Tampilan halaman kantong belanja dapat dilihat pada Gambar 27

berikut :

Page 63: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

45

Gambar 27 : Tampilan Halaman Kantong Belanja

Pada halaman konfirmasi pembayaran berisikan konfirmasi data

pribadi (pelanggan dapat mengubahnya jika terjadi kesalahan dalam

pengisian) dan konfirmasi cara pembayaran. Apabila data yang diisi sudah

benar dan setuju dengan peraturan yang telah diberikan maka pelanggan

tinggal melanjutkan transaksinya dengan pilih simpan. Tampilan halaman

konfirmasi pembayaran dapat dilihat pada Gambar 28 berikut :

Page 64: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

46

Gambar 28 : Tampilan Halaman Konfirmasi Pembayaran

Page 65: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

47

Pada halaman konfirmasi transaksi berisikan konfirmasi barang

belanja, total belanja, biaya kirim, unik transfer, total pembayaran, dan

konfirmasi alamat. Tampilan halaman konfirmasi transaksi dapat dilihat pada

Gambar 29 berikut :

Gambar 29 : Tampilan Halaman Konfirmasi Transaksi

Setelah itu pilih lanjutkan, maka akan masuk ke halaman transaksi

sukses. Halaman ini berisikan pemberitahuan bahwa proses transaksi telah

sukses. Tampilan halaman transaksi sukses dapat dilihat pada Gambar 30.

Page 66: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

48

Gambar 30 : Tampilan Halaman Transaksi Sukses

i. Form Tampilan Halaman Pelanggan Login

Berikut adalah menu yang disediakan jika pelanggan telah login yaitu

1. ubah pelanggan menu form untuk mengubah data pelanggan apabila

terdapat kesalahan pada saat pengisian data.

2. Kantong belanja menu untuk menampilkan barang yang terdapat pada

keranjang belanja, bersifat penyimpanan sementara.

3. Lanjutkan transaksi menu untuk menampilkan konfirmasi pembayaran

yang terdiri dari edit data pribadi dan cara pembayaran.

4. Daftar transaksi menu untuk menampilkan no transaksi user, unik

transfer yang diperoleh, status sebagai tanda bukti lunas atau pesan, dan

daftar barang detail serta nominal harga yang diperoleh.

5. Logout menu untuk keluar dari account user dan mengakhiri

pemesanan.

Tampilan halaman ubah data pelanggan dapat dilihat pada Gambar 31

berikut :

Page 67: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

49

Gambar 31 : Tampilan Halaman Ubah Data Pelanggan

Tampilan halaman kantong belanja dapat dilihat pada Gambar 32

berikut :

Gambar 32 : Tampilan Halaman Kantong Belanja

Tampilan halaman daftar transaksi terakhir dapat dilihat pada Gambar

33 berikut :

Page 68: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

50

Gambar 33 : Tampilan Halaman Daftar Transaksi Terakhir

Untuk tampilan aksi tampil dapat dilihat pada Gambar 34 berikut :

Gambar 34 : Tampilan Halaman Daftar Transaksi Detail

Page 69: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

51

2. HALAMAN ADMIN

a. Form Tampilan Halaman Login Admin

Halaman ini digunakan untuk mengakses halaman admin dengan

mengisikan user name dan password admin. Halaman admin atau halaman

administrator juga dapat disebut Control Panel, yaitu halaman yang

dikhususkan untuk pengelola web. Jadi, halaman ini hanya dapat digunakan

oleh orang yang diberi otoritas akan sistem penjualan barang pada toko Erma

Ahmad Batik, sedangkan para pelanggan dan pengunjung sama sekali tidak

boleh mengaksesnya. Tampilan halaman login admin dapat dilihat pada

Gambar 35 berikut :

Gambar 35 : Tampilan Halaman Login Admin

b. Form Tampilan Halaman Utama Admin

Pada halaman utama admin berisikan menu-menu sebagai berikut :

1. Menu File : terdiri dari Konfigurasi Admin (Tambah Admin dan Edit

Admin),

2. Menu Pemesanan : terdiri dari Detail Pemesanan (Pemesanan/Nomor, dan

Pemesanan/Periode),

3. Menu Manajemen terdiri dari :

(1) Kategori (Tambah Kategori dan Edit Kategori),

Page 70: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

52

(2) Sub Kategori (Tambah Sub_Kat dan Edit Sub_Kat),

(3) Merk (Tambah Merk dan Edit Merk),

(4) Barang (Tambah Barang dan Edit Barang),

(5) Propinsi (Tambah Propinsi dan Edit Propinsi),

(6) Berita (Tambah Berita dan Edit Berita),

(7) Buku Tamu (Tampil Buku Tamu, Detail dan hapus Buku Tamu), dan

Pelanggan (Tampil Pelanggan, Detail dan Hapus Pelanggan).

4. Menu Laporan terdiri dari :

(1) Laporan data master (Laporan Data Kategori, Laporan Data

Sub_Kategori, Laporan Data Merk, Laporan Data Propinsi, Laporan

Data Semua Barang, Laporan Data Barang/Nama, Laporan Data

Barang/Kategori, Laporan Data/sub_kat, dan Laporan Data/merk),

(2) Laporan data lanjutan (Laporan Semua Data Pelanggan).

(3) Menu Logout.

Tampilan halaman utama admin dapat dilihat pada Gambar 36 berikut.

Page 71: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

53

Gambar 36 : Tampilan Halaman Utama Admin

c. Form Tampilan Menu File

Menu File terdiri dari konfigurasi admin, yang memiliki sub menu

yaitu tambah admin dan edit admin.

1. Halaman Konfigurasi Tambah Admin

Berisikan data admin dan data login. Untuk data admin terdiri dari

nama lengkap, dan email. Untuk data login berisikan user name, dan password

untuk dapat masuk ke halaman admin. Tampilan halaman tambah admin dapat

dilihat pada Gambar 37 berikut :

Gambar 37 : Tampilan Halaman Tambah Admin

Apabila melakukan kesalahan input, akan muncul pesan peringatan

seperti pada gambar 38 berikut :

Gambar 38 : Tampilan Halaman Kesalahan Tambah Admin

Page 72: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

54

2. Halaman Konfigurasi Edit Admin

Berisikan id admin, username, password, nama lengkap, email, dan

aksi (ubah dan hapus). Tampilan halaman edit admin dapat dilihat pada

Gambar 39.

Gambar 39 : Tampilan Halaman Edit Admin

Untuk tampilan aksi ubah data admin berfungsi untuk mengubah id

pelanggan, nama lengkap, dan email. Aksi ubah ditampilkan pada Gambar 40

berikut :

Gambar 40 : Tampilan Halaman Ubah Data Admin

d. Form Tampilan Menu Pemesanan

Menu pemesanan berfungsi untuk menampilkan daftar transaksi yang

sudah dilakukan oleh pelanggan. Menu pemesanan terdiri dari detail

pemesanan yang memiliki sub menu yaitu pemesanan/nomor, dan

Page 73: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

55

pemesanan/periode. Berikut adalah tampilan dari pemesanan/nomor yang

ditunjukan pada Gambar 41.

Gambar 41 : Tampilan Halaman Pemesanan/Nomor

Pada aksi tampil berfungsi untuk menampilkan laporan transaksi

pelanggan. Halaman ini berisikan daftar pelanggan detail dan daftar barang

detail. Tampilan Halaman Pemesanan/Nomor Detail dapat dilihat pada Gambar

42 berikut :

Gambar 42 : Tampilan Halaman Pemesanan/Nomor Detail

Page 74: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

56

Untuk tampilan aksi ubah status hanya berfungsi untuk mengubah

status bayar saja, dari ’PESAN’ menjadi ‘LUNAS’. Tampilan halaman ubah

status transaksi dapat dilihat pada Gambar 43 berikut :

Gambar 43 : Tampilan Halaman Ubah Status Transaksi

Berikut adalah tampilan dari pemesanan/periode yang ditunjukan pada

Gambar 44 berikut :

Gambar 44 : Tampilan Halaman Pemesanan/Periode

Untuk tampilan aksi show dapat dilihat pada Gambar 45 berikut :

Gambar 45 : Tampilan Halaman Ubah Status Transaksi

Page 75: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

57

e. Form Tampilan Menu Manajemen

Menu manajemen berfungsi untuk memasukkan data, mengubah data,

dan menampilkan data. Berikut akan ditampilkan salah satu dari menu yang

ada seperti yang sudah dijelaskan sebelumnya, yaitu menu barang yang

memiliki sub menu tambah barang dan edit barang.

1. Halaman Manajemen Tambah Barang

Data yang harus dimasukkan adalah kategori barang, sub kategori,

merk, nama barang, file gambar, gambar detail, harga satuan, diskon, min

pesan, dan keterangan. Tampilan manajemen tambah barang dapat dilihat

pada Gambar 46 berikut :

Gambar 46 : Tampilan Halaman Manajemen Tambah Barang

Page 76: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

58

2. Halaman Manajemen Edit Barang

Halaman ini menyediakan list data kategori barang, sehingga

memudahkan admin untuk mengubah barang yang diinginkan. Tampilan edit

barang ditunjukkan pada Gambar 47 dan tampilan edit barang detail pada

Gambar 48 berikut :

Gambar 47 : Tampilan Halaman Manajemen Edit Barang

Gambar 48 : Tampilan Halaman Manajemen Edit Barang Detail

Page 77: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

59

f. Form Tampilan Halaman Laporan

Menu laporan berisi semua data yang sudah dimasukkan pada

database. Menu laporan terdiri dari laporan data master dan laporan data

lanjutan. Masing-masing memiliki sub menu seperti pada penjelasan

sebelumnya. Salah satunya adalah laporan semua barang. Tampilan Laporan

semua barang dapat dilihat pada Gambar 49 berikut :

Gambar 49 : Tampilan Halaman Laporan Semua Barang

Untuk laporan barang/sub kategori ditampilkan dalam bentuk list data

seperti pada Gambar 50 berikut :

Page 78: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

60

Gambar 50 : Tampilan Halaman Laporan Data Barang/Sub Kategori

Untuk tampilan detail daftar barang / sub kategori dapat dilihat pada

Gambar 51 berikut :

Gambar 51 : Tampilan Halaman Laporan Data Barang/Sub Kategori Detail

g. Form Tampilan Cetak Laporan

Menu laporan seperti yang sudah dijelaskan di atas dapat dicetak

dalam format pdf. Berikut adalah laporan data sub kategori dapat dilihat pada

gambar 52 :

Gambar 52 : Tampilan Halaman Cetak Laporan Sub Kategori

Page 79: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

61

Untuk tampilan cetak laporan semua pelanggan dapat dilihat pada Gambar

53 berikut :

Gambar 53 : Tampilan Halaman Cetak Laporan Semua Pelanggan

B. EVALUASI PERANGKAT LUNAK

Evaluasi program dapat dilakukan dengan cara mengimplementasikan

program sehingga dapat diketahui kekurangan dan kelebihan program. Adapun

kelebihan dan kekurangan sistem penjualan batik online ini adalah :

1. Kelebihan program

a. Proses pencarian dengan memasukkan kata kunci sehingga lebih memudahkan

dalam pencarian data yang diinginkan.

b. Menyediakan fasilitas login admin pada halaman user, sehingga lebih

memudahkan admin untuk masuk pada halaman administrator tanpa harus

memasukkan alamat terlebih dahulu pada halaman URL.

c. Menyediakan menu untuk menghubungkan ke facebook pemilik toko.

2. Kekurangan program

a. Penjualan hanya terbatas di negara Indonesia saja.

b. Keamanan / security data pada admin belum terjamin karena masih bersifat

single user.

Page 80: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user 62

BAB V

PENUTUP

A. Kesimpulan

Berdasarkan pembahasan diatas, maka dapat diambil kesimpulan sebagai

berikut :

1. Terciptanya sebuah sistem informasi penjualan online toko Erma Ahmad

Batik Solo yang dapat membantu meningkatkan dalam pemasaran dan

penjualan produk secara online dengan menggunakan program PHP dan

MySQL sebagai database-nya.

2. Aplikasi ini termasuk ke dalam klasifikasi B2C (Business to Consumer) yaitu

mekanisme toko online (electronic shopping mall), yaitu transaksi antara e-

merchant dengan e-customer.

3. sistem informasi penjualan online ini menyediakan fasilitas yang dapat

digunakan oleh user yaitu pencarian produk, ubah data pelanggan, polling,

daftar transaksi pelanggan, informasi cara pemesanan, menghubungkan ke

facebook pemilik toko, dan buku tamu bagi user untuk memberikan komentar.

4. Pemesanan barang bersifat indent, sehingga pelanggan dapat memesan dalam

jumlah kecil maupun jumlah besar sesuai dengan daftar barang yang

ditampilkan.

B. Saran

Untuk pengembangan penelitian sistem ini di kemudian hari maka perlu

diberikan beberapa saran sebagai berikut :

1. Diperlukan pengembangan sistem yaitu penjualan dapat sampai ke luar negeri,

tidak hanya terbatas di Indonesia.

Page 81: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

63

2. Perlunya pengembangan menu yaitu timbal balik guestbook dari admin

kepada user guna kenyamanan dan interaktif aplikasi toko online.

3. Aplikasi toko online ini hanya bisa diakses menggunakan browser Mozilla

Firefox, selain browser tersebut tampilan berubah. Sehingga diperlukan

perbaikan pada content CSS-nya.

Page 82: PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO …eprints.uns.ac.id/6293/1/211902111201101191.pdf · PEMBUATAN SISTEM INFORMASI PENJUALAN ONLINE DI TOKO ERMA AHMAD BATIK SOLO

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

DAFTAR PUSTAKA

Kadir Abdul. 2001. Konsep dan Tuntunan Praktis Basis Data. Yogyakarta : Andi

__________. 2009. From Zero to A Pro Membuat Aplikasi Web dengan PHP +

Database MYSQL. Yogyakarta : Andi

Nugroho Bunafit. 2004. PHP & MySQL dengan Editor Dreaweaver MX.

Yogyakarta : Andi

______________. 2008. Membuat Sistem Informasi Penjualan Berbasis WEB

dengan PHP dan MySQL. Yogyakarta : Andi

Riyanto. 2010. Membuat Sendiri Sistem Informasi Penjualan dengan PHP dan

MySQL. Yogyakarta : Gava Media

Leman. 1998. Metodologi Pengembangan Sistem Informasi. Jakarta : PT ElexMedia Komputindo

Laodesyamri. 2010. Diagram Konteks. http://id.shvoong.com/tags/konteks-

diagram, di download pada 2 November 2010 19.00

Ramadhani, 2003. http://dhani.singcat.com/files/pengenalan_internet, di

download pada 1 Mei 2011 18.00

Purba, 2010. http://www.binushacker.net/tips/pengetian-e-coomerce-secara-

umum.html, di download pada 1 Mei 2011 18.20

Shanti Dini, 2009. http://www.belajarcss.com/panduan-css/pengenalan-css, di

download pada 1 Mei 2011 18.09