ReCaptcha-logo-small Prestashop ReCaptcha Contact-Form V.1.0
©2010 Created by : gone_bdg - Indonesia
Prestashop

Pendahuluan

Seperti kita ketahui, contact-form pada Prestashop merupakan salah satu fasilitas yang penting agar konsumen, pelanggan, atau calon pembeli maupun para pengunjung website dapat menghubungi kita guna berbagai keperluan seperti pertanyaan seputar produk yang kita jual, memberikan testimoni, atau melaporkan suatu kerusakan yang terjadi pada website kita, melalui sebuah formulir isian yang akan dikirim ke alamat e-mail yang telah kita tentukan sebelumnya.

Namun contact-form standar Prestashop belum disertai dengan pengaman anti spam untuk mencegah komentar-komentar atau kiriman informasi yang tidak kita kehendaki seperti iklan, tulisan-tulisan iseng atau sembarang, info-info otomatis yang dikirim oleh suatu mesin, maupun informasi-informasi lain yang tidak pada tempatnya .

Oleh karena itu, dibutuhkan suatu langkah pengamanan yang secara efektif dapat mencegah Spam masuk melalui contact-form prestashop kita, suatu fitur yang secara effisien akan mencegah para pengunjung website kita untuk tidak memberikan/mengirimkan informasi yang tidak berguna, bersifat iseng, iklan-iklan, dan berbagai informasi tidak penting lainnya yang tidak kita inginkan.

Berdasarkan deskripsi di wikipidia, CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia. Oleh sebab itu, uji ini kadang disebut sebagai uji Turing balik, karena dikelola oleh mesin dan ditujukan untuk manusia, kebalikan dari uji Turing standar yang biasanya dikelola oleh manusia dan ditujukan untuk suatu mesin. CAPTCHA umumnya menggunakan huruf dan angka dari citra terdistorsi yang muncul di layar.

Hal tersebut secara umum telah digunakan sebagai langkah pengaman yang efektif dan efisien bagi berbagai macam bentuk mail-form  seperti registration-form, confirmation-form,  contact-form dan mail-form lainnya, yang mencegah Spam masuk ke dalam e-mail kita.

Prestashop ReCaptcha Contact-Form merupakan modifikasi dari contact-form standar prestashop dimana fitur Captcha telah ditambahkan kedalamnya sehingga menjadi solusi yang tepat bagi Toko Online Prestashop dalam mencegah Spam masuk ke dalam e-mail Anda.

Fitur

Extract Prestashop ReCaptcha Mail-form Package
Pada folder "extra-fitur" terdapat file berikut ini :
  1. contact-form-standar-no-footer-block.php
  2. contact-form-standar-presta-warning.php = contact-form.php (default file / default fitur)
  3. contact-form-redirect.php
  4. contact-form-custom-page.php
  5. contact-form-combine.php

contact-form-standar-no-footer-block : Apabila pengunjung salah mengisi kode captcha, maka akan ditampilkan halaman berisi peringatan standar dari ReCaptcha. Halaman peringatan ini akan tampil tanpa disertai block right column dan block footer prestashop Anda.

contact-form-standar-presta-warning: Apabila pengunjung salah mengisi kode captcha, maka tepat diatas bagian mail-form akan ditampilkan peringatan bahwa pengisian/pengetikan kode Captcha salah, sebagaimana peringatan standar Prestashop apabila terdapat kesalahan saat mengisi subject, e-mail atau isi pesan. (Default ReCaptcha Contact-form fitur)

contact-form-redirect-url: Apabila pengunjung salah mengisi kode captcha, maka akan Anda dapat mengarahkannya kehalaman lain website Anda

contact-form-custom-page-warning: Apabila pengunjung salah mengisi kode captcha, maka akan ditampilkan halaman khusus yang dapat Anda kustomisasi lebih lanjut sesuai kebutuhan atau keinginan Anda

