e-Commerce (Handbook penggunaan Opencart Tailor Brils Sejahtera Shop)

Hand Book (Buku Panduan)
Membuat Toko Online (e-Commerce )
PT Tailor Brils Sejahtera

Disusun Oleh :

       Lilis Setiani       7201170106
        Ines Amalia       7201170108
        Bagas Rizky P    7201170100
        Riko Prasetyo    7201170120


Universitas Bung Karno
Tahun Ajaran 2020
Jl. Kimia No. 20. Menteng, Jakarta Pusat 10320 , Indonesia
Phone : (021) 31922441

-----------------------------------------------------------------------------------------------------

DAFTAR ISI

PANDUAN PEMAKAIAN
APLIKASI OPENCHART TOKO ONLINE ‘BALIKONES’
PT Tailor Brils Sejahtera (Shop)


Halaman Judul Buku Panduan  (1)
Daftar Isi Panduan Pemakaian Aplikasi (2)
Cara Instal Opencart (4)
 a.   Mengaktifkan XAMPP (4)
 b.   Download Opencart (4)
 c.   Membuat Database untuk Opencart (6)
 d.  Tampilan Themes Openchart (11)
 e.  Tampilan Dashboard Opencart (12)
Merubah Mata Uang Opencart Menjadi Rupiah (13)
Merubah Opencart Menjadi Nama Toko (14)
 a.  Merubah Tulisan Opencart (themes) menjadi Tilor Brils
      Sejahtera Shop + logo (15)
 b.  Merubah Profil di halaman admin Opencart (John Doe) menjadi
     Tailor Brils Sejahtera Shop + log (18)
Merubah Bahasa English ke Bahasa Indonesi (20)
Cara Merubah  &  Menambahkan BANNERS
(Home Page Slideshow User Interface) (22)
Mengatur Categories (13)
Membuat Sub Kategori untuk Kaos, Kemeja, Jaket, Topi dan Tas (25)
Mengatur Kategori agar Tampil dilayar Themes (28)
Mengatur Produk Sesuai Kategori (29)
Mengatur Kategori Agar Tampil di Layar Themes (31)
Mengatur Information dihalaman Themes Bagian Bawah (32)
Menggunakan Aplikasi Untuk Transaksi (34)
Melihat Status Pesanan dan Cetak Invoice Pesanan (40)

---------------------------------------------------------------------------------------------------------------------------
INSTAL OPENCART
Version 3.0.3.2

PT Tailor Brils Sejahtera membuat terobosan baru dengan menggunakan media internet untuk mengiklankan barang-barang yang mereka produksi berupa “Toko Online”. Untuk mengelola data internal, PT ini menggunakan database yang diberi nama “balikones”. Kenapa harus “opencart”?
Karena, Opencart merupakan salah satu aplikasi web yang berbasis Content Management System (CMS) yang diperuntukan untuk web toko online.Opencart bersifat open source dan gratis.
Berikut langkah awal meng-instal Opencart version 3.0.3.2 di Localhost menggunakan XAMPP Server:

Aktifkan Xampp Server

a.    Buka Xampp Control Panel kemudian aktifkan Apache dan MySQL Server.

(Note : Jika belum memiliki Xampp server silahkan install Xampp terlebih dahulu).

Download Opencart 

b.    Download opencart (bisa cari di internet)
c.    Apabila proses download Opencart selesai, selanjutnya extract file Source Opencart karena file     tersebut berbentuk zip.
d.    Pada folder source Opencart yang sudah di extract, cari folder upload.

 e.    Kemudian copy folder upload tersebut dan paste di C:\xampp\htdocs

f.    Kemudian rubah nama folder upload menjadi nama baru. Contoh kali ini menggunakan nama ‘balikones’.

g.    Pada folder balikones ganti nama file config-dist.php menjadi config.php

h.    Pada folder latihanopencart/admin ganti nama file config-dist.php menjadi config.php
 

Membuat Database

