Open Source Training Updates http://www.ostraining.com/ Thu, 29 Jul 2010 15:55:05 GMT FeedCreator 1.8.0-dev (info@mypapit.net) Creating a New Joomla Offline Page http://www.ostraining.com/newsletters/joomla/creating-a-new-joomla-offline-page/ Joomla allows a site to be taken offline with a setting in the Administrator Global Configuration panel.  When this happens, frontend access is no longer permitted and a special offline page is displayed.  By default, the source for this page comes from the core supplied System Template.  However, Joomla allows you to provide your own offline page.  To do this you need to create a file called offline.php in your template folder.  Like {codecitation}index.php{/codecitation}, {codecitation}component.php{/codecitation} and {codecitation}error.php{/codecitation}, this is a fully fledged template file in which you can use PHP and jdoc:include statements. Custom offline pages should ideally conform to a style that compliments the active web site.  Keeping the structural layout similar and including any prominent headers can allow this page to feel less imposing.

Creating a Custom Offline Page

The easiest way to provide your own offline page is to copy the following files:

{codecitation}/templates/system/offline.php{/codecitation} {codecitation}/templates/system/css/offline.css{/codecitation} {codecitation}/templates/system/css/offline_rtl.css{/codecitation}

to:

{codecitation}/templates/your_template/offline.php{/codecitation}
{codecitation}/templates/your_template/css/offline.css
{/codecitation} {codecitation}/templates/your_template/css/offline_rtl.css{/codecitation}

This gives you a working base with which to customise the file.

Creating the Page from Scratch

If you want to start your own offline page from scratch, the minimum you require is the following listing:

{codecitation} <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); // Get the Joomla Application object $app = &JFactory::getApplication(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="language; ?>" lang="language; ?>" dir="direction; ?>"> <head>     <jdoc:include type="head" />     <link rel="stylesheet" href="http://www.ostraining.com/baseurl ?>/templates/system/css/system.css" type="text/css" />     <link rel="stylesheet" href="http://www.ostraining.com/baseurl ?>/templates/template; ?>/css/offline.css" type="text/css" />     <?php if($this->direction == 'rtl') : ?>         <link rel="stylesheet" href="http://www.ostraining.com/baseurl ?>/templates/template; ?>/css/offline_rtl.css" type="text/css" />     <?php endif; ?> </head> <body>     <jdoc:include type="message" />     <h1>         <?php echo $app->getCfg('sitename'); ?>     </h1>     <p>         <?php echo $app->getCfg('offline_message'); ?>     </p>     <form action="index.php" method="post">         <fieldset>             <p>                 <label for="username"><?php echo JText::_('Username') ?></label>                 <br />                 <input name="username" id="username" type="text" class="inputbox" alt="" size="18" />             </p>             <p>                 <label for="passwd"><?php echo JText::_('Password') ?></label>                 <br />                 <input type="password" name="passwd" class="inputbox" size="18" alt="" id="passwd" />             </p>             <input type="submit" name="Submit" class="button" value="" />         </fieldset>         <input type="hidden" name="option" value="com_user" />         <input type="hidden" name="task" value="login" />         <input type="hidden" name="return" value="" />         <?php echo JHTML::_( 'form.token' ); ?>     </form> </body> </html>{/codecitation}

Most of this file should be familar to you now.  The {codecitation}head{/codecitation} includes the System Template {codecitation}system.css{/codecitation} to support any messages that might be generated (such as for a failed login attempt).  Naturally, you can apply any additional HTML code or styling that you require to suite the needs of your own web site.

Accessing Configuration Settings

The body contains some new information that we have not covered in the template chapter yet.  A new variable, {codecitation}$app{/codecitation}, has been introduced.  You will notice that is was defined near the top of the listing with:

{codecitation} // Get the Joomla Application object $app = &JFactory::getApplication();{/codecitation}

