006 - Mostrando dados de multiplas tabelas

Agnaldo · Janeiro 4, 2014

Tempo estimado de leitura: menos de 10 minutos

Mostrar dados de uma, duas ou dez tabelas é praticamente a mesma coisa. Não é porque estamos no ambiente web que isso se altera. A 4GL (e um pouco de codificação) resolvem o problema.

O exemplo abaixo permite mostrar os clientes e suas ordens de compra.

PHP:

DEFINE VARIABLE corDeFundo AS CHARACTER. /* Include com as funcionalidades web */ { src/web/method/wrap-cgi.i } /* Gera o header html */ output-content-type("text/html"). /* Abre a página html */ {&out} '<html>' SKIP '<head>' SKIP '<title>Exemplo</title>' SKIP '</head>' SKIP '<body>' SKIP(1). /* Conteúdo da página html */ FIND FIRST Customer NO-LOCK NO-ERROR. IF NOT AVAILABLE Customer THEN {&out} 'Tabela esta vázia' SKIP. ELSE DO: {&out} '<div align="center">' SKIP ' <table border="1" cellspacing="1" cellpadding="1">' SKIP. FOR EACH Customer NO-LOCK: {&out} ' <tr>' SKIP ' <td colspan="5"><b>Cliente ' Customer.Cust-Num FORMAT "9999" ' - ' Customer.Name '</b></td>' SKIP ' </tr>' SKIP. FIND FIRST Order OF Customer NO-LOCK NO-ERROR. IF NOT AVAILABLE Order THEN {&out} ' <tr>' SKIP ' <td colspan="5" align="center"><i>Cliente não possui ordens de compra</i></td>' SKIP ' </tr>' SKIP. ELSE DO: {&out} ' <tr align="center" bgcolor="LightCyan">' SKIP ' <td><b>Ordem</b></td>' SKIP ' <td><b>Data</b></td>' SKIP ' <td><b>Embarque</b></td>' SKIP ' <td><b>Prev. entrega</b></td>' SKIP ' <td><b>Representante de venda</b></td>' SKIP ' </tr>' SKIP. FOR EACH Order OF Customer NO-LOCK: IF corDeFundo = "#F0FFFF" THEN ASSIGN corDeFundo = "#F0F8FF". ELSE ASSIGN corDeFundo = "#F0FFFF". FIND SalesRep WHERE SalesRep.Sales-Rep = Order.Sales-Rep NO-LOCK NO-ERROR. {&out} ' <tr align="center" bgcolor="' corDeFundo '">' SKIP ' <td>' Order.Order-Num FORMAT "9999" '</td>' SKIP ' <td>' Order.Order-Date FORMAT "99/99/9999" '</td>' SKIP ' <td>' Order.Ship-Date FORMAT "99/99/9999" '</td>' SKIP ' <td>' Order.Promise-Date FORMAT "99/99/9999" '</td>' SKIP ' <td align="left">' IF AVAILABLE SalesRep THEN SalesRep.Rep-Name ELSE Order.Sales-Rep '</td>' SKIP ' </tr>' SKIP. END. END. END. {&out} ' </table>' SKIP '</div>' SKIP. END. /* Fecha a página html */ {&out} '</body>' SKIP '</html>' SKIP(1).

Apresentando uma saída semelhante a essa:

Continua...

Agnaldo · Fevereiro 2, 2014

Mas se usarmos uma ou outra funcionalidade do CSS e do Javascript, podemos ter algo mais interessante.
Vejamos a código abaixo, que é bastante igual ao anterior, porém com alguns "extras" a mais.
Neste, fizemos igual ao anterior, mostrando o dados do cliente(tabela Customer) e suas ordens de compra (tabela Order).
Mas se olharmos com atenção, agora estamos também lendo os itens da ordem de compra (tabela Order-Line).
Porém, tais dados (itens da ordem) não estão visíveis quando a tela é mostrada.
Isso porque foi deixada a linha, com a tabela (table) que mostra os itens "não visível".
O comando style="display: none" fez isso por nós.

O funcionamento é, então, assim:
São mostrados o cliente e suas ordens de compra.
Os itens da ordem de compra estão ocultos.
Para que eles apareçam, devemos da um click na linha da ordem à qual queremos mostrar os itens.
Os itens, da ordem clicada, são revelados.
Para oculta-los novamente, basta clicar na linha da ordem à qual eles pertencem.

Quem faz esse trabalho de mostrar/ocultar é um pedaço de código Javascript.
Para tanto, foi preciso dar um nome, um ID, para a linha que será tratada.

PHP:

{&out} '      <tr align="center" id="itensDaOrdem' Order.Order-Num '" style="display: none">' SKIP

Notem a propriedade "id".
Dessa forma, na linha da ordem de compra, pudemos acessar "esse" id:

PHP:

{&out} '      <tr align="center" bgcolor="' corDeFundo '" onClick="linha = document.getElementById(~'itensDaOrdem' Order.Order-Num '~'); if (linha.style.display==~'none~') linha.style.display=~'table-row~'; else linha.style.display=~'none~';">' SKIP

Essa parte do código simplesmente testa o estilo display, deixando o bloco oculto (none) ou visível (table-row).

Obs: Normalmente usamos display:block. Porém block funciona bem para div´s. Sobre IE block seria suficiente para uma linha (<tr>). Porém sobre Chrome ele não faria correto. Por isso foi usado display:table-row, pois é especifico para tables, ao contrário de block, que seria mais genérico.

PHP:

DEFINE VARIABLE corDeFundo AS CHARACTER. /* Include com as funcionalidades web */ { src/web/method/wrap-cgi.i } /* Gera o header html */ output-content-type("text/html"). /* Abre a página html */ {&out} '<html>' SKIP        '<head>' SKIP        '<title>Exemplo</title>' SKIP        '</head>' SKIP        '<body>' SKIP(1). /* Conteúdo da página html */ FIND FIRST Customer NO-LOCK NO-ERROR. IF NOT AVAILABLE Customer    THEN        {&out} 'Tabela esta vázia' SKIP.    ELSE        DO:           {&out} '<div align="center">' SKIP                  '   <table border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse">' SKIP.           FOR EACH Customer NO-LOCK:               {&out} '      <tr>' SKIP                      '         <td colspan="5"><b>Cliente ' Customer.Cust-Num FORMAT "9999" ' - ' Customer.Name '</b></td>' SKIP                      '      </tr>' SKIP.               FIND FIRST Order OF Customer NO-LOCK NO-ERROR.               IF NOT AVAILABLE Order                THEN                    {&out} '      <tr>' SKIP                           '         <td colspan="5" align="center"><i>Cliente não possui ordens de compra</i></td>' SKIP                           '      </tr>' SKIP.                ELSE                    DO:                       {&out} '      <tr align="center" bgcolor="LightCyan">' SKIP                              '         <td><b>Ordem</b></td>' SKIP                              '         <td><b>Data</b></td>' SKIP                              '         <td><b>Embarque</b></td>' SKIP                              '         <td><b>Prev. entrega</b></td>' SKIP                              '         <td><b>Representante de venda</b></td>' SKIP                              '      </tr>' SKIP.                       FOR EACH Order OF Customer NO-LOCK:                           IF corDeFundo = "#F0FFFF"                              THEN                                  ASSIGN corDeFundo = "#F0F8FF".                              ELSE                                  ASSIGN corDeFundo = "#F0FFFF".                           FIND SalesRep WHERE SalesRep.Sales-Rep = Order.Sales-Rep NO-LOCK NO-ERROR.                           {&out} '      <tr align="center" bgcolor="' corDeFundo '" onClick="linha = document.getElementById(~'itensDaOrdem' Order.Order-Num '~'); if (linha.style.display==~'none~') linha.style.display=~'table-row~'; else linha.style.display=~'none~';">' SKIP                                  '         <td>' Order.Order-Num FORMAT "9999" '</td>' SKIP                                  '         <td>' Order.Order-Date FORMAT "99/99/9999" '</td>' SKIP                                  '         <td>' Order.Ship-Date FORMAT "99/99/9999" '</td>' SKIP                                  '         <td>' Order.Promise-Date FORMAT "99/99/9999" '</td>' SKIP                                  '         <td align="left">' IF AVAILABLE SalesRep THEN SalesRep.Rep-Name ELSE Order.Sales-Rep '</td>' SKIP                                  '      </tr>' SKIP.                           FIND FIRST Order-Line OF Order NO-LOCK.                           IF AVAILABLE Order-Line                              THEN                                  DO:                                     {&out} '      <tr align="center" id="itensDaOrdem' Order.Order-Num '" style="display: none">' SKIP                                            '         <td colspan="5">' SKIP                                            '            <table bgcolor="' corDeFundo '" border="1" cellspacing="0" cellpadding="2" width=100%" style="border-collapse:collapse">' SKIP                                            '               <tr>' SKIP                                            '                  <td colspan="7" align="center"><b><i>Itens da ordem de compra ' Order.Order-Num FORMAT "9999" '</b></i></td>' SKIP                                            '               </tr>' SKIP                                            '               <tr align="center">' SKIP                                            '                  <td><b>Seq</b>' SKIP                                            '                  <td><b>Item</b></td>' SKIP                                            '                  <td><b>Descrição</b></td>' SKIP                                            '                  <td><b>Qtda.</b></td>' SKIP                                            '                  <td><b>Preço</b></td>' SKIP                                            '                  <td><b>Desconto</b></td>' SKIP                                            '                  <td><b>Total</b></td>' SKIP                                            '               </tr>' SKIP.                                     FOR EACH Order-Line OF Order NO-LOCK:                                          FIND Item WHERE Item.Item-Num = Order-Line.Item-Num NO-LOCK NO-ERROR.                                          {&out} '               <tr>' SKIP                                                 '                  <td align="center">' Order-Line.Line-Num FORMAT "999" '</td>' SKIP                                                 '                  <td align="center">' Order-Line.Item-Num FORMAT "99999" '</td>' SKIP                                                 '                  <td>' (IF AVAILABLE Item THEN Item.Item-Name ELSE "Não cadastrado") '</td>' SKIP                                                 '                  <td align="right">' Order-Line.Qty '</td>' SKIP                                                 '                  <td align="right">' Order-Line.Price FORMAT "->>>,>>9.99" '</td>' SKIP                                                 '                  <td align="right">' Order-Line.Discount ' %</td>' SKIP                                                 '                  <td align="right">' Order-Line.Extended-Price FORMAT "->>>,>>9.99" '</td>' SKIP                                                 '               </tr>' SKIP.                                     END.                                     {&out} '            </table>' SKIP                                            '         </td>' SKIP                                            '      </tr>' SKIP.                                  END.                       END.                    END.           END.           {&out} '   </table>' SKIP                  '</div>' SKIP.        END. /* Fecha a página html */ {&out} '</body>' SKIP        '</html>' SKIP(1).

