AS/400 Links Partner with Rochester Institute Contact Us
Training Catalog Free Downloads Privacy / Usage


FREE AS/400, iSeries, and System i / iSeries Downloads
HOME >> FREE AS/400, iSeries, and System i / iSeries Downloads >> Web Design Basics



Web Design Basics
Author: Bradley V. Stone


Although the Internet has been around for more than a few years now, many applications still haven't been ported to the Web. Maybe you haven't had the need, time, or resources, to move applications over yet. But eventually, you may find yourself needing to learn about this new way to provide applications to your users and customers.

During the transition, many people often make two mistakes. The first is not taking the time to understand the basics behind Web technology. The second is choosing a toolset that doesn't fit business needs or developer skill sets. Very often the latter choice is a result of not first understanding the technology. Instead of taking advantage of the free and inexpensive resources that are available, many people opt for an expensive toolset that is marketed as a "silver bullet."

Understanding the Web

Before you can choose a toolset, you have to understand the job that the toolset will perform. So you need to understand how Web applications function at least at a high level.

Web applications consist of a few key elements:

  • Hypertext Markup Language (HTML)
  • JavaScript
  • Cascading Style Sheets (CSS)
  • Server Side Includes (SSIs)

Common Gateway Interface (CGI) programs.

You can think of Web programming as similar to driving a car. Anyone can look at a car and understand its purpose. Even if you don't know how to drive a car, at a high level, you still understand how to use it: you get in the car and drive to your destination.

But to successfully drive the car to your destination, you should know how the steering wheel, accelerator, brakes, blinkers, mirrors, and horn function. You also need to know how to read and comprehend road signs, other vehicle signals, and road markings. Once you include all of this extra knowledge, the phrase "drive a car to its destination" suddenly becomes more complicated, especially to those who have never driven before.

The same holds true for Web applications. Most people can look at a Web page and know that HTML was used to create the content. But do you know how forms, tables, layers, stylesheets, JavaScript and server side includes were used to create the final product?

Without understanding how each of these technologies work, your Web pages will be very difficult to create, update, or enhance in the future.

HyperText Markup Language (HTML)

Hypertext Markup Language, or HTML, should be familiar to most people by now. HTML is really the backbone of any Web application or Web page because a browser interprets the HTML to display a Web page properly.

With HTML, you can use tables, fonts, colors, and images to format a Web page. You can even create online forms so users can input data for a more dynamic and interactive experience.

With today's WYSIWYG HTML editors, some newcomers to the Web-programming world don't have the skill to work with raw HTML code. While these editors can get you what you want, if you don't understand the underlying HTML tools and functions, being able to fine-tune your Web pages can be frustrating. Also, because any application that creates dynamic Web pages does so with HTML as a final product, it is important to understand what you can do with HTML before you start writing applications for the Web.

At the lowest level, you use HTML to place text and images on a Web page. Normally, you start learning HTML by creating simple pages that contain just text and pictures. For example, you might create a simple page with a picture of your car or dog.

The Web and the skill set of Web developers has evolved, so now you see personal pages that are not only formatted well, but that also contain some dynamic content such as discussion forums or Web logs (blogs).

You use an HTML table to format the content of a Web page in a more pleasing format by arranging the information into rows and columns. In their most basic form, tables let you create lists of information, such as a customer order history. This table might be similar to the information you would display in a green-bar report or a subfile program.

At a higher level, you can use tables to format the look and feel of a Web page. You can use tables to separate different content areas such as a navigation bar, a company header, and the main text of the Web page. Table layouts are somewhat similar to how a newspaper is formatted into sections on a page.

You use HTML forms for user input into the Web page. With a form, users can interact and have more control of the actual data that is displayed on the Web page. A program reads the information the user enters into the form and displays the appropriate results.

For example, suppose you were creating a Web page that displays customer order history. If you didn't let the user input parameters and search criteria, the user has to scroll through all of the information to find the required information.

By using an HTML form, the user can specify a customer number, range of invoice numbers or order dates, or any other criteria to subset the information being presented. On the back end, a program reads the information entered in the form and displays the appropriate information

This concept of tables and forms should not be new to most of us. For years, you've probably created green screen applications where the user can select the information that is displayed or printed on reports. The Web is no different. The methods used to create content are the same as well. The only difference is that instead of using DDS to create subfiles or reports, you use HTML.

JavaScript

JavaScript is a client-side scripting language that is used by the Web application programmer to perform functions such as simple form field validation. It is used in Web application programming to provide a more interactive and "Windows-Like" experience for the user.

You use JavaScript for simple field validation mainly to make the Web experience more enjoyable for the user. If you skipped the validation of form fields using JavaScript, you would only do error checking in the program that processes the form. This technique generally makes the user experience slower and sometimes aggravating.

Using JavaScript, you can verify that a user enters a valid date, enters numeric data in a numeric field, or fills in at least the required fields in a form. If you find any obvious errors, you then can display a pop-up box on the Web page that tells the user what errors were encountered.

Because JavaScript is used on the client side (from within the Web page) and doesn't communicate with your server, it really isn't suited for certain types of validation, such as checking if an item number entered is valid. Instead, it should be used to validate static information where the values are easily determined.

