Joomla! Documentation - User contributions [en]

J2.5:How do I store empty values as NULL in the database?

2013-05-16T08:17:10Z

Rvsjoen: Created page with "If you want to store empty values as NULLs into the database, you need to override JTable::store() and JModelAdmin::prepareTable(). Add following snippets of code into your co..."

If you want to store empty values as NULLs into the database, you need to override JTable::store() and JModelAdmin::prepareTable(). Add following snippets of code into your component's ''admin/tables/nameoftable.php'' and ''admin/models/nameofeditview.php''

''admin/tables/nameoftable.php''
<source lang="php">
public function store($updateNulls = true) {
return parent::store(true);
}
</source>

''admin/models/nameofeditview.php''
<source lang="php">
protected function prepareTable($table)
{
$defnull = array('array','of','columns','that','can','have','null','value');
foreach ($defnull as $val)
if (!strlen($table->$val))
$table->$val = NULL;
}
</source>
[[Category:Tips and tricks]]

User talk:Tom Hutchison

2013-02-12T14:01:58Z

Rvsjoen: /* Module and Template Development */

== vel list ==

I have reverted your changes.
With all due respect enzsure that before you alter anything protected you should read and observe the comments on the talk pages
namely

Talk:Vulnerable Extensions List
Jump to: navigation, search

All questions should be addressed to the vel @ joomla.org email address (without the spaces)

Only known users to edit anything previously agreed items on this page.

== cont ==

In response to youre previous message - not sure why you added on my talk page but still
Beyond the cut and paste of previous editors comments.
Please ask Chris Davenport for the history on this document, and if you have any concerns or questions contact the vel team as detailed to do on the vel talk page.
:I posted on your talk page, because I have no way of knowing if you are watching my talk page for replies without certain installed Mediawiki extensions. Will PM you and Phil on the forum. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 16:04, 22 October 2012 (CDT)

Received no PM or email to the vel list from you. Your rechanges reversed.
--[[User:Mandville|Mandville]] ([[User talk:Mandville|talk]]) 12:50, 27 October 2012 (CDT)

:Phil already reverted the mis-spelling, the categorisation of the page stands as is and will. Since it was for enhancement suggestions, I didn't realise the clock was ticking. I have been trying to research everything, because I wanted to address all concerns with solutions. At this point, I am probably just wasting my time and effort. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 14:27, 27 October 2012 (CDT)

== Security checklist 7 ==

