Tutorial WP-Ecommerce
description
Transcript of Tutorial WP-Ecommerce
1 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
TUTORIAL
MEMBANGUN TOKO ONLINE MENGGUNAKAN WP ECOMMERCE
1. Profil Aplikasi
a. Alamat Web
Alamat web penyedia WP eCommerce adalah www.wordpress.org
b. Lokasi Download
Apliksi WP eCommerce merupakan plugin dari CMS WordPress sehingga
sebelum menggunakan plugin WP eCommerce kita terlebih dahulu harus menginstall
CMS WordPress di server atau localhost. Untuk CMS WordPress bisa kita dapatkan di
www.wordpress.org dan WP eCommerce dapat diownload di
www.wordpress.org/plugins/wp-e-commerce/
c. Sejarah
Sejarah WordPress dimulai saat Matt Mullenweg yang merupakan pengguna
aktif dari b2 mengetahui bahwa proses pengembangan b2 dihentikan oleh
pemrogramnya (programmer) yang bernama Michel Valdrighi, Matt Mullenweg
merasa sayang dan mulai melanjutkan pengembangan b2.
WordPress muncul pertama kali pada tahun 2003 hasil kerja keras Matt
Mullenweg dengan Mike Little. Yang membuat WordPress makin terkenal, selain
karena banyaknya fitur dan tampilan yang menarik, adalah juga karena dukungan
komunitas terhadap perangkat lunak sumber terbuka untuk blog.
Sejak tahun 2006, WP eCommerce menyadari tujuan pengusaha dalam menjual
secara online. Sejak saat itu WP eCommerce mulai dikembangkan sampai sekarang
untuk mempermudah pengusaha dalam mengembangkan bisnisnya.
2 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
d. Fitur Utama
Karena WP eCommerce merupakan plugin dari WordPress, maka banyak
sekali kelebihan dan fitur fitur yang tersedia seperti di bawah ini :
1. Membuat plugin sendiri dengan CSS dan HTML
2. Mengintegrasikan dengan banyak plugin WordPress populer lainya
3. Dapat menggunakan alat pemasaran built-in untuk mempermudah penjualan
4. Pengiriman dapat dilakukan dengan mudah karena sudah dibangun metode alat
pengiriman dan terintegrasi dengan kurir populer
5. Check-out dapat dilakukan dengan aman karena menggunakan SSL
6. Mengelola pesanan Anda dan katalog dengan alat built-in
7. Dapat terintegrasikan dengan WordPress multisites
2. Cara Instalasi
Pada bab ini saya akan jelaskan cara mengistall WP eCommerce. Sebelum memulai
instalasi WP eCommerce tahap persiapan yang saya lakukan adalah mendownload semua
komponen yang diperlukan untuk mengistall WP eCommerce. Karena WP eCommerce
merupakan salah satu plugin dari CMS WordPress maka kita harus mengistall WordPress
terlebih dahulu. Source CMS WordPress bisa didapatkan di www.wordpress.org di website
tersebut kita dapat mendownload CMS WordPress secara gratis. Kemudian kita dapat
mendownload plugin WP eCommerce di www.wordpress.org/plugins/wp-e-commerce/ secara
gratis. Pada kasus ini saya mengistal WP eCommerce di localhost sehingga dibutuhkan aplikasi
yang dapat berfungsi seperti server dan saya menggunakan XAMPP v3.2.1. Saya asumsikan
untuk pengistalan XAMPP sudah selesai.
Kemudian setelah semua komponen yang diperlukan untuk menginstall WP
eCommerce sudah siap saya memulai mengistall WP eCommerce. Tahap pertama yang saya
lakukan adalah mengekstrak file CMS WordPress yang sudah kita download tadi di dalam
folder htdocs yang terdapat di dalam folder instalasi XAMPP.
3 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Gambar 2.1 folder htdocs terdapat di folder instalasi XAMPP
Gambar 2.2 ekstrak file yang telah download di www.wordpress.org
4 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Gambar 2.3 Silahkan ganti nama folder hasil ekstrakan tadi sesuka hati
Kemudian setelah file CMS WordPress selesai diekstrak di folder htdocs tahap
selanjutnya yaitu mengaktifkan localhost supaya dapat diakases lewat browser. Caranya
dengan membuka kontrol panel dari XAMPP yang sudah diinstall. Dan komponen yang kita
butuhkan adalah module Apache dan modul MySQL.
Gambar 2.4 Aktifkan module Apache dan MySQL
5 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian silahkan buka browser kesayangan anda. Dan untuk memastikan bahwa
XAMPP kita berkerja silahkan ketikan localhost di addressbar dan enter maka jika XAMPP
sudah bekerja akan muncul halaman seperti di bawah ini.
Gambar 2.5 Tanda kalau XAMPP sudah bekerja
Kemudian setelah XAMPP bekerja dengan baik barulah kita membuat database di localhost
dengan menggunakan phpmyadmin dengan mengetikan alamat localhost/phpmyadmin di
addressbar browser kita. Maka akan muncul halaman phpmyadmin yang akan mengolah
database kita seperti di bawah ini.
Gambar 2.6 tampilan home phpmyadmin
6 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Gambar 2.7 Klik tab database yang saya beri tanda persegi panjang
Gambar 2.8 Pembuatan database
Kemudian pada bagian create database silahkan beri nama database yang ingin dibuat
untuk menampung instalasi CMS WordPress. Pada kasus ini saya memberi nama database saya
dengan nama store. Kemudian klik create, maka database akan tercipta.
Kemudian setelah tahap pembuatan database selesai barulah kita dapat mengistall CMS
WordPress caranya dengan menuliskan alamat localhost/namafolder untuk nama folder di sini
7 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
adalah nama folder wordpress yang kita rename tadi. Untuk nama folder saya adalah
candramarket sehingga alamat yang harus kita tuliskan adalah localhost/candramarket.
Kemudian halaman pemilihan bahasa yang muncul ketika installasi adalah seperti di bawah ini
Gambar 2.9 Pemilihan bahasa yang digunakan CMS WordPress
Gambar 2.10 Welcome Page silahkan klik Let’s Go
Kemudian setelah kita klik Let’s Go akan muncul halaman yang akan mensetting
database yang akan kita gunakan untuk installasi WordPress untuk kasus ini saya tadi membuat
database dengan nama store di localhost sehingga untuk database name kita isi dengan store
kemudian user name default database saya adalah root dan password kosong. Untuk table
prefix biarkan default saja. Klik submit.
8 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Gambar 2.11 Setting Database
Gambar 2.12 Halaman konfirmasi klik Run the install
Setelah kita klik Run the install akan muncul halaman pembuatan akun yang akan
diminta memasukan nama website, username yang akan dipakai untuk mengolah website,
password akun kita, dan email. Kemudian klik Install WordPress, maka proses installasi akan
berlangsung.
9 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Gambar 2.13 Halaman pembuatan akun
Setelah installasi selesai maka akan muncul halaman pemberitahuan jika installasi
selesai dan berhasil.
Gambar 2.14 Tanda bahwa installasi berhasil
10 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian setelah installasi selesai silahkan klik Log In (localhost/candramarket/wp-
admin) maka akan muncul halaman login untuk masuk ke dashboard WordPress website yang
sudah kita buat.
Gambar 2.15 Halaman Log In WordPress
Kemudian setelah kita berhasil Log In maka akan muncul halaman dashboard website
kita kita dapat mengolah website yang kita buat di sini mulai dari tema, dan lain lain.
Gambar 2.16 Dashboard WordPress
11 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian setelah installasi wordpress berhasil barulah kita menginstall plugin WP
eCommerce. Tahap pertama yang kita lakukan adalah mengekstrak file yang sudah kita
download di www.wordpress.org/plugins/wp-e-commerce/ tadi di dalam folder plugin di
folder wordpress (pada kasus ini saya beri nama candramarket)
Gambar 2.17 ekstrak file wp-e-commerce di folder plugin
Kemudian setelah diekstrak kita kembali ke dashboard wordpress dan masuk ke menu
plugins maka akan muncul plugin beberapa plugin yang kita punyai termasuk WP eCommerce.
Kemudian aktivkan plugin WP eCommerce dengan mengeklik Activate.
Gambar 2.18 Menu Plugins pada WordPress
12 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Setelah plugin WP eCommerce berhasil diaktifkan makan installasi WP eCommerce
berhasil. Dan akan muncul beberapa menu di dashboard wordpress seperti menu Products dan
sub menu Store pada menu setting.
Gambar 2.19 Pengaktifan Plugin WP eCommerce berhasil
Setelah installasi WP eCommerce berhasil kita perlu mensetting plugin ini supaya
dapat digunakan karena secara default wordpress merupakan CMS pengolahan blog bukan
pengolahan toko online. Caranya dengan masuk ke menu setting pilih sub menu store. Di menu
ini akan ditemukan berbagai settingan yang diperlukan untuk setting toko online kita.
Gambar 2.20 Store Setting
13 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
3. Cara Penggunaan
Pada bab ini saya akan mencoba menambahkan item pada toko online yang sudah saya
buat yaitu candramarket. Untuk menambahkan item kita hanya perlu masuk ke menu Products.
Pada kasus ini saya pertama membuat satu kategori di sub menu Categories dan saya namakan
“Indonesian Chocolate”. Di sub menu categories ini terdapat banyak options yang
berhubungan dengan pengkategorian product.
Gambar 3.1 Tampilan sub menu Categories
Kemudian setelah selesai klik add categories dan kategori baru yang telah kita buat akan
muncul di bagian kanan.
Gambar 3.2 Categories baru berhasil dibuat
14 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian setelah kategori produk berhasil dibuat kita bisa menambahkan item yang akan
dijual di menu products submenu add new.
Gambar 3.3 Menambahkan Item baru
Di submenu add new ini kita dapat menambahkan gambar, review item, harga item dan
masih banyak lagi
Gambar 3.4 Menambahkan gambar item
15 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Setelah semua selesai kita tinggal klik publish. Maka item akan terpost di website yang kita
buat.
Gambar 3.5 Item siap dipublikasikan
Kemudian untuk cara pembelian item sangatlah mudah. Pertama kita harus
mengunjungi website yang sudah dibuat di localhost/candramarket/?page_id=4 maka akan
muncul halaman yang berisi produk list yang sudah kita publish tadi.
Gambar 3.6 Tampilan item yang sudah dipublish
16 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian untuk membeli kita tinggal klik add to cart maka produk yang dibeli akan
masuk ke keranjang pembelian dan siap untuk dikalkulasi di halaman checkout. Dihalaman
checkout pembeli akan disuruh untuk mengisi formulir sebagai data pembelian termasuk
alamat. Karena nanti barang akan dikirimkan ke alamat yang dituliskan. Kemudian setelah
semua data yang dibutuhkan diinputkan oleh pengguna, tahap terakhir yaitu mengkonfirmasi
dengan cara klik purchase di bagian bawah.
Gambar 3.7 Halaman checkout
Gambar 3.8 Untuk mengkonfirmasi klik purchase
17 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Kemudian setelah purchase dilakukan maka akan muncul halaman transaction results
yang merinci seluruh pembelian kita seperti nota.
Gambar 3.9 Transaction Results
Dengan begitu transaksi selesai dan pelanggan tinggal menunggu barang yang dipesan
dikirim ke rumah mereka masing masing.
4. Review
WP eCommerce merupakan plugin eCommerce yang menurut saya sudah powerfull.
Plugin ini memiliki banyak fitur yang berhubungan dengan toko online. Seperti pengantaran
barang, pengkonversi mata uang, pengkalkulasian jumlah pembelian seperti di kasir. Selain itu
WP eCommerce juga sangat support untuk dicustomize sehingga tampilan bisa diubah ubah
sesuka hati. Dan untuk penginstalanya pun juga mudah dan cepat jika sudah mengetahui
WordPress
Kemudian WP eCommerce ini juga memiliki kelemahan. Yaitu untuk pemula seperti
saya sangat membingungkan karena tidak disupport tema bawaan sehingga komponen
komponen yang dibutuhkan seperti yang sudah saya sebutkan diatas perlu ditambahkan manual
dengan memodifikasi thema bawaan wordpress. Hal ini karena pada dasarnya CMS WordPress
merupakan platform bloging. Selain itu di WP eCommerce ini juga tidak ada grafik statistik
penjualan seperti aplikasi lain. Sehingga untuk mereview barang barang yang sudah dijual
kurang memuaskan dan tidak efektif. Selain itu jika dioprek lebih lanjut, banyak fitur WP
eCommerce yang tidak bisa digunakan dan jika ingin menggunakan fitur tersebut harus
membayar seperti fitur tampilan produk list view atau grid view dan beberapa fitur penting
lainya.
18 [Candra Tri Cahyo Adi] [M3114041] [TI A 2014]
Dari review di atas dapat disimpulkan bahwa WP eCommerce sangat powerfull jika
digunakan oleh orang yang sudah berkutat lama di WordPress ataupun orang yang sudah
profesional dalam pengembangan web. Namun akan sangat merepotkan jika digunakan oleh
orang yang masih awam dengan pemrograman web atau WordPress.