i.  Langkah selanjutnya yaitu membuat database di PhpMyAdmin. Di browser ketikan http://localhost/phpmyadmin/, selanjutnya akan tampil halaman PhpMyAdmin seperti gambar dibawah.

j.    Kemudian klik menu “Database”.

k.    Akan tampil seperti gambar di bawah. Selanjutnya pada menu “Create Database” bagian “Database Name” isi dengan nama database yang diinginkan, lalu klik “Create”. (balikones)

Instalasi  Opencart

l.    Selanjutnya masuk ke halaman Opencart, caranya di browser ketikan alamat http://localhost/latihanopencart. Akan tampil halaman STEP 1 – LICENSE seperti gambar di bawah. Kemudian klik “Continue”. 

m.    Akan tampil halaman STEP 2 – PRE INSTALATION. Selanjutnya pastikan semua status benar (status terlihat berwarna hijau) seperti gambar di bawah. Kemudian klik “Continue”.


n.    Selanjutnya akan tampil halaman STEP 3 – CONFIGURATION, isi data-datanya



Pada bagian “Please enter your database connection details”
Hostname    : Isi dengan Localhost
Username    : Isi dengan root
Password     : Di kosongkan
Database      : Masukan nama database yang telah di buat, pada langkah membuat database. (balikones)
Port             : Isi dengan 3306
Prefix          : Isi dengan oc_
Pada bagian “Please enter a username and password for the administration”
Username    : Isi username sesuai keinginan (admin)
Password     : Isi Password sesuai keinginan (admin)
E-mail         : Isi dengan email aktif

o.    Setelah selesai diisi kemudian klik “Continue”.

p.    Akan tampil halaman – Installation complete seperti gambar di bawah, proses instalasi sudah    selesai.

 

q.     Selanjutnya hapus folder “Install” yang berada di c:/xampp/htdocs/latihanopencart

r.     Untuk melihat website opencart, di browser ketikan alamat localhost/latihanopencart (TAMPILAN THEMES OPENCART DEFAULT)

s.    Untuk masuk ke halaman admin, di browser ketikan alamat localhost/latihanopencart/admin, isikan username & password dengan ‘admin’

t.     Tampilan dashboard opencart

---------------------------------------------------------------------------------------------------------------------------

MERUBAH MATA UANG DI OPENCART MENJADI RUPIAH

Mata uang ini sangat berpengaruh untuk sistem pembayaran toko online yang kita miliki. Apalagi jika kita menggunakan Opencart mata uang default nya adalah dollar. Berikut cara merubah mata uang default opencart menjadi rupiah.
•    Klik System » Localisation » Currencies
•    Lalu Add New
•    Masukkan field dibawah ini
Currency Title : Rupiah
Code                : IDR
Symbol Left    : Rp
Symbol Right  : (tidak perlu di isi)
Decimal Place : (tidak perlu di isi)
Value               : 13500 (Set ke 1.00000 jika ini adalah mata uang default kamu)
value ini bisa kamu isi sesuai dengan rate usd hari ini.
Status              : Enabled

•    Klik Save
Sampai disini setting mata uang pada opencart sudah dilakukan. Selanjutnya kita harus merubah mata uang default dollar menjadi rupiah.
•    Buka Menu System » Settings » Edit
•    Klik Tab Menu Local » Currency » Rupiah
•    Checklist Auto Update Currency untuk membuat otomatisasi mata uang
•    Klik Save

•    Klik localhost/balikos, dan hasilnya mata uang berubah menjadi rupiah

--------------------------------------------------------------------------------------------------------------------------

MERUBAH OPENCART MENJADI NAMA TOKO
Tailor Brils Sejahtera Shop + Logo (di halaman themes)

a.   Merubah Tulisan Opencart (themes) menjadi
      Tailor Brils Sejahtera Shop + logo
•    Setelah setting mata uang menjadi Rupiah, sekarang kita setting nama toko online menjadi        Tailor Brils Sejahtera Shop
•    Ketikan http://localhost/balikones/admin/ (isikan username & password dengan ‘admin’).
•    Kemudian System >> Setting >>> edit