{codecitation}JFactory{/codecitation} is a class that is part of the Joomla Framework and it allows us to get an object that contains a lot of information about the Joomla web site that is being loaded.  You might also be familar with a variable called {codecitation}$mainframe{/codecitation}.  This is the same thing but the way it has been shown here is forward compatible with Joomla version 1.6.  The name of the settings for the Site Name and the Offline Message are sitename and offline_message respectively.

The application object has many methods but on of them, {codecitation}getCfg{/codecitation}, allows you to access the settings in the Joomla configuration file (which are also the settings you see in the Administrator Global Configuration page).

{codecitation}     <jdoc:include type="message" />     <h1>         <?php echo $app->getCfg('sitename'); ?>     </h1>     <p>         <?php echo $app->getCfg('offline_message'); ?>     </p>{/codecitation}

We pass those setting names to the {codecitation}getCfg{/codecitation} method and use PHP's echo statement to display them on the page.  You will also notice the {codecitation}jdoc:include{/codecitation} tag to include an system messages.

The Login Form

The default offline page includes a login form that allows an administrator user to log in and test any changes being made while the site is offline.

{codecitation}     <form action="index.php" method="post">         <fieldset>             <p>                 <label for="username"><?php echo JText::_('Username') ?></label>                 <br />                 <input name="username" id="username" type="text" class="inputbox" alt="" size="18" />             </p>             <p>                 <label for="passwd"><?php echo JText::_('Password') ?></label>                 <br />                 <input type="password" name="passwd" class="inputbox" size="18" alt="" id="passwd" />             </p>             <input type="submit" name="Submit" class="button" value="" />         </fieldset>         <input type="hidden" name="option" value="com_user" />         <input type="hidden" name="task" value="login" />         <input type="hidden" name="return" value="" />         <?php echo JHtml::_('form.token'); ?>     </form>{/codecitation}

The form must use the post method and include input fields named username and passwd.  The form is processed by the User Component under the login task, so the hidden fields in the form reflect this.

The hidden input field named return hold a special value that allows you to return to the page you were on.  It's optional to provide this for the offline page.  The only use it would have is if you land on a specific page that is not the home page, find the site is offline and want to log in (assuming to have administrator access to do so).

If you are distributing commercial templates, it is advisable to include this form.  If you are implementing a custom offline page for your own site, then including this form is optional.  For example, if testing is done on a staging site prior to upload, there is probably little need for in-situ testing of the offline site.  The decision is really up to the web master of the site as to whether it is necessary.

Before the form closes is a very important line.

{codecitation}         <?php echo JHtml::_('form.token'); ?>{/codecitation}

This line inserts an additional hidden field used to prevent a certain type of malicous attack on your site (called CSRF - we cover this in other parts of this Reference).  If you do not include this line, your site will stop and display an Invalid Token message and an Administrator will not be able to log in.

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Sun, 25 Jul 2010 01:23:57 GMT http://www.ostraining.com/newsletters/joomla/creating-a-new-joomla-offline-page/ An Introduction to MVC for Joomla Templates http://www.ostraining.com/newsletters/joomla/an-introduction-to-joomla-mvc/ MVC can be a scary acronym for the uninitiated.  It stands for Model-View-Controller and the concepts behind MVC are responsible for the extra flexibility that is now afforded to the designer.  While parts of the theory can be rather involved and complicated, the only part that the designer need worry about is the V for View.  This is the part that is concerned with output.

Different extensions display output in different ways.

Components

Components are fairly complex and have the ability to display different information in different ways.  For example, the Articles Component (com_content) is able to display a single article, or articles in a category, or categories in a section.  Each of the ways of representing the different types of data (an article, or a category, or a section) is called a view (this comes from our MVC terminology).  Most components will have many views.  However, the view doesn't actually display the output.  This is left up to what we call a layout and it is possible for a view to have a variety of layouts.

