Tutorial WP-Ecommerce

18
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.

description

Pembahasan dan tutorial WP-Ecommerce

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.