CobolWeb Com Net Express 5.1

Cobol Web com Net Express 5.1 edition Acessando MySQL

Altair Borges

ListView com paginao, JavaScript, Css e MySQL

Neste tutorial, vou mostrar como criar uma listview usando Net Express 5.1 Edition para

acessar um database MySQL via ODBC. Grande parte dos recursos e conceitos aqui utilizados so os

mesmos do tutorial CobolWeb com Net Express 3.1 - parte 2. O NE ser usado apenas para gerar os

copybooks de comunicao entre o database MySQL e o programa COBOL atravs do OpenESQL

Assistent, editar as regras de negcios e debugar. A interface ficar mais uma vez a cargo do

Dreamweaver. Quer usar outra IDE? Fique a vontade. Este projeto ter um formulrio de login e

duas pginas dinmicas criadas pelo CGI COBOL. Uma de mensagem de acesso negado ou erro de

conexo com o MySQL e a prpria ListView.

Na interface sero usados recursos de HTML5 (alguns no suportados pelo IE8), Css e

funes JavaScript necessrias para manipulao dos eventos ocorridos na listview. O programa

CGI-COBOL utilizar CURSOR e as clusulas LIMIT e OFFSET do MySQL para montar as pginas.

Ser criado tambm um link dinmico para acesso ao programa clientes.exe (a ser implementado

pelo amigo leitor) passando como parmetro o cdigo do cliente e a ao a ser executada.

A navegao poder ser realizada clicando nos botes: pgina inicial, pgina

anterior prxima pgina e pgina final. O usurio tambm poder digitar o nmero da

pgina desejada ou selecion-la na listbox. Ser mostrado o total de pginas e a quantidade de

registros da tabela. Abaixo, o formulrio de login e a listview proposta no projeto.

Pre-processadores:

O Net Express possui os pr-processadores ESQL e EHTML que permitem acessar bases de dados

relacionais embutindo instrues SQL e cdigo HTML dentro de seu programa COBOL.

Com o ESQL voc pode acessar uma base de dados relacional atravs de um driver ODBC

embutindo instrues SQL dentro de seu programa COBOL.

O EHTML permite incluir pginas HTML completas como copyfiles dentro do seu programa bem como, fragmentos de cdigos HTML como copyfiles, ou de sada individuais declaraes

HTML e construir uma pgina completa sob controle CGI-COBOL.

Ferramentas utilizadas no projeto:

Net Express 5.1

MySQL

Dreamweaver Webserver Apache Database SAKILA

Etapas:

Instalar ferramentas acima

Criar uma conexo ODBC

Criar formulrio de login e de mensagem

Criar copybooks (cabec.html, detalhe.html e rodape.html)

Criar projeto vazio com o Net

Conectar ao database via OpenESQL

Testar conexo e gerar copybook customer.cpy a ser inserido do CGI-cobol

Escrever CGI-cobol

Compilar, testar e exportar para o Apache

1 Etapa - Instalar e testar as ferramentas necessrias

Database SAKILA (Criando e povoando o database)

a) Download: http://mysql-tools.com/downloads/mysql-databases/4-sakila-db.html

b) Descompacta o arquivo em C:\TEMP

c) Entre no prompt de comando do MySQL e execute o seguinte comando: mysql -u root p

d) Informe a senha

e) Execute a linha de commando mysql> SOURCE C:/temp/sakila-db/sakila-schema.sql;

f) Quit

2 Etapa - Criar uma conexo ODBC

Este processo bem simples mas para quem ainda no o fez, vamos aos procedimentos:

Painel de controle / Ferramentas administrativas / Fontes de dados ODBC / Fontes de dados de sistema

Caso seu sistema no tenha o drive ODBC ser necessrio a instalao do mesmo.

3 Etapa - Criar formulrio de login

Primeiramente crie a pasta de trabalho C:\Net31\Exemplo03. Se voc tem um formulrio prprio e prefere us-lo fique a vontade apenas altere a linha do link para action="/cgi-

bin/viewmysql.exe" e os nomes dos campos de entrada de dados para scrUsuario e scrSenha. Mas

antes de editar os cdigos HTML importante definir as imagens que sero utilizadas na pgina.

Neste exemplo, a pasta imagens (C:\Net31\Exemplo03\imagens) contm os seguintes

arquivos:

Edite o arquivo login.html conforme cdigo HTML abaixo e salve-o na pasta de trabalho

Dica: Use o (ctrl-c + ctrl-v) para copiar e colar os cdigos deste tutorial.

Cobol Web - Net Express 5.1 ListView MySQL

function validaForm(){

var frm = document.loginform;

if (frm.scrUsuario.value == "")

{

alert("Informe o Usurio");

frm.scrUsuario.focus();

}

else if (frm.scrSenha.value == "")

{

alert("Informe a senha");

frm.scrSenha.focus();

}

else

frm.submit();

}