in reference to history entry for the checklist 7, 16:44, 13 October 2012‎ - (Removed protection from "Security Checklist/You have been hacked or defaced": hmm, don't know why this was protected, error - reset to all edit)

http://docs.joomla.org/Security_Checklist/You_have_been_hacked_or_defaced
and history
http://docs.joomla.org/index.php?title=Security_Checklist/You_have_been_hacked_or_defaced&action=history

The checklist was protected as incorrect and sometimes potentially damaging edits were being made mainly to the Chmod and Cron section shell scripts of the page.

This goes back to a few pages are protected for a reason. The reason in this case for the safety of the end users site. While I would suggest this page remain protected from regular editing for reasons outlined above, Though I would feel better if the page was again protected, I will let it stay as unprotected for now unless another incident of changing or modifying the shell scripts occurs which would potentially damage or delete someones site if the modified script(s) are used before the changes can be rolled back.
:Protected again to keep the content of the page from being changed. I also added the Permissions page into the series. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 07:11, 29 October 2012 (CDT)

-----
Please revert the title of the page as was. It is universally known as checklist 7.
It was and is part of the security checklists 1-6
Please also reneable full protection of the document to those previously listed - namely PhilD, myself and Lafrance.
This is another previously agreed protected, nominated document.

--[[User:Mandville|Mandville]] ([[User talk:Mandville|talk]]) 17:13, 3 November 2012 (CDT)

:Protection was enabled days ago, Security Checklist 7 can still be referenced, it now redirects to the page. You need to understand, documentation is changing, improving, becoming more organized for Joomla! users. Nothing is ever set in stone. Even Joomla! improves and new releases are now being done at a set pace. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 17:24, 3 November 2012 (CDT)

== Moving sensitive files outside the web root archive ==

Tom the page looks good Thanks

== Barnstar and a few bits and bobs ==

Thankyou very much for the barnstar!!
One thing I've noticed whilst doing the help screens is that when you press the help buttons in Joomla 2.5 is that there are [edit] links next to each section. But these links take you to a blank page - so is there any way we can drop the edit buttons?

Also I noticed one of the help buttons earlier today took you to the Joomla 1.6 help page instead of the 2.5 (when pressed in Joomla 2.5). It was one of the menu items - but typically as I'm writing this I've completely forgotten which - not sure how easy it will be to check up on this!

Thanks again,
George

:No problem! You deserved one, you've done a lot of work on the 2.5 Help Screens and other articles over the past week!

:The link itself is nulled out by the proxy. The [edit] link used to be regex'd out but since the MW 1.16 to 1.19 update, something must have changed in 1.19. We are looking at that. Another thought was to use <nowiki>__NOSECTIONEDIT__</nowiki> to remove the [edit] links from the page. Makes it harder to update them, but once the Help screen is done it should not be necessary to update them. At least not a regular task, just a bug fix or small tweak here and there.

:Was the link in the pop-up window's address bar something like ...help.joomla.org/proxy/index.php?option=com_help&keyref=Help16 or just the page contained information of a 1.6 Help Screen? The first would be a bug, second is a possibility. The next version released Help screens are dumped into the new namespace and content of page links are changed to reflect the new namespace for the new release. I know there are a couple of 1.7 Help screens using pure transclusion to show the 1.6, something like:
:'''<nowiki>{{:Help16:The_name_of the_1.6_HelpScreen}}</nowiki>''' is the only content so it may have just been put into the 2.5 screen.

:Let me know if you can remember if it was content or address and I'll see if I can track it down.
::--Thanks again! [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 20:42, 9 February 2013 (CST)

:::Found another link issue whilst trying to find that Joomla 1.6 link:
:::External URL page - Page takes you to: http://help.joomla.org/proxy/index.php?option=com_help&keyref=Help25:Menus_Menu_Item_Manager_Edit instead of the external URL page http://docs.joomla.org/Help25:Menus_Menu_Item_External_Url
:::Cheers for the information!
:::--[[User:Wilsonge|Wilsonge]] ([[User talk:Wilsonge|talk]]) 02:38, 10 February 2013 (CST)

::Thanks George! I knew this problem existed in Joomla! 3, but didn't have a chance to check 2.5. Assumed it did. It actually is everything under, System Links in Menu selection. The other two Help Screen pages are 'red links' still, but they will have the same issue. I filed a tracker here: [http://code.joomla.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=11410&tracker_item_id=30091 Tracker 30091].

:: I also had to filed another tracker for [http://code.joomla.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=11410&tracker_item_id=30090 Module Manager - Edit - (Blank page)]:
::*Select Site -> Control Panel (Landing page when first logging on to administration)
::*Select Help -> Joomla Help Click link in left sidebar: 'Module Manager - Edit'
::*View a blank page, ref to source on docs.joomla.org which does not exist.

::This is actually causing a 404 error, need to address this right away as it is a "Top 10" requested Help Screen page for all Help Screens. Some of the issues in 3.0 are 2.5 used a modal window and now 3.0 has an actual page. These might not be corrected till the release of 2.5.10. I'll look into it.
:::---Thanks again! [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 09:30, 10 February 2013 (CST)

:::Nice one with the trackers. The link was an address by the way for the 1.6. But I went through all the menu items I edited his w/e and I can't see it. So I'm not sure where it was now. Will have to go on a hunt!
:::Cheers! --[[User:Wilsonge|Wilsonge]] ([[User talk:Wilsonge|talk]]) 02:47, 11 February 2013 (CST)

== Module and Template Development ==

Hi, I saw your post on my discussion page regarding the tutorials. It has always been the intention to move these articles out into the global namespace. The primary reason the tutorials currently live in my user namespace is three-fold:

1. I didn't want the code in the articles to diverge from the code in the repository as I have seen happen numerous times in other tutorials. People have a habit of updating tutorial pages and not the source code packages which ultimately create a lot of confusion.
2. I wanted to test them out for a while to rule out bugs. (I consider this phase to be completed)
3. Since the release of 2.5 I have been meaning to find the time to remove a bit of deprecated code to make it fully "2.5" compliant.

As I have not had time to perform the last step yet, they have remained in my user namespace. I also started on a basic module and template tutorial that I have not had the time to finish.

That being said, I would be happy to help maintain the tutorial code for developers as far as my time allows and this may also help me jump-start my own effort in this area. I have previously suggested adding a "joomla-tutorials" project under the "joomla" organization in GitHub but regardless of how this is deployed I think it would be a very healthy approach to the management of tutorial code.

[[User:Rvsjoen|Rvsjoen]] ([[User talk:Rvsjoen|talk]]) 14:31, 11 February 2013 (CST)

:That's great Rvsjoen! I didn't even know you had a MVC tutorial in your user pages. I'm trying to pull together the docs, improve them and get the devs involved again. If we move them, I will mark them as incomplete so they can be checked against code on pages vs. code in zips. Something I agree with, they need to be the same and maintained as such. This is why there is interest in moving it all to GitHub. We should maintain a version specific structure. 2.5 is easy and 1.6 and 1.7 should be dropped. 3.0 is already out, but I would like to see it as 3.x because eventually it will become a LTS version 3.5. Git will also allow to see the progression of code change too. I am still working to pull this all together. Thanks so much for your interest!
::--- [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 16:15, 11 February 2013 (CST)

::The MVC tutorial in my user pages is a complete update/rewrite of the original 1.7 tutorial mostly created by Christophe, it has at some point also been reviewed by several people in the JBS. It is currently 100% up to date with the code in the zip packages as far as I know.

::Also I noticed that a joomla/jdoc-examples repository has been created for this purpose on GitHub. I do not know if these two "projects" are related but if they are I would encourage whoever responsible to put a folder structure in place for storing more than just tutorials. For example something like...

::* Tutorials
::** Component
::** Module
::** Plugin
::*** System plugin
::*** User plugin
::*** Etc..
::** Library
::** Template
::* Extensions
::** Example extension 1
::** Example extension 2
::** Etc...
::* Code snippets
::** Code snippet 1
::** Code snippet 2
::** Etc..

:: I submitted a pull request on GitHub which implements this idea, so i'll just wait and see whether it's pulled or not. [https://github.com/joomla/jdoc-examples/pull/1 Pull Request #1]

::::--- [[User:Rvsjoen|Rvsjoen]] ([[User talk:Rvsjoen|talk]]) 06:44, 12 February 2013 (CST)

User talk:Tom Hutchison

2013-02-12T12:44:06Z

Rvsjoen: /* Module and Template Development */

== vel list ==

I have reverted your changes.
With all due respect enzsure that before you alter anything protected you should read and observe the comments on the talk pages
namely

Talk:Vulnerable Extensions List
Jump to: navigation, search

All questions should be addressed to the vel @ joomla.org email address (without the spaces)

Only known users to edit anything previously agreed items on this page.

== cont ==

In response to youre previous message - not sure why you added on my talk page but still
Beyond the cut and paste of previous editors comments.
Please ask Chris Davenport for the history on this document, and if you have any concerns or questions contact the vel team as detailed to do on the vel talk page.
:I posted on your talk page, because I have no way of knowing if you are watching my talk page for replies without certain installed Mediawiki extensions. Will PM you and Phil on the forum. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 16:04, 22 October 2012 (CDT)

Received no PM or email to the vel list from you. Your rechanges reversed.
--[[User:Mandville|Mandville]] ([[User talk:Mandville|talk]]) 12:50, 27 October 2012 (CDT)

:Phil already reverted the mis-spelling, the categorisation of the page stands as is and will. Since it was for enhancement suggestions, I didn't realise the clock was ticking. I have been trying to research everything, because I wanted to address all concerns with solutions. At this point, I am probably just wasting my time and effort. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 14:27, 27 October 2012 (CDT)

== Security checklist 7 ==

in reference to history entry for the checklist 7, 16:44, 13 October 2012‎ - (Removed protection from "Security Checklist/You have been hacked or defaced": hmm, don't know why this was protected, error - reset to all edit)

http://docs.joomla.org/Security_Checklist/You_have_been_hacked_or_defaced
and history
http://docs.joomla.org/index.php?title=Security_Checklist/You_have_been_hacked_or_defaced&action=history

The checklist was protected as incorrect and sometimes potentially damaging edits were being made mainly to the Chmod and Cron section shell scripts of the page.

This goes back to a few pages are protected for a reason. The reason in this case for the safety of the end users site. While I would suggest this page remain protected from regular editing for reasons outlined above, Though I would feel better if the page was again protected, I will let it stay as unprotected for now unless another incident of changing or modifying the shell scripts occurs which would potentially damage or delete someones site if the modified script(s) are used before the changes can be rolled back.
:Protected again to keep the content of the page from being changed. I also added the Permissions page into the series. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 07:11, 29 October 2012 (CDT)

-----
Please revert the title of the page as was. It is universally known as checklist 7.
It was and is part of the security checklists 1-6
Please also reneable full protection of the document to those previously listed - namely PhilD, myself and Lafrance.
This is another previously agreed protected, nominated document.

--[[User:Mandville|Mandville]] ([[User talk:Mandville|talk]]) 17:13, 3 November 2012 (CDT)

:Protection was enabled days ago, Security Checklist 7 can still be referenced, it now redirects to the page. You need to understand, documentation is changing, improving, becoming more organized for Joomla! users. Nothing is ever set in stone. Even Joomla! improves and new releases are now being done at a set pace. [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 17:24, 3 November 2012 (CDT)

== Moving sensitive files outside the web root archive ==

Tom the page looks good Thanks

== Barnstar and a few bits and bobs ==

Thankyou very much for the barnstar!!
One thing I've noticed whilst doing the help screens is that when you press the help buttons in Joomla 2.5 is that there are [edit] links next to each section. But these links take you to a blank page - so is there any way we can drop the edit buttons?

Also I noticed one of the help buttons earlier today took you to the Joomla 1.6 help page instead of the 2.5 (when pressed in Joomla 2.5). It was one of the menu items - but typically as I'm writing this I've completely forgotten which - not sure how easy it will be to check up on this!

Thanks again,
George

:No problem! You deserved one, you've done a lot of work on the 2.5 Help Screens and other articles over the past week!

:The link itself is nulled out by the proxy. The [edit] link used to be regex'd out but since the MW 1.16 to 1.19 update, something must have changed in 1.19. We are looking at that. Another thought was to use <nowiki>__NOSECTIONEDIT__</nowiki> to remove the [edit] links from the page. Makes it harder to update them, but once the Help screen is done it should not be necessary to update them. At least not a regular task, just a bug fix or small tweak here and there.

:Was the link in the pop-up window's address bar something like ...help.joomla.org/proxy/index.php?option=com_help&keyref=Help16 or just the page contained information of a 1.6 Help Screen? The first would be a bug, second is a possibility. The next version released Help screens are dumped into the new namespace and content of page links are changed to reflect the new namespace for the new release. I know there are a couple of 1.7 Help screens using pure transclusion to show the 1.6, something like:
:'''<nowiki>{{:Help16:The_name_of the_1.6_HelpScreen}}</nowiki>''' is the only content so it may have just been put into the 2.5 screen.

:Let me know if you can remember if it was content or address and I'll see if I can track it down.
::--Thanks again! [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 20:42, 9 February 2013 (CST)

:::Found another link issue whilst trying to find that Joomla 1.6 link:
:::External URL page - Page takes you to: http://help.joomla.org/proxy/index.php?option=com_help&keyref=Help25:Menus_Menu_Item_Manager_Edit instead of the external URL page http://docs.joomla.org/Help25:Menus_Menu_Item_External_Url
:::Cheers for the information!
:::--[[User:Wilsonge|Wilsonge]] ([[User talk:Wilsonge|talk]]) 02:38, 10 February 2013 (CST)

::Thanks George! I knew this problem existed in Joomla! 3, but didn't have a chance to check 2.5. Assumed it did. It actually is everything under, System Links in Menu selection. The other two Help Screen pages are 'red links' still, but they will have the same issue. I filed a tracker here: [http://code.joomla.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=11410&tracker_item_id=30091 Tracker 30091].

:: I also had to filed another tracker for [http://code.joomla.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=11410&tracker_item_id=30090 Module Manager - Edit - (Blank page)]:
::*Select Site -> Control Panel (Landing page when first logging on to administration)
::*Select Help -> Joomla Help Click link in left sidebar: 'Module Manager - Edit'
::*View a blank page, ref to source on docs.joomla.org which does not exist.

::This is actually causing a 404 error, need to address this right away as it is a "Top 10" requested Help Screen page for all Help Screens. Some of the issues in 3.0 are 2.5 used a modal window and now 3.0 has an actual page. These might not be corrected till the release of 2.5.10. I'll look into it.
:::---Thanks again! [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 09:30, 10 February 2013 (CST)

:::Nice one with the trackers. The link was an address by the way for the 1.6. But I went through all the menu items I edited his w/e and I can't see it. So I'm not sure where it was now. Will have to go on a hunt!
:::Cheers! --[[User:Wilsonge|Wilsonge]] ([[User talk:Wilsonge|talk]]) 02:47, 11 February 2013 (CST)

== Module and Template Development ==

Hi, I saw your post on my discussion page regarding the tutorials. It has always been the intention to move these articles out into the global namespace. The primary reason the tutorials currently live in my user namespace is three-fold:

1. I didn't want the code in the articles to diverge from the code in the repository as I have seen happen numerous times in other tutorials. People have a habit of updating tutorial pages and not the source code packages which ultimately create a lot of confusion.
2. I wanted to test them out for a while to rule out bugs. (I consider this phase to be completed)
3. Since the release of 2.5 I have been meaning to find the time to remove a bit of deprecated code to make it fully "2.5" compliant.

As I have not had time to perform the last step yet, they have remained in my user namespace. I also started on a basic module and template tutorial that I have not had the time to finish.

That being said, I would be happy to help maintain the tutorial code for developers as far as my time allows and this may also help me jump-start my own effort in this area. I have previously suggested adding a "joomla-tutorials" project under the "joomla" organization in GitHub but regardless of how this is deployed I think it would be a very healthy approach to the management of tutorial code.

[[User:Rvsjoen|Rvsjoen]] ([[User talk:Rvsjoen|talk]]) 14:31, 11 February 2013 (CST)

:That's great Rvsjoen! I didn't even know you had a MVC tutorial in your user pages. I'm trying to pull together the docs, improve them and get the devs involved again. If we move them, I will mark them as incomplete so they can be checked against code on pages vs. code in zips. Something I agree with, they need to be the same and maintained as such. This is why there is interest in moving it all to GitHub. We should maintain a version specific structure. 2.5 is easy and 1.6 and 1.7 should be dropped. 3.0 is already out, but I would like to see it as 3.x because eventually it will become a LTS version 3.5. Git will also allow to see the progression of code change too. I am still working to pull this all together. Thanks so much for your interest!
::--- [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 16:15, 11 February 2013 (CST)

::The MVC tutorial in my user pages is a complete update/rewrite of the original 1.7 tutorial mostly created by Christophe, it has at some point also been reviewed by several people in the JBS. It is currently 100% up to date with the code in the zip packages as far as I know.

::Also I noticed that a joomla/jdoc-examples repository has been created for this purpose on GitHub. I do not know if these two "projects" are related but if they are I would encourage whoever responsible to put a folder structure in place for storing more than just tutorials. For example something like...

::* Tutorials
::** Component
::** Module
::** Plugin
::*** System plugin
::*** User plugin
::*** Etc..
::** Library
::** Template
::* Extensions
::** Example extension 1
::** Example extension 2
::** Etc...
::* Code snippets
::** Code snippet 1
::** Code snippet 2
::** Etc..

::::--- [[User:Rvsjoen|Rvsjoen]] ([[User talk:Rvsjoen|talk]]) 06:44, 12 February 2013 (CST)

User talk:Tom Hutchison

2013-02-11T20:31:45Z

Rvsjoen:

Chunks:Developing an MVC Component Contents

2012-07-11T16:07:23Z

Rvsjoen:

This tutorial is supported by the following versions of Joomla!

{{JVer|2.5}}

* [[User:Rvsjoen/tutorial/Developing_an_MVC_Component|Introduction]]
* [[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part 01|Part 01 - Developing a Basic Component]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 02|Part 02 - Adding a view to the frontend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 03|Part 03 - Adding a menu item type to the frontend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 04|Part 04 - Adding a model to the frontend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 05|Part 05 - Adding options to menu items]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 06|Part 06 - Using a database]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 07|Part 07 - Basic backend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 08|Part 08 - Adding language translation]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 09|Part 09 - Adding actions to backend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 10|Part 10 - Adding decorations to the backend]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 11|Part 11 - Adding validation]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 12|Part 12 - Adding categories]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 13|Part 13 - Adding component options]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 14|Part 14 - Adding ACL]]
* [[User:Rvsjoen/tutorial/Developing an MVC Component/Part 15|Part 15 - Adding a script file]]

User:Rvsjoen/tutorial/Developing an MVC Component/Part 16

2012-06-27T11:50:46Z

Rvsjoen: /* Installation manifest */

= Using AJAX in the frontend =

So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Some would consider it black magic, but in reality it isn't that hard. The first thing we need to do is to load our favorite JavaScript framework, as Mootools comes shipped with the Joomla! core this is what we will use.

With your favorite editor, update the following file

<span id="site/views/helloworld/view.html.php">
'''<tt>site/views/helloworld/view.html.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Component
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class HelloWorldViewHelloWorld extends JView
{
public function display($tpl = null)
{
// Assign data to the view
$this->item = $this->get('item');

// Prepare the document
$this->prepareDocument();

// Display the view
parent::display($tpl);
}

protected function prepareDocument()
{
JHtml::_('behavior.framework');
$doc = JFactory::getDocument();
$doc->addScript(JURI::base(true).'/media/com_helloworld/js/script.js');
}
}
</source>
</span>

As you can see, we have added a new function '''prepareDocument()''' which is a convenience function used to (yeah you guessed it..) prepare the document for rendering. Here we first load the framework by calling '''JHtml''' and afterwards we add another script file to our component. This script file we are going to create in a second.

With your favorite editor, update the following file

<span id="media/com_helloworld/js/ajax.js">
'''<tt>media/com_helloworld/js/ajax.js</tt>'''
<source lang="javascript">
/**
* @package Joomla.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

window.addEvent('domready', function() {
$('ajax-alert').addEvent('click', function(event) {
// Prevent the page from changing
event.stop();
// Make the ajax call
var req = new Request({
method : 'get',
url : $('ajax-alert').get('href'),
data : {
'do' : '1'
},
onRequest : function() {
alert('Request made. Please wait...');
},
onComplete : function(response) {
alert('Response: ' + response);
}
}).send();
});
});
</source>
</span>

== Installation manifest ==

Now all we have to do is update the version number and we're done. We do not need any other changes to the manifest this time.

<span id="helloworld.xml">
'''<tt>helloworld.xml</tt>'''
<source lang="xml" highlight="13">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

<name>COM_HELLOWORLD</name>

<creationDate>June 2011</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.16</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<scriptfile>script.php</scriptfile>

<install>
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>


<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
<folder>language</folder>
</files>

<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
<folder>js</folder>
</media>

<administration>
<menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
<submenu>
<menu view="helloworlds">COM_HELLOWORLD_SUBMENU_MESSAGES</menu>
<menu link="option=com_categories&view=categories&extension=com_helloworld">COM_HELLOWORLD_SUBMENU_CATEGORIES</menu>
</submenu>

<files folder="admin">
<filename>index.html</filename>
<filename>access.xml</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<filename>config.xml</filename>
<folder>sql</folder>
<folder>tables</folder>
<folder>models</folder>
<folder>views</folder>
<folder>language</folder>
<folder>controllers</folder>
<folder>helpers</folder>
</files>
</administration>

</extension>
</source>
</span>

== Testing your component ==

For details on how to install the component into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#Testing_your_component|Part 01]].

== File listing ==

* <tt>[[#helloworld.xml|helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#script.php|script.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/helloworld.php|site/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/controller.php|site/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/index.html]]</tt>
* <tt>[[#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/models/helloworld.php|site/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_08#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helloworld.php|admin/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/controller.php|admin/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/config.xml|admin/config.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/helpers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helpers/helloworld.php|admin/helpers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/controllers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/models/helloworlds.php|admin/models/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/fields/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/forms/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/rules/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/models/rules/greeting.php|admin/models/rules/greeting.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_head.php|admin/views/helloworlds/tmpl/default_head.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_body.php|admin/views/helloworlds/tmpl/default_body.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_foot.php|admin/views/helloworlds/tmpl/default_foot.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/tables/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/tables/helloworld.php|admin/tables/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/sql/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/language/en-GB/en-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/images/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-16x16.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-48x48.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/js/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#media/js/helloworld.js|media/js/helloworld.js]]</tt>

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/com_helloworld-part16.zip Download example package]

== Articles in this series ==
{{:Chunks:Developing_an_MVC_Component_Contents}}

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

User:Rvsjoen/tutorial/Developing an MVC Component/Part 16

2012-06-27T11:50:18Z

Rvsjoen: /* Using AJAX in the frontend */

= Using AJAX in the frontend =

So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Some would consider it black magic, but in reality it isn't that hard. The first thing we need to do is to load our favorite JavaScript framework, as Mootools comes shipped with the Joomla! core this is what we will use.

With your favorite editor, update the following file

<span id="site/views/helloworld/view.html.php">
'''<tt>site/views/helloworld/view.html.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Component
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class HelloWorldViewHelloWorld extends JView
{
public function display($tpl = null)
{
// Assign data to the view
$this->item = $this->get('item');

// Prepare the document
$this->prepareDocument();

// Display the view
parent::display($tpl);
}

protected function prepareDocument()
{
JHtml::_('behavior.framework');
$doc = JFactory::getDocument();
$doc->addScript(JURI::base(true).'/media/com_helloworld/js/script.js');
}
}
</source>
</span>

As you can see, we have added a new function '''prepareDocument()''' which is a convenience function used to (yeah you guessed it..) prepare the document for rendering. Here we first load the framework by calling '''JHtml''' and afterwards we add another script file to our component. This script file we are going to create in a second.

With your favorite editor, update the following file

<span id="media/com_helloworld/js/ajax.js">
'''<tt>media/com_helloworld/js/ajax.js</tt>'''
<source lang="javascript">
/**
* @package Joomla.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

window.addEvent('domready', function() {
$('ajax-alert').addEvent('click', function(event) {
// Prevent the page from changing
event.stop();
// Make the ajax call
var req = new Request({
method : 'get',
url : $('ajax-alert').get('href'),
data : {
'do' : '1'
},
onRequest : function() {
alert('Request made. Please wait...');
},
onComplete : function(response) {
alert('Response: ' + response);
}
}).send();
});
});
</source>
</span>

== Installation manifest ==

Now all we have to do is update the version number and we're done. We do not need any other changes to the manifest this time.

<span id="helloworld.xml">
'''<tt>helloworld.xml</tt>'''
<source lang="xml" highlight="17">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

<name>COM_HELLOWORLD</name>

<creationDate>June 2011</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.16</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<scriptfile>script.php</scriptfile>

<install>
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>


<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
<folder>language</folder>
</files>

<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
<folder>js</folder>
</media>

<administration>
<menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
<submenu>
<menu view="helloworlds">COM_HELLOWORLD_SUBMENU_MESSAGES</menu>
<menu link="option=com_categories&view=categories&extension=com_helloworld">COM_HELLOWORLD_SUBMENU_CATEGORIES</menu>
</submenu>

<files folder="admin">
<filename>index.html</filename>
<filename>access.xml</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<filename>config.xml</filename>
<folder>sql</folder>
<folder>tables</folder>
<folder>models</folder>
<folder>views</folder>
<folder>language</folder>
<folder>controllers</folder>
<folder>helpers</folder>
</files>
</administration>

</extension>
</source>
</span>

== Testing your component ==

For details on how to install the component into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#Testing_your_component|Part 01]].

== File listing ==

* <tt>[[#helloworld.xml|helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#script.php|script.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/helloworld.php|site/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/controller.php|site/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/index.html]]</tt>
* <tt>[[#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/models/helloworld.php|site/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_08#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helloworld.php|admin/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/controller.php|admin/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/config.xml|admin/config.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/helpers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helpers/helloworld.php|admin/helpers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/controllers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/models/helloworlds.php|admin/models/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/fields/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/forms/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/rules/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/models/rules/greeting.php|admin/models/rules/greeting.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_head.php|admin/views/helloworlds/tmpl/default_head.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_body.php|admin/views/helloworlds/tmpl/default_body.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_foot.php|admin/views/helloworlds/tmpl/default_foot.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/tables/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/tables/helloworld.php|admin/tables/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/sql/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/language/en-GB/en-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/images/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-16x16.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-48x48.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/js/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#media/js/helloworld.js|media/js/helloworld.js]]</tt>

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/com_helloworld-part16.zip Download example package]

== Articles in this series ==
{{:Chunks:Developing_an_MVC_Component_Contents}}

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

User:Rvsjoen/tutorial/Developing an MVC Component/Part 16

2012-06-27T11:50:00Z

Rvsjoen: Created page with "= Using AJAX in the frontend = So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Som..."

= Using AJAX in the frontend =

So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Some would consider it black magic, but in reality it isn't that hard. The first thing we need to do is to load our favorite JavaScript framework, as Mootools comes shipped with the Joomla! core this is what we will use.

With your favorite editor, update the following file

<span id="site/views/helloworld/view.html.php">
'''<tt>site/views/helloworld/view.html.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Component
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class HelloWorldViewHelloWorld extends JView
{
public function display($tpl = null)
{
// Assign data to the view
$this->item = $this->get('item');

// Prepare the document
$this->prepareDocument();

// Display the view
parent::display($tpl);
}

protected function prepareDocument()
{
JHtml::_('behavior.framework');
$doc = JFactory::getDocument();
$doc->addScript(JURI::base(true).'/media/com_helloworld/js/script.js');
}
}
</source>
</span>

As you can see, we have added a new function '''prepareDocument()''' which is a convenience function used to (yeah you guessed it..) prepare the document for rendering. Here we first load the framework by calling '''JHtml''' and afterwards we add another script file to our component. This script file we are going to create in a second.

With your favorite editor, update the following file

<span id="media/com_helloworld/js/ajax.js">
'''<tt>media/com_helloworld/js/ajax.js</tt>'''
<source lang="js">
/**
* @package Joomla.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

window.addEvent('domready', function() {
$('ajax-alert').addEvent('click', function(event) {
// Prevent the page from changing
event.stop();
// Make the ajax call
var req = new Request({
method : 'get',
url : $('ajax-alert').get('href'),
data : {
'do' : '1'
},
onRequest : function() {
alert('Request made. Please wait...');
},
onComplete : function(response) {
alert('Response: ' + response);
}
}).send();
});
});
</source>
</span>

== Installation manifest ==

Now all we have to do is update the version number and we're done. We do not need any other changes to the manifest this time.

<span id="helloworld.xml">
'''<tt>helloworld.xml</tt>'''
<source lang="xml" highlight="17">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

<name>COM_HELLOWORLD</name>

<creationDate>June 2011</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.16</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<scriptfile>script.php</scriptfile>

<install>
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>


<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
<folder>language</folder>
</files>

<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
<folder>js</folder>
</media>

<administration>
<menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
<submenu>
<menu view="helloworlds">COM_HELLOWORLD_SUBMENU_MESSAGES</menu>
<menu link="option=com_categories&view=categories&extension=com_helloworld">COM_HELLOWORLD_SUBMENU_CATEGORIES</menu>
</submenu>

<files folder="admin">
<filename>index.html</filename>
<filename>access.xml</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<filename>config.xml</filename>
<folder>sql</folder>
<folder>tables</folder>
<folder>models</folder>
<folder>views</folder>
<folder>language</folder>
<folder>controllers</folder>
<folder>helpers</folder>
</files>
</administration>

</extension>
</source>
</span>

== Testing your component ==

For details on how to install the component into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#Testing_your_component|Part 01]].

== File listing ==

* <tt>[[#helloworld.xml|helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#script.php|script.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/helloworld.php|site/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02#site/controller.php|site/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/index.html]]</tt>
* <tt>[[#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#site/models/helloworld.php|site/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_08#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helloworld.php|admin/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/controller.php|admin/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/config.xml|admin/config.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/helpers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/helpers/helloworld.php|admin/helpers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/controllers/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/models/helloworlds.php|admin/models/helloworlds.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/fields/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_12#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/forms/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/models/rules/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/models/rules/greeting.php|admin/models/rules/greeting.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/models/helloworld.php|admin/models/helloworld.php]]
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/views/helloworlds/tmpl/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_09#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_head.php|admin/views/helloworlds/tmpl/default_head.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_body.php|admin/views/helloworlds/tmpl/default_body.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_07#admin/views/helloworlds/tmpl/default_foot.php|admin/views/helloworlds/tmpl/default_foot.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/tables/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/tables/helloworld.php|admin/tables/helloworld.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/sql/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_06#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/language/en-GB/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_13#admin/language/en-GB/en-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_15#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/images/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-16x16.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_10#media/images/tux-16x16.png|media/images/tux-48x48.png]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|media/js/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_11#media/js/helloworld.js|media/js/helloworld.js]]</tt>

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/com_helloworld-part16.zip Download example package]

== Articles in this series ==
{{:Chunks:Developing_an_MVC_Component_Contents}}

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

User:Rvsjoen/tutorial/Developing an MVC Component/Part 02

2012-05-13T15:06:58Z

Rvsjoen: /* Creating a view */

= Adding a view to the frontend =

In order to create a basic view for the frontend, we first need to have some logic in our previously created entry point <tt>site/helloworld.php</tt> that decides how to handle requests which are passed to the component. We will manage this by having the entry point load up a controller and execute it, so the first order of business is telling the entry point what to do, and then creating a controller.

== Creating a controller ==
In the core code of Joomla, the class that implements a controller is named ''JController''. In order to save ourselves a lot of work, and prevent having to reinvent the wheel, this class can be extended to be used in our component.

With your favorite editor, create the following file

<span id="site/helloworld.php">
'''<tt>site/helloworld.php</tt>'''
<source lang="php">
<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

// Get an instance of the controller prefixed by HelloWorld
$controller = JController::getInstance('HelloWorld');

// Perform the Request task
$controller->execute(JRequest::getCmd('task'));

// Redirect if set by the controller
$controller->redirect();
?>

</source>
</span>

The static ''getInstance'' method of the ''JController'' class will create a controller. In the code above, it will create a controller named ''HelloWorldController'' using the <tt>controller.php</tt> file in the same location as the entry point. This means that we have to create this controller so that it has something to load. The call to ''redirect()'' on the controller instance will check if the task executed at some point set an url to redirect to after finishing execution, and if so, redirect to this url. This is useful for redirecting to a different view after executing a task.

With your favorite editor, create the following file

<span id="site/controller.php">
'''<tt>site/controller.php</tt>'''
<source lang="php">
<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

class HelloWorldController extends JController
{

}
?>

</source>
</span>

Yes really, that is it. We do not have to provide any code in our controller except for this. This is because the default behavior of JController is to call the '''display''' task if no other task is given, and the '''display''' task will look for the name of the view to load in the '''view''' request variable. If no view name is given, it will load the view with the same name as the component, namely '''helloworld'''.

== Creating a view ==

Now that we have a controller that will load and display our views, we need to give it a view to display.

With your favorite editor, create the following file

<span id="site/views/helloworld/view.html.php">
'''<tt>site/views/helloworld/view.html.php</tt>'''
<source lang="php" line>
<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class HelloWorldViewHelloWorld extends JView
{
function display($tpl = null)
{
// Assign data to the view
$this->item = 'Hello World';

// Display the view
parent::display($tpl);
}
}
?>

</source>
</span>

First of all, pay close attention to the naming of the class since that may be slightly confusing at first. The class is named '''HelloWorldViewHelloWorld''' and the reason '''HelloWorld''' appears twice is because it just happens to be the name of both our component and our view. A slightly better example would be for example '''FooViewBar''' where '''Foo''' would be the name of the component (like '''com_foo''') and '''Bar''' would be the name of the view.

Now, the most important two bits of this file are line 12, in which we assign a string to the member variable '''item''', this variable will then be available in the view template (which we will create in a minute). On line 15 there is a call to the <code>parent::display()</code> function, now this is in fact where a lot of the logic happens as that is the <code>display()</code> function of '''JView''', we will not go into detail on this except to tell you that it is responsible for loading up and displaying the view template.

The view templates are stored in the <tt>tmpl</tt> folder inside each view, so let us go ahead and create a view template for our view (View templates are also called layouts).

With your favorite editor, create the following file

<span id="site/views/helloworld/tmpl/default.php">
'''<tt>site/views/helloworld/tmpl/default.php</tt>'''
<source lang="php">
<?php
// No direct access to this file
defined('_JEXEC') or die;

?>

<h1><?php echo $this->item; ?></h1>

</source>

== Installation manifest ==

In our manifest, as you can see, we have added the newly created files and folders in the site files section on line 23 and 24. We have also updated the component version number.

<span id="helloworld.xml">
'''<tt>helloworld.xml</tt>'''
<source lang="xml" line>
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

<name>Hello World!</name>

<creationDate>June 2011</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.2</version>

<description>Description of the Hello World component ...</description>


<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
</files>

<administration>
<menu>Hello World!</menu>

<files folder="admin">
<filename>index.html</filename>
<filename>helloworld.php</filename>
</files>
</administration>

</extension>
</source>
</span>

== Testing your component ==

For details on how to install the component into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#Testing_your_component|Part 01]].

In order to test this component, open up '''index.php?option=com_helloworld''' in your browser, and see that the text displayed will be the same text that you assigned to <code>$this->item</code> in your view.

== File listing ==

* <tt>[[#helloworld.xml|helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/index.html]]</tt>
* <tt>[[#site/helloworld.php|site/helloworld.php]]</tt>
* <tt>[[#site/controller.php|site/controller.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/index.html]]</tt>
* <tt>[[#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|site/views/helloworld/tmpl/index.html]]</tt>
* <tt>[[#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#index.html|admin/index.html]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_01#admin/helloworld.php|admin/helloworld.php]]</tt>

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/com_helloworld-part02.zip Download example package]

== Articles in this series ==
{{:Chunks:Developing_an_MVC_Component_Contents}}

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

User:Rvsjoen/tutorial/Developing a Template/Part 05

2012-04-16T11:48:53Z

Rvsjoen: /* Adding parameters */

= Adding parameters =

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
<config>
<fields name="param">
<fieldset name="advanced">
<field
name="backgroundcolor"
type="text"
default=""
label="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_LABEL"
description="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_DESC" />
<field name="templatewidth" type="list"
label="TPL_HELLOWORLD_FIELD_WIDTH_LABEL"
description="TPL_HELLOWORLD_FIELD_WIDTH_LABEL" >
<option value="fixed">TPL_HELLOWORLD_WIDTH_FIXED</option>
<option value="fluid">TPL_HELLOWORLD_WIDTH_FLUID</option>
</field>
</fieldset>
</config>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_04#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 05

2012-04-16T11:47:05Z

Rvsjoen: /* Adding parameters */

= Adding parameters =

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
<config>
<fields name="param">
<fieldset name="advanced">
<field
name="backgroundcolor"
type="text"
default=""
label="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_LABEL"
description="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_DESC" />
<field name="templatewidth" type="list"
label="TPL_HELLOWORLD_FIELD_WIDTH_LABEL"
description="TPL_HELLOWORLD_FIELD_WIDTH_LABEL" >
<option value="fixed">TPL_HELLOWORLD_WIDTH_FIXED</option>
<option value="fluid">TPL_HELLOWORLD_WIDTH_FLUID</option>
</field>
</fieldset>
</config>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_04#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 05

2012-04-16T11:43:57Z

Rvsjoen: /* Adding parameters */

= Adding parameters =

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
<config>
<fields name="param">
<fieldset name="advanced">
<field
name="backgroundcolor"
type="text"
default=""
label="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_LABEL"
description="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_DESC" />
</fieldset>
</config>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_04#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 05

2012-04-16T11:25:27Z

Rvsjoen: Created page with "= Adding parameters = With your favorite editor, edit the following file <span id="templateDetails.xml"> '''<tt>templateDetails.xml</tt>''' <source lang="xml"> <?xml version="1..."

= Adding parameters =

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_04#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:24:00Z

Rvsjoen: /* Part 03 - Adding module positions */

= Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="clr"></div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer.

With your favorite editor, edit the following file
<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}

div#container {
margin: 0 auto;
background: red;
width: 960px;
}

div#header {
background: green;
height: 160px;
}

div#footer{
background: blue;
height: 80px;
}

div#main{
background: yellow;
min-height: 320px;
width: 800px;
float: left;
}

div#left{
background: orange;
width: 160px;
float: left;
}

.clr {
clear: both;
}

</source>
</span>

The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T11:23:54Z

Rvsjoen: /* Part 02 - Adding a stylesheet */

= Adding a stylesheet =

Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup. Let's start with a really simple stylesheet, doing nothing except setting the background color of the whole document.

With your favorite editor, create the following file

<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}
</source>
</span>

Now that we have created our basic stylesheet we also need to tell the template to load it, we accomplish this by adding a style tag to the document header.

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php" highlight="18">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

In the style tag we are using some variables, these are automatically provided by Joomla! for convenience and can be used to refer to the base url and the template name respectively.

The last step in adding this stylesheet to our template is to make sure that it is copied into the correct location when the template is installed. Since the stylesheet lives in the '''css''' folder of our template all we have to do is specify a <code><folder</code> tag with the '''css''' folder.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="15">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 04

2012-04-16T11:23:41Z

Rvsjoen: /* Part 04 - Adding translation */

= Adding translation =

So, we would like our template to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different set of language files.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

As you can see, language strings are namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with '''TPL_HELLOWORLD''' to indicate that they belong to our template.

In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.sys.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.sys.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="16">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 04

2012-04-16T11:23:03Z

Rvsjoen: /* File listing */

= Part 04 - Adding translation =

So, we would like our template to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different set of language files.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

As you can see, language strings are namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with '''TPL_HELLOWORLD''' to indicate that they belong to our template.

In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.sys.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.sys.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="16">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.ini|language/en-GB/en-GB.tpl_helloworld.ini]]</tt>
* <tt>[[#language/en-GB/en-GB.tpl_helloworld.sys.ini|language/en-GB/en-GB.tpl_helloworld.sys.ini]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 04

2012-04-16T11:22:00Z

Rvsjoen: Created page with "= Part 04 - Adding translation = So, we would like our template to support translation, which essentially means that instead of hard-coding strings, we would like the strings to..."

= Part 04 - Adding translation =

So, we would like our template to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different set of language files.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

As you can see, language strings are namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with '''TPL_HELLOWORLD''' to indicate that they belong to our template.

In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.

With your favorite editor, create the following file

<span id="language/en-GB/en-GB.tpl_helloworld.sys.ini">
'''<tt>language/en-GB/en-GB.tpl_helloworld.sys.ini</tt>'''
<source lang="ini">
TPL_HELLOWORLD="Hello World!"
TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="16">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>TPL_HELLOWORLD</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>TPL_HELLOWORLD_XML_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>language</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_03#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:15:10Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="clr"></div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer.

With your favorite editor, edit the following file
<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}

div#container {
margin: 0 auto;
background: red;
width: 960px;
}

div#header {
background: green;
height: 160px;
}

div#footer{
background: blue;
height: 80px;
}

div#main{
background: yellow;
min-height: 320px;
width: 800px;
float: left;
}

div#left{
background: orange;
width: 160px;
float: left;
}

