Joomla! 1.5 Template Structure

Developing & Configuring a new customized Joomla Based template for a site

A template provides an interface to withhold overall look & styles of a site. Site components/modules/css styles are all together embedded & displayed in a template.

 

While developing templates for Joomla! sites, following should be a basic folder structure with below mentioned files:

• css
  
• images
  
• javascript
  

CSS


In the css directory there are several .css files. Please note the names of each file and the order it is listed.


This is what should be contained within each file:

template_joomla.css: These are the default styles for Joomla and its components. It has been stripped down to prevent most of the other styles from overlapping.

template_global.css: These are the styles for the whole site. This should include the header, body or main content area, left and/or right columns, and the footer. Menu containers should be listed in this CSS, but the actual menu styles will be contained in a different CSS. Other tags that should be listed in this style sheet are: H tags, p tags, ul, ol, and li tags, and main a and a:hover tags.

template_menu.css: These are the styles for all the menus. Please keep them separated by comment tags listing which menu they belong to, this is handy when we are working with a site that has many menus and submenus.

template_pages.css: These are the styles that are specific to a certain page. For example if there is a table set up for a contact us page, you would add the styles specific to that page in this stylesheet. Please indicate which page(s) a group of styles belongs to with comment tags.

Images


The images folder should contain all images called out in the above stylesheets and that are listed within the template.xml file.


Javascript


All .js files that are used on the index.php file should be kept in this folder. This includes the file for the menu dropdowns.




Other Files


index.php: The index.php used for layout of the website. This is your actual template file. This contains the Joomla code for the position locations, the main layout divs, and the usual items found in a .dwt file or other template file.


template.xml: This file contains all files, images and positions that are included in the template zip file uploaded to Joomla. If you want the file or position to show up properly in Joomla, it must be listed in this file.


favicon.ico: This is a unique part of the logo that is used for the website favicon.


READ-ME.txt: This file contains notes about the template. You can add to this file if needed, but it does not need to be included in the template, or the template.xml.

Notes:

1) The css files & HTML template files should be properly validated using the below mentioned tools, this would ensure to keep rate of browser compatibility issues to minimum level & also would make our template W3C compliant:
For HTLM Validation: http://validator.w3.org/

For CSS Validation: http://jigsaw.w3.org/css-validator/
2) Template should display identical output on all major browsers such as – IE (6,7,8); Mozilla Firefox (2,3)[Windows/Mac]; Safari[Windows/Mac], Chrome etc.
3) IE 6 specific browser related issues such as PNG transparency issue & extra margin, spacing issue must be fixed.
4) Please use a standard web images format such as gif/jpg/png.
5) HTML templates for the site's should most preferably be developed using table-less design structure i.e by using CSS-based layouts instead on table-based layouts.

JavaScript Error Handling

JavaScript allows developers to deal with error handling with the help of following two constructs:

1. try/catch block
2. onError event

Basically developers need to use error handling concept in code structure simply because end users of your application may get confused or may be irritated to see alert boxes with errors and in such case user often leave the Web page. And so error handling plays a vital role in such scenarios.

Now we will learn about constructs of error handling in JavaScript mentioned above.

try/catch block:

--

Syntax:

try {

//Executable script

}

catch (errorObject) {

//Error handler

}

finally {

//Code to execute all the time,irrespective of error occurrence.

}

--

The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs. Whenever an error occurs while processing code present in try block, it will hand it over to catch block for executing the code present in it.

onError event:

--

Syntax:

window.onerror=function(){

//code to run when error has occured on page

}

--

'onerror' event is fired at the moment JavaScript error occurs in a script. So as a habit of good conduct it is always advisable to place code 'onerror' event at the top of the page so that all JavaScript errors can be successfully intercepted.

Joomla 1.5 Website Server Transfer

The document here comprises of few instant tips & methods to be used as guideline to be followed while transferring a Joomla 1.5.

In case you want to shift an old existing site from old hosting server to a new server, then making a new fresh installation is not always a wisest & feasible thing. Because then again you will have to spend considerable amount of time installing & configuring all the components and modules. Moreover the content data will again have to filled up. So precisely this process may take much more time & would lead to a messy situation.

Although this process is not as difficult as it may seem to you all, however if you have less experience dealing with server related stuff, then this process has to be done very carefully. And still you have confusion or doubts with the process so it is highly recommended to escalate this task to a professional.
Illustration:
To try & make understand you the process in details we will consider & scenario of shifting a domain called 'mytestjoomla.com' to it's new hosting server.
So now presuming you are all set up for shifting your site, please find the procedure enlisted below:

Procedure 1: Data Backup:

First & foremost thing is to take backup of the data of your website of your local hard drive. Backup can be taken using shell command if you have root access of the server or by simply using any FTP client application.
Illustration:
Connect to your old site server using FTP client, and then download all the Joomla based files & folders to your local hard drive. Suppose all the Joomla files of your site are in 'myJoomla' folder of your site then download the data from 'myJoomla' folder of server to a back up folder (say myDownloadedFiles) on your local machine.
After downloading the data, I would suggest you to take backup of 'myDownloadedFiles' folder as well.

Procedure 2: Export your database:

Now the second important step is to export the database files. If PHPMyAdmin is installed in your server, then this process would be an easy step. If not then you ma ask your hosting provider to either install PHPMyAdmin or any other relevant application preferred by you. Anyways considering that PHPMyAdmin is installed in your server, then using Export database functionality of PHPMyAdmin , you will have to execute a backup process for your database file in a SQL file format. Make sure that all the data is exported properly, don't try & export tables one by one.
Illustration:
Save your database files in a folder say 'myOldDatabase' data folder of your local machine.

Procedure 3: Update configuration.php:

After completing the above task carefully, now go to the folder where the data had been downloaded. There you will find a file named 'configuration.php'. This file would be in main folder (first level folder) of the site. After finding this file, open it in your preferred editor & change the following parameters:

1) Change ABSOLUTE path.
2) Change CACHE path.
3) Change HOST.
4) Change DATABASE NAME.
5) Change DATABASE USERNAME.
6) Change DATABASE PASSWORD.

Procedure 4: Upload all of your files to your new server:

Now, Using an ftp application, upload all of your files from your local hard drive to new server location where you want to install Joomla!

Procedure 5: Import your database to your new MySQL server:

Using PHPMyAdmin and the SQL file you generated in step 2, import your old database into your new database.

And then import the previously exported SQL file (generated in Procedure 2) to your new database of new server. Again this can be done using PHPMyAdmin or through shell commands.

Procedure 6: Test your new installation:

Finally after adding up database files, our task is almost done. Now your domain provider can point your domain to your new server. And your site, will show up on the new server. However please check the entire site & it's functionality first. I

f everything shows up well, then CONGRATULATIONS, you would be successful in this task.

Javascript Basics

What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• A JavaScript consists of lines of executable computer code
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
• this is a case sensitive scripting language
• based on OOP paradigm of Programming Languages

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.
Since JavaScript is currently the only scripting language supported by every major web browser (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino, etc), it is very widely used. When code is rendered by your web browser, like JavaScript usually is, it is called a Client-Side script. JavaScript can also be run on a web server to generate HTML documents, thus running as a Server-Side script. "JavaScript cannot be a standalone application instead it an Internet based application embedded in a web page & executed on a JavaScript compatible browser." Javascript is capable of manipulating data as well as Events {Event: any action on browser, e.g. OnmouseClick etc.}. The script is actually just some commands that the browser has to do.

What can JavaScript do?

• Provide Interactivity to HTML elements.
• A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.
• Can be used to read/write i.e change html element's data.
• Manipulate Events.
• Detect Browser so as to fire Browser specific code.
• A JavaScript can be used to store and retrieve information on the visitor's computer, this can be done with the help of Javascript Cookies.
• Provide dynamic functionality to a web site.
• Can develop Client-Side Script oriented or Server-Side Script Oriented Internet Applications.

Toolset Required for JavaScript:

• Javascriptcompatible Browser.
• Any Editor e.g. Notepad, Editplus etc.

Prerequisite Knowledge Required:

Prior knowledge of HTML/XHTML is required as a prerequisite to the knowledge of Javascript.

Syntax:

First, we need to know how to add JavaScript to an HTML page. JavaScript can be added in one of two ways:

1. You can place Script tags in your webpage and place the JavaScript code inside of those.
   
   <script type="text/javascript">
   
   ... block of code ....
   
   </script>
2. You can place all of your JavaScript code in another file and link to it with a Script tag.
   
   <script type="text/javascript" src="scripts/YourJavaScriptFile.js"></script>

<script>...</script>: Interprets to browser that some sort of script is to be encountered.

Type=””: attribute of script element to describe which scripting language to be used.

Src=”<path of js file..>”: attribute of script element to mention source path of .js file.

Commenting Styles:

1. <!-- code to be commented - ->
2. // code to be commented
3. /* code to be commented */

JavaScript Where To ...:

You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

JavaScript Blocks:

JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together.

JavaScript Statements:

A JavaScript statements is a command to the browser. The purpose of the command is to tell the browser what to do.
The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end.
Note: Using semicolons makes it possible to write multiple statements on one line.

JavaScript Variables:

As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more describing name like length. A JavaScript variable can also hold a text value like in carname="Volvo".

Rules for JavaScript variable names:
* Variable names are case sensitive (y and Y are two different variables)
* Variable names must begin with a letter or the underscore character
NOTE: Because JavaScript is case-sensitive, variable names are case-sensitive.
Syntax for Declaring (Creating) JavaScript Variables
var statement;

More Details about JavaScript will be posted in my next article....