1. Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

2. Section 1: Introduction Define Web Enable Why Web Enable? Common Methods of Web Enabling CICS as a Web Server Environment Introducing IpServer for CICS

3. Section 2: Introduction to CGI The Common Gateway Interface (CGI) How CGIs get initiated

4. Section 3: Separation of Business Logic & Presentation Part 1: HTML and CGI Programming Part 2: Client Scripting Solutions

5. Section 1: Introduction

6. Define Web Enable Web Enable v. The action of establishing Web Browser access to legacy data. Generally includes the replacement of a text-based interface with that of a GUI Web interface. Why Web Enable Data 21 Increase productivity reduce costs enhance service stay competitive TCP/IP is a low cost open network Provide a standard GUI Web interface For next generation of end-users Reduce training for new users Improve applications with graphics, video, audio Provide access to new user groups Customers Partners (extranet) Suppliers (extranet)

7. Section 1: Introduction Common Methods of Web Enabling Java Applets (e.g., IBM Host On Demand) No Changes to Host applications Per-seat licensing costs Deployment Issues Screen Scrapping No Changes to Host applications Potential problems if host screens are changed Per-seat licensing costs Deployment Issues CGI Programming Changes to Host applications No per-seat licensing costs No deployment Issues Data 21

8. Section 1: Introduction CICS as a Web Server Environment The data is thereThe data is there Designed to manage large numbers of simultaneous usersDesigned to manage large numbers of simultaneous users Leverage existing systems, skills, tools and application codeLeverage existing systems, skills, tools and application code Data 21

9. Section 1: Introduction Introducing IpServer for CICS IpServer for CICS is the only native CICS Web Server solution for VSE. HTTP compliant Web Server with the performance and facilities of CICS. Native CICS CGI makes it easy to Web Enable your CICS programs. Data 21

10. CICS WEB SERVER High Performance Memory Caching X CICS Security InterfaceX SSL X CICS WEB DEVELOPMENT (CGI) Server Side Includes (SSI)X Useful JavaScript'sX SENDMAIL APIX WEB-TO-HOST* Browser connectivity to 3270 applicationsX Create customized Web page templates forX individual 3270 screens using any HTML editor SUPPORT Programming and Web Side Development X 24/7 Searchable Web Knowledge BaseX ENVIRONMENTS VSE 2.1+X MVS, OS/390X CICS 2+ X MRO X Features

11. Section 2: Introduction to CGI

12. The Common Gateway Interface (CGI) Data 21 The Common Gateway Interface (CGI) specification lets Web servers execute server-side programs and incorporate their data into the information sent to a Web Browser.

13. Section 2: Introduction to CGI How CGIs get Initiated Data 21 Get Method HREF or Form submission with METHOD="GET" parameter specified on FORM tag. Post Method Form submission with METHOD="POST" parameter specified in FORM tag. SSI Directive (#exec cgi=program name) When a Web Server encounters this SSI directive within a page (as it is sending the page to the browser), the Web Server will suspend sending, initiate the related CGI, replace the directive statement (within the Web page text) with the CGIs data, then resume sending the page.

14. Section 2: Introduction to CGI How CGIs get Initiated (cont.) Data 21 Example of Using the GET Method to initiate a CGI Using a link (HREF) Using this technique, the author must supply the entire URL, which must include the parameter list pairs (if parameters are to be passed to the CGI). CLICK to Execute MYCGI Using a Form: METHOD=GET or POST Using this technique, the browser will build the exact same URL (as in the example above) when the submit button is pressed by the user viewing the page.

15. Section 2: Introduction to CGI How CGIs get Initiated (cont.) Data 21 Example of Using SSI #exec Directive to initiate a CGI Sample HTML of page containing an #exec directive used to invoke a CGI programmed to supply the number of times the page has been accessed: This page has been accessed times. The resulting Web page would display the output of the CGI (in this case "1400") in the position the directive held in the page. Example (displayed to end-user): This page has been accessed 1400 times.

16. Section 2: Introduction to CGI Simple IpServer CICS Cobol CGI Data 21 ******************************************************** * RETURN A WEB PAGE IN A TS QUEUE (IN ITEM 1) * ******************************************************** IDENTIFICATION DIVISION. PROGRAM-ID. 'CGI101S'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION. 01 WORKAREA. 05 WEB-PAGE-LENGTH PIC S9(4) VALUE +38 COMP. 01 WEB-PAGE. 05 FILLER PIC X(6) VALUE ' '. 05 MSG PIC X(12) VALUE 'HELLO WORLD!'. 05 FILLER PIC X(7) VALUE ' '. LINKAGE SECTION. 01 DFHCOMMAREA. COPY D21ICGIC. PROCEDURE DIVISION. 000-MAIN. IF VALID-COMMAREA PERFORM 100-WRITE-TSQ END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC. 100-WRITE-TSQ. EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID) FROM(WEB-PAGE) LENGTH(WEB-PAGE-LENGTH) END-EXEC.