.clr {
clear: both;
}

</source>
</span>

The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:14:46Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer.

With your favorite editor, edit the following file
<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}

div#container {
margin: 0 auto;
background: red;
width: 960px;
}

div#header {
background: green;
height: 160px;
}

div#footer{
background: blue;
height: 80px;
}

div#main{
background: yellow;
min-height: 320px;
width: 800px;
float: left;
}

div#left{
background: orange;
width: 160px;
float: left;
}

.clr {
clear: both;
}

</source>
</span>

The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:12:27Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer.

With your favorite editor, edit the following file
<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}

div#container {
margin: 0 auto;
background: red;
width: 960px;
}

div#header {
background: green;
height: 160px;
}

div#footer{
background: blue;
height: 80px;
}

div#main{
background: yellow;
min-height: 320px;
margin-left: 160px;
}

div#left{
background: orange;
width: 160px;
float: left;
}
</source>
</span>

The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:05:40Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

With your favorite editor, edit the following file
<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:04:37Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="xml">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_02#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:03:50Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="html">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_02#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:03:38Z

Rvsjoen: /* Part 03 - Adding module positions */

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" />
</div>
<div id="main">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>
</html>
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_02#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 03

2012-04-16T11:00:54Z

Rvsjoen: Created page with "= Part 03 - Adding module positions = With your favorite editor, edit the following file <span id="index.php"> '''<tt>index.php</tt>''' <source lang="php"> <?php /** * @pac..."

