informatikaunindra.orginformatikaunindra.org/file/e-commerce/diktat/modul... · web viewketikkan di...

35
MODUL PRAKTIKUM E-COMMERCE Penyusun: Puput Irfansyah FAKULTAS TEKNIK, MATEMATIKA, DAN ILMU PENGETAHUAN ALAM UNIVERSITAS INDRAPRASTA PGRI

Upload: vuongdieu

Post on 17-Mar-2019

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

MODUL PRAKTIKUME-COMMERCE

Penyusun:

Puput Irfansyah

FAKULTAS TEKNIK, MATEMATIKA, DAN ILMU

PENGETAHUAN ALAM

UNIVERSITAS INDRAPRASTA PGRI

JAKARTA

2014

Page 2: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Modul Praktikum E-Commerce

Tahapan Installasi Prestashop sebagai platform pilihan ecommerce pada local server (localhost)

1. Install dan Jalankan Aplikasi XAMPP. Klik Start pada button Apache (Web Server) dan MySQL (Database Managemnent).

2. Secara default folder installasi XAMPP tadi akan berada didalam Directory C. Ekstrak atau pindahkan satu buah file Prestashop yang telah di download tadi ke dalam folder htdocs atau C:/xampp/htdocs

Page 3: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

3. Buka browser yang anda gunakan. Ketikkan di address bar alamat http://localhost/phpmyadmin/. Buatlah database baru di dalam Phpmyadmin. Disini saya memberikan nama database tersebut dengan nama prestashop.

4. Jika database sudah dibuat. Sekarang ketikkan kembali di dalam address bar http://localhost/prestashop1/install. Jika sudah terbuka seperti gambar dibawah ini pilihlah bahasa yang akan digunakan unutk proses installasi. Kebetulan saya memilih untuk menggunakan Bahasa Inggris. Klik Next.

Page 4: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

5. Kemudian akan muncul halaman License Agreement. Centang pada tulisan I agree to the above terms and conditions. Klik Next.

Page 5: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

6. Isilah data diri informasi mengenai website jual beli yang nantinya akan rekan buat. Berikut keterangannya:

Shop name : Nama dari Toko online yang rekan buat.Main Activity : Kategori barang atau produk yang rekan jual.Country : Negara tempat kita berada.Shop timezone : Zona waktu.Firstname : Nama depan kitaLastname : Nama belakang kita.E-mail Address : Alamat email kita. (Digunakan untuk login).Password : kata sandi. (Digunakan untuk login).Re-type to confirm : Tulis ulang sandi.Jika sudah selesai Klik Next.

Page 6: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

7. Muncul halaman mengenai System Configuration. Disini sistem intallasi dari Prestashop akan mengkoneksikan dengan database yang kita buat di dalam phpmyadmin tadi dalam langkah 3.  Berikut keterangannya :

Database server address : Nama dari database server kita. Karena bersifat lokal maka database kita bernama localhost.Database name : Nama dari database yang kita buat di langkah 3. Secara default akan bernama prestashop namun bisa diganti menyesuaikan dengan nama dabase yang kita buat.Database login : Secara default root sesuai dengan xampp (database mysql).Database password : Kosongi saja jika database mysql kita tidak menggunakan password.Table prefix : Secara default ps_

Page 7: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

8. Lanjut ke proses installasi. Silahkan tunggu beberapa menit. Hingga muncul tulisan Your Installation is finished.

Page 8: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

9. Proses installasi memang sudah selesai namun sebelum menjalankan software CMS yang satu ini hapus terlebih dahulu folder installasi yang letaknya ada di C:/xampp/htdocs/prestashop.

10. Kemudian kita sudah bisa Login ke Cpanel Admin nya. Ketikkan di dalam addressbar browser http://localhost/prestashop/admin3320. Perhatikan pada bagian url yang saya beri warna merah (admin3320) mungkin bisa berbeda dengan tempat rekan install. Cek di dalam folder pada langkah 9 diatas. Masukkan email dan password yang rekan buat pada langkah 6 diatas. Kemudian klik Login.

Page 9: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Dan akhirnya CMS Prestashop ini sudah selesai kita install. Yang muncul berikut ini ialah tampilan dari back office atau lebih sering kita sebut Cpanel Adminnya.

Page 10: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Dan untuk melihat tampilan user interface atau tampilan dari toko online Prestashop kita ini, bisa dengan klik pada menu My Shop pada pojok kanan atas Cpanel Admin atau dengan mengetikkan http://localhost/prestashop. Dan hasilnya seperti ini :

Page 11: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem
Page 12: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem
Page 13: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Modifikasi administrasi Prestashop

Download Localization Pack

Localization>Localization

Import a Localization pack

Pilih INDONESIA

Content import (centang semua)

Centang Download pack data – Yes

Kemudian klik Import (dalam keadaan telah online)

Page 14: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Setting Localization --> Indonesia

Scroll mouse ke bawah (CONFIGURATION)

Sekarang Default language udah ada pilihan Indonesian

Default language : Indonesian

Default Country : Indonesia

Default Currency : Rupiah

Time zone : Asia/Jakarta

Klik Save

Page 15: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Setting Localization>Countries

Kemudian enabled-kan Indonesia Klik Save

(sekarang countries yang enabled ada 2, yaitu US dan Indonesia)

Kalau ingin jualan di indonesia aja, mendingan di disabled aja United States –nya.

Untuk mengubah ke bahasa Indonesia

Page 16: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Localization>Language> kemudian disabled-kan English

Setting Kurir

