Outsource Online Captcha

Free custom magento module to add captcha to your magento store.Which will protect magento sites from spam posts.Below is brief description about writing/creating a custom magento module based on this custom module.Those who want to customize this magento module will find this helpfull.I also hope this will be a good guide for anyone who are in magento development looking for any kind of magento customization

For getting extension key or to see screenshots visit magento connect page of this custom magento extension check the new magento connect page of this module
https://www.magentocommerce.com/magento-connect/outsourceonline-captcha-6034.html
Latest version 1.0.9
Compatible with 1.3 to 1.6 versions of Magento.Protects forms registration,One page checkout,contactus,product review and send a friend from spam bot postings

Magento sites are targeted by spam bots like any other sites.In order to effectively prevent the bots you need to make use of captcha.Captcha is basically an image where some squiggly characters are written in such a way that only a human eye could read.The user is prompted to add the characters and the control will go further only if the characters submitted matches the characters in the image.

This custom magento module will add captcha functionality for magento forms for registration,One page checkout,contactus,product review and send a friend .Simply install the module and check the aforementioned forms.There are no addtional settings to configure if you only want image captcha proection but it is recommended to clear your cache after installing.If you dont see admin options in configuration section logout and again login.

Proactive spam protection in backend with botscout.com API

There is an addtional option to add proactive spam protection in backend with botscout.com API for magento.You can choose not have the conventional captcha image and only have the invisible spam protection with this API.You need to register(its free ) in http://www.botscout.com/ and get their credentials to use this feature.My Personal suggestion is to use both image captcha (good for blocking bot posts) and botscout protection(for blocking human spam posts to an extend).

This is the first module I submitted to magento since I started working on magento customization .Unlike customizing other opensource CMSs ,customizing magento appeared more complex in the begining.But once I started more involved in it I started to love it .Gradually magento development became a thing of interest.I would like to thank those who wrote great tutorials about creating custom magento modules.My special thanks to fontis whose recaptcha extension helped me a lot to build this module.Infact this module is actually a forked version of their recaptcha extension.Below I have explained internals of this module including using AJAX in magento modules.Please go through if you are interested in the internals of this module.Those who want to customize magento will find this helpfull.I also hope this will be a good guide for any kind of magento customization.If you have any doubts regading customization of this module feel free to contact me through tha form below

Creation of OutsourceOnline Captcha for magento/Writing a custom module for magento/Magento Customization basics/Using AJAX in a magento module/MVC in magento

Please install the module from magento connect before proceeding further.Please refer the following links and come back so that you can have a clear idea regarding the basics of module creation and AJAX integration in magento(if you haven't t done this before)

http://magentocookbook.wordpress.com/2009/06/29/create-a-magento-module/

I am not explaing the inner contents of each files since you will have the files added to your magento .Please note the naming conventions for each class and config nodes.By naming conventions I mean the usage of uppercase and lower case letters and underscores(_).For example a class name must contain the name of each folder in the path of that class from app/code/community folder,names of folders will be with first letter uppercase and remaining letters in lowercase.Each name should be sperated with an underscore. Custom modules will not work properly in magento without following naming conventions properly

Files of this module

Let us now go through the files that constitutes this custom extension

app/etc/modules/OutsourceOnline_Captcha.xml - lets magento know that the new module is in app/code community folder

app/code/community/OutsourceOnline/Captcha

app/design/frontend/default/default/layout/OutsourceOnline_Captcha.xml - explains the template parts that will be used by this module

app/design/frontend/default/default/template/outsourceOnline/captcha/

app/locale/en_US/OutsourceOnline_Captcha.csv - File you could edit the texts(labels and error message related to this module)

Adding translations

if you are using a different language you need to save a copy of this file to your language's folder(for eg:es_ES/OutsourceOnline_Captcha.csv if you are using spanish) after setting appropriate texts in the second colomn of each line;

Config File : Let magento know that the new module is added.This will become part of global config file which magento uses to render any page

app/etc/modules/OutsourceOnline_Captcha.xml

Magento works on MVC(model vew and controller) structure.So any custom module should have seperate classes to handle the role of model ,view and controller.

There are naming conventions and there are file locations for creating each files that represent MVC(model vew and controller) .In addtion to that there should be a config file(mandatory) and a system file(only if the module have any admin options)

Both files are located in app/code/community/OutsourceOnline/Captcha/etc

So now comes the steps to creating actual files that give life to the MVC(model vew and controller)structure of the module.

Model:Model is that part which mainly handles the database part.So when you have to perfrom some database related operations ,you assignthe task to thios class.We dont have any complex operations but we still used 2 model classes to act as source for magento config options.Magento is apprised about this through config.xml

View:View is that part of a module which handle the display part.View role in magento will be handled by a block class as well as a phtml file.When you want to use a view you need to let magento know about how,when and where to show the view.For that you need to use the layout file.

Layout file is therefore a config file for view.Layout file of the magento captcha extension is

app/design/frontend/default/default/layout/OutsourceOnline_Captcha.xml

 

Once the layout is added you need to add the phtml and block files.block file contains the php class that handles the view and phtml files contain the html part.phtml files will be included in the block classes and will be using the variables and methods as part of the block class.

phtml files of this plugin is at

app/design/frontend/default/default/template/outsourceOnline/catpcha/

Important point when you use a a custom magento theme

When you use a a custom magento theme(instead of the default magento theme),you need to edit the phtml files the concerned forms(registration,contact us,send a friend,review) of this extension to match the other forms and pages of that custom magento theme .This because the forms are over ridden by this custom magento extension.Tou need to edit the css of these phtml files even if you chose not to use captcha image and avail only botscout protection.The list of phtml files to edit are 'contacts.phtml'(Contact Us form),'register.phtml('Registration form),'form.phtml'(product review form),'send.phtml'(Send a friend form)