= Part 03 - Adding module positions =

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>footer</position>
<position>left</position>
</positions>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Template/Part_02#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template

2012-04-16T10:58:00Z

Rvsjoen: /* Introduction */

== Introduction ==
A software framework contains a set of application development tools for developers. Joomla! has been designed for extensibility. The scope of this tutorial will be to develop a simple front-end template using the conventions and coding standards employed by Joomla!.

The parts covered in this tutorial assume the reader has previous knowledge regarding basic HTML, CSS and PHP. Should that not be the case it is recommended to acquire this before proceeding.

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T10:56:10Z

Rvsjoen: /* File listing */

= Part 02 - Adding a stylesheet =

Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup. Let's start with a really simple stylesheet, doing nothing except setting the background color of the whole document.

With your favorite editor, create the following file

<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}
</source>
</span>

Now that we have created our basic stylesheet we also need to tell the template to load it, we accomplish this by adding a style tag to the document header.

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php" highlight="18">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

In the style tag we are using some variables, these are automatically provided by Joomla! for convenience and can be used to refer to the base url and the template name respectively.

The last step in adding this stylesheet to our template is to make sure that it is copied into the correct location when the template is installed. Since the stylesheet lives in the '''css''' folder of our template all we have to do is specify a <code><folder</code> tag with the '''css''' folder.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="15">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>
* <tt>[[#css/styles.css|css/styles.css]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

Chunks:Developing a Template Contents

2012-04-16T10:55:23Z

Rvsjoen: /* Articles in this series */

== Articles in this series ==

This tutorial is supported by the following versions of Joomla!

{{JVer|2.5}}

* [[User:Rvsjoen/tutorial/Developing_a_Template|Introduction]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 01|Part 01 - Developing a Basic Template]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 02|Part 02 - Adding a stylesheet]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 03|Part 03 - Adding module positions]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 04|Part 04 - Translation]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 05|Part 05 - Adding Parameters]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 06|Part 06 - Using overrides]]

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 2.5]]

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T10:53:46Z

