TUTORIAL Membuat Situs Katalog Produk untuk Toko Online 2013-01-17 17:59

Bagian satu file cara buat katalog jualan online

Tutorial ini step by step membuat katalog produk toko online. Tutorial telah diusahakan agar bisa diikuti oleh nubie sekalipun. Dilengkapi dengan gambar. Yang agan perlukan (khusus nubie) adalah kesabaran. Tidak perlu terburu-buru untuk menyelesaikan tutorial. Baca kembali pelan-pelan bila ada yang dirasa kurang jelas. Untuk melihat tampilan besar gambar (100%), klik kanan gambar dan pilih view image.

Ada banyak cara untuk memajang produk untuk keperluan jualan. Bisa dengan yang gratisan dari blogspot, wordpress, joomla, prestashop atau dengan yang lainnya. Semuanya menawarkan kelebihan dan kekurangannya. Kita tidak akan membahas perbandingan kelebihan dan kekurangan antar skrip di sini. Semuanya bergantung kebutuhan.

Tutorial ini akan membahas pembuatan katalog online (online shopping cart) berbasis OpenCart. Skripnya telah include dengan plugin facebook box, yahoo messanger status, news/artikel serta keterangan lainnya yang tinggal dikustomisasi disesuaikan dengan keperluan jualan Agan.

Tutorial dibagi 3 bagian, karena tutorial akan relatif panjang bila disekaliguskan. Tutorial ini untuk diikuti oleh nubi yang sama-sama ingin belajar kayak saya.

Live demo untuk tutorial ini beralamat di http://olshopku.p.ht
Akun domain dan hosting untuk live demo tersebut menggunakan yang gratisan. Bila suatu waktu akun tersebut lenyap didelete oleh penyedia hosting, mohon maklum saja.

Langsung kita mulai.

BAGIAN 1: DOMAIN DAN HOSTING

Yang kita perlukan

1. Daftar Domain dan Hosting
Domain adalah alamat situs jualan kita dan hosting adalah tempat menaruh skripnya. Untuk tujuan belajar dan ujicoba kita gunakan yang gratisan aja dulu.

Domain dan hosting gratis banyak kelemahannya. Namanya juga gratisan. Beberapa diantaranya adalah sulit diindex oleh google dan terkadang server down. Kalau nanti agan telah tahu prosesnya dan berniat serius nyoba jualan sebaiknya diupgrade ke layanan berbayar. Untuk keperluan latihan sekarang kita abaikan kelemahan-kelemahan tersebut dan pilih yang paket gratisan aja dulu.

Ada banyak penyedian domain dan hosting gratisan, salah satunya idhostinger.
-----------------------
Untuk mendapatkan domain dan hosting gratisan sekarang, klik di sini.
-----------------------
Buat akun di sana atau lakukan order dan pilih paket yang GRATIS. Buat akun di sana hingga selesai dengan mengaktivasi link yang dikirimkan ke email pendaftaran Agan.

2. Download Skrip
Download skrip katalog toko online di sini
------------------
Klik di sini
-----------------

3. Buat Akun Domain dan Hosting
Langkah 1 telah dilakukan? Sekarang saatnya buat domain dan juga hostingnya.

Masuk ke http://cpanel.idhostinger.com. Masukkan email pendaftaran agan dan juga passwordnya.

Pilih Kontrol Panel dan pilih Buat Akun Baru.

Pilih Order di paket yang Gratis

Isikan nama subdomain untuk situs Agan dan juga passwordnya. Ingat-ingat nama password dan juga hal penting lainnya. Sebaiknya Agan juga pindahkan ke catatan di notepad. Jaga-jaga kalau lupa. :D

Klik Buat dan tunggu hingga prosesnya selesai.

Membuat domain dan hosting selesai.

4. Upload Skrip ke Hosting
Sudah melakukan langkah no 2 download skrip? Sekarang saatnya untuk mengupload skrip ke hosting. Untuk keperluan upload ini kita memerlukan aplikasi upload manager. Kita akan gunakan Filezilla. Silakan download setupnya di klik di sini. Kemudian lakukan instalasi. Aplikasi ini gratis. Agan tidak akan diminta mengisikan serial no dan crack atau semacamnya. Tinggal Next > Next > Next dan selesai.

Sebelumnya, Agan buka dulu email yang digunakan sewaktu mendaftar. Agan dikirimi email berupa info akun situs yang barusaja dibuat.

Buka aplikasi FileZilla. Klik menu Site manager > Pilih New Site dan isikan datanya sesuai yang dikirimkan via email.

Lakukan unzip terhadap file yang Agan download di langkah 2. Ada 2 file hasil ekstrak. Yang perlu Agan download adalah hanya yang olshop.zip

Drag file olshop.zip ke folder /public_html. Ingat folder /public_html. Di sana sudah ada file default.php, file ini tidak diperlukan. Delete saja.

