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.

5 comments:

  1. Very helpful contents..Janith.. Thanks for sharing the knowledge...

    ReplyDelete
  2. The ideas and information provided in the blog was really interesting. Keep sharing information like this.
    responsive web design company Melbourne

    ReplyDelete
    Replies
    1. Thanks for your comment, I'l continue my blog again :)

      Delete
  3. Thanks for the interest I'l continue my blog writing again :)

    ReplyDelete