Perhaps the greatest aspect of phpBB3 is the ability to customize it by installing any of a number of available modifications. You’ll see a list of modifications later in the post, but first things first: Installation.

Unless you are familiar with the PHP coding language, installing these mods can be a daunting task. That’s where AutoMOD comes in! AutoMOD is a mod installation utility that will insert the necessary code into your phpBB3 site quickly and easily.

Five Steps to Install AutoMOD:

1. Upload all of the files and folders from the “upload” directory to your site with the FTP client of your choice. Ensure that you maintain the correct data structure, i.e., files in includes need to go in the includes folder on your site
2. Once the files are in place, browse to the install directory (http://www.yoursite.com/phpbb/install) to run through the simple and painless installation.
3. Don’t forget to delete the install folder from the server or phpBB3 will not allow anyone to use the site.
4. To install the mod, upload the mod files and let AutoMOD do the work!
5. After you upload your mod files into the newly created /phpbb/store/mods folder on the server, the mod will be displayed in the AutoMOD tab in the Administration Control Panel. Next to the name of the available mod is an “Install” link.

AutoMOD will check all of the code changes necessary and alert you if there is a problem; for example you may have already installed a mod that affects the specific code that the current mod needs to change. In this case, you will be shown the changes that are required for the current installation and you can make the choice to continue or cancel.

If there are any additional steps needed to complete the installation, AutoMOD will tell you exactly what’s needed. If you decide in the future that you don’t want the changes implemented by a particular mod, AutoMOD can remove it for you as well. How cool is that!

There are literally hundreds of phpBB3 modifications available. The official phpBB site hosts over 300 mods alone, all of which have been reviewed for security flaws and obvious bugs. You can transform phpBB3 from a simple bulletin board system into a feature rich content management system, a near LinkedIn clone, or even a blog.

Here are some of the more common and useful mods you may wish to look at:

• Advertisement Management: Manage your banner ads, create rotating ads & filter viewers of advertisements
• User Blog Mod: Feature rich blogging system that can be available to all of your site members
• phpBB Smartfeed: Creates RSS 1.0, 2.0, and ATOM 1.0 newsfeeds so you can syndicate your site contents
• SEO Mod: Optimize your phpBB3 site’s ability to gain ranking within search engines
• phpBB3 Portal: Add a front portal page to your forum, effectively converting phpBB3 into a full CMS

With all of these mods at your fingertips, the Internet is your oyster!

Cody Erekson
WestHost Technical Support

Even to most Internet professionals, the Apache web server software can be as perplexing as it is ubiquitous. Although not as comprehensive as the official 685-page documentation, this post outlines two useful features you can enable in the httpd.conf file to improve the performance of your web server: persistent connections and gzip compression.

Important note: An error in your Apache configuration can take all of your web sites offline. Please make a backup copy of the /etc/httpd/conf/httpd.conf file before you begin making modifications. Also remember that it is necessary to restart your account to apply either of the changes described below.

Persistent Connections (Keep-Alive)

In addition to your web page itself, web browsers must also download each stylesheet, script, image, and other file referenced by your page. Historically, this meant that browsers would connect to a server, download the page, and disconnect. The browser would then initiate a new connection, download the first referenced file, and disconnect, repeating the process to fetch each additional file. As web pages became increasingly complex, they began using more files and the slow connect/download/disconnect method became noticeably time-consuming. This problem was solved with the introduction of persistent connections, as described below in the Apache documentation:

The Keep-Alive extension to HTTP/1.0 and the persistent connection feature of HTTP/1.1 provide long-lived HTTP sessions which allow multiple requests to be sent over the same TCP connection. In some cases this has been shown to result in an almost 50% speedup in latency times for HTML documents with many images.

Under the default settings, persistent connections are enabled on your account, but the KeepAliveTimeout is set to 15 seconds (near line 86 of /etc/httpd/conf/httpd.conf). This means that Apache connections will stay active for 15 seconds after visitors have downloaded (and possibly even left) the web page. Apache connections use server resources and your account has a limited number of Apache connections, so this is generally undesirable.

• For the best performance on most websites, leave KeepAlive On but reduce the KeepAliveTimeout to 1 or 2 seconds. This allows visitors to benefit from faster downloads through persistent connections, but helps prevent Apache from overloading the server and keeping too many connections open at once.
• In rare cases, on websites with extremely heavy traffic, turn KeepAlive Off. Persistent connections guarantee faster page loads for your visitors but come at the cost of increased resource utilization by requiring more Apache connections to remain open concurrently on the server. If you are frequently reaching the maximum number of allowed Apache connections, it is probably necessary to upgrade your hosting package, but turning off persistent connections is one final step you can take to squeeze a little bit more out of your current plan.

Gzip Compression (mod_deflate)

HTML, CSS, and many other programming languages used on the web are highly redundant, allowing them to be compressed effectively. mod_deflate, Apache’s compression engine, is installed but not enabled by default. To enable automatic gzip compression, add the following lines of code to the end of your httpd.conf file:


SetInputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/rtf
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/rdf+xml
AddOutputFilterByType DEFLATE application/postscript
AddOutputFilterByType DEFLATE application/msword
AddOutputFilterByType DEFLATE application/vnd.ms-excel
AddOutputFilterByType DEFLATE application/vnd.ms-powerpoint
AddOutputFilterByType DEFLATE image/svg+xml
AddType image/svg+xml .svg


After you have edited the httpd.conf file and restarted your account, test whether compression is working properly.

Persistent connections significantly improve loading multimedia-rich sites with large numbers of images and other files, while gzip compression reduces HTML, CSS, JavaScript, and other text by an average of 80 percent, but these two changes are just the beginning! Read Yahoo’s list of Best Practices for Speeding Up Your Web Site for even more ways to make your pages load faster.

Changing Images

The first image you might want to get rid of is the main banner image and replace it with your own. The main banner is actually made up of two parts. The first part is the clouds image. This is referenced again in the CSS file that you have already edited. The CSS file looks like this:

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

To remove the clouds image, you simply removed the reference to the image:

#logoWrapper{
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

By default Zen Cart uses logo.gif for the name of this image, but you can use you own filename for the logo. Using an image editor, create your new logo and upload it to your server.

After creating your logo you can adjust the height, width and logo name in includes/languages/english/header.php. Also, you will have to change includes/languages/english/classic/header.php.

define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
define('HEADER_LOGO_WIDTH', '192px');
define('HEADER_LOGO_HEIGHT', '64px');
define('HEADER_LOGO_IMAGE', 'logo.gif');

Make the needed changes reflecting the name of your site, and the width, height and filename of your logo that you created. To get rid of that pesky “Sales Message Goes Here” text, you need to modify the header.php file in the path /var/www/var/zencart/includes/languages/english/classic/ .
The rest of the images on the site are banners and those banners can be turned on, off, or deleted. You can do this through the admin panel for your cart. After your images have been modified, your cart should look something like this:

Congratulations, you are well on you way to creating a shopping cart that will fit your site’s personality.

—————————–

Would you like to perform the above (or more) on your site, but not comfortable with the code? WestHost can help, just fill out a request here.

Common things I often asked are how colors, widths, heights, and images are changed. The first thing I will start with is the overall color scheme of your store. Your store will look like this when it is first loaded.

Color Schemes

Many ask how to change the green color scheme. To do this, we have to modify the CSS file located in zencart/includes/templates/classic/css/ called stylesheet.css. The green headers are actually small gif images that are referenced in the CSS file. They can be deleted or changed. I have highlighted the specific text in my example below.

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

In my example below you can see that the reference to the image has been removed and I have changed the background color to blue.

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #000CFF;
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

The image is referenced in four other tags throughout the CSS file. To completely change this look, you will need to remove or possibly change the reference. The tags that need to be changed are listed below. Simply look for the exact tags in the file and remove the image reference.

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
#navEZPagesTop {
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
.productListing-rowheading {

It would probably be a good time to save your changes and take a look at the impact you have had on Zen Cart. Save your work and take a look at your cart in your browser. For those of you falling asleep at this point, you may need to hit refresh in your browser. Now, you may notice some throwbacks to the green theme at the bottom of each element in the browser. You can change this heavy green line by modifying the CSS file on the lines outlined below.

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}

If you want to make the width the same as the rest of the lines and change the color of the borders to match your header, you would set to it something like this:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #000CFF;
margin-top: 1.5em;
}

