Membangun Toko Online dengan Joomla! dan VirtueMart

Presentasi berjudul: "Membangun Toko Online dengan Joomla! dan VirtueMart"— Transcript presentasi:

1 Membangun Toko Online dengan Joomla! dan VirtueMart
Oleh : Muhammad Yusuf Laboratorium Sistem Informasi Universitas Trunojoyo /FB :

2 Joomla ! Joomla! adalah Sistem manajemen konten (SMK atau CMS) yang bebas dan terbuka (free opensource) ditulis menggunakan PHP dan basisdata MySQL untuk keperluan di internet maupun intranet. Joomla pertamakali dirilis dengan versi Fitur-fitur Joomla! diantaranya adalah sistem caching untuk peningkatan performansi, RSS, blogs, poling, dll. Joomla! menggunakan lisensi GPL. Asal kata Joomla sendiri berasal dari kata Swahili yang mengandung arti "kebersamaan".

3 VirtueMart adalah modul tambahan dari Joomla yang ditujukan buat jualan online. VirtueMart melengkapi Joomla sebagai salah satu sistem CMS (Content Management System) yang populer di negeri ini dengan modul eCommerce. Joomla telah dipakai banyak organisasi untuk berbagai keperluan, termasuk menjalankan situs perusahaan, instansi, ataupun perorangan. VirtueMart memenuhi kebutuhan perusahaan, instansi, maupun perorangan yang ingin menambah fitur situs Joomla-nya buat berjualan online.

4 Menginstal Toko Online dengan Joomla! 1.0.15
Sebelumnya harus menginstal dulu XAMPP Setelah menginstal dan menjalankan service Apache dan MySQL, maka selanjutnya menginstal Paket Joomla yang didalamnya sudah terdapat Komponen dan Modul VirtueMart. Berikut ini adalah langkah-langkahnya :

5 Buat Folder di C:\XAMPP\htdocs. Misalnya Tokosaya
Lokasi instalasi toko online dengan Joomla Klik New Folder dan beri nama Tokosaya

6 Klik Kanan File Joomla_1. 15_ eCommerce_Edition_VM_1. 15
Klik Kanan File Joomla_1.0.15_ eCommerce_Edition_VM_ tar lalu pilih Extract Files

7 Pilih Folder C:\XAMPP\htdocs\tokosaya, lalu klik OK :
Pilih Folder Tokosaya

8 Tunggu Proses Extract sampai selesai
Buka Browser Internet, lalu ketik

9 Klik NEXT

10 Isikan berikut ini : Host Name : Localhost (bisa juga diisi IP Address bila diinstal di jaringan) User Name : root Password : (kosongkan) Database Name : Tokoyusuf (terserah anda) Nama Database boleh berbeda

11 Klik OK Ketik nama toko, misal : TOKO BUKU. Lalu, klik NEXT

