What do Circuit City, Hollywood Video, and Borders have in common? All of them lost their market share to direct competitors that successfully employed an online storefront, or eCommerce: Best Buy, Blockbuster, and Barnes & Noble. Clearly, the capability to sell your product online is essential. It lowers your overhead costs and provides greater convenience for your customer.

Regardless of how small your business may be or what your product or service your business offers, taking advantage of the Internet and eCommerce can help your business grow and increase profit. However, eCommerce is highly competitive and there are plenty of businesses that flounder instead of flourish because they disregard the fundamental building blocks of creating and maintaining an eCommerce website. So before you build your online storefront take careful consideration of the essential elements of eCommerce:

• Make a name for yourself. The right domain name gives your business an identity that is easy to remember and stands out in a competitive crowd.
• Find the right host. Location is everything for a brick-and-mortar store and likewise an online storefront needs a reputable Web host to house the site for success.
• Be attractive. The design for your website needs to be easy to navigate for customers. There are some basic guidelines that can make your site both easy on the eyes and easy to use.
• Showcase trust. Customers will only provide private information including credit card information and phone numbers when a site is secure and appears legitimate. Make sure your site is secure and customers feel comfortable.
• Make payment as easy as possible. It is best to provide customers with a variety of payment methods including accepting credit cards, debit cards, and utilizing PayPal. Be sure you have the reliability and ability to process each payment.

Covering your bases with eCommerce is far too important to skip any steps. This guide is a simple outline that will give your business the basics necessary to make it big.

Step One: Selecting and Registering a Domain Name
A domain name is a completely unique online identity that tells customers who you are and how to find you. Selecting a domain name, or URL, for your site is crucial. Domain names often reinforce the name of your company, product, or service and can also become your business email address. A lot rides on having the right web address, so consider these suggestions before you pick the perfect domain name:

• Make it unforgettable. Choose a domain name that will help customers recognize and remember you. Using the name of your business, product, or service is a good idea.
• Be descriptive. Select a domain name that targets your business specifically. For example, a domain name like “Pianos.com” is a simple way to describe your business.
• Watch the length. Shorter domain names are easier to remember and type. Avoid complicated words, spelling, special characters or long phrases. Keeping your domain name simple makes it as easy as possible for people to find your site.

Once you settle on a domain name, you have to check to see if it is available with a domain name company. There are a number of domain name companies, or registrars, which can assist you in getting the name you want. Be sure to choose a company with credibility. If the name is available, you have to register the domain name with the registrar.

Registering a domain name is easy and inexpensive. The actual registration process can be painless and can take maybe ten minutes of your time. Be prepared to provide some personal information like your name, address, and phone number so the company can add you to the public domain registry that tracks domain name availability. Once you provide this information you will also need to decide how long you would like to own the domain for, keep in mind you can extend the domain duration for up to ten years.

Step Two: Plan the Structure of Your Site
Once you have chosen your domain name and have it registered, you need to build a user-friendly site that invites customers to come to your site, stay, and make a purchase. A lot of people use professional web design teams to create their website. In the event hiring help is not in your budget, there are self-service website building tools that don’t require extensive HTML knowledge. The most popular content management system is WordPress. WordPress is a renowned system that allows the average person to build a site and is a good starting point.

Keep in mind that each page on your site should focus on helping a customer learn what they need to know and how to buy your product or service quickly. The following tips can help you optimize your site:

1. Do some research. Check out what your competitors look like and make adaptations.
2. First impressions are lasting. Customers want easy access to company information. Make sure your site easily presents your company name, logo, contact information, an “about the company” statement, and any business policies.
3. Simplify your site. When you build your site, minimize how many clicks it will take to make an actual purchase. As a rule of thumb, four to six clicks are average.
4. Keep it clean. Try to avoid cluttering your site with unnecessary graphics, animations and images. Only use these visual elements when they enhance your marketing goals.

After you have completed step two, you are near ready to put your site on the Internet.

Step Three: Select a Web Host
Web hosting is a service that gives you the space necessary on a web server to make your site accessible to customers. It is similar to an online storage unit, where you rent space on a server (from a web hosting company) to keep your website files safe and secure. A web hosting company connects your site to a web browser and Internet connection, offers customer support, and has eCommerce features. Some businesses may prefer to have control over the purchase, set up, and maintenance of a web server. However, most small- to medium-sized businesses turn to a web hosting company rather than investing in the hardware, software, and necessary expertise to keep a site up and running. In order to select the right web hosting company consider:

• Web hosting packages. There are several different types of web hosting. A credible web host will offer a variety of hosting options to cater to your needs. For example, shared hosting is an affordable and popular type of web hosting that allows several sites to reside on the same server. If you anticipate having a larger and busier site, dedicated hosting is a private and personal server that is only for your site. Do a little research to figure out what type of web hosting your eCommerce site will require.
• Storage space. A good web hosting company will have the ability to accommodate to your website storage needs. As your business grows, you will want the freedom to get more storage space if necessary. Can the web hosting service meet the needs of your technical requirements? Does the web hosting service have the ability to adapt to your growth?
• Uptime. With an eCommerce site, you will want your site to be available 24 hours a day. Server outages will cause havoc for your business and the opportunity cost of server outages can be staggering. Clearly, constant availability of your website is critical—your customers may not come back if they happen upon your site when it is down. A web host should guarantee 99% uptime and availability. What is the guaranteed uptime offered by the web host provider?
• Technical support. One of the main advantages of utilizing a web host is customer and technical support. Having technical support means your questions and concerns can be handled without stress and you can focus on your business. What kind of customer support does the web host offer?

In the age of eCommerce there are additional things to consider with a web host like the features they may provide. Web host providers should offer an eCommerce shopping cart, merchant account to process payment information, and SSL security to protect payments.

Step Four: Start Selling
With an online identity, intriguing and professional online storefront, and a credible web host, you have a solid foundation for an eCommerce site. These basics get you on your feet, and you can start promoting and marketing your site to the public.

Whatever your product or service, eCommerce helps level the playing field against bigger companies. Take advantage of the enormous opportunity eCommerce presents and grab market share!

Web site speed has now become a more important factor following Google’s recent announcement that page load speed will be introduced to their 200+ factor algorithm. In a video interview with WebProNews software engineer for Google, Matt Cutts, said “It should be a good experience, and so it’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don’t want that as much.”

With their announcement, Google and many others have constructed tools to test the many characteristics involved with Web page load time. What you might not know is that most of these tools test the site itself and provide information that you can do something about, independent of your service providers.

First of all it is important to know how Web site speed actually works and the factors involved in moving your data. Secondly, the most common reasons you may experience poor site performance; and finally a handful of great resources for testing your site.


Web Site Speed
Perceiving the speed of your site also involves many factors.

• Depending where you are in the world, your route to the server will take different paths called hops. A major factor in Internet speed depends on the speed of the network hops between you, point A, and your destination, point B. Just because you connect quickly to one Web site does not mean you will connect with the same speed to another.

  This is illustrated by a trace route from a server to Google.com

  Traceroute to www.google.com (74.125.19.99), 30 hops max, 60 byte packets
  -1 69-36-160-13.WEST-DATACENTER.NET(69.36.160.13) 0.466 ms 0.43 ms 0.625 ms
  -2 206.130.126.18.west-datacenter.net(206.130.126.18) 0.858 ms 0.82 ms 0.818 ms
  -3 206.130.126.42.west-datacenter.net(206.130.126.42) 0.799 ms 0.78 ms 0.748 ms
  -4 ge11-1-0d0.mcr1.saltlake2-ut.us.xo.net(65.46.56.217) 1.20 ms 1.193 ms 1.175 ms
  -5 216.156.0.5.ptr.us.xo.net (216.156.0.5) 17.629 ms 17.855 ms 17.838 ms
  -6 207.88.13.101.ptr.us.xo.net (207.88.13.101) 17.816 ms 17.882 ms 17.850 ms
  -7 216.156.84.30.ptr.us.xo.net (216.156.84.30) 17.870 ms 17.845 ms 17.822 ms
  -8 72.14.239.250 (72.14.239.250) 18.786 ms 18.759 ms 18.737 ms
  -9 209.85.251.94 (209.85.251.94) 23.953 ms 24.177 ms 24.160 ms
  -10 nuq04s01-in-f99.1e100.net (74.125.19.99) 18.646 ms 18.899 ms 18.854 ms

  As you can see, there were 10 servers hit, or hops, between me and the eventual IP of the server hosting Google.com. Each one had a different connection speed, measured in milliseconds (ms). In this case, nothing was abnormal; but sometimes a server between you and your destination can be extremely slow or overloaded causing timeouts and other nasty errors.

• Your personal Internet service provider connection could be slow. You can check this by viewing your Web site from a computer connected to a different network.

Common Issues
If your site is slow due to issues between your chair and the keyboard, it will typically be one of the following reasons:

1. You may be using a greedy add-on or plug-in on one of the many content management systems (CMS) such as WordPress, Drupal, Joomla, etc. CMS applications have extensive, active communities who develop oodles of neat little add-ons and plug-ins to add to your CMS site; however, many of these are extremely greedy and eat-up server resources resulting in slow Web site speeds.
2. Some developers create scripts (mail scripts, image management scripts, etc.) that, if developed improperly or used too frequently, can cause problems in the backend and affect the speed of your site load time.
3. You are getting too much traffic. This simply means you have outgrown your current hosting package and it is time to upgrade. Congrats!
4. Your pictures are too large! Many sites contain images that are much larger than necessary and cause slow load times. You can decrease the file size by compressing the image to reduce the resolution and shrink the pixels or size of the image itself. Most programs have an option to save a file for the Web which automatically compresses the image. It is also important to remember that most digital images are much larger than the area you are trying to fill. For example if you take a picture of your family with a 3.1 megapixel camera the image will contain more than 3 million pixels, and a picture that is 2048×1536 pixels. Most of the time an image this size is much larger than necessary and will bog down your site.