•    Pada bagian General, ganti Meta Title dengan PT Tailor Brils Sejahtera

•    Pada bagian Store, isikan :
     Store Name     : Tailor Brils Sejahtera Shop
     Store Owner   :  Bapak Sugino
    Address           : Jl. Sunter Jaya 1, Blok I No.14, Rt.015/003
    Kompleks DKI - Jakarta Utara
    E-mail            : E-mail perusahaan
   Telephone        : +021 (638725448)

•    Pada bagian Local, isikan :
     Country              : Indonesia
     Region / State     : Jakarta

•    Pada bagian Image & Icon, ubah Store Logo dengan logo yang kita inginkan .

 Jadilah Seperti ini :

 

•    Sehingga tampilan untuk themes  Opencart (Userface untuk customer) localhost/balikoes sebagai berikut :

b.    Merubah Profil di halaman admin Opencart (John Doe) menjadi Tailor Brils Sejahtera Shop + Logo

•    Masuk ke dashboard admin, lalu arahkan ke  Profil John Doe, kemudian Klik Your Profile. Maka akan tampil halaman seperti berikut :

•    Kemudian isikan :

Username      : admin (atau bisa lainnya)
First Name    : PT Tailor (atau bisa lainnya, missal : Lilis/Ines)
Last Name    : Sejahtera (atau bisa lainnya, missal : Riko/Bagas)
E-mail           : Nama e-mail perusahaan
Image           : logo dari PT Tailor Brils Sejahtera (bisa foto admin pengelola)

•    Lalu, Save. Hasil akhirnya dapat dilihat seperti ini :
   