contact-form-combine-warning: Apabila pengunjung salah mengisi kode captcha, maka akan ditampilkan halaman yang merupakan gabungan dari fitur presta warning dan custom-page 

Persiapan

Registrasi

Daftar dan buat akun Anda di website ReCaptcha


Klik signup button diatas dan ikuti petunjuk pendaftaran yang ada untuk membuat akun Anda di reCaptcha

Create a reCAPTCHA key

Untuk menggunakan reCAPTCHA, Anda memerlukan sepasang kunci pribadi/rahasia API (public/private API key). Sepasang kunci ini akan membantu untuk mencegah serangan dimana seseorang meng-host reCAPTCHA pada situs mereka, serta mengumpulkan jawaban dari pengunjung dan menyerahkan jawaban ke situs Anda.


Klik create key button diatas untuk menuju ke halaman reCAPTCHA Administration Portal dan membuat public/private API key untuk situs prestashop Anda. Key ini juga berfungsi untuk mengidentifikasi bahwa situs Anda telah terdaftar di server reCaptcha agar dapat mengimplementasikannya kedalam situs Anda

Pengaturan

Setelah memperoleh public/private API key, selanjutnya buka file "contact-form.php" yang ada dalam paket modifikasi ini lalu cari (baris ke-17) dan edit kode "YOUR_RECAPTCHA_PRIVATE_KEY"  seperti terlihat dibawah ini :

//captcha check begin ...
 require_once('recaptchalib.php');
 $privatekey = "YOUR_RECAPTCHA_PRIVATE_KEY";
 $resp = recaptcha_check_answer ($privatekey,
                               $_SERVER["REMOTE_ADDR"],
                               $_POST["recaptcha_challenge_field"],
                               $_POST["recaptcha_response_field"]);

Tuliskan reCaptcha Private Key Anda pada baris tersebut hingga akan terlihat seperti contoh berikut :

"6LehzwasfbaHSKJ49gjawrfn0FvwMmenm"

Selanjutnya kita tentukan kalimat peringatan yang akan terlihat bila kode captcha tidak diisi atau salah. Cari dan edit kode seperti terlihat dibawah ini :

    if (!$resp->is_valid) {
// If CAPTCHA was entered incorrectly your visitor will view WARNING
    $errors[] = Tools::displayError('Salah tuuuh Captcha kode-nya ....');
                          }

Silahkan edit kalimat yang dicetak tebal merah seperti terlihat diatas, rubah dengan kalimat peringatan yang sesuai dengan keinginan Anda. Peringatan ini akan terlihat tepat diatas block contact-form, seperti peringatan standar prestashop saat terjadi kesalahan dalam pengisian subjet, e-mail atau isi pesan.

Setelah memperoleh public/private API key, selanjutnya buka file "contact-form-with-captcha.tpl" yang ada dalam paket modifikasi ini lalu cari (baris ke-54) dan edit kode "YOUR_RECAPTCHA_PRIVATE_KEY"  seperti terlihat dibawah ini :

<p align="center" style="Font-size:12px;font-weight:bold;">{l s='Please input the capctha code shown below, before You send this message'}</p>
<div align="center">
{php}
require_once('recaptchalib.php');
$publickey = "YOUR_RECAPTCHA_PUBLIC_KEY";
echo recaptcha_get_html($publickey);
{/php}
</div>

Tuliskan reCaptcha Public Key Anda pada baris tersebut hingga akan terlihat seperti contoh berikut :

"6LehzwsAAAAGBhsjYYYuskmxuckndh-zMS-keBd"

Anda juga dapat merubah kalimat yang ditandai dengan warna hijau pada kode seperti terlihat diatas, dengan kalimat lain sesuai keinginan Anda beserta translasi bahasanya di back office prestashop

Periksa kembali semua pengaturan dan perubahan yang telah dilakukan, dan jangan lupa untuk menyimpan perubahan tersebut pada file.

Instalasi