Rvsjoen: /* Part 02 - Adding a stylesheet */

= Part 02 - Adding a stylesheet =

Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup. Let's start with a really simple stylesheet, doing nothing except setting the background color of the whole document.

With your favorite editor, create the following file

<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}
</source>
</span>

Now that we have created our basic stylesheet we also need to tell the template to load it, we accomplish this by adding a style tag to the document header.

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php" highlight="18">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

In the style tag we are using some variables, these are automatically provided by Joomla! for convenience and can be used to refer to the base url and the template name respectively.

The last step in adding this stylesheet to our template is to make sure that it is copied into the correct location when the template is installed. Since the stylesheet lives in the '''css''' folder of our template all we have to do is specify a <code><folder</code> tag with the '''css''' folder.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="15">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T10:53:28Z

Rvsjoen: /* Part 02 - Adding styles and scripts */

= Part 02 - Adding a stylesheet =

Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup.

Let's start with a really simple stylesheet, doing nothing except setting the background color of the whole document.

With your favorite editor, create the following file

<span id="css/styles.css">
'''<tt>css/styles.css</tt>'''
<source lang="css">
html, body {
background: #ccc;
}
</source>
</span>

Now that we have created our basic stylesheet we also need to tell the template to load it, we accomplish this by adding a style tag to the document header.