The main thing to remember here is that components can have multiple views, and each view can have one or more layouts.  Each view assembles a fixed set of information, but each layout can display that information in different ways.  For example, the Category view in the Articles component assembles a number of articles.  These articles could be displayed in a list or in a table (and probably other ways as well).  So this view may have a list layout and a table layout to choose from.

Modules

Modules, on the other hand, are very simple.  They generally display one thing one way.  Modules don't really have views but they do support a layout.  Some developers might even support a choice of layouts through module parameters.

Template versus Layout

It is very important to distinguish between the role of template and the role of layouts.  The template sets up a structural framework for the page of the Web site.  Within this framework are positions for modules and a component to display.  What actually gets displayed is governed by the module layout, or the combination of view and layout in the case of the component.

The following image shows the structural layout of a typical Joomla! template (rhuk_milkyway, the default for 1.5).  The module positions are displayed by adding tp=1 to the URL (eg, index.php?tp=1).  You can clearly see where the module output is contained within the overall template, as well as the main component output starting in the lower-centre region.  However, what is actually output in those regions, is controlled by the layouts.

Screenshot

Ancillary Customisation

While not strictly related to the MVC, there are two other important areas to consider when looking at customising the output of Joomla!.

In addition to layouts, modules have what we call chrome.  Chrome is the style with which a module is to display.  Most developers, designers and probably some end-users will be familiar with the different built-in styles for modules (raw, xhtml, etc).  It is also possible to define your own chrome styles for modules depending on the designer result.  For example, you could design a chrome to display all the modules in a particular position in a fancy javascript collapsing blind arrangement.

In the screenshot above, you can just make out the names of some of the built-in module chrome used (rounded, none and xhtml).

The second area has to do with controlling the pagination controls when viewing lists of data.

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Sat, 24 Jul 2010 01:30:55 GMT http://www.ostraining.com/newsletters/joomla/an-introduction-to-joomla-mvc/ Creating Tables Inside Joomla Articles http://www.ostraining.com/newsletters/joomla/creating-tables-inside-joomla-articles/

This tutorial will show you how to create tables inside Joomla articles. Because the default Joomla editor doesn't have a table-creation feature, we're going to recommend that you upgrade to Joomla Content Editor. Instructions on how to install it are here.

Getting Started

tutuploadsmedia_1279302864735.png

Open an article and put your cursor in the article where you'd like the table to be.

Insert a New Table

tutuploadsmedia_1279302938634.png

Click your mouse on the "Inserts a new table" button in the third row of your JCE Editor.

Choosing the Table Options

tutuploadsmedia_1279303033552.png

You'll see a pop-up looking like this. The first thing to do is choose the number of columns and row for your article. Cellpadding is the amount of space INSIDE each cell. Cellspacing is the amount of space BETWEEN each cell. Border will set a line around the outside of the whole table. Width and height allow you set fixed dimensions for the table, otherwise the table will adjust to fit the content inside. When you're done, click insert.

Writing Inside the Table

tutuploadsmedia_1279303232758.png

Click your mouse inside the table cells and start typing .... you should end up being able to fill in all the cells you need:

tutuploadsmedia_1279303548938.png

Modifying Your Table

tutuploadsmedia_1279303591717.png

You'll notice that when your table is selected, many new buttons along the 3rd row will light up. These are extra options for modifying our table. From left to right they are:

  • delete table
  • table row properties
  • table cell properties
  • insert row before
  • insert row after
  • delete row
  • insert column before
  • insert column after
  • delete column
  • split merged table cells
  • merge table cells
{loadposition joomlanewsletter}
]]> info@ostraining.com (Steve Burge) Fri, 16 Jul 2010 18:14:47 GMT http://www.ostraining.com/newsletters/joomla/creating-tables-inside-joomla-articles/ Adding a Custom HTML Module in Joomla http://www.ostraining.com/newsletters/joomla/custom-html-module/ Custom HTML modules are a very useful feature in Joomla. You can insert any code you like from articles to photos to code. Here's a video explaining how it's done:

  1. Login to your Adminstrator area.
  2. Go to Extensions >> Module Manager.
  3. Click on the "New" button.
  4. Select "Custom HTML".
  5. Enter your code and click "Save".

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Mon, 12 Jul 2010 22:04:26 GMT http://www.ostraining.com/newsletters/joomla/custom-html-module/ Joomla Article Layout Options From the Menu http://www.ostraining.com/newsletters/joomla/joomla-article-layout-options-from-the-menu/

