+
Curso de JavaWeb
Módulo 1 e 2
Instrutores: Rodrigo Cardoso
Material por: Rodrigo Cardoso
[email protected]
Maria Carolina
[email protected]

Você pode:




Sob as seguintes condições:





copiar, distribuir, exibir e executar a obra
criar obras derivadas
fazer uso comercial da obra
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
+
Objetivos do curso

Arquitetura cliente-servidor

Introdução a HTML

Integração de HTML com Java (JSP, SERVLET)

Desenvolvimento web no padrão MVC
+
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
+
Pré-requisitos

Conhecimento da linguagem Java

Conhecimento geral de desenvolvimento de sistemas
+
Por que Java Web?

Integração com a linguagem Java

Grande comunidade desenvolvedora

Várias opções de desenvolvimento

Programar no eclipse
+
Divisão do curso
1 – Introdução a
programação
Web
2 - HTML
4 - JSP
5 - Framework
3 - Servlets
+
Introdução a programação web com
Java
+
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
+
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)
+
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
+
Recursos web

Podem ser:
 Páginas html
 figuras (JPG, GIF, BMP...)
 programas web (apsx, servlet, jsp...)
+
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
+
Acesso a recursos web
BROWSER
HTTP
Servidor Web
BROWSER
Servidor BD
+
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
+
Servlets e JavaServer Pages

São programas Java

Podem acessar outras classes de Java

JSP é traduzido para um servlet, são equivalentes
+
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...)
+
HTML
http://www.w3schools.com/html/DEFAULT.asp
+
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
+
Tags em HTML

São delimitados por < e >

Não são case-sensitive

Forma geral:
<tag> texto </tag>

Outras formas:
<tag atributo=“valor”> texto </tag>
<tag />
<br> <hr>
+
Exemplo de tags

<b>Texto em negrito</b>

<h1><b>Tags aninhadas</b><h1/>

<img src="constr4.gif" width="144" height="50" />
http://www.w3schools.com/tags/default.asp
+
Estrutura de um documento HTML
<html>
<head>
<title>Título</title>
</head>
Cabeçalho
<body>
<p> Conteúdo </p>
</body>
</html>
Corpo
+
Tag <img>
 Usada
para inserir uma figura no documento
HTML
 Atributos




da tag
Alt -> define uma descrição da imagem
Src -> define a url da imagem
Height -> define a altura da imagem em pixels
Width -> define a largura da imagem em pixels
 <img
src=“citi.gif" alt=“Citi" />
+
Tag <a>
 Usada
para criar um link para outro documento
ou para apontar para um lugar específico no
documento atual
 Atributos


principais
Href -> define a localização do documento de destino
Name -> define rótulo para definir um lugar específico da página
 <a
href="http://www.citi.org.br">Site do Citi!</a>
 <a
href=“index.html#topo”>Voltar ao topo</a>
 <a
name=“topo”>Topo da página</a>
+
Prática 1

Manda um scrap com imagem no orkut!

Tentar reproduzir a seguinte página HTML:
+
Tabelas <table>

São definidas com a tag <table>

São divididas em linhas (<tr>) e as linhas são divididas em colunas
(<td>)
<table >
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
</table>
+
Atributos de tabela

Border -> define o tipo de borda da tabela

Colspan -> define quantas colunas uma célula ocupará

Rowspan -> define quantas linhas uma célula ocupará
+
Formulários <form>

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 <form> não pode ser aninhada
+
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
+
Elementos de um <form>
Campos de texto, senha e hidden

Campo de texto:
 Name: <input type="text" name=“login">

Campo de senha
 Senha: <input type=“password" name=“senha">

Campo hidden:
 <input type=“hidden" name=“methodToCall“ value=“1”>
+
Radio buttons

São usados quando é necessário que o usuário escolha uma opção
dentre algumas oferecidas

<input type="radio" name=“sexo" value=“masculino"> Masculino

<input type="radio" name=“sexo" value="feminino"> Feminino
+
Checkboxes

São usados quando o usuário pode escolher uma ou mais opções
dentre algumas oferecidas

<input type="checkbox" name="curso" value="basico"> Java basico

<input type="checkbox" name="curso" value="web"> Java Web

<input type="checkbox" name="curso" value="avancado"> Java
avancado
+
Text area

É usado para que o usuário possa passar um texto com várias linhas

<textarea name="informacoes" rows="2" cols="30">A carga horaria
do curso de java web do citi totaliza 30 horas divididas em duas
semanas.
</textarea>
+
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”

<button type="button“>Incluir</button>
+
Drop-down list

Cria uma lista com algumas opções que são exibidas quando o
usuário clica
<select>
<option value=“1”>Sport</option>
<option value=“2”>Sarna</option>
<option value=“3”>Barbie</option>
</select>
+
Tag <div>

Serve para dividir o documento em partes que apresentam
características em comum

Útil para adicionar CSS e alterar a visualização na tela
<div id="lista1“ align="center">
<select>
<option>Sport</option>
<option>Sarna</option>
<option>Barbie</option>
</select>
</div>
+
Prática 2

Implementar uma busca do google com opções de italiano e
português (padrão)

Deve usar: <div>, <img>, <form>, <table>, radio button