17. Section 3: Separation of Business Logic & Presentation Part 1: HTML and CGI Programming

18. Section 3: Separation of Business Logic and Presentation The Role of SSI Data 21 Server Side Includes (SSI) are directives you can place into an HTML document to execute other programs or to output data, such as the contents of environmental variables. While Server Side Includes technically are not CGI, they can become an important tool for incorporating CGI-like information as well as output from CGI programs. Most commonly Used SSI Directives:

19. Section 3: Separation of Business Logic and Presentation The Role of SSI (cont.) Data 21 Using SSI to Separate Business Logic from Presentation (HTML) BENEFITS Simplifies CGI Programs Programmers shielded from HTML and other Web authoring disciplines. Presentation can be changed at any time, without re-programming.

20. Section 3: Separation of Business Logic and Presentation The Role of SSI (cont.) Data 21 Web Page with SSI Variables for merging CGI Data > > 05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE LNAME'. 10 PARSE LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '. Fields Defined in CICS COBOL CGI

21. Section 3: Separation of Business Logic and Presentation Data 21 IDENTIFICATION DIVISION. PROGRAM-ID. 'MYCGI1'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION. 01 WORKAREA. 05 BLANKS PIC X VALUE ' '. 05 RETURN-PAGE PIC X(44) VALUE '/MYCGI.HTM'. 05 PARSE2-LENGTH PIC S9(4) VALUE +0 COMP. 05 PARSE2-TEMP-LENGTH PIC S9(8) VALUE +512 COMP. *COPY D21IPARC. 01 PARSE. 05 PARSE1. 10 PARSE-FIELD-ID-LENGTH PIC S9(4) VALUE +16 COMP. 10 PARSE-RETCD PIC X(1) VALUE '0'. 88 PARSE-INVALID-STRUCTURE VALUE '1'. 10 PARSE-TR-UPPERCASE PIC X(1) VALUE 'Y'. 88 PARSE-TR-UPPERCASE-YES VALUE 'Y'. 88 PARSE-TR-UPPERCASE-NO VALUE 'N'. 10 FILLER PIC X(16) VALUE ' '. 10 PARSE-DATA-WALEN PIC S9(4) VALUE +255 COMP. 10 PARSE-DATA-WORKAREA PIC X(255) VALUE LOW-VALUES. MYCGI Program: Echo Form Back

22. Section 3: Separation of Business Logic and Presentation Data 21 *---------------------------------------------------------------* 05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE 'FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE 'LNAME'. 10 PARSE-LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '. *---------------------------------------------------------------* 05 PARSE3. 10 FILLER PIC X(1) VALUE LOW-VALUES. *---------------------------------------------------------------* MYCGI Program