Resources

5. Google Code
   Google’s resource to make the Web faster. Through this link you’ll find hundreds of great articles, active forums, and several great tools providing real-time tips to discover site speed variables, script compilers, and more.
6. Yahoo! Developer Network
   Yahoo!’s resource for developers. Offering tools, Yahoo! APIs, and other resources to help developers build a better site. Perhaps the favorite tool here is YSlow. It is a Firefox add-on created to provide a grade for each site based upon Yahoo!’s algorithm of best practices.
7. WebPageTest
   Originally created by AOL for use on its own sites, WebPageTest provides a more technical, location specific, “waterfall of your page load performance as well as a comparison against an optimization checklist.” WebPageTest is available with any URL and can be searched from a few different US locations with 2 different browsers.
8. Web Page Analyzer
   A private company offering a free tool providing information to increase site speed. You simply need to enter a URL and the system calculates page size, composition, and download time. The script then calculates the size of individual elements and sums up each type of Web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates the latest best practices from Website Optimization Secrets, Web page size guidelines and trends, and web site optimization techniques into its recommendations.

Another great post created by WebDesignBooth offers additional resources.

What resources have helped you develop a fast site?

Depending on your goals, you can produce a great video without spending a lot of money and without a professional camera. We have all seen many videos that look like they were shot with a mobile camera phone; in fact many of the most popular videos were shot with a cheap camera. The following tips will help you capture more compelling videos no matter what type of equipment you use.

How do you produce a great video?

1. Rule of Thirds – Think of your frame divided into nine small sections, two equally spaced horizontal and two equally spaced vertical lines; like a tic-tac-toe grid. Align your subject on the intersection of the guide lines or along the lines themselves. Doing so makes the video much more compelling and pleasing to the eye. In the example below the tree sits at the intersection of the two lines and the horizon is placed on the lower line.

2. Leading Lines – Used frequently in photography and design, leading lines guide your audience through the video to a set point. This is a powerful tool especially if you want to focus on a specific person, location or thing. Combine with the rule of thirds for powerful imagery. This great example comes from my uncle, James Neeley. Notice how your eye is lead along several lines to the main subject, the bridge.

3. Drop Down and Get Close – Change the level of your camera angle, meet them at their eyes. If your subject is small drop down to catch their compelling smiles and gripping looks. Rather than using the zoom button, close in on your subject. By simply getting closer to your subject you’ll improve picture quality and successfully avoid rickety shots.

4. Use a Strong Background – Ensure your background is quiet, and contrasts well to your subject. The goal is to lead the eye of your audience to your focal point/subject. This can be quite hard if there is a lot going on, whether it’s messy space or people traffic.
5. Be a Producer – Add some props, get a different view, move your subject. Props can be an influential tool to gain attention and provide consistency throughout your video. In addition moving your subject to an interesting location or arrangement adds a nice natural touch. My alma mater, Utah State University, produced several great videos exemplifying a great background with interesting props.

Do you have a good example of online video? Please share your tips!

One of the many site applications we offer is phpBB3, which claims to be “the most widely used open-source bulletin board system in the world.” Using phpBB3 you can create everything from large discussion forums to small game clan meeting rooms. It offers the tools necessary for moderation teams to maintain control of your site. A detailed permissions system also allows access to specific features as you see fit.

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.

In part one of customizing Zen Cart (found here) we covered changing the color scheme of your store to better fit your needs. In part two we will be discussing changing some of the main images that Zen Cart uses in the design.

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.

One of our more recent Site Application additions has been Zen Cart. This e-commerce solution has many robust features and this article will give some detailed information, giving you the ability to modify the cart with your own look and feel.

The first thing you might want to do to your new store is to modify the CSS to provide the “feel” you are looking for. The templates are located in zencart/includes/templates/. One thing that is of special interest is that Zen Cart has two templates it starts by default. There is the classic template and there is the template_default template. Zen Cart will use the template_default template for most of its features, but any changes to the classic template will override the template_default template. The template_default will render the default CSS and basically is the configuration Zen Cart will have if there were no template installed. For the purposes of this post, we’ll talk about making changes to the classic template as it is in place after the installation from Site Manager. The classic template can be found in zencart/includes/templates/classic/css/.. You want to modify the file called stylesheet.css.

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.

Creating a nice-looking menu can be a challenge. You want something that’s clean, that looks good, and that fits into your site. These aren’t such demanding things to ask for in a menu, but if you search the Internet for “html menu”, you get all sorts of strange selections, varying in degrees of complexity, and usually designed for a specific site layout or color scheme.

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!

“The page at www.yoursite.com says…”

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.