Programação WEB I Ms. Bruno Crestani Calegaro (bruno.calegaro@ifsc.edu.br) Jun/ 2015
Desenvolvendo Aplicações WEB Aplicativos web estão em alta hoje em dia. Cada vez mais antigos sistemas desktops migram para o ambiente web aproveitando os benefícios da mesma Tais como: facilidade de implantação, atualização, escalabilidade e acessibilidade. Nas próximas aulas iremos aprender como programar para a web utilizando a tecnologia Java, Eclipse e o servidor TomCat Para fazer o uso dos diversos recursos para desenvolvimento WEB com o Eclipse é preciso baixar a versão: o Eclipse IDE for Java EE Developers E também é necessário instalar o servidor TomCat o Instalado junto com o Xampp Os conteúdos relacionados ao desenvolvimento WEB bem como os conceitos básicos serão mostrador no decorrer da aula
World Wide Web A Web é um sistema de informações de hipertexto Hipertexto: permite que você leia e navegue entre texto e informações visuais de uma forma não-linear, baseado no que deseja saber em seguida Vantagem: Você carrega em disco somente o que você deseja ver Exemplo: Ajuda do Windows A Web é gráfica e fácil de navegar Independe de Plataforma: Computadores pessoais (Macintosh, PC) Sistemas Operacionais (Windows, Linux, MacOS) Dispositivos Móveis (Tablet, Smartphone) Diferentes resoluções e tamanhos de monitores
JAVA EE Quando queremos criar um novo software, precisamos nos preocupar tanto com as regras de negócio da aplicação como com a infraestrutura onde será instalado nosso projeto. Em se tratando de projetos web, devemos hospeda-lo em um servidor. Pensando nisso poderemos ter alguns problemas: Como garantir que meu projeto irá funcionar corretamente em um servidor que não conheço? Caso queira mudar de hospedagem, meu projeto funcionará corretamente em um futuro servido? Pensando nisso, a Sun/Oracle desenvolveu uma série de especificações bem detalhadas para a plataforma web, nelas é ensinado como implementar um software usando o padrão de infraestrutura java web. Essa série de especificações recebeu o nome de Java EE ( Java Enterprise Edition )
JAVA EE Veja algumas especificações do Java EE: Java Server Pages (JSP), Java Servlets, Java Server Faces ( JSF ) ( Trabalhar para web ) Enterprise Javabeans Components ( EJB ) e Java Persistence API ( JPA ) (Objetos distribuídos, clusters, acesso remoto a objetos etc) Java API for XML Web Services ( JAX-WS ), Java API for XML Bindinding ( JAX-B ) (Trabalhar com arquivos xml e webservices) Java Autenthication and Autorization Service ( JAAS ) (API padrão do java para segurança) Java Trabsaction API ( JTA ) (controle de transação e contêiner) Java Message Service ( JMS )(troca de mensagens assíncronas) Java Naming and Directory Interface ( JNDI ) (espaço de nomes e objetos)
Servidor O servidor é responsável por armazenar os arquivos que constituem as páginas do site. Um servidor Web armazena normalmente arquivos escritos em uma linguagem chamada HTML (Hypertext Markup Language). Com o HTML pode-se definir a estrutura e o conteúdo de um documento web. Além disso, pode-se criar links para outras documentos, imagens ou outras mídias. Um servidor de Aplicação é um software que auxilia com serviços de infraestrutura, e implementa a especificação Java EE Além de hospedar os arquivos ele implementa o funcionamento de uma pagina JSP, Servlets, Beans, entre outros
Aplicações Web Aplicação web é a extensão dinâmica da web ou application server Uma aplicação Java Web gera páginas Web interativas, que contêm vários tipos de linguagem de marcação (HTML, XML, etc.) e conteúdo dinâmico Normalmente é composto por componentes Web, como JavaServer Pages (JSP), servlets e JavaBeans Estes componentes servem para modificar e armazenar dados temporariamente, interagir com bancos de dados e Web services e processar o conteúdo como resposta às solicitações do cliente
Aplicações Web Interação entre um cliente e uma aplicação web:
Aplicações JAVA Web Servlets: são classes Java que dinamicamente processam requisições e constroem respostas Paginas JSP: são documentos de textos que são executados como servlets e são apropriados para geração de linguagens de marcação tais com HTML, SVG, WML, e XML Relação entre as tecnologias de aplicação Java Web:
Estrutura de uma aplicação Web Antes de trabalhar na geração de paginas JSP e Servelets é interessante conhecer a estrutura de uma aplicação web, Uma aplicação web precisa ter um local (pasta/diretório) onde são armazenados os recursos disponibilizados pela aplicação para acesso por parte do usuário. Na figura acima, a pasta WebContent representa o root de sua aplicação web. É nesta pasta que todos os recursos acessíveis de forma direta pelo seu usuário devem estar. Nela, é possível criar uma estrutura de pastas, distribuindo os arquivos de acordo a seu tipo, ou responsabilidade. É nesta pasta que devemos colocar os nossos arquivos HTML ou JSP. A pasta WEB-INF é uma pasta que o usuário não acessa de forma direta pelo browser, o acesso é feito pelo container. A pasta lib possui recursos (bibliotecas) utilizados por sua aplicação.
Estrutura de uma aplicação Web Vamos agora, configurar o Eclipse para operar sobre o TomCat e depois criar uma projeto no Eclipse Dynamic Web Project Acesse uma página do nosso projeto utilizando um navegador de internet Material auxiliar para configurar o TomCat no Eclipse: http://felipebbarbosa.wordpress.com/2012/02/26/confi gurando-o-apache-tomcat-7-no-eclipse-ide/
Estrutura de uma aplicação Web Crie um pagina chamada OLA.HTML: <html> <head> <title>página com conteúdo estático</title> </head> <body> Esta página tem seu conteúdo estático </body> </html>
JSP e HTML JavaServer Pages (JSP) permite fácil criação de conteúdos web sendo ambos componentes dinâmicos e estáticos Uma página JSP é um documento texto que pode ser escrito em HTML e utilizar elementos JSP para construir conteúdos dinâmicos Isto é, podemos criar uma página dinâmica usando HTML e escrevendo o trecho de código em Java apenas quando necessário Antes de vermos as características da página JSP, primeiros iremos aprender sobre o HTML
Introdução a HTML HTML é a sigla de Hyper Text Markup Language (Linguagem de Marcação de Hipertexto) Tags são os comandos usados para a construção de sua página na web, elas podem ser abertas, como <BR>, ou fechadas, como <p></p>. As tags que possuem / sempre servem para fechar uma tag antes aberta (</font>). Arquivos HTML são simplesmente arquivos texto com a extensão.html. Qual editor de texto ler e escrever nestes arquivos. Nós iremos utilizar o editor de texto HTML do Eclipse para fazer o uso de ferramentas de autocompletação e cores de sintaxe
Introdução a HTML Iniciando uma página HTML O corpo básico de uma página HTML, é composto pelas tags, <HTML></HTML> e <BODY></BODY>. Não há necessidade de as tags estarem em letra maiúscula, ou minúscula, porém organizar as tags, é mais fácil para a localização em um código. <HTML> <BODY> </BODY> </HTML>
Introdução a HTML Construindo uma página HTML Para se colocar um título na página, é necessário digitar as tags <head> e <title>, que vai fora da tag <body>. <html> <body> <head> <title>primeira Página </title> </head> </body> </html>
Introdução a HTML Construindo uma página HTML Na tag <body>, pode ser adicionada as configurações padrões da página. Atributo bgcolor Serve para alterar a cor de fundo da página HTML. <body bgcolor= #000055 > = Define a cor de fundo Atributo background Serve para adicionar uma imagem como pano de fundo da página HTML. <body background= feliz.jpg > = Define a imagem feliz.jpg, como plano de fundo da página HTML.
Introdução a HTML Construindo uma página HTML Na tag <body>, pode ser adicionada as configurações padrões da página. Atributo text Serve para definir a cor do texto padrão da página HTML. <body text= #CC0000 > Define a cor padrão de tudo aquilo que for escrito na página HTML como texto, sem configurações.
Introdução a HTML Textos Há vários tipos de forma de se fazer textos em páginas HTML. A mais simples delas é com a tag <Hx> (x corresponde a um número de 1 a 6, sendo 1 o maior e seis o menor). <H1>Aqui será Exibido o texto com a cor padrão da página, e no maior tamanho possível </H1> <H2>Aqui será exibido umtexto menor...</h2> <H3>...aqui será exibido um texto menor...</h3> <H4>...aqui será exibido um texto menor...</h4> <H5>...aqui será exibido um texto menor...</h5> <H6>...E aqui será exibido o menor texto possível com a tag <Hx> </H6>
Introdução a HTML Parágrafos Observe que com o H, não é necessário que se mude de parágrafo, mas caso você prefira usar uma tag que não seja o H, ou não usar tags, é preciso que você use uma quebra de linhas, pois o HTML, não quebra de linha no mesmo momento que você digita a tecla Enter. <H1>Observe que se eu não aciono nenhum comando para quebra de linha o HTML não Quebra linha automaticamente, mesmo que eu separo a palavra ao meio</h1>
Introdução a HTML Parágrafos Para quebrar a linha, usa-se a tag <BR>, que simplesmente quebra a linha, ou a tag <P></P>, que cria um parágrafo. O texto vai aqui, e eu uso o <BR> br para quebrar a linha <P>Quando eu uso o p, eu não preciso quebrar linha,</p> pois o parágrafo que começa depois, já é outro A tag <P></P>, ainda serve para configurar páginas.
Introdução a HTML Parágrafos Para quebrar a linha, usa-se a tag <BR>, que simplesmente quebra a linha, ou a tag <P></P>, que cria um parágrafo. O texto vai aqui, e eu uso o <BR> br para quebrar a linha <P>Quando eu uso o p, eu não preciso quebrar linha,</p> pois o parágrafo que começa depois, já é outro
Introdução a HTML Parágrafos A tag <P></P>, ainda serve para configurar páginas. <P align= Center >Alinha o texto escrito aqui ao centro da página</p> Os alinhamentos podem ser: Comando align= left align= right align = center Posição Esquerda - Padrão Direita Centro
Introdução a HTML Fonte Além de todos os atributos para se escrever textos no HTML, há o mais útil de todos, o atributo font. Nele pode conter a formatação de letra, tamanho e cor. <font color="#aa0000" face="arial" size="12">onde Face é a letra, Size, é o tamanho da letra e color é a cor da letra</font>. Comentário Para se fazer um comentário em uma página HTML, ou seja escrever um texto que não será exibido no gráfico, mas sim no código, e é fundamental para manter uma boa organização. <! Você adiciona esse comentário em qualquer parte do seu código, e ele não será exibido no gráfico -!>
Introdução a HTML Estilos de caracteres Você pode no HTML, formatar uma palavra, frase ou letra, como negrito, itálico, sublinhado, subscrito e sobrescrito. Para isso, usa-se os comandos Formação Negrito Itálico Sublinhado Subscrito Sobrescrito Comando <B></B> <I></I> <U></U> <SUB></SUB> <SUP></SUP> Esse é o texto, e essa palavra está em <B>Negrito</B>, essa está em <I>Itálico</I>, essa <U>sublinhada</U>, essa <SUB>subscrita</SUB>, e essa <SUP>sobrescrita</SUP>
Introdução a HTML Cores Numa página HTML, as cores são fundamentais para decorar a página. No HTML, as cores podem: Ser nomeadas pelo nome (em Inglês), como White para branco, green, para verde, blue, para azul e assim por diante. Podem ser codificadas, por números decimais, como 255, 160, 200 ou números hexadecimais, como, FFAA00, o Estes códigos são na verdade os códigos de uma mistura das cores RGB (Red o o o Vermelho, Green Verde, Blue Azul) Então se o código decimal, for 185,0,0, é sinal de que a cor é vermelha, pois ele adicionou 185 ao vermelho, 0 ao verde e 0 também ao azul Se o código hexadecimal for 006600, deduz-se que a cor é verde, pois os dois primeiros números (que correspondem ao vermelho RRGGBB), são 0, os dois números do meio, são 6 e os dois números finais são 0. Para escrever uma cor, é mais fácil usar-se códigos, e mais fácil ainda usar os códigos hexadecimais.
Introdução a HTML Cores Na tag body, bgcolor, define a cor do pano de fundo da página e text, a cor do texto padrão na pagina, na tag font, color define a cor do texto. Para se escrever uma cor codificada, usa # antes do códico, e dentro das aspas, por exemplo, #550000
Introdução a HTML Listas As listas são muito úteis, servem para organizar assuntos em tópicos, números, ou menus. <ol> <li>introdução <li>dedicatória <li>capitulo 1 </ol> Onde <OL>, é a tag que define lista ordenada, ou seja, numerada, e <LI>, é a tag que define os itens da lista.
Introdução a HTML Listas As listas são muito úteis, servem para organizar assuntos em tópicos, números, ou menus. <ul> <li>introdução <li>dedicatória <li>capitulo 1 </ul> Onde <UL>, é a tag que define lista não-ordenada, ou seja, tópicos, e <LI>, é a tag que define os itens da lista.
Introdução a HTML Imagens Em uma página HTML, imagens são essenciais. Para inserir imagens, basta que ela seja de preferência GIF, ou JPG, não é obrigatório, mas recomenda-se o uso de imagens GIF, apenas para botões e ícones, pois ela possui uma definição de apenas 256 cores e o uso de imagens JPG, para a inserção de imagens fotográficas, pois ela possui uma definição de 16,7 milhões de cores. Na tag imagem, pode-se definir o tamanho, o alinhamento, a borda, etc. <img src= foto.jpg >, Onde foto.jpg, é o nome da imagem, ou <img src= c:/foto.jpg >, onde c: é o destino da imagem, e foto.jpg, é o nome da imagem.
Introdução a HTML Imagens Para corrigir isso, há os atributos HEIGHT e WIDTH, que significam altura e largura respectivamente <img src="foto.jpg" height=120 width=120> Você pode também, posicionar apenas a imagem Essa á a Foto <img src="foto.jpg" align=right width="200" height="200"> Alinha a Figura a direita.
Introdução a HTML Tabela Para manter aquela organização já citada antes, também na parte gráfica, é necessário a criação de tabelas, para que imagens e textos fiquem organizados em harmonia em sua página, para isso, usa-se a tag <table>. Na tag table, atributos como align, alinha a tabela na tela, border, coloca uma borda na tabela. Essa tag possui sub tags, <TR></TR>, que representa as linhas, e devem vir dentro da table, e podem usar tags como align, para alinhar o conteúdo da célula, e a tag <TD></TD>, que representa as colunas e devem vir dentro da tag <TR>. <table align=center border=3> <tr align=center> <td>esse é o texto</td> <td><img src="foto.jpg" width=60 height=60></td> </tr> <tr align=right> <td>texto</td> <td>mais texto</td> </tr> </table>
Exercício Prático Crie a seguinte página HTML: <html> <head> <title>primeira Página em HTML</title> </head> <body> Olá Mundo <BR> O meu nome é: (Escreva o seu nome)<br> <a href= bemvindo.html >Dados Pessoais</a> </body> </html>
Exercício Prático Crie uma nova página à sua escolha e introduza alguns dos seus dados pessoais (Nome, Idade, Foto, etc) Introduza uma ligação para a página inicial. Esta nova página deverá designar-se por bemvindo.html, e será apresentada assim que pressionar a ligação Dados Pessoais da página anterior. Deverá criar, também, uma ligação para regressar à página original.
Introdução a HTML Formulários Para criar formulários, usa-se uma tag chamada <FORM></FORM>. Existem vários atributos para essa tag. <FORM action= destino method= get / post > Cada elemento no formulário possui um name e um value Formulários são recursos muito úteis de HTML para se obter informações do usuário e enviar para outra página (ou Servelet). O método de envio pode ser do tipo get ou post. A principal diferença é que o método get envia as informações pelo código html (Ex: Google, Bing)
Introdução a HTML Formulários O método de envio de um formulário HTML pode ser de dois tipos: GET: Joga o nome e valor dos campos na URL final. Usado em situações nas quais a página resultante pode ser enviada por e-mail (quando o usuário que receber a mensagem acessar o link, deve ir exatamente para a página que o usuário que enviou o link estava). POST: Usado nos casos em que o página final só serve para o usuário atual. No caso de um formulário que envie um e-mail para o administrador do formulário, o usuário não enviará o endereço para ninguém mais)
Introdução a HTML Campo de Texto Esse, como todos os campos é inserido pela tag input. Entre com o Nome:<input type= text name= nome size= 20 >. Onde Type é a definição de que esse campo é um campo de texto e size, é o tamanho do campo. Campo de Senha Entre com a senha:<input type= password name= senha size= 10 >
Introdução a HTML Recebendo parâmetros Na página destino podemos utilizar a sintaxe ${param.name} para acessar os valores inseridos no formulário. Exemplo: Pagina para digitar o campo idade: index.html Pagina para mostrar o campo idade: acao.html
Introdução a HTML Caixa de Seleção, Lista, Menus, Botões Você pode adicionar ainda botões de radio, caixas de seleção, lista ou menus, campos de textos com várias linhas, botão simples, botão de envio e reset e botão com imagem. Código HTML
Exercício Prático Crie um formulário com os seguintes campos:
Introdução a JSP Agora que vimos como criar uma página HTML, página estática, podemos criar uma página com conteúdo dinâmico usando JSP Para inserir um código Java em uma página, um script, utilizamos a sintaxe <%... %> <BODY> <H2>JSP trecho de código em Java</H2> <UL> <LI>Hora Atual <%= new java.util.date() %> <LI>Hostname: <%= request.getremotehost() %> <LI>Sessão: <%= session.getid() %> </UL> </BODY> </HTML>
Introdução a JSP Sintaxe Básica Texto HTML <H1>Blah</H1> Passado para o cliente. Transformado em código servlet: out.print("<h1>blah</h1>"); Comentários HTML <!-- Comentário --> Mesmo que um outro HTML: Passado para o cliente Comentário JSP <%-- Comment --%> Não envia para o cliente
Introdução a JSP Tipos de elementos scripts Expressões Formato: <%= expression %> Avaliada e inserida na saída do servlet: out.print(expression) Scriptlets Formato: <% code %> Incorporado ao método do servlet _jspservice Declarações Format: <%! code %> Inserido no corpo de uma classe servlet, fora de qualquer método.
Introdução a JSP Expressões JSP Formato <%= Java Expression %> Result Expressão avaliada, convertida para String, e colocada na página HTML no local onde ocorre na página JSP. Expressão colocada no método _jspservice dentro do out.print Exemplos Data: <%= new java.util.date() %> Hostname: <%= request.getremotehost() %>
Introdução a JSP Exemplo... <% String hellomsg = request.getparameter( hellomsg ); %> <b>hello World! <% =hellomsg %> </b> <% for (int i=0; i<10; i++) out.println( <b> i= +i+ </b><br> ); %>
Introdução a JSP Estrutura da Página Uma página JSP pode ser dividida, basicamente, nas seguintes partes: Cabeçalho: inclui diretivas que informam alguns atributos da página bem como algumas configurações (imports, contenttype, página de erro...) Declarações: inclui declarações de métodos, atributos, constantes, etc. Corpo da página: inclui o código que irá gerar o html dinâmico
Introdução a JSP Exemplos de Diretivas <%@diretiva atributo=valor %> <%@page contenttype= text.html pageencoding= UTF-8 %> <%@page import= java.util.date %> <%@page errorpage= 504.html %> <%@page iserrorpage= true %>
Introdução a JSP Formulários Uma página JSP pode acessar os dados de um formulário usando o objeto request <body> <center> <h1>acessando dados de um formulário</h1> <ul> <li><p><b>nome:</b> <%= request.getparameter( nome")%> </p></li> <li><p><b>idade:</b> <%= request.getparameter( idade")%> </p></li> </ul> </body> Exemplo de formulário: <html> <body> <form action="main.jsp" method="get"> Nome: <input type="text" name= nome"> <br /> Last Name: <input type= number" name= idade" /> <input type="submit" value= Enviar" /> </form> </body> </html>
Introdução a JSP Formulários Acessando um checkbox: <body> <center> <h1>acessando checkbox</h1> <ul> <li><p><b>campo Matematica:</b> <%= request.getparameter("maths")%> </p></li> </ul> </body> Exemplo de formulário: <html> <body> <form action="main.jsp" method="post" target= destino"> <input type = "checkbox" name= mat" checked="checked" /> Matematica <input type="submit" value= Enviar" /> </form> </body> </html>
Introdução a JSP Formulários Acessando todos os dados do formulário: forms.jsp
Exercício Prático Crie um formulário abaixo em arquivo calculadora.jsp : Crie um página JSP, calcula.jsp, para mostrar o resultado.
Referência Programação em Java Uma introdução Abrangente Shildt, H., Skrien, D Programação com Java Hubbard. H