Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso Material por: Rodrigo Cardoso

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

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 • Usuário especifica URL • Browser conecta com o servidor especificado na url • Browser prepara a requisição HTTP e a envia • Servidor busca o recurso identificado pela URL • Servidor processa o pedido, prepara a resposta HTTP e a envia • Browser verifica as tags do recurso solicitado e repete o processo • 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 < e > • Não são case-sensitive • Forma geral: <tag> texto </tag> • Outras formas: <tag atributo=“valor”> texto </tag> <tag /> <br> <hr>

21. 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

22. Estrutura de um documento HTML <html><head> <title>Título</title></head> <body> <p> Conteúdo </p></body> </html> Cabeçalho Corpo

23. 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" />

24. 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>

25. Prática 1 • Manda um scrap com imagem no orkut! • Tentar reproduzir a seguinte página HTML:

26. 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>

27. 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á

28. 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

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

31. 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

32. 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

33. 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>

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” • <button type="button“>Incluir</button>

35. 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>

36. 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>

37. 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