Hafifah Bella: Website

Assalamualaikum...
hey kawan2, apakah kamu pernah mendengar nama Prestashop? Prestashop adalah sebuah Content Management System (CMS) open source untuk membuat e-commerce/toko online. Untuk kamu yang ingin memulai bisnis online, bisa menggunakan CMS yang satu ini. Ga harus jago website ko bikinnnya.. karena fasilitasnya mudah dipelajari ^^

Karna kebetulan saya ada tugas kelompok membuat e-commerce menggunakan CMS Prestashop ini, so..kali ini saya akan berbagi cara menginstall Prestashop, disini saya menggunakan Prestashop 1.5.5.

1. Download CMS Prestashop di www.prestashop.com .

2. Extract file .zip yang telah didownload tersebut ke dalam folder penyimpanan C:\xampp\htdocs.

3. Sebelum memulai install prestashop, sebaiknya membuat database terlebih dahulu di localhost/phpmyadmin. Sebagai contoh, saya membuat database dengan nama “prestashop3”.

4. Untuk menginstall prestashop, buka localhost/prestashop pada browser. Maka akan muncul tampilan awalnya seperti ini. Pilih Bahasa penginstallan, kemudian klik Next.

5. Kamu akan diminta melakukan persetujuan lisensi, klik centang pada “ I Agree to the above terms and conditions” , kemudian klik Next.

6. Selanjutnya, kamu akan diminta untuk memasukkan informasi toko online pada form “Information about your Store”.

7. Isi data hingga form “Your Account”. Data ini nantinya akan digunakan untuk login halaman admin/back-end Prestashop. Kemudian klik Next.

8. Kamu akan diminta untuk melakukan konfigurasi dengan sistem database. Isi data sesuai keterangan dibawah ini :

Database server address : localhost
Database name : prestashop3 (Pastikan nama database nya sesuai dengan yang dibuat di awal sebelum penginstallan)
Database login : root
Database password :

(Jika saat mengakses phpmyadmin tidak menggunakan username dan password, maka isilah Database login dan kosongkan Database password, sesuai ketentuan diatas. Namun jika anda mempunyai username dan password sendiri, maka isilah sesuai dengan username dan password anda)

Tables prefix : ps_

Setelah itu, klik “Test your database connection now!” maka akan muncul tampilan seperti berikut

Gambar diatas menunjukkan bahwa database telah terkoneksi , namun jika muncul error periksalah dan pastikan bahwa data yang telah anda masukkan telah sesuai. Jika sudah terkoneksi, maka klik Next untuk melanjutkan ke proses selanjutnya.

9. Proses installasi berjalan, dengan tampilan seperti dibawah ini.

10. Tunggu beberapa saat hingga mucul tampilan seperti berikut.

Perhatikan pada teks yang dilingkari merah “For security purposes, you must delete the “install folder.” , kamu diharuskan untuk menghapus folder install yang ada di dalam folder prestashop. Setelah dihapus, maka kamu bisa klik pilihan “Manage your Store” pada Back Office, yaitu halaman administrator yang nantinya anda akan melakukan segala transaksi dan mengatur website.

Sebelumnya kamu akan diminta untuk melakukan login seperti dibawah ini. Isilah sesuai dengan data yang telah kamu masukkan pada form “Your Account” pada saat penginstallan.

11. Sukses melakukan login, maka akan muncul tampilan back-end seperti dibawah ini.

12. Jika kamu ingin melihat tampilan depan/front-end website kamu yang nantinya akan dilihat oleh pengunjung, klik View My Shop yang ada di posisi pojok kanan atas pada halaman administrator.

Berikut adalah tampilan awal website kamu.

Selanjutnya, kamu bisa mengedit tampilan website nya.. Buatlah semenarik mungkin dan friendly user agar pengunjung senang melakukan transaksi di website kamu..
Sekian dari saya.. Semoga bermanfaat ^^
Wassalamualaikum.. :D

Assalamualaikum temen2, terimakasih atas kunjungannya ke blog kecil saya ini :D
langsung saja disini saya mau berbagi sedikit codingan CSS untuk membuat objek di website menjadi Draggable (read: bisa ditarik "bahasa kerennya gtu")..
Ini bisa jadi referensi buat temen2 yang ingin membuat web nya menjadi lebih unik karna objek nya bisa ditarik kemana2 sesuka hati visitor web nya, hhhaa

simpel sih, kaya gini ni..
Tinggal di modif aja deh sesuka hati..
_________________________________________________________

<!DOCTYPE html>

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; cursor:move; }

</style>
<script>
$(document).ready(function() {
$("#draggable").draggable();
});
$( ".selector" ).draggable({ cursor: 'crosshair' });
//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
</script>
</head>
<body style="font-size:62.5%;">

<div id="draggable">Drag me</div>

</body>
</html>
_________________________________________________________

Kalo temen2 mau ganti objeknya tinggal ganti yang di bagian ini

#draggable { width: 100px; height: 70px; background: silver; cursor:move; }

width : untuk lebar objek
height : tinggi objek

background : bisa diganti jadi background-image , sehingga codingnya jadi gini
background-image:url(../BNURkolCAAAzZfI.jpg%20large.jpg)
yang didalam kurung itu adalah tempat penyimpan gambar/objeknya

cursor : itu biarin move aja , jadi biar kursornya ngebentuk panah 4 arah yang menunjukkan bahwa objek itu bisa di drag..

gini ni hasil modifan aku

selamat mencoba dan semoga bermanfaat ^^
Wassalamualaikum.. :D

Cara Menginstall CMS Prestashop

Membuat Objek Draggable pada Website dgn CSS