With your favorite editor, edit the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php" highlight="18">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

In the style tag we are using some variables, these are automatically provided by Joomla! for convenience and can be used to refer to the base url and the template name respectively.

The last step in adding this stylesheet to our template is to make sure that it is copied into the correct location when the template is installed. Since the stylesheet lives in the '''css''' folder of our template all we have to do is specify a <code><folder</code> tag with the '''css''' folder.

With your favorite editor, edit the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml" highlight="15">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
</extension>
</source>
</span>

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T10:26:53Z

Rvsjoen:

= Part 02 - Adding styles and scripts =

Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Testing your template ==

For details on how to install the template into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Template/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

Chunks:Developing a Template Contents

2012-04-16T10:26:21Z

Rvsjoen: /* Articles in this series */

== Articles in this series ==

This tutorial is supported by the following versions of Joomla!

{{JVer|2.5}}

* [[User:Rvsjoen/tutorial/Developing_a_Template|Introduction]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 01|Part 01 - Developing a Basic Template]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 02|Part 02 - Adding styles and scripts]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 03|Part 03 - Adding module positions]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 04|Part 04 - Translation]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 05|Part 05 - Adding Parameters]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 06|Part 06 - Using overrides]]

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 2.5]]

User:Rvsjoen/tutorial/Developing a Template/Part 02