------------------------------------------------------------------------------------------------------------------------
MERUBAH SETELAN BAHASA ENGLISH KE INDONESIA
Untuk penggunaan bahasa, admin akan tetap menggunakan bahasa inggris untuk default-nya. Tetapi, sebagai tambahan informasi, berikut langkah untuk merubah bahasa di opencart dari bahasa Inggris ke Indonesia :
1.    Download file bahasa Indonesia (melalui internet atau di link berikut : https://www.dropbox.com /s/qb5y1g3v73kuv5j/Bahasa%20Indonesia%201.5.1.3.rar?file_subpath=%2FBahasa+Indonesia+1.5.1.3
2.    Extract file yang sudah di download tadi (Bahasa Indonesia 1.5.1.3.rar)

3.    Upload file yg terdapat dalam folder Bahasa Indonesia 1.5.1.3.rar yang berisi (admin & catalog)   dengan cara :
    o    Copy folder indonesia yang ada dalam folder admin kemudian paste kedalam xampp - htdocs - nama foder cms - admin - language (paste kedalam folder ini)
   o    Copy foleder indonesia yang ada dalam folder catalog kemudian paste kedalam xampp - htdocs - nama foder cms - catalog - language (paste kedalam folder ini)
4.    Login ke Admin Opencart, klik System - Localisation - Language lalu Klik Insert untuk membuat entry baru " bahasa Indonesia ". isikan parameter berikut :
* Language Name : indonesia
* Code : id
* Locale : id_ID.UTF-8,id_ID,id-id,indonesia
* Image : id.png
* Directory : indonesia
* Filename : indonesia
* Status : Enable
* Sort Order : 2, lalu Save 
5.    Setelah kita Save kemudian klik System - Setting - Edit – Local

6.    Maka akan tampil halaman seperti ini

7.    Terakhir, ubah Language dan Administration Language menjadi Indonesia lalu
" S a v e "
8.    Selesai, CMS Opencart kita sekarang menggunakan Bahasa Indonesia.



--------------------------------------------------------------------------------------------------------------------------

CARA MERUBAH DAN MENAMBAHKAN
BANNERS (Home Page Slideshow User Interface)

Tampilan yang responsive dalam pembuatan toko online, akan menjadi daya tarik bagi para customer. Untuk itu, perlu ditambahkan icon-icon yang pas dan tentunya bisa memberikan informasi yang akurat tentang toko tersebut.
Berikut langkah-langkah untuk merubahn Banners Toko Online PT Tailor Brils Sejahtera :
•    Buka tampilan dashboard atau halaman admin di localhost/balikones/admin
•    Klik Design > Banners >> Home Pageshow >>> Edit

•    Uppload Kemudian upload gambar yang akan ditampilkan
Isikan Title dengan nama produknya    : Jaket, Kaos, Topi, Kemeja, Tas
dan upload gambar yang terpilih sesuai Title tadi.

•    (Untuk memudahkan menguppload gambar, sebaiknya buat folder khusus untuk Banners).

•    Bila mau menambahkan isi folder Banners, bisa mengambil gambar melalui Uppload dan pilih lokasi gambar yang dimaksud.

   

•    Jika semua sudah di upload, lalu klik “save”.

•    Berikut untuk tampilan user interface/UI untuk Toko Tailor Brils Sejahtera Shop

--------------------------------------------------------------------------------------------------------------------------

MENGATUR ‘CATEGORIES’

Untuk mengatur Categories ini, kita memerluka pengelompokan khusus tentang apa saja produk utama yang di jual di toko online ini. Pada PT Tailor Brils Sejahtera, barang yang di produksi di kantor pusat yaitu :
1.    Kaos
Sub kategori :
-    Cotton Combed,
-    Hyget
-    Polo
-    Polyester
-    Raglan
-    Spandex
2.    Kemeja
Sub kategori :
-    Almamater
-    Dinas
-    Kerja
3.    Jaket
Sub kategori :
-    Boomber
-    Hoodie
-    Parka
4.    Topi
Sub kategori :
-    Bucket
-    Kupluk
-    Paul
-    Snapback
5.    Tas
Sub Kategori :
-    Backet
-    Ransel (Backpack)
-    Tote Bag
-    Waist Bag

Berikut adalah langkah-langkah untuk mengelompokan kategori utama produk :
•    Buka tampilan dashboard atau halaman admin di localhost/balikones/admin
•    Klik Catalog >> Categories >>> Add New

•    Pada Add Category -> General, isikan :
Category Name    : Kaos/Kemeja/Jaket/Topi/Tas
Meta Tag Title    : Isikan sama seperti Category Name (diatas)

•    Pada Add Category -> Data, upload gambar yang mewakili category tersebut.
  

•    Lalu ‘SAVE’

---------------------------------------------------------------------------------------------------------------------------


MEMBUAT SUB KATEGORI UNTUK KAOS, KEMEJA, JAKET , TOPI & TAS
Untuk membuat Sub Category, langkah awal sama dengan membuat Category, namun ada sedikit tambahan input sebagai berikut :

•    Klik Catalog >> Categories >>> Add New
•    Pada Add Category -> General, isikan :
Category Name    : Cotton Combed (sub category : Cotton Combed/…/…./)
Meta Tag Title    : Isikan sama seperti Category Name (diatas)
•    Pada Add Category -> Data,
-    Isikan Parent dengan category utama, yaitu kaos
-    upload gambar yang mewakili sub category tersebut.

 •    Tampilan Categories yang sudah di setting

---------------------------------------------------------------------------------------------------------------------------

MENGATUR PRODUK SESUAI KATEGORI

Pada bagian ini, produk apa saja yang akan dijual di toko online, harus di perhatikan dengan baik. Mulai dari bahan, jumlah barang, ukuran, dan lainnya yang akan menentukan describe dari produk yang di jual di PT Tailor Brils Sejahtera. Berikut cara untuk mengatur per produk pada Opencart :

Pada aplikasi Opencart, di Produkcts ini terdapat beberapa judul baris diantaranya :
•    Image        : Gambar produk yang akan dijual di toko online (missal :Jaker bomber, Tote Bag, dll).
•    Product Name    : Nama produk berdasarkan image (Kaos Cotton Combed/Jaker Parka, dll).
•    Model            : Khusus untuk urutan pemodelan produk.
•    Price            : Harga dari produk yang dijual.
•    Quantity        : Jumlah (banyaknya) stock barang yang dijual.
•    Status            : Tersedia/tidaknya barang di status toko (enable/disable)
•    Action            : Lokasi pengeditan produk (describe).
------------------------------------------------------------------------------------------------------------
1.    Buka tampilan dashboard atau halaman admin di localhost/balikones/admin
2.    Klik Catalog >> Products Muncul Product List, keterangan fungsi masing-masing judul baris ada diatas.
3.    Edit di bagian General dengan mengisi :
-    Product Name    : Nama produk tersebut (missal : Kaos Cotton Combed 30S         Atasan T-Shirt Pria Kaos Distro
-    Description    :   Mendeskripsikan produk secara rinci
-    Meta Tag Title    :   Masuk ke Sub Category

4.    Edit di bagian Data dengan mengisi :
-    Model            : Urutan produk jual (product1, product2)
-    SKU, UPC, EAN, JAN, ISBN, MPN (kosongkan)
-    Location        : Alamat produk ini berada (Jakarta Utara)
-    Price              : Harga dari produk yang dijual
-    Tax Class       : Taxable Goods
-    Quantity        : Isi kuantiti barang/produk yang dijual
-    Minimum Quantity    : Jumlah paling kecil yang dipesan customer

5.    Edit di bagian Link dengan mengisi :
-    Manufacturer    : Brand dari produk (kita isi dengan None saja)
-    Categories    : Arahkan ke Sub Category (missal : Kaos > Cotton Combed)
6.    Edit di bagian Image dengan menambahkan gambar produk.
7.    Lalu ,save



--------------------------------------------------------------------------------------------------------------------------

MENGATUR KATEGORI AGAR TAMPIL DI LAYAR THEMES

Tampilan default pada themes opencart, ketika sudah di setting baik kataegori, maupun sub kategori :

Kemudian, bagaimana cara agar kategori yang sudah kita buat di halaman admin, bisa muncul di layar themes toko online ?
Berikut langkah-langkahnya :
•    Masuk ke halaman admin > Catalog >> Categories
•    Pada kategori yang sudah kita buat dan kita setting, dibagian Data ada Kolom kecil bernama Top. Untuk memunculkan kategori di halaman themes, cukup centang pada kolom kecil Top ini.

---------------------------------------------------------------------------------------------------------------------------

MENGATUR INFORMATION
DI HALAMAN THEMES BAGIAN BAWAH

•    Buka Dashboard admin > Catalog >> Information
•    Maka akan muncul Information List

•    Edit About Us, dengan data-data perusahaan seperti alamat,nomor tlp, owner dll. > Save

•    Tampilan About Us

------------------------------------------------------------------------------------------------------------------------

MENGGUNAKAN APLIKASI UNTUK TRANSAKSI

Setelah kita berhasil mengatur opencart dan mengisi kategori maupun produk-produk yang akan di pasarakan melalui toko online, maka langkah terakhir sebagai maintenance adalah menguji kevalidan aplikasi. Apakah ketika ada customer yang memberi 5 item di kategori kemeja, stock di admin akan berkurang sesuai dengan item yang dibeli customer ?
Berikut contoh penggunaan aplikasi dan simulasi kasus :
•    Si Riko membuka aplikasi toko online, dan menemukan toko bernama “Tailor Brils Sejahtera Shop”. Kemudian melihat slideshow di halaman themes sangat  bagus dan menarik, maka Riko memutuskan untuk membeli salah satu item. Dalam hal ini, Riko memutuskan untuk membeli 10 item Jaket Bomber.
•    Kita lihat, untuk kategori Jaket Bomber (Jaket Bomber Brown Pria) di stock admin ada
 60 items.

•    Tampilan Model Jaket yang dibeli seperti pada gambar dibawah ini (posisi tengah) :

•    Kemudian Riko memesan dengan memilih ADD TO CHART, lalu pada keranjang di sudut kanan atas akan tertera items dan total harga, kemudian Riko mengklik keranjang tersebut.

•    Sebelum melakukan pembayaran, Riko harus mengeck dulu data keranjangnya. Maka muncul keterangan gambar produk + nama produk + Model + Quantity + Unit Price +  Total

•    Karena, Riko mau membeli jaket model army (bomber) ini sejumlah 10 items. Maka pada kolom Quantity, harus di isi 10 (lalu update), sehingga untuk Total akan mengalami perubahan sejumlah harga per item di kali pesanan (Rp 398.000 x  10 = Rp 3.980.000). Berikut tampilannya :

•    Setelah memastikan semua data dan harga benar, maka selanjutnya Riko meng-klik tombol Checkout.
•    Maka akan muncul jendela Checkout. Pada jendela ini data customer wajib diisi, untuk tujuan pengiriman barang nantinya.
Step 1: Checkout Options
-    Pilih Register Account > Continue
Step 2: Account & Billing Details
-    Isikan Your Personal Data & Centang have read and agree to the Privacy Policy   
    Clik Continue

Step 3: Delivery Details

Step 4: Delivery Method
Meninggalkan pesan pada orderan “Orderan Pertama, semoga pelayanannya terbaik biar bisa order lagi di toko ini. Sukses !!!” > Continue

Step 5: Payment Method
Untuk toko Tailor Brils Sejahtera ini masih menggunakan metode pembayaran berupa satu sitem yaitu COD (Cash On Delivery).
-    Kemudian centang pernyataan I have read and agree to the Terms & Conditions 
-    Lalu > Continue,  dan Langkah terakhir adalah Confirm Order

-    Pada bagian Flat Shipping Rate ini kita kenakan berapa biaya kirim yang ingin di tetapkan untuk toko Anda dalam hal ini, kita ingin mengenakan ongkir Rp5 rupiah (misalnya).
-    Pesanan Riko segera di proses dan dikirimkan ke alamat yang sudah di input.
 Latest Orders
-   

-    Sekarang lihat stock jaket Bomber model Army, apakah sudah berkurang dari total 60 (dikurangi 10) menjadi 50 items. Dan berikut tampilannya :

---------------------------------------------------------------------------------------------------------------------------


MELIHAT STATUS PESANAN DAN CETAK INVOICE PESANAN

•    Masuk ke Dahsboard Admin > Scroll ke bawah sampai menemukan
Lates Orders lalu klik Action

•    Muncul orderan Riko

•    Kemudian ada 4 menu di pojok kanan atas yaitu, Print Invoice, Print Shipping List, Edit dan Cancel.

- Print Invoice

-    Print Shipping List

-    Edit  Untuk mengedit data customer

-    Cancel untuk membatalkan orderan yang masuk.




------------------ 5SIM1-UBK-2020 -------------------

Jakarta, 9 Februari 2020
21:27 WIB


Lilis Setiani 



Perkuliahan yang semakin hari semakin bertambah bobotnya, perlu dan wajib banget di buat filing-nya. Dari semester awal sampai semester akhir akan jadi Reminder untuk tuga-tugas yang begitu menumpuk namun selalu menyenangkan untuk diselsaikan. Berikut "MATERI KULIAH" yang terekam secara  runtut :



SEMESTER V:
 A. e-Commerce
      Program Aplikasi Opencart (e-commerce Tailor Brils Sejahtera - Handbook)

B. Pemrograman Mobile
    Aplikasi Andorid Rental Mobil dengan PHP

C. Jaringan Komputer
    Jaringan Komputer - Kisi-kisi Subnetting, Pengalamatan IP Address (IPv4), pemilihan
    jalur terbaik (shortest path) menggunakan algoritma Dijktra.