BAGIAN 2 KONFIGURASI FILE DAN DATABASE
Sembari menyiapkan Bagian 2. Bagi yang berminat, silakan lakukan dulu bagian 1 di atas.

Sebelum dilanjutkan, ini alternatif link download skrip bila link di atas di langkah 2 download skrip tidak bisa (bandwith limit)
------------
Download alternatif skrip
------------

BAGIAN 2 KONFIGURASI SITUS

Bagian ini agak sedikit teknis. Agan akan berkotor-kotor ria dengan sedikit koding. Namun jangan khawatir, Agan tidak akan tenggelam dalam kode yang rumit. Dengan sedikit konsentrasi dan fokus, Agan dijamin bisa melewati bagian berat ini. :P

[1] Buat Database
Masuk ke Control Panel. Pilih situs yang Agan dan klik Switch.

Klik Database Mysql
Beri nama database, username dan passwordnya. Klik Buat

Database telah dibuat. Kita akan sangat memerlukan informasi ini. Pindahkan dengan cara copy paste ke Notepad. termasuk juga password yang barusan agan masukkan.

Kemudian pilih Masuk phpMyAdmin

Import database
Pilih Import. Telusuri file olshop.sql (hasil download yang telah diekstrak jadi 2 file itu). Klik Open kemudian klik tombol Go. Tunggu prosesnya beberapa saat hingga ada tulisan import sukses

[2]Ekstrak File Skrip
Kembali ke home control panel > di bagian Files > ada 3 file manager. Agan pilih satu file manager yang tampilannya seperti gambar di bawah ini. Ketika tutorial ini dibuat tampilan file manager seperti di bawah adalah miliknya file manager 3. Tapi kadang-kadang berubah. Agan cobain satu-satu dan cocokkan tampilannya seperti file manager yang di bawah.

Masuk ke folder public_html
Klik file olshop.zip (yang sudah diupload di bagian 1) > pilih Unzip
Biarkan pilihan hasil ekstrak di public_html. Kemudian klik tanda ceklis.
Biarkan proses ektraks hingga selesai.

[3]. Konfigurasi file Database
Buat database sudah, kemudian import data tabel ke database sudah, ektrak file skrip olshop sudah. sekarang saatnya kita hubungkan file skrip olshop dengan data di database.

Ada 2 (dua) file yang harus diedit agar database dengan file terhubung. Nama filenya config.php. Satu file ada di public_html dan satu lagi di di folder d32ulk1ff77.

Sebelumnya cari tahu dulu lokasi home root situs agan dengan masuk ke home di cpanel. Lihat bagian yang ditandai garis bawah warna pink. Ambil info itu dengan cara copy dan paste-kan di notepad, biar gampang kita ambil kalau diperlukan.

Buka kembali File Manager > Edit file config.php yang ada di public_html

Ganti semua http ://localhost/olshop dengan alamat situs agan. Lengkap dengan http://
Ganti semua c xampp htdocs olshop dengan alamat home root situs agan (yang alamatnya ada pada gambar sebelum ini) ditambah /public_html. Pada contoh ini adalah /home/u543401236/public_html/
ganti juga informasi databasenya. Sesuaikan dengan yang nama database dan username serta password yang telah agan buat sebelumnya.
Klik Save.

Lakukan hal yang sama persis untuk file config.php yang ada di folder d32ulk1f77

Selesai. Sekarang tuliskan alamat situs Agan di browser dan voila. Situs Agan sudah jadi. :)

BAGIAN 03 KUSTOMISASI SITUS

Sampai bagian 2, bila telah diselesaikan, situs telah berfungsi. Untuk selanjutnya cara upload produk, mengganti facebook fan page dengan fanpage toko agan, mengaktifkan ym, mengganti banner, mengganti alamat email dan alamat toko, serta lainnya akan dibahas

BAGIAN 03 KUSTOMISASI SITUS - TAMAT

Bagian 03 cara mengkostumisasi situs sesuai dengan keperluan agan. Pada bagian ini termasuk cara mengisi produk, cara mengganti slideshow, facebook like box, mengganti halaman contact us, email dam alamat, mengaktifkan status ym, dan beberapa pengaturan admin lainnya.

Agar gampang, untuk bagian 03 tutorial ini telah dibuat dalam bentuk ebook pdf. Silakan download ebooknya di sini.
--------------------
Download ebook tutorial olshop

Alternatif link download ebook olshop
--------------------

UPDATE TAMBAHAN
Untuk proses unzip dan juga import database yang merupakan proses mengirim dan menulis data di server, harus dalam kondisi koneksi internet stabil. Apalagi bila hostingnya yang gratis dengan kekurangan berupa waktu proses eksekusi yang dibatasi (lebih pendek). Ada kemungkinan ketika sepertinya telah selesai namun malah menampilkan error seprti gamabr di bawah ini. Yang perlu agan lakukan untuk menyelesaikan masalah ini adalah unzip ulang atau replace (timpa) file yang error tersebut.