23. Section 3: Separation of Business Logic and Presentation Data 21 LINKAGE SECTION. 01 DFHCOMMAREA. COPY D21ICGIC. PROCEDURE DIVISION. 000-MAIN. IF VALID-COMMAREA PERFORM 100-RECEIVE. PERFORM 200-SEND. END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC. 100-RECEIVE. * TRANSLATE INPUT FIELDS/PARAMETERS TO UPPERCASE: YES/NO SET PARSE-TR-UPPERCASE-YES TO TRUE. * SET PARSE-TR-UPPERCASE-NO TO TRUE. CALL 'D21IPARS' USING DFHCOMMAREA, PARSE1, PARSE2, PARSE3. * DISPLAY SAME PAGE WITH DATA MOVE RETURN-PAGE TO CGI-RETURN-PAGE-NAME. * CREATE UNIQUE TSQID FOR RETURNED DATA MOVE CGI-RETURN-TSQID TO CGI-RETURN-TSQID2. MOVE '2' TO CGI-RETURN-TSQID2-POS1. MYCGI Program

24. Section 3: Separation of Business Logic and Presentation Data 21 200-SEND. MOVE LENGTH OF PARSE2 TO PARSE2-LENGTH. EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID2) FROM(PARSE2) LENGTH(PARSE2-LENGTH) END-EXEC. MYCGI Program

25. Section 3: Separation of Business Logic and Presentation Data 21 Returning a Block of Inquiry Data > >

26. Section 3: Separation of Business Logic and Presentation Data 21 IDENTIFICATION DIVISION. PROGRAM-ID. 'MYCGI2'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION. 01 WORKAREA. 05 BLANKS PIC X VALUE ' '. 05 RETURN-PAGE PIC X(44) VALUE 'MYCGI.HTM'. 05 TSRECL PIC S9(4) VALUE +62 COMP. 05 PARSE2-LENGTH PIC S9(4) VALUE +0 COMP. 05 PARSE2-TEMP-LENGTH PIC S9(8) VALUE +512 COMP. 01 TSREC. 05 REC PIC X(60) VALUE ' '. 05 CR-LF PIC X(2) VALUE X'0D25'. MYCGI Program: Return Input fields and Inquiry results

27. Section 3: Separation of Business Logic and Presentation Data 21 *COPY D21IPARC. 01 PARSE. 05 PARSE1. 10 PARSE-FIELD-ID-LENGTH PIC S9(4) VALUE +16 COMP. 10 PARSE-RETCD PIC X(1) VALUE '0'. 88 PARSE-INVALID-STRUCTURE VALUE '1'. 10 PARSE-TR-UPPERCASE PIC X(1) VALUE 'Y'. 88 PARSE-TR-UPPERCASE-YES VALUE 'Y'. 88 PARSE-TR-UPPERCASE-NO VALUE 'N'. 10 FILLER PIC X(16) VALUE ' '. 10 PARSE-DATA-WALEN PIC S9(4) VALUE +255 COMP. 10 PARSE-DATA-WORKAREA PIC X(255) VALUE LOW-VALUES. *---------------------------------------------------------------* 05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE 'FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE 'LNAME'. 10 PARSE-LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '. *---------------------------------------------------------------* 05 PARSE3. 10 FILLER PIC X(1) VALUE LOW-VALUES. *---------------------------------------------------------------* MYCGI Program

28. Section 3: Separation of Business Logic and Presentation Data 21 LINKAGE SECTION. 01 DFHCOMMAREA. COPY D21ICGIC. 01 BUFFER-DATA-RETURN PIC X(512). PROCEDURE DIVISION. 000-MAIN. IF VALID-COMMAREA PERFORM 100-RECV-ROUTINE * DATA CAN BE RETURNED IN CGI-TSQ2 OR CGI-BUFFER2 OR BOTH PERFORM 200-DATA-IN-BUFFER2 PERFORM 300-DATA-IN-TSQ2 END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC. MYCGI Program