and the block files are at

app/code/community/OutsourceOnline/Captcha/Block/

Since we are only subclassing existing block classes only one class is added.

Controller:As the name implies ,this control classes controlls the entire functionalities associated with the module.Magento is apprised about this through config.xml

 

AJAX in magento:Magento uses Prototype JavaScript framework which have an Ajax class.This class is used by this module.A good article about using AJAX in magento is available at

http://subesh.com.np/2009/11/working-with-ajax-in-magento/

This was a starting point for me for implementing the AJAX functionality for security code checking of this plugin

Identifying Files and methods called in magento from the url

there are several xml files that together constitute the magento config
This includes
1.xml files in app/etc folder
app/etc/local.xml (holds database info and admin folder url)
app/etc/config.xml (stores mainly url path and directories values )

2.all xml files in

app/etc/modules (tells magento where each magento modules are stored in app/code folder.viz core,local,community)

3.xml files in etc folder of each module
for eg:
app/code/community/OutsourceOnline/Captcha/etc/config.xml (holds default values of config values,sets frontend value,updates of layouts , overriding of existing controllers etc)
app/code/community/OutsourceOnline/Captcha/etc/system.xml

4.xml files in layout folder of template app/design/frontend/{magento theme name as set in admin panel}/default/layout

All these files are combined together and cached(only once when there is no chache)

Since magento follow a MVC pattern,to know which file is used for each url,keep in mind that the urls expect that of products and categories are interpreted by magento like this
magentositeURL/frontend/controller/action/

frontend value must be mapped to a magento module
controller value tells magento lo load the controller with the file name {Controller value with first letter upper case}Controller.html
action value tell magento to call the method with the name {Action value with first letter upper case}Action() in the controller

all the remaining items after the /action/ must be appropriately used in the above action method
if only magentositeURL/frontend/ is called in the brower ,magento will interpret it as
magentositeURL/frontend/index/index/

the frontend -> module mapping will be set in one of the modules config.xml
for eg:in the case of this module the frontend 'captcha' is set like this

<frontend>
<routers>
<OutsourceOnline_Captcha>
<use>standard</use>
<args>
<module>OutsourceOnline_Captcha</module>
<frontName>captcha</frontName> <!-- Font name -->
</args>
</OutsourceOnline_Captcha>
</routers>
<translate>
<modules>
<OutsourceOnline_Captcha>
<files>
<default>OutsourceOnline_Captcha.csv</default><!-- translation file name -->
</files>
</OutsourceOnline_Captcha>
</modules>
</translate>
<layout>
<updates>
<OutsourceOnline_Captcha module="OutsourceOnline_Captcha">
<file>OutsourceOnline_Captcha.xml</file><!-- layout file name -->
</OutsourceOnline_Captcha>
</updates>
</layout>
</frontend>

so if you call magentositeURL/captcha
magento magentositeURL/captcha/ajax/freshcaptcha?instanceNo=1

actually FreshCaptchaAction() method in AjaxController class of OutsourcOnline/Captcha is called
To view the entire configuration you can use the following code
<?php
require_once 'app/Mage.html';
header("Content-Type: text/xml");
die(Mage::app()->getConfig()->getNode()->asXML());
?>

A good article for viewing the entire magento configuration is at
http://alanstorm.com/magento_config

Updates

9th Sep 2010:SSL non SSL issue fixed