Cobol Web - Net Express 5.1 -

Listview acessando MySQL

Log in

Usurio:

Usurio.

Senha:

Senha.

By Altair Borges

Edite tambm o arquivo msgacesso.html conforme cdigo HTML abaixo.


Acesso Negado

Edite tambm o arquivo login.css conforme cdigo HTML abaixo.

background: rgba(0, 0, 0, 0.6);

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

border-radius: 7px;

}

.button{

float: right;

margin:10px 55px 10px 0;

font-weight: bold;

line-height: 1;

padding: 6px 10px;

cursor:pointer;

color: #fff;

text-align: center;

text-shadow: 0 -1px 1px #64799e;

/* Background gradient */

background: #a5b8da;

background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));

/* Border style */

border: 1px solid #5c6f91;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

/* Box shadow */

-moz-box-shadow: inset 0 1px 0 0 #aec3e5;

-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;

box-shadow: inset 0 1px 0 0 #aec3e5;

}

.button:hover {

background: #848FB2;

cursor: pointer;

}

.style2 {color: #3333FF}

.style3 {

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 16px;

color: #CC9933;

font-weight: bold;

}

.style5 {color: #3333FF; font-size: 24px; }

.style6 {font-size: 18px}

-->

Alguns recursos no foram suportados pelo IE8. Exemplo o mouseover nos campos de

entrada de dados.

4 Etapa - Criar copybooks (cabec.html, detalhe.html e rodape.html). Todos devero ser

salvos na pasta de trabalho C:\Net31\Exemplo03. A pgina dinmica ser composta por estes

fragmentos de cdigos e ser formatada pelo arquivo myCss.css. Existem tambm 8 funes

escritas em JavaScript que sero utilizadas na navegao da listview. So elas: setaPagina(),

setaPaginaDigitada(), anterior(), primeira(), seguinte(), ultima(), TABEnter() e Tecla() e que foram

iseridas no cabecalho da pgina.

cabec.html

{

p = p + 1;

document.form1.scrPagina.value = p;


}

}

function ultima()

{

document.form1.scrPagina.value = document.form1.scrPaginaFinal.value;


}

Aplicao Cobol Web com Net

Express 5.1/ JavaScript / Css / MySQL

Listview acessando MySQL e usando cursor para paginao

Id

First_name

Last_name

E-mail

Observe que falta o fechamento das tags , e . Isto ser realizado

no arquivo rodape.html. O conceito de pgina dinmica o mesmo de um relatrio. Voc escreve o

cabealho, l o arquivo para imprimir as linhas de detalhes e por ltimo imprime o rodap.

detalhe.html

O arquivo detalhe.html dever ficar dentro do loop do programa COBOL que gera a linha de

detalhe.

:Id

:First_name

:Last_name

:E-mail

Os textos precedidos de dois pontos (:) so campos definidos na working-storage section e

na FD do programa viewmysql.cbl e que recebero dados dinamicamente.

:corfundo Cor da linha da tabela

:Id Id do cliente

:First_name Primeiro nome do cliente

:Last_name Sobrenome do cliente

:E-mail E-mail do cliente

rodape.html

Pgina:

de

end-exec

*> Cdigo cobol dentro da pginha html

perform varying idx from 1 by 1 until idx > wTotalPaginas

if idx = f-scrPagina *> posiciona select

String " N de Linhas: " maskPagina

Delimited by size into strTexto

exec html

Lanamentos: 599

By Altair Borges

No rodap foi inserido o fechamento das tags , e alm de um

perform para montagem da selectbox variando de acordo com a quantidade de pginas encontradas

em wTotalPaginas

Edite o arquivo myCss.css conforme cdigo CSS abaixo e salve-o na pasta de trabalho

C:\Net31\Exemplo03

table{width:80%;

border-collapse:collapse;

margin:1em 0px;} caption {

font-family: "Calibri";

background: #FFCC33;

font-size: 18px; }

th, td {

font-family:"Courier New"; font-size:14px;

font-size-adjust:inherit

padding:.2em;

border:1px solid #fff;}

.centraliza { text-align: center;

}

A estrutura da pgina dinmica est pronta e ser montada pela CGI COBOL.

5 Etapa - Crie o projeto viewmysql vazio com o Net e conecte ao database via OpenESQL

O objetivo do projeto usar a IDE do NE para editar e debugar.

Acessando o database SAKILA atravs do OpenESQL Assistent. Este aplicativo ir lhe auxiliar

na gerao dos copybooks de cdigo COBOL para acessar o database. Estes fragmentos podem ser

includos diretamento no programa cobol pelo Assistent.

O OpenESQL Assistent cria a estrutura de comunicao entre o programa COBOL e o

banco de dados. Se j existir um programa.cbl no projeto e voc clicar cone ser

inserido o cdigo fonte da query no fonte COBOL.

Clique em SQLCA e depois em Host Variable Declarations para gerar as reas de comunicao entre MySQL e Fonte COBOL.

6 Etapa - Escrever o CGI-COBOL viewmysql

Crie um novo programa File / New / Program e salve-o como viewmysql.cbl.

Ele dever ter o seguinte cdigo:

$set preprocess(htmlpp)stephtml endp

$set sql(dbman=odbc, detectdate)

*----------------------------------------------------------------*

* Sistema: Projeto Exemplo do Livro COBOL WEB

* Funo.: ListView - Net Express 5.l acessando MySQL via ODBC

*----------------------------------------------------------------*

program-id. viewmysql.

Author. Altair Borges /2012

configuration section.

special-names. decimal-point is comma.

working-storage section.

01 campos-auxiliares.

03 w-Msg pic x(90) value spaces.

03 wPagina pic 9(04) value 1.

03 wTotalPaginas pic 9(04) value zeros.

03 wRegistros pic 9(06) value zeros.

03 wPosicao pic 9(06) value zeros.

03 wQuantidade pic 9(02) value 15.

03 wResto pic 9(02) value zeros.

03 res pic x(01) value spaces.

03 idx pic 9(05) value zeros.

03 strSelect pic x(50).

03 strTexto pic x(20).

03 wLnk pic x(90).

03 wStatus pic zzzzz.

03 wcodigo pic zz.zzz.

03 maskPagina pic zzzzz.

03 maskPaginaFinal pic zzzzz.

03 ws-cnOdbc pic x(09) value "viewmysql".

*>----------------------------------------------------------------

*> The following field receives ESQL error messages wider than the

*> 70 bytes provided by the SQLCA field SQLERRMC

03 MFSQLMessageText pic x(256).

*> The name of the file used to store server state

03 state-filename pic x(255) value "MF-STATE-SAVE.DAT".

*> Status returned by state maintenance routines

03 server-status pic x comp-x.

03 cores.

05 corFundo pic x(07) value spaces.

05 cor1 pic x(07) value "#e5f1f4".

05 cor2 pic x(07) value "#F0FFF0".

01 HTMLFormLogin is external-form.

03 f-scrUsuario pic x(15) identified by "scrUsuario".

03 f-scrSenha pic x(15) identified by "scrSenha".

01 HTMLFormView is external-form.

03 f-scrPagina pic 9(5) identified by "scrPagina".

03 f-scrPaginaFinal pic 9(5) identified by "scrPaginaFinal".

03 f-scrLinhas pic 9(5) identified by "scrLinhas".

EXEC SQL INCLUDE customer END-EXEC

EXEC SQL INCLUDE SQLCA END-EXEC

exec sql begin declare section end-exec

01 h-customer-id pic 9(04).

01 h-store-id pic 9(04).

01 h-first-name pic x(45).

01 h-last-name pic x(45).

01 h-email pic x(50).

01 h-address-id pic 9(04).

01 h-active pic 9(04).

01 h-create-date pic x(19).

01 h-last-update pic x(19).

exec sql end declare section end-exec.

Procedure division.

perform 1000-inicializa

perform 2000-validaAcesso

perform 3000-processa

perform 4000-finaliza

stop run.

*----------------

1000-inicializa.

call "sstate"

call "MF_CLIENT_STATE_FILE"

using state-filename server-status

accept htmlFormView

accept htmlFormLogin

if f-scrPagina = zeros

move 1 to f-scrPagina

end-if

move f-scrPagina to wPagina

maskPagina

move f-scrPaginaFinal to wTotalPaginas

move f-scrLinhas to wRegistros

Exit.

*------------------

2000-ValidaAcesso.

call "cbl_tolower" using f-scrUsuario by value 15

call "cbl_tolower" using f-scrSenha by value 15

String f-scrusuario "." f-scrsenha delimited by spaces

into w-msg

End-String

exec sql

connect to :ws-cnOdbc user :w-msg

* connect to 'viewMySql' user 'root.12345'

end-exec

if sqlcode not = 0

perform 2100-acessoNegado


end-if.

* if sqlcode not = 0

* exec html

*

* There was an error connecting to the

* database.>br>

* SQLSTATE = :sqlstate

* SQL Error Message = :MFSQLMessageText

*

*

*

* end-exec

* exit program

* stop run

* end-if

Exit.

*------------------

2100-AcessoNegado.

exec html

copy "msgAcesso.html".

end-exec

Exit.

*--------------

3000-processa.

perform 3100-Cabecalho

perform 3200-leitura

Exit.

*---------------

3100-cabecalho.

exec html

copy "cabec.html".

end-exec

Exit.

*-------------

3200-leitura.

if f-scrPaginaFinal not equal zeros

perform 3210-posiciona-ponteiro

perform 3220-mostra-dados

Exit Paragraph

end-if

*> Pega a quantidade de linhas da tabela

if wRegistros = 0

exec sql

select count(*) into :wRegistros from `customer`

end-exec

move wRegistros to f-scrlinhas

*> Calcula o nmero de pginas

divide wRegistros by wQuantidade giving

wTotalPaginas remainder wResto

end-divide

if wResto > 0

add 1 to wTotalPaginas

end-if

move wTotalPaginas to f-scrPaginaFinal maskPaginaFinal

end-if

perform 3210-posiciona-ponteiro

perform 3220-mostra-dados

Exit.

*------------------------

3210-Posiciona-ponteiro.

compute wPosicao = (wQuantidade * wPagina) - wQuantidade

Exit.

*------------------

3220-Mostra-dados.

Exec sql

Declare csr1 cursor for select

À`.`customer_id`

,À`.`first_name`

,À`.`last_name`

,À`.èmail`

from `customer` A order by À`.`customer_id`

limit :wQuantidade offset :wPosicao;

End-exec

if sqlcode not = 0

perform 9000-msg-error

end-if

Exec sql

open csr1

End-exec

if sqlcode not = 0

perform 9000-msg-error

end-if

Perform until sqlcode not = zero

Exec sql

fetch csr1 into

:h-customer-id

,:h-first-name

,:h-last-name

,:h-email

End-exec

if sqlcode = 0

perform 3230-Detalhe

end-if

End-Perform

Exec sql

close csr1

End-exec

perform 3240-Rodape

Exit.

*-------------

3230-detalhe.

if corFundo = spaces or corFundo = cor1

move cor2 to corFundo

else

move cor1 to corFundo

end-if

initialize wlnk

String *> link p/ o programa clientes.exe a ser implementado

''h-customer-id''

into wlnk

end-string

move h-customer-id to wcodigo

exec html

:wlnk

:h-first-name

:h-last-name

:h-email

end-exec

Exit.

*------------

3240-rodape.

exec html

copy "rodape.html".

end-exec

Exit.

*--------------

4000-finaliza.

perform 4100-disconecta

exit program

stop run

Exit.

*----------------

4100-disconecta.

exec sql

disconnect current

end-exec

Exit.

*---------------

9000-msg-Error.

move sqlcode to wStatus

exec html

Cdigo do Erro: :wStatus :SQLERRMC

end-exec


Exit.

*----------------------------Fim---------------------------------*

7 Etapa Compilar

Nesta etapa ser gerado o EXE e isto pode ser feito de duas formas: Usando a IDE do NE ou

atravs do Prompt de comando.

OPO (A): Usando a IDE do Net Express

EXE gerado hora de configurar o Animate, mas antes, preciso alterar a porta do

WebServer SOLO, pois ele por padro usa a porta 80 a mesma que, neste caso, est sendo usada

pelo Apache. Altere para 8686, por exemplo. Menu / Options / Project

Carregue o SOLO Menu / Tools / Solo

O cone aparecer na bandeja do Windows

D um duplo Clique e verifique se a configurao est igual figura abaixo:

Configurando o Animate Menu / Animate / Settings

Na caixa de texto Start Animating at informe: http://127.0.0.1/COBOL/login.html

Marque tambm a opo Wait for animatable attachment e clique em ok

Pressione F11 para animar ou F5 para executar

Executando no WebServer SOLO

Abra o browser e digite na URL o seguinte endereo:

http://127.0.0.1:8686/COBOL/login.html Onde 8686 o nmero da porta.

Executando no WebServer Apache

Copie para a pasta C:\Arquivos de programas \ Apache Software Foundation \ Apache2.2\cgi-bin os

seguintes arquivos:

Viewmysql.exe c:\Net31\exemplo03\debug

Cblrtss.dll C:\Arquivos de programas\Micro Focus\Net Express 5.1\Base\Bin

Crie uma pasta chamada COBOL dentro da pasta htdocs C:\Arquivos de programas \ Apache

Software Foundation \ Apache2.2\htdocs\COBOL e copie para dentro dela:

O arquivo login.html origem: c\Net31\exemplo03

O arquivo login.css e myCss.css origem: c:\Net31\exemplo03

A pasta imagens origem: c:\Net31\exemplo03

Abra o browser e digite na URL o seguinte endereo:

http://localhost/COBOL/login.html

O resultado dever ser este:

At a prxima.

http://www.agbook.com.br/book/34170--Cobol_Web

Comentrios e sugestes [email protected]

Livro

2011

CobolWeb Com Net Express 5.1

Documents

Transcript of CobolWeb Com Net Express 5.1