29. Section 3: Separation of Business Logic and Presentation Data 21 100-RECV-ROUTINE. * TRANSLATE INPUT FIELDS/PARAMETERS TO UPPERCASE: YES/NO SET PARSE-TR-UPPERCASE-YES TO TRUE. * SET PARSE-TR-UPPERCASE-NO TO TRUE. CALL 'D21IPARS' USING DFHCOMMAREA, PARSE1, PARSE2, PARSE3. * DISPLAY SAME PAGE WITH DATA MOVE RETURN-PAGE TO CGI-RETURN-PAGE-NAME. * CREATE UNIQUE TSQID FOR RETURNED DATA MOVE CGI-RETURN-TSQID TO CGI-RETURN-TSQID2. MOVE '2' TO CGI-RETURN-TSQID2-POS1. MYCGI Program

30. Section 3: Separation of Business Logic and Presentation Data 21 200-DATA-IN-BUFFER2. * PARSE2 DATA IS USED TO PASS DATA BASED ON FIELD NAME * RETURN PARSE2 DATA IS CGI-RETURN-BUFFER2 EXEC CICS GETMAIN SET(CGI-RETURN-BUFFER2) FLENGTH(PARSE2-TEMP-LENGTH) INITIMG(BLANKS) END-EXEC. SET ADDRESS OF BUFFER-DATA-RETURN TO CGI-RETURN-BUFFER2. MOVE LENGTH OF PARSE2 TO CGI-RETURN-LENGTH2. MOVE PARSE2 TO BUFFER-DATA-RETURN. 300-DATA-IN-TSQ2. * READ DATABASE (VSAM...) AND WRITE TO TEMP STORAGE (CGI_TSQ2) * FORMAT TSREC OUTPUT EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID2) FROM(TSREC) LENGTH(TSRECL) END-EXEC. * LOOP FOR ALL DATABASE DATA MYCGI Program

31. Section 3: Separation of Business Logic & Presentation Part 2: Client Scripting Solutions

32. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Sample Data Entry CGI Data 21 Existing CICS Application to be Web enabled

33. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Data 21 New GUI Web Interface for Application File name: emp1.htm

34. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Simplify CGI programming with client-side scripts and Style Sheets The goal is to have the application (i.e., CGI) return data only (no HTML). Effective scripting is a key to accomplishing this. Data 21 Common Functions: Disable Back Button Cursor Control Initial selections of point & click objects Contextual Help

35. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Centralize common functions into a common script file which can be associated to any Web Page Example: Data 21

36. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions genscrpt.htm // Developed by David Kennedy, Data 21 -- 09/22/98 var nameParm=""; groupName=""; d=document // On Onload Event function focusTo(name){ // Prevent backward Navigation history.forward() var el = document.forms[0] setInitialSelections(el) // Set initial cursor location if(name){ // Web Author supplied field name on the function, focus to it for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == name){ el.elements[ti].focus() break}}} // If not, focus to field in cursor field, supplied by the CGI if(!name){ for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == d.forms[0].cursor.value){ el.elements[ti].focus() break}}}} Data 21 More...

37. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions genscrpt.htm (cont.) // Set initial values for point-and-click objects function setInitialSelections(el){ for (si=0; si<el.elements.length; si++) { if (el.elements[si].type == "select-one"){ setSelectOne(el.elements[si])} if (el.elements[si].type == "radio"){ setRadio(el.elements[si])} if (el.elements[si].type == "checkbox"){ setCheckbox(el.elements[si])}}} function setSelectOne(e){ getNameParm(e.name) for (zi=0; zi<e.options.length; zi++) { if (nameParm==e.options[zi].value){ e.options[zi].selected = true break}}} function setRadio(e){ if(groupName!=e.name){getNameParm(e.name);groupName=e.name} if(e.value==nameParm){e.checked=true}} function setCheckbox(e){ getNameParm(e.name) if(e.value==nameParm){e.checked=true}} Data 21 More...

38. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions genscrpt.htm (cont.) function getNameParm(name){ nameParm=" " for(i = 0; i < setOptions.length; i++){ var iElement = setOptions[i].split("=") var iname = unescape(iElement[0]) var ivalue= unescape(iElement[1]) if(name == iname){ nameParm = ivalue break} }} // ONHELP EVENT function ipHelp(e){ if(!e){ helpUrl=helpfile}else{ event.cancelBubble=true;event.returnValue=false; if(e.type){var helpUrl=(helpfile + "#" + e.name)} else{helpUrl=helpfile} helpWindow = open(helpUrl, "Help", "menubar=yes,toolbar=yes,scrollbars=yes,left=390,width=400,height=400") }} // ONFOCUS EVENT // return field name name of last cursor postion function a(e){ document.forms[0].cursor.value=e.name } Data 21

39. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions The onload event The onload event, specified on the BODY tag, fires after the entire Web page has been downloaded from the browser. Disable the Browsers Back Action // On Onload Event function focusTo(name){ // Prevent backward Navigation history.forward() Data 21

40. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Cursor Control HTML Script // Set initial cursor location if(name){ // Web Author supplied field name on the function, focus to it for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == name){ el.elements[ti].focus() break}}} // If not, focus to field in cursor field, supplied by the CGI if(!name){ for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == d.forms[0].cursor.value){ el.elements[ti].focus() break}}}} Data 21

41. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Data 21 Initial selections of point & click objects File name: emp1.htm

42. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Initial selections of point & click objects HTML Human Resources Accounting Data Processing Rate Code: Salaried Hourly Part-Time Marital Status: Single Married Head of Household Data 21

43. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Initial selections of point & click objects Local Script (in EMP1.HTM Page) // Customization Variables var setOptions = new Array( 'empdept= ', 'emprate= ', 'empstat= ' ) var helpfile="empmast.htm" Data 21

44. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Initial selections of point & click objects Script // Set initial values for point-and-click objects function setInitialSelections(el){ for (si=0; si<el.elements.length; si++) { if (el.elements[si].type == "select-one"){ setSelectOne(el.elements[si])} if (el.elements[si].type == "radio"){ setRadio(el.elements[si])} if (el.elements[si].type == "checkbox"){ setCheckbox(el.elements[si])}}} function setSelectOne(e){ getNameParm(e.name) for (zi=0; zi<e.options.length; zi++) { if (nameParm==e.options[zi].value){ e.options[zi].selected = true break}}} function setRadio(e){ if(groupName!=e.name){getNameParm(e.name);groupName=e.name} if(e.value==nameParm){e.checked=true}} function setCheckbox(e){ getNameParm(e.name) if(e.value==nameParm){e.checked=true}} Data 21

45. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Initial selections of point & click objects Script (cont.) function getNameParm(name){ nameParm=" " for(i = 0; i < setOptions.length; i++){ var iElement = setOptions[i].split("=") var iname = unescape(iElement[0]) var ivalue= unescape(iElement[1]) if(name == iname){ nameParm = ivalue break} }} Data 21

46. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Data 21 Sample Inquiry CGI File name: emp2.htm

47. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Sample Inquiry CGI (cont.) HTML (Stored on Server) // Perform Submit on selected SSN function L(ssn){ document.IFORM.SSNUM.value = ssn document.IFORM.submit()} Data 21 More...

48. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Sample Inquiry CGI (cont.) Payroll Inquiry by Last Name SELECT TYPE OF INQUIRY Employee Deductions Accumalators Last check Select Name from below: Data 21

49. Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions Sample Inquiry CGI (cont.) CGI Output (Contents of #echo var=CGI_TSQ2) 244001394 101 410 4125 JONES BETTY 242002341 101 410 4125 JONES JIM T 240003334 101 410 4125 JONES ROBERT W 241004087 101 410 4125 JONES CHRIS S Data 21

50. Summing Up CICS is a great environment for Web applications. CGI is a cost effective and powerful Web Enablement Method. Separation of Program logic and Presentation is Key.

51. Thank you. Data 21, Inc. 3510 Torrance Blvd. Torrance, CA 90503 Phone: (310) 792-1771 Email: sales@data21.com data21.com You may download the complete HTML and JavaScript used in this Session at: www.data21.com/wavv99