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

Apresentação em tema: "Curso de JavaWeb Módulo 1 e 2 Instrutores: Rodrigo Cardoso"— Transcrição da apresentação:

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

2 copiar, distribuir, exibir e executar a obra criar obras derivadas
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 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 1 – Introdução a programação Web
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
Visa introduzir a arquitetura cliente-servidor, HTTP, recursos web, aplicações 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 O servidor fica esperando uma requisição do cliente e devolve uma resposta, o cliente pode ser qualquer elemento (normalmente é um browser) que faz uma requisição ao cliente. Tanto a requisição quanto a resposta seguem o protocolo HTTP.

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) O HTTP surgiu da necessidade de distribuir informações pela web, para que essa distribuição fosse possível, foi necessário criar uma forma padronizada de comunicação entre os clientes e os servidores da Web e entendida por todos os computadores ligados à web. Com isso, o protocolo HTTP passou a ser utilizado para a comunicação entre computadores na web e a especificar como seriam realizadas as transações entre clientes e servidores, através do uso de regras básicas. Exemplo de requisição do cliente: GET /index.html HTTP/1.1 Host: Exemplo de resposta do servidor: HTTP/ OK Date: Mon, 23 May :38:34 GMT Server: Apache/ (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan :11:55 GMT Etag: "3f80f-1b6-3e1cb03b" Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8

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 As páginas HTML são formadas a partir de textos especiais (HTML) que podem ser “entendidas” pelos browsers e formatadas de forma conveniente. Uma página HTML pode conter outros recursos, como figuras e disparar requisições automáticas para obtê-los. Os links e os formulários são exemplos de elementos que podem fazer uma requisição baseada nos dados informados pelo cliente.

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 Servlets são indicados quando o esforço de processamento é maior do que o de apresentação, com os JSP ocorre o contrário. A diferença básica entre eles é a forma de programar

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...) Container: faz parte do servidor, uma aplicação está contida em um container Contexto: é a “página inicial” que possibilita o acesso a todos os recursos da aplicação Deployment descriptor: é um xml que fornece informações de configuração da aplicação ao container

18 HTML

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 HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.

20 Tags em HTML <tag> texto </tag>
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> As tags HTML podem ser escritas com letra maiúsculas ou minúsculas. Tags que não possuem finalização (</tag> ou />) não agem sobre um texto, mas produzem um efeito na visualização da página, no lugar onde são inseridas.

21 Exemplo de tags <b>Texto em negrito</b>
<h1><b>Tags aninhadas</b><h1/> <img src="constr4.gif" width="144" height="50" /> A tag <b> define um texto em negrito, a tag <h1> define um cabeçalho do texto usando uma fonte maior, a tag <img> é usada para inserir uma figura na página html, os atributos dessa tag definem características para a imagem como altura, largura e apontador para o local do recurso.

22 Estrutura de um documento HTML
<html> <head> <title>Título</title> </head> <body> <p> Conteúdo </p> </body> </html> Cabeçalho Corpo A tag <html> define o início e o fim do documento HTML. A tag <head> define o cabeçalho e a tag <body> define o corpo do documento. A tag <title> define o título que aparece no browser.

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" /> A tag <img> permite inserir uma figura no documento HTML e os seus atributos permitem definir características da exibição da mesma.

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=" do Citi!</a> <a href=“index.html#topo”>Voltar ao topo</a> <a name=“topo”>Topo da página</a> A tag <a> define um link para outro documento, o atributo mais importante é o href, que indica a url do documento.

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> As tabelas são muito úteis para organizar os elementos em uma grade.

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á O atributo border com valor igual a zero (border=“0”) esconde a borda da tabela,

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 Os formulários são fundamentais para permitir que o usuário possa submeter dados para serem processados no servidor. O atributo name identifica o form dentro da página html, o atributo method indica qual método do protocolo HTTP será usado para submeter os dados (GET ou POST), o atributo action define para qual url os dados serão submetidos

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 A submissão de um formulário é uma forma de enviar dados ao servidor, o usuário informa os dados para que uma determinada ação seja executada e uma resposta seja exibida ao usuário. Os dois métodos mais comuns passados no method são GET e POST. A diferença básica entre eles é a forma como os dados são enviados. O método GET envia os dados dentro da url e possui um tamanho limitado para os dados enviados. O método POST envia os dados dentro da mensagem HTTP, portanto não são passados dentro da url e o tamanho dos dados é ilimitado.

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”> O campo de texto é útil para que o usuário possa digitar um texto qualquer para ser enviado na submissão do formulário, o atributo type tem que ser “text”. O campo de senha é útil para que o usuário possa digitar uma senha sem que outras pessoas vejam, basicamente é igual ao campo de texto, mas o atributo type tem que ser “password”. O campo hidden serve para enviar alguma informação ao servidor que não necessariamente foi passada pelo usuário. Um exemplo disso é definir qual método será executado na aplicação quando o formulário for submetido.

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 Este elemento do form serve para definir opções mutuamente excludentes, se por exemplo, masculino for marcado, feminino é desmarcado. O atributo checked=“checked” pode ser usado para marcar uma opção por default

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> A diferença básica entre a tag button e o <input type=“submit”.... é que o button pode conter textos e figuras, a ação que ele executará pode ser especificada em algum dos seguinte atributos: onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Sempre é necessário usar o atributo type com o valor “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> O id da tag div pode ser usado para indicar qual estilo de fonte, cor... Que aquela região delimitada terá. No exemplo acima a lista ficará no centro da tela.

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