+ curso de javaweb módulo 1 e 2 instrutores: rodrigo cardoso material por: rodrigo cardoso...
TRANSCRIPT
+
Curso de JavaWeb
Módulo 1 e 2Instrutores: Rodrigo Cardoso
Material por: Rodrigo [email protected]
Maria [email protected]
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