commit to user
i
PEMBUATAN SISTEM INFORMASI PENJUALANONLINE
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
commit to user
ii
HALAMAN PERSETUJUAN
PEMBUATAN SISTEM INFORMASI PENJUALANONLINE
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
commit to user
commit to user
iv ABSTRACT
Erline Vitri Astika, 2011. The Development of Online Sale Information System at Solo Erma Ahmad Batik Shop. DIII Computer Science Program, Informatics Engineering Faculty of Mathematic and Natural Sciences, Sebelas Maret University.
Internet with a variety of application is basically a media used for communication process efficiency. Through the internet, sale business can be done online. Some of them include sale through facebook and website. The users just need to access the internet and look for the needed site. Such the site will display a variety of products offered and how to make sell-buy transaction. The objective of this final project is to develop an online sale information system that can give convenience in transaction and information to the consumer for buying the goods using internet media.
The research methods used in this Final Project were observation and library study. This program was developed using PHP and MySQL database. The display design was built using Macromedia Dreamweaver.
The result of research is online sale information system at Solo Erma Ahmad Batik Shop.
commit to user
v INTISARI
Erline Vitri Astika, 2011. Pembuatan Sistem Informasi Penjualan
Online di Toko Erma Ahmad Batik Solo. Program DIII Ilmu Komputer,
Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta.
Internet dengan berbagai aplikasi pada dasarnya adalah media yang digunakan untuk efisiensi proses komunikasi. Dengan melalui internet, dapat dilakukan bisnis penjualan secara online. Beberapa diantaranya seperti penjualan melaluifacebook maupun website. Parauser hanya perlu mengakses internet dan mencari situs yang dibutuhkan. Situs tersebut akan menampilkan berbagai produk yang mereka tawarkan dan bagaimana cara melakukan transaksi jual beli.
Tujuan dari Tugas Akhir ini adalah membuat sistem informasi penjualan
onlineyang dapat memberikan kemudahan bertransaksi maupun informasi kepada konsumen untuk pembelian barang dengan menggunakan media internet.
Metode penelitian yang digunakan dalam penyusunan Tugas Akhir ini adalah observasi dan studi pustaka. Program ini dikembangkan menggunakan PHP dan database MySQL. Desain tampilan dibangun menggunakan Macromedia Dreamweaver.
Hasil dari penelitian ini adalah sistem informasi penjualanonline di toko Erma Ahmad Batik Solo.
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.
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.
Mbk2kumbk 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
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 PenjualanOnlinedi 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 penjualanonlineErma Ahmad batik Solo.
5. Kedua orang tua dan keluarga yang senantiasa memberi semangat dan
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 batikonline.
Akhir kata penulis mengucapkan terima kasih dan mohon untuk saran dan
kritik yang bersifat membangun.
Wassalamu’alaikum warahmatullahi wa barakatuh.
Surakarta, 25 Februari 2011
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
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. PengenalanDatabase... 7
C. Pengenalan MySQL ... 8
D. Pengenalan PHP... 9
E. Pengenalan PhpMyAdmin ... 9
F. Pengenalan XAMPP ... 9
G. Pengenalan Dreamweaver 8 ... 10
H. PengenalanE-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
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. DesainLayoutHalaman Beranda ... 30
2. DesainLayoutHalaman Buku Tamu... 33
3. DesainLayoutHalaman Daftar Barang... 34
4. DesainLayoutHalamanLoginAdmin ... 35
5. DesainLayoutHalaman Utama Admin... 35
BAB IV. IMPLEMENTASI DAN ANALISA ... 36
A. IMPLEMENTASI SISTEM ... 36
1. HalamanUser... 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
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 PelangganLogin... 48
2. Halaman Admin ... 51
a. Form Tampilan HalamanLoginAdmin ... 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
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
commit to user
xv
DAFTAR GAMBAR
Nomor Halaman
1. Diagram Konteks ... 15
2. DFDLevel0... 16
3. DFDLevel1 Proses Pemesanan ... 18
4. DFDLevel1 Proses Manajemen Pelanggan... 19
5. DFDLevel1 Proses Manajemen Pemesanan Barang ... 20
6. Flowchart ... 22
7. ERD (Entity Relationship Diagram)... 23
8. Skema Diagram... 24
9. DesainLayoutHalaman Beranda... 32
10. DesainLayoutHalaman Buku Tamu ... 33
11. DesainLayoutHalaman Daftar Barang... 34
12. DesainLayoutHalamanLoginAdmin... 35
13. DesainLayoutHalaman 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
commit to user
xvi
19. Tampilan Halaman Registrasi... 40
20. Tampilan Halaman Kesalahan Registrasi... 40
21. Tampilan HalamanLoginPelanggan ... 41
22. Tampilan Halaman KesalahanLoginPelanggan ... 41
23. Tampilan Halaman Sub Kategori Barang ... 42
24. Tampilan Halaman Daftar Barang ... 42
25. Tampilan Halaman Status BelumLogin ... 43
26. Tampilan Halaman StatusLogin... 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 HalamanLoginAdmin ... 51
36. Tampilan Halaman Utama Admin ... 52
37. Tampilan Halaman Tambah Admin... 53
38. Tampilan Halaman Kesalahan Tambah Admin... 53
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 ManajemenEditBarang ... 58
48. Tampilan Halaman ManajemenEditBarang 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
commit to user
xviii
DAFTAR LAMPIRAN
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 caraonline.Melalui cara iniusertidak 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
kenyamananuserdalam 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
commit to user
Keuntungan jika melalui website, user dapat langsung memesan barang yang diinginkan setelah berhasil melakukan registrasi danloginpelanggan tanpa harus menunggu konfirmasi dari pemilik toko. Jadi pemilik toko tidak perlu bersusah
payah untuk selalu berhadapan dengan komputer setiap hari demi melayani setiap
useryang ingin melakukan pemesanan melaluifacebook.
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 secaraonline.”
C. BATASAN MASALAH
Batasan masalah pada pembuatan aplikasi tokoonlineini 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 barangindent.
D. TUJUAN PENELITIAN
Tujuan yang ingin dicapai pada masalah yang dibahas adalah membuat
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 PustakaStudi 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
commit to user
1. SISTEMATIKA PENULISANSistematika 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 tokoonline.
4. BAB IV : IMPLEMENTASI DAN ANALISA
Pada bab ini berisikan implementasi sistem pada halamanuserdan admin, serta kelebihan dan kelemahan perangkat lunak.
5. BAB V : PENUTUP
Bab ini berisi tentang kesimpulan yang diambil dari pembahasan aplikasi
commit to user
5BAB 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
commit to user
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 keydiberi 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 ModelEntity 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 /
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. PengenalanDatabase
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
databasediperlukan adalah :
commit to user
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 aplikasiMulti 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 sepertiVisual 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
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 sisiserver(disebutserver-side).
PHP merupakan bahasa standar yang digunakan dalam duniawebsite. 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 adalahmysql_connect(), mysql_select_db(), dan sebagainya (Nugroho, 2004).
E. Pengenalan PhpMyAdmin
PhpMyAdmin adalah suatu programopen 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
commit to user
F. Pengenalan XAMPP
XAMPP adalah paket PHP berbasis Open Source yang dikembangkan oleh sebuah komunitasOpen 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,
Javascriptmaupun bentuk program yang lainnya (Nugroho, 2004).
commit to user
11
Ada beberapa sebutan untuk E-commerce yaitu Internet Commerce atau
EcomatauE-commerceatauImmerce, 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 sebuahweb shop24 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 bisnisonline 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,
commit to user
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 disebutserver.
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 diweb serverlainnya.Linkmemudahkan para pengaksesweb
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 pemakaianstyle(font, warna, jarak baris, dan sebagainya) untuk dokumen terstruktur suatu halaman HTML.CSS memisahkanpresentation
sebuah dokumen daricontentdokumen 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 padawebsite.
Kekurangan menggunakan CSS adalah tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan
commit to user
14BAB 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 ® DualCore ™
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 levelterbawah pada DFD. Model ini berfungsi mendeksripsikan apa yang dilakukan ketika masukan
ditransformasi menjadi keluaran. Diagram alir data dapat digambarkan sebagai
commit to user
15
1. Diagram Konteks
[image:33.612.132.505.207.472.2]Diagram konteks pada sistem informasi penjualan online toko Erma Ahmad Batik Solo ditampilkan pada Gambar 1 berikut ini :
Gambar 1 : Diagram Konteks
Keterangan :
a. Pengunjunghanya bisa melihat informasiwebsite, 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 proseslogin, akses informasi websitedan produk, dan pemesanan barang. Setelah melakukan pemesanan barang
akan mendapat konfirmasi daftar transaksi.
commit to user
2. Data Flow Diagram(DFD)
[image:34.612.140.525.206.642.2]DFD pada sistem informasi penjualan onlinetoko Erma Ahmad Batik Solo ditampilkan pada Gambar 2 berikut ini :
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 datastorepelanggan.
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.
commit to user
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.
DFDLEVEL1 PROSES 3 PEMESANAN
SISTEM INFORMASI PENJUALANONLINE
ERMA AHMAD BATIK SOLO
Pelanggan 3.1 Pilih Barang Data Pemesanan 3.3 Transaksi
Lanjut Data Pesan
[image:36.612.140.500.208.539.2]Detail Konfirmasi Daftar Transaksi 3.2 Masuk Kantong Belanja Data Kantong ID Barang Data Barang Detail Data Transaksi Terakhir Data Kantong Data Kantong Belanja Data Kantong Belanja
commit to user
[image:37.612.159.477.106.684.2]19
commit to user
Gambar 5 : DFDLevel1 Proses Manajemen Pemesanan Barang
3. Spesifikasi Proses(Process Specification)
[image:38.612.157.486.177.464.2]a. PSPEC 0.3 Pemesananpada 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
commit to user
21
b. PSPEC 0.4 Pemesananpada Gambar 4 dapat dijelaskan sebagai berikut :
Tabel 2. PSPEC Manajemen Pelanggan
PSPEC 0.4 Manajemen Pelanggan
Masukan Datapolling, 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.
[image:39.612.125.512.155.621.2]c. PSPEC 0.6 Pemesananpada 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
commit to user
4. FlowchartFlowchart pada sistem informasi penjualan online toko Erma Ahmad Batik Solo ditampilkan pada Gambar 6 berikut ini :
PENGUNJUNG PELANGGAN ADMIN
Start Data Pendaftaran Login Pelanggan Data Konfirmasi Daftar Data Konfirmasi Login Pelanggan Data Pelanggan Daftar Data Buku Tamu Manajemen Pelanggan Manajemen Pemesanan Barang Pemesanan Barang ID Barang Konfirmasi Daftar Transaksi Data Kategori Data Sub Kategori Data Barang Data Pesan Detail ID Login Pelanggan Data Propinsi Data Polling Data Kantong Data Pemesanan Manajemen Admin Data Berita Data Admin Data Informasi Produk & Website Data Informasi Produk & Website Login Admin Data Konfirmasi Login Admin ID Login Admin Stop Lihat Data Informasi
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 :
commit to user
2. Skema DiagramSkema 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
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
commit to user
c. Tabel BeritaTabel berita digunakan untuk menyimpan data informasi mengenai
perkembangan batik terbaru yang dijual di toko tersebut yang dimasukkan
olehadministrator. 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 tentangwebyang diisi olehuser. 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
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.
commit to user
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 Keterangan
no_pesan char 5 * No Primary Key
id_plg char 25 No
tanggal Date No
jam time No
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
commit to user
k. Tabel Sub KategoriTabel 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. TabelPolling
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), halamanloginadmin, dan halaman utama admin.
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 Headerberisi 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. MenuPolling Layananuserterhadap penilaianwebsite.
f. Menu Pencarian Pencarian produk berdasar kata kunci.
g. Menu Informasi Berisi mengenai info cara pembelian.
h. Menu Koleksi Kita Berisislide showgambar produk yang dijual.
i. Menu Jejaring Sosial Berisilinkmenuju facebook pemilik toko.
j. Menu Admin Berisi menulink loginadmin.
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.
commit to user
commit to user
33
2. DesainLayoutHalaman Buku Tamu
Tampilan desainlayouthalaman buku tamu dapat dilihat pada Gambar 10 berikut :
Simpan Reset Tampil Nama
Komentar BUKU TAMU
HEADER
BERANDA PROFIL BUKU TAMU KONTAK
MENU UTAMA Teks IKLAN User Password Login Registrasi PELANGGAN FOOTER Beranda Profil Buku Tamu Kontak Berita Kategori Barang Subkat Barang Daftar Barang POLLING
Info Cara Pembelian INFORMASI PENCARIAN Kata Kunci KOLEKSI KITA JEJARING SOSIAL FACEBOOK ADMIN Login Admin Gambar Gambar
commit to user
3. DesainLayoutHalaman Daftar BarangTampilan 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 Beranda Profil Buku Tamu Kontak Berita Kategori Barang Subkat Barang Daftar Barang Gambar Nama Barang Harga Barang Beli Gambar Nama Barang Harga Barang Beli POLLING
Info Cara Pembelian INFORMASI PENCARIAN Kata Kunci KOLEKSI KITA JEJARING SOSIAL FACEBOOK ADMIN Login Admin Gambar Gambar Gambar Nama Barang Harga Barang Beli
commit to user
35
4. DesainLayoutLogin Admin
[image:53.612.140.508.181.681.2]Tampilan desain layout halaman login admin dapat dilihat pada Gambar 12 berikut :
Gambar 12 : DesainLayoutHalamanLoginAdmin
5. DesainLayoutHalaman 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 desainlayout halaman utama admin dapat dilihat pada Gambar 13 berikut :
commit to user
36BAB 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. HALAMANUSER
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. formloginuntukloginanggota,
4. menusign upuntuk registrasi pengunjung,
5. menu fasilitas yang terdiri dari polling, pencarian, informasi, koleksi, jejaring sosial dan menu admin (untukloginadmin).
commit to user
[image:55.612.134.505.103.521.2]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.
commit to user
membangun bagi toko Erma Ahmad Batik. Tampilan halaman buku tamu
[image:56.612.133.509.151.558.2]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
commit to user
[image:57.612.158.483.103.469.2]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, danemail),
2. alamat pelanggan (negara dengandefaultIndonesia, propinsi, kota, alamat, dan kode pos),
3. data no kontak (no telepon, nohandphone, dan nofax),
commit to user
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
[image:58.612.140.504.133.468.2]dilihat pada Gambar 20 berikut :
commit to user
41
e. Form Tampilan HalamanLoginPelanggan
[image:59.612.146.511.159.544.2]Halaman login pelanggan adalah halaman untuk dapat melakukan pembelian sehingga pelanggan harus melakukanloginterlebih 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 HalamanLoginPelanggan
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 KesalahanLoginPelanggan
f. Form Tampilan Halaman Sub Kategori Barang
Halaman ini dapat diakses olehuserumum. Halaman ini menampilkan produk barang berdasarkan sub kategori sehingga memudahkan pembeli
melihat pembagian-pembagian sub kategori barang. Tampilan halaman sub
commit to user
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 baranguser 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.
commit to user
43
[image:61.612.151.505.174.461.2]Jika ingin membelinya maka harus melakukan login terlebih dahulu, jika belumloginmaka akan tampil halaman belumloginseperti pada Gambar 25 berikut :
Gambar 25 : Tampilan Halaman Status BelumLogin
h. Form Tampilan Halaman Pemesanan
Berikut akan ditampilkan langkah awal untuk memulai pemesanan
barang. Hanya pelanggan yang dapat melakukan pembelian, maka haruslogin
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
commit to user
Gambar 26 : Tampilan Halaman StatusLogin
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 lanjutkanjika pelanggan sudah yakin dengan barang yang akan dibeli, maka akan masuk ke halaman konfirmasi pembayaran.
Tampilan halaman kantong belanja dapat dilihat pada Gambar 27
commit to user
[image:63.612.135.506.103.459.2]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
commit to user
commit to user
47
Pada halaman konfirmasi transaksi berisikan konfirmasi barang
belanja, total belanja, biaya kirim, unik transfer, total pembayaran, dan
[image:65.612.136.507.191.575.2]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
commit to user
Gambar 30 : Tampilan Halaman Transaksi Sukses
i. Form Tampilan Halaman PelangganLogin
Berikut adalah menu yang disediakan jika pelanggan telahloginyaitu
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 transaksimenu 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
commit to user
[image:67.612.150.505.107.619.2]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
commit to user
Gambar 33 : Tampilan Halaman Daftar Transaksi Terakhir
Untuk tampilan aksi tampil dapat dilihat pada Gambar 34 berikut :
commit to user
51
2. HALAMAN ADMIN
a. Form Tampilan HalamanLoginAdmin
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
[image:69.612.150.510.193.469.2]boleh mengaksesnya. Tampilan halaman login admin dapat dilihat pada Gambar 35 berikut :
Gambar 35 : Tampilan HalamanLoginAdmin
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 :
commit to user
(2) Sub Kategori (Tambah Sub_Kat danEditSub_Kat),
(3) Merk (Tambah Merk danEditMerk),
(4) Barang (Tambah Barang danEditBarang),
(5) Propinsi (Tambah Propinsi danEditPropinsi),
(6) Berita (Tambah Berita danEditBerita),
(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) MenuLogout.
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 daneditadmin.
1. Halaman Konfigurasi Tambah Admin
Berisikan data admin dan data login. Untuk data admin terdiri dari nama lengkap, danemail. Untuk dataloginberisikanuser name, danpassword
untuk dapat masuk ke halaman admin. Tampilan halaman tambah admin dapat
[image:71.612.151.507.211.463.2]dilihat pada Gambar 37 berikut :
Gambar 37 : Tampilan Halaman Tambah Admin
Apabila melakukan kesalahan input, akan muncul pesan peringatan
seperti pada gambar 38 berikut :
commit to user
2. Halaman KonfigurasiEditAdmin
[image:72.612.135.510.223.571.2]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 HalamanEditAdmin
Untuk tampilan aksi ubah data admin berfungsi untuk mengubah id
pelanggan, nama lengkap, danemail. 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
commit to user
55
pemesanan/periode. Berikut adalah tampilan dari pemesanan/nomor yang
[image:73.612.134.524.150.692.2]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 :
commit to user
Untuk tampilan aksi ubah status hanya berfungsi untuk mengubah
status bayar saja, dari ’PESAN’ menjadi ‘LUNAS’. Tampilan halaman ubah
[image:74.612.148.508.172.477.2]status transaksidapat 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 :
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 daneditbarang.
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
[image:75.612.150.507.200.645.2]pada Gambar 46 berikut :
commit to user
2. Halaman Manajemen Edit Barang
Halaman ini menyediakan list data kategori barang, sehingga memudahkan admin untuk mengubah barang yang diinginkan. Tampilanedit
[image:76.612.180.459.217.682.2]barang ditunjukkan pada Gambar 47 dan tampilan edit barang detail pada Gambar 48 berikut :
Gambar 47 : Tampilan Halaman