Backup

Buat salinan file original prestashop anda dengan cara mendownload atau merubah nama file berikut ini (berada di root directory situs prestashop Anda):

"contact-form.php" rubah nama filenya menjadi "contact-form-ori.php"

Upload

Siapkan file "recaptchalib.php" dan file "contact-form.php" (atau yang telah Anda pilih sebelumnya - BACA : Fitur) , lalu upload ke root directory situs Anda tempat dimana index.php berada.

Siapkan file "recaptchalib.php" dan file "contact-form-with-captcha.tpl", lalu upload ke dalam directory themes yang sedang aktif digunakan pada situs prestashop Anda (tempat dimana index.tpl berada).

Ujicoba

Buka halaman "contact-form.php" di situs prestashop Anda http://my-prestashop.com/contact-form.php , dan lihat perubahan yang terjadi pada block contact-form. Tepat di bawah kotak pesan, harus terlihat block captcha. Jika tidak terlihat, periksa kembali perubahan yang telah dilakukan dan sesuaikan dengan penjelasan yang telah diuraikan pada halaman Persiapan.

Silahkan Anda coba kirimkan pesan melalui contact-form tersebut, dengan mengosongkan kode captcha atau mengisi kode captcha yang salah. Sesaat setelah klik tombol "send" akan muncul peringatan di bagian atas block contact-form yang menginformasikan bahwa kode captcha yang Anda masukan salah (atau tidak ditulis). Bila tidak terjadi peringatan apapun dan atau pesan Anda tetap terkirim, periksa kembali perubahan yang telah dilakukan dan sesuaikan dengan penjelasan yang telah diuraikan pada halaman Persiapan.

Screenshots

reCaptcha ready to serve :)

prcf-01.

Incorrect ReCaptcha Warning

prcf-02

Passed ReCaptcha Code

prcf-03

FYI

Title : Prestashop ReCaptcha Contact-Form

Type : Modification / Module / Themes
|
Release Date : March 2010
Feature : Front Office : Indonesia / english
Version : 1.0
|
Licences : Commercial / Paid / Free
Compatibility : Prestashop V1.1 - V1.2.5
|
Author : Hargono Setiadi
Core modifications : Yes / No
|
Homepage : http://webindoshop.com
Demo link : click here
|
E-mail : admin@webindoshop.com

Download Link http://webindoshop.com/61-prestashop-recaptcha-contact-form.html

Description :

This modification will prevent spam or unusefull message, sending in trough your prestashop contact-form

ReCaptcha

Notes

recaptchalib.php merupakan library file syarat berfungsinya Captcha, diperlukan untuk menghubungkan website Anda dengan server captcha

Untuk mencoba atau melihat fitur/prilaku peringatan incorect captcha tanpa menggangu fungsi contact-form situs prestashop Anda, silahkan Sesuaikan (reCaptcha Public/Private Key) & Upload semua file yang ada didalam folder "./extra-fitur/root" ke root directory situs prestashop Anda serta file "./themes/prestashop/captcha-incorrect.tpl" kedalam active themes prestashop Anda, lalu coba satu-persatu dengan menuliskan url pada Internet Browser Anda yaitu = http://my-prestashop.com/nama-file-yang-dicoba.php

my-prestashop.com = alamat/domain situs prestashop Anda

nama-file-yang-dicoba.php = nama file yang telah Anda upload dari folder "extra-fitur"

Anda dapat memodifikasi file "captcha-incorrect.tpl" lebih lanjut sesuai kebutuhan dan keinginan Anda, bilamana terjadi kesalahan penulisan captcha code di situs prestashop Anda

Kami percaya Anda mampu mengembangkannya lebih lanjut ...

Bila ada pertanyaan, silahkan hubungi kami melalui e-mail yang terdapat di Tab/page : FYI

Author: 
Hargono Setiadi - www.webindoshop.com | gone_bdg - www.webindemo.com