Curso de JavaWeb

1

• Curso de JavaWeb
• Módulo 1 e 2
• Instrutores Rodrigo Cardoso
• Material por Rodrigo Cardoso
• rcaa2_at_cin.ufpe.br
• Maria Carolina
• mcts_at_cin.ufpe.br

2

• Você pode
• copiar, distribuir, exibir e executar a obra
• criar obras derivadas
• fazer uso comercial da obra
• Sob as seguintes condições
• Atribuição. Você deve dar crédito ao autor
  original, da forma especificada pelo autor ou
  licenciante.
• Compartilhamento pela mesma Licença. Se você
  alterar, transformar, ou criar outra obra com
  base nesta, você somente poderá distribuir a obra
  resultante sob uma licença idêntica a esta.
• Para cada novo uso ou distribuição, você deve
  deixar claro para outros os termos da licença
  desta obra.
• Qualquer uma destas condições podem ser
  renunciadas, desde que Você obtenha permissão do
  autor.
• Veja aqui a licença completa

3
Objetivos do curso

• Arquitetura cliente-servidor
• Introdução a HTML
• Integração de HTML com Java (JSP, SERVLET)
• Desenvolvimento web no padrão MVC

4
Quem somos nós?

• Rodrigo Cardoso
• 8º período
• Experiência em desenvolvimento Java WEB desde
  2007
• Ex-monitor de Gerenciamento de Dados e Informação
• Monitor de Introdução a Programação
• Maria Carolina
• 8º período
• Experiência em desenvolvimento Java WEB desde
  2007
• Ex-monitora de Algoritmos e Estrutura de Dados
• Monitora de Gerenciamento de Dados e Informação

5
Pré-requisitos

• Conhecimento da linguagem Java
• Conhecimento geral de desenvolvimento de sistemas

6
Por que Java Web?

• Integração com a linguagem Java
• Grande comunidade desenvolvedora
• Várias opções de desenvolvimento
• Programar no eclipse

7
Divisão do curso
1 Introdução a programação Web
2 - HTML
3 - Servlets
5 - Framework
4 - JSP
8
Introdução a programação web com Java
9
Arquitetura da web

• O modelo cliente-servidor é usado
• Servidor web recebe requisições do cliente,
  processa e devolve ao cliente
• Cliente web faz as requisições ao servidor e
  recebe os resultados

10
HTTP Hypertext Transfer Protocol

• Principal protocolo da Web utilizado para a
  comunicação entre os browsers e os servidores
• Toda requisição e resposta HTTP é montada sobre
  uma conexão cliente-servidor
• Não mantém estado (Stateless)

11
Interação browser e servidor

1. Usuário especifica URL
2. Browser conecta com o servidor especificado na
   url
3. Browser prepara a requisição HTTP e a envia
4. Servidor busca o recurso identificado pela URL
5. Servidor processa o pedido, prepara a resposta
   HTTP e a envia
6. Browser verifica as tags do recurso solicitado e
   repete o processo
7. Browser exibe os recursos

12
Recursos web

• Podem ser
• Páginas html
• figuras (JPG, GIF, BMP...)
• programas web (apsx, servlet, jsp...)

13
Páginas HTML

• Podem conter tags que indicam a presença de
  outros recursos (links, imagens)
• Os formulários HTML permitem enviar dados para
  serem processados no servidor
• São os recursos mais acessados

14
Acesso a recursos web
Servidor Web
BROWSER
HTTP
BROWSER
Servidor BD
15
Programas Web

• Localizados no servidor
• Recebem dados do cliente
• Processam os dados recebidos
• Fornecem resposta baseada nos dados enviados
  pelos clientes
• Tem que ser escritos em linguagens suportadas
  pelo servidor
• Exemplos Servlets, JavaServer Pages, PHP, ASP

16
Servlets e JavaServer Pages

• São programas Java
• Podem acessar outras classes de Java
• JSP é traduzido para um servlet, são equivalentes

17
Elementos de aplicações web com Java

• Container (tomcat)
• Diretório raiz ou contexto
• Deployment descriptor (web.xml)
• Servlets / JSP
• Classes Java
• Arquivos auxiliares (xml, properties, libs,
  html...)

18
HTML
http//www.w3schools.com/html/DEFAULT.asp
19
Introdução a HTML (HYPER TEXT MARKUP LANGUAGE)

• Linguagem para descrever páginas web
• Consiste normalmente de um cabeçalho e um corpo
  definidos por tags
• Os browsers são encarregados de interpretar as
  tags e formatar o texto adequadamente
• Não é uma linguagem de programação
• Possui extensão htm ou html

20
Tags em HTML

• São delimitados por lt e gt
• Não são case-sensitive
• Forma geral
• lttaggt texto lt/taggt
• Outras formas
• lttag atributovalorgt texto lt/taggt
• lttag /gt
• ltbrgt lthrgt

21
Exemplo de tags

