Skip to main content

Creating an dynamic table with COBOL HTML

  • April 4, 2012
  • 5 replies
  • 0 views
D

[Migrated content. Thread originally posted on 04 April 2012]

Hello friends,

I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

I already have a page designed and i'm using CSS as well.
What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
The COBOL program       
$set preprocess(htmlpp) endp       
IDENTIFICATION DIVISION.       
PROGRAM-ID.                     FP006.        
EVIRONMENT DIVISION.       
CONFIGURATION SECTION.       
SOURCE-COMPUTER.                S-8000.       
OBJECT-COMPUTER.                S-8000.       
SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
INPUT-OUTPUT SECTION.       
FILE-CONTROL.
       SELECT FPHIST ASSIGN TO DISK                   
           ORGANIZATION IS INDEXED                   
           ACCESS MODE  IS DYNAMIC                   
           RECORD KEY   IS BOFP05KEY.       
DATA DIVISION.       
FILE SECTION.
FD  FPHIST                
    LABEL RECORD ARE STANDARD                
    VALUE OF FILE-ID "FPHIST".       
    COPY BOFP005.       
WORKING-STORAGE SECTION.        
77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
01 WS-WORK.          
   05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
01 TELA IS EXTERNAL-FORM.           
   03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
   03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
   03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
   03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
PROCEDURE DIVISION.       
000-MAIN-LINE SECTION.       
000-00.            
    PERFORM 010-INICIO.           
    PERFORM 020-PROCESSAMENTO.           
    PERFORM 999-FIM.           
    STOP    RUN.       
000-EXIT.           
    EXIT.       
010-INICIO SECTION.       
010-00.            
    OPEN    INPUT  FPHIST.       
010-EXIT.           
    EXIT.       
020-PROCESSAMENTO SECTION.       
020-00.           
    EXEC HTML               
       COPY "MENU.HTM".           
    END-EXEC.

    PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
    ACCEPT    tela       
    EVALUATE  web-botao       
       WHEN  'Pesquisar'       
          PERFORM 040-PESQUISA-FPHIST       
       WHEN  'Incluir'       
       WHEN  'Alterar'       
       WHEN  'Excluir'       
          PERFORM 999-FIM       
       WHEN OTHER       
          PERFORM 999-FIM       
    END-EVALUATE.       
020-EXIT.           
    EXIT.       
030-LISTA-TODOS SECTION.       
030-00.
    READ    FPHIST NEXT RECORD                   
       AT END                   
          MOVE 01 TO WS-FIM                   
          GO TO 030-EXIT.
    MOVE BOFP05COD  TO disp-codigo.          
    MOVE BOFP05NOME TO disp-desc.
    EXEC HTML           
       <tr>             
           <td align="center" width="120" id="disp_codigo">             
            :disp-codigo             
           </td>             
           <td align="left" width="780" id="disp_desc">             
            :disp-desc             
           </td>           
       </tr>          
    END-EXEC.
030-EXIT.           
    EXIT.       
040-PESQUISA-FPHIST SECTION.       
040-00.
    READ    FPHIST                   
       INVALID KEY                   
          MOVE HIGH-VALUES TO BOFP05KEY                   
          GO TO 040-EXIT.       
999-FIM SECTION.       
999-00.            
    CLOSE   FPHIST.       
999-EXIT.           
EXIT.

HTML Page
<HTML>
   <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
     <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
   </HEAD>
   <BODY>
       <div id="div_principal">
       <div ID="div_cabec_sup">                    
         <table width="800">
           <tr>
              <td rowspan="2">
                <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                <a onclick="fechar();" title="Fechar">
                  <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
              </td>                        
           </tr>
           <tr>
              <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
           </tr>
          </table>
         </div>
         <div id="div_cabec_inf" align="left" >
           <FORM id=form1 name=form1 method=post>
             <table align="left">                        
               <tr id="tr_cabec_rotulo">                             
                 <td align="left" width="">Digite o Codigo:&nbsp;                            
                 </td>
                 <td align="left" title="Digite o Codigo">
                   <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                 </td>
                 <td align="right">                                  
                  <select id="select_mes" name="mes">
                    <option value="99">Todos</option>
                    <option value="01">Descontos</option>
                    <option value="02">Vencimentos</option>
                  </select>                              
                 </td>
                 <td align="right" rowspan="2">
                  <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                  </a>
                 </td>
                </tr>
               </table>
              </form>
             </div>
             <div id="div_corpo_cabec">
               <div style='left: 40px; position: relative;'>
                <br>
                  <FORM id=form1 name=form1 method=post>
                    <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                     <tr id="tr_lista_rotulo">
                       <td align="left" width="120">Código</td>
                       <td align="left" width="780">Descrição</td>                    
                     </tr>
                    </table>
                </div>
              </div>
              <div id="div_corpo_lista">
                <div style='left: 120px; position: relative; width: 780px;'>
                 <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                  <tr id="tr_lista_dados>
                   <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                   <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                  </tr>
                 </table>
                </div>
             </div>
       </div>
   </BODY>