Masuk ke Shipping>Kurir

Klik Mengedit>Klik Tab no2 Lokasi dan biaya> centang Asia (karena Indonesia masuk zona Asia)

Kesalahan dalam menseting zona ini akan berakibat fatal saat user checkout maka muncul pesan kesalahan seperti ini :

Tidak ada kurir untuk alamat yang Anda pilih.

Tidak ada kurir untuk alamat : "Alamat Saya".

Page 17: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Contoh kesalahan jika terjadi kesalahan setting Zone

Page 18: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Setting Mata Uang

Klik Lokalisasi>Mata Uang

Disabled Dollar

Klik Mengedit pada Mata Uang Rupiah

Pada pilihan Format Mata Uang pilihlah X00.000,00

Jika ingin pakai desimal pilih ya

Kesalahan setting format mata uang ini akan berakibat terbaliknya penulisan mata uang (contoh

100.000,00 Rp) di front office, sehingga akan membingungkan pembeli

Page 19: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Pada pilihan Format Mata Uang pilihlah X00.000,00

Kesalahan setting format mata uang ini akan berakibat terbaliknya penulisan mata uang

Page 20: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Hasil yang benar

*Catatan:

Tugas kamu adalah menyempurnakan dan menyesuaikannya dengan konsep proyek ecommerce kamu. Kembangkanlah dari sisi:

Produk

Desain

Site Map

Kedinamisan website

Dan lain lain yang akan membuat website dan strategi kamu adalah unique.

Page 21: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Upload Website Ke Hosting Server www.idhostinger.com

Buka page www.idhostinger.com klik menu Buat Akun. Isilah pada form yang telah disediakan.

Setelah registrasi, cek email kamu dan aktifasi lewat email, kemudian login dan akan tampil

halaman berikut:

Klik Order Hosting Baru, akan tampil halaman berikut:

Page 22: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Klik ORDER, Isikan form dibawah ini. Tipe Domain isikan subdomain untuk hosting dan

domain gratis kamu.

Subdomain, adalah nama subdomain website kamu kelak.

Klik LANJUTKAN jika domain tidak tersedia (digunakan orang lain) ganti dengan nama lain.

Page 23: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Jika sukses maka akan tampil halaman informasi seperti dibawah ini:

Klik tanda + (plus) disebelah informasi domain diatas untuk mengelola hosting kamu.

Pilih KELOLA untuk mengelola hosting kamu. Nah disini kita akan mengupload web yang

telah kita buat di local komputer kita. Perhatikan keterangan dibawah ini!

Page 24: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Kali ini kita gunakan salah satu fasilitas Upload web dengan menggunakan “File Manager”

Lihat sebelah kiri kamu, dan Klik menu “FILE”

Page 25: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Klik File Manajer 2 untuk memulai setup file manajernya.

Akan tampil halaman berikut ini:

Untuk mengupload file file web kamu di idhostinger ini, alangkah baiknya file tersebut telah

kamu ZIP

Kemudian klik Upload pada menu sebelah kiri atas:

Page 26: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Choose File ZIP/RAR/TAR kamu, kemudian klik tombol checklist hijau diatas.

Tunggu proses Upload selesai

Jika proses telah selesai, cek file tersebut dengan menekan tombol back

Perhatikan file file website yang sukses diupload ke dalam direktori Public_Html ini:

Page 27: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Langkah selanjutnya adalah mengkoneksikannya dengan DATABASE yang telah ada

sebelumnya di komputer local kita (localhost)

1. Kembali lagi ke halaman FILE MANAJER ketika kamu ingin mengupload file web via

File Manajer 2 yang terdapat pada idhostinger.

2. Klik menu DATABASE :

Page 28: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

3. Klik “Impor Database” 4. Karena belum memiliki database diserver online ini, maka dibuat terlebih dahulu

Databasenya.

“Buat Database” .5. Perhatikan gambar dibawah ini. Dalam contoh berikut, diisikan

Nama Database

Username Database

Password:administrator (contoh)

Ketika berhasil, maka akan tampil informasi seperti gambar berikut:

Selanjutnya klik daftar database dan user database yang telah kamu buat tadi. Klik dua kali

maka akan tampil menu seperti gambar berikut:

Page 29: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Klik menu “PhpMyadmin”

Kemudian klik Tab “Import” Choose File

Pilih Database yg telah kamu export dari database komputer local kamu

kemudian klik Tombol “GO” dibawahnya.tunggu hasilnya, maka akan tampil seperti ini:

Page 30: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Kemudian pada halaman file manajer, klik “File Manajer 1”

Kemudian cari file ”settings.inc.php” ( folder Config settings.inc.php klik kanan “edit file”

Kemudian gantilah Db_name, Db_User, Db_Password yang belum diubah pada saat local

sesuaikan dengan pengubahan yg telah kamu buat pada pembuatan database online sebelumnya.

Seperti contoh berikut, namun disesuaikan dengan akun database yg kamu buat:

Page 31: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Konfigurasi lama (pada localhost)

Page 32: informatikaunindra.orginformatikaunindra.org/file/E-COMMERCE/Diktat/Modul... · Web viewKetikkan di address bar alamat . Buatlah database baru di dalam Phpmyadmin. ... Disini sistem

Konfigurasi yang telah disesuaikan dengan akun database online

Sampai tahapan ini, web prestashop kamu telah berhasil diupload dan bisa diakses melalui media

internet. Sekarang cek website kamu dengan mengetikan URL atau alamat domain yang kamu

buat. Kemudian lihat hasilnya.