UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE.

Apresentação em tema: "UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE."— Transcrição da apresentação:

1 UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE

2 Agenda Introdução HTML com formulário Folha de estilo Javascript DHTML (Javascript e folha de estilo)

3 Introdução As página de internet são utilizadas para apresentação de produtos e descrição de serviços, entre outros objetivos. A linguagem utilizada é a HTML(Linguagem de marcação de hipertexto).  Quando utilizamos HTML puro, ou seja, somente HTML, as nossas páginas se tornam estáticas, isto é, sem mudanças, sem alterações.  Isto acontece porque o HTML puro não permite criação de páginas dinâmicas, que se alteram de acordo com alguma característica qualquer.

4 Introdução Para permitir que as páginas sejam dinâmicas, diversas outras tecnologias devem ser utilizadas com as mesmas. Alguns exemplos de página dinâmica seriam:  Dependendo da cidade do usuário a página terá seu layout totalmente diferente.  Dependendo do horário de acesso, a página altera suas cores de exibição.  Dependendo do usuário que está acessando, a página apresenta menus diferentes.

5 Introdução Para permitir que suas páginas fiquem dinâmicas, algumas tecnologias podem ser utilizadas, tais como:  Javascript  CSS  DHTML (Javascript com CSS)  Servlets.

6 Antes de tudo... Vamos entender como as coisas funcionam:  HTML  A Linguagem HTML serve para apresentar a estrutura da página e seus conteúdos.  CSS – folha de estilos  A folha de estilos permite que seu site ganhe “vida”, ela trabalha com a formatação do site, imagens, fundos e cores.  Javascript  A linguagem javascript permite a validação dos campos de formulários bem como alteração de layout (Classes em CSS) em tempo de execução (no lado cliente).  Servlet  Os servlets são os programas desenvolvidos em Java que rodam no lado do servidor. Eles são responsáveis por acessar banco de dados, tratar as regras dos negócios, etc....

7 Papel do HTML e CSS HTML Folha de estilo HTML Folha de estilo

8 Papel do Javascript HTML Folha de estilo Javascript HTML Folha de estilo Javascript

9 Papel do Servlet HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

10 Papel do Servlet – acesso do usuário “joao” HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

11 Papel do Servlet – acesso do usuário “maria” HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

12 HTML - Formulário Para permitir uma maior interação entre “sistemas computacionais” e os seus usuários, é necessário a existência de mecanismos de entrada que permita o computador identificar o que seus usuários querem, quais ações a serem executadas, etc... O formulário em HTML é um meio do usuário entrar com informações para um sistema.

13 Exemplo de formulário HTML

14 Como ocorre o tratamento dos dados no formulário? Primeiramente, a página com o formulário é carregada. Após o preenchimento do formulário, o javascript valida os campos que são obrigatórios.  Caso estejam preenchidos, envia os dados dos campos para um servidor tratar as informações.  Caso campos obrigatórios estejam em branco, emitir uma mensagem de erro. Após o javascript validar os campos, os dados do formulário são enviados para o servidor que irá tratá-los.  A tarefa de tratar os dados consta na verificação se os campos obrigatórios foram validados, se os valores esperados foram informados, armazenamento dos dados no banco de dados, etc... Após o tratamento dos dados, as informações são armazenadas no banco de dados e uma mensagem de confirmação é retornada pelo servidor.  Continua o processo normalmente.....

15 Tag Form Os formulários são delimitados pela Tag ….  Esta Tag permite agrupar vários elementos de formulário (botões, campos de texto, campos de seleção,…) e possui os atributos obrigatórios:  NAME Indica o nome que identifica o elemento formulário na página. Um id pode ser especificado, ou não. (como se fosse um apelido)  METHOD indica sob qual método de envio dos dados (digitados no formulário) será utilizado: “POST” os dados são enviados em pacotes. “GET” os dados são enviados e codificados na URL.  ACTION indica o endereço para onde os dados serão enviados. mailto:adresse.email@machine Permite abrir o programa de email correspondente.

16 Lembrete Atenção, todos os elementos (tag) em uma página HTML pode possuir o atributo id para definir um apelido. Untitled Document Maria Helena Morena

17 Exemplo do uso da tag Form Sintaxe da tag form... Exemplo mailto:webmaster@kioskea.net...

18 Por dentro da tag Form É possível inserir qualquer elemento HTML básico numa tag FORM (textos, botões, quadros, relações,…) mas, sobretudo, é interessante inserir elementos interativos. Estes elementos interativos são :  Campos INPUT,TEXTAREA e SELECT

19 Tag Form : campo input A Tag INPUT é a tag essencial dos formulários, pois permite criar um bom número de elementos “interativos”. A sintaxe desta tag é a seguinte:   Atributo name é essencial pois ele permite a manipulação do campo nos javascript ou servlets (linguagem script).  Atributo value permite definir um valor padrão para o campo.  O atributo type permite definir o tipo de elemento que será exibido no form. A seguir veremos os tipos possíveis.

20 Form: input: type=“tipos” Text  trata-se de um campo que permite receber uma linha de texto.  A dimensão do campo pode ser definida através do atributo size e a quantidade máxima do texto (caracteres) pode ser definido através do atributo maxlength.  Exemplo Nome do cliente " size="40" maxlength="30"> No lado do servidor: Variável chama “campoNome” Seu conteúdo será o valor digitado no campo

