pengembangan aplikasi e-commerce pada toko batik...
TRANSCRIPT
PENGEMBANGAN APLIKASI E-COMMERCE PADA
TOKO BATIK SHOP
Oleh :
NOVITA YUNIARTI
105091002810
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2010
PENGEMBANGAN APLIKASI E-COMMERCE PADA
TOKO BATIK SHOP
SKRIPSI
Oleh :
NOVITA YUNIARTI
105091002810
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2010
PENGEMBANGAN APLIKASI E-COMMERCE PADA TOKO BATIK SHOP
Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar
Sarjana Komputer Fakultas Sains dan Teknologi
Universitas Islam Negeri Syarif Hidayatullah Jakarta
Oleh
Novita Yuniarti
105091002810
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2010
ii
PENGEMBANGAN APLIKASI E-COMMERCE PADA TOKO BATIK SHOP
Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar
Sarjana Komputer Fakultas Sains dan Teknologi
Universitas Islam Negeri Syarif Hidayatullah Jakarta
Oleh
NOVITA YUNIARTI
105091002810
Menyetujui,
Pembimbing I
Yusuf Durrachman, M.Sc, M.IT NIP. 197105222006041002
Pembimbing II
Nida’ul Hasanati, ST, MMSI
Mengetahui, Ketua Program Studi Teknik Informatika
Yusuf Durrachman, MSc, M.IT NIP. 197105222006041002
iii
PENGESAHAN UJIAN
Skripsi berjudul ”Pengembangan Aplikasi E-commerce Pada Toko Batik Shop” yang ditulis oleh Novita Yuniarti, NIM 105091002810 telah diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal 1 Juni 2010. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar sarjana strata satu (S1) Program Studi Teknik Informatika.
Jakarta, Juni 2010
Menyetujui :
Penguji 1
Herlino Nanang, MT NIP. 197312092005011002
Penguji II
A’ang Subiyakto, M.Kom NIP. 150 411 252
Pembimbing 1
Yusuf Durrachman, M.Sc, M.IT NIP. 197105222006041002
Pembimbing II
Nida’ul Hasanati, ST, MMSI
Mengetahui :
Dekan Fakultas Sains dan Teknologi
DR. Syopiansyah Jaya Putra, M.SisNIP. 196801172001121001
Ketua Program Studi Teknik Informatika
Yusuf Durrachman, M.Sc, M.IT
NIP. 197105222006041002
iv
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-BENAR
HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI
ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANA
PUN.
Jakarta, Juni 2010
Novita Yuniarti 105091002810
v
vi
ABSTRAK
Novita Yuniarti, Pengembangan Aplikasi E-Commerce Pada Toko Batik Shop
dibimbing oleh Bapak Yusuf Durrachman, M.Sc, M.IT dan Ibu Nida’ul Hasanati,
ST, MMSI.
Perkembangan teknologi telekomunikasi dan komputer menyebabkan terjadinya
media elektronik menjadi salah satu media andalan untuk melakukan komunikasi dan
bisnis. E-Commerce merupakan media elektronik yang meliputi aktifitas transaksi
perdagangan melalui sarana internet. Dengan memanfaatkan e-commerce, para penjual
dapat menawarkan produknya secara lintas negara karena sifat internet tidak mengenal
batasan geografis dan transaksi pun dapat berlangsung secara real time. Metode yang
digunakan dalam mengembangan aplikasi ini adalah metode pengembangan SDLC
(System Development Life Cycle) dengan model proses waterfall meliputi: analysis,
design, code generation, testing dan support. Hasil dari skripsi ini adalah berupa aplikasi
toko online yang berguna bagi Toko Batik Shop yang berhasil dibuat dengan
menggunakan Prestashop versi 1.2.5.0. Aplikasi ini memiliki tampilan katalog dan
tahapan checkout yang dapat mempermudah pelanggan dalam berbelanja dan
bertransaksi. Selain itu, aplikasi ini menerapkan sistem internet dan memiliki basis data.
Diharapkan pada masa mendatang aplikasi ini mendapat pengembangan lanjutan untuk
akses ini melalui ponsel.
Kata Kunci : E-commerce, Waterfall, real time, System Development Life Cycle, Content
Management System
DAFTAR ISI
Halaman
Halaman Judul ............................................................................................
Halaman Persetujuan pembimbing ............................................................
Halaman Pengesahan .................................................................................
Halaman Pernyataan ...................................................................................
Abstrak .......................................................................................................
Kata Pengantar ...........................................................................................
Daftar Isi .....................................................................................................
Daftar Gambar ............................................................................................
Daftar Tabel ...............................................................................................
Daftar Simbol……………………………………………………………...
Daftar Lampiran .........................................................................................
Daftar Pustaka……………………………...……………………………...
i
iii
iv
v
vi
vii
ix
xiv xvi xviii xx 96
BAB I PENDAHULUAN
1.1 Latar Belakang................................................................................
1.2 Perumusan Masalah........................................................................
1.3 Pembatasan Masalah.......................................................................
1.4 Tujuan………….............................................................................
1.5 Manfaat…………...........................................................................
1.6 Metodologi Penelitian.....................................................................
1
2
2
3
4
5
ix
1.6.1 Metode Pengumpulan Data…………………………….….
1.6.2 Metode Pengembangan Sistem……………………………
1.7 Sistematika Penulisan.....................................................................
5
6 7
BAB II LANDASAN TEORI
2.1 Sejarah Dan Istilah Internet….........................................................
2.1.1 Sejarah Internet…................................................................
2.1.2 Istilah Internet……………………………………………..
2.2 E-commerce………………………………………………………
2.2.1 Definisi E-commerce............................................................
2.2.2 Jenis-Jenis E-commerce.......................................................
2.2.3 Keuntungan-Keuntungan E-commerce................................
2.2.4 Kegiatan yang Berhubungan dengan E-commerce..............
2.2.5 Resiko dalam E-commerce...................................................
2.3 Basis Data........................................................................................
2.4 MySQL.............................................................................................
2.4.1 Definisi MySQL...................................................................
2.4.2 Keunggulan MySQL............................................................
2.5 Analisis Sistem………………………………..…………………..
2.5.1 Context Diagram…………………………………..………
2.5.2 Data Flow Diagram (DFD)…………………………….…
2.5.3 Entity Relationship Diagram (ERD)…………………..….
2.5.4 State Transition Diagram (STD)……………………..…..
9
9
10
12
12
13
15
16
17
18
20
20
21
21
21
21
22
23
x
2.6 PHP................................................................................................
2.7 XAMPP...........................................................................................
2.8 CMS (Content Management System)..............................................
2.7.1 Pengertian CMS...................................................................
2.7.2 Beberapa Jenis CMS............................................................
2.9 Prestashop.......................................................................................
2.9.1 Pengertian Prestashop..........................................................
2.9.2 Manfaat Prestashop bagi pelanggan.....................................
2.9.3 Manfaat Prestashop bagi pemilik toko online………..……
2.10 Toko Online...................................................................................
2.10.1 Definisi Toko Online...........................................................
2.10.2 Manfaat Toko Online...........................................................
2.11 Waterfall model..............................................................................
2.12 Paypal............................................................................................
2.12.1 Sejarah Paypal......................................................................
2.12.2 Definisi Paypal.....................................................................
2.13 Studi Sejenis...................................................................................
26
26
27
27
28
32 32 32 34 37 37 37 38 41 41 41 42
BAB III METODOLOGI PENELITIAN
3.1 Waktu dan Lokasi Penelitian...........................................................
3.2 Metode Pengumpulan Data..............................................................
3.2.1 Wawancara...........................................................................
3.2.2 Observasi..............................................................................
45
45
45
46
xi
3.2.3 Studi Pustaka........................................................................
3.2.4 Kuesioner.............................................................................
3.3 Metode Pengembangan Aplikasi....................................................
3.3.1 Analysis...............................................................................
3.3.2 Design (Perancangan)..........................................................
3.3.3 Code Generation (Pengkodean)...........................................
3.3.4 Test (Pengujian)...................................................................
3.3.5 Support (Pemeliharaan)........................................................
46
46
47
48
48
50
50
51
BAB IV PEMBAHASAN
4.1 Sekilas Tentang Batik Shop.............................................................
4.1.1 Profil Batik Shop...................................................................
4.1.2 Visi dan Misi Batik Shop......................................................
4.1.2.1 Visi.........................................................................
4.1.2.2 Misi........................................................................
4.1.3 Struktur Organisasi...............................................................
4.2 Pengembangan Aplikasi Batik Shop...............................................
4.2.1 Analysis.................................................................................
4.2.2 Design (Perancangan)............................................................
4.2.2.1 Perancangan Context Diagram...............................
4.2.2.2 Data Flow Diagram (DFD)……….........................
4.2.2.3 Entity Relationship Diagram (ERD).......................
4.2.2.4 Perancangan Database…………..……………….
52
52
53
53
53
53
54
54
58
58
63
66 68
xii
xiii
4.2.2.5 Perancangan Struktur Menu………………………
4.2.2.6 Perancangan Desain Halaman Home……………..
4.2.2.7 State Transition Diagram (STD)…………………
4.2.3 Code Generation (Pengkodean).............................................
4.2.3.1 Instalasi Prestashop..................................................
4.2.3.2 Penggunaan Paypal..................................................
4.2.3.3 Kebutuhan Sistem....................................................
4.2.4 Test (Pengujian).....................................................................
4.2.4.1 Pengujian Mandiri..................................................
4.2.4.2 Pengujian Lapangan...............................................
4.2.5 Support (Pemeliharaan).........................................................
71 72 75 78 78 86 88 88 90 91 92
BAB IV PENUTUP
5.1 Kesimpulan......................................................................................
5.2 Saran.................................................................................................
94 95
DAFTAR GAMBAR
Halaman
Gambar 2.1 Simbol Dalam DFD......................................................................... 22
Gambar 2.2 Simbol Dalam DFD......................................................................... 23
Gambar 2.3 Simbol Dalam DFD....................................................................... 25.
Gambar 2.4 Penentuan Alamat Pengiriman........................................................ 33
Gambar 2.5 Penentuan Kurir Pengiriman…………………………………….. 34
Gambar 2.6 Penentuan Cara Pembayaran........................................................... 34
Gambar 2.7 Layar Administrasi Katalog…………………………………….... 35
Gambar 2.8 Model pengembangan sistem dengan Waterfall............................. 38
Gambar 4.1 Struktur Organisasi......................................................................... 53
Gambar 4.2 Workflow Sistem Yang Sedang Berjalan........................................ 56
Gambar 4.3 Context Diagram Aplikasi Batik Shop............................................ 59
Gambar 4.4 Flowchart Proses Pemesanan Batik Online.................................... 62 Gambar 4.5 DFD Level 0.................................................................................... 63 Gambar 4.6 DFD level 1 Proses Pemesanan Barang.......................................... 64 Gambar 4.7 DFD level 1 (Proses Manajemen Data)…………………………… 65 Gambar 4.8 DFD level 1 (Proses Konfirmasi Pemesanan)...………………….. 66 Gambar 4.9 Entity Relationship Diagram……………………………………… 67 Gambar 4.10 Relationship Diagram……………………………………………. 67 Gambar 4.11 Rancangan Struktur Menu Home.................................................. 71 Gambar 4.12 Desain Halaman Home.................................................................. 73 Gambar 4.13 Desain Halaman Admin................................................................ 73
xiv
xv
Gambar 4.14 Desain halaman User.................................................................... 74
Gambar 4.15 Desain halaman Produk Kategori.................................................. 74
Gambar 4.16 STD Halaman Home..................................................................... 75
Gambar 4.17 STD Halaman Informasi............................................................... 76 Gambar 4.18 STD Halaman Kategori................................................................ 76 Gambar 4.19 STD Halaman user account......................................................... 77 Gambar 4.20 STD Halaman Search.................................................................. 77 Gambar 4.21 Akses Back office……………………………………………… 79
Gambar 4.22 Menu Back office……………………………………………… 80
Gambar 4.23 Modul Payment………………………………………………... 81
Gambar 4.24 Field Currencies………………………………………………. 82
Gambar 4.25 Add new modules image enlarge……………………………… 86
Gambar 4.26 Cara Kerja Paypal...................................................................... 87
DAFTAR LAMPIRAN
LAMPIRAN A ( Wawancara )
Wawancara dengan pihak toko Batik Shop ................................... A-1
Wawancara dengan pelanggan………………………………….... A-2
LAMPIRAN B ( Formulir Kuesioner Uji Coba )………………… B-1
LAMPIRAN C ( Hasil Perancangan Antarmuka )………………. C-1
LAMPIRAN D ( Source Code )…………………………………. D-1
Surat Keterangan Penelitian……………………………………… E-1
xx
DAFTAR SIMBOL
A. Data Flow Diagram (DFD)
B. Entity Relationship Diagram (ERD)
Notasi Keterangan
Himpunan Entitas / Entitas E
Atribut a sebagai key
Himpunan Relasi / Relasi R
Link
E
a
R
xvii
C. Flowchart
Simbol Arti Kegunaan
Start off Simbol untuk menandakan permulaan atau akhir dari suatu program
Manual Operation Operasi sistem secara manual
Proses Komputerisasi Proses secara komputerisasi
Decision Keputusan
Arsip Dokumen dalam bentuk file-file
Dokumen Dokumen dalam komputer
Arus Data Aliran data
Data Storage Simpanan dalam database
xviii
D. State Transition Diagram (STD)
Nama Gambar Notasi Keterangan
Keadaan Sistem (State)
Setiap kotak mewakili suatu keadaan dimana sistem mungkin berada di dalam
state.
Perubahan Sistem
Untuk memungkinkan suatu keadaan dengan keadaan lain, digunakan jika
sistem mewakili transisi dalam perilakunya, maka hanya jika suatu keadaan berubah menjadi keadaan
Kondisi dan Aksi
Untuk melengkapi STD, dibutuhkan dua hal tambahan, yaitu kondisi sebelum
keadaan berubah dan aksi dari pemakai untuk mengubah keadaan. Gambar
disamping adalah ilustrasi dari kondisi dan aksi yang ditampilkan di sebelah anak
panah yang menghubungkan dua keadaan.
condition
xix
DAFTAR TABEL
Halaman
Tabel 4.1 Tabel User………………………………………………….………. 68 Tabel 4.2 Tabel Type …..……………………………………………………… 68
Tabel 4.3 Tabel Gambar..................................................................................... 69 Tabel 4.4 Tabel Stok………………………………………………...………… 69 Tabel 4.5 Tabel Tarif Pengiriman...................................................................... 69 Tabel 4.6 Tabel Pemesanan............................................................................... 70 Tabel 4.7 Tabel Detail Pemesanan................................................................... 70 Tabel 4.8 Tabel Konfirmasi Pemesanan........................................................... 70 Tabel 4.9 Tabel Pesan...................................................................................... 70 Tabel 4.10 Tabel Hasil Pengujian Mandiri………………………..……….. 90
Tabel 4.11 Tabel Pengujian Lapangan………………………………………. 91
xvi
BAB I
PENDAHULUAN
1.1 Latar Belakang
Batik Shop merupakan salah satu butik yang menjual produk-
produk batik, hingga saat ini proses penjualannya masih bersifat
konvensional dimana pembeli berhubungan secara langsung dengan
datang ke toko Batik Shop. Dengan demikian pembeli membutuhkan biaya
yang lebih besar dan waktu yang cukup lama untuk membeli produk batik
yang diinginkan, selain itu pembeli kurang mendapatkan informasi tentang
produk-produk baru yang dijual pada toko Batik Shop.
Dalam era perkembangan teknologi telekomunikasi dan komputer
saat ini, Internet merupakan media informasi yang dapat diakses secara
lintas negara karena sifat internet tidak mengenal batasan geografis. Untuk
mengatasi permasalahan tersebut diatas yaitu dengan mengembangkan
suatu sistem perdagangan yang menggunakan teknologi internet, yang
disebut dengan electronic commerce (e-commerce).
E-commerce sebagai salah satu bentuk aktifitas transaksi
perdagangan melalui sarana internet. Dengan memanfaatkan e-commerce,
para penjual dapat menawarkan produknya secara on-line sehingga
memberikan kemudahan berbelanja, bertransaksi, dan pengiriman secara
efektif dan efisien. Mengunakan website e-commerce sebagai salah satu
1
media penjualan maka akan memperluas daerah pemasaran produk dan
memudahkan pembeli untuk memilih dan memesan produk tersebut
sehingga dapat meningkatkan omzet penjualan toko tersebut.
Untuk memberikan solusi atas masalah tersebut penulis mencoba
memberikan solusi dengan membangun aplikasi web e-commerce yang
dapat diperbaharui dan berguna bagi pembeli untuk mengetahui informasi
penjualan produk yang dijual pada toko Batik Shop.
Hal inilah yang mendorong penulis untuk melakukan penulisan
ilmiah yang berjudul “Pengembangan Aplikasi E-Commerce Pada
Toko Batik Shop”.
1.2 Perumusan Masalah
Berdasarkan latar belakang yang telah diuraikan di atas, maka
permasalahan yang akan dibahas adalah “Bagaimana membangun sebuah
aplikasi toko online pada Batik Shop yang mempunyai halaman
administrator untuk melakukan perubahan informasi pada aplikasi”.
1.3 Pembatasan Masalah
Pada pembuatan aplikasi ini, penulis membatasi masalah yang akan
dibahas sebagai berikut :
a. Mengenai sistem penjualan, yaitu penjualan produk batik secara
online.
2
b. Mengenai sistem transaksi, yaitu tahapan Check out yang terdiri atas
tiga langkah yaitu penentuan alamat pengiriman, penentuan kurir
pengiriman dan penentuan cara pembayaran.
c. Mengenai sistem belanja, yaitu tersedia fitur shopping cart.
d. Sistem pembayaran yang digunakan dalam aplikasi ini yaitu
menggunakan transfer antar bank yang kemudian di validasi oleh
admin setelah pembeli mengkonfirmasi pembayaran. Selain itu
pembayaran juga dilakukan menggunakan Paypal, transfer antar bank
dan COD (Cash On Delivery).
e. Data produk yang digunakan dalam aplikasi ini merupakan sampling
data yang ada di Batik Shop dengan spesifikasi berdasarkan size
(ukuran) M,L dan XL.
f. Tipe koneksi jaringan internet
g. Update produk baru dan informasi yang ada di Batik Shop.
1.4 Tujuan
Tujuan dari penelitian ini adalah :
1. Membuat aplikasi toko online pada toko Batik Shop
2. Menjadikan Batik Shop online sebagai suatu alternatif media penyedia
informasi yang dapat memudahkan pembeli mendapatkan informasi
produk-produk batik..
3. Memberikan informasi kepada pengunjung tentang produk-produk
baru yang dijual di toko Batik Shop.
3
1.5 Manfaat
Berikut manfaat yang dapat diperoleh dari penelitian ini sebagai
berikut :
1. Bagi Toko Batik Shop
b. Batik Shop dapat melakukan penjualan selama 24 jam dan
memperluas target pasar produknya, karena sifat internet yang
tidak mengenal batasan geografis.
c. Sistem penjualan melalui internet dapat memberikan peningkatan
kinerja perusahaan dalam hal penjualan barang.
d. Toko Batik Shop tidak perlu membuka cabang untuk pemasaran
produknya.
e. Membantu pembeli dalam mencari suatu informasi yang
dibutuhkan.
2. Bagi Pelanggan
a. Dapat menghemat waktu, tenaga, dan biaya bagi pelanggan, karena
transaksi dapat dilakukan tanpa harus datang ke toko.
b. Mempermudah pelanggan mendapatkan informasi yang terbaru
dan lengkap mengenai profil, produk, layanan dan jasa.
c. Dapat meningkatkan trust pelanggan terhadap teknologi e-
commerce.
4
3. Bagi Penulis
a. Bertambahnya wawasan dan pengalaman penulis tentang e-
commerce dan hal lainnya yang berkaitan dengan metodologi
penulisan tugas akhir ini.
b. Dapat memenuhi salah satu syarat dalam menyelesaikan kurikulum
tingkat akhir Program Studi Teknik Informatika Fakultas Sains dan
Teknologi Universitas Islam Negeri (UIN) Syarif Hidayatullah
Jakarta.
1.6 Metodologi Penelitian
Dalam penulisan ini menggunakan beberapa metodologi yang
bertujuan untuk mempermudah pembuatan dan perencanaan sistem yang
baru sebagai berikut :
1.6.1 Metode Pengumpulan Data
Merupakan metode yang digunakan penulis dalam
melakukan analisis data dan menjadikannya informasi yang akan
digunakan untuk mengetahui permasalahan yang dihadapi.
a. Wawancara
Pada tahap wawancara, bertujuan untuk mengetahui sistem
yang dibutuhkan dari segi arsitektur aplikasi, teknologi yang
digunakan serta pemanfaatannya apakah bermanfaat.
5
b. Observasi
Pada tahap observasi, merupakan kegiatan pengamatan dengan
meneliti dokumen-dokumen produk yang ada untuk pembuatan
aplikasi.
c. Studi Pustaka
Merupakan pengumpulan bahan-bahan yang berkaitan dengan
judul skripsi melalui membaca buku-buku dari perpustakaan
dan mencari referensi artikel dari internet.
d. Kuesioner
Penulis membagikan kuesioner uji coba aplikasi untuk
mengetahui sejauh mana aplikasi dapat dimengerti oleh calon
user.
1.6.2 Metode Pengembangan Sistem
Metode pengembangan yang penulis gunakan untuk
pengembangan aplikasi yaitu metode pengembangan SDLC
(System Development Life Cycle) dengan model proses Waterfall
yang pertama kali dikenal oleh Winston Royce yang
dipublikasikan pada tahun 1970 yang kemudian dikemukakan oleh
Pressman (Edisi 5 tahun 2001 : 28). Berikut tahapan-tahapannya :
a. Analysis (Analisis), yaitu merupakan tahap awal dimana
dilakukan proses pengumpulan data, identifikasi masalah,
usulan pemecahan masalah dan analisis kebutuhan sistem yang
difokuskan untuk pembuatan aplikasi.
6
b. Design (Perancangan), yaitu melakukan perancangan agar
dapat menyediakan layanan yang diharapkan. Pada tahap ini
dilakukan pembuatan Context Diagram, Data Flow Diagram
(DFD), Entity Relational Diagram (ERD), perancangan
database, perancangan struktur menu serta perancangan layar
aplikasi.
c. Code Generation (Pengkodean), yaitu melakukan penerapan
hasil rancangan ke dalam bentuk yang dapat dibaca dan
dimengerti oleh komputer.
d. Test (Pengujian), yaitu program harus diuji coba yang
difokuskan pada aktivitas pemastian bahwa semua perintah
yang ada telah dicoba dan fungsi eksternal untuk memastikan
bahwa dengan masukan tertentu suatu fungsi akan
menghasilkan keluaran sesuai dengan yang dikehendaki.
e. Support (Pemeliharaan), yaitu merupakan kegiatan
pemeliharaan terhadap data-data pada aplikasi yang harus
dilakukan secara rutin.
1.7 Sistematika Penulisan
Dalam penyusunan skripsi ini, pembahasan yang penulis sajikan
terbagi dalam lima bab, yang secara singkat akan diuraikan sebagai
berikut:
7
8
BAB I PENDAHULUAN
Bab ini membahas tentang latar belakang, perumusan
masalah, pembatasan masalah, tujuan dan manfaat
penelitian, metodologi penelitian dan sistematika penulisan.
BAB II LANDASAN TEORI
Pada Bab ini membahas secara singkat tentang teori-teori
yang diperlukan dalam menunjang penulisan skripsi.
BAB III METODOLOGI PENELITIAN
Pada bab ini akan dijelaskan metode-metode yang
digunakan penulis yang berhubungan dengan judul skripsi
ini.
BAB IV PEMBAHASAN
Dalam bab ini berisi tentang pembahasan mengenai
pengumpulan data yang penulis lakukan disertai analisis
dan pengembangan aplikasi kios informasi menggunakan
metode pengembangan piranti lunak System Development
Life Cycle tipe waterfall
BAB V PENUTUP
Bab ini adalah bab terakhir yang menyajikan kesimpulan
serta saran dari apa yang telah diterangkan dan diuraikan
pada bab-bab sebelumnya.
BAB II
LANDASAN TEORI
2.1 Sejarah Dan Istilah Internet
2.1.1. Sejarah Internet
Sejarah internet bermula ketika beroperasinya jaringan
ARPANET pada tahun 1969. Jaringan ARPANET pertama
tersebut hanya menghubungkan empat host komputer dan besar
bandwitdh-nya hanya 50kbps. Untuk lebih jelas, berikut ini
diuraikan timeline perkembangan internet sejak berdirinya sampi
dekade 90-an menurut sejarah dunia :
- Tahun 1967–1970 Lawrence G. roberts dari machusetts of
technology (MIT) mempresentasikan rencana pembangunan
ARPANET.
- Tahun 1968 proposal ARPANET dibuat untuk memulai proyek
tersebut.
- Tahun 1970 Host ARPANET mulai menggunakan NPC
(Network Control Protocol).
- Tahun 1971-1988 Roy Tomlinson dari BNN menciptakan
progam E-mail.
- 1975 steve walker membuat mailling list.
- 1979 Tom Truscott dan Jim Ellis memperkenalkan USENET.
9
- 15 maret 1985 Syimbolic.com tercatat sebagai domain pertama.
- 1988 Internet Relay chat (IRC) diciptakan oleh Jarkko
Oikrane.
- 1986 National Science Foundation (NSF) Backbone dibentuk.
- 1996 Internet World Expo.
- 2003 doc type xhtml, W3C, CSS, RSS, ATOM, blogs.
- 2006 & WEB 2.0 World Expo.
Sedangkan sejarah internet di Indonesia berawal dari :
- 1992 Berawal dari BPPT – UI – LAPAN.
- Terbentuk Paguyuban mengenai teknologi packet radio sebagai
basis untuk network regional.
- 1994 Indointernet sebagai ISP komersial pertama.
- 1996 paling tidak 20 ISP komersial & 40 ISP menunggu ijin
operasi.
- 2004 Telah lebih dari 20 ISP, dan koneksinya telah bertambah
banyak seperti dial up, Lease line, ADSL, Cable, Handphone
atau GPRS, WI FI.
2.1.2 Istilah Internet
Secara harfiah, internet (kependekan dari 'inter-network')
ialah rangkaian komputer yang berhubung menerusi beberapa
rangkaian. Sedangkan Internet (huruf 'I' besar) ialah sistem
komputer umum, yang berhubung secara global dan menggunakan
TCP/IP sebagai protokol pertukaran paket (packet switching
10
communication protocol). Rangkaian internet yang terbesar
dinamakan Internet. Cara menghubungkan rangkaian dengan
kaedah ini dinamakan internetworking.
Internet merupakan jaringan rangkaian komputer
networking dengan rangkaian komputer lain di seluruh dunia.
Internet berguna untuk kita berkomunikasi dan bertukar informasi,
file, data, suara, gambar dan sebagainya antara individu dan
manusia diseluruh dunia. Internet adalah sebuah sistem komunikasi
global yang menghubungkan komputer-komputer dan jaringan-
jaringan komputer di seluruh dunia.
Setiap komputer dan jaringan terhubung secara langsung
maupun tidak langsung ke beberapa jalur utama yang disebut
internet backbone dan dibedakan satu dengan yang lainnya
menggunakan unique name yang biasa disebut dengan alamat IP 32
bit. Dengan internet memperoleh berbagai informasi apa saja
dimana saja dan kapan saja. Komputer dan jaringan dengan
berbagai platform yang mempunyai perbedaan dan ciri khas
masing-masing (Unix, Linux, Windows, dan Mac) bertukar
informasi dengan sebuah protokol standar yang dikenal dengan
nama TCP/IP (Transmission Control Protocol/Internet Protocol).
TCP/IP tersusun atas 4 layer (network access, internet, host-to-host
transport, dan application) yang masing-masing memiliki
protokolnya sendiri-sendiri.
11
2.2 E-Commerce
Teknologi e-commerce telah lama digunakan di Internet yaitu
berawal dari EDI (Electronic Data Interchange). E-commerce secara
umum dapat diartikan sebagai proses transaksi jual beli secara elektronik
melalui media internet.
2.2.1 Definisi E-commerce
Menurut Mariza Arfina dan Robert Marpaung e-commerce
atau yang lebih dikenal dengan e-com dapat diartikan sebagai suatu
cara berbelanja atau berdagang secara online atau direct selling
yang memanfaatkan fasilitas Internet dimana terdapat website yang
dapat menyediakan layanan "get and deliver" (http://r-
marpaung.tripod.com/ElectronicCommerce.doc diakses tanggal 20
Desember 2009).
Menurut David Baum, pengertian e-commerce adalah: “E-
Commerce is a dynamic set of technologies, applications, and
business process that link enterprise, consumers, and communities
through electronic transactions and the electronic exchange of
goods, services, and information”.
E-Commerce merupakan satu set dinamis teknologi,
aplikasi, dan proses bisnis yang menghubungkan perusahaan,
konsumen, dan komunitas tertentu melalui transaksi elektronik dan
perdagangan barang, pelayanan, dan informasi yang dilakukan
secara elektronik (David Baum dalam Onno W. Purbo, 2000 : 2).
12
Proses yang ada dalam e-commerce adalah sebagai berikut :
1. Presentasi elektronis yaitu pembuatan website untuk produk
dan layanan.
2. Pemesanan secara langsung dan tersedianya tagihan.
3. Otomasi account pelanggan secara aman.
4. Transaksi pembayaran dilakukan secara online.
Adapun karakteristik dari e-commerce adalah sebagai berikut :
1. Terjadinya transaksi antar dua belah pihak
2. Adanya pertukaran barang, jasa dan informasi
3. Internet merupakan medium utama dalam proses atau
mekanisme perdagangan tersebut.
4. Transaksi tanpa batas.
5. Produk barang tak berwujud
( http://www.nofieiman.com , diakses tanggal 20 Desember 2009).
2.2.2 Jenis-Jenis E-commerce
Secara umum, kita dapat mengklasifikasikan e-commerce
menjadi 2 (dua) jenis yaitu :
a. Business to Business (B2B)
Business to Business e-commerce umumnya menggunakan
mekanisme Electronic Data Interchange (EDI). Sistem ini
relative masih sangat mahal dan standar yang digunakan
seringkali menyulitkan interkomunikasi antar pelaku bisnis.
13
Adapun karakteristik yang terdapat dalam B2B ini adalah
antara lain :
1. Trading Partners yang sudah diketahui dan umumnya
memiliki hubungan (relationship) yang cukup lama.
Informasi hanya dipertukarkan dengan partner tersebut.
Sehingga jenis informasi yang dikirimkan dapat disusun
sesuai kebutuhan dan kepercayaan (trust).
2. Pertukaran data (data exchange) berlangsung berulang-
ulang dan secara berkala
3. Salah satu pelaku dapat melakukan inisiatif untuk
mengirimkan data.
4. Model yang umum digunakan adalah per-to-per, dimana
processing intelligence dapat didistribusikan di kedua belah
pihak. ( http://www.cert.or.id/~budi/articles/1999-02.pdf ,
diakses tanggal 20 Desember 2009).
b. Business to Costumer (B2C)
Business to Costumer e-commerce memiliki permasalahan
yang berbeda. Mekanisme untuk mendekati consumer pada saat
ini menggunakan bermacam-macam pendekatan seperti
misalnya dengan menggunakan konsep portal. Adapun
karakteristik B2C adalah sebagai berikut :
1. Terbuka untuk umum, dimana informasi disebarkan ke
umum.
14
2. Servis yang diberikan bersifat umum (generic) dengan
mekanisme yang dapat digunakan oleh khayalak ramai.
Sebagai contoh, karena sistem web sudah umum digunakan
maka servis diberikan dengan menggunakan basis web.
3. Servis diberikan berdasarkan permohonan (on demand).
Consumer melakukan inisiatif dan produser harus siap
memberikan respon sesuai dengan permohonan.
4. Pendekatan client/server sering digunakan dimana diambil
asumsi client (consumer) menggunakan sistem yang
minimal (berbasis web) dan processing (bussines
procedure) diletakan di sisi server (
http://www.cert.or.id/~budi/articles/1999-02.pdf , diakses
tanggal 20 Desember 2009).
2.2.3 Keuntungan-Keuntungan E-commerce
Beberapa bentuk keuntungan e-commerce yang dapat
diperoleh dari pelaksanaannya antara lain adalah sebagai berikut :
a. Revenue Stream (aliran pendapatan) baru yang mungkin lebih
menjanjikan, yang tidak bisa ditemui di sistem transaksi
tradisional.
b. Dapat meningkatkan Market Exposure (pangsa pasar).
c. Menurunkan tingkat biaya operasional (Operating Cost).
d. Melebarkan jangkauan perusahaan (Global Reach).
e. Meningkatkan Costumer Loyality.
15
f. Meningkatkan Supplier Management.
g. Memperpendek waktu produksi.
h. Meningkatkan Value Chain (mata rantai pendapatan).
2.2.4 Kegiatan yang Berhubungan dengan E-Commerce
Banyak sekali hal yang dapat dilakukan melalui e-
commerce, namun pada umumnya orang menganggap e-commerce
sebagai kegiatan seperti kita membeli sebuah buku di toko online,
padahal e-commerce tidak sesempit itu. E-commerce masih luas
dan masih banyak bidang-bidang lain yang harus dikembangkan.
Ketepatan, kemudahan dan kecepatan menjadi ciri utama dari e-
commerce.
Ada beberapa hal yang berkaitan dengan kegiatan e-
commerce, antara lain sebagai berikut :
a. Perdagangan online melalui www (PC-Personal Computer)
merupakan hal yang paling umum.
b. Transaksi online bisnis antar perusahaan.
c. Internet banking yang saat ini sedang berkembang di Indonesia,
dimana kita dapat mengakses semua kegiatan yang
berhubungan dengan perbankan.
d. TV interaktif, dimana melalui ini kita dapat melihat daftar
acara, internet secara interaktif.
e. WAP (Wireless Application Protocol) juga menjadi tren yang
tidak kalah menarik di kalangan sistem belanja online.
16
2.2.5 Resiko dalam E-commerce
Meskipun e-commerce merupakan sistem yang
menguntungkan karena dapat mengurangi biaya transaksi bisnis
dan dapat memperbaiki kualitas pelayanan pada pelanggan, namun
e-commerce dan semua infrastrukturnya akan mudah sekali
disalahgunakan oleh pihak yang tidak bertanggung jawab.
Dari segi pandangan bisnis, penyalahgunaan dan kegagalan
sistem yang terjadi adalah antara lain sebagai berikut :
1. Kehilangan segi finansial secara langsung karena kecurangan
seorang penipu yang berasal dari dalam atau dari luar
mentransfer sejumlah uang dari rekening yang satu ke rekening
lainnya, atau telah menghancurkan / mengganti semua data
finansial yang ada.
2. Pencurian informasi rahasia yang berharga. Pada umumnya
banyak organisasi maupun lembaga yang menyimpan data
rahasia yang sangat penting bagi kelangsungan hidup mereka.
Gangguan yang timbul dapat menyingkap semua informasi
rahasia tersebut kepada pihak-pihak yang tidak berhak dan
dapat mengakibatkan kerugian yang besar.
3. Kehilangan kesempatan bisnis karena gangguan pelayanan.
Bergantung pada pelayanan elektronik dapat mengakibatkan
gangguan selama periode waktu yang tidak dapat diperkirakan.
Bentuk kesalahan ini bersifat nonteknis, seperti padamnya
17
aliran listrik secara tiba-tiba, atau jenis gangguan lainnya yang
tidak terduga.
4. Penggunaan akses ke sumber oleh pihak yang tidak berhak.
Pihak luar mendapatkan akses yang sebenarnya bukan menjadi
haknya dan dia gunakan hal itu untuk kepentingan pribadinya.
5. Kehilangan kepercayaan dari para konsumen. Kepercayan
konsumen terhadap sebuah perusahaan/lembaga/institusi
tertentu dapat hilang karena berbagai macam faktor, seperti
informasi yang tidak sesuai dengan barang yang sesungguhnya
misalnya mutu barang yang ditawarkan di internet dengan mutu
barang yang dikirimkan berbeda.
Berdasarkan semua hal diatas, maka untuk melakukan atau
menyusun kegiatan e-commerce tidaklah semudah yang
dibayangkan. Banyak sekali faktor yang harus diperhatikan dan
dipertimbangkan untuk mendapatkan hasil yang memuaskan para
pelanggan atau konsumen.
2.3 Basis Data
Basis data terdiri dari dua kata, yaitu basis dan data. Basis dapat
diartikan sebagai tempat penyimpanan sedangkan data adalah representasi
fakta dunia nyata yang mewakili suatu obyek yang direkam dalam bentuk
angka, huruf, simbol, teks. Prinsip utama basis data adalah untuk
18
pengaturan data dan tujuan utamanya adalah kemudahan dan kecepatan
dalam pengambilan kembali data.
Basis data digunakan untuk menyimpan, memanipulasi dan
mengambil data hampir semua tipe perusahaan termasuk bisnis,
pendidikan, rumah sakit, pemerintahan dan perpustakaan.
Basis data dapat menghindari adanya data redudancy. Data
redudancy adalah duplikasi data dimana beberapa file memiliki data yang
sama sehingga menyebabkan pemborosan kapasitas media penyimpanan.
Dengan menggunakan basis data, perubahan, penambahan dan
penghapusan suatu data lebih mudah dilakukan. Basis data juga
mendukung pengaksesan suatu resource secara bersama-sama oleh lebih
dari sebuah aplikasi.
Sistem basis data ini lebih dikenal dengan istilah DataBase
Management System (DBMS). DBMS adalah sistem penyimpanan dan
pengambilan data yang mengijinkan beberapa aplikasi untuk mengakses
data tersebut dalam sebuah sistem terpadu sehingga tidak terjadi data
redudancy dan integrasi data dapat dipertahankan.
19
2.4 MYSQL
2.4.1 Definisi MySQL
MySQL adalah salah satu jenis database server yang sangat
terkenal, disebabkan MySQL menggunakan bahasa SQL sebagai
bahasa dasar untuk mengakses database. MySQL merupakan
RDBMS yang telah lama dipakai oleh kalangan pemrograman web,
terutama dilingkungan Linux. Dulunya MySQL hanya berjalan
pada platform Linux tetapi pada saat sekarang telah tersedia
MySQL untuk platform sistem operasi Windows
98/ME/NT/2000/XP. MySQL mendapat penghargaan sebagai
database terbaik untuk server Linux Versi Linux Magazine tahun
2001 dan tahun 2002, dan sebagai database favorit tahun 2000.
Lisensi MySQL terdiri dari dua lisensi yaitu :
a. Free License
MySQL bersifat free license di bawah GNU yang berarti bebas
digunakan, dimodifikasi source code programnya dengan
catatan harus dipublikasikan ke pemakai.
b. Comercial License
Pemakai harus membayar sejumlah biaya kepada MySQL AB
sebagai pemegang hak cipta, sesuai dengan jenis layanan yang
tersedia. Biasanya lisensi ini dikenakan untuk keperluan
produksi.
20
2.4.2 Keunggulan MySql
MySQL mempunyai kelebihan dapat diakses oleh banyak
bahasa pemrograman sebagai frontend. MySQL merupakan
database server yang ideal untuk segala ukuran dengan daya
kemampuan kecepatan tinggi dalam melakukan proses data, multi
user dan query. MySQL mempunyai ukuran file yang lebih kecil
dibanding dengan database lainnya.
2.5 Analisis Sistem
Analisis sistem pada tingkat teknik pertama, disebut sebagai model
analisis yang menggambarkan serangkaian model representasi dari sistem
yang akan dibangun (Pressman, 2002). Model analisis meliputi :
2.5.1 Context Diagram (CD)
Context Diagram merupakan sebuah diagram aliran data
yang memfokuskan pada aliran data dari dan ke dalam sistem, serta
memproses data-data tersebut. Komponen-komponen dasar dari
setiap program komputer yang digambarkan secara mendetail, dapat
digunakan untuk menganalisis keakuratan dan kompetensi sistem
(Kendall dan Kendall, 2003).
2.5.2 Data Flow Diagram (DFD)
Data Flow Diagram merupakan teknik analisis data
terstruktur yang merepresentasikan proses-proses data di dalam
organisasi. (Kendall dan Kendall, 2003).
21
Gambar 2.1 Simbol Dalam DFD
2.5.3 Entity Relationship Diagram (ERD)
Menurut Fathansyah (2001), Entity Relationship Diagram
merupakan diagram yang berisi komponen- komponen himpunan
entitas dan himpunan relasi yang masing-masing dilengkapi
dengan atribut-atribut yang merepresentasikan seluruh fakta yang
ditinjau. Berikut ini merupakan simbol-simbol yang digunakan
dalam pembuatan ERD.
22
Gambar 2.2 Simbol Dalam ERD
2.5.4 STD (State Transition Diagram)
Alat perancangan menurut Yourdon (1989: 259) merupakan
penggambaran suatu benda atau seseorang pada waktu, bentuk
keberadaan tertentu, ataupun kondisi tertentu, seperti state
transition diagram yang menggambarkan suatu benda menunggu
kondisi Misalnya, menunggu pengisian kata kunci (password) dan
menunggu instruksi berikutnya.
Menurut Yourdon (1989: 259-265), State transition
diagram (STD) merupakan modelling tools yang menggambarkan
sifat ketergantungan pada waktu dari sistem. Pada awalnya hanya
digunakan untuk menggambarkan suatu sistem yang memiliki sifat
real-time, seperti: Control process, telephone switching system,
23
high speed data acquisition, dan military command and control
system.
Pengertian lain dari state transition diagram adalah model
keadaan dari sebuah objek dan kejadian-kejadian yang
menyebabkan objek tersebut berubah dari satu keadaan ke keadaan
yang lain (Hoffer, 1996: 462). Terdapat dua macam kerja sistem
ini, yaitu:
1. Passive : Sistem ini melakukan kontrol terhadap lingkungan,
tetapi lebih bersifat memberikan reaksi atau menerima data
saja. Contoh, suatu sistem yang tugasnya mengumpulkan atau
menerima data melalui sinyal yang dikirimkan oleh satelit.
2. Active : Sistem melakukan kontrol terhadap lingkungan secara
aktif dan dapat menerima data serta memberikan respon
terhadap lingkungan sesuai dengan program yang telah
ditentukan. Contoh, sistem komputer yang ditempatkan pada
peluru kendali.
Beberapa simbol yang digunakan untuk membuat state
transition diagram. Yaitu:
a. State, disimbolkan dengan segi empat.
simbol state
b. Transition state atau perubahan state disimbolkan dengan
panah berarah.
Simbol transition state
24
c. State adalah kumpulan keadaan atau atribut yang
mencirikan seseorang atau suatu benda pada waktu
tertentu atau kondisi tertentu. Contoh, menunggu
pemakai mengisi password, menunggu perintah
berikutnya, menunggu nada panggilan dan lainnya.
d. Condition adalah suatu event pada lingkungan eksternal
yang dapat dideteksi oleh sisem. Contoh, sebuah sinyal
interrupt atau data. Hal ini akan menyebabkan
perubahan terhadap state dari state menunggu X ke
state menunggu Y, atau memindahkan aktifitas X ke
aktifitas Y.
e. Action adalah yang dilakukan sistem bila terjadi
perubahan state atau merupakan reaksi terhadap
kondisi. Aksi akan menghasilkan keluaran atau
tampilan.
f. Display pada layar menghasilkan output.
Berikut gambar dari kondisi dan aksi:
Gambar 2.3 Simbol Dalam STD
25
2.6 PHP
PHP adalah sebuah bahasa pemrograman yang didesain agar dapat
disisipkan dengan mudah ke halaman HTML. PHP memberikan solusi
sangat mudah dan dapat berjalan di berbagai jenis platform. Pada awalnya
memang PHP berjalan di sistem UNIX dan variannya, namun kini dapat
berjalan dengan lancar di lingkungan sistem operasi Windows. Suatu nilai
tambah yang luar biasa karena proses pengembangan program berbasis
web dapat dilakukan lintas sistem operasi.
Dengan luasnya cakupan sistem operasi yang mampu menjalankan
PHP dan ditambah begitu lengkapnya function yang dimilikinya (tersedia
lebih dari 400 function di PHP yang sangat berguna) tidak heran jika
PHP semakin menjadi tren di kalangan programmer web.
Penemu bahasa pemrograman ini adalah Rasmus Lerdorf, yang
bermula dari keinginan sederhana Lerdorf untuk mempunyai alat bantu
dalam memonitor pengunjung yang melihat situs web pribadinya. Inilah
sebabnya pada awal pengembangannya, PHP merupakan singkatan dari
Personal Home Page tools, sebelum akhirnya menjadi Hypertext
Preprocessor.
2.7 XAMPP
XAMPP adalah perangkat lunak gratis yang mendukung banyak
sistem operasi dan merupakan kompilasi dari beberapa program.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang
terdiri atas program Apache HTTP Server, MySQL database, dan
26
penterjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan
Perl. Nama XAMPP merupakan singkatan dari X (empat system operasi
apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam
GNU General Public Lisensi dan bebas, merupakan web server yang
mudah digunakan yang dapat melayani tampilan halaman web yang
dinamis.
Aplikasi server web yang tersedia secara gratis dan disebarkan
dengan lisensi open source. Apache tersedia bagi bermacam-macam sistem
operasi, seperti UNIX (FreeBSD, Linux, Solaris, dan lainnya) dan
Windows NT/95/98. Apache mengikuti standar protokol Hypertext
Transport Protocol, yaitu HTTP 1.1, apache mendukung PHP dan
interaksi dengan database MySQL, apache dapat digunakan oleh client
dengan berbagai browser seperti mozilla firefox, netscape, dan internet
explorer.
2.8 CMS ( Content Management System )
2.8.1 Pengertian CMS
CMS ( Content Management System ) CMS adalah sebuah sistem
yang memberikan kemudahan kepada para penggunanya dalam mengelola
dan mengadakan perubahan isi sebuah website dinamis tanpa sebelumnya
dibekali pengetahuan tentang hal-hal yang bersifat teknis.
27
CMS ( Content Management System ) terdiri dari dua elemen:
a) Aplikasi manajemen isi (Content Management Application [CMA]).
b) Aplikasi pengiriman isi (Content Delivery Application [CDA]).
Elemen CMA memperbolehkan manajer isi yang mungkin tidak
memiliki pengetahuan mengenai HTML ( HyperText Markup Language )
untuk mengatur pembuatan, modifikasi, dan penghapusan isi dari suatu
situs web tanpa perlu memiliki keahlian sebagai seorang webmaster.
Elemen CDA menggunakan dan menghimpun informasi yang
sebelumnya telah ditambah, dikurangi atau diubah oleh pemilik situs web
untuk meng-update situs web tersebut. Banyak jenis CMS, mulai dari yang
berbayar (commercial) sampai yang gratis (open source).
2.8.2 Beberapa jenis CMS
Setelah memahami definisi CMS, ada baiknya mengenal macam-
macam CMS. Banyak jenis CMS, mulai dari yang berbayar (commercial)
sampai yang gratis (open source). CMS yang berbayar menawarkan
kestabilan dan performa yang lebih baik, hal ini wajar saja mengingat
untuk membuat CMS berbayar diperlukan biaya dan keahlian profesional.
Sedangkan sifat CMS gratis yang open source membuat pengembangan
CMS ini semakin mudah karena bisa dilakukan oleh setiap orang atau
komunitas.
Dalam bahasan kali ini, penulis hanya akan menyampaikan jenis
CMS yang gratis (open source).
28
Diantara CMS open source yang banyak dipakai adalah sebagai
berikut :
1. Drupal adalah content management system dan blogging engine yang
pertama kali dikembangkan oleh Dries Buytaert sebagai sebuah sistem
bulletin board. Sekarang ini Drupal banyak digunakan oleh website-
website yang memiliki traffic tinggi dan memiliki tingkat penanganan
sebuah website yang hirarki yang kompleks.
2. Mambo pada awalnya disebut Mambo Open Source atau MOS adalah
free software atau open source content management system yang
digunakan untuk membuat dan memanagement website melalui sebuah
interface yang simple. Sekarang ini mambo banyak dipilih dan
digunakan karena kemudahan yang diberikan untuk
mengoperasikannya. Seperti hampir semua CMS yang digemari
mambo memiliki kemampuan templating atau kemampuan untuk
mengganti tampilan website tanpa harus melakukan upload atau
perubahan content. Mambo menyediakan fasilitas dan komponen-
komponen seperti shopping cart (menggunakan komponen virtue
mart), photo gallery, forum, pools, calendars website searching, multi
bahasa dan lain-lain.
3. Joomla, kata Joomla diambil dari sebuah kata dari suku Swahili yaitu
Jumla yang berarti “menjadi kesatuan” bisa dikatakan memiliki
kemampuan sama dengan Mambo, karena CMS ini code awalnya
Joomla! 1.0.0 menggunakan code Mambo 4.5.2.3. Banyak komponen
29
Mambo juga dapat digunakan di sebagai Plugin Joomla begitu juga
sebaliknya. Kemampuan memilih plugin yang tepat untuk setiap
release yang dipilih memalui proses riset mengindari terjadinya konflik
atau crash karena banyak plugin memerlukan penyesuaian disetiap
versinya.
4. Wordpress, CMS ini cocok sekali digunakan untuk website berbasis
news atau berita. Kesederhanaan administrator sidenya membuat CMS
ini sangat fasih digunakan untuk pemula sekalipun. Kemampuan
templatingnya sangat digemari juga karena sangat mudah dimengerti.
Mengejutkan ketika sekarang wordpress dengan pluginsnya yang
berkembang pesat sehingga dapat digunakan untuk kebutuhan CMS
corporate bahkan digunakan sebagai simple shoping cart. Kelebihan
lain dari CMS ini sangat mudah dioptimasi menjadi sebuah website
yang search engine friendly dengan tag sistemnya, friendly url, custom
meta, auto ping, sitemap dan rss-nya. Penggunaan CMS ini sangat
disarankan untuk website berskala kecil atau website berbasis berita
dan weblog.
5. Oscommerce, singkatan dari Open Source Commerce adalah online
store-management software. Oscommerce cenderung lebih spesific
kepada penggunaan CMS sebagai e-commerce dimana menyediakan
segala fasilitas standar dan fungsionaliti.
6. Prestashop, bagi yang berniat untuk mempunyai toko online, dapat
melihat aplikasi e-commerce open source yang bernama prestashop.
30
Prestashop sudah terbilang canggih karena dengan Prestashop dapat
berjualan online dengan biaya yang cukup murah, dan administrasi
yang mudah. Prestashop menyediakan fitur-fitur yang memudahkan
pelanggan dalam berbelanja, memudahkan pemilik toko online dalam
menjalankan operasional toko, dan memudahkan admin dalam
mengkonfigurasi toko online.
Untuk meningkatkan keamanan bagi para pelanggan online, bisa
melengkapi toko online dengan fitur keamanan SSL, atau
menggunakan layanan checkout yang disediakan oleh penyedia jasa
checkout dunia yang sudah terpercaya.. Pertama kali melihat tampilan
depan yang sederhana tetapi cukup komplit. Pengoperasiannya cukup
mudah bagi pengunjung ataupun administrator untuk mengikuti
navigasi pada saat pencarian katalog produk.
7. Magento, satu lagi pilihan aplikasi platform e-commerce yaitu Magento
Open Source eCommerceEvolved. Magento bisa menggeser
pendahulu-pendahulunya seperti OsCommerce, Joomla dengan
Virtuemart-nya. Magento merupakan pemenang Best Commerce di
SourceForge 2008. Walaupun proses instalasinya terhitung masih
cukup sulit, tapi fitur, user interface bisa diandalkan dan lumayan
keren. ( http://alipha.net/category/blogger/ diakses pada tanggal 2
Januari 2010).
31
2.9 Prestashop
2.9.1 Pengertian Prestashop
Prestashop adalah salah satu solusi jualan online yang
memiliki fitur-fitur yang cukup lengkap, mudah dipahami,
sederhana, gampang, siap pakai, bisa di-instal dengan mudah
dalam web hosting, dan tentu saja gratis.
2.9.2 Manfaat Prestashop bagi pelanggan
Dalam menilai sebuah situs toko online, yang paling
penting bagi pelanggan adalah kemudahan dalam berbelanja secara
online. Kemudahan ini adalah faktor utama (selain keamanan) yang
membuat pelanggan berbelanja secara online. Apalagi bagi
masyarakat Indonesia yang belanja online-nya belum membudaya,
faktor kemudahan ini tidak boleh diabaikan. Kemudahan ini harus
disediakan oleh toko online dalam beberapa hal yaitu :
a. Memudahkan sebuah produk ditemukan.
b. Memudahkan memperoleh informasi detil sebuah produk.
c. Memudahkan pelanggan menyelesaikan belanja.
d. Memudahkan pelanggan melakukan transaksi.
Sebagai fitur standar sebuah mesin toko online, Prestashop
juga menyediakan shopping cart atau kereta belanja sebagai salah
satu fitur utama untuk berbelanja online. Pelanggan bisa
menampung produk-produk yang dibeli ke dalam shopping cart
32
sebelum melakukan pembayaran. Dalam berbelanja online, proses
mulai membayar ini disebut dengan checkout.
Secara garis besar, proses checkout terdiri atas tiga langkah:
penentuan alamat pengiriman, penentuan kurir pengiriman, dan
penentuan cara pembayaran. Prestashop menyajikan langkah-
langkah tersebut secara jelas sehingga memudahkan pelanggan
menyelesaikan belanjanya. Sebelum bisa melakukan langkah-
langkah tersebut seorang pelanggan harus terdaftar terlebih dahulu
dengan cara registrasi ke toko online tersebut yang bisa dilakukan
sendiri.
1. Penentuan alamat pengiriman
Gambar 2.4 Penentuan Alamat Pengiriman
33
2. Penentuan kurir pengiriman
Gambar 2.5 Penentuan Kurir Pengiriman
3. Penentuan cara pembayaran
Gambar 2.6 Penentuan Cara Pembayaran
2.9.3 Manfaat Prestashop bagi pemilik Toko online
Prestashop juga menyediakan kemudahan-kemudahan bagi
pemilik toko online. Tugas utama pemilik toko adalah
memasukkan data-data produk ke dalam katalog yang akan
ditampilkan dalam toko online. Tugas ini dimudahkan oleh
Prestashop melalui layar administrasi katalog. Gambar berikut ini
menunjukkan layar administrasi katalog dalam Prestashop:
34
Gambar 2.7 Layar Administrasi Katalog
Produk biasanya dikelompokkan dalam kategori tertentu
untuk memudahkan pelanggan menemukan produk tersebut. Sama
seperti halnya sebuah toko swalayan yang mengelompokkan
barang-barang dengan ciri khas atau hubungan tertentu dalam
lokasi yang sama atau berdekatan. Prestashop menyediakan
mekanisme berupa kategori dan tagging untuk memfasilitasi
pengelompokan ini.
Modul pengiriman dan pembayaran biasanya berbeda
antara satu negara dengan negara lain. Prestashop menyediakan
fasilitas untuk menambahkan modul pengiriman dan pembayaran
yang sesuai dengan negara tertentu. Fasilitas ini tersedia melalui
penambahan modul yang khusus dibuat untuk keperluan tersebut.
Misalnya di Indonesia TIKI cukup banyak dipakai sebagai kurir
pengiriman, maka modul pengiriman TIKI bisa dibuat dan
ditambahkan ke dalam Prestashop.
Layar administrasi juga menyediakan informasi yang
sangat berharga bagi pemilik toko tentang pelanggan, karyawan,
35
dan statistik toko. Statistik toko ini sangat bermanfaat karena
menyediakan informasi seperti jumlah pengunjung toko, jumlah
pelanggan yang telah terdaftar, produk yang paling laku, pemasok
yang produknya paling laris. Statistik dalam Prestashop bisa
membantu pemilik toko merencanakan strategi dagangannya ke
depan agar lebih untung.
Pada prestashop terdapat istilah menu, kategori dan fitur.
Menu merupakan penuntun fasilitas yang tersedia, untuk
mengarahkan user dalam memlilih proses yang akan dieksekusi.
Pada halaman menu admin prestashop terdiri dari catalog,
costumers, orders, payment, shipping, stats, modules, employees,
preferences, tools.
Kategori merupakan suatu sistem yang berfungsi untuk
membantu menjelajahi topik-topik terkait. Pada kategori terdapat
sub kategori yang menjelaskan produk secara lebih spesifik. Fitur
adalah sejenis teknologi atau identik dengan kemajuan teknologi.
Pada prestashop memiliki fitur web yaitu dynamic ajax yang
berfungsi sebagai teknik untuk mengembangkan aplikasi web yang
lebih interaktif, cepat dan responsif.
36
2.10 Toko Online
2.10.1 Definisi Toko Online
Toko online adalah tempat memajang barang dagangan di
internet. Saat ini toko online di Indonesia mulai berkembang pesat.
Semakin banyak yang menggunakan internet untuk membeli dan
menjual barang ataupun jasa. Toko online di Indonesia memang
sangat cocok sekali karena letak geografis indonesia yang
kepulauan, memungkinkan untuk membeli barang tanpa perlu
datang ke tempat penjual.
Sangat besar manfaat dari toko online, yang pertama tak
perlu datang ke toko untuk memilih barang yang ingin dibeli.
Kedua dari segi keuangan, bila jarak jauh misal jakarta-kalimantan
akan menghemat ongkos perjalanan di ganti dengan biaya kirim
yang tentunya akan lebih murah dari pada datang ke tempat toko
itu. Dengan toko online target pasar produk pun lebih luas, tidak
hanya di seluruh Indonesia saja tetapi juga bisa menjangkau di
seluruh dunia.
2.10.2 Manfaat Toko Online
Manfaat dari sebuah toko online antara lain :
• Pelanggan dari berbagai penjuru daerah bahkan dunia.
• Promosi non stop 24 jam.
• Prestise bisnis meningkat karena akan setara dengan
perusahaan besar.
37
• Dapat menjadi side income , karena bisa dikerjakan paruh
waktu/fleksibel.
• Biaya promosi murah karena tidak perlu mencetak brosur,
cukup iklankan via email, banner, maupun iklan baris.
2.11 Waterfall Model
Untuk mengembangkan aplikasi dibutuhkan metode atau model
pengembangannya, salah satunya adalah model waterfall. Metode
Waterfall adalah sebuah metode pengembangan aplikasi dengan
pendekatan sekuensial.
Pendekatan model ini terlihat mengalir menurun seperti air terjun
(waterfall) yang dikembangkan oleh Pressman melalui beberapa tahap.
Penggunaan istilah waterfall pertama kali dikenal oleh Winston Royce
pada tahun 1970.
Gambar 2.8 : Model pengembangan sistem dengan Waterfall.
Pressman (2001 : 29)
38
Dalam Pressman (2001 : 28), metode ini bisa juga disebut dengan
linear sequential model, menggunakan pendekatan sistematis dan
sekuensial dalam pengembangan aplikasi, dimulai melalui proses analisis,
desain, pengkodean, ujicoban dan pemeliharaan. Model waterfall tersusun
atas aktivitas- akivitas berikut ini :
a. Analysis (Analisis)
Merupakan tahap awal dimana dilakukan proses identifikasi masalah,
usulan pemecahan masalah dan analisis kebutuhan sistem yang
difokuskan untuk pembuatan piranti lunak.
b. Design (Perancangan)
Pada Tahap selanjutnya dilakukan pembuatan model dari perangkat
lunak. Maksud pembuatan model ini adalah untuk memperoleh
pengertian yang lebih baik terhadap aliran data dan kontrol, proses-
proses fungsional, tingkah laku operasi dan informasi-informasi yang
terkandung di dalamnya. Terdiri dari aktivitas utama pemodelan
proses, pemodelan data dan desain antarmuka
c. Code Generation (Pengkodean)
Tahap pengkodean yaitu melakukan penerapan hasil rancangan ke
dalam bentuk yang dapat dibaca dan dimengerti oleh komputer. Pada
tahap ini hasil dari perancangan mulai diterjemahkan ke dalam bahasa
mesin melalui bahasa pemrograman.
39
d. Test (Pengujian)
Testing adalah elemen kritis dari jaminan kualitas perangkat lunak dan
merepresentasikan kajian pokok dari spesifikasi desain dan
pengkodean. Ada 2 (dua) metode pendekatan pengujian, pendekatan
pertama adalah blackbox testing dan yang kedua adalah whitebox
testing. Black box testing menyinggung ujicoba yang dilakukan pada
interface software. Walaupun didesain untuk menemukan kesalahan,
ujicoba blackbox digunakan untuk mendemonstrasikan fungsi software
yang dioperasikan; apakah input diterima dengan benar dan ouput yang
dihasilkan benar; apakah integritas informasi eksternal terpelihara.
White box testing didasarkan pada pemeriksaan detail prosedural. Alur
logikal suatu software diujicoba dengan menyediakan kasus ujicoba
yang melakukan sekumpulan kondisi dan/atau perulangan tertentu.
Status dari program dapat diperiksa pada beberapa titik yang bervariasi
untuk menentukan apakah status yang diharapkan atau ditegaskan
sesuai dengan status sesungguhnya.
e. Support (Pemeliharaan)
Pada tahap ini, merupakan tahap pemeliharaan atau maintenance
terhadap aplikasi yang ada.
40
2.12 Paypal
2.12.1 Sejarah Paypal
Perusahaan Paypal (Paypal corp.) seperti yang dikenal
sekarang adalah penggabungan antara perusahaan Confinity dan
X.com pada tahun 2000. Confinity didirikan pada desember 1998
oleh Peter Thiel dan Max Levchin, awalnya sebagai alat
pembayaran Palm Pilot dan sebagai perusahaan kriptografi (ilmu
pembacaan sandi, tulisan-tulisan atau angka-angka rahasia).
Sedangkan X.com didirikan oleh Elon Musk pada maret 1999,
yaitu perusahaan penyedia jasa perencanaan keuangan.
2.12.2 Definisi Paypal
PayPal adalah salah satu alat pembayaran (Payment
procesors) menggunakan internet yang terbanyak digunakan
didunia dan teraman. Pengguna internet dapat membeli barang
secara online, lisensi software original, keanggotaan situs, urusan
bisnis, mengirim dan menerima donasi/sumbangan, mengirim uang
ke pengguna PayPal lain di seluruh dunia dan banyak fungsi
lainnya dengan mudah dan otomatis menggunakan internet atau
mobile. ( http://www.paypalindonesia.com ).
PayPal juga melindungi penjual dari pengembalian uang
atau komplain yang tidak benar dari pembeli sesuai pembuktian.
Perlindungan untuk penjual dirancang untuk melindungi penjual
dari klaim pembeli yang mengaku telah mengirim uang yang tidak
41
mempunyai catatan bukti pembayaran dan deskripsi transaksi,
setiap pembelian dan pembayaran menggunakan PayPal selalu ada
catatan bukti pembayarannya di account PayPal pengirim dan
penerima uang, sebagai bukti jika benar telah terjadi pengiriman
uang antara keduanya.
Dari sini bisa diambil kesimpulan menggunakan PayPal
lebih aman dari alat pembayaran online lain bagi pengirim dan
penerima uang karena ada bukti pembayaran dan catatan deskripsi,
serta dapat melakukan komplain yang benar jika terjadi sesuatu
atau terhindar dari komplain yang salah.
2.13 Studi Sejenis
Terdapat banyak peneliti yang membahas penelitian tentang e-
commerce (Wibisono, 2004 , Muttaqin, 2009, Jesmika, 2009,
Amianco, 2006 , Henrik, 2006, Linda, 2006). Penulis mengutip
beberapa studi penelitian yang ada, antara lain : Perancangan Sistem
Penjualan berbasis Web Pada PT. Kreasi Cipta Trijaya Mandiri. (Haryadi,
2001) Skripsi ini ditulis dengan tujuan untuk merancang sistem penjualan
berbasis web yang merupakan salah satu kegiatan dalam e-commerce bagi
PT. Kreasi Cipta Trijaya Mandiri meliputi penyajian informasi produk-
produk hardware dan software komputer, informasi tambahan yang
ditampilkan ke dalam halaman website perusahaan serta adanya formulir
untuk melakukan pemesanan barang.
42
Metode penelitian yang digunakan dalam penelitian ini adalah
metode analisis dan perancangan. Analisis dilakukan dengan meninjau
langsung sistem yang berjalan dan mengidentifikasi kebutuhan sistem
pada perusahaan. Hasil analisis kemudian diterapkan dalam perancangan
sistem yang dibutuhkan.
Penelitian yang lain berjudul Integrasi Aplikasi E-commerce Multi
Client Services Berbasis Web (Putra, 2001 ) yang mengemukakan bahwa
teknologi web services memungkinkan penggabungan aplikasi dan
layanan dari prototype system yang berbeda yang berada pada aplikasi
penyedia data jasa dan produk komputer. Dukungan IDE besar seperti
Netbeans 6.0 untuk JAX-WS merupakan nilai utama pemilihan teknologi
JAX-WS. Integrasi Netbeans dengan Sun GlassFish V2 sebagai server
aplikasi pada sistem ini, memungkinkan dikembangkannya sistem dengan
lebih leluasa dan lebih cepat yang terbukti sangat dibutuhkan dan
bermanfaat dari banyak vendor produk dan jasa komputer.
Penelitian lainnya yaitu Perancangan dan Pembuatan E-commerce
pada toko souvenir “X” Berbasis Web ( Budiono, 2009 ) , tugas akhir ini
merancang dan membuat sebuah website yang dapat diakses online 24 jam
lewat internet oleh para costumers, sehingga transaksi yang terjadi dapat
lebih mudah dan cepat diselesaikan. Selain itu, diharapkan dengan adanya
website ini, maka Twinkle Gift Shop dapat semakin memenuhi kebutuhan
costumers.
43
44
Penelitian lainnya yaitu aplikasi web e-commerce perusahaan
furniture Nina Gallery (Riki Zufli, 2005), tugas akhir ini mengembangkan
website Nina Gallery dengan melakukan pengembangan dengan
memberikan form pemesanan dan metode pembayaran menggunakan VCC
(Visual Credit Card) sehingga transaksi yang terjadi dapat lebih mudah
dan aman dilakukan oleh pelanggan. Metode penelitian yang digunakan
dengan menggunakan waterfall.
BAB III
METODOLOGI PENELITIAN
3.1 Waktu dan Lokasi Penelitian
Waktu penelitian ini dilakukan selama 2 minggu, mulai tanggal 20
Oktober 2009 sampai dengan 3 November 2009 yang berlokasi di Batik
Shop yang bertempat di Jl. H. Mas Mansur desa bendan Gg.XVII No. 18A
Pekalongan.
3.2 Metode Pengumpulan Data
Dalam penulisan skripsi ini penulis mendapatkan berbagai data
yang diibutuhkan melalui beberapa metode, diantaranya :
3.2.1 Wawancara
Penulis melakukan wawancara kepada Sitti Salamah selaku
pemilik toko Batik Shop dan sales manager Risya Hisyanti di toko
Batik Shop pada tanggal 20 Oktober 2009. Tujuan penulis
melakukan wawancara adalah untuk mengetahui sistem yang
dibutuhkan oleh Batik Shop dari segi arsitektur aplikasi, teknologi
yang digunakan serta pemanfaatannya apakah bermanfaat bagi
Batik Shop untuk ke depan nanti. Berdasarkan hasil wawancara
yang penulis lakukan, dapat disimpulkan bahwa saat ini toko Batik
45
Shop memerlukan aplikasi toko online yang dapat memperluas
target pasar produknya. (Terlampir pada halaman lampiran A).
3.2.2 Observasi
Guna mengumpulkan informasi mengenai kebutuhan sistem
(system requirements) penulis melakukan pengumpulan data
dengan cara observasi di Batik Shop pada tanggal 20 Oktober 2009
sampai dengan 3 November 2009. Penulis mengumpulkan data
mengenai produk yang ditawarkan oleh Batik Shop berupa
dokumentasi–dokumentasi gambar produk koleksi batik untuk
mengkonfigurasi katalog dalam membangun aplikasi toko online.
Selain itu, penulis melakukan pengamatan terhadap beberapa
aplikasi yang terkait dengan judul penelitian penulis yaitu dengan
mengamati beberapa contoh aplikasi toko-toko online yang ada
sebagai perbandingan.
3.2.3 Studi Pustaka
Pengumpulan data dengan cara membaca buku dan literatur
lainnya yang dapat dijadikan acuan berkaitan dengan penelitian
untuk mengembangkan sistem yang baru.
3.2.4 Kuesioner
Penulis membagikan kuesioner uji coba aplikasi untuk
mengetahui sejauh mana aplikasi dapat dimengerti oleh calon user.
46
3.3 Metode Pengembangan Sistem
Dalam pengembangan aplikasi e-commerce ini penulis memilih
untuk menggunakan metode pengembangan System Development Life
Cycle (SDLC) model Waterfall yang pertama kali dikenal oleh Winston
Royce yang dipublikasikan pada tahun 1970 yang kemudian dikemukakan
oleh Pressman (2001 : 28). .
Berikut alasan penulis menggunakan model waterfall :
1. Aplikasi yang penulis coba kembangkan ini bukanlah sistem dengan
skala teramat besar.
2. Aplikasi ini lebih cocok dikembangkan dengan proses yang terstruktur
dan sekuensial.
Siklus SDLC ini dijalankan secara berurutan, mulai dari tahap awal
sampai akhir. Setiap langkah yang telah selesai harus dikaji ulang
(review), terutama dalam langkah analisis dan desain untuk memastikan
bahwa tahapan tersebut telah dikerjakan dengan benar dan sesuai dengan
harapan. Jika tidak maka tahap tersebut perlu diulangi lagi atau kembali ke
tahapan sebelumnya. Tetapi kadang-kadang ada beberapa langkah yang
dapat dilakukan secara bersamaan, hal ini dilakukan untuk mempercepat
mendapatkan hasil yang diinginkan.
Berikut akan diuraikan proses secara garis besar mengenai
tahapan-tahapan siklus SDLC model waterfall pada aplikasi web e-
commerce. Pengembangan dimulai dari analisis (analysis), perancangan
47
(design), pengkodean (code generation), pengujian (testing), dan
pemeliharaan (support).
3.3.1 Analysis (Analisis)
Pada tahap ini, penulis melakukan beberapa aktivitas, yaitu
identifikasi masalah, usulan pemecahan masalah dan analisa
kebutuhan sistem. Pemodelan ini diawali dengan mencari
kebutuhan dari keseluruhan sistem yang akan diaplikasikan ke
dalam bentuk software.
Di dalam analisis sistem terdapat tiga langkah dasar yang
harus dilakukan, yaitu antara lain :
1. Identifikasi masalah, yaitu mengidentifikasikan masalah yang
didapat dalam aktivitas pengumpulan data sebelumnya.
2. Usulan pemecahan masalah, yaitu mengusulkan pemecahan
masalah yang telah diidentifikasi sebelumnya.
3. Software Requirement, yaitu menganalisis kebutuhan software.
Berdasarkan identifikasi masalah di atas yang akan
dikembangkan secara rinci.
3.3.2 Design (Perancangan)
Tahap berikutnya adalah perancangan, pada tahap ini
penulis mulai melakukan pemodelan berdasarkan hasil analisis.
Perancangan menentukan bagaimana suatu aplikasi menyelesaikan
apa yang harus diselesaikan. Pada tahap ini dilakukan pembuatan
model dari aplikasi.
48
Maksud pembuatan model ini adalah untuk memperoleh
pengertian yang lebih baik terhadap aliran data dan kontrol, proses-
proses fungsional, tingkah laku operasi dan informasi-informasi
yang terkandung di dalamnya. Proses ini meliputi beberapa hal,
yaitu: Context Diagram, Entity Relationship Diagram (ERD), Data
Flow Diagram (DFD), Perancangan struktur menu, Perancangan
layar, State Transition Diagram (STD) dan perancangan database.
Penjelasan tersebut antara lain:
1. Context Diagram, yaitu diagram aliran data yang memfokuskan
pada aliran data dari dan ke dalam sistem, serta memproses
data-data tersebut.
2. Entity Relationship Diagram, yaitu teknik analisis data
terstruktur yang merepresentasikan proses-proses data di dalam
organisasi.
3. Data Flow Diagram, yaitu diagram yang berisi komponen-
komponen himpunan entitas dan himpunan relasi yang masing-
masing dilengkapi dengan atribut-atribut.
4. Perancangan struktur menu, yaitu menggambarkan struktur dari
menu-menu yang terdapat di aplikasi Batik Shop yang penulis
kembangkan.
5. Perancangan layar, yaitu menggambarkan rancangan masing-
masing layar menu.
49
6. State Transition Diagram (STD), yaitu menggambarkan
peralihan layar dari menu tertentu ke menu tertentu lainnya
yang terdapat di aplikasi.
3. Perancangan database, menggambarkan hubungan antar tabel
basis data.
3.3.3 Code Generation ( Pengkodean )
Tahap berikutnya yang dilakukan adalah pemrograman atau
coding. Pada Tahap ini merupakan hasil transfer dari perancangan
ke dalam bahasa pemrograman yang telah ditentukan lalu diuji
coba dan jika lulus uji coba maka sistem akan diinstal dan di
operasikan.
3.3.4 Test ( Pengujian )
Pada tahap ini dilakukan pengujian masing-masing fitur dan
fungsi untuk mengetahui apakah aplikasi dapat bekerja dengan
semestinya. Pengujian dilakukan dengan menguji coba aplikasi
secara mandiri dan lapangan. Penulis melakukan testing mengenai
apakah fitur-fitur aplikasi sudah berjalan dengan semestinya atau
tidak. Pengujian yang penulis lakukan dengan menggunakan
metode pendekatan blackbox testing, ujicoba blackbox digunakan
untuk mendemonstrasikan fungsi software yang dioperasikan.
50
51
3.3.5 Support ( Pemeliharaan )
Pada tahap ini, merupakan tahap yang perlu dijalankan
dalam melakukan pemeliharaan dengan meng-update aplikasi dan
melakukan maintenance secara berkala agar aplikasi dapat
terpelihara dengan baik.
b. Data Flow Diagram level 1 (Proses Pemesanan Barang)
yang merupakan pengembangan dari proses 3.0.
Gambar 4.6 DFD level 1 Proses Pemesanan Barang
64
c. Data Flow Diagram level 1 (Proses Manajemen Data)
yang merupakan pengembangan dari proses 4.0 seperti
pada gambar dibawah ini.
Gambar 4.7 DFD level 1 (Proses Manajemen Data)
65
d. Data Flow Diagram level 1 (Proses Konfirmasi
Pemesanan yang merupakan pengembangan dari proses
5.0.
Gambar 4.8 DFD level 1 (Proses Konfirmasi Pemesanan)
4.2.2.3 Entity Relationship Diagram
Entity relationship diagram perancangan website e-
commerce ini ditunjukkan pada Gambar 4.8.
66
Gambar 4.9 Entity Relationship Diagram
Relationship diagram hubungan relasi antar tabel
perancangan website e-commerce ini ditunjukkan pada Gambar
4.10.
Gambar 4.10 Relationship Diagram
67
4.2.2.4 Perancangan Database
Rancangan database untuk pembuatan website e-
commerce ini menggunakan database MySQL, detail Tabel
rancangannya ditunjukkan pada Tabel dibawah ini.
Tabel 4.1 Tabel User
Tabel 4.2 Tabel Type
68
Tabel 4.3 Tabel Gambar
Tabel 4.4 Tabel Stok
Tabel 4.5 Tabel Tarif Pengiriman
69
Tabel 4.6 Tabel Pemesanan
Tabel 4.7 Tabel Detail Pemesanan
Tabel 4.8 Tabel Konfirmasi Pemesanan
70
Tabel 4.9 Tabel Pesan
4.2.2.5 Perancangan Struktur Menu Home
Dalam aplikasi Batik Shop online ini terdapat
beberapa menu pada halaman index. Berikut adalah
gambaran secara hierarkinya.
Delivery
FAQ
Cara Pembelian
Tentang kami
Home
Kategori Informasi Account
Aksesoris batik
Bahan batik
Blus batik
User Account
Informasi Pribadi
Histori pembelian
Kemeja batik pria
Sackdress
Troli Search
Gambar 4.11 Rancangan Struktur Menu Home
71
4.2.2.6 Perancangan Desain Halaman Home
Desain rancangan halaman website website e-
commerce ditunjukkan pada Gambar 3.8, yang terbagi
menjadi beberapa bagian yaitu:
1. Header, bagian ini berisi informasi tentang butik,
beberapa menu shortcut, dan form searcing barang.
2. Content, bagian ini berisi box-box yang berisi
keterangan dan gambar barang barang yang dijual.
3. Footer, bagian ini berisi informasi pembuatan website
seperti tahun dibuat website, programmer website dan
informasi penting lainya.
Halaman pertama yang akan terbuka ketika user
mengakses url dimana sistem ini berada. Pada bagian atas
terdapat header template yang terdiri dari gambar logo
Batik Shop, form search, link menu Contact, Sitemap,
Bookmark. Header template tersebut akan terdapat pada
semua halaman di sistem ini. Lalu pada tubuh halaman
terdapat link menu Informasi, Kategori, Tag, Online help.
Pada tengah halaman terdapat spesifikasi produk.
72
Tag
Gambar
Shopping cart
Footer
Blok Iklan
Online help
Bookmark Sitemap Contact
Spesifikasi Produk
Search
Menu link
User account
Produk
Kategori
Home
Informasi
Logo
Gambar 4.12 Desain Halaman Home
Search
Menu Admin
Quick Access
Gambar 4.13 Desain Halaman Admin
73
Menu Member account
Create account
Menu
Search Logo Link Menu
Gambar 4.14 Desain halaman User
Gambar 4.2 : Desain halaman My Videos
Home
Menu
User Account
Harga Troli View
Harga Troli View
Harga Troli View
Nama Produk Desk ipsi Produk rTroli
Nama Produk Desk ipsi Peoduk rTroli
Nama Produk Desk ipsi Produk rTroli
Thumbnail Image
Thumbnail Image
Thumbnail Image
Produk kategori
Link Menu
Search
LOGO
Gambar 4.15 Desain halaman Produk Kategori
74
4.2.2.7 State Transition Diagram (STD)
Diagram ini menggambarkan transisi atau
perubahan statement yang merupakan keadaan aplikasi
yang dipicu oleh adanya aksi yang dilakukan oleh user
dan juga mendeskripsikan reaksi terhadap aksi tersebut.
Dengan adanya STD, rancangan akan lebih terperinci
karena fungsi-fungsi setiap objek yang diperlukan telah
dideskripsikan melalui STD.
Gambar 4.16 STD Halaman Home
Home
Klik Home
Kembali ke menu Home
Klik Produk Baru
Tampilkan menu Produk Baru
Produk Baru
Klik Terlaris
Tampilkan menu Terlaris
Terlaris
Klik Hubungi
Tampilkan menu Hubungi
Contact Us
Klik Account
Tampilkan menu Account
Account
Klik Search
Tampilkan menu Search
Search
Klik Troli
Tampilkan menu Troli
Klik Kategori
Tampilkan menu Kategori
Troli
Klik Informasi
Tampilkan menu Informasi
Informasi Kategori
Klik Home
Tampilkan menu Home
75
Home
Informasi
Klik Delivery
Tampilkan DeliveryDelivery
Klik FAQ
Tampilkan FAQ FAQ
Klik Cara Pembelian
Tampilkan Cara PembelianCara
Pembelian Klik Tentang Kami
Tampilkan Tentang KamiTentang
Kami
Klik Home
Tampillkan menu Home
Gambar 4.17 STD Halaman Informasi
Home
Gambar 4.18 STD Halaman Kategori
Kategori Sandal Batik Tas Batik
Klik Aksesoris Batik
Tampilkan Aksesoris Batik
Klik Sandal / Tas Batik
Tampilkan Sandal / Tas Batik
Sandal / Tas Batik
Bahan Batik
Klik Bahan Batik
Tampilkan Bahan Batik
Klik Blus Batik
Tampilkan Blus BatikBahan Batik
Klik Kemeja Pria Batik
Tampilkan Kemeja Pria BatikKemeja Pria
Batik
Klik Sackdress
Tampilkan SackdressSackdress
Klik Home
Tampilkan Home
76
Home
Klik Home
Kembali ke menu Home
User Account
Klik
User Account
Tampilkan User Account
Isi UseAccount
r
Gambar 4.19 STD Halaman user account
Gambar 4.20 STD Halaman Search
77
4.2.3 Code Generation (Pengkodean)
Pada tahap ini penulis melakukan penginstalan prestashop
sebagai program utama. Program ini mempunyai kelebihan untuk
membuat aplikasi toko online yang kreatif.
4.2.3.1 Instalasi Prestashop
Sebelum melakukan penginstalan prestashop
pastikan pada PC atau laptop harus terinstal XAMPP.
Langkah-langkah instalasi Prestashop :
1) Download file prestashop versi terbaru
(http://www.prestashop.com/download/prestashop_1.2.
5.0.zip).
2) Pada saat download, bisa sekaligus download bahasa
yang akan di install pada Prestahop misalnya Bahasa
Indonesia.
(http://www.prestashop.com/download/lang_packs/gzip
/id.gzip).
3) Ekstrak file Prestashop yang sudah di download pada
folder yang sudah ditentukan pada server local misalnya
c:\xampp\htdocs\prestashop.
4) Buka browser ketik address http://localhost/prestashop,
otomatis akan tampil halaman instalasi. Ada dua pilihan
bahasa instalasi, pilih English klik next.
78
5) Database Configuration : Buka web browser dan ketik,
http://localhost/phpmyadmin.
6) Buat database baru dengan nama prestashop,
selanjutnya kembali ke instalasi prestashop. Lalu klik
verify now .
7) Setelah database telah terhubung, klik next untuk
menyelesaikan proses instalasi prestashop.
Pada saat akan mengelola Back office caranya
adalah sebagai berikut :
1) Buka web browser lalu ketik
http://localhost/prestashop/admin.
2) Untuk selanjutnya, hapuslah folder install pada
c:\xampp\htdocs\prestashop\install dan ganti folder
admin menjadi admin2406 sehingga
http://localhost/prestashop/admin2406. Seperti terlihat
pada gambar di bawah ini :
Gambar 4.21 Akses Back office
79
Gambar 4.22 Menu Back office
Prestashop sudah menggunakan program ajax,
misalnya fitur keranjang belanja. Transaksi online saat
menambah item belanja ke dalam keranjang sebelah kiri,
sehingga muncul animasi yang lebih menarik, selain itu
prestashop mendukung beberapa mata uang dan pilihan
bahasa yang bisa ditambahkan melalui back office oleh
pihak administrator.
Penulis dalam penelitian ini menggunakan mata
uang rupiah sehingga penulis harus menambah mata uang
rupiah pada prestashop dan menjadikan mata uang rupiah
80
tersebut sebagai default currency pada batik shop online
ini. Berikut di bawah ini langkah-langkah menambah mata
uang rupiah sebagai default currency:
a. Sebelumnya harus login terlebih dahulu sebagai admin.
b. Back Office >> Payment >> Currencies.
Gambar 4.23 Modul Payment
c. Untuk menambah silahkan klik ‘Add New’ lalu isikan :
-Currency : Rupiah
-ISO Code : IDR
-Symbol : Rp
-Conversion Rate : 1 ( isi sesuai kurs yang tepat).
81
Gambar 4.24 Field Currencies
d. Lalu simpan dengan klik ‘Save’.
e. Kembali ke >> Payment >> Currencies.
f. Jika ingin Rupiah menjadi default : di bawah daftar
mata uang tersebut ada ‘Currencies Option’.
g. Lalu setting rupiah sebagai ‘Default Currency’ dan klik
‘Save’.
Selain menggunakan mata uang rupiah sebagai
default currency, penulis juga menggunakan bahasa
Indonesia sebagai default language. Langkah yang harus
dilakukan yaitu menambah bahasa, berikut cara nya :
a. Back Office >> Tools >> Languages >> Add new.
82
b. Isi informasi kolom yang ada lalu klik save.
c. Terdapat kolom untuk mengisi kode ISO Negara untuk
dapat mengetahui kode ISO tiap Negara dapat di lihat
(http://www.iso.org/iso/country_codes/iso_3166_code_l
ists/english_country_names_and_code_elements.htm.)
untuk kode ISO negara Indonesia yaitu ID.
d. Terdapat kolom untuk mengisi icon flag ( bendera )
yang digunakan pada prestashop.
e. Untuk dapat mengetahui icon flag negara dapat dilihat
pada (http://www.famfamfam.com/lab/icons/flags/)
f. Back Office >> Tools >> Translations >> Translation
exchange >> Import a language pack. Lalu klik Browse
untuk mencari file .gzip pada hard drive.
g. Klik import.
Menurut penulis, salah satu layanan penting yang
harus ada pada setiap website adalah online help, dimana
pelanggan atau calon pembeli dapat langsung berintersaksi
dengan penjual. Dengan adanya layanan online, pelanggan
bisa bertanya langsung tentang produk yang ingin atau telah
dibelinya “after sales service”, dan penjual dapat
melakukan pendekatan yang lebih kepada calon pembeli
agar mereka yakin dengan produk yang ditawarkan.
83
Dengan demikian probabilitas terjadi penjualan
menjadi lebih besar dan loyalitas pelanggan yang ada bisa
terjaga. Untuk Prestashop ada satu modul yang dapat
dipakai untuk layanan online ini, yaitu online help yang
penulis temukan dengan bantuan alat pencari Google.
Berikut caranya:
a. Download file online help.
b. Jika sudah dapat filenya, yang harus dilakukan
berikutnya adalah tambah modul baru di back office
prestashop dan atur posisi sesuai keinginan.
c. Lakukan konfigurasi. Caranya:
1. Cari file onlinehelp.tpl di folder modules. Bisa
menggunakan FTP >> modules > onlinehelp.
2. Temukan baris yang seperti dibawah ini :
<a href="ymsgr:sendim?Your_Yahoo_ID"><img
src="http://opi.yahoo.com/online?u=Your_Ya
hoo_ID&m=g&t=14" width="128" height="100">
</a>.
3. Lalu ganti Your_Yahoo_ID dengan Yahoo ID yang
ingin digunakan.
Penulis menambahkan integrasi s3slider dengan
prestashop pada halaman home website Batik Shop yang
berguna untuk menampilkan slideshow. Menggunakan
script ini cukup dengan menyisipkan kode javascript, CSS
84
dan HTML (berupa list untuk .menampilkan image).
Halaman depan yang memuat tampilan yang akan diganti
sebetulnya adalah berupa modul bernama Editorial. Modul
ini dapat ditemukan di folder modules\Editorial. Berikut
caranya :
a. Download S3SliderFull.zip yang berisi script.
b. Ada beberapa file disana, antara lain: editorial.xml
(sumber data), editorial.tpl (template layout),
editorial.php (bertanggung jawab mengisi data dengan
menggunakan layout diatas dan menampilkannya di
halaman depan). Karena yang akan diubah adalah
layoutnya, maka perubahan cukup dilakukan pada file
editorial.tpl. (Tercantum di Lampiran).
c. Selanjutnya copy file S3Slider.js dan file image dari
S3SliderFull.zip yang sudah di edit ke folder
modules\editoral.
d. Buat file editorial.css di folder yang sama dan
tambahkan kode. (Tercantum di Lampiran).
Selain itu, penulis menambahkan modul lainnya
yang bermanfaat untuk memperbesar ukuran gambar saat di
rollover oleh pelanggan. Berikut caranya:
a. Download dan ekstrak file imagesenlarge_v1_2.zip.
b. Copy dan paste folder tersebut ke direktori modul.
85
c. Buka panel admin (back office), lalu klik tab modules.
d. Klik tambah produk baru.
e. Klik Utilities, lalu klik instal.
Gambar 4.25 Add new modules image enlarge
4.2.3.2 Penggunaan Paypal
Paypal merupakan salah satu alat pembayaran di
internet yang aman. Paypal merupakan salah satu cara
untuk mentransfer uang ke rekening paypal yang lain. Dan
juga mendapatkan bayaran yang akan masuk ke rekening
paypal yang kemudian bisa dicairkan (withdraw) secara
langsung ke rekening bank. Mempunyai rekening paypal
merupakan hal yang penting jika melakukan bisnis di
internet.
Langkah pertama yaitu memiliki account paypal dengan
melakukan registrasi di www.paypal.com . setelah
mempunyai rekening di Paypal, bisa mengirim dan
86
menerima uang dari seluruh dunia. Bila mengirim uang
dengan Paypal, terlebih dahulu harus diketahui nama
rekening Paypal tujuan (nama email) yang akan dibayarkan.
Cara kerja pembayaran menggunakan Paypal :
1. Saat Pelanggan mulai melakukan tahap checkout akan
di tanya apakah menggunakan paypal untuk
pembayaran. Setelah itu, akan di redirect ke login
paypal yaitu http://www.paypal.com.
2. Setelah login ke paypal, akan ada lembar invoice
dengan jumlah sesuai dengan pembelanjaan tadi.
3. Jika pelanggan setuju bayar, maka paypal akan otomatis
memotong Credit Card pelanggan sesuai dengan nilai
invoice.
4. Setelah itu redirect ke website Batik Shop.
5. Jika Credit Card dalam keadaan tidak overlimit, dalam
beberapa detik kemudian, ada info dari Batik Shop dan
paypal (bentuk dalam email) bahwa transaksi sudah
berhasil.
Gambar 4.26 Cara Kerja Paypal
87
4.2.3.3 Kebutuhan Sistem
Spesifikasi piranti keras untuk mendukung aplikasi
toko online batik shop agar dapat berjalan dengan baik.
Berikut adalah spesikasi piranti keras dan piranti lunak
minimal yang dibutuhkan :
1. Piranti Keras :
a. Computer Processor Unit minimal 1,66 GHz.
b. Memory 1 GB.
c. Hard Disk Drive 160 GB
2. Piranti lunak :
a. Sistem operasi Microsoft Windows XP Pro Edtion
SP2.
b. XAMPP yang terdiri dari (Web Server Apache 1.3,
PHP 5, MySQL 5).
c. Prestashop versi terbaru 1.2.5.0.
d. Adobe photoshop CS 2 untuk penggunaan edit
gambar.
e. Filezilla FTP client.
4.2.4 Test (Pengujian)
Setelah selesai melakukan perancangan, pada tahap ini
dilakukan pengujian terhadap program oleh penulis dengan
menggunakan pendekatan Black box testing yang dilakukan pada
interface software. Blackbox testing bertujuan untuk mengetahui
88
sejauh mana aplikasi ini dapat bekerja dengan baik dan apakah
aplikasi ini dapat memenuhi tujuan yang ingin diperoleh sebelum
diserahkan kepada end user. Pengujian dilakukan dalam 2 (dua)
tahap yaitu pengujian internal pada aplikasi yang dilakukan oleh
penulis dan pengujian lapangan yang dilakukan oleh calon pemakai
aplikasi ini.
Tahap ini dilakukan pengujian internal pada aplikasi yaitu
melakukan pengujian atas suatu bagian program untuk mengetahui
apakah dapat berfungsi dengan baik ketika dimasukan data atau
menampilkan data, selain itu untuk bertujuan menemukan
kesalahan serta memastikan output yang dihasilkan sesuai dengan
yang diinginkan. Hasil yang didapat pada pengujian ini berhasil.
Ujicoba lapangan dilakukan dengan memberi kesempatan
kepada calon user untuk mencoba sendiri sistem yang telah
dirancang. Sistem ini terdiri dari 2 aktor utama yaitu admin dan
user maka penulis memberi kesempatan kepada mereka untuk
menjadi tester dan menjawab kuesioner sederhana yang disertakan
dalam pengujian lapangan. Kuesioner dimaksudkan untuk mencari
tahu sejauh mana sistem dapat dimengerti dan diaplikasikan oleh
calon user. Pada ujicoba lapangan ini penulis meminta 1 orang
sebagai admin, 1 orang user.
89
4.2.4.1 Pengujian Mandiri
Pada tahap ini, penulis melakukan uji coba terhadap
sistem yang telah dikembangkan dengan hasil sebagai
berikut :
Tabel 4.10 Hasil Pengujian Mandiri
No Modul Prasyarat Hasil yang diharapkan Hasil uji coba
1 Edit & Hapus produk
Login sebagai Admin. data sudah ada di database
Dapat merubah dan menghapus produk katalog baru ke dalam database
OK
2 Login Login sebagai user
Masuk ke halaman user account
OK
3 Edit & Hapus User
Login sebagai admin, data sudah ada di database
Dapat merubah dan menghapus user yang ada di dalam database
OK
4 Tambah sub category
Login sebagai admin, data sudah ada di database
Dapat menambah sub category baru pada category produk yang ada di dalam database
OK
5 Edit & Hapus sub category
Login sebagai admin, data sudah ada di database
Dapat merubah dan menghapus sub category dalam database
OK
6 Search Login sebagai admin dan user
Dapat mencari produk yang dicari yang ada di dalam database sesuai dengan keyword
OK
7 Upload dan hapus produk
Login sebagai admin, data sudah ada pada database
Dapat menambah dan menghapus produk
OK
8 Proses Checkout
Login sebagai user
Dapat melakukan proses penentuan alamat, kurir pengiriman dan pembayaran
OK
9 View all user Login sebagai admin
Dapat melihat semua user yang sudah melakukan registrasi
OK
90
10 View all categories
Login sebagai user, category sudah ada di database
Dapat melihat semua category ada di dalam database
OK
4.2.4.2 Pengujian Lapangan
Pada tahap ini, penulis meminta 2 (dua) orang
responden untuk melakukan uji coba terhadap aplikasi ini.
Responden yang dipilih terdiri atas 1 (satu) orang pihak
batik shop, 1 (satu) orang user. Bukti terlampir uji coba
yang dilakukan dapat dilihat pada bagian lampiran. Secara
ringkas, hasil pengujian yang dapat penulis simpulkan
adalah sebagai berikut :
Tabel 4.11 Pengujian Lapangan
No Pengujian Penilaian 1. Fitur aplikasi secara keseluruhan Baik 2. Fitur untuk Admin Baik 3. Fitur untuk User Baik 4. Tampilan Aplikasi Baik 5. Prosedur Pengoperasian Baik 6. Keamanan Aplikasi Baik 7. Kesesuaian dengan Kebutuhan Baik
Setelah melakukan pengujian mandiri maupun
pengujian lapangan, penulis mengambil kesimpulan bahwa
secara fungsional aplikasi telah berjalan sesuai dengan yang
diharapkan.
Setelah semua tahap dilakukan maka selanjutnya
adalah evaluasi terhadap program. Evaluasi program
dilakukan untuk mengetahui kelebihan dan kekurangan
91
yang ada pada aplikasi ini, faktor-faktor yang ada pada
aplikasi ini dan faktor-faktor lain yang dapat digunakan
untuk pengembangan aplikasi ini selanjutnya. Penulis
melakukan evaluasi dengan melakukan demo program
kepada staff Batik Shop.
Dari evaluasi tersebut maka penulis menghasilkan
beberapa poin penting yaitu :
a. Aplikasi mampu memberikan informasi secara efisien
dan dinamis.
b. Informasi yang disajikan sesuai dengan kebutuhan
Batik Shop.
c. Dalam menggunakan aplikasi ini tidak mengalami
kesulitan, karena aplikasi ini bersifat mudah digunakan
dan user friendly.
4.2.5 Support (Pemeliharaan)
Tahap akhir ini dalam siklus SDLC pada model waterfall
ini adalah support atau maintenance. Tahap ini dilakukan kegiatan
hosting aplikasi ke web dengan menggunakan jasacyber.com,
dimana Batik Shop harus mendaftarkan nama domain-nya dan
menggunakan jasa sewa hosting agar aplikasi toko ini dapat
berjalan secara online. Peningkatan sistem diperlukan, bila
92
93
dikemudian hari untuk lebih meningkatkan kualitas aplikasi Batik
Shop online ini.
Pada tahap ini, sistem harus dipertahankan dan dirawat
secara berkala agar sistem tidak mengalami eror. Beberapa hal
yang harus dilakukan pada tahap ini adalah :
1. Mengupdate informasi produk.
2. Memelihara sistem agar dapat berjalan dengan lancar.
3. Memperpanjang waktu sewa domain dan hosting.
BAB IV
PEMBAHASAN
4.1. Sekilas Tentang Toko Batik Shop
4.1.1 Profil Batik Shop
Nama : Batik Shop
Alamat : Jl.H. Mas Mansur Bendan Gg.XVII No.18
Pekalongan
No. Telepon : (0285) 412988
E-mail : [email protected]
Pekalongan telah lama di kenal sebagai salah satu tempat
berbelanja batik di Indonesia. Batik Shop yang berlokasi di
Pekalongan ini bergerak di bidang tekstil. Batik Shop memberikan
kemudahan berbelanja bagi konsumen dengan memberikan harga
yang sangat terjangkau dan memberikan banyak pilihan kepada
konsumen untuk dapat mengenakan baju batik berupa blus batik,
kemeja batik, sackdress dengan model yang mengikuti tren baru.
Selain itu, Batik Shop menyediakan aksesoris batik seperti sandal
batik, tas batik dan bahan batik. Batik Shop memiliki tim kecil
yang solid yang hanya terdiri dari 4 divisi. Batik Shop
mempercayakan supply barang kepada para supplier terpercaya
dan tim perusahaan pengiriman yang handal.
52
4.1.2 Visi dan Misi Batik Shop
4.1.2.1 Visi
Batik Shop merupakan toko batik yang terinspirasi dari
keinginan untuk menyelaraskan warisan budaya bangsa
batik Indonesia dengan perkembangan zaman tanpa
menghilangkan identitas asli yang merupakan hasil karya
turun menurun yang telah dijaga selama beberapa generasi.
4.1.2.2 Misi
Mempertahankan warisan budaya bangsa sebagai wujud
nyata kecintaan terhadap batik, antara lain:
1. Menyediakan produk - produk batik berkualitas dengan
harga terjangkau yang sangat cocok untuk
memperindah gaya busana pelanggan.
2. Pelanggan dari berbagai penjuru daerah bahkan dunia,
sehingga budaya batik dikenal masyarakat luas.
4.1.3 Struktur Organisasi
Owner
Gambar 4.1 Struktur Organisasi
Divisi Finance
Divisi Marketing
Divisi Dokumentasi
Staff Staff
Supplier
53
4.2 Pengembangan Aplikasi Batik Shop
Metode yang penulis gunakan untuk melakukan pengembangan
aplikasi Batik Shop adalah System Development Life Cycle (SDLC) model
waterfall yang dikemukakan oleh Pressman (2001:28-30). Berikut adalah
pembahasan tahapan-tahapan yang digunakan untuk pengembangan
aplikasi Batik Shop ini adalah:
4.2.1 Analysis (Analisis)
Proses transaksi penjualan produk Batik Shop pada sistem
yang sedang berjalan (lihat gambar 4.2) dilakukan dengan tahapan
sebagai berikut :
1. Pelanggan biasanya datang langsung ke toko Batik Shop untuk
membeli barang yang diinginkan.
2. Setelah pelanggan menentukan pilihan barang yang ingin
dibeli, kemudian pihak Batik Shop mengecek stok barang,
apabila stoknya tersedia maka dilanjutkan ke proses invoicing.
3. Berdasarkan pesanan yang telah dibuat oleh pelanggan, total
biaya yang akan ditagih kepada pelanggan dengan mencetak
invoice.
4. Barang akan diantarkan ke rumah pelanggan oleh jasa kurir
pengiriman dengan membawa invoice jika pelanggan sudah
membayar uang muka dan akan dilunasi setelah barang
dikirimkan.
54
5. Pelunasan pembayaran dapat pelanggan lakukan melalui kurir
yang mengirimkan barang tersebut.
6. Kurir menyetorkan uang tersebut ke bagian keuangan Batik
Shop.
55
Pelanggan
Batik Shop
Pemesanan Barang
Ada Barang
Hitung Total Biaya
Mencetak invoice
Pengecekan Barang
Gambar 4.2 Workflow Sistem Yang Sedang Berjalan
56
4.2.1.1 Identifikasi Masalah
Pada tahap ini, dilakukan identifikasi masalah,
berikut ini merupakan penjabarannya :
a. Pelanggan sering mengalami kesulitan mencari
informasi tentang produk-produk batik yang ada beserta
harganya.
b. Belum tersedianya layanan pembelian produk-produk
batik online di Batik Shop. Sistem penjualan masih
berlangsung secara konvensional dimana pelanggan
membeli barang dengan datang langsung ke toko.
c. Transaksi pembayaran yang dilakukan melalui kurir
sangat menjadi beban perusahaan, karena sangat
membutuhkan kejujuran dan kepercayaan yang tinggi.
d. Metode pembayaran yang kurang efektif dan efisien.
4.2.1.2 Usulan Pemecahan Masalah
Dengan mengidentifikasi seluruh permasalahan
yang telah diidentifikasi oleh penulis sebelumnya, maka
penulis mengajukan beberapa usulan pemecahan masalah
yaitu :
a. Membuat Aplikasi toko yang dapat diakses secara
online atau yang terhubung oleh sistem jaringan
komputer. oleh pelanggan sehingga memudahkan
57
pelanggan Batik Shop dalam berbelanja dan melakukan
transaksi tanpa harus datang ke toko.
b. Menggunakan metode pembayaran secara online yaitu
dengan menggunakan Paypal.
c. Aplikasi yang dibuat memiliki halaman administrator
yang dapat mempermudah toko Batik Shop dalam
mengkonfigurasikan katalog.
4.2.2 Design (Perancangan)
Setelah tahap analisis selesai, maka selanjutnya adalah
merancang aplikasi yang telah didefinisikan sebelumnya.
Perancangan sistem dimulai dengan perancangan Context
Diagram, Data Flow Diagram (DFD) dan perancangan database.
4.2.2.1 Perancangan Context Diagram
Proses bisnis yang terjadi pada sistem ini yaitu :
1. Pelanggan diharuskan memiliki account dengan
melakukan registrasi terlebih dahulu.
2. Pelanggan melakukan pembelanjaan produk-produk
yang dijual pada toko batik.
3. Setelah pelanggan telah selesai melakukan belanja,
pelanggan dapat melakukan transaksi dengan melewati
tahap checkout yaitu penentuan alamat pengiriman,
penentuan kurir pengiriman dan penentuan cara
pembayaran.
58
4. Pelanggan mendapatkan faktur secara langsung setelah
menyelesaikan transaksi dengan status preparation in
progress.
5. Batik Shop kemudian mengecek dan mempersiapkan
barang yang akan dikirim ke pelanggan.
6. Metode pembayaran yang terjadi didalam transaksi
pembelian ini menggunakan transfer antar bank dari
bank pelanggan ke bank Batik Shop.
7. Barang dikirim oleh jasa kurir pengiriman dan akan
sampai ke pelanggan tergantung dari wilayah
pengiriman.
Alur proses dari pengembangan aplikasi ini dapat
digambarkan dalam suatu context diagram.:
Gambar 4.3 Context Diagram Aplikasi Batik Shop
59
Ketika aplikasi e-commerce ini dimulai maka akan
ditampilkan halaman utama (home) dari website yang berisi
sebagian dari gambar-gambar produk yang ada di Toko
Batik Shop. Adapun Tahapan proses pemesanan yaitu :
a. Untuk memulai proses pemesanan dan transaksi
pembelian, user dapat melakukan pemilihan produk
yang ingin dibelinya.
b. Jika user telah memilih produk, maka klik tombol
tambah ke troli.
c. Jika user ingin melanjutkan belanja atau membeli
produk lainnya, user dapat kembali ke halaman utama.
d. Sebaliknya jika user merasa salah pilih produk, klik
tombol hapus, user juga dapat merubah jumlah pesanan
lalu klik ok, atau jika sudah berbelanja klik selanjutnya.
e. Selanjutnya isi form yang tersedia secara jelas: nama,
alamat, nomor telepon, email, password.
f. Maka akan ditampilkan informasi kurir pengiriman dan
selanjutnya tahap pembayaran yang akan digunakan
oleh user.
g. Proses checkout selanjutnya akan menampilkan
konfirmasi order.
h. Order user akan diproses oleh Batik Shop dan barang
yang telah dipesan akan segera dikirim.
60
i. Jika transaksi telah selesai maka pelanggan akan
mendapat invoice sebagai bukti bahwa pelanggan
tersebut telah melakukan transaksi. Proses pemesanan
batik online dapat digambarkan dalam bentuk flowchart
yang dapat dilihat pada Gambar 4.4 berikut :
61
Mulai
Pilih item
Pilih gambar produk yang ingin dipesan
Pilih kategori
pada katalog
Pemesanan dengan menu
search
Pesan
Sesuai
Ya
Tidak
Ya Tidak
Troli
Login
Checkout
Home
Invoice
Konfirmasi order
Selesai
Gambar 4.4 Flowchart Proses Pemesanan Batik Online
62
63
4.2.2.2 Data Flow Diagram (DFD)
a. Data Flow Diagram level 0 (DFD level 0) yang
merupakan pengembangan dari context diagram.
Gambar 4.5 DFD Level 0
BAB V
PENUTUP
Pengembangan aplikasi e-commerce dengan menggunakan CMS (Content
Management System) prestashop pada Batik shop ini setidaknya dapat membantu
penyampaian informasi detail produk kepada konsumen secara online dan
memudahkan bertransaksi dalam berbelanja tanpa harus datang ke toko secara
langsung.
Setelah melakukan serangkaian penelitian, seperti yang tertera pada bab III
dan Bab IV, maka pada bab ini penulis akan menguraikan kesimpulan yang dapat
ditarik dari rangkaian penelitian tersebut. Selain kesimpulan, penulis juga
memberikan saran yang akan bermanfaat bagi pihak-pihak yang akan melanjutkan
pengembangan penelitian ini.
5.1 Kesimpulan
Dalam penelitian ini terdapat beberapa hal yang dapat penulis
simpulkan, yaitu :
1) Aplikasi toko online yang dibangun dapat digunakan untuk
memilih produk yang diinginkan pelanggan, melakukan pemesanan
barang secara online dan melakukan transaksi pembayaran
menggunakan Paypal, transfer antar bank dan COD (Cash On
Delivery).
2) Batik Shop Online berfungsi sebagaimana kebutuhan user dan
admin dalam analisis kebutuhan aplikasi.
94
95
5.2 Saran
Aplikasi toko online berbasiskan teknologi CMS (Content
Management System) yang penulis kembangkan ini masih terdapat
beberapa kekurangan. Oleh karena itu, penulis juga ingin menyampaikan
beberapa saran guna menambah manfaat penelitian ini, yaitu :
1) Dengan berkembangnya teknologi seluler, penulis berharap akan ada
pengembangan lanjutan untuk akses aplikasi ini melalui ponsel.
2) Melakukan evaluasi sistem secara berkala untuk mengantisipasi
penambahan kebutuhan sistem sebagai contoh penambahan jenis
produk yang akan datang atau perubahan harga produk barang.
3) Content website e-commerce perlu ditambah untuk menarik lebih
banyak pembeli.
DAFTAR PUSTAKA
Alipha, Beberapa macam jenis CMS, 2009,
(http://alipha.net/category/blogger/ diakses 2 Desember 2009 pukul
10.15 WIB).
B2C, (http://www.cert.or.id/~budi/articles/1999-02.pdf , diakses tanggal 20
Desember 2009 pukul 14.00 WIB).
Chaudhury, Abijit & Jean-Pierre Kuilboer, 2002, e-Business and e-Commerce
Infrastructure, McGraw-Hill.
Date, C.J, 2005, Pengenalan Sistem Basis Data Jilid 2 Edisi ketujuh, Indeks,
Jakarta. xviii + 472 hlm.
E-commerce, (http://r-marpaung.tripod.com/ElectronicCommerce.doc diakses
tanggal 20 Desember 2009 pukul 10.44 WIB).
(http://www.nofieiman.com diakses tanggal 20 Desember 2009
pukul 12.04 WIB).
Hartono, Jogiyanto, 1999, Analisis & Disain Sistem Informasi : pendekatan
terstruktur teori dan praktek aplikasi bisnis, Andi, Yogyakarta.
Jenis-jenis E-commerce, (http://www.cert.or.id/~budi/articles/1999-02.pdf ,
diakses tanggal 20 Desember 2009 pukul 12.15 WIB).
Kadir, Abdul, 2003, Pengenalan Sistem Informasi, Penerbit Andi, Yogyakarta.
96
Kendall, K.E. dan Julie E. Kendall. 2003. Analisis dan Perancangan Sistem.
Edisi Terjemahan. PT Intan Sejati : Klaten.
Paypal, www.paypal.com diakses pada tanggal 2 Juni 2010 pukul 19.34 WIB.
Peranginangin, Kasiman, 2006, Aplikasi Web dengan PHP dan MySQL, Andi,
Yogyakarta.
Pressman, Roger S, 2001, Software Engineering A Practioner’s Approach 5th
edition, Mc Graw Hill.
Prestashop Country codes,
http://www.iso.org/iso/country_codes/iso_3166_code_lists/english
_country_names_and_code_elements.htm. diakses pada 20
November 2009 pukul 14.00 WIB.
Prestashop Download,
http://www.prestashop.com/download/prestashop_1.2.5.0.zip
diakses pada 20 November 2009 pukul 11.05 WIB.
Prestashop Forum,
www.prestashop.com/forum/ diakses pada 22 November 2009
pukul 21.55 WIB.
Prestashop Icon Flags,
http://www.famfamfam.com/lab/icons/flags/ diakses pada 25
November 2009 pukul 20.00 WIB.
Prestashop Language,
http://www.prestashop.com/download/lang_packs/gzip/id.gzip
diakses pada 28 November 2009 pukul 21.00 WIB.
97
98
Prestashop Wiki,
www.prestashop.com/wiki/ diakses pada 14 November 2009
pukul 22.10 WIB.
Recaptcha, http://www.recaptcha.net diakses pada 3 Juni 2010 pukul 11.00 WIB.
Rahimsyah, MB, 2002, Kamus Komputer dan Internet, Aprindo, Jakarta.
Rohmatullah, Amin, 2009, Panduan membuat toko online,
http://wgtt.org diakses pada 5 Januari 2010 pukul 15.32 WIB.
Setiawan, Deris, 2002, E-Commerce,Corbis.com.
Suprianto, Dodit, 2008, Buku Pintar Pemrograman PHP, OASE Media, Bandung.
Sutanta, Edhy, 2005. Pengantar Teknologi Informasi, Graha Ilmu, Yogyakarta.
Stallings, William, 2002, Komunikasi Data dan Komputer Jaringan Komputer,
Salemba Teknika,Jakarta.
Wikipedia, XAMPP,
http://en.wikipedia.org/wiki/Xampp diakses pada 14 November
2009 pukul 22.24 WIB.
Wikipedia, E-Commerce, 2010,
http://wartawarga.gunadarma.ac.id/2010/02/e-commerce-34/
diakses pada tanggal 5 Desember 2009 pukul 10:05 WIB.
LAMPIRAN A
WAWANCARA
LAMPIRAN A
WAWANCARA
A.1. Wawancara Dengan Owner Batik Shop
Tanggal : 1 November 2009
Narasumber : Sitti Salamah
Bagaimana menurut ibu mengenai sistem berbelanja dan bertransaksi secara
stand alone ( berdiri sendiri ) saat ini yang masih dijalankan pada batik
shop?
Sistem yang saat ini diterapkan menurut saya masih termasuk belum efektif. Batik
shop membutuhkan suatu wadah untuk mempromosikan produk secara lebih luas
lagi, sehingga konsumen pun tidak hanya sebatas satu kota saja.
Apakah ada kendala di dalam sistem yang berjalan saat ini ?
Kendalanya adalah konsumen harus datang langsung ke toko untuk dapat
berbelanja produk dan bertransaksi.
Bagaimana mengatasi kendala-kendala tersebut?
Belum ada cara untuk mengatasi kendala-kendala tersebut.
Apa harapan bapak / ibu terhadap sistem yang ada sekarang?
supaya batik shop memiliki wadah untuk mempromosikan produknya 24 jam non
stop dan pelanggan toko tidak hanya datang dari 1 kota saja, sehingga nantinya
diharapkan dapat menambah income bagi batik shop.
.
A-1
A.2 Wawancara dengan Konsumen Batik Shop
Tanggal : 27 Desember 2009
Narasumber : Sitti Thoyibah
Bagaimana menurut bapak / ibu mengenai sistem berbelanja dan
bertransaksi secara stand alone ( berdiri sendiri ) saat ini yang masih
dijalankan pada batik shop ?
Sistem yang berjalan saat ini masih manual dan tidak efektif.
Apakah ada kendala di dalam sistem yang berjalan saat ini ?
Bagi pelanggan dari luar kota harus datang langsung ke toko.
Bagaimana mengatasi kendala-kendala tersebut?
Belum ada cara mengatasinya.
Apa harapan bapak / ibu terhadap sistem yang ada sekarang?
Saya berharap adanya perubahan cara supaya lebih efektif dan tepat waktu.
A-2
LAMPIRAN B
FORMULIR KUESIONER UJICOBA
KUESIONER UJICOBA ADMIN Batik Shop Online ( Webshopping )
__________________________________________________________________
Nama :
Jabatan :
Silakan dijawab sesuai dengan pendapat anda setelah mencoba Aplikasi Batik
Shop dengan melingkari salah satu jawaban.
1. Bagaimanakah tampilan dari aplikasi webshopping batik shop ini?
a. Kurang baik b. Cukup Baik c. Baik d. Sangat baik
2. Bagaimanakah struktur menu navigasi dalam aplikasi ini?
a. Kurang jelas b. Cukup Jelas c. Jelas d. Sangat jelas
3. Bagaimanakah prosedur pengoperasian Batik shop online ini?
a. Sangat sulit b. Sulit c. Mudah d. Sangat mudah
4. Sebagai aplikasi toko online, apakah fasilitas yang tersedia pada aplikasi ini
sudah cukup memadai?
a. Kurang memadai b. Cukup memadai c. Memadai d.Sangat memadai
5. Apakah menu admin ( Back office ) pada Batik shop online ini dapat
membantu anda mengelola sistem?
a. Ya b. Tidak
Jakarta, 20 Februari 2010
( )
KUESIONER UJICOBA USER Batik Shop Online ( Webshopping )
__________________________________________________________________
Nama :
Pelerjaan :
Silakan dijawab sesuai dengan pendapat Bapak / Ibu setelah mencoba Aplikasi
Batik shop online ini dengan melingkari salah satu jawaban.
1. Bagaimanakah tampilan dari aplikasi Batik shop online ini?
a. Kurang baik b. Cukup Baik c. Baik d. Sangat baik
2. Bagaimanakah struktur menu navigasi dalam Batik shop online ini?
a. Kurang jelas b. Cukup Jelas c. Jelas d. Sangat jelas
3. Bagaimanakah prosedur pengoperasian Batik shop ini?
a. Sangat sulit b. Sulit c. Mudah d. Sangat mudah
4. Sebagai aplikasi toko online, apakah fitur yang tersedia pada Batik shop
online ini sudah cukup memadai?
a. Kurang memadai b. Cukup memadai c. Memadai d.Sangat memadai
5. Apakah Batik shop online ini dapat membantu pelanggan dalam mengetahui
detail produk tanpa harus datang ke toko secara langsung?
a. Ya b. Tidak
Jakarta,2 Maret 2010
( )
LAMPIRAN C
HASIL PERANCANGAN ANTARMUKA
1. Halaman Home
2. Halaman Produk
3. Halaman User login
4. Halaman User Account Register
5. Halaman Contact Us
6. Halaman Checkout
7. Halaman Shipping (Pengiriman)
8. Halaman Add Sub Kategory
9. Halaman Histori Pembelian
10. Halaman Invoice
11. Halaman Add Sub Kategory
12. Halaman Upload 1
13. Halaman Upload 2
14. Halaman Upload 3
15. Halaman Admin
16. Halaman View All User
LAMPIRAN D
SOURCE CODE
1. Online help yahoo messenger
<div id="informations_block_left" class="block">
<h4>{l s="Online Help" mod="onlinehelp"}</h4>
<ul class="block_content">
<div align="center">Yahoo Messenger Online Help<br>
<a
href="ymsgr:sendim?novie_pumpkins"><imgsrc="http://opi.yahoo
.com/online?u=novie_pumpkins&m=g&t=14" width="128"
height="100" border=0></a></div>
</ul>
</div>
2. Image slideshow s3slider
<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">
<script type="text/javascript"
src="{$this_path}s3Slider.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function()
{$('#slider').s3Slider({timeOut: 3000});});
{/literal}
</script>
<style type="text/css">@import
url({$this_path}editorial.css);</style>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="{$this_path}1.jpg" alt="1" /></a>
<span class="bottom"><strong>Selamat datang di toko pakaian
batik online kami</strong><br />Batik Shop</span>
</li>
<li class="sliderImage">
<a href=""><img src="{$this_path}2.jpg" alt="2" /></a>
<span class="bottom"><strong>BATIK SHOP</strong><br />Batik
merupakan warisan budaya yang tak ternilai, salah satu
kebanggaan Indonesia yang telah diakui dunia.</span>
</li>
<li class="sliderImage">
<img src="{$this_path}3.jpg" alt="3" />
<span class="bottom"><strong>Title text 2</strong><br
/>Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- /Module Editorial -->
<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">
{if $xml->body->home_logo_link}<a href="{$xml->body-
>home_logo_link|escape:'htmlall':'UTF-8'}" title="{$xml-
>body->$title|escape:'htmlall':'UTF-8'|stripslashes}">{/if}
{if $homepage_logo}<img src="{$this_path}homepage_logo.jpg"
alt="{$xml->body->$title|escape:'htmlall':'UTF-
8'|stripslashes}" />{/if}
{if $xml->body->home_logo_link}</a>{/if}
{if $xml->body->$logo_subheading}{$xml->body-
>$logo_subheading|stripslashes}{/if}
{if $xml->body->$title}<h2>{$xml->body-
>$title|stripslashes}</h2>{/if}
{if $xml->body->$subheading}<h3>{$xml->body-
>$subheading|stripslashes}</h3>{/if}
{if $xml->body->$paragraph}<div class="rte">{$xml->body-
>$paragraph|stripslashes}</div>{/if}
</div>
<!-- /Module Editorial -->
2. Images enlarge
<link rel="stylesheet" type="text/css"
href="{$module_dir}imagesenlarge.css" />
<!-- MODULE images enlarge -->
<script language="javascript" type="text/javascript">
var setAnimationStatus = {$animationStatus};
var extendedZoomSatus = {$extendedZoom};
</script>
<script language="javascript" type="text/javascript"
src="{$module_dir}imagesenlarge.js"></script>
<!-- /MODULE images enlarge -->
3. Captcha Code (Contact Us Form.php)
<?php $useSSL = true; include(dirname(__FILE__).'/config/config.inc.php'); include(dirname(__FILE__).'/header.php'); include(dirname(__FILE__).'/enginerecaptcha/recaptchalib.php'); include(dirname(__FILE__).'/modules/recaptcha/recaptcha.php'); $errors = array(); //instant recaptcha $recaptcha = new Recaptcha(); $smarty->assign('contacts', Contact::getContacts(intval($cookie->id_lang))); if (Tools::isSubmit('submitMessage')) { //reCaptcha cek if ($recaptcha->isActive()) if ($_POST["recaptcha_response_field"]) $resp = recaptcha_check_answer ($recaptcha->getPrivateKey(), $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]); if (!($from = Tools::getValue('from')) OR !Validate::isEmail($from)) $errors[] = Tools::displayError('invalid e-mail address'); elseif (!($message = nl2br2(Tools::getValue('message')))) $errors[] = Tools::displayError('message cannot be blank'); elseif (!Validate::isMessage($message)) $errors[] = Tools::displayError('invalid message'); elseif (!($id_contact = intval(Tools::getValue('id_contact'))) OR !(Validate::isLoadedObject($contact = new Contact(intval($id_contact), intval($cookie->id_lang))))) $errors[] = Tools::displayError('please select a contact in the list'); //cek recaptcha elseif (!isset($resp) and $recaptcha->isActive()) $errors[] = Tools::displayError('Image Verification ERROR, please try again'); elseif (!$resp->is_valid and $recaptcha->isActive()) $errors[] = Tools::displayError('Image Verification ERROR, please try again'); else { if (intval($cookie->id_customer)) $customer = new Customer(intval($cookie->id_customer));
if (Mail::Send(intval($cookie->id_lang), 'contact', 'Message from contact form', array('{email}' => $_POST['from'], '{message}' => stripslashes($message)), $contact->email, $contact->name, $from, (intval($cookie->id_customer) ? $customer->firstname.' '.$customer->lastname : $from))) $smarty->assign('confirmation', 1); else $errors[] = Tools::displayError('an error occurred while sending message'); } } $email = Tools::safeOutput(Tools::getValue('from', ((isset($cookie) AND isset($cookie->email) AND Validate::isEmail($cookie->email)) ? $cookie->email : ''))); $smarty->assign(array( 'errors' => $errors, 'email' => $email )); if ($recaptcha->isActive()) { $smarty->assign('userecaptcha', 1); $smarty->assign('recaptcha', recaptcha_get_html($recaptcha->getPublicKey())); } $smarty->display(_PS_THEME_DIR_.'contact-form.tpl'); include(dirname(__FILE__).'/footer.php'); ?>
4. Captcha Code (Validator.php)
<?php include(dirname(__FILE__).'/config/config.inc.php'); include(dirname(__FILE__).'/init.php'); if ($cookie->isLogged()) Tools::redirect('my-account.php'); $errors = array(); if (!Validate::isEmail($email = Tools::getValue('m'))) $errors[] = Tools::displayError('invalid e-mail address'); $key = Tools::getValue('k'); if (!empty($email) && !empty($key)) { $customer = new Customer(); $mail_ok = $customer->getByEmail(trim($email), NULL, 1); if ($customer->active == 2) { $validation_link = sha1('g$p_'.$customer->firstname.$customer->id); if (($customer->email == trim($email)) && $validation_link == $key && $customer->id && $mail_ok) { $customer->active = 1; $customer->update(); $smarty->assign('validate', 1);
} else $errors[] = Tools::displayError('invalid validation link'); } else $errors[] = Tools::displayError('account already activated'); include(dirname(__FILE__).'/header.php'); $smarty->assign('errors', $errors); $smarty->display(_PS_THEME_DIR_.'validator.tpl'); include(dirname(__FILE__).'/footer.php'); } else Tools::redirect('my-account.php'); ?>
5. Captcha Code (Aunthentication.php)
<?php /* SSL Management */ $useSSL = true; include(dirname(__FILE__).'/config/config.inc.php'); include(dirname(__FILE__).'/init.php'); include(dirname(__FILE__).'/enginerecaptcha/recaptchalib.php'); include(dirname(__FILE__).'/modules/recaptcha/recaptcha.php'); if ($cookie->isLogged()) Tools::redirect('my-account.php'); //CSS ans JS file calls $js_files = array( _THEME_JS_DIR_.'tools/statesManagement.js' ); $errors = array(); //instant recaptcha $recaptcha = new Recaptcha(); $back = Tools::getValue('back'); if (!empty($back)) $smarty->assign('back', Tools::safeOutput($back)); if (Tools::getValue('create_account')) { $create_account = 1; $smarty->assign('email_create', 1); } if (Tools::isSubmit('SubmitCreate')) { if (!Validate::isEmail($email = Tools::getValue('email_create'))) $errors[] = Tools::displayError('invalid e-mail address'); elseif (Customer::customerExists($email)) $errors[] = Tools::displayError('someone has already registered with this e-mail address'); else {
$create_account = 1; $smarty->assign('email_create', Tools::safeOutput($email)); $_POST['email'] = $email; } } if (Tools::isSubmit('submitAccount')) { $create_account = 1; $smarty->assign('email_create', 1); //reCaptcha cek if ($recaptcha->isActive()) if ($_POST["recaptcha_response_field"]) $resp = recaptcha_check_answer ($recaptcha->getPrivateKey(), $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]); if (!Validate::isEmail($email = Tools::getValue('email'))) $errors[] = Tools::displayError('e-mail not valid'); elseif (!Validate::isPasswd(Tools::getValue('passwd'))) $errors[] = Tools::displayError('invalid password'); elseif (Customer::customerExists($email)) $errors[] = Tools::displayError('someone has already registered with this e-mail address'); elseif (!@checkdate(Tools::getValue('months'), Tools::getValue('days'), Tools::getValue('years')) AND !(Tools::getValue('months') == '' AND Tools::getValue('days') == '' AND Tools::getValue('years') == '')) $errors[] = Tools::displayError('invalid birthday'); //cek recaptcha elseif (!isset($resp) and $recaptcha->isActive()) $errors[] = Tools::displayError('Image Verification ERROR, please try again'); elseif (!$resp->is_valid and $recaptcha->isActive()) $errors[] = Tools::displayError('Image Verification ERROR, please try again'); else { $customer = new Customer(); if (Tools::isSubmit('newsletter')) { $customer->ip_registration_newsletter = pSQL($_SERVER['REMOTE_ADDR']); $customer->newsletter_date_add = pSQL(date('Y-m-d H:i:s')); }
$customer->birthday = (empty($_POST['years']) ? '' : intval($_POST['years']).'-'.intval($_POST['months']).'-'.intval($_POST['days'])); /* Customer and address, same fields, caching data */ $addrLastname = isset($_POST['lastname']) ? $_POST['lastname'] : $_POST['customer_lastname']; $addrFirstname = isset( $_POST['firstname']) ? $_POST['firstname'] : $_POST['customer_firstname']; $_POST['lastname'] = $_POST['customer_lastname']; $_POST['firstname'] = $_POST['customer_firstname']; $errors = $customer->validateControler(); $_POST['lastname'] = $addrLastname; $_POST['firstname'] = $addrFirstname; $address = new Address(); $address->id_customer = 1; $errors = array_unique(array_merge($errors, $address->validateControler())); if (!sizeof($errors)) { $customer->active = 2; if (!$customer->add()) $errors[] = Tools::displayError('an error occurred while creating your account'); else { $address->id_customer = intval($customer->id); if (!$address->add()) $errors[] = Tools::displayError('an error occurred while creating your address'); else { $validation_link = 'validator.php?m='.$customer->email.'&k='.sha1('g$p_'.$customer->firstname.$customer->id); if (Mail::Send(intval($cookie->id_lang), 'account', 'Welcome!', array('{firstname}' => $customer->firstname, '{lastname}' => $customer->lastname, '{email}' => $customer->email, '{passwd}' => Tools::getValue('passwd'), '{validation_link}' => $validation_link), $customer->email, $customer->firstname.' '.$customer->lastname)) $smarty->assign('confirmation', 1); Module::hookExec('createAccount', array( '_POST' => $_POST,
'newCustomer' => $customer )); if ($back) Tools::redirect($back); } } } } } if (Tools::isSubmit('SubmitLogin')) { $passwd = trim(Tools::getValue('passwd')); $email = trim(Tools::getValue('email')); if (empty($email)) $errors[] = Tools::displayError('e-mail address is required'); elseif (!Validate::isEmail($email)) $errors[] = Tools::displayError('invalid e-mail address'); elseif (empty($passwd)) $errors[] = Tools::displayError('password is required'); elseif (Tools::strlen($passwd) > 32) $errors[] = Tools::displayError('password is too long'); elseif (!Validate::isPasswd($passwd)) $errors[] = Tools::displayError('invalid password'); else { $customer = new Customer(); $authentication = $customer->getByemail(trim($email), trim($passwd)); /* Handle brute force attacks */ sleep(1); if (!$authentication OR !$customer->id) { $errors[] = Tools::displayError('authentication failed'); $errors[] = Tools::displayError('did you activate your account by clicking the link in the register mail?'); } else { $cookie->id_customer = intval($customer->id); $cookie->customer_lastname = $customer->lastname; $cookie->customer_firstname = $customer->firstname; $cookie->logged = 1; $cookie->passwd = $customer->passwd; $cookie->email = $customer->email;
if (Configuration::get('PS_CART_FOLLOWING') AND (empty($cookie->id_cart) OR Cart::getNbProducts($cookie->id_cart) == 0)) $cookie->id_cart = intval(Cart::lastNoneOrderedCart(intval($customer->id))); Module::hookExec('authentication'); if ($back = Tools::getValue('back')) Tools::redirect($back); Tools::redirect('my-account.php'); } } } if (isset($create_account)) { /* Generate years, months and days */ if (isset($_POST['years']) AND is_numeric($_POST['years'])) $selectedYears = intval($_POST['years']); $years = Tools::dateYears(); if (isset($_POST['months']) AND is_numeric($_POST['months'])) $selectedMonths = intval($_POST['months']); $months = Tools::dateMonths(); if (isset($_POST['days']) AND is_numeric($_POST['days'])) $selectedDays = intval($_POST['days']); $days = Tools::dateDays(); /* Select the most appropriate country */ if (isset($_POST['id_country']) AND is_numeric($_POST['id_country'])) $selectedCountry = intval($_POST['id_country']); elseif (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) { $array = split(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']); if (Validate::isLanguageIsoCode($array[0])) { $selectedCountry = Country::getByIso($array[0]); if (!$selectedCountry) $selectedCountry = intval(Configuration::get('PS_COUNTRY_DEFAULT')); } } if (!isset($selectedCountry)) $selectedCountry = intval(Configuration::get('PS_COUNTRY_DEFAULT')); $countries = Country::getCountries(intval($cookie->id_lang), true); $smarty->assign(array( 'years' => $years, 'sl_year' => (isset($selectedYears) ? $selectedYears : 0),
'months' => $months, 'sl_month' => (isset($selectedMonths) ? $selectedMonths : 0), 'days' => $days, 'sl_day' => (isset($selectedDays) ? $selectedDays : 0), 'countries' => $countries, 'sl_country' => (isset($selectedCountry) ? $selectedCountry : 0) )); /* Call a hook to display more information on form */ $smarty->assign('HOOK_CREATE_ACCOUNT_FORM', Module::hookExec('createAccountForm')); } include(dirname(__FILE__).'/header.php'); $smarty->assign('errors', $errors); //added for recaptcha if ($recaptcha->isActive()) { $smarty->assign('userecaptcha', 1); $smarty->assign('recaptcha', recaptcha_get_html($recaptcha->getPublicKey())); } Tools::safePostVars(); $smarty->display(_PS_THEME_DIR_.'authentication.tpl'); include(dirname(__FILE__).'/footer.php'); ?>
6. Recaptchalib.php
<?php /* * This is a PHP library that handles calling reCAPTCHA. * - Documentation and latest version * http://recaptcha.net/plugins/php/ * - Get a reCAPTCHA API Key * http://recaptcha.net/api/getkey * - Discussion group * http://groups.google.com/group/recaptcha * * Copyright (c) 2007 reCAPTCHA -- http://recaptcha.net * AUTHORS: * Mike Crawford * Ben Maurer * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /** * The reCAPTCHA server URL's */ define("RECAPTCHA_API_SERVER", "http://api.recaptcha.net"); define("RECAPTCHA_API_SECURE_SERVER", "https://api-secure.recaptcha.net"); define("RECAPTCHA_VERIFY_SERVER", "api-verify.recaptcha.net"); /** * Encodes the given data into a query string format * @param $data - array of string elements to be encoded * @return string - encoded request */ function _recaptcha_qsencode ($data) { $req = ""; foreach ( $data as $key => $value ) $req .= $key . '=' . urlencode( stripslashes($value) ) . '&'; // Cut the last '&' $req=substr($req,0,strlen($req)-1); return $req; } /** * Submits an HTTP POST to a reCAPTCHA server * @param string $host * @param string $path
* @param array $data * @param int port * @return array response */ function _recaptcha_http_post($host, $path, $data, $port = 80) { $req = _recaptcha_qsencode ($data); $http_request = "POST $path HTTP/1.0\r\n"; $http_request .= "Host: $host\r\n"; $http_request .= "Content-Type: application/x-www-form-urlencoded;\r\n"; $http_request .= "Content-Length: " . strlen($req) . "\r\n"; $http_request .= "User-Agent: reCAPTCHA/PHP\r\n"; $http_request .= "\r\n"; $http_request .= $req; $response = ''; if( false == ( $fs = @fsockopen($host, $port, $errno, $errstr, 10) ) ) { die ('Could not open socket'); } fwrite($fs, $http_request); while ( !feof($fs) ) $response .= fgets($fs, 1160); // One TCP-IP packet fclose($fs); $response = explode("\r\n\r\n", $response, 2); return $response; } /** * Gets the challenge HTML (javascript and non-javascript version). * This is called from the browser, and the resulting reCAPTCHA HTML widget * is embedded within the HTML form it was called from. * @param string $pubkey A public key for reCAPTCHA * @param string $error The error given by reCAPTCHA (optional, default is null) * @param boolean $use_ssl Should the request be made over ssl? (optional, default is false) * @return string - The HTML to be embedded in the user's form. */ function recaptcha_get_html ($pubkey, $error = null, $use_ssl = false) {
if ($pubkey == null || $pubkey == '') { die ("To use reCAPTCHA you must get an API key from <a href='http://recaptcha.net/api/getkey'>http://recaptcha.net/api/getkey</a>"); } if ($use_ssl) { $server = RECAPTCHA_API_SECURE_SERVER; } else { $server = RECAPTCHA_API_SERVER; } $errorpart = ""; if ($error) { $errorpart = "&error=" . $error; } return '<script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . $errorpart . '"></script> <noscript> <iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/> </noscript>'; } /** * A ReCaptchaResponse is returned from recaptcha_check_answer() */ class ReCaptchaResponse { var $is_valid; var $error; } /** * Calls an HTTP POST function to verify if the user's guess was correct * @param string $privkey * @param string $remoteip * @param string $challenge * @param string $response * @param array $extra_params an array of extra variables to post to the server * @return ReCaptchaResponse */
function recaptcha_check_answer ($privkey, $remoteip, $challenge, $response, $extra_params = array()) { if ($privkey == null || $privkey == '') { die ("To use reCAPTCHA you must get an API key from <a href='http://recaptcha.net/api/getkey'>http://recaptcha.net/api/getkey</a>"); } if ($remoteip == null || $remoteip == '') { die ("For security reasons, you must pass the remote ip to reCAPTCHA"); } //discard spam submissions if ($challenge == null || strlen($challenge) == 0 || $response == null || strlen($response) == 0) { $recaptcha_response = new ReCaptchaResponse(); $recaptcha_response->is_valid = false; $recaptcha_response->error = 'incorrect-captcha-sol'; return $recaptcha_response; } $response = _recaptcha_http_post (RECAPTCHA_VERIFY_SERVER, "/verify", array ( 'privatekey' => $privkey, 'remoteip' => $remoteip, 'challenge' => $challenge, 'response' => $response ) + $extra_params ); $answers = explode ("\n", $response [1]); $recaptcha_response = new ReCaptchaResponse(); if (trim ($answers [0]) == 'true') { $recaptcha_response->is_valid = true; } else { $recaptcha_response->is_valid = false; $recaptcha_response->error = $answers [1]; } return $recaptcha_response; }
/** * gets a URL where the user can sign up for reCAPTCHA. If your application * has a configuration page where you enter a key, you should provide a link * using this function. * @param string $domain The domain where the page is hosted * @param string $appname The name of your application */ function recaptcha_get_signup_url ($domain = null, $appname = null) { return "http://recaptcha.net/api/getkey?" . _recaptcha_qsencode (array ('domain' => $domain, 'app' => $appname)); } function _recaptcha_aes_pad($val) { $block_size = 16; $numpad = $block_size - (strlen ($val) % $block_size); return str_pad($val, strlen ($val) + $numpad, chr($numpad)); } /* Mailhide related code */ function _recaptcha_aes_encrypt($val,$ky) { if (! function_exists ("mcrypt_encrypt")) { die ("To use reCAPTCHA Mailhide, you need to have the mcrypt php module installed."); } $mode=MCRYPT_MODE_CBC; $enc=MCRYPT_RIJNDAEL_128; $val=_recaptcha_aes_pad($val); return mcrypt_encrypt($enc, $ky, $val, $mode, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0"); } function _recaptcha_mailhide_urlbase64 ($x) { return strtr(base64_encode ($x), '+/', '-_'); } /* gets the reCAPTCHA Mailhide url for a given email, public key and private key */ function recaptcha_mailhide_url($pubkey, $privkey, $email) { if ($pubkey == '' || $pubkey == null || $privkey == "" || $privkey == null) { die ("To use reCAPTCHA Mailhide, you have to sign up for a public and private key, " . "you can do so at <a href='http://mailhide.recaptcha.net/apikey'>http://mailhide.recaptcha.net/apikey</a>"); }
$ky = pack('H*', $privkey); $cryptmail = _recaptcha_aes_encrypt ($email, $ky); return "http://mailhide.recaptcha.net/d?k=" . $pubkey . "&c=" . _recaptcha_mailhide_urlbase64 ($cryptmail); } /** * gets the parts of the email to expose to the user. * eg, given johndoe@example,com return ["john", "example.com"]. * the email is then displayed as [email protected] */ function _recaptcha_mailhide_email_parts ($email) { $arr = preg_split("/@/", $email ); if (strlen ($arr[0]) <= 4) { $arr[0] = substr ($arr[0], 0, 1); } else if (strlen ($arr[0]) <= 6) { $arr[0] = substr ($arr[0], 0, 3); } else { $arr[0] = substr ($arr[0], 0, 4); } return $arr; } /** * Gets html to display an email address given a public an private key. * to get a key, go to: * * http://mailhide.recaptcha.net/apikey */ function recaptcha_mailhide_html($pubkey, $privkey, $email) { $emailparts = _recaptcha_mailhide_email_parts ($email); $url = recaptcha_mailhide_url ($pubkey, $privkey, $email); return htmlentities($emailparts[0]) . "<a href='" . htmlentities ($url) . "' onclick=\"window.open('" . htmlentities ($url) . "', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;\" title=\"Reveal this e-mail address\">...</a>@" . htmlentities ($emailparts [1]); } ?>