HTML e CSS 07: Cliente e servidor

1. Sites estáticos e dinâmicos

Até agora vimos como um site estático se comporta. Vimos que trabalhamos com duas camadas, geralmente representadas por dois tipos de arquivo: a estrutura do documento (cabeçalho, sidebar, conteúdo principal, rodapé), o conteúdo em si (textos e referência a arquivos de imagem JPG ou PNG) no arquivo HTML e a apresentação no arquivo CSS.

Com a evolução das necessidades dos sites com grande dinâmica de publicação, desenvolveram-se CMSs, e estes têm mais uma camada. A camada HTML (na verdade, PHP, ASP ou outra linguagem server-side) fica responsável somente pela estrutura do documento, enquanto o conteúdo fica armazenado num banco de dados. no exemplo acima mostro a solução típica usada para um blog: CSS, PHP e MySQL. Na verdade, embora esta seja a arquitetura dominante, existem outras combinações, como CSS, ASP e Access, ou CSS, Java e Oracle.

2. Arquitetura cliente servidor

Como no caso de um site dinâmico o processo de montagem de uma página é mais complexo, temos abaixo um esquema muito simplificado do que acontece quando um usuário solicita uma página.

1. Informação do usuário é enviada ao servidor (ex. uma URL de um site, um valor em um formulário, etc.)
2. No caso da página solicitada ser em PHP, o servidor envia os dados para serem interpretados pelo PHP.
3. O PHP percebe que a página a ser servida requer informações de um arquivo CSS. Ele solicita este arquivo.
4. O PHP está montado de tal forma que requer informações que estáo guardadas num banco de dados MySQL. Ele solicita estas informações e as incorpora na página a ser servida.
5. A página PHP é montada (com as informações dos banco de dados) pelo PHP no servidor.
6. O servidor envia a página e o arquivo CSS para o navegador do usuário, que finalmente, monta a apresentação final da página.

Dizemos que este esquema é simplificado por vários motivos. Por exemplo, quando um usuário escreve um endereço em seu navegador, sua conexão procura por este endereço num servidor de DNS (Domain Name Server). Este servidor, geralmente localizado em seu ISP (Internet Service Provider), isto é, seu provesdor de acesso, e ele transforma o endereço web que você digita em um número do tipo 201.89.57.02. Assim como o número do CEP, este número guarda alguns significados. Por exemplo, 201 na primeira posição siginifica que o servidor é brasileiro, 82 é Reino Unido, e assim por diante. Assim fica mais fácil para a rede encontrar onde está o endereço que você procura. Se você quiser, por curiosidade, ver por onde passa sua conexão em uma solicitação de uma página web, tente digitar tracert <endereço> no prompt do DOS e ver o que acontece.

Voltando ao nosso problema, repare que o arquivo (na verdade, os arquivos) PHP presentes no servidor geralmente não são diretamente servidos ao navegador do usuário. Eles são pré processados, e uma página é montada especialmente para a solicitação. Se um minuto depois houver outra solicitação da mesma página, ela pode já estar alterada (caso, por exemplo, o banco de dados tiver um novo post).

É justamente esta maleabilidade que faz com que este tipo de arquitetura possa gerar páginas din?micas ao usuário.

Se tivermos uma máquina Linux rodando um servidor web Apache, este tipo de arquitetura é chamada de LAMP (Linux + Apache + MySQL + PHP). Se for um servidor windows, WAMP (Windows + Apache + MySQL + PHP).

3. O recurso de includes do PHP para estruturar um site

O recurso de includes do PHP é bastante simples e resolve um problema comum em sites: manter a consistência entre as páginas de um site.

Imagine que você está montando um site assim, como o webinsider:

Este site se divide claramente em áreas típicas, como topo, lateral, conteúdo e rodapé.

Nas várias páginas do site, as regiões de topo, lateral e rodapé se repetem, são iguais em todas as páginas, e a única área que muda de página para página é a div conteúdo. Imagine agora que o seu site tem 30 páginas que seguem este modelo; se você decidir, em qualquer ponto do desenvolvimento, alterar algo, digamos, na div lateral, terá que atualizar as 30 páginas, uma a uma, o que pode ser bastante entediante. Se o seu site tiver 300 páginas ao invés de 30, será muito chato. E mesmo assim, você corre o risco de ter esquecido algumas páginas sem atualizar, e estas ficariam diferentes do resto.

Para solucionar este problema, usa-se o recurso do include. Os passos são os seguintes:

1. Retira-se o código referente à div topo, e coloca-se em outro arquivo separado, chamado topo.php. Faz-se o mesmo com o código da div lateral e com a do rodapé. Os arquivos das páginas ficaram só com a div conteúdo, além do resto do código de abertura da página (html, body, head, title etc.)
2. No lugar onde estava o código referente ao topo, inserimos a instrução include, com a seguinte sintaxe:

   <?php include ('topo.php'); ?>

   Este é um comando PHP, e só roda se estiver interpretada por um servidor que suporte esta linguagem. O include insere o arquivo topo.php para dentro do arquivo específico da página no client.

3. O terceiro passo? Não há terceiro passo… é só isto!

Qual a vantagem? Se você precisar alterar a div lateral, pode fazê-lo no arquivo lateral.php e todas as páginas do site refletirão a mudança. Tanto o desenvolvimento quanto a manutenção do site serão muito mais fáceis. Lembre-se de dois detalhes: os arquivos devem ter a extensão .PHP, tanto os arquivos das páginas comuns quanto os que contém os includes (no nosso caso, topo.php, lateral.php e rodape.php). E lembre-se também que este recurso só funciona se você estiver rodando sobre um servidor PHP.