Temos então uma saída como esta:

E quando clicamos numa linha de ordem de compra, por exemplo, no cliente 1, ordem 0079, iremos revelar os items da mesma, conforme abaixo.

Para ocultar os itens novamente, basta clicar sobre a linha da ordem de compra em questão.

continua...

Agnaldo · Janeiro 21, 2014

É preciso que se diga que esse exemplo (programa) talvez tenha ficado um pouco extenso.
Isso pode tornar a leitura e interpretação do código meio nublado.
Mas é preciso ressaltar que é apenas mais um programa em 4GL Progress.
Sendo assim, podemos quebra-lo em procedures e funções.
Poderíamos deixar um "bloco principal", com as regras e for each´s, deixando a parte de "display" dos dados ({&out´s}), dentro de funções.
Algo parecido com isso:

PHP:

/* ************************************************************************* */ /* *** *** */ /* *** Bloco de variaveis *** */ /* *** *** */ /* ************************************************************************* */ DEFINE VARIABLE corDeFundo AS CHARACTER. /* ************************************************************************* */ /* *** *** */ /* *** Bloco de includes *** */ /* *** *** */ /* ************************************************************************* */ /* Include com as funcionalidades web */ { src/web/method/wrap-cgi.i } /* ************************************************************************* */ /* *** *** */ /* *** Bloco de funções *** */ /* *** *** */ /* ************************************************************************* */ FUNCTION mostraCabecalhoDasOrdens RETURNS LOGICAL (). {&out} ' <tr align="center" bgcolor="LightCyan">' SKIP ' <td><b>Ordem</b></td>' SKIP ' <td><b>Data</b></td>' SKIP ' <td><b>Embarque</b></td>' SKIP ' <td><b>Prev. entrega</b></td>' SKIP ' <td><b>Representante de venda</b></td>' SKIP ' </tr>' SKIP. END FUNCTION. /* mostraCabecalhoDasOrdens RETURNS LOGICAL () */ FUNCTION mostraDadosDasOrdens RETURNS LOGICAL (). {&out} ' <tr align="center" bgcolor="' corDeFundo '" onClick="linha = document.getElementById(~'itensDaOrdem' Order.Order-Num '~'); if (linha.style.display==~'none~') linha.style.display=~'table-row~'; else linha.style.display=~'none~';">' SKIP ' <td>' Order.Order-Num FORMAT "9999" '</td>' SKIP ' <td>' Order.Order-Date FORMAT "99/99/9999" '</td>' SKIP ' <td>' Order.Ship-Date FORMAT "99/99/9999" '</td>' SKIP ' <td>' Order.Promise-Date FORMAT "99/99/9999" '</td>' SKIP ' <td align="left">' IF AVAILABLE SalesRep THEN SalesRep.Rep-Name ELSE Order.Sales-Rep '</td>' SKIP ' </tr>' SKIP. END FUNCTION. /* mostraDadosDasOrdens RETURNS LOGICAL () */ FUNCTION mostraItensDasOrdens RETURNS LOGICAL (). {&out} ' <tr align="center" id="itensDaOrdem' Order.Order-Num '" style="display: none">' SKIP ' <td colspan="5">' SKIP ' <table bgcolor="' corDeFundo '" border="1" cellspacing="0" cellpadding="2" width=100%" style="border-collapse:collapse">' SKIP ' <tr>' SKIP ' <td colspan="7" align="center"><b><i>Itens da ordem de compra ' Order.Order-Num FORMAT "9999" '</b></i></td>' SKIP ' </tr>' SKIP ' <tr align="center">' SKIP ' <td><b>Seq</b>' SKIP ' <td><b>Item</b></td>' SKIP ' <td><b>Descrição</b></td>' SKIP ' <td><b>Qtda.</b></td>' SKIP ' <td><b>Preço</b></td>' SKIP ' <td><b>Desconto</b></td>' SKIP ' <td><b>Total</b></td>' SKIP ' </tr>' SKIP. FOR EACH Order-Line OF Order NO-LOCK: FIND Item WHERE Item.Item-Num = Order-Line.Item-Num NO-LOCK NO-ERROR. {&out} ' <tr>' SKIP ' <td align="center">' Order-Line.Line-Num FORMAT "999" '</td>' SKIP ' <td align="center">' Order-Line.Item-Num FORMAT "99999" '</td>' SKIP ' <td>' (IF AVAILABLE Item THEN Item.Item-Name ELSE "Não cadastrado") '</td>' SKIP ' <td align="right">' Order-Line.Qty '</td>' SKIP ' <td align="right">' Order-Line.Price FORMAT "->>>,>>9.99" '</td>' SKIP ' <td align="right">' Order-Line.Discount ' %</td>' SKIP ' <td align="right">' Order-Line.Extended-Price FORMAT "->>>,>>9.99" '</td>' SKIP ' </tr>' SKIP. END. {&out} ' </table>' SKIP ' </td>' SKIP ' </tr>' SKIP. END FUNCTION. /* dadosDasOrdens RETURNS LOGICAL () */ /* ************************************************************************* */ /* *** *** */ /* *** Bloco principal (Main Block) *** */ /* *** *** */ /* ************************************************************************* */ /* Gera o header html */ output-content-type("text/html"). /* Abre a página html */ {&out} '<html>' SKIP '<head>' SKIP '<title>Exemplo</title>' SKIP '</head>' SKIP '<body>' SKIP(1). /* Conteúdo da página html */ FIND FIRST Customer NO-LOCK NO-ERROR. IF NOT AVAILABLE Customer THEN {&out} 'Tabela esta vázia' SKIP. ELSE DO: {&out} '<div align="center">' SKIP ' <table border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse">' SKIP. FOR EACH Customer NO-LOCK: {&out} ' <tr>' SKIP ' <td colspan="5"><b>Cliente ' Customer.Cust-Num FORMAT "9999" ' - ' Customer.Name '</b></td>' SKIP ' </tr>' SKIP. FIND FIRST Order OF Customer NO-LOCK NO-ERROR. IF NOT AVAILABLE Order THEN {&out} ' <tr>' SKIP ' <td colspan="5" align="center"><i>Cliente não possui ordens de compra</i></td>' SKIP ' </tr>' SKIP. ELSE DO: mostraCabecalhoDasOrdens(). FOR EACH Order OF Customer NO-LOCK: IF corDeFundo = "#F0FFFF" THEN ASSIGN corDeFundo = "#F0F8FF". ELSE ASSIGN corDeFundo = "#F0FFFF". FIND SalesRep WHERE SalesRep.Sales-Rep = Order.Sales-Rep NO-LOCK NO-ERROR. mostraDadosDasOrdens(). FIND FIRST Order-Line OF Order NO-LOCK. IF AVAILABLE Order-Line THEN mostraItensDasOrdens(). END. END. END. {&out} ' </table>' SKIP '</div>' SKIP. END. /* Fecha a página html */ {&out} '</body>' SKIP '</html>' SKIP(1).

Curtiu?
Até o próximo post

Agnaldo · Janeiro 16, 2015

.

Logar ou Criar uma Conta

006 - Mostrando dados de multiplas tabelas

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Compartilhe esta Página

Logar ou Criar uma Conta

006 - Mostrando dados de multiplas tabelas

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Agnaldo Membro Ativo

Compartilhe esta Página

Pesquisas Úteis