2012-04-16T10:23:50Z

Rvsjoen: Created page with "= Part 02 - Adding styles and scripts = Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is j..."

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:19:08Z

Rvsjoen:

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak, this file is responsible for rendering a properly structured HTML document. This file will exists in all templates.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things

* We have declared the document type to be <code><!DOCTYPE html></code> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
* We have included a head in the html document
* We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <code><head></code> element. We also told Joomla! that we want system messages to appear in the top of the <code><body></code> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new template you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

{{:Chunks:Developing_a_Template_Contents}}

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:17:33Z

Rvsjoen: /* Installation and Testing */

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:17:08Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak, this file is responsible for rendering a properly structured HTML document. This file will exists in all templates.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things

* We have declared the document type to be <code><!DOCTYPE html></code> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
* We have included a head in the html document
* We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <code><head></code> element. We also told Joomla! that we want system messages to appear in the top of the <code><body></code> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:16:10Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things

* We have declared the document type to be <code><!DOCTYPE html></code> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
* We have included a head in the html document
* We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <code><head></code> element. We also told Joomla! that we want system messages to appear in the top of the <code><body></code> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:02:52Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things

* We have declared the XML version
* We have declared the document type to be <code><!DOCTYPE html></code> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
* We have included a head in the html document
* We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <code><head></code> element. We also told Joomla! that we want system messages to appear in the top of the <code><body></code> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T10:01:06Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things

* We have declared the XML version
* We have declared the document type to be '''html''' which means that we are creating a html5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
* We have included a head in the html document
* We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the '''head''' element. We also told Joomla! that we want system messages to appear in the top of the '''body''' element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T09:54:41Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
</source>
</span>

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T09:53:01Z

Rvsjoen: /* Creating the index file */

= Developing a Basic Template =

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

* A template manifest
* A template index file

== Creating the index file ==

This is where it all starts, the "root" of your template so to speak.

With your favorite editor, create the following file

<span id="index.php">
'''<tt>index.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head></head>
<body></body>
</html>
</source>
</span>

== Creating the manifest ==

With your favorite editor, create the following file

<span id="templateDetails.xml">
'''<tt>templateDetails.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>helloworld</name>
<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>0.0.1</version>
<description>Description of the Hello World! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>
</source>
</span>

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your template===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''templates/helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your template ===

If you want to test this template, you first need to do a couple of things.

# Go to the Template Manager
# Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

== File listing ==