Now the store should look something like this:

Read Customizing Zen Cart Part 2 by clicking here.

—————————–

Would you like to perform the above (or more) on your site, but not comfortable with the code? WestHost can help, just fill out a request here.

To all Tomcat users out there, I’m sure many of you have had questions on how to get things up and running; questions like ‘Is Apache Tomcat the same thing as Tomcat?’, and ‘How do I get the :8080 to go away?’

What is Apache Tomcat?

Apache Tomcat and Tomcat are the same thing. Apache, in this case, is simply the parent project and does not refer to the Apache web server. Apache Tomcat acts as a servlet container that processes Java servlets/JSP pages. There are some specifications that can be made within the Apache web server to let Apache know whether or not to handle the request or pass it on to Tomcat for processing. These specifications are located in the mod_jk.conf (sometimes just jk.conf) file in the /etc/httpd/conf.d directory.

Great! So how do I get Apache Tomcat to find my JSP pages?

While a number of specifications can take place in the mod_jk.conf file, the most relevant is the JkMount directive. This is the option that tells Apache whether or not to pass the request on to Tomcat. If you create a new folder in the /var/tomcat5/webapps directory for your Java related content, which is where is should be, Apache will not know about it by default. If the folder is called ‘test’, for example, then you would be able to access the folder by going to http://yourdomain.com:8080/test/ but it would not work by going to just http://domain.com/test/ which is, of course, what most of you will want. To get this functionality, a JkMount directive would have to be used inside the jk.conf file. It would look as follows:

JkMount /test/* ajp13w

Once this change is made and Apache is restarted (notice, Tomcat does NOT need restarting in this case because it was an Apache directive in an Apache configuration file that was altered) then http://yourdomain.com/test/ will come up fine and will be handled by Tomcat, as desired. If you are familiar with SSH, you can use the ‘apachectl graceful’ command to restart Apache. Otherwise you can go in through your Site Manager under the Restart Account section and restart that way.

What if I want my Java web application to show up at http://yourdomain.com instead of http://yourdomain.com/folder/?

In this scenario, you will create a folder called ROOT (all upper case) inside the /var/tomcat5/webapps directory and put all of your java content in there. You will then setup the JkMount directive as follows and then restart Apache as mentioned above:

JkMount /* ajp13w

Now your Java web application is all up and running. That’s all it takes!

A few more tidbits for those who want to understand what all that means:

The ‘ajp13w’ entry above refers to a user specified in the /etc/httpd/conf/workers.properties file and stands for Apache JServ Protocol. To find out more on this protocol and its functions, see http://tomcat.apache.org/connectors-doc/ajp/ajpv13a.html. That should give you a good understanding of what role a Tomcat worker plays and how and why Tomcat processes are spawned and resources are used. A Tomcat worker is a Tomcat instance that is waiting to execute servlets or any other content on behalf of some web server. For example, we can have a web server such as Apache forwarding servlet requests to a Tomcat process (the worker) running behind it. In WestHost’s case, ajp13 and ajp12 are the only workers setup, ajp13 being the default worker, and the preferred worker due to it being configured to use sockets as it’s communication channel (see above link for further detail.) When the JkMount directive is used, it is assigned to the ajp13 worker as the entry specifies.

What if you could have a very recognizable menu system – like the one that Windows Explorer™ uses, shown here?

Thanks to jQuery and its multitude of useful plug-ins, you can have just that. The SimpleTree plug-in takes only seconds to create a menu system that nearly every computer user will immediately recognize and feel comfortable with. What’s shown below is the default icon theme that the plug-in includes, but you can always edit or replace the images to change the computer icon, the folder icons, or the “leaf” icons to suit your needs.

If you’re not familiar with jQuery, see some of our previous posts on the topic:
http://www.westhost.com/blog/2009/01/dynamic-websites-with-jquery-and-extjs/
http://www.westhost.com/blog/2009/03/more-jquery-blockui-plug-in/

Check out our simple menu below, or the complete example: http://cmichaelis.whsites.net/whblog/jquery-simpletree/

In order to create this menu, we need only a small bit of JavaScript code, placed in your jQuery “ready” function:

simpleTreeCollection = $('.simpleTree').simpleTree({
autoclose: true,
afterClick:function(node){
$.blockUI({ message: 'You clicked on:<br/ >' + $('span:first',node).text() + '<br /><br /><a href="javascript:void(0)" onclick="$.unblockUI()">Click here to dismiss.</a>'});
},
animate:true,
drag:false
});


We also need to define the menu items themselves. This will be done with an unordered list (ul) element which has the class “simpleTree”:


<ul id="browser" class="simpleTree">
<li class="root"><span>Contents</span>
<ul>
<li class="open" id="item1"><span>This is the first item...</span>
<ul>
<li id="subitem1"><span>Sub Item #1</span></li>
<li id="subitem2"><span>Sub Item #2</span></li>
</ul>
</li>


<li class="open" id="item2"><span>This is the second item...</span>
<ul>
<li id="subitem3"><span>Sub Item #3</span></li>
<li id="subitem4"><span>Sub Item #4</span></li>
</ul>
</li>
</ul>


When your jQuery ready event runs, it will convert the unordered list into the menu. That’s all there is to it!

Does that look familiar? If you use alert() or confirm() from JavaScript in your web page, some browsers display a standard, boring window with that title, and your message in it.

A few weeks ago, I introduced jQuery, a powerful tool for writing dynamic and engaging websites quickly. Today I’d like to take a brief moment of your time to introduce BlockUI, a plug-in for jQuery. Beyond the power of jQuery itself, you can accomplish much using jQuery plug-ins. Many common tasks are taken care of and abstracted into easy to use, feature-rich plug-ins – a full list can be found at http://plugins.jquery.com/.

BlockUI (http://malsup.com/jquery/block/) is a small plug-in that will allow you to change a boring prompt into a nice-looking one.

Turn this: http://cmichaelis.whsites.net/whblog/jquery-blockui/boring.html

…into this: http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html

The BlockUI plug-in allows you to place the message over the whole page, or over just a particular block element (like a “div” tag). You can specify a message to display, or you can even have a complex piece of your page hidden (with style=”display: none”) and display it in this fashion.

Visit http://malsup.com/jquery/block/ to download it, and to view more examples – and bring your website’s messages up to the next level.

There are many things to take into account when setting up an online store front. Below is a list of some of the major items. You will want to thoughtfully consider and research each of these options before beginning the actual work of getting your site built and running.

Domain Name Registration
A Domain name is one of those must haves for any site. Without it you can not have a site. When you are deciding on a domain name for your site consider the following.

• How easy is it to remember?
• Is it easy to misspell?
• Does it adequately portray your store?
• Is it too long?

You can search for available domain names using this handy tool available at http://www.westhost.com/domainreg/.

Web Hosting Solution
Again, this is a must have in order to get your site online. The basic rule here is to make sure that the plan offers what you need.

• Does it include a ready to install shopping cart solution that meets your needs?
• How is the hosting company? What type of reviews do they get from existing clients?

(If you select a hosting company and plan simply based on the cheapest price more often than not you will get what you pay for when something goes wrong and you need the hosting company to assist you.)

WestHost offers three standard e-commerce oriented hosting plans (Business Value, Business Pro, and usually the current special). You can compare their features and pricing at the link below.
http://www.westhost.com/business-hosting-compare.html

Shopping Cart Solution
The best way to approach this is to start with a list of the features that you would like your shopping cart to have (coupons, product options, etc.). Once you have this list you will know what to look for in the shopping cart software. As you look for a shopping cart solution you will also want to look into what level of support you can expect from the shopping cart company, your hosting company, or your Web designer/developer in regards to the shopping cart.

Another important thing to consider is how flexible your shopping cart is. Can features be added in the future as you grow and need to offer new functionality?

SSL Certificate
If you are taking credit card payments online through your site then this is a must have. Even if you are not, it is most definitely a very strong ‘should have’. An SSL certificate is what secures the personal data of your customers as it is transferred from their computer to your server. Customers will look for your site being secure when you ask them for their personal information. They want to know that you are watching out for their best interest and security.

There are options in selecting your SSL certificate. I am not going to get into all of the details here regarding SSL certificates, but you can read up on them a bit at the links below.
http://members.westhost.com/ssl-web-hosting.html
http://www.westhost.com/e-commerce-hosting.html
http://www.westhost.com/faq/ssl/index.html

Merchant Account/Payment Gateway
The merchant account gives you the ability to take and process credit card payments. Your payment gateway is what connects your merchant account to your Web site. As you shop around for a merchant account and payment gateway you will find that each company’s fees and charges will vary. WestHost has partnered with two different payment processing services to help offer you the best service for your money. You can review these payment processing options here http://www.westhost.com/e-commerce-hosting.html.

The biggest thing when choosing your payment processing solution is to make sure that it is compatible with your chosen shopping cart. Find out what payment gateways your merchant account supports and make sure that the shopping cart you select supports the same gateway.

Shipping Options
This item, along with what tax rates you need to charge, is often overlooked until the last minute.

First of all, are your products shippable? Second, how will they be shipped and how do you want your shipping charges determined in the shopping cart. Determining the best shipping is often a balancing act between not loosing money on shipping and not charging so much that your customers go elsewhere.

Most shopping cart solutions will offer multiple options for determining shipping charges. They will range from a simple table based shipping (based on either total order price or weight) to live rates from the major shipping vendors. If you leave this decision until the cart is ready to go live you might find yourself in a corner with no desirable solution. You want to make sure your chosen shopping cart will support or can be modified to support (usually through the use of modules) the type of shipping setup that you need.

Tax Rates
Most states have their own rules as to who needs to charge tax to whom. You will want to become familiar with these rules so that you do not get into trouble. The other reason for taking this into consideration is to make sure that your shopping cart solution will accommodate the way you need to have your taxes set up to meet your local law requirements.

——————————————

Approaching your new e-commerce site from the right angle will help to eliminate headaches along the way. Feel free to add to the list below or give your own insights into setting up an e-commerce Web site.

Please share any tips that you have for setting up an e-commerce site.

Information inside a typical MySQL database is stored in tables. Information is retrieved by querying these tables, usually with some criteria so that we receive only the information which we want. In order to fulfill a query and return the right information, MySQL must examine all rows in the tables and see which one’s match our criteria. This can be a resource intensive process which can slow down a website’s performance depending on the amount of data which must be examined.

MySQL has a great feature which can help speed up queries. Enter table indexes.

An index for a MySQL table is similar to the index of a book in that it’s a quick way to find the information we’re looking for. Instead of reading through an entire table to find the information we want, MySQL can consult the table index which greatly increases the speed of the search. Pretend we have this table named eyeColor:

mysql> describe eyeColor;
+-----------+---------+
| name      | color   |
+-----------+---------+
| Morgan    | Hazel   |
| David     | Hazel   |
| Paul      | Blue    |
| Cameron   | Green   |
| Matt      | Brown   |
+-----------+---------+

I would like to query this table to see who has blue eyes. My query would look something like this:

mysql> select name from eyeColor where color = 'blue';

In this query, “color = ‘blue’ ” is my criteria for the search. I only want to see who has blue eyes and this limits the information which is returned to those who only have blue eyes. I can gain some information about this query by asking MySQL to explain it:

mysql> explain select name from eyeColor where color = 'Blue';

Click to Enlarge

See how there are NULL values for many of the above fields? This looks like a simple query in the table eyeColor. The type is ALL, meaning that a full table scan is performed. This is the slowest type. The possible_keys and key values are NULL, meaning no indexes could be or were used. According to the rows information, 5 rows had to be examined to fulfill this query.

Now I’m going to create an index using the first 3 characters of the items in the color column:

mysql> create index index_color on eyeColor( color(3) );

This time, when I ask MySQL to describe my query we should see that things have changed:

mysql> explain select name from eyeColor where color = 'Blue';

Click to Enlarge

Again, this is a simple query in the eyeColor table. This time the type is ref, indicating that an index will be referenced. The possible_keys and key values show that my index index_color was used in this query. According to the rows information, only 1 row had to be examined to fulfill this query.

This shows that without an index, every row in the table must be examined to fulfill a query. Some sites have tens of thousands to several million entries in a table. You can see that without an index that there is a lot of work which must be done. Major website softwares like Wordpress, Joomla, and phpBB create indexes in their databases. If you design your own site using MySQL then you may wish to start using indexes to increase the efficiency and speed of your site.

Have some more ideas on optimizing MySQL to speed up your Web site, please share.

All of these concerns can be addressed by using JavaScript to make your site more dynamic, inviting, and engaging.

In this article, I’ll introduce you to two tools that can help you transform a plain site into a modern, good-looking and engaging site. The disadvantage, which I’ll tell you up front, is that your visitor must have a JavaScript-capable browser. This does rule out some older mobile browsers, but even mobile devices are becoming more widely JavaScript capable (e.g., Opera Mini).

In our example, we’ll start out with a simple site: a resume or curriculum vitae for our well-beloved John Doe. Such a dynamic site might be considered overkill for a simple resume page, but consider if John Doe is a web designer. What would a plain, uninviting site say about him?

For our starting point, please see our first example:
http://cmichaelis.whsites.net/whblog/jquery-extjs-1/example1.html

In addition to using tables, which are generally frowned upon now, it lacks any paragraph (<p>) tags or any real styling information. All of the information is displayed at once, with no personal feel and no interactivity. While this is generally what you want for a resume, since it’s printable and contains all information in one place, assume for a moment that this was a site detailing a product you’ve begun selling, or a documentation interface. This would be too much information for a potential customer to take in all at once, and is somewhat bland.

Now, take a look at our second example:
http://cmichaelis.whsites.net/whblog/jquery-extjs-1/example2

Much better! It could still use some graphic embellishment, but is a great start to improving the site. There are all sorts of possibilities here for layout and functionality that you can use to make the site more usable and more modern.

This example is adapted from the ‘complex’ example included in the extJS distribution. extJS (http://extjs.com/) is a JavaScript library designed to help develop web sites that look much better than a typical web site, even resembling desktop applications. In our example, we also used jQuery (http://jquery.com/), a somewhat smaller JavaScript library which is intended to vastly simplify common web programming tasks. We’ll address each library in turn, and then explain how the components of the second example work together. In future blog postings, I’ll be covering some of the unique functionality of each of these two libraries in more depth – there is far too much there to explore in one blog posting! Hopefully this introduction will whet your appetite for more.

extJS

extJS is a complete application framework for developing web sites. Many JavaScript coders will caution you against using monolithic third-party libraries, stating that you never know what’s actually in them and whether it’s secure. I stand by the idea that you should always understand what you’re putting up on your site before you use it. Notwithstanding this caution, extJS seems to be a powerful, well written, and secure framework with a great community behind it.

It includes dozens of components somewhat like “controls”, for those familiar with desktop application development, which enable rapid construction. The library features grid components, tab panels, window managers, tree layout managers, checkbox managers, toolbar systems and menu layout systems, data grids that tie into databases, and dozens of other handy items. All of them are themable and flexible for your needs!

jQuery

jQuery is a tool that allows you to accomplish more, with less coding and less time. For instance, we frequently need to transfer data without a refresh to make a smooth interface. Suppose that you had a div element called “content”, and you wanted to have a link update it with more information, without a page refresh. This could be done like:

<div id="content">Click <a href="javascript:void(0)" id="showmorelink">here</a> for more!</div>

<script language="text/javascript">
$('#showmorelink').click(function() { $('#content').load('/secondpage.html'); });
</script>

This small code segment illustrates a few of the interesting features of jQuery. Events can be tied to objects in your document easily – we assigned an inline function to the click event of the “showmorelink” anchor with one quick statement. Frequently, setup steps like this are done in the $(document).ready event – this event is called when the page has loaded fully, including all images.

The $(’#content’) statement is referred to as a “selector”, meaning that it grabs one or more document elements so that you can work on it. We then use the function load() to replace the HTML of the “content” div element. We could also have used .after() to place new content after that div.

A selector can grab multiple elements, which is particularly useful when working with CSS classes. The pound symbol (#) indicates that you’re selecting by an ID; you can also select by CSS class by using a period. Something like $(’.popupimage’).hide(’fast’); could be used to select every item in the document with the class popupimage and hide it with a “fast” animation. This is useful, for instance, with an image gallery full of pop-up images.

jQuery can be used to accelerate development dramatically, as well as increasing readability and maintainability.

Bringing it all together: Example 2

Our second example started with the “complex” example in the extJS distribution (http://extjs.com/products/extjs/download.php?dl=extjs22). We removed a few pieces that weren’t needed, and added a couple of small items.

First off in the page, we load the extJS libraries:
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

Next, we get jQuery libraries:
<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.simple.tree.js"></script>

Finally, we pick up some stylesheets:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />

We now have everything we need to work with extJS and jQuery here. Now, we enter a large section of JavaScript code. First, we have:
var tabpanel;

Setting this as a global variable (outside of a function definition) allows us to refer to the tab panel collection from any function or code segment, which is handy to allow links to add tabs.

Next, we set up the extJS environment. Here, we configure the tab panel with an initial item – the welcome page – and attach it to a particular content element in the document with the variable “contentEl”. Next, we set up the viewport component, which defines a north, south, east and west section. We give each a height and width, and associate each with a content element.

The next section is recognizable as jQuery code – we set up a document ready function, and use this event to initialize the navigation tree seen in the left of the web page. This is a jQuery plug-in, by Peter Panov and the IKEEN group, released under an open source (BSD) license. It makes it trivial to create tree-style menus. Here, we just indicate the element that needs to be turned into a tree view, and it takes care of it. The most important part of this code segment is the afterClick event, which is assigned an inline function to load an HTML file of the same name as the node that was clicked on, putting the contents into the “welcome” tab.

Next in the JavaScript code section is a function called addPanel. This will just add a new tab to our tab panel in the center of the web page, and load it with data from the specified location. Due to browser security restrictions, this can only be a page from the same web domain as the current page you’re viewing, so when we do load content with this we’ll load “loadpage.php”, which will load the actual content we care about from the remote server for us (after validating that the passed location is allowed). Verification is important to prevent abuse and “phishing”.

Last in the page, we define all of the div elements that were attached to the various extJS viewport elements. We also define an unordered list which will become our lefthand navigation menu – the jQuery TreeView plug-in component will convert these lists into treeview menu items where, as mentioned earlier, each corresponds to an html file. Examining the first, objective.html, we see nothing particularly special except for the link to Wikipedia:
<a href="javascript:void(0);" onclick="javascript:addPanel('loadpage.php?a=http://en.wikipedia.org/wiki/Goal');">the Wikipedia page for Goal</a>

Here, the OnClick event calls the previously defined addPanel function, passing it through the local loadpage.php script to get past the browser security restraints. Again, ensure that you validate addresses passing through here for security purposes.

This is a simple example, clearly beyond the needs of a resume – but the techniques described here are very useful for building many different types of dynamic websites. In future posts, we’ll be digging deeper into the individual capabilities of jQuery and extJS.