</HTML> 


 

    5 replies

    Chris Glazier
    Forum|alt.badge.img+2
    • Chris GlazierModerator
    • Moderator
    • 3697 replies
    • April 4, 2012

    [Migrated content. Thread originally posted on 04 April 2012]

    Hello friends,

    I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

    I already have a page designed and i'm using CSS as well.
    What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
    While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

    Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
    The COBOL program       
    $set preprocess(htmlpp) endp       
    IDENTIFICATION DIVISION.       
    PROGRAM-ID.                     FP006.        
    EVIRONMENT DIVISION.       
    CONFIGURATION SECTION.       
    SOURCE-COMPUTER.                S-8000.       
    OBJECT-COMPUTER.                S-8000.       
    SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
    INPUT-OUTPUT SECTION.       
    FILE-CONTROL.
           SELECT FPHIST ASSIGN TO DISK                   
               ORGANIZATION IS INDEXED                   
               ACCESS MODE  IS DYNAMIC                   
               RECORD KEY   IS BOFP05KEY.       
    DATA DIVISION.       
    FILE SECTION.
    FD  FPHIST                
        LABEL RECORD ARE STANDARD                
        VALUE OF FILE-ID "FPHIST".       
        COPY BOFP005.       
    WORKING-STORAGE SECTION.        
    77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
    01 WS-WORK.          
       05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
    01 TELA IS EXTERNAL-FORM.           
       03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
       03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
       03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
       03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
    PROCEDURE DIVISION.       
    000-MAIN-LINE SECTION.       
    000-00.            
        PERFORM 010-INICIO.           
        PERFORM 020-PROCESSAMENTO.           
        PERFORM 999-FIM.           
        STOP    RUN.       
    000-EXIT.           
        EXIT.       
    010-INICIO SECTION.       
    010-00.            
        OPEN    INPUT  FPHIST.       
    010-EXIT.           
        EXIT.       
    020-PROCESSAMENTO SECTION.       
    020-00.           
        EXEC HTML               
           COPY "MENU.HTM".           
        END-EXEC.

        PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
        ACCEPT    tela       
        EVALUATE  web-botao       
           WHEN  'Pesquisar'       
              PERFORM 040-PESQUISA-FPHIST       
           WHEN  'Incluir'       
           WHEN  'Alterar'       
           WHEN  'Excluir'       
              PERFORM 999-FIM       
           WHEN OTHER       
              PERFORM 999-FIM       
        END-EVALUATE.       
    020-EXIT.           
        EXIT.       
    030-LISTA-TODOS SECTION.       
    030-00.
        READ    FPHIST NEXT RECORD                   
           AT END                   
              MOVE 01 TO WS-FIM                   
              GO TO 030-EXIT.
        MOVE BOFP05COD  TO disp-codigo.          
        MOVE BOFP05NOME TO disp-desc.
        EXEC HTML           
           <tr>             
               <td align="center" width="120" id="disp_codigo">             
                :disp-codigo             
               </td>             
               <td align="left" width="780" id="disp_desc">             
                :disp-desc             
               </td>           
           </tr>          
        END-EXEC.
    030-EXIT.           
        EXIT.       
    040-PESQUISA-FPHIST SECTION.       
    040-00.
        READ    FPHIST                   
           INVALID KEY                   
              MOVE HIGH-VALUES TO BOFP05KEY                   
              GO TO 040-EXIT.       
    999-FIM SECTION.       
    999-00.            
        CLOSE   FPHIST.       
    999-EXIT.           
    EXIT.

    HTML Page
    <HTML>
       <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
         <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
       </HEAD>
       <BODY>
           <div id="div_principal">
           <div ID="div_cabec_sup">                    
             <table width="800">
               <tr>
                  <td rowspan="2">
                    <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                    <a onclick="fechar();" title="Fechar">
                      <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
                  </td>                        
               </tr>
               <tr>
                  <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
               </tr>
              </table>
             </div>
             <div id="div_cabec_inf" align="left" >
               <FORM id=form1 name=form1 method=post>
                 <table align="left">                        
                   <tr id="tr_cabec_rotulo">                             
                     <td align="left" width="">Digite o Codigo:&nbsp;                            
                     </td>
                     <td align="left" title="Digite o Codigo">
                       <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                     </td>
                     <td align="right">                                  
                      <select id="select_mes" name="mes">
                        <option value="99">Todos</option>
                        <option value="01">Descontos</option>
                        <option value="02">Vencimentos</option>
                      </select>                              
                     </td>
                     <td align="right" rowspan="2">
                      <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                      </a>
                     </td>
                    </tr>
                   </table>
                  </form>
                 </div>
                 <div id="div_corpo_cabec">
                   <div style='left: 40px; position: relative;'>
                    <br>
                      <FORM id=form1 name=form1 method=post>
                        <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                         <tr id="tr_lista_rotulo">
                           <td align="left" width="120">Código</td>
                           <td align="left" width="780">Descrição</td>                    
                         </tr>
                        </table>
                    </div>
                  </div>
                  <div id="div_corpo_lista">
                    <div style='left: 120px; position: relative; width: 780px;'>
                     <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                      <tr id="tr_lista_dados>
                       <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                       <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                      </tr>
                     </table>
                    </div>
                 </div>
           </div>
       </BODY>
    </HTML> 


     
    It looks to me like you are outputting a complete HTML form when you use:


       EXEC HTML
          COPY "MENU.HTM".
       END-EXEC.


    And then you send the table rows after this.

    What you need to do is send out only the first part of the HTML page up until you need to insert the table rows, and then insert one row for each record and then when all records are output issue another EXEC HTML to output the closing tags including the and

    There is an example under the Net Express Examples folder called HTMLESQL that performs such a task.
    It uses database fetches instead of ISAM reads but the logic is the same.

    Please take a look at this example and see if it clarifies things a bit.

    Thanks.
    D
    • Dominique SacreRocketeer
    • Author
    • Rocketeer
    • 19312 replies
    • April 4, 2012

    [Migrated content. Thread originally posted on 04 April 2012]

    Hello friends,

    I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

    I already have a page designed and i'm using CSS as well.
    What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
    While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

    Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
    The COBOL program       
    $set preprocess(htmlpp) endp       
    IDENTIFICATION DIVISION.       
    PROGRAM-ID.                     FP006.        
    EVIRONMENT DIVISION.       
    CONFIGURATION SECTION.       
    SOURCE-COMPUTER.                S-8000.       
    OBJECT-COMPUTER.                S-8000.       
    SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
    INPUT-OUTPUT SECTION.       
    FILE-CONTROL.
           SELECT FPHIST ASSIGN TO DISK                   
               ORGANIZATION IS INDEXED                   
               ACCESS MODE  IS DYNAMIC                   
               RECORD KEY   IS BOFP05KEY.       
    DATA DIVISION.       
    FILE SECTION.
    FD  FPHIST                
        LABEL RECORD ARE STANDARD                
        VALUE OF FILE-ID "FPHIST".       
        COPY BOFP005.       
    WORKING-STORAGE SECTION.        
    77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
    01 WS-WORK.          
       05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
    01 TELA IS EXTERNAL-FORM.           
       03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
       03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
       03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
       03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
    PROCEDURE DIVISION.       
    000-MAIN-LINE SECTION.       
    000-00.            
        PERFORM 010-INICIO.           
        PERFORM 020-PROCESSAMENTO.           
        PERFORM 999-FIM.           
        STOP    RUN.       
    000-EXIT.           
        EXIT.       
    010-INICIO SECTION.       
    010-00.            
        OPEN    INPUT  FPHIST.       
    010-EXIT.           
        EXIT.       
    020-PROCESSAMENTO SECTION.       
    020-00.           
        EXEC HTML               
           COPY "MENU.HTM".           
        END-EXEC.

        PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
        ACCEPT    tela       
        EVALUATE  web-botao       
           WHEN  'Pesquisar'       
              PERFORM 040-PESQUISA-FPHIST       
           WHEN  'Incluir'       
           WHEN  'Alterar'       
           WHEN  'Excluir'       
              PERFORM 999-FIM       
           WHEN OTHER       
              PERFORM 999-FIM       
        END-EVALUATE.       
    020-EXIT.           
        EXIT.       
    030-LISTA-TODOS SECTION.       
    030-00.
        READ    FPHIST NEXT RECORD                   
           AT END                   
              MOVE 01 TO WS-FIM                   
              GO TO 030-EXIT.
        MOVE BOFP05COD  TO disp-codigo.          
        MOVE BOFP05NOME TO disp-desc.
        EXEC HTML           
           <tr>             
               <td align="center" width="120" id="disp_codigo">             
                :disp-codigo             
               </td>             
               <td align="left" width="780" id="disp_desc">             
                :disp-desc             
               </td>           
           </tr>          
        END-EXEC.
    030-EXIT.           
        EXIT.       
    040-PESQUISA-FPHIST SECTION.       
    040-00.
        READ    FPHIST                   
           INVALID KEY                   
              MOVE HIGH-VALUES TO BOFP05KEY                   
              GO TO 040-EXIT.       
    999-FIM SECTION.       
    999-00.            
        CLOSE   FPHIST.       
    999-EXIT.           
    EXIT.

    HTML Page
    <HTML>
       <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
         <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
       </HEAD>
       <BODY>
           <div id="div_principal">
           <div ID="div_cabec_sup">                    
             <table width="800">
               <tr>
                  <td rowspan="2">
                    <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                    <a onclick="fechar();" title="Fechar">
                      <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
                  </td>                        
               </tr>
               <tr>
                  <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
               </tr>
              </table>
             </div>
             <div id="div_cabec_inf" align="left" >
               <FORM id=form1 name=form1 method=post>
                 <table align="left">                        
                   <tr id="tr_cabec_rotulo">                             
                     <td align="left" width="">Digite o Codigo:&nbsp;                            
                     </td>
                     <td align="left" title="Digite o Codigo">
                       <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                     </td>
                     <td align="right">                                  
                      <select id="select_mes" name="mes">
                        <option value="99">Todos</option>
                        <option value="01">Descontos</option>
                        <option value="02">Vencimentos</option>
                      </select>                              
                     </td>
                     <td align="right" rowspan="2">
                      <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                      </a>
                     </td>
                    </tr>
                   </table>
                  </form>
                 </div>
                 <div id="div_corpo_cabec">
                   <div style='left: 40px; position: relative;'>
                    <br>
                      <FORM id=form1 name=form1 method=post>
                        <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                         <tr id="tr_lista_rotulo">
                           <td align="left" width="120">Código</td>
                           <td align="left" width="780">Descrição</td>                    
                         </tr>
                        </table>
                    </div>
                  </div>
                  <div id="div_corpo_lista">
                    <div style='left: 120px; position: relative; width: 780px;'>
                     <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                      <tr id="tr_lista_dados>
                       <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                       <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                      </tr>
                     </table>
                    </div>
                 </div>
           </div>
       </BODY>
    </HTML> 


     
    There are a number of other errors in your HTML, too. You have no DTD (document type declaration), which will cause browsers to render in "quirks mode" (which is bad). You have multiple elements with the same ID, which is illegal. Your IMG elements are missing ALT attributes, which are required.

    I would strongly recommend running your generated HTML through a validator and correcting these errors until you have valid HTML. An easy way to do this is to use Firefox with the Html Validator add-on. The Web Developer add-on is also very useful when working with HTML and CSS. It's also very useful to have the HTML specification (I recommend HTML 4.0 Strict), available at w3.org, as a reference.

    Non-conforming HTML will "work" in many cases and many browsers - which just makes it much more difficult to debug when it doesn't work in a particular case or with a particular browser.
    D
    • Dominique SacreRocketeer
    • Author
    • Rocketeer
    • 19312 replies
    • April 5, 2012

    [Migrated content. Thread originally posted on 04 April 2012]

    Hello friends,

    I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

    I already have a page designed and i'm using CSS as well.
    What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
    While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

    Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
    The COBOL program       
    $set preprocess(htmlpp) endp       
    IDENTIFICATION DIVISION.       
    PROGRAM-ID.                     FP006.        
    EVIRONMENT DIVISION.       
    CONFIGURATION SECTION.       
    SOURCE-COMPUTER.                S-8000.       
    OBJECT-COMPUTER.                S-8000.       
    SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
    INPUT-OUTPUT SECTION.       
    FILE-CONTROL.
           SELECT FPHIST ASSIGN TO DISK                   
               ORGANIZATION IS INDEXED                   
               ACCESS MODE  IS DYNAMIC                   
               RECORD KEY   IS BOFP05KEY.       
    DATA DIVISION.       
    FILE SECTION.
    FD  FPHIST                
        LABEL RECORD ARE STANDARD                
        VALUE OF FILE-ID "FPHIST".       
        COPY BOFP005.       
    WORKING-STORAGE SECTION.        
    77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
    01 WS-WORK.          
       05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
    01 TELA IS EXTERNAL-FORM.           
       03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
       03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
       03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
       03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
    PROCEDURE DIVISION.       
    000-MAIN-LINE SECTION.       
    000-00.            
        PERFORM 010-INICIO.           
        PERFORM 020-PROCESSAMENTO.           
        PERFORM 999-FIM.           
        STOP    RUN.       
    000-EXIT.           
        EXIT.       
    010-INICIO SECTION.       
    010-00.            
        OPEN    INPUT  FPHIST.       
    010-EXIT.           
        EXIT.       
    020-PROCESSAMENTO SECTION.       
    020-00.           
        EXEC HTML               
           COPY "MENU.HTM".           
        END-EXEC.

        PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
        ACCEPT    tela       
        EVALUATE  web-botao       
           WHEN  'Pesquisar'       
              PERFORM 040-PESQUISA-FPHIST       
           WHEN  'Incluir'       
           WHEN  'Alterar'       
           WHEN  'Excluir'       
              PERFORM 999-FIM       
           WHEN OTHER       
              PERFORM 999-FIM       
        END-EVALUATE.       
    020-EXIT.           
        EXIT.       
    030-LISTA-TODOS SECTION.       
    030-00.
        READ    FPHIST NEXT RECORD                   
           AT END                   
              MOVE 01 TO WS-FIM                   
              GO TO 030-EXIT.
        MOVE BOFP05COD  TO disp-codigo.          
        MOVE BOFP05NOME TO disp-desc.
        EXEC HTML           
           <tr>             
               <td align="center" width="120" id="disp_codigo">             
                :disp-codigo             
               </td>             
               <td align="left" width="780" id="disp_desc">             
                :disp-desc             
               </td>           
           </tr>          
        END-EXEC.
    030-EXIT.           
        EXIT.       
    040-PESQUISA-FPHIST SECTION.       
    040-00.
        READ    FPHIST                   
           INVALID KEY                   
              MOVE HIGH-VALUES TO BOFP05KEY                   
              GO TO 040-EXIT.       
    999-FIM SECTION.       
    999-00.            
        CLOSE   FPHIST.       
    999-EXIT.           
    EXIT.

    HTML Page
    <HTML>
       <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
         <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
       </HEAD>
       <BODY>
           <div id="div_principal">
           <div ID="div_cabec_sup">                    
             <table width="800">
               <tr>
                  <td rowspan="2">
                    <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                    <a onclick="fechar();" title="Fechar">
                      <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
                  </td>                        
               </tr>
               <tr>
                  <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
               </tr>
              </table>
             </div>
             <div id="div_cabec_inf" align="left" >
               <FORM id=form1 name=form1 method=post>
                 <table align="left">                        
                   <tr id="tr_cabec_rotulo">                             
                     <td align="left" width="">Digite o Codigo:&nbsp;                            
                     </td>
                     <td align="left" title="Digite o Codigo">
                       <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                     </td>
                     <td align="right">                                  
                      <select id="select_mes" name="mes">
                        <option value="99">Todos</option>
                        <option value="01">Descontos</option>
                        <option value="02">Vencimentos</option>
                      </select>                              
                     </td>
                     <td align="right" rowspan="2">
                      <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                      </a>
                     </td>
                    </tr>
                   </table>
                  </form>
                 </div>
                 <div id="div_corpo_cabec">
                   <div style='left: 40px; position: relative;'>
                    <br>
                      <FORM id=form1 name=form1 method=post>
                        <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                         <tr id="tr_lista_rotulo">
                           <td align="left" width="120">Código</td>
                           <td align="left" width="780">Descrição</td>                    
                         </tr>
                        </table>
                    </div>
                  </div>
                  <div id="div_corpo_lista">
                    <div style='left: 120px; position: relative; width: 780px;'>
                     <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                      <tr id="tr_lista_dados>
                       <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                       <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                      </tr>
                     </table>
                    </div>
                 </div>
           </div>
       </BODY>
    </HTML> 


     
    Thanks Cris, that worked out.

    Two questions,
    A - How would i go about updating values in that same table?

    What i'm trying to do is this:

    1- Retrieve all records and populate table - OK
    2 - User perform search for an specific record
    3 - Clear current lines on the table
    4 - Obtain ISAM record (no problems here)
    5 - Display record as a TD

    This must happen all in the same page... i've thought about calling the page again, and just create one td, but don't know if that would work out. If the above is possible (update a current page TD value) this is preferable.

    B - Is it possible for COBOL to see an image as a button?
    I would like not to use the submit buttons.

    Thanks!
    Chris Glazier
    Forum|alt.badge.img+2
    • Chris GlazierModerator
    • Moderator
    • 3697 replies
    • April 5, 2012

    [Migrated content. Thread originally posted on 04 April 2012]

    Hello friends,

    I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

    I already have a page designed and i'm using CSS as well.
    What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
    While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

    Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
    The COBOL program       
    $set preprocess(htmlpp) endp       
    IDENTIFICATION DIVISION.       
    PROGRAM-ID.                     FP006.        
    EVIRONMENT DIVISION.       
    CONFIGURATION SECTION.       
    SOURCE-COMPUTER.                S-8000.       
    OBJECT-COMPUTER.                S-8000.       
    SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
    INPUT-OUTPUT SECTION.       
    FILE-CONTROL.
           SELECT FPHIST ASSIGN TO DISK                   
               ORGANIZATION IS INDEXED                   
               ACCESS MODE  IS DYNAMIC                   
               RECORD KEY   IS BOFP05KEY.       
    DATA DIVISION.       
    FILE SECTION.
    FD  FPHIST                
        LABEL RECORD ARE STANDARD                
        VALUE OF FILE-ID "FPHIST".       
        COPY BOFP005.       
    WORKING-STORAGE SECTION.        
    77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
    01 WS-WORK.          
       05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
    01 TELA IS EXTERNAL-FORM.           
       03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
       03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
       03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
       03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
    PROCEDURE DIVISION.       
    000-MAIN-LINE SECTION.       
    000-00.            
        PERFORM 010-INICIO.           
        PERFORM 020-PROCESSAMENTO.           
        PERFORM 999-FIM.           
        STOP    RUN.       
    000-EXIT.           
        EXIT.       
    010-INICIO SECTION.       
    010-00.            
        OPEN    INPUT  FPHIST.       
    010-EXIT.           
        EXIT.       
    020-PROCESSAMENTO SECTION.       
    020-00.           
        EXEC HTML               
           COPY "MENU.HTM".           
        END-EXEC.

        PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
        ACCEPT    tela       
        EVALUATE  web-botao       
           WHEN  'Pesquisar'       
              PERFORM 040-PESQUISA-FPHIST       
           WHEN  'Incluir'       
           WHEN  'Alterar'       
           WHEN  'Excluir'       
              PERFORM 999-FIM       
           WHEN OTHER       
              PERFORM 999-FIM       
        END-EVALUATE.       
    020-EXIT.           
        EXIT.       
    030-LISTA-TODOS SECTION.       
    030-00.
        READ    FPHIST NEXT RECORD                   
           AT END                   
              MOVE 01 TO WS-FIM                   
              GO TO 030-EXIT.
        MOVE BOFP05COD  TO disp-codigo.          
        MOVE BOFP05NOME TO disp-desc.
        EXEC HTML           
           <tr>             
               <td align="center" width="120" id="disp_codigo">             
                :disp-codigo             
               </td>             
               <td align="left" width="780" id="disp_desc">             
                :disp-desc             
               </td>           
           </tr>          
        END-EXEC.
    030-EXIT.           
        EXIT.       
    040-PESQUISA-FPHIST SECTION.       
    040-00.
        READ    FPHIST                   
           INVALID KEY                   
              MOVE HIGH-VALUES TO BOFP05KEY                   
              GO TO 040-EXIT.       
    999-FIM SECTION.       
    999-00.            
        CLOSE   FPHIST.       
    999-EXIT.           
    EXIT.

    HTML Page
    <HTML>
       <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
         <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
       </HEAD>
       <BODY>
           <div id="div_principal">
           <div ID="div_cabec_sup">                    
             <table width="800">
               <tr>
                  <td rowspan="2">
                    <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                    <a onclick="fechar();" title="Fechar">
                      <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
                  </td>                        
               </tr>
               <tr>
                  <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
               </tr>
              </table>
             </div>
             <div id="div_cabec_inf" align="left" >
               <FORM id=form1 name=form1 method=post>
                 <table align="left">                        
                   <tr id="tr_cabec_rotulo">                             
                     <td align="left" width="">Digite o Codigo:&nbsp;                            
                     </td>
                     <td align="left" title="Digite o Codigo">
                       <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                     </td>
                     <td align="right">                                  
                      <select id="select_mes" name="mes">
                        <option value="99">Todos</option>
                        <option value="01">Descontos</option>
                        <option value="02">Vencimentos</option>
                      </select>                              
                     </td>
                     <td align="right" rowspan="2">
                      <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                      </a>
                     </td>
                    </tr>
                   </table>
                  </form>
                 </div>
                 <div id="div_corpo_cabec">
                   <div style='left: 40px; position: relative;'>
                    <br>
                      <FORM id=form1 name=form1 method=post>
                        <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                         <tr id="tr_lista_rotulo">
                           <td align="left" width="120">Código</td>
                           <td align="left" width="780">Descrição</td>                    
                         </tr>
                        </table>
                    </div>
                  </div>
                  <div id="div_corpo_lista">
                    <div style='left: 120px; position: relative; width: 780px;'>
                     <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                      <tr id="tr_lista_dados>
                       <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                       <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                      </tr>
                     </table>
                    </div>
                 </div>
           </div>
       </BODY>
    </HTML> 


     
    Answer to your second question first:

    Yes, you can use an image input in the same manner as a submit button.
    It would look something like the following:

    <INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">

    When it is clicked it generates the same action as a submit button so they can be used interchangably.

    Now your second question really is a matter of understanding how a browser renders an HTML page and how a CGI program and a browser interface to each other.

    Dynamic update is possible using Ajax and other newer technologies but in standard HTML like you are using it basically works like:
    1. HTML page is displayed in browser.
    2. submit button triggers form action to execute CGI program (COBOL .EXE)
    3. CGI program reads input data from form.
    4. CGI program outputs a new HTML page (can be same one but must be complete page)
    5. CGI program ends.
    6. Start at 1. again.

    My advice (and I am not a web page design expert) would be to have one HTML page that controls the table output but it should be a limited number of items so the COBOL occurs clause can deal with it. You might look at doing paging to go forwards and backwards but this will require some saving of state either in a hidden field or in a file on the server.

    Net Express has such a state mechanism that you can call in your programs to save and retrieve state between page invocations.

    You should create a link from the items in the table so that when the user clicks on the link the COBOL program will receive the row information and can then output a second form which contains the selected record for editing.

    When that form is complete it would post back to a CGI program that handled the update of the data and displays the table page again.

    I know that this is new to you but this is all very archaic technology and there are much easier methods of accomplishinmg the task at hand.

    Have you looked at Visual COBOL for Visual Studio?
    This supports the development of ASP.NET web sites and web applications.

    In ASP.NET you can use high level server controls like gridviews, listviews etc., that handle most of the underlying plumbing for you and you can concentrate on application business logic instead of the details of how to display the data and get it into COBOL.

    Or even in the Net Express product that you have there is a product called Form Designer that can be used to design HTML pages and forms and it will automatically generate the COBOL copybooks and full applications to interface with the input fields on your forms.

    There is even an option to generate a full application from a database query that will generate the html forms for you to display records in a table format or as a single record on the page and allows you to switch between the two views.

    Others may have some better ideas as to how you can accomplish your mission but that is my view for what it is worth...
    D
    • Dominique SacreRocketeer
    • Author
    • Rocketeer
    • 19312 replies
    • April 5, 2012

    [Migrated content. Thread originally posted on 04 April 2012]

    Hello friends,

    I'm new to COBOL CGI, and i'm trying to create an dynamic table, meaning X <tr></tr> for X ISAM Records.

    I already have a page designed and i'm using CSS as well.
    What i've done is: In my COBOL program before starting to read the file, call EXEC HTML and invoke my page "MENU.HTM".
    While reading the record EXEC HTML creating a <TR> with two TDS (Code, Name) </tr>.

    Now i'm doubt wheter EXEC HTML is inserting this in my code, or after it.. the records do show in the right place, one after the other, however they do not get any of the styles defined on the CSS.
    The COBOL program       
    $set preprocess(htmlpp) endp       
    IDENTIFICATION DIVISION.       
    PROGRAM-ID.                     FP006.        
    EVIRONMENT DIVISION.       
    CONFIGURATION SECTION.       
    SOURCE-COMPUTER.                S-8000.       
    OBJECT-COMPUTER.                S-8000.       
    SPECIAL-NAMES.            DECIMAL-POINT IS COMMA.       
    INPUT-OUTPUT SECTION.       
    FILE-CONTROL.
           SELECT FPHIST ASSIGN TO DISK                   
               ORGANIZATION IS INDEXED                   
               ACCESS MODE  IS DYNAMIC                   
               RECORD KEY   IS BOFP05KEY.       
    DATA DIVISION.       
    FILE SECTION.
    FD  FPHIST                
        LABEL RECORD ARE STANDARD                
        VALUE OF FILE-ID "FPHIST".       
        COPY BOFP005.       
    WORKING-STORAGE SECTION.        
    77 VAR-CONTINUA            PIC X(01)  VALUE SPACES.        
    01 WS-WORK.          
       05 WS-FIM                  PIC 9(02) VALUE ZEROS.        
    01 TELA IS EXTERNAL-FORM.           
       03 acc-codigo          PIC 9(02) IDENTIFIED BY "acc_codigo".          
       03 disp-codigo         PIC 9(02) IDENTIFIED BY "disp_codigo".          
       03 disp-desc           PIC X(20) IDENTIFIED BY "disp_desc".           
       03 web-botao           PIC X(10) IDENTIFIED BY "botao".       
    PROCEDURE DIVISION.       
    000-MAIN-LINE SECTION.       
    000-00.            
        PERFORM 010-INICIO.           
        PERFORM 020-PROCESSAMENTO.           
        PERFORM 999-FIM.           
        STOP    RUN.       
    000-EXIT.           
        EXIT.       
    010-INICIO SECTION.       
    010-00.            
        OPEN    INPUT  FPHIST.       
    010-EXIT.           
        EXIT.       
    020-PROCESSAMENTO SECTION.       
    020-00.           
        EXEC HTML               
           COPY "MENU.HTM".           
        END-EXEC.

        PERFORM 030-LISTA-TODOS UNTIL WS-FIM = 01.
        ACCEPT    tela       
        EVALUATE  web-botao       
           WHEN  'Pesquisar'       
              PERFORM 040-PESQUISA-FPHIST       
           WHEN  'Incluir'       
           WHEN  'Alterar'       
           WHEN  'Excluir'       
              PERFORM 999-FIM       
           WHEN OTHER       
              PERFORM 999-FIM       
        END-EVALUATE.       
    020-EXIT.           
        EXIT.       
    030-LISTA-TODOS SECTION.       
    030-00.
        READ    FPHIST NEXT RECORD                   
           AT END                   
              MOVE 01 TO WS-FIM                   
              GO TO 030-EXIT.
        MOVE BOFP05COD  TO disp-codigo.          
        MOVE BOFP05NOME TO disp-desc.
        EXEC HTML           
           <tr>             
               <td align="center" width="120" id="disp_codigo">             
                :disp-codigo             
               </td>             
               <td align="left" width="780" id="disp_desc">             
                :disp-desc             
               </td>           
           </tr>          
        END-EXEC.
    030-EXIT.           
        EXIT.       
    040-PESQUISA-FPHIST SECTION.       
    040-00.
        READ    FPHIST                   
           INVALID KEY                   
              MOVE HIGH-VALUES TO BOFP05KEY                   
              GO TO 040-EXIT.       
    999-FIM SECTION.       
    999-00.            
        CLOSE   FPHIST.       
    999-EXIT.           
    EXIT.

    HTML Page
    <HTML>
       <HEAD><TITLE>Atualização do Histórico de Vencimentos / Descontos</TITLE> 
         <link rel="stylesheet" type="text/css" href="estilo.css" /> <meta http-equiv="Content-Type"   Content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META content="NetExpress 4.0" name="GENERATOR">
       </HEAD>
       <BODY>
           <div id="div_principal">
           <div ID="div_cabec_sup">                    
             <table width="800">
               <tr>
                  <td rowspan="2">
                    <a href="" title="Incluir"><img id="img_botoes" src="b_incluirmenu.png"/></a>
                    <a onclick="fechar();" title="Fechar">
                      <img id="img_botoes" src="b_sair.png" width="51px" height="51px"/></a> 
                  </td>                        
               </tr>
               <tr>
                  <td id="td_cabec_subtitulo" align="right">Cadastros - Vencimentos / Descontos</td>            
               </tr>
              </table>
             </div>
             <div id="div_cabec_inf" align="left" >
               <FORM id=form1 name=form1 method=post>
                 <table align="left">                        
                   <tr id="tr_cabec_rotulo">                             
                     <td align="left" width="">Digite o Codigo:&nbsp;                            
                     </td>
                     <td align="left" title="Digite o Codigo">
                       <input type="text" name="acc_codigo" size="02" maxlength="02" />                            
                     </td>
                     <td align="right">                                  
                      <select id="select_mes" name="mes">
                        <option value="99">Todos</option>
                        <option value="01">Descontos</option>
                        <option value="02">Vencimentos</option>
                      </select>                              
                     </td>
                     <td align="right" rowspan="2">
                      <a onclick="enviar()" id="link_pesq" title="Pesquisar"><img id="img_botoes" src="b_pesquisar.png"/>
                      </a>
                     </td>
                    </tr>
                   </table>
                  </form>
                 </div>
                 <div id="div_corpo_cabec">
                   <div style='left: 40px; position: relative;'>
                    <br>
                      <FORM id=form1 name=form1 method=post>
                        <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'>  
                         <tr id="tr_lista_rotulo">
                           <td align="left" width="120">Código</td>
                           <td align="left" width="780">Descrição</td>                    
                         </tr>
                        </table>
                    </div>
                  </div>
                  <div id="div_corpo_lista">
                    <div style='left: 120px; position: relative; width: 780px;'>
                     <table cellspacing="2" style='border-collapse: collapse' cellpadding='2'> 
                      <tr id="tr_lista_dados>
                       <td align="center" width="120" id="disp_codigo"><b> testes  </b></td>  
                       <td align="left" width="780" id="disp_desc"><b> teste  </b></td>                            
                      </tr>
                     </table>
                    </div>
                 </div>
           </div>
       </BODY>
    </HTML> 


     
    The code that you have, including the commented out code, should do what you want (once the bugs are out of it). On the initial call you'd produce a table of records, then use a key to re-enter the program and generate the page with just the one entry on it. As the browser renders the entire page that you send to it, you're not going to be able to just send a TD line back to put into the table - the only way to accomplish that that I can think of would be to use Javascript and CSS to hide all the non-selected lines.

    As well as you can use which lets you change the button appearance through CSS.


    Terms & ConditionsAccessibility statement