21 Form: input: type=“tipos” hidden  trata-se de um campo escondido.  Ele não está visível no formulário, porém, será enviado para o servidor.  Permite definir um valor fixo (que não será informado pelo usuário) para uma variável.  Exemplo No lado do servidor: Variável chama “faculdade” Seu conteúdo será ‘unipac araguari’

22 Form: input: type=“tipos” Password  trata-se de um campo de texto utilizado para digitar senhas.  A medida que o usuário digita alguma senha, o mesmo apresenta asteriscos ao invés do caracter que foi pressionado.  Exemplo No lado do servidor: Variável chama “senha” Seu conteúdo será o valor digitado no campo Informe a senha de acesso ao aluno WEB:

23 Form: input: type=“tipos” Checkbox  Trata-se de um campo de seleção, ativo (checked) ou inativo(unchecked).  Quando ativo, assume o valor que estiver no campo value.  Quando inativo, este campos se torna inexistente, portanto não será enviado para página que trata os dados.  Mais de um campo poderá ser selecionado (cada campo possuirá o mesmo nome, porém, valores “value” diferentes).  Quando ativo, no momento que os dados são enviados para o servidor, para serem tratados, o formato name/value é enviado.  O servidor acessa o valor (value) deste campo através do seu nome (name)  O servidor recebera um array (identificado pelo name) contendo os valores dos campos que foram selecionados.

24 Form: input: type=“tipos” Exemplo de Checkbox Selecione as disciplinas que cursa: Português Matemática Programação No lado do servidor: Variável chama “disciplina” Seu conteúdo será [Portugues, 111] Atenção: o atributo “checked” traz o elemento selecionado por padrão.

25 Form: input: type=“tipos” Radio  Trata-se de um campo de seleção.  Quando selecionado, assume o valor que estiver no campo value.  Poderá ter mais de uma opção de seleção, porém, somente uma opção pode ser selecionada (cada campo possuirá o mesmo nome, porém, valores “value” diferentes).  Quando selecionado, no momento que os dados são enviados para o servidor, para serem tratados, o formato name/value é enviado.  O servidor acessa o valor (value) deste campo através do seu nome (name)  O servidor recebera uma única variável identificada pelo “name” contendo o valor do campo que foi selecionado.

26 Form: input: type=“tipos” Exemplo Radio Selecione o seu sexo: Masculino Feminino No lado do servidor: Variável chama “sexo” Seu conteúdo será M Atenção: o atributo “checked” traz o elemento selecionado por padrão.

27 Form: input: type=“tipos” Submit  Exibe o botão responsável por enviar os dados do formulário para o servidor que irá tratá-la.  O botão submit dispara o evento responsável por enviar os dados que foram digitados no formulário para o servidor que irá tratá- los. Atenção: o atributo “checked” indica que: Se a tecla for pressionada, o botão será ativado.

28 Form: input: type=“tipos” Reset  Este campo permite que os dados do formulário retornem ao seus valores iniciais.

29 Form: input: type=“tipos” Button  Botões do tipo button não têm comportamento pré-definido, sendo usados apenas em scripts no lado cliente. Atenção: o botão está associados a eventos no lado do javascript.

30 Form: input: type=“tipos” File  O campo de entrada de arquivo permite ao usuário especificar um arquivo local cujo conteúdo será enviado junto com o formulário submetido, como upload.  Para isso, o elemento form do formulário que o contém deve especificar os atributos method="POST" e enctype="multipart/form-data".

31 Form:select A tag select exibe o campo de seleção baseado em uma lista previamente definida. Sintaxe:  Quem define o nome (name) do controle é o elemento select, enquanto cada valor (value) é dado por um option.  O rótulo de cada opção é dado pelo texto entre as tags de abre e fecha option.  O atributo size define o número de opções (linhas) exibidas da lista.  A exibição da barra de rolagem é automática e fica a cargo do browser.  O atributo selected define uma opção pré-selecionada (inicialmente "ligada"). É recomendado sempre definir explicitamente o que estará pré-selecionado, para evitar ambigüidade de comportamento em diferentes browsers.

32 Form:select Exemplo select Ipatinga Uberlândia Araguari São Paulo Ipatinga Uberlândia Araguari São Paulo ’ A lista com o atributo multiple (multiple="multiple") pode ter mais de uma opção selecionada, normalmente pressionando-se CONTROL e/ou SHIFT ao selecionar outro elemento.

33 Form:textarea O controle textarea é um campo de texto multi-linha.  Os atributos rows e cols definem o número de linhas de altura e o de "caracteres" de largura, respectivamente.  O atributo wrap define se a mudança de linha será automática durante a digitação ("on"), ou somente quando for pressionado ENTER ("off"). Todos os elementos do formulário podem ter atributo: - readonly (readonly="readonly" somente leitura, o elemento é enviado para o servidor) - disabled (disabled="disabled" desabilitado, o elemento não será enviado para o servidor). Todos os elementos do formulário podem ter atributo: - readonly (readonly="readonly" somente leitura, o elemento é enviado para o servidor) - disabled (disabled="disabled" desabilitado, o elemento não será enviado para o servidor). Observações:

34 Referências bibliográficas http://pt.kioskea.net/contents/html/htmlform.php3 http://www.mhavila.com.br/topicos/web/controles. html http://www.mhavila.com.br/topicos/web/controles. html

35 Trabalho Descreva os conceitos e defina exemplos que apresente-os: