UNIVERSIDADE REGIONAL DE BLUMENAU CENTRO DE CINCIAS EXATAS E NATURAIS CURSO DE CINCIAS DA COMPUTAO (Bacharelado)

APLICAO DA TECNOLOGIA WEBSNAP PARA O DESENVOLVIMENTO DE PGINAS HTML

TRABALHO DE CONCLUSO DE CURSO SUBMETIDO UNIVERSIDADE REGIONAL DE BLUMENAU PARA A OBTENO DOS CRDITOS NA DISCIPLINA COM NOME EQUIVALENTE NO CURSO DE CINCIAS DA COMPUTAO BACHARELADO

JEANDERSON GRIPA

BLUMENAU, DEZEMBRO/2002 2002/2-37

APLICAO DA TECNOLOGIA WEBSNAP PARA O DESENVOLVIMENTO DE PGINAS HTMLJEANDERSON GRIPA

ESTE TRABALHO DE CONCLUSO DE CURSO, FOI JULGADO ADEQUADO PARA OBTENO DOS CRDITOS NA DISCIPLINA DE TRABALHO DE CONCLUSO DE CURSO OBRIGATRIA PARA OBTENO DO TTULO DE:

BACHAREL EM CINCIAS DA COMPUTAO

Prof. Maurcio Capobianco Lopes Orientador na FURB

Prof. Jos Roque Voltolini da Silva Coordenador do TCC

BANCA EXAMINADORA

Prof. Maurcio Capobianco Lopes

Prof. Francisco Adell Pricas

Prof. Wilson Pedro Carli

ii

AGRADECIMENTOS

Agradeo ao professor Maurcio Capobianco Lopes pela orientao, crticas e principalmente apoio dado no decorrer do estudo. Aos meus pais, que sempre lutaram para proporcionar aos filhos tudo o que eles jamais tiveram para si, sem os quais eu no teria chegado a este momento. Aos meus irmos e namorada pelo apoio, incentivo, compreenso e carinho que recebi durante a elaborao deste trabalho, principalmente nos momentos difceis que tive. A Deus, por estar sempre presente em todos os momentos e me dando fora nos momentos de dificuldade. Agradeo em especial, ao grande amigo e companheiro de faculdade, Jaime Sthelin Junior, pelo seu apoio e lealdade. Um verdadeiro escudeiro que sempre esteve ao meu lado por todos esses anos. A todos os meus colegas de faculdade, que contriburam para o meu crescimento e tornaram este perodo de faculdade inesquecvel. Finalmente, agradeo a todos que de alguma forma contriburam para elaborao deste trabalho.

iii

SUMRIOLISTA DE FIGURAS ..............................................................................................................VI LISTA DE QUADROS ......................................................................................................... VIII RESUMO .................................................................................................................................IX ABSTRACT .............................................................................................................................. X 1 INTRODUO ..................................................................................................................... 1 1.1 OBJETIVOS DO TRABALHO .......................................................................................... 2 1.2 ESTRUTURA DO TRABALHO ........................................................................................ 2 2 INTERNET............................................................................................................................ 4 2.1 FORMAS DE UTILIZAO ............................................................................................. 5 2.2 HTML.................................................................................................................................. 6 2.3 TECNOLOGIAS PARA A INTERFACE WEB ................................................................. 8 2.4 TECNOLOGIAS PARA O PROCESSAMENTO NO SERVIDOR .................................. 9 3 WEBSNAP .......................................................................................................................... 12 3.1 ARQUITETURA WEBSNAP .......................................................................................... 12 3.2 CRIANDO APLICATIVOS COM WEBSNAP ............................................................... 15 3.3 PALETA WEBSNAP........................................................................................................ 18 3.3.1 ADAPTADORES ........................................................................................................... 20 3.4 CRIANDO UMA WEB PAGE MODULE ........................................................................ 23 3.5 WEBSNAP E BANCO DE DADOS ................................................................................ 24 3.5.1 MESTRE-DETALHE NO WEBSNAP .......................................................................... 25 3.6 SESSES, USURIOS E PERMISSES........................................................................ 25 4 DESENVOLVIMENTO DO TRABALHO ........................................................................ 27 4.1 REQUISITOS PRINCIPAIS DO PROBLEMA A SER TRABALHADO....................... 27

iv

4.2 ESPECIFICAO ............................................................................................................ 27 4.2.1 CASOS DE USO ............................................................................................................ 28 4.2.2 DIAGRAMA DE CLASSES .......................................................................................... 29 4.2.3 DIAGRAMA DE SEQNCIA..................................................................................... 31 4.2.4 MODELO DE DADOS .................................................................................................. 36 4.3 IMPLEMENTAO ........................................................................................................ 36 4.3.1 TCNICAS E FERRAMENTAS UTILIZADAS........................................................... 36 4.3.2 OPERACIONALIDADE DA IMPLEMENTAO...................................................... 37 4.4 RESULTADOS E DISCUSSO ...................................................................................... 45 5 CONCLUSES ................................................................................................................... 48 5.1 EXTENSES .................................................................................................................... 49 REFERNCIAS BIBLIOGRFICAS ..................................................................................... 50 ANEXO I.................................................................................................................................. 51

v

LISTA DE FIGURASFIGURA 1 EXEMPLO DE PGINA HTML......................................................................... 7 FIGURA 2 MODELO WEBSNAP E OS PAPIS NA EQUIPE DE

DESENVOLVIMENTO................................................................................................... 13 FIGURA 3 EXEMPLO DE SCRIPTS ................................................................................... 14 FIGURA 4 PALETA WEBSNAP E A BARRA DE FERRAMENTAS INTERNET ......... 15 FIGURA 5 CRIAO DE UMA APLICAO WEBSNAP.............................................. 16 FIGURA 6 CONFIGURAO DOS COMPONENTES BSICOS DO APLICATIVO ... 17 FIGURA 7 COMPONENTES SETADOS............................................................................ 18 FIGURA 8 WEB SURFACE DESIGNER.............................................................................. 22 FIGURA 9 CRIAO DE UM WEB PAGE MODULE COM UM

ADAPTERPAGEPRODUCER.......................................................................................... 23 FIGURA 10 DIAGRAMA DE CASO DE USO ................................................................... 29 FIGURA 11 DIAGRAMA DE CLASSES............................................................................ 30 FIGURA 12 DIAGRAMA DE SEQNCIA EFETUAR LOGIN...................................... 31 FIGURA 13 DIAGRAMA DE SEQNCIA MANTER CADASTRO.............................. 32 FIGURA 14 DIAGRAMA DE SEQNCIA FAZER RESERVA ..................................... 33 FIGURA 15 DIAGRAMA DE SEQNCIA CONSULTAR RESERVA .......................... 34 FIGURA 16 - DIAGRAMA DE SEQNCIA DESMARCAR RESERVA.......................... 35 FIGURA 17 - MODELO DE DADOS FSICO ....................................................................... 36 FIGURA 18 TELA HOME DO ADMINISTRADOR .......................................................... 38 FIGURA 19 TELA DE USURIO DO ADMINISTRADOR.............................................. 39 FIGURA 20 TELA DE RESERVA DO ADMINISTRADOR ............................................. 40 FIGURA 21 TELA DE LABORATRIO DO ADMINISTRADOR................................... 41

vi

FIGURA 22 TELA HOME DO USURIO PADRO ........................................................ 42 FIGURA 23 TELA DE USURIO DO USURIO PADRO ............................................ 43 FIGURA 24 TELA DE RESERVA DO USURIO PADRO ........................................... 44 FIGURA 25 TELA DE INCLUIR RESERVA DO USURIO PADRO .......................... 45

vii

LISTA DE QUADROSQUADRO 1 EXEMPLO DE ARQUIVO HTML ................................................................... 7 QUADRO 2 CDIGO COM SCRIPTS ................................................................................ 14 QUADRO 3 RECUPERAR OU VALIDAR VALORES ..................................................... 21 QUADRO 4 SCRIPT PROJETISTA DO ADAPTERPAGEPRODUCER ............................ 22 QUADRO 5 EXEMPLO DE SCRIPT DO COMPONENTE CLIENTDATASET ................ 24

viii

RESUMOEste trabalho tem como propsito demonstrar a utilizao da nova tecnologia

WebSnap encontrada no Delphi 6, destacando seus recursos e performance como tecnologia de desenvolvimento de pginas para a internet. Para demonstrar a efetividade do mesmo, foi desenvolvido um prottipo de reserva de laboratrio de ensino on-line, utilizando esta tecnologia.

ix

ABSTRACTThis work aims to show WebSnap technology that can be found Delphi 6. The principal purpose is to analyse the performance of WebSnap as technology for Internet sites design. Intending to show how effective it is, a reservation prototype was created for on-line teaching laboratories, using this technology.

x

1

1 INTRODUOA internet foi criada na dcada de 1960, como uma rede restrita, destinada aos segmentos militar, governamental e acadmico. No incio da segunda metade da dcada de 1990, com a regulamentao para explorao comercial da internet e com a popularizao dos programas grficos para navegao na mesma, pequenas redes, antes operando isoladamente, interligaram-se numa nica rede (Fleury, 2002). Segundo Cusumano (1998), a primeira forma de comunicao entre os usurios da internet foi o correio eletrnico, com suas mensagens transmitidas para qualquer parte do mundo ao custo de uma ligao local. Posteriormente surgiram os primeiros sites para consultas, onde as informaes eram exibidas sem que o usurio pudesse interagir com o mesmo. Por ltimo, o usurio tornou-se capaz de transmitir informaes aos sites, concluindo todas as etapas necessrias para que fosse possvel estabelecerem-se transaes em tempo real entre duas partes atravs da rede. Antes do surgimento da tecnologia de documentos hiper-textos para navegao em documentos da rede, a internet no possua uma interface amigvel com os usurios, principalmente para com os usurios iniciantes e amadores. Somente aps seu surgimento em 1993, com o protocolo Hyper Text Transfer Protocol (HTTP) e navegadores capazes de interpret-lo surgiu a World Wide Web (WWW), tornando o ambiente da internet mais amigvel, facilitando a vida dos usurios comuns e o uso da rede para fins comerciais. Atualmente grande parte dos usurios conhece a internet apenas como uma rede mundial de computadores onde se navega pelas pginas Hyper Text Markup Language (HTML) em seus Navegadores Netscape ou Explorer, o que no reflete a verdade, pois a WWW somente um subconjunto da internet. Junto com o HTML, surgiram diversas linguagens de programao para um melhoramento na interao de aplicaes de internet com usurios. Uma das tecnologias existentes atualmente para o desenvolvimento de pginas HTML o WebSnap, ferramenta essa que permite evoluir o conceito de formulrios simples, fornecendo uma melhor interface e incrementando o WebBroker, antiga soluo para desenvolvimento de pginas HTML da Borland.

2 Numa publicao recente (Pauli, 2002) exposto que o WebSnap uma coleo de componentes voltados ao desenvolvimento de aplicaes Web facilitando muito a vida de empresas que desenvolvem aplicaes de comrcio eletrnico, principalmente as que possuem programadores e Web designers em uma mesma equipe. Usando o WebSnap, o programador Delphi desenvolve a interface da aplicao, parte do acesso a dados e das regras de negcio uma vez que estas ficam do lado do servidor. Por ser ainda uma tecnologia pouco conhecida e pouco utilizada, por estar inserida em um dos ambientes de programao mais utilizados no mercado atualmente, o Delphi, decidiuse neste trabalho, desenvolver uma aplicao para testar a tecnologia Websnap. Para isso, foi desenvolvido um prottipo de reserva de laboratrio de ensino, a fim de possibilitar o uso e teste da tecnologia.

1.1 OBJETIVOS DO TRABALHOO objetivo do trabalho desenvolver uma aplicao utilizando os recursos de internet do Delphi 6, mais especificamente o WebSnap. Como objetivos especficos podem ser citados: a) o desenvolvimento de um prottipo de reserva de laboratrio de ensino on-line; b) a anlise das facilidades e performance do WebSnap como tecnologia de desenvolvimento de pginas interativas para a internet.

1.2 ESTRUTURA DO TRABALHOO trabalho foi estruturado da seguinte maneira: O primeiro captulo apresenta a contextualizao e justificativa para o

desenvolvimento da proposta do trabalho. O segundo captulo aborda conceitos sobre internet, suas formas de utilizao e as tecnologias utilizadas para o desenvolvimento de aplicaes Web. O terceiro captulo, que o ponto chave do trabalho, apresenta a tecnologia WebSnap encontrada no Delphi 6.

3 O quarto captulo descreve a especificao do prottipo, bem como detalhes de sua implementao, resultados e discusso. O quinto e ltimo captulo apresenta as consideraes finais, abrangendo as

concluses do desenvolvimento deste trabalho e as sugestes para prximos trabalhos.

4

2 INTERNETDe acordo com Fleury (2002), a internet foi criada na dcada de 1960, como uma rede restrita destinada aos segmentos militar, governamental e acadmico, em uma organizao de pesquisas do governo norte-americano, a Advanced Research Projects (Arpanet), que pesquisava a formao de redes de computadores. A idia era criar uma rede para conectar centros de pesquisa que estivessem distantes uns dos outros e que no pudesse ser destruda por bombardeios, na impossibilidade de uma comunicao seria uma forma alternativa de ligao que seria usada entre os computadores do exrcito e das universidades. Ao longo dos anos 70 e meados dos anos 80 muitas universidades se conectaram a essa rede, o que moveu a motivao militarista do uso da rede para uma motivao mais cultural e acadmica. Nos meados dos anos 80 a National Science Foundation (NSF) constituiu uma rede de fibra tica de alta velocidade conectando centros de supercomputao localizados em pontos chave nos EUA. Essa rede da NSF, chamada de backbone, teve um papel fundamental no desenvolvimento da internet por reduzir substancialmente o custo da comunicao de dados para as redes de computadores. No incio da segunda metade da dcada de 1990, com a regulamentao para explorao comercial da internet e com a popularizao dos programas grficos para navegao na mesma, pequenas redes, antes operando isoladamente, interligaram-se numa nica rede. Mais ainda, qualquer pessoa que possusse um computador pessoal e uma linha telefnica tornou-se capaz de conectar-se atravs de redes de acesso, internet. Segundo Cusumano (1998), a difuso na utilizao da internet, que pode ser considerada numa primeira anlise como uma evoluo na comunicao eletrnica, possibilitou uma nova revoluo tecnolgica, alterando a maneira como pessoas e organizaes vivem e interagem. O uso da internet continua crescendo em velocidade elevada, e sua difuso supera em muito de outros artefatos. Em apenas trs anos a internet superou a marca de 90 milhes de usurios. O rdio levou mais de 30 anos para atingir 60 milhes de usurios e a televiso levou 15 anos para atingir o mesmo volume.

5 A internet representa um dos mais bem sucedidos exemplos dos benefcios da manuteno do investimento e do compromisso com a pesquisa e o desenvolvimento de uma infra-estrutura para a informao. Comeando com as primeiras pesquisas em trocas de pacotes, o governo, a indstria e o meio acadmico tm sido parceiros na evoluo e uso desta nova tecnologia. Hoje, termos como nome@nomedeempresa.com e

http://www.nomedeempresa.com so usados diariamente por milhes de pessoas. A histria da Internet complexa e envolve muitos aspectos - tecnolgicos, organizacionais e comunitrios e sua influncia atinge no somente os campos tcnicos das comunicaes via computadores, mas toda a sociedade, na medida em que se usa cada vez mais ferramentas on-line para fazer comrcio eletrnico, adquirir informao e operar em comunidade.