• ltbgtTexto em negritolt/bgt
• lth1gtltbgtTags aninhadaslt/bgtlth1/gt
• ltimg src"constr4.gif" width"144" height"50" /gt

http//www.w3schools.com/tags/default.asp
22
Estrutura de um documento HTML

• lthtmlgtltheadgt lttitlegtTítulolt/titlegtlt/headgt
• ltbodygt ltpgt Conteúdo lt/pgtlt/bodygt
• lt/htmlgt

Cabeçalho
Corpo
23
Tag ltimggt

• Usada para inserir uma figura no documento HTML
• Atributos da tag
• Alt -gt define uma descrição da imagem
• Src -gt define a url da imagem
• Height -gt define a altura da imagem em pixels
• Width -gt define a largura da imagem em pixels
• ltimg srcciti.gif" altCiti" /gt

24
Tag ltagt

• Usada para criar um link para outro documento ou
  para apontar para um lugar específico no
  documento atual
• Atributos principais
• Href -gt define a localização do documento de
  destino
• Name -gt define rótulo para definir um lugar
  específico da página
• lta href"http//www.citi.org.br"gtSite do
  Citi!lt/agt
• lta hrefindex.htmltopogtVoltar ao topolt/agt
• lta nametopogtTopo da páginalt/agt

25
Prática 1

• Manda um scrap com imagem no orkut!
• Tentar reproduzir a seguinte página HTML

26
Tabelas lttablegt

• São definidas com a tag lttablegt
• São divididas em linhas (lttrgt) e as linhas são
  divididas em colunas (lttdgt)
• lttable gt
• lttrgt
• lttdgtlinha 1, célula 1lt/tdgt
• lttdgtlinha 1, célula 2lt/tdgt
• lt/trgt
• lt/tablegt

27
Atributos de tabela

• Border -gt define o tipo de borda da tabela
• Colspan -gt define quantas colunas uma célula
  ocupará
• Rowspan -gt define quantas linhas uma célula
  ocupará

28
Formulários ltformgt

• Formulários permitem que o usuário informe dados
  para serem processados pela aplicação
• Normalmente os elementos de um form são text
  fields, text area, checkboxes, radio button...
• A tag ltformgt não pode ser aninhada

29
Passos na submissão de um formulário

• O navegador envia os dados do formulário para o
  servidor
• O servidor ativa a url especificada através do
  atributo action
• O tipo do método definido no atributo method
  define como os dados enviados pelo formulário
  serão acessados
• O método padrão, caso não haja especificação, é o
  GET
• É boa prática usar o método POST

30
Elementos de um ltformgtCampos de texto, senha e
hidden

• Campo de texto
• Name ltinput type"text" namelogin"gt
• Campo de senha
• Senha ltinput typepassword" namesenha"gt
• Campo hidden
• ltinput typehidden" namemethodToCall
  value1gt

31
Radio buttons

• São usados quando é necessário que o usuário
  escolha uma opção dentre algumas oferecidas
• ltinput type"radio" namesexo"
  valuemasculino"gt Masculino
• ltinput type"radio" namesexo" value"feminino"gt
  Feminino

32
Checkboxes

• São usados quando o usuário pode escolher uma ou
  mais opções dentre algumas oferecidas
• ltinput type"checkbox" name"curso"
  value"basico"gt Java basico
• ltinput type"checkbox" name"curso" value"web"gt
  Java Web
• ltinput type"checkbox" name"curso"
  value"avancado"gt Java avancado

33
Text area

• É usado para que o usuário possa passar um texto
  com várias linhas
• lttextarea name"informacoes" rows"2" cols"30"gtA
  carga horaria do curso de java web do citi
  totaliza 30 horas divididas em duas semanas.
• lt/textareagt

34
Button

• Define um botão com uma ação específica
• Pode conter textos e imagens
• Atributos onMouseOver, onClick podem especificar
  a ação do botão
• O atributo type é obrigatório com o valor
  button
• ltbutton type"buttongtIncluirlt/buttongt

35
Drop-down list

• Cria uma lista com algumas opções que são
  exibidas quando o usuário clica
• ltselectgt
• ltoption value1gtSportlt/optiongt
• ltoption value2gtSarnalt/optiongt
• ltoption value3gtBarbielt/optiongt
• lt/selectgt

36
Tag ltdivgt

• Serve para dividir o documento em partes que
  apresentam características em comum
• Útil para adicionar CSS e alterar a visualização
  na tela
• ltdiv id"lista1 align"center"gt
• ltselectgt
• ltoptiongtSportlt/optiongt
• ltoptiongtSarnalt/optiongt
• ltoptiongtBarbielt/optiongt
• lt/selectgt
• lt/divgt

37
Prática 2

• Implementar uma busca do google com opções de
  italiano e português (padrão)
• Deve usar ltdivgt, ltimggt, ltformgt, lttablegt, radio
  button