Introduction to Web Development with CGI
Overview
This course is an introduction to browser-based, database-driven application development on the iSeries using CGI with RPG or COBOL. It is intended for traditional AS400/iSeries programmers who have limited or no experience with GUI/Web development technologies. At the end of the course, the student will understand and have praticed creating a variety of applications similar to typical green screen applications, analogous to sub-files, file maintenance, "work-with", and F4 lookups. The student will understand how to exploit browser technology to deliver a more flexible, standardized and attractive end-user interface. The skills developed in this course will prepare the student for creating and maintaining applications used internally on a company intranet or extranet, in place of 5250 applications, or externally to deliver real-time data from your iSeries to the web.
Languages
There are two sides to an iSeries web application: the client code (in the browser) and the server code (on the iSeries). The client code will be new to many iSeries developers, and consists of HTML, CSS and JavaScript. Each of these languages could be a course in itself, but this course focuses on the essentials of each of these for getting attractive, effective, and easily maintainable business applications developed quickly. On the server side, one of the benefits of using CGI is that the server code can be written with languages familiar to an iSeries developer, such as RPG and COBOL. This course can be delivered for either an RPG or COBOL audience. We will use the free CGIDEV2 utility from IBM which further simplifies the coding, while also exposing the student to elements of ILE development.
Flexibility
This course can be...
-
Tailored to your staff's level of knowledge and your company's need for application development.
-
Delivered for an RPG or COBOL audience
-
Delivered on-site or remotely
-
Delivered over a period of time convenient to your staff (2 weeks, 5 weeks, 10 weeks, etc.)
Homework
Practice is an essential part of learning new skills. Two types of exercises will be assigned for each class: one or more maintenance exercises, and a development exercise. The maintenance exercise will build on the examples from class, requesting the student to add additional features to the application. This forces the student to study the example more carefully, and think through how to work with the code. The development exercise will ask the student to build something from scratch that works in a similar manner to the model applications from class. All development exercises will be built over an existing file from your company's database.
Session descriptions
There are 10 sessions in total. Click the links for more details on each session.
Session 1
Basic HTML - Display File DDS for web browsers
We start the course with an overview of what will be covered in each session, including demos of the types of applications that will be created. We will also do a brief overview of some web development technologies that we will not cover, but for which this course is good preparation. We follow this with a lecture and practice on basic HTML markup tags. This will also introduce the student to the websphere HTML editor.
Back to Top
Session 2
Cascading Style Sheets - Making it look good - the easy way.
One thing that becomes quickly evident when learning HTML is that it can get quite unweildy, especially with respect to maintaining a consistent and attractive style throughout a site. Cascading Styles Sheets (CSS) provides a way of separating presentation attributes from HTML markup, and centralizing style definitions for re-use troughout a site or application system. Developing a corporate style is usually better handled by graphic artists and designers, but an understanding of the CSS codes is also important for application developers. Programmers will have practice working with CSS codes and applying them in HTML. The instructor will help your team create an attractive style, incorporating your logo and any existing company color schemes. We will use this style sheet throughout the course in any applications we develop.
Back to Top
Session 3
HTML Tables - Formatting pages and organizing information in rows and columns
HTML tables provide one of the most commonly used and powerful techniques for formatting information on web pages into an organized framework. This session will start with table basics, including options for rows, columns, borders, and nested tables. We will then apply this by developing the layout for our first CGI application: a library object listing.
Back to Top
Session 4
CGI (Common Gateway Interface): Publishing iSeries database information to the browser with RPG
Common Gateway Interface is a light-weight, very commonly used protocol for delivering dynamic page content to web browsers. In this session you will be introduced to publishing database content to the browser using RPG or COBOL. We will start with a simple "Hello World" application, then create an application to populate our object list table (from session 3) dynamically from live data on the iSeries. We will explore the OS/400 CGI APIs, and compare them to using the free CGIDEV2 toolkit from IBM, which we will then use throughout the rest of the course. We will also talk about various techniques for debugging a CGI application.
Back to Top
Session 5
HTML Forms - Getting user input from the browser
HTML forms allow an application to receive input from the user. We will learn about CGI query strings, how forms simplify sending input to the server, the various types of input fields and how to handle them with CGIDEV2 on the server. We will use these to create a listing application with search criteria. We will also learn how to create links between screens to show a detail display for an item on a list.
Back to Top
Session 6
Maintaining State: hidden fields and other techniques
Unlike 5250 sessions, CGI applications are stateless, which means there is no continuous connection between the user and the server. Once a request is responded to, the HTTP server forgets about it. We will look at techniques for maintaining state, so that our CGI applications can interact continuously with the user through a multi-screen application. We will apply this to a listing application which allows paging forward and backward through a large file, a specified number of records at a time.
Back to Top
Session 7
Database update - Customer maintenance screen.
In this session, we will add database update capability to our application by creating a detail edit screen. We will learn how to present a GUI interface on appropriate fields, such as check boxes, radio buttons, drop down lists, and textareas. We will tie our update screen to our listing screen via hyperlinks.
Back to Top
Session 8
JavaScript: Fine tuning the user interface
JavaScript (not to be confused with Java) allows us to add programming features on the browser to enhance the user interface, and, these days, it is a standard skill for most web developers. Although HTML allows for a rich graphical interface, input fields in HTML have rather basic functionality when compared with 5250 DDS. In this session, we will learn how to apply JavaScript to perform validity checking on input fields, and explore some other uses for JavaScript.
Back to Top
Session 9
Adding lookups: pull down lists and pop-up windows
Most database applications need to be able to provide lookup mechanisms for codes, and a way to validate these codes and display an error message if an invalid code is entered. In HTML, we can provide drop-down lists for short lists of valid codes, and we can create pop-up windows with searchable lists for long lists of valid codes. We will employ tools and techniques from the CGIDEV2 library and JavaScript to manage selection lists.
Back to Top
Session 10
JavaScript: additional techniques
JavaScript is a big subject, with lots of possibilities. In this session we will explore some other possibilities for using JavaScript in business applications. We will also explore applications for HTML frames and controlling them through JavaScript.
Back to Top
|
This site developed by World Wide Open -
(802) 355-4024
|