It is a good practice to validate information on the server side as well; even if you are sure your JavaScript validation is functioning properly. This process is often overlooked and when something does slip by, debugging the problem can be a nightmare because you think your JavaScript functions should be catching certain errors. In reality, the errors may slip through for a number of reasons, such as the user has disabled JavaScript, or you didn't program the JavaScript to work with some obscure browser.

The more you understand what can be done with JavaScript, the more you can use it in your applications. As with HTML, hundreds of free resources are available on the Internet to help you learn JavaScript.

Cascading Style Sheets (CSS)

Cascading Style Sheets, or CSSs, are used to format the look and feel of a Web page. You can use stylesheets to control fonts, colors, font sizes, and most object properties such as table alignment.

The biggest benefit of stylesheets comes into play when you are designing a Web page because with CSSs, you can externalize the Web page attributes instead of littering your HTML with font, color, and other formatting tags.

For example, suppose you have just developed an entire Web site using only HTML formatting and no stylesheets. Once you're done, your boss says he likes the work, but he wants you to change all the fonts from Times New Roman to Arial and to change the color from black to blue. If you had used HTML formatting, you would need to go into each Web page and change the color and font attributes of every piece of text on the Web page. This process would be a very tiresome ordeal.

If you had used stylesheets, on the other hand, reformatting the Web page would involve changing a couple of attributes in one external stylesheet that is referenced on each page.

You can do a lot more with stylesheets to control the look and feel of a Web page. For example, you can control attributes of Web page objects globally or control them at a single object level. You also can assign a class to a single table cell. The class reference is defined in a stylesheet, and you can apply formatting to just that cell or many cells.

For example, suppose you have a table that lists your customer order history. Some cells contain text and you want to have them left justified. Other cells contain numeric data, which you want to be right justified. With CSSs, you can assign separate classes to each type of cell to control the alignment of data within each cell.

Stylesheets are probably one of the biggest timesavers in Web page development. But, they are often underused or used improperly, so many people don't get their full benefit.
With some simple study and understanding of stylesheets, you can easily control the look and feel of your Web pages.

Server Side Includes (SSI)

Using server side includes, or SSIs, you can "modularize" your Web pages. With SSIs, you take common pieces on each Web page and place them into a separate HTML files or generate them using a CGI program. Then you place the separate pieces into the Web page using a SSI directive.

When you use SSIs, putting together a Web page is like putting together a puzzle. You have portions of the Web site that remain constant on each page. For example, the header of your Web page may contain a company logo and contact information. Instead of copying and pasting this HTML into each Web page, you can place the HTML for the header in an external SSI file and then reference that file in each page.

You can even insert dynamic information, such as a list of top downloads. Using a SSI directive, you can insert this information into each page.

The real benefit of SSIs comes into play when you need to change to a particular piece of your Web page. For example, if you get a new company logo image that needs to be replaced on every page in your Web site, you simply change the header SSI file. Because every page on your site references this external file, it is changed throughout the entire site.

Common Gateway Interface (CGI) Programming

Common Gateway Interface (CGI) programming is a term used to describe a program that creates dynamic Web content. Most, if not all, technologies that are used to create dynamic Web pages create dynamic HTML at one level or another. Some technologies just seem to do a little more work to create the same final result.

If you're used to creating static files for Web pages, understanding how CGI functions is simple when compared to other technologies you may be familiar with.

CGI programs are written so that they read information from your system and dynamically build HTML (or any markup language), and display it on a Web page. This concept is confusing to some people, but as a programmer, you probably have developed programs similar to these for years.

For example, suppose you have a program that creates a subfile display or green bar report that lists a customer's order history. You already know how to program this report and how to create dynamic reports for a user. The main difference between this process and producing a CGI program is the output media. Instead of a green screen or printout, you're output the data to a Web page.

Your iSeries already comes loaded with APIs that let you create dynamic Web pages. If you've never used an API before, this process can be a little tricky. But nothing bad can come from learning how to use system APIs. I found after using my first API that it opened up a host of possibilities for other programming projects.

The hardest part about CGI programming is learning the HTML and the other tools discussed in this article. Writing the CGI program is the easy part, especially if you have toolsets available to you such as the eRPG SDK or CGIDEV2.

Understanding Your Toolset

I've briefly covered what I feel are the most important pieces to any Web developer's toolset to give you an idea of what you may or may not be missing in your Web application designs. These tools apply to any development platform that you are using, from eRPG to WebSphere.

Without understanding what is available, you will have trouble creating your easily maintainable and customizable Web pages.

On the Internet, literally hundreds of free resources are available if you want to dive deeper into any of these subjects. If any of them are new to you, or you simple want to learn more on a subject, I encourage you to search out some sources using your favorite search engine. The extra time you put into learning how to efficiently use these tools will be returned to you one hundred fold in time saved developing and maintaining your Web applications.

Bradley V. Stone is the author of RPG Skills Accelerator and e-RPG Powertools-Stone on CGIDEV2 training courses, and the best selling book e-RGP: Building AS/400 Web Applications with RPG as well as the follow-up book, e-RPG(v2): e-Volving RPG Applications for a Connected World. Brad can be reached at Stone@Lab400.com.