Tecnologias para
Internet
Thyago Maia Tavares de Farias
Aula 5
Sumário

Arquiteturas de sistemas Web
Arquitetura de duas camadas (cliente-servidor)
 Arquitetura de três camadas


Camada de Apresentação
Formulários HTML
 JavaScript

Arquitetura de duas camada




Também conhecida como arquitetura cliente-servidor;
Resolve o problema de custos de processamento da
arquitetura de uma camada;
Baseada na divisão de trabalho (componentes);
Tipos de divisão


Thin Client: Cliente implementa apenas a interface gráfica;
Servidor implementa a lógica e gerenciamento de dados;
Thick Client: Cliente implementa a interface gráfica e a lógica
de negócio; Servidor implementa o gerenciamento de dados;
Arquitetura de três camadas



Cada uma das camadas resolve e cuida de problemas
específicos;
Cada uma das camadas envolve um componente e sua
separação é facilmente identificável;
Camadas existentes:



Camada de apresentação: Cuida da interface do usuário;
Camada lógica: Ponte entre apresentação e dados;
Camada de gerenciamento de dados: representado por um
ou mais SGBDs;
Arquitetura de três camadas
Arquitetura de três camadas

Exemplo: matrículas em cursos




Utilidade: Sistema online para matrículas de estudantes em
cursos;
O sistema de gerenciamento de dados cuida das informações
dos estudantes, dos cursos, das turmas, requisitos, etc;
O servidor de aplicação mantém a lógica para adicionar
cursos, turmas, fazer matrículas, tec;
O programa cliente (Web ou não) cuida do login de
diferentes usuários, apresentação de formulários, saída de
dados, etc;
Arquitetura de três camadas

Vantagens:
Permite que a melhor tecnologia seja aplicada em
cada camada;
 Manutenção, modificação e substituição de cada
camada é feita de forma independente;
 Permite clientes “leves”;
 Códigos da lógica centralizados;
 Componentização;

Camada de Apresentação

No detalhamento da camada de apresentação,
abordaremos as tecnologias que existem no lado
do cliente da arquitetura de três camadas.
Camada de Apresentação

Serão discutidos nessa sessão:
Formulários HTML;
 JavaScript;
 CSS (Folhas de estilo)

Formulários HTML


Utilizados na comunicação entre a camada de
apresentação e a camada lógica;
Usados para captar diferentes tipos de entradas
do usuário:
Campos de texto;
 Caixas de seleção;
 Campos de escolha;
 Campos de senha;
 Entre outros...

Formulários HTML



Estruturas que permitem aos usuários submeter
dados;
Os dados submetidos podem ser tratados e/ou
armazenados na camada de gerenciamento de
dados, dependendo da aplicação;
Formato:
<form action=“” method=“” name=“”>
...
</form>
Formulários HTML

Cada atributo da tag form tem um significado e
utilidade:
Action: Especifica a URI para onde será
encaminhado o conteúdo do formulário;
 Method: Especifica o método pelo qual serão
enviados os dados. Existem dois métodos:



GET e POST (Mais detalhes adiante);
Name: Especifica o nome do formulário
Formulários HTML

Entre <form> e </form> especificamos os
elementos de entrada do formulário:
Tag input (campos e botões);
 Tag select (caixas de seleção);
 Tag textarea (áreas de texto);


Exemplos de tags para elementos de entrada:
<input type=“text” name=“nome” />
 <input type=“password” name=“senha” />

Formulários HTML

Tag input

Pode ter vários atributos. Os mais importantes são:
Type: Especifica o tipo do campo de entrada, que pode
ser text (campo de texto), password (campo de senha),
reset (botão para resetar campos) e submit (botão que
dispara o envio de conteúdo para o servidor);
 Name: especifica o nome do campo para que este possa
ser identificado na camada lógica;
 Value: Especifica o valor padrão (o conteúdo) do campo;

Formulários HTML

Exemplo – Formulário com a tag input:
<form action=“” method=“post”>
<input type=“text” name=“login”/>
<input type=“text” name=“senha”/>
<input type=“submit” value=“Enviar”/>
<input type=“reset” value=“limpar”/>
</form>
Formulários HTML

Métodos GET e POST

Utilizando o method=“get” na tag form, fazemos
com que o conteúdo do formulário seja codificado
na URI;


Exemplo: http://thyagomaia.com?campo1=valor
No caso do method=“post”, os campos de entrada
do formulário vão embutidos na requisição HTTP,
invisível para o usuário;
Formulários HTML

Exemplo – Formulário com o method=“get”:
<form action=“http://www.teste.com”
method=“get”>
<input type=“text” name=“login”/>
<input type=“text” name=“senha”/>
<input type=“submit” value=“Enviar”/>
<input type=“reset” value=“limpar”/>
</form>
JavaScript



Linguagem de script utilizada na camada de
apresentação;
Aplicações em JavaScript rodam NO
CLIENTE;
Utilizada para:
Comunicação com servidores;
 Validar formulários;
 Adicionar funcionalidades;
 Entre outros...

JavaScript




JavaScript está usualmente embarcada em
páginas HTML;
Qualquer pessoa pode utilizar JavaScript. Não
há necessidade de se adquirir qualquer licença;
Lembre-se: JavaScript e Java não são a mesma
coisa!
JavaScript é Case Sensitive;
JavaScript

O que podemos fazer com JavaScript?
Programar pequenas aplicações web;
 Inserir conteúdo dinâmico em uma página HTML;
 Prever e reagir a eventos;
 Ler e escrever em elementos HTML;
 Validar dados;
 Entre outros;

JavaScript


A tag HTML <script> é usada para inserir
código JavaScript em uma página HTML;
Exemplo:
<html>
<body>
<script type=“text/javascript”>
document.write(Date());
</script>
</body>
</html>
JavaScript – Exemplo 2
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert(“Sport Recife – Campeão Brasileiro!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()"
value=“Mostrar caixa de alerta" />
</body>
</html>