Monday, May 27, 2013

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.

Monday, May 20, 2013

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.
formview1
Next post I hope to show you how to save data in database.





Friday, May 17, 2013

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.

admincomponent

Fig:01 – Component Menu

adminui

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 .

frontendmenu 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.

frontendui

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.

backendeclipes  

Fig:05 – Backend

eclipesfrontend

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.