How to use capture in custom joomla form

Let’s see how to add capture to custom form.I’m presenting this based on my previous posts about Joomla Frontend Custom Form Developing (Step 1, Step 2, Step 3).

There are several plugging for joomla capture.I’m using Joomla ReCaptcha plugin to my development.It’s available from joomla 2.5.

First of all enable recapture plugging on joomla plugging manager.Then Get recaptcha keys from http://www.google.com/recaptcha.To get those keys you need to have google account.Go to Recapture and Set these keys to recaptcha plugin as bellow.

Then Go to Global Configuration=>Site=>Default Captcha and set "Default Captcha"=>"Captcha - ReCaptcha".

Add following code to components\com_myresourcelist\models\forms\joinwithus.xml.

<field name="captcha" type="captcha" label="Captcha"
            description="Type Captcha Text" validate="captcha" />

Then your code will be as follows.

 

Add captcha to view by adding following code to components\com_myresourcelist\views\joinwithus\tmpl\default.php

<dt><?php echo $this->form->getLabel('captcha'); ?></dt>
<dd><?php echo $this->form->getInput('captcha'); ?></dd>
<dt></dt><dd></dd>

Now your form contain capture as follows.

It’s not finished still you can submit form with out capture validation.

Let’s see how to validate the capture.

Change submit method of components\com_myresourcelist\controllers\joinwithus.php as follows.it validate the form data.

Now it’s validating data and wrong capture directed to form again but we’ve lost all previously entered data.

The problem is we haven’t handle the user state.Let’s solve this now.In model class loadFormData() must override. This is a Method to get the data that should be injected in the form.

Suppose you need to clear email field after wrong submission.Add following code to get data method of a model class.

// Unset the Email.
unset($this->data->email);

I’ve added it to the git code above.

If something is wrong let’s share our knowledge.Keep a comment. 

Joomla 2.5 Frontend Table – Step1

In previous posts I tried to share my knowledge about joomla frontend custom form.In this chapter I’m going to show how to show data table in frontend and some operations in that data table ex:- Search,Filter etc.

I’m presenting this based on my previous posts about Joomla Frontend Custom Form Developing (Step 1, Step 2, Step 3).

In this part lets create the table.I’m creating mrl_region table for this example.it contain 3 columns id,Name and userid.Bellow is sql query for creating table and inserting data.I’ve used “mrl” prefix for table.This is the prefix I gave on joomla installation.   

I hope to continue this lesson using com_myresourcelist which I used to my pervious blog posts.

Let’s name our table as Regions.Add controller class as regions.php to components/com_myresourcelist/controllers folder.

Add model class as regions.php to components/com_myresourcelist/models folder.

Next we’ll create view for our table.For that create regions folder on com_myresourcelist/views.Then tmpl folder inside regions folder.Make sure to add empty index.html file on each newly created folder.

Add view.html.php to com_myresourcelist/views/regions folder.

Create following files inside com_myresourcelist/views/regions/tmpl folder.

default.xml

default.php

default_head.php

default_body.php

default_foot.php

Now you have finished front end table.Create new menu item for our table.Select Menu Item type as Regions Table .

By clicking new menu item in the front end you will see the table as follows.

Next post we’ll see how to filter table data.

Joomla 2.5 MVC Frontend Custom Form - Step3

This post is 3ed part of my lesson series.I strongly recommend you to follow my previous posts about joomla custom forms to continue with this lesson.

In this post we’ll discuss about how to save form data into database.

In our installation component contains installation sql file named install.mysql.utf8 in administrator –> components –> com_myresourcelist –> sql

After installing com_myresourcelist into your joomla project new database table will add into your database.Ti named as yourprefix_joinwithus .You can check it by using phpmyadmin in your server.

Let’s create controller class for join with us inside .Most important thing is naming the php class.In my example it named as MyResourceListControllerJoinWithUs.

It handles the submit event of the form.To saving data on database insert query will contain on model class.It is calling from controller class submit event. Please read comments on controller class and saving data method will call as $model->updItem($data);

Updated medel class(components->com_myresourcelist->models->joinwithus.php) as follows.

Now you can save data using your front end form.After submitting data notification message will be seen in the screen.

Form Validation

If you need to validate last name as requird field, you just need to update components –> com_myresourcelist –> models –> forms –> joinwithus.xml as follows.

<field name="lname" type="text"  required="true" description="COM_MYRESOURCELIST_FORM_DESC_LNAME"
            label="COM_MYRESOURCELIST_FORM_LBL_LNAME" size="50" />

this will add validation method to submit data form.

 

Next post I hope to show you how to show saved data on front end table.

Joomla 2.5 MVC Frontend Custom Form - Step2

On this post I hope to explain how to design joomla frontend custom form.Please open the joomla project you’ve installed com_myresourcelist  using your favorite php editor.In my case I’m using Eclipes IDE.
Goto components –> com_myresourcelist –> models folder.
Add new folder named forms and empty index.html file to this location.
Add new file called joinwithus.xml to forms folder.


This file describes what are the form fields are containing on our front end form.You can get more details about these field types from here.My sample component is supporting for localization.Localization file for our frontend is in components –> com_myresourcelist –> language –> en-GB –> en-GB.com_myresourcelist.ini. Update it as following.

Update components->com_myresourcelist->models->joinwithus.php as follows

Update components->com_myresourcelist->views->joinwithus->view.html.php

Update components->com_myresourcelist->views->joinwithus->tmpl->default.php

Go to link you’ve created for myresourcelist component.It will display the form as follows.

Next post I hope to show you how to save data in database.

Joomla 2.5 MVC Frontend Custom Form - Step1

This is my first blog post about joomla. Recently I had to develop front end form for joomla 2.5 web site and I couldn’t find any proper post for my requirement.So I decided to write something about what I learnt.

This lesson will cover some part about only frontend development and I hope to write some post about backend also in the future.Let’s see how to develop joomla custom frontend form.

My post is about developing component for joomla 2.5. Before start the post please download com_myresourcelist from here. This is a basic component that helps me to continue lesson series.

The structure of com_myresourcelist as follow.

com_myresourcelist 
    admin
        controller
            index.html
        helpers
            index.html
        language
            en-GB
                en-GB.com_myresourcelist.ini
                en-GB.com_myresourcelist.sys.ini
                index.html
            index.html
        models
            fields
                index.html
            forms
                index.html
            rules
                index.html
            index.html
        sql
            updates
                mysql
                    index.html
                index.html
            index.html
        updates
            index.html
        tables
            index.html
        views
            myresourcelists
                tmpl
                    default.php
                    index.html
                index.html
            view.html.php
            index.html
        controller.php
        index.html
        myresourcelist.php
    language
        en-GB
            en-GB.ini
            index.html
        index.html
    media
        css
            admin.stylesheet.css
            index.html
            site.stylesheet.css
        images
            index.html
        index.html
    site
        controllers
            index.html
        language
            en-GB.com_jointcm.ini
            index.html
        models
            joinwithus.php
            index.html
        views
            joinwithus
                tmpl
                    default.php
                    default.xml
                    index.html
                index.html
                view.html.php
            index.html
        controller.php
        index.html
        myresourcelist.php
    index.html
    myresourcelist.xml
    script.php   

Seams this is somewhat complex structure.This will give you basic understanding about joomla 2.5 (or above ) MVC component structure.I think this will help you to build your own component.

Joomla MVC Component can be divided in to tow categories.It’s Frontend and Backend.Front end is displaying for site users and Backend is for administrator tasks.

In Downloaded folder com_myresourcelist –> admin contains backend part and com_myresourcelist –> site contain frontend.

com_myresourcelist –> media and com_myresourcelist –> language folders contain resource files which needs to component installation.

Continue with this tutorial please install the component using joomla extension manager. After installing you can see the basic basic backend UI and there is a link named My Resource  on component menu in joomla administrator.

Fig:01 – Component Menu

Fig:02 – Admin UI

Now its time for add new menu item to show frontend UI.Please add new menu item and select menu item type as Join with us Form .

Fig:03 – Select menu item type

After creating front end menu please go to new menu item in the site and you can see the frontend UI with hellooo message.

Fig:04 – Frontend UI

Here onwards I'm developing front end UI.I’m using Eclipes for my developing here onwards.After opening the joomla project by using eclipes you can see the frontend and backend folders as follows.

  

Fig:05 – Backend

Fig:06 – Frontend

In this tutorial series we’ll discus about joomla front end form saving data,edit data and showing them in a table.  

In the next lesseon I’ll show you how to add front end form UI.