* <tt>[[#templateDetails.xml|templateDetails.xml]]</tt>
* <tt>[[#index.php|index.php]]</tt>

== Download this part ==

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T09:50:24Z

Rvsjoen: /* Creating the manifest */

User:Rvsjoen/tutorial/Developing a Template/Part 01

2012-04-16T09:39:44Z

Rvsjoen: Created page with "= Developing a Basic Template = Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we..."

User:Rvsjoen/tutorial/Developing a Module/Part 01

2012-04-16T09:39:20Z

Rvsjoen: /* Developing a Basic Module */

= Developing a Basic Module =

Let's create a ''Hello World!'' module. All file name and path references in this tutorial are relative to the directory you are developing your extension in. In order to create a very basic module, all that is really needed is two files. A module file and an XML manifest. This module will do nothing more than to spit out the words "Hello World!" into the position in which it is published.

With your favorite editor, create the following file

<span id="mod_helloworld.php">
'''<tt>mod_helloworld.php</tt>'''
<source lang="php">
Hello World!
</source>
</span>

With your favorite editor, create the following file

<span id="mod_helloworld.xml">
'''<tt>mod_helloworld.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" method="upgrade">

<name>Hello World!</name>

<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.1</version>

<description>Description of the Hello World module ...</description>


<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>mod_helloworld.xml</filename>
</files>

</extension>
</source>
</span>

As we can see, there is a lot of markup here. This is pretty much a minimal extension manifest and we will try to explain the most important bits and pieces. The important thing to note here is the '''module="mod_helloworld"''' attribute which specifies which file is considered the entry point for the module. In theory this can be any file you want but to follow proper naming conventions we name this file '''mod_helloworld.php'''.

== Installation and Testing ==

Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

=== Installing your module ===
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in '''modules/mod_helloworld''' within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

=== Packaging an installation zip file ===

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

=== Testing your module ===

If you want to test this module, you first need to do a couple of things.

# Go to the Module Manager and edit the module
# Assign the module to a module position
# Make sure the module is published
# Make sure the module is assigned to show on some pages in the module assignment dialog

After performing these steps and saving the module you can navigate to the frontend and view the module.

== File listing ==

* <tt>[[#mod_helloworld.xml|mod_helloworld.xml]]</tt>
* <tt>[[#mod_helloworld.php|mod_helloworld.php]]</tt>

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/mod_helloworld-part01.zip Download example package]

{{:Chunks:Developing_a_Module_Contents}}

Chunks:Developing a Template Contents

2012-04-16T09:26:13Z

Rvsjoen: Created page with "== Articles in this series == This tutorial is supported by the following versions of Joomla! {{JVer|2.5}} * Introduction * [[..."

== Articles in this series ==

This tutorial is supported by the following versions of Joomla!

{{JVer|2.5}}

* [[User:Rvsjoen/tutorial/Developing_a_Template|Introduction]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 01|Part 01 - Developing a Basic Template]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 02|Part 02 - Adding styles and scripts]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 03|Part 03 - Parameters]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 04|Part 04 - Translation]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 05|Part 05 - Template overrides]]
* [[User:Rvsjoen/tutorial/Developing_a_Template/Part 06|Part 06 - The component template]]

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Joomla! 2.5]]

User:Rvsjoen/tutorial/Developing a Template

2012-04-16T09:20:00Z

Rvsjoen: Created page with "== Introduction == A software framework contains a set of application development tools for developers. Joomla! has been designed for extensibility. The scope of this tutorial wi..."

User:Rvsjoen/tutorial/Developing a Module/Part 06

2012-03-13T22:47:38Z

Rvsjoen: /* Testing your component */

= Accessing the database =

This part is meant to provide you with a short example on how to access the database and run a query from a module. This is no different than running a query anywhere else in Joomla! but since modules are often the first place you start to learn to write extensions, this tutorial seems like a natural place to cover it.

With your favorite editor, edit the following file

<span id="helper.php">
'''<tt>helper.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

class modHelloWorldHelper
{
public static function getGreeting() {
return "Message from the helper";
}

public static function getCurrentUsers() {
$db = JFactory::getDBO();
$db->setQuery($db->getQuery(true)
->select("COUNT(*) as users")
->from("#__session")
);
return $db->loadResult();
}
}
</source>
</span>

Here we add a function to our helper class, the function will simply return the number of currently active sessions by counting the number of rows in the session table.

With your favorite editor, edit the following file

<span id="tmpl/default.php">
'''<tt>tmpl/default.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;
?>

<p><?php echo $params->get('greeting', JText::_('MOD_HELLOWORLD_GREETING_DEFAULT')); ?></p>
<p><?php echo modHelloWorldHelper::getGreeting(); ?></p>
<p>There are <?php echo modHelloWorldHelper::getCurrentUsers(); ?> user(s) logged in</p>
</source>
</span>

Here we modify the module template to echo out the number of currently active users, as provided by our helper.

With your favorite editor, edit the following file

<span id="mod_helloworld.xml">
'''<tt>mod_helloworld.xml</tt>'''
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" method="upgrade">

<name>MOD_HELLOWORLD</name>

<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.6</version>

<description>MOD_HELLOWORLD_XML_DESCRIPTION</description>


<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>mod_helloworld.xml</filename>
<filename>helper.php</filename>
<folder>tmpl</folder>
<folder>language</folder>
</files>

<config>
<fields name="params">
<fieldset name="basic">
<field
name="greeting"
type="text"
default="MOD_HELLOWORLD_GREETING_DEFAULT"
label="MOD_HELLOWORLD_GREETING_LABEL"
description="MOD_HELLOWORLD_GREETING_DESC"
/>
</fieldset>
</fields>
</config>

</extension>
</source>
</span>

== File listing ==

* <tt>[[#mod_helloworld.xml|mod_helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_05#mod_helloworld.php|mod_helloworld.php]]</tt>
* <tt>[[#tmpl/default.php|tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_04#language/en-GB.mod_helloworld.ini|language/en-GB.mod_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_04#language/en-GB.mod_helloworld.sys.ini|language/en-GB.mod_helloworld.sys.ini]]</tt>
* <tt>[[#helper.php|helper.php]]</tt>

== Testing your module ==

For details on how to install the module into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Module/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/mod_helloworld-part06.zip Download example package]

{{:Chunks:Developing_a_Module_Contents}}

User:Rvsjoen/tutorial/Developing a Module/Part 05

2012-03-13T22:47:29Z

Rvsjoen: /* Testing your component */

= Adding a helper =

A helper in the context of a Joomla! extension is usually just a class providing various static helper functions to perform operations. A helper could be used to accomplish a lot of things but common examples are to get a list of items from a database, get the number of currently logged in users, etc... To illustrate how this works, we are going to implement a helper to the module which simple provides the module with yet another string.

With your favorite editor, create the following file

<span id="helper.php">
'''<tt>helper.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

class modHelloWorldHelper
{
public static function getGreeting() {
return "Message from the helper";
}
}
</source>
</span>

As you can see, this is nothing more than a class with a static function in it. The class will need to be loaded in the module entry point.

With your favorite editor, edit the following file

<span id="mod_helloworld.php">
'''<tt>mod_helloworld.php</tt>'''
<source lang="php" highlight="13">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;

JLoader::register('modHelloWorldHelper', JPATH_BASE.'/modules/mod_helloworld/helper.php');

require JModuleHelper::getLayoutPath('mod_helloworld', $params->get('layout', 'default'));
</source>
</span>

The highlighted line takes care of loading the class. We could have used the '''require()''' function call to do this, but JLoader offers additional advantages such as lazy loading (The class is not actually loaded unless it is needed). The first argument is the name of the class, and the second argument is the path to the file. '''JPATH_BASE''' is a macro which always points to the root of the Joomla! application, in this case the frontend.

<span id="tmpl/default.php">
'''<tt>tmpl/default.php</tt>'''
<source lang="php" highlight="15">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;
?>

<p><?php echo $params->get('greeting', JText::_('MOD_HELLOWORLD_GREETING_DEFAULT')); ?></p>
<p><?php echo modHelloWorldHelper::getGreeting(); ?></p>
</source>
</span>

Here we modify the module template to call the helper function '''getGreeting()''' in our helper class and render the string it returns in a new paragraph in addition to the original greeting.

With your favorite editor, edit the following file

<span id="mod_helloworld.xml">
'''<tt>mod_helloworld.xml</tt>'''
<source lang="xml" highlight="22">
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" method="upgrade">

<name>MOD_HELLOWORLD</name>

<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.5</version>

<description>MOD_HELLOWORLD_XML_DESCRIPTION</description>


<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>mod_helloworld.xml</filename>
<filename>helper.php</filename>
<folder>tmpl</folder>
<folder>language</folder>
</files>

<config>
<fields name="params">
<fieldset name="basic">
<field
name="greeting"
type="text"
default="MOD_HELLOWORLD_GREETING_DEFAULT"
label="MOD_HELLOWORLD_GREETING_LABEL"
description="MOD_HELLOWORLD_GREETING_DESC"
/>
</fieldset>
</fields>
</config>

</extension>
</source>
</span>

Here we simply add '''helper.php''' to the list of files to be copied when the extension is installed.

== File listing ==

* <tt>[[#mod_helloworld.xml|mod_helloworld.xml]]</tt>
* <tt>[[#mod_helloworld.php|mod_helloworld.php]]</tt>
* <tt>[[#tmpl/default.php|tmpl/default.php]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_04#language/en-GB.mod_helloworld.ini|language/en-GB.mod_helloworld.ini]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_04#language/en-GB.mod_helloworld.sys.ini|language/en-GB.mod_helloworld.sys.ini]]</tt>
* <tt>[[#helper.php|helper.php]]</tt>

== Testing your module ==

For details on how to install the module into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Module/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/mod_helloworld-part05.zip Download example package]

{{:Chunks:Developing_a_Module_Contents}}

User:Rvsjoen/tutorial/Developing a Module/Part 04

2012-03-13T22:47:17Z

Rvsjoen: /* Testing your component */

= Adding translation =

So, we would like our module to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different set of language files.

With your favorite editor, create the following file

<span id="language/en-GB.mod_helloworld.ini">
'''<tt>language/en-GB.mod_helloworld.ini</tt>'''
<source lang="ini">
MOD_HELLOWORLD="Hello World!"
MOD_HELLOWORLD_XML_DESCRIPTION="Hello World! module description"
MOD_HELLOWORLD_GREETING_DEFAULT="I am a module"
MOD_HELLOWORLD_GREETING_LABEL="Greeting"
MOD_HELLOWORLD_GREETING_DESC="The greeting to display"
</source>
</span>

As you can see, language strings are namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with '''MOD_HELLOWORLD''' to indicate that they belong to our module.

In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.

With your favorite editor, create the following file

<span id="language/en-GB.mod_helloworld.sys.ini">
'''<tt>language/en-GB.mod_helloworld.sys.ini</tt>'''
<source lang="ini">
MOD_HELLOWORLD="Hello World!"
MOD_HELLOWORLD_XML_DESCRIPTION="Hello World! module description"
</source>
</span>

With your favorite editor, edit the following file

<span id="tmpl/default.php">
'''<tt>tmpl/default.php</tt>'''
<source lang="php">
<?php

/**
* @package Joomla.Tutorials
* @subpackage Module
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die;
?>

<p><?php echo $params->get('greeting', JText::_('MOD_HELLOWORLD_GREETING_DEFAULT')); ?></p>
</source>
</span>

Here we simply change the default value if no parameter is set to use the string provided in the language file. The function call '''JText::_('LANGUAGE_KEY')''' is used to resolve language strings.

With your favorite editor, edit the following file

<span id="mod_helloworld.xml">
'''<tt>mod_helloworld.xml</tt>'''
<source lang="xml" highlight="23">
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" method="upgrade">

<name>MOD_HELLOWORLD</name>

<creationDate>Once upon a time</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.4</version>

<description>MOD_HELLOWORLD_XML_DESCRIPTION</description>


<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>mod_helloworld.xml</filename>
<folder>tmpl</folder>
<folder>language</folder>
</files>

<config>
<fields name="params">
<fieldset name="basic">
<field
name="greeting"
type="text"
default="MOD_HELLOWORLD_GREETING_DEFAULT"
label="MOD_HELLOWORLD_GREETING_LABEL"
description="MOD_HELLOWORLD_GREETING_DESC"
/>
</fieldset>
</fields>
</config>

</extension>
</source>
</span>

In the XML manifest we have replaced all the strings with language keys which you already added to the language files. This makes it possible to provide different strings for different languages. In addition in the highlighted line we have to remember to tell the installer to copy the language files into the module directory during installation.

== File listing ==

* <tt>[[#mod_helloworld.xml|mod_helloworld.xml]]</tt>
* <tt>[[User:Rvsjoen/tutorial/Developing_a_Module/Part_02#mod_helloworld.php|mod_helloworld.php]]</tt>
* <tt>[[#tmpl/default.php|tmpl/default.php]]</tt>
* <tt>[[#language/en-GB.mod_helloworld.ini|language/en-GB.mod_helloworld.ini]]</tt>
* <tt>[[#language/en-GB.mod_helloworld.sys.ini|language/en-GB.mod_helloworld.sys.ini]]</tt>

== Testing your module ==

For details on how to install the module into your Joomla! site, refer to the information provided in
[[User:Rvsjoen/tutorial/Developing_a_Module/Part_01#Installation_and_Testing|Part 01]].

== Download this part ==

[https://github.com/downloads/rvsjoen/joomla-tutorials/mod_helloworld-part04.zip Download example package]

{{:Chunks:Developing_a_Module_Contents}}