This tutorial came from a question in our support forum: "How do I know what the menu links to articles look like?" That's a good question. If you make a new menu link and choose "Articles", you're faced with 8 different types of layout. These are the 8 you'll see:

tutuploadsmedia_1278073133590.png

So what do they all do? Read on ...

Archived Article List

tutuploadsmedia_1278073323028.png

Joomla's archive system is not very sophisticated. If you choose "Archived Article List" you'll be take a search form like this. All articles that have been archived can be found here.

Article Layout

tutuploadsmedia_1278073353051.png

Article Layout is a fairly simple option: it links to the full text of one single article.

Article Submission Layout

tutuploadsmedia_1278073409079.png

Article Submission Layout allows anyone who is at the "author" level and above to submit articles.

Category Blog Layout

tutuploadsmedia_1278073464789.png

Category Blog Layout shows all the articles in one category. It shows them in a blog layout which means that you can use the "Read More" link to split the articles and show only teaser text.

Category List Layout

tutuploadsmedia_1278073639493.png

Notice that the articles in this Category List Layout are identical to those in Category Blog Layout above. The important difference is that they're shown in a list and people have to click on the article titles to read the text.

Front Page Blog Layout

tutuploadsmedia_1278073692139.png

This is very, very similar to Section Blog Layout and Category Blog Layout. Really the only difference is that the articles come from Content >> Frontpage Manager rather than from just one section or category.

Section Blog Layout

tutuploadsmedia_1278073715022.png

Section Blog Layout shows all the articles in one category. It shows them in a blog layout which means that you can use the "Read More" link to split the articles and show only teaser text.

Section Layout

tutuploadsmedia_1278073797764.png

Section Layout shows all of the categories in one section. Click on the category name and you'll be taken to a Category Blog Layout page (see above).

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Fri, 02 Jul 2010 12:51:45 GMT http://www.ostraining.com/newsletters/joomla/joomla-article-layout-options-from-the-menu/ What is the Joomla Itemid? http://www.ostraining.com/newsletters/joomla/what-is-the-joomla-itemid/

One of the most frequently asked questions on the Joomla forums is "What is the Itemid and what does it do?". I thought a quick tutorial would be useful because it's important for displaying both modules and templates:

If you have a brand-new Joomla installation that will be a big help in following along

Brand-New Joomla Site

tutuploadsmedia_1277996611809.png

If you have a brand new Joomla site installed, browse around and look at the URLs. For example, click on "Joomla Overview".

Joomla Overview URL

tutuploadsmedia_1277996702101.png

You'll notice the URL ends with Itemid=27. Try clicking on the next link down under "Main Menu". It should be called "Joomla License".

Joomla License URL

tutuploadsmedia_1277996805612.png

This time you'll notice the URL ends in Itemid=27. Try this on other pages and you'll see that each page is going to have a different Itemid at the end. The one you might be able to the see is the frontpage - the Itemd for that is always 1.

Where Else Can You See Itemids

tutuploadsmedia_1277997008000.png

Inside each menu there will be a column on the right-hand side listing Itemids

So What Do Itemids Do?

tutuploadsmedia_1277997159816.png

So we come to the key question .... notice on the frontpage, with an Itemid of 1, that there are lots of modules on the left, top and right. Now click on "Joomla License" which has an Itemid of 2:

tutuploadsmedia_1277997264819.png

Lots of those modules have vanished. However, let's just change the Itemid from 2 to 1:

tutuploadsmedia_1277997342900.png

And after doing that you'll see that all the frontpage modules have re-appeared. The Itemid controls which modules (and which templates) appear on a particular page:

tutuploadsmedia_1277997409813.png

Try going around the rest of your site and changing the Itemids on the URLs. See how the modules shift around. This is how Joomla controls which modules and templates appear on some pages but not others. If you have a problem with the modules appearing or not appearing where they should, it's very likely to be an Itemid issue.

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Thu, 01 Jul 2010 15:21:43 GMT http://www.ostraining.com/newsletters/joomla/what-is-the-joomla-itemid/ How to Change Joomla Folder and File Permissions http://www.ostraining.com/newsletters/joomla/how-to-change-joomla-folder-and-file-permissions/

Sometimes when you're trying to upload extensions to your Joomla site, you'll be faced with error messages like this: "JFolder::create: Could not create directory" or "Warning! Failed to move file." Often this is because your Joomla site doesn't have the correct permissions to upload the extensions. What are permissions and how can you fix this problem? Read on ...

Explaining Permissions

tutuploadsmedia_1277818454937.png

There are 3 groups, self, group and public and three permissions you can give them: read, write and execute. Here's what they mean:

  • Self: That's you. When you access your site with username and password, you're connected as the user.
  • Group: That's you, too. And maybe others. If your site can be accessed with more than one username and password set, then those sets are also part of the group.
  • Public: That's everybody else. You want to be very careful about the permissions you give them.
  • Read: the ability to read a file.
  • Write: the ability to modify a file.
  • Execute: the ability to execute a file.

There's one final thing you need to know. Those permissions are sometimes given numbers:

  • Read: 4
  • Write: 2
  • Execute: 1

They are also added up. So, if the "Self" has permissions of 7, that means they can Read, Write and Execute. If "Public" has permissions of 4, they can only Read.

Explaining How Permissions Affect Joomla

tutuploadsmedia_1277822056646.png

Go to your administrator control panel and then Help >> System Info >> Directory Permissions. You'll see a list of all the folders on your site and whether you have permission to access them. On the screen above, I can't access the /images/ folder or /images/banners/ or /images/stories/. If I want to upload images I'll need to change the red "Unwritable" to green "Writable". Here's how to do it:

Login to Your FTP or Hosting Account

tutuploadsmedia_1277822394169.png

In this example I'm going to use CPanel as it's very common, but really you just need a way to access your files. Inside Cpanel I'm going to click on "File Manager" which will allow me to access your files. However you get there, you should end up seeing a screen like the one below:

Viewing Your Files

tutuploadsmedia_1277822553631.png

We know we want to change permissions on the /images/ folder so fortunately we can see it in this list.

Choose to Modify Permissions

tutuploadsmedia_1277822664928.png

Check the box next to /images/ and then click "Change Permissions".

Change Permissions

tutuploadsmedia_1277822761279.png

You may well see a screen like this. You'll hopefully remember many of the permission settings from the first part of this tutorial. The one thing to avoid is 777 because that means anyone can do anything to your folders! The lower the numbers, the safer your site will be. A good setting to try here will be 755 but you may need to experiment because all servers are setup differently. Once you've made a change and clicked "Change Permission", go back to Administrator >> Help >> System Info >> Directory Permissions to see if the red "Unwritable" has changed to the green "Writable".

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Tue, 29 Jun 2010 14:50:41 GMT http://www.ostraining.com/newsletters/joomla/how-to-change-joomla-folder-and-file-permissions/ Conditional Statements in Joomla Templates http://www.ostraining.com/newsletters/joomla/conditional-statements-in-joomla-templates/ When you're building a Joomla template you'll often need to make the design flexible. That means that areas of the site can be shown or hidden on different pages. The solution is to use conditional statements and this tutorial will introduce you to what they are and how they're used:

This tutorial is part of our full Joomla Template Class available to all members. Click here to find out more.



