+

Curso de JavaWeb

Módulo 1 e 2Instrutores: Rodrigo Cardoso

Material por: Rodrigo Cardosorcaa2@cin.ufpe.br

Maria Carolinamcts@cin.ufpe.br

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

+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

Web2 - HTML 3 - Servlets

4 - JSP 5 - Framework

+

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

BROWSER

Servidor Web

Servidor BD

HTTP

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

<body> <p> Conteúdo </p></body>

</html>

Cabeçalho

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