Install Prestashop 1.5.4.1 di Local Host

Update : Install Prestashop 1.5.6.0

Persiapan yang harus anda lakukan adalah :
1.    Unduhlah CMS Prestashop 1.5.4.1 yang terbaru anda bisa download melalui situs resminya
yaitu : http://www.prestashop.com atau di http://code.google.com/p/prestashop/downloads/list
2.    Kemudian unduh juga localhost server XAMPP di www.nat32.com/xampp 3.    Lalu lanjutkan dengan meng-install terlebih dahulu XAMPP server kemudian di teruskan dengan meng-install CMS Prestashop di folder c:\xampp\htdocs\
4.    Aktifkan XAMPP server dengan meng-klik shortcut XAMPP Control Panel di desktop, kemudian klik button start pada module Apache dan MySql seperti gambar berikut ini :

5.    Buatlah sebuah file kosong di MySql / phpMyAdmin dengan cara :
Jalankan Browser anda ketik http://localhost/phpmyadmin
Selanjutnya pada halaman phpMyadmin buatlah sebuah file seperti gambar dibawah 
Setelah selesai klik button “create”, kemudian keluar/tutup phpMyadmin dan buka kembali browser / Add new tab
6.    Ketikan http://localhost/prestashop   ( prestashop folder terserah anda bisa ganti dengan yang lain misal Presta1541 sehingga menjadi http://localhost/presta1541
7.    Selanjutnya browser akan menampilkan proses peng-install-an Prestashop agar bisa digunakan seperti dibawah ini :

Secara default pilihlah English kemdian klik Next akan muncul halaman selanjutnya yaitu :

Beri tanda centang pada option button “I agree to the above terms and conditions.” kemudian klik “Next” button akan muncul halaman selanjutnya

Isilah nama database yang sebelumnya anda buat melalui phpMyAdmin misal presta1541( defaultnya : prestashop ). Untuk User name dan password sebaiknya anda isi demi keamanan web anda jika anda menggunakan web host, tetapi jika tidak/offline/di localhost bisa diabaikan

Database Server          : localhost            default
Database Name           : presta1540         database yg sebelumnya di buat
Database Login            : root                    default, kondisi online hrs dirubah
Database Password      : kosong               default kosong, biarkan saja pd kondisi online ( tidak di localhost )  wajib diisi
Database Engine          : MyISAM        Default, jika akan diganti dengan yg lain, seperti InnoDB, aktifkan dulu melalui my.cnf pada folder mysql/bin
Table Prefix                   : ps_            Default, bisa diganti dengan yang  lain seperti toko_ atau tk_

Klik button “Test your database connection now!” dan jika berhasil akan muncul kotak dialog dibawah button “Test your database connection now!” yang menyatakan “Database is connected” lanjutkan dengan meng-klik button Next  akan muncul halaman berikutmya

Shop Name                    : isikan dengan nama toko online anda misal Handycraft plasa
Main activity                 : isikan dengan jenis udaha anda misal flower, gifts dan craft
Default Country             : isikan dengan Indonesia atau negara lainnya
Shop time zone               : automaticaly muncul misal Asia/Jakarta
Shop Logo                       : jika anda sudah mempunyai logo upload-lah dengan mng-klik button “browse”  untuk gambar sesuaikan dengan design web anda
First name, Last name    : isikan dengan nama anda
Email                                : Isikan Account Email anda
------------- harap diingat password ini, karena akan digunakan ------------------------
------------- pada saat Login / menggunakan CP /Dashboard ----------------------------
Shop Password              : Isikan password sesuai selera anda
Re-type to confirm        : ulangi seperti yang pertama
---------------------------------------------------------------------------------------
Email address, Shop Password dan Re-type to confirm isikandengan  email dan password anda dan ingat-ingatlah karena pada saat anda akan membuka admin control ( Back Ofiice ) akan diminta username / email dan password-nya.

Langkah selanjutnya adalah dengan meng-klik tab “Next” dan akan muncul halaman selanjutnya yaitu proses peng-install-an CMS prestashop ini kedalam system di mulai dari :
Creating setting .inc file
Create database tables
Create default shop and language
Populate database tables
Configure shop information
Install Modules
Install Modules Addons