Session Notes for This Tutorial

Here is the code we used in this tutorial:

Index.php Code

{codecitation} {/codecitation}

Template.css Code

{codecitation} #wrapper { width: 900px; text-align: left; /*margin: 0 auto; padding: 0px; */} img {border: none;} {/codecitation} {loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Mon, 28 Jun 2010 16:48:25 GMT http://www.ostraining.com/newsletters/joomla/conditional-statements-in-joomla-templates/ The 5 Building Blocks of Every Joomla Template http://www.ostraining.com/newsletters/joomla/template-blocks/

Joomla templates are not rocket science. You can learn how to build and modify them. We can show you how. Interested? Read on ...

In order to get started, you'll need to understand the 5 essential building blocks of every Joomla template. In the 5 tutorials below we guide you through them all:

These tutorials are part of our full Joomla Template Class available to all members. Click here to find out more.

Part 1: Template Setup and templateDetails.xml



Part 1: Session Notes

Copy and Paste:

{codecitation} test Alpha 10/16/09 My Name {/codecitation}

Part 2: index.php



Part 2: Session Notes

Copy and Paste: {codecitation} {/codecitation}

Part 3: CSS - Cascading Style Sheets



Part 3: Session Notes

{codecitation} body { background: #EF1789; color: #EFE717; } a { color: #333; text-decoration: underline; } img { border: 0px; } {/codecitation}

Part 3: CSS Tutorial Links

Part 4: Images



Part 4: Session Notes

bg.png
(Right Click - Save As - then save to your images directory for your template)

Code

{codecitation} body { background: url(../images/bg.png) repeat; }{/codecitation}

Part 5: Security

We need to make sure that our template is secure and not easily hacked.

blocks

There are two essentials steps we need to make that happen:

  1. Add this line to the very, very top of index.php. This means that only Joomla can run commands on the file – no outside scripts: {codecitation}{/codecitation}
  2. Add a blank file called index.html to each folder. That means the main /test/ folder, plus /css/ and /images/. Why? To hide your folder contents. Without an index.html, anyone could see and browse all your files.

These tutorials you've just seen are part of our full Joomla Template Class available to all members. Click here to take your Joomla template skills to the next level.

]]> info@ostraining.com (Steve Burge) Thu, 24 Jun 2010 18:42:49 GMT http://www.ostraining.com/newsletters/joomla/template-blocks/ Avoid Pasting Word Articles Into Joomla http://www.ostraining.com/newsletters/joomla/avoid-pasting-word-articles-into-joomla/

Word produces horrible code that makes a mess of almost every web page. I'd definitely recommend that you avoid pasting Word documents directly into Joomla articles. Here's an explanation:

Creating a Web Page with Word

tutuploadsmedia_1276627638490.png

Using Word, write just one line. In this example I've written "One Simple Sentence".

Save as a Web Page

tutuploadsmedia_1276627744611.png

Go to File >> Save As and choose to save the file as a "Web Page".

Open the Web Page in Your Browser

tutuploadsmedia_1276627969637.png

I've double-clicked on the file I saved and it's open in my web browser.

View the Source Code

tutuploadsmedia_1276628005237.png

Right-click on the screen and click on "View Source"

Browse Through the Code

tutuploadsmedia_1276628104269.png

Scroll and scroll and scroll and scroll. Finally at the very bottom of the page you'll find the code that puts "One Simple Sentence" on the page. Everything else is junk. Our recommendation is to cut-and-paste your Word document into Notepad or Wordpad first and then into Joomla. There are lots of other alternatives, but please avoid pasting directly from Word into Joomla. You'll avoid having pages and pages of extra code to struggle with.

{loadposition joomlanewsletter}]]> info@ostraining.com (Steve Burge) Tue, 15 Jun 2010 18:58:00 GMT http://www.ostraining.com/newsletters/joomla/avoid-pasting-word-articles-into-joomla/