Programação WEB I. Ms. Bruno Crestani Calegaro Jun/ 2015

(1)

Programação WEB I

Ms. Bruno Crestani Calegaro (bruno.calegaro@ifsc.edu.br) Jun/ 2015

(2)

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 oXampp

Os conteúdos relacionados ao desenvolvimento WEB bem

(3)

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)

(4)

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 )

(5)

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)

(6)

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

(7)

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

(8)

Aplicações Web

(9)

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

(10)

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.

(11)

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/

(12)

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>

(13)

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

(14)

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

(15)

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.

(16)

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>.

<title>Primeira Página </title> </head>

</body> </html>

(17)

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.

(18)

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.

(19)

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 um texto 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>

(20)

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

(21)

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

(22)

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

(23)

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

Posição

align=”left”

Esquerda - Padrão

align=”right”

Direita

(24)

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 -–!>

(25)

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

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> Formação Comando Negrito <B></B> Itálico <I></I> Sublinhado <U></U> Subscrito <SUB></SUB> Sobrescrito <SUP></SUP>

(26)

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 – Vermelho, Green – Verde, Blue – Azul)

o 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

o 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.

o Para escrever uma cor, é mais fácil usar-se códigos, e mais fácil ainda usar os códigos hexadecimais.

(27)

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

(28)

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.

(29)

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.

(30)

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.

(31)

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.

(32)

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>.

<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>

(33)

Exercício Prático

Crie a seguinte página HTML:

<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>

(34)

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.

(35)

Introdução a HTML

Formulários

Para criar formulários, usa-se uma tag chamada <FORM></FORM>. Existem vários atributos para essa tag.

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)

(36)

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)

(37)

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”>

(38)

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

(39)

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.

(40)

Exercício Prático

(41)

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>

(42)

Introdução a JSP

Sintaxe Básica

Texto HTML

 Passado para o cliente. Transformado em código servlet:

out.print("<H1>Blah</H1>"); Comentários HTML

 Mesmo que um outro HTML: Passado para o cliente

Comentário JSP

<%-- Comment --%>

(43)

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 %>

(44)

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() %>

(45)

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>”);

(46)

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

(47)

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”%>

(48)

Introdução a JSP

Formulários

 Uma página JSP pode acessar os dados de um formulário usando o objeto request

<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>

Last Name: <input type=“number" name=“idade" />

</body> </html>

(49)

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:

<input type = "checkbox" name=“mat" checked="checked" /> Matematica

</form> </body> </html>

(50)

Introdução a JSP

Formulários

(51)

Exercício Prático

Crie um formulário abaixo em arquivo “calculadora.jsp”:

(52)