2.1 FORMAS DE UTILIZAOA internet pode ser utilizada de diversas maneiras, entre as quais destacam-se: a) correio eletrnico (e-mail): foi a primeira aplicao surgida na Internet, com o objetivo de facilitar a comunicao e a troca de idias e observaes entre o grupo de acadmicos que estavam construindo e experimentando a Internet. Entre as principais caractersticas do correio eletrnico destacam-se: - agilidade: em segundos ou minutos enviado para qualquer parte do mundo; - gratuito: no paga por e-mail enviado ou recebido; - escrito: facilita o acompanhamento de solicitaes; - permite envio de mensagens para muitas pessoas ao mesmo tempo; - permite respostas a e-mails recebidos ou encaminhamentos a terceiros; - permite o envio de arquivos de dados anexados. b) listas de discusso (mailing lists): so listas de endereos de correio eletrnico de pessoas interessadas em determinados assuntos. Uma lista de discusso formada quando existe um nmero relativamente grande de pessoas que pretendem discutir algum assunto on-line atravs de e-mails. Quando esse nmero torna-se difcil ou impraticvel o endereamento do e-mail para cada um dos destinatrios, o recurso mais prtico e barato criar ou usar uma lista de distribuio;

6 c) transferncia de arquivos (FTP): tem como objetivo promover o compartilhamento de arquivos sejam eles programas ou dados, encorajar indiretamente o uso de servidores remotos que funcionam como backup, proteger os internautas de variaes em sistemas de armazenamento de arquivos entre servidores e transferncia de dados com confiabilidade, rapidez e eficincia; d) conversas on-line (Chat): o nome popular que foi dado para o Internet Relay Chat (IRC). O IRC ou chat o encontro virtual onde pessoas podem se encontrar e conversar em tempo real atravs de mensagens escritas, tanto participando de discusses grupais como em conversas particulares; e) sites (Web): consiste na rede mundial de computadores denominada World Wide Web (WWW) composta por pginas Hypertext Markup Language (HTML) onde se navega, pesquisa-se e compram-se produtos utilizando navegadores como Netscape ou Explorer.

2.2 HTMLSegundo Cantu (2002), o Hypertext Markup Language (HTML), linguagem de marcao de hipertexto o formato mais difundido para contedo na Web. HTML o formato que os navegadores Web normalmente lem; trata-se de um padro definido pelo World Wide Web Consortium (W3C), que um dos organismos que controlam a internet. Os arquivos HTML so basicamente arquivos de textos ASCII. Alm do texto simples, um arquivo HTML contm muitas tags, as quais podem determinar o estilo da fonte, o tipo do pargrafo ou um link para outro arquivo HTML ou para uma imagem, entre outras coisas. A maioria das tags ocorrem em pares de abertura e fechamento, normalmente a tag de fechamento igual a tag de abertura, mas precedida por uma barra (/) para indicar onde o estilo ou contedo comea e onde termina . Um documento HTML comea com a tag e dividido em duas partes, marcadas como (cabealho da pgina) e (corpo da pgina). Cada uma dessas trs tags exige o terminador correspondente. Na parte do cabealho do arquivo HTML, geralmente escreve-se o ttulo (freqentemente apresentado na barra de ttulo do navegador) e alguns outros elementos genricos.

7 No corpo da pgina, escreve-se o contedo do arquivo, geralmente comeando com seu ttulo visvel. Pode-se usar cabealhos com diferentes nveis, marcados com a tag , onde se troca o X por um nmero de 1 a 6. Isso seguido por pargrafos simples (), pargrafos previamente formatados (, um estilo geralmente usado para listagens de programas), vrios tipos de listas e muitos outros elementos. O texto freqentemente ter links para outras pginas ou outras partes da pgina corrente, usando-se a tag (ncora). No QUADRO 1 apresentado um exemplo de um arquivo HTML e na FIGURA 1, tem-se o resultado deste arquivo. QUADRO 1 EXEMPLO DE ARQUIVO HTML Aplicao WebSnap para Pginas HTML Exemplo de Arquivo HTML

===> HTML