Get Thee to the Web, Part 1

September 8, 2010 Paul Tuohy

To the traditional IBM i programmer, the Web can be a strange and scary place. It is full of new mysterious terminology and seems to be populated by 12-year-olds.

But the reality is that the Web now plays an integral part in our applications, whether it is in providing a company face to the world or simply for internal systems. So, like it or not, it is a world we have to come to grips with.

In this series of three articles, I hope to help you to navigate your way to the Web, understand some of the basic concepts involved in Web development, and compare and contrast the main solutions available to identify which may be best for you. And to outline the items you must learn, regardless of which solution you choose.

One of the main problems that we face when looking at developing for the Web, is information overload. We are spoiled with choices and seemingly presented with multiple alternatives. So let’s start by discussing the possible solutions.

Solutions

There are, of course, a host of excellent third-party solutions, and one of these may be the best business solution for your company. Third-party solutions aside, if you are looking at doing your own development, you are left with three choices: CGIDEV2, PHP, and Java.

But before you can decide which of these three solutions might be the best fit for your development environment, you need to separate out the components that are common to all three.

In other words, there is certain knowledge you must have, regardless of the solution you choose:

Designing and maintaining the interface
Tiered design
What a server does
Statelessness

Designing and Maintaining the Interface

Most traditional green-screen programmers cannot design Web pages. We may be able to code them, but we cannot design them. Have a look at Figure 1, which is the original home page I designed for System i Developer. Figure 2 is what it looked like after professional designers got their hands on it. See the difference?

Figure 1: The author’s attempt at Web page design.

Figure 2: Professional Web designers create a different look.

When you think about it, these two samples are no different from what we do on a green screen. Although we may code many screens, we are actually following the rules laid down by CUA (Common User Access) that dictates which function keys are used for what, where items are on a screen, etc. The benefit we have on green screen is that there is a common design mechanism for everyone. When it comes to the Web, we need a designer to come up with our company’s design rules. We then code the interface to work with those rules.

Programming a Web interface requires knowledge of three languages:

HTML (Hypertext Markup Language) controls the content
CSS (Cascading Style Sheets) defines the presentation
Javascript controls behavior

Figure 3 shows four seemingly very different Web pages with the same content.

Figure 3: Four representations of the same content.

But each of the pages in Figure 3 has the exact same HTML. The important lines to note are contained in the <head> element toward the start of the page. The <link> element identifies the CSS style rules to be used (/css/css00.css) and the <script> element identifies the file (/JavaScript/jsFunctions.js) containing any Javascript functions used on the page. The four buttons specify that, when the button is clicked, the SwitchStyles() function is called with a parameter of 0, 1, 2, or 3. The SwitchStyles() function simply changes the name of the style sheet in the <link> element.

The following is the HTML code for the Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Show Some Style</title>
  <link rel="stylesheet" id="CSSName" href="https://itjungle.wpenginepowered.com/css/css00.css"
        type="text/css">
  <script type="text/javascript" src="/JavaScript/jsFunctions.js">
  </script>
</head>
<body>
<div id="container">
   <div id="heading">
      <p>RPG Meets the Web! </p>
   </div>
   
   <div id="page">
	  <p><img src="https://itjungle.wpenginepowered.com/images/3layers.jpg" /> <br />
	     HTML is for Content. </p>
	  <p>CSS is for Presentation. </p>
	  <p>Javascript is for Behavior. </p>

	  <p>Select a style 
	     <button onClick="SwitchStyles(0)" >0</button>
	     <button onClick="SwitchStyles(1)" >1</button>
	     <button onClick="SwitchStyles(2)" >2</button>
	     <button onClick="SwitchStyles(3)" >3</button>
	  </p>
	</div>
</div>
</body>
</html>

For the sake of completion the next piece of code shows the contents of one of the CSS style sheets:

body {
	background: black;
      color: #00dd00;
}

h1 {
	color: blue;
}

button {
	background: black;
	color: blue;
	border: 0;
}

	
img { 
	float: right;
	padding-left: 10px;
	padding-right: 5px;
	padding-top: 5px;
	border: 0;
}

#heading {
	font-family:"Times New Roman", serif; 
	font-size: 30.0px;
	text-align: center;
	color: white;
	padding-top: 10px;
	padding-bottom: 5px; 
}

Finally, the following code shows the Javascript function SwitchStyles() or the contents of jsFunctions.js:

function SwitchStyles(newStyle) {

	sheetNames = new Array("css00.css", "css01.css", "css02.css", "css03.css");
	document.getElementById('CSSName').href = "/css/" + sheetNames[newStyle];

}

From our point of view, the most important of these languages is HTML. Our main concern is the content of the Web page.

Although we do not need to be experts in CSS, we must have an understanding of how it works: at least a basic knowledge is required.

In this day and age in is highly unlikely we will be able to avoid Javascript. But initially, as with CSS, we do not need to be experts–a basic knowledge is enough to get up and running. Also, I think it is very important that you have a basic understanding of HTML and CSS before you start on Javascript; one of the things you will be doing most in Javascript is playing around with styling rules.

Getting Started with HTML, CSS, and Javascript

So how do you go about learning HTML, CSS and Javascript? Well, again, you are spoiled for choice.

If you prefer classroom education, I am sure you can find many local institutes offering courses.

If you are more self motivated, a good place to start is at W3Schools.com where there are many excellent free tutorials on all things Web related.

I also recommend you have a look at SitePoint, which offers many excellent books (hard copy and electronic format), online courses, articles, podcasts, blogs, etc.

Getting started with HTML, CSS and Javascript is easy. All you need is a PC, a browser and an editor (and I know you have at least two of these or you would not be reading this article). You could manage with a simple text editor but you don’t have to–there are many free choices available to you. You may want to have a look at:

KompoZer
HTML-Kit
Aptana Studio–an eclipse based IDE
Zend Studio–although mainly for PHP is also applicable for HTML. CSS, and Javascript

Lastly, as you start out on your Web adventure, I recommend that you use Firefox as your development browser of choice. Not only is the error console a lot more helpful, but you also have a number of developer plug-ins that can make life a lot easier, such as Firebug, Web Developer Toolbar and the Javascript Venkman Debugger.

End of Part 1

In Part 2, we will look a little closer at the development of Web application on the i.

Paul Tuohy is CEO of ComCon, an iSeries consulting company, and is one of the co-founders of System i Developer, which hosts the RPG & DB2 Summit conferences. He is an award-winning speaker who also speaks regularly at COMMON conferences, and is the author of “Re-engineering RPG Legacy Applications,” “The Programmers Guide to iSeries Navigator,” and the self-study course called “iSeries Navigator for Programmers.” Send your questions or comments for Paul to Ted Holt via the IT Jungle Contact page.

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot