+ Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso...
Transcript of + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso...
![Page 1: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/1.jpg)
+
Curso de JavaWeb
Módulo 1 e 2Instrutores: Rodrigo Cardoso
Material por: Rodrigo [email protected]
Maria [email protected]
![Page 2: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/2.jpg)
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
![Page 3: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/3.jpg)
+Objetivos do curso
Arquitetura cliente-servidor
Introdução a HTML
Integração de HTML com Java (JSP, SERVLET)
Desenvolvimento web no padrão MVC
![Page 4: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/4.jpg)
+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
![Page 5: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/5.jpg)
+Pré-requisitos
Conhecimento da linguagem Java
Conhecimento geral de desenvolvimento de sistemas
![Page 6: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/6.jpg)
+Por que Java Web?
Integração com a linguagem Java
Grande comunidade desenvolvedora
Várias opções de desenvolvimento
Programar no eclipse
![Page 7: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/7.jpg)
+Divisão do curso
1 – Introdução a programação
Web2 - HTML 3 - Servlets
4 - JSP 5 - Framework
![Page 8: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/8.jpg)
+
Introdução a programação web com Java
![Page 9: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/9.jpg)
+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
![Page 10: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/10.jpg)
+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)
![Page 11: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/11.jpg)
+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
![Page 12: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/12.jpg)
+Recursos web
Podem ser: Páginas html figuras (JPG, GIF, BMP...) programas web (apsx, servlet, jsp...)
![Page 13: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/13.jpg)
+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
![Page 14: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/14.jpg)
+Acesso a recursos web
BROWSER
BROWSER
Servidor Web
Servidor BD
HTTP
![Page 15: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/15.jpg)
+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
![Page 16: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/16.jpg)
+Servlets e JavaServer Pages
São programas Java
Podem acessar outras classes de Java
JSP é traduzido para um servlet, são equivalentes
![Page 17: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/17.jpg)
+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...)
![Page 18: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/18.jpg)
+
HTML
http://www.w3schools.com/html/DEFAULT.asp
![Page 19: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/19.jpg)
+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
![Page 20: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/20.jpg)
+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>
![Page 21: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/21.jpg)
+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
![Page 22: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/22.jpg)
+Estrutura de um documento HTML
<html><head> <title>Título</title></head>
<body> <p> Conteúdo </p></body>
</html>
Cabeçalho
Corpo
![Page 23: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/23.jpg)
+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" />
![Page 24: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/24.jpg)
+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>
![Page 25: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/25.jpg)
+Prática 1
Manda um scrap com imagem no orkut!
Tentar reproduzir a seguinte página HTML:
![Page 26: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/26.jpg)
+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>
![Page 27: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/27.jpg)
+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á
![Page 28: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/28.jpg)
+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
![Page 29: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/29.jpg)
+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
![Page 30: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/30.jpg)
+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”>
![Page 31: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/31.jpg)
+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
![Page 32: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/32.jpg)
+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
![Page 33: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/33.jpg)
+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>
![Page 34: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/34.jpg)
+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>
![Page 35: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/35.jpg)
+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>
![Page 36: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/36.jpg)
+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>
![Page 37: + Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso rcaa2@cin.ufpe.br Maria Carolina mcts@cin.ufpe.br.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc141497959413d8df4eb/html5/thumbnails/37.jpg)
+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