12 Isi Parameter berikut :
Your isi dengan anda (misal: Admin Password : Ubah password supaya mudah diingat Jika sudah, klik NEXT

13 Instalasi selesai. Selanjutnya Hapus folder installation yang ada di dalam folder tokosaya
Jika folder installation belum dihapus (atau bisa juga di rename), akan muncul tampilan seperti ini jika di klik View Site

14 Buka lagi folder C:\XAMPP\htdocs\tokosaya, lalu hapus atau rename folder installation

15 Setelah dihapus, kembali lagi ke browser internet, tekan F5 (refresh) di keyboard anda. Tampilan toko online anda menjadi seperti ini:

16 Login ke halaman Administrator
Untuk bisa mengatur isi toko, harus login dahulu ke halaman administrator. Caranya adalah : Buka browser, ketikkan pada address bar, lalu tekan ENTER

17 2. Masukkan Username dan Password lalu tekan ENTER atau klik Login 3
2. Masukkan Username dan Password lalu tekan ENTER atau klik Login 3. Lalu masuk ke halaman Administrator

18 4. Untuk mengatur toko, klik
Components>VirtueMart

19 5. Halaman VirtueMart akan muncul seperti
ini :

20 Mengganti dan memodifikasi Template
1. Klik Installer>Template-Site

21 2. Klik Browse/Telusuri

22 3.Pilih Template yang dimiliki lalu klik Open

23 4. Klik Upload files & install

24 5. Klik Site>Template Manager>Site Templates

25 6. Pilih template yang tadi diinstal lalu klik Default

26 Klik Preview yang terletak di kanan atas halaman administrator atau refresh (Tekan F5) pada browser.

27 Mengubah identitas toko dan Pemilik Toko
1. Masuklah ke pengaturan VirtueMart, klik Components>VirtueMart. Setelah itu, klik Store>Edit Store

28 2. Ubahlah informasi toko seperti dibawah ini
3. Ubahlah informasi pemilik toko seperti dibawah ini

29 4. Ubah mata uang default. 5. Ubah simbol mata uang

30 6. Hapus deskripsi toko atau isi sesuai keinginan anda.

31 7. Klik SAVE

32 8. Jika sukses, identitas toko akan berubah

33 Mengatur Metode Pembayaran
1. Klik Store>List Payment Methods

34 2. Pada kolom actions, tanda centang menandakan metode pembayaran yang digunakan. Atur dengn meng-klik tanda silang atau centang sesuai kondisi toko anda Klik tanda centang jika tidak dibutuhkan

35 Memasukkan metode Pembayaran
Jika ingin memasukkan metode pembayaran dg cara transfer ke rekening bank yg kita miliki. Caranya adalah : 1. Klik Store>Add Payment Method

36 2. Isi data sebagai berikut, Lalu Klik SAVE :
Pilih Addres Only/Cash on Deivery Masukkan alamat transfer berupa no rekening, nama dan cabang bank

37 MENGELOLA BARANG 1. Klik ikon Product List Menghapus Barang
Default data sample dari Joomla! dapat dihapus dengan cara berikut : 1. Klik ikon Product List

38 2. Beri tanda centang Product Name. Semua produk akan terpilih semua

39 3. Klik ikon REMOVE 4. Jika anda yakin untuk menghapusnya, klik OK

40 Menghapus Kategori Barang
Setelah menghapus barang, kita akan hapus juga kategori barang default dari Joomla!. Caranya adalah : 1. Klik ikon Category Tree pada halaman VirtueMart

41 2. Beri tanda centang Category Name yang akan dihapus
2. Beri tanda centang Category Name yang akan dihapus. Jika kategori tersebut punya anak kategori, maka anda menghapus anak kategorinya terlebih dahulu. Kategori dan anak ditandai dengan angka 1 dan angka 2. Jadi no 2 dihapus dulu. Dicentang lalu klik remove.

42 3. Kemudian dicentang yang no 1. lalu diklik
remove

43 Membuat Kategori baru 1. Klik New pada halaman kategori

44 2. Ketik nama kategori pada Category Name lalu klik Save

45 3. Untuk membuat sub-kategori, lakukan langkah 1 sampai 2
3. Untuk membuat sub-kategori, lakukan langkah 1 sampai 2. Lalu pilih Parent yang sesuai.

46 Hasilnya seperti dibawah ini:

47 Memasukkan Barang 1. Klik kanan di folder C:\XAMPP\htdocs\tokosaya\images lalu pilih New Folder dan beri nama, misal : barang

48 2. Copy gambar yang akan dipindahkan ke dalam folder barang

49 3. Setelah memindahkan gambar, Klik Product>Add Product untuk memasukkan barang ke toko.

50 4. Isi informasi Produk Isikan harga Isi SKU (kode barang),
Misal : bk01 Isi Nama barang Ketik deskripsi produk Pilih Kategori

51 5. Masukkan gambar, klik tab Product Images

52 6. Klik Telusuri

53 7. Pilih gambar produk lalu klik Open

54 8. Klik Save

55 9. Klik Product List untuk melihat hasilnya

56 Daftar produk/barang yang telah kita masukkan seperti gambar dibawah ini :

57 Setelah memasukkan semua barang maka bisa dilihat tampilan toko online dengan meng-klik Preview. Tampilan menjadi seperti ini :

58 Mengatur Pajak 1. Untuk mengatur pajak, caranya adalah :

59 2. Isi form yang disediakan lalu klik Save

60 Mengatur Metode Pengiriman
Untuk menambahkan daftar jasa pengirim Barang, caranya : Klik Shipping>Create Shipper

61 2. Isi form yang disediakan lalu klik Save

62 Mentatur Vendor Klik Vendor>Add Vendor

63 2. Isi Store, Store Information dan contact information

64 Komunitas Joomla Indonesia