Pesan Error pada saat peng-install-an Prestashop 1.5.4.0 masih terjadi di versi 1.5.4.1 yaitu pada module language untuk mengatasi masalah ini sebelum meng-install bukalah notepad++ ( jika anda belum memiliki-nya silakan download di http://notepad-plus-plus.org/ ) lanjutkan dengan meng-edit language.xml yang berada pada folder C:\xampp\htdocs\presta1541\install\langs\en

File : language.xml ( sebelum di-edit )
<?xml version="1.0" encoding="UTF-8"?>
<language>
    <name><![CDATA[English (English)]]></name>
    <language_code>en-us</language_code>
    <date_format_lite>m/j/Y</date_format_lite>
    <date_format_full>m/j/Y H:i:s</date_format_full>
    <is_rtl>false</is_rtl>
</language>

File : language.xml ( setelah di-edit )
<?xml version="1.0" encoding="UTF-8"?>
<language>
    <name><![CDATA[English (English)]]></name>
    <language_code>en</language_code>
    <date_format_lite>m/j/Y</date_format_lite>
    <date_format_full>m/j/Y H:i:s</date_format_full>
    <is_rtl>false</is_rtl>
</language>

Setelah language.xml di edit, simpan dan lanjutkan dengan meng-klik text “Click here” seperti gambar dibawah ini

Proses peng-install-an akan berlanjut ke sesi berikutnya seperti gambar dibawah ini :

Halaman selanjutnya menyatakan bahwa proses intalasi prestashop anda telah berhasil dan beberapa informasi penting untuk website anda seperti “anda diminta untuk menghapus folder install“  dan me-ganti folder admin menjadi admin1541 ( sesuai selera anda ) Selanjutnya anda diberikan 2 pilihan yaitu :
Admin control panel ( Back Ofiice )
Front Ofiice ( halaman awal dari web )

Selamat mencoba, semoga berhasil

Tutorial by Syah jehan Muhammad ( syahjehan27@gmail.com )



Artikel lainnya :

TUTORIAL
Install Prestashop 1.5.6.0 Di Local Host
Setting Shipping & Carriers  di Prestashop
Install Prestashop 1.5.4.0 Di Local Host
Install Prestashop 1.5.4.1 Di Local Host
Meng-Aktifkan ( Me-NonAktifkan ) INNODB di XAMPP Server
Setting Force Compile Prestashop
Customize Block Header Part 1 – Logo, Currency, Language
Customize Block Header Part 2 – Background Header
Customize Block Header Part 3 – Block Top Menu
Customisasi Prestashop Theme Part 1 - (Left Side-Home-Right Side )
Merubah / Memindahkan Posisi Module Ke Block Lain
Customize / Modifikasi Block Home Slider
Shipping, Carriers, Price Ranges & Weight Ranges
Transaksi Customer Melalui Shoping Cart
Merubah “Awaiting Bank Wire Payment” Menjadi  “Payment Accepted”
Meng-optimasi Customer reassurance block bag. 1
Meng-optimasi Customer reassurance block bag. 2
Merubah Penampilan Prestashop 1.5.4.1 Dengan Menambahkan Warna dan Background
Customize Home Featured Product di Prestashop 1.5.4.1
MODIFIKASI MAINTENANCE MODE PRESTASHOP ( MODE OFFLINE PRESTASHOP)
Merubah posisi block module Prestashop yang tidak bisa dirubah melalui back office / admin module
Editing Prestashop dengan Firebug
Install Prestashop 1.4.11.0 di Local Host / XAMPP Server
Prestashop 1.4.11.0 - Tutorial memasang module & thema


------------ PDF Tutorial ------------------------
Modul Tutorial Install Prestashop 1.4.11.0 dalam bentuk PDF
Prestashop 1.4.11.0 - Tutorial memasang module & thema

MODULE
Module Local Bank Wire ( Indonesia Bank Wire ) – Install & Configure

JBX Menu,Slideric,Home Carousel,Blockfooter

THEMES

Thema Handicraftplasa & Logo Handicraftplasa

Thema Prestashop 1.4.11.0

Thema Prestashop 1.4.11.0 ini dapat anda download disini dan logo disini dan module disini :

JBX Menu                      download
Slideric                           download
HomeCarousel               download
Blockfooter                    download


Layout thema seperti ini :

2 Block tambahan yaitu :

Block Social                           download
Block Contact                        download

Layout setelah 2 block ditambahkan menjadi seprti ini :

Tutorial dalam bentuk pdf disini

Selamat mencoba semoga berhasil


Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

Prestashop 1.4.11.0 - Tutorial memasang module & thema

Pada tutorial kali ini saya akan mamberikan thema dan cara memasangnya untuk prestashop 1.4.11.0, thema ini saya ambil dari prestashop 1.4.6 jadi jika ada sobat sekalian yang mau mencobanya silakan.

1. Unduh-lah thema dan module-module yang akan kita pergunakan dibawah ini : 

Module :

JBX Menu, Slideric, HomeCarousel, Blockfooter

Thema
Thema Handicraftplasa & Logo

2. Extract file-file tersebut, gunakan 7zip untuk meng-extract, jika sobat tidak punya download disini
        Untuk thema extract dan salin ke dalam folder C:\xampp\htdocs\presta14110\themes dan untuk
         module extract ke dalam folder C:\xampp\htdocs\presta14110\modules
3. Setelah step 1 dan 2 sobat lakukan, sekarang saatnya untuk memasang theme tersebut pada website
        bukalah admin control panel prestashop 1.4.11.0, kemudian pilih tab module dengan meng-klik tab
        menu tersebut dan sobat akan disajikan halaman yang berisi module-module prestashop, kemudian klik
        tab other module akan terbuka jendela baru berisi beberapa module yang tadi sobat tambahkan.

4. Agar bisa digunakan lakukan peng-install-an dengan meng-klik tab install di sebelah kanan module,
        setelah itu klik tab menu configure setting-lah block-block ini sesua selera anda, lihat gambar di bawah
        ini

Hasil perubahan website setelah dilakukan peng-installan module

Sekarang mari kita atur ulang posisi masing-masing block dan me-non aktif-kan beberapa module 

Untuk memindahkan block module, klik tab menu modules, positions, show modules ( klik tanda panah kebawah ), pilih cart block akan muncul halaman dimana cart block berada, kemudian click Transplant a module isilah module yang akan dipindahkan ke posisi lain lihat gambar

Block Cart pindah ke posisi kiri

New products block berada pada tab front office features pindah ke posisi kiri

Setelah dipindahkan ke posisi kiri  ( left column blocks ) module diatas hapuslah  block yang ada disebelah kanan dengan meng-klik icon tong sampah lihat gambar

Block Advertising berada pada tab Advertising & Marketing di non-active-kan

Stores block berada pada tab front office features di non-active-kan

CMS Block ( Block Footer & Block Information) berada pada tab front office features di non-active-kan

Manufactures Block berada pada tab front office features di non-active-kan

Sekarang mari kita lihat hasilnya :

Selanjutnya masuklah ke admin control panel kembali dan setting thema yang sebelumnya sudah sobat download dan pasanglah dengan meng-klik nama thema-nya, kemudian klik save lihat gambar berikut :

Janngan lupa pada saat memasang theme yang sobat inginkan , pasang juga header logo nya

Dan pindahkan module slideric di atas home editor caranya berikut ini klik tab menu modules, positions akan muncul halaman yang berisi module yang sobat pasang atau bawaan dari prestashop-nya, carilah  block Homepage content kemudian klik tanda segitiga kebawah/keatas lihat gambar berikut
ini :

Sebelum di pindahkan 

Setelah dipindahkan 

Hasil akhir  setelah dipindahkan 

Selamat mencoba, semoga berhasil
Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

Editing Prestashop dengan Firebug

Pada tutorial kali ini saya akan membagi sedikit ( tapi emang sedikit banget yang saya punya … :-D ) pengalaman saya dalam meng-edit thema Prestashop dan memang banyak diantara rekan-rekan Prestashoper yang bingung, pusing dan mungkin juga frustasi … dan sekarang akan saya beri resep-resepnya

Hal pertama yang harus dipersiapkan dalam meng-edit thema prestashop adalah
1.    Sedikit pengetahuan mengenai CSS ( Cascading Style Sheet )
2.    File-file yang berkaitan dengan prestashop seperti file .TPL ( Smarty Template ) yang berisi XML
       script 
 3.   Text Editor Notepad++ dan browser firefox versi terbaru ( sdh include firebug ) jika tidak ada
       silakan anda download di www.getfirebug.com dan klik install

Nah sekarang kita bahas yang no.1 mengenai CSS file karena kita akan meng-edit thema maka sebagian besar file CSS ada pada sub folder C:\xampp\htdocs\presta1540\themes\default\css seperti :

global.css
grid_prestashop.css
scenes.css
maintenance.css
Contoh syintax CSS :

 h1 {color: white; font-size:11px;}    -- header 1 warna putih size 11 pixel

atau

 h1 { color: white;}            -- header 1 warna putih
 h1 { font-size:11px;}             -- header 1 size 11 pixel

untuk lebih jelasnya silakan kunjungi http://www.w3schools.com/css/default.asp

Didalam file global.css inilah seluruh pengaturan website dilakukan seperti :

Background color
Font size
Adjusting Style Sheets ( CSS )
Font family
Color
Text alignment
Paragraph format and pagination

Untuk pembahasan no. 2 file-file .TPL biasanya file-file ini berada pada sub folder module seperti module home featured yaitu homefeatured.tpl, file .tpl ini berkaitan dengan file .css dan proses peng-edit-an dilakukan di file .tpl ini seperti jumlah product per baris, besar dan kecil product dll

contoh script nya sebagai berikut :

Untuk pembahasan no. 3 gunakan text editor yang power full dan free, sangat saya sarankan untuk menggunkan Notepad++ bisa anda download di http://notepad-plus-plus.org/news/notepad-6.4.5-release.html  atau  versi  yang lebih tinggi dan gunakan browser mozilla firefox versi terbaru download di http://www.mozilla.org/en-US/firefox/all/


Bagaimana menggunakan Firebug

1. Bukalah XAMPP Server Control Panel  yang ada di desktop, kemudian aktifkan Apache Server dan
    MySql dengan meng-klik tab Start
2. Bukalah Browser Firefox dan jalankan aplikasi prestashop 1.5.4.0 atau versi berapapun prestashop
    anda
3. Aktifkan Firebug pada menu bar klik Tools, Web Developer, Firebug, Open Firebug lihat gambar

4. Setelah Firebug aktif akan muncul halaman dialog seperti berikut ini

Halaman dialog ini memiliki 2 jendela yaitu jendela kiri dan jendela kanan, untuk bagian kiri berisi page source berupa HTML sedangkan yang kanan page source berupa CSS yang dipergunakan oleh halaman web yang sedang aktif.

Keterangan :
1.    Button “ Click an element in the page to the inspect ” fungsi ini dipergunakan ketika anda hendak
       mengetahui element apa saja yang dipergunakan
2.    Button “HTML” pilihan ini menyajikan page source berupa HTML
3.    Button “Style” pilihan ini menyajikan page source berupa file pendukung dalam bentuk CSS
       misal : global.css

Contoh penggunaan Firebug untuk mengetahui warna background dan merubah warna tersebut menjadi yang kita inginkan

1.    pada jendela sebelah kanan klik  <body id=”index” class=” ”> lihat gambar

Pada gambar diatas setelah bagian <body id=”index” class=” ”> di bagian kanan akan ditampilkan file css-nya lihat bagian kanan dilingkari merah rubah warna “black” ( default : putih ) menjadi warna yang anda suka ( perubahan ini secara live, hanya untuk saat itu atau hanya sebagai percobaan ) jika anda sudah cocok dengan bankground-nya bukalah dengan notepad++ file global.css pada baris ke 53 untuk mengetahui lokasi file global.css klik file tersebut dan carilah tanda curet/contreng lihat gambar berikut

Ini berarti global.css berada pada direktori  localhost/presta1540/themes/Hcraft/css/ maksudnya file tersebut berada di direktori C:\xampp\htdocs\presta1540\themes\HCraft\css lihat gambar dibawah ini file global.css yang saya buka dengan notepad++

Anda juga dapat menggunakan button no.1
untuk melakukan pengecekan element yang digunakan, lakukan hal sebagai berikut klik button no. 1 arahkan mouse ke object pada website misal pada block header atau pada module tertentu maka anda akan disajikan halaman HTML dan CSS module tersebut

Contoh penggunaan button no.1 “Click an element in the page to the inspect”

Selamat mencoba semoga sukses..

Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )