A web consite numa colecção de documentos (páginas) que estão armazenados em computadores espalhados pelo mundo inteiro. Cada página é identificada por uma URL (Uniform Resource Locator), por exemplo, http://w3.ualg.pt/~flobo/siw/index.html. Uma página contem informação e pode ter links (apontadores) para outras páginas.
Na web existem dois tipos de computadores: servidores e clientes. Os servidores disponibilizam páginas enquanto que os clientes acedem a essas páginas. A comunicação entre servidor e cliente é feita através do protocolo HTTP (HyperText Transfer Protocol) que por sua vez está baseado no TCP/IP. O protocolo HTTP não é mais do que um conjunto de regras que permite que servidores e clientes comuniquem entre si.
Os computadores que disponibilizam páginas para os clientes correm um programa especial. Esse programa designa-se por servidor web. Trata-se de um programa que corre em background e que está constantemente à espera de pedidos de clientes. Assim que recebe um pedido, trata desse pedido e serve o cliente.
Os clientes web são típicamente browsers (ex: Netscape, Mozilla, Explorer), mas não têm de ser necessáriamente browsers. Qualquer programa que comunique com um servidor web é um cliente web.
As páginas web são feitas em HTML (Hyper Text Markup Language). O HTML permite formatar texto, incluir imagens, criar links que apontam para outras páginas, etc.
O figo é um utilizador da rede interna de computadores da ADEEC, tal e qual como vocês. Um dos computadores da rede da ADEEC, o diana.uceh.ualg.pt, corre um servidor web (o apache, um servidor web muito popular que é desenvolvido em open-source).
No home directory do figo existe um directório chamado public_html. Tudo o que estiver nesse directório fica visível através do endereço http://diana.uceh.ualg.pt/~figo.
O figo criou uma pagina em HTML e gravou com o nome de ola.html. Um ficheiro em HTML é um ficheiro de texto que podem escrever com um editor de texto qualquer. O conteúdo do ola.html feito pelo figo é o seguinte:
<html>
<head>
<title>teste</title>
</head>
<body>
<p>
Olá, o meu nome é Luís Figo.
</p>
</body>
</html>
Se apontarem o browser para esse endereço podem ver o que acontece (só funciona dentro da universidade). Experimentem clicando em http://diana.uceh.ualg.pt/~figo/ola.html
Sempre que quiserem ver o código HTML de uma página, escolham a opção 'View Page Source' no vosso browser.
Aquilo que o browser faz é interpretar o HTML recebido (um ficheiro ascii) e apresentá-lo bonitinho no ecrã.
Os comandos em HTML costumam ser designados por tags. O exemplo que se segue coloca o nome Luís Figo a bold. Para tal utiliza o tag <b> e </b>. Inclui também uma lista de clubes em que o Figo já jogou.
<html>
<head>
<title>teste</title>
</head>
<body>
<p>
Olá, o meu nome é <b>Luís Figo</b>. Já joguei nos seguintes clubes:
</p>
<ul>
<li>Pastilhas
<li>Sporting
<li>Barcelona
<li>Real Madrid
</ul>
</body>
</html>
Experimentem clicando em http://diana.uceh.ualg.pt/~figo/ola2.html
Existem muitos outros tags. Para aprenderem mais sobre HTML devem consultar a documentação sugerida no final desta página.
Os exemplos que acabamos de ver tratam-se de páginas estáticas. De seguida, vamos ver exemplos de páginas dinâmicas. Uma página dinâmica é uma página cujo código HTML é gerado dinâmicamente. Tal consegue-se utilizando uma linguagem de programação que ajude a gerar o HTML que será enviado ao cliente web.
O PHP é uma linguagem de programação que permite fazer páginas dinâmicas. Um ficheiro em PHP contem código PHP misturado com HTML. Vejamos um exemplo feito pelo figo. Trata-se de o script mais simples possível de se fazer em PHP,
<html>
<head>
<title>teste</title>
</head>
<body>
<?php printf("<p>ola, tudo bem?</p>\n"); ?>
</body>
</html>
Tudo o que apareçe entre <?php e ?> é código PHP. Experimentem apontar o browser para http://diana.uceh.ualg.pt/~figo/ola.php
O script é muito simples. Só tem a instrução printf (que é em tudo semelhante ao printf da linguagem C). O argumento do printf é uma string. Essa string é enviada directamente para o browser (experimentem ver o source em HTML que foi gerado). Este exemplo não tem muito interesse porque o código HTML que é enviado para o cliente é sempre o mesmo. Agora vamos fazer uma página dinâmica com mais interesse.
date.php é um script que permite ver a data e hora local no servidor web,
<html>
<head>
<title>data e hora local</title>
</head>
<body>
<?php
printf("<p>%s</p>\n", date("g:i:sA , j/n/Y"));
?>
</body>
</html>
A função date() do php dá a data e hora local. Clica em http://diana.uceh.ualg.pt/~figo/date.php para executares o script.
Faz 'View Page Source' para veres o código que foi gerado. Agora, tenta executar o script novamente.
Agora, o figo pretende fazer uma página que calcule a tabuada. Para tal, criou 2 ficheiros: tabuada.html e tabuada.php. O tabuada.html tem um form que permite que o utilizador introduza um número. Ao carrgar no botão 'Enviar', o script tabuada.php irá ser executado. Aqui vai o conteúdo dos ficheiros,
<html>
<head>
<title>teste</title>
</head>
<body bgcolor="#FFFFFF">
<p>
Tabuada dos:
<form action="tabuada.php" method="GET">
<input type="text" value="" name="n" size="10">
<input type="submit" value="Enviar">
</form>
</body>
</html>
<html>
<body>
<title>tabuada</title>
</head>
<body bgcolor="#FFFFFF">
<?php
printf("<p>Tabuada dos %d\n</p>\n", $n);
printf("<pre>\n");
for($i=1; $i<=10; $i++)
printf("%d x %d = %d \n", $n, $i, $n*$i );
printf("</pre>\n");
?>
</body>
</html>
Experimentem clicando em http://diana.uceh.ualg.pt/~figo/tabuada.html. Façam novamente 'View Page Source' para verem o código HTML que é gerado.
O figo tem uma base de dados chamada filmes. Essa base de dados só tem uma tabela que por acaso também se chama filmes. O figo usou o psql e deu os seguintes comandos:
CREATE TABLE Filmes (
nome VARCHAR(40),
ano INTEGER,
duracao FLOAT,
aCores BOOLEAN,
nomeEstudio VARCHAR(20)
);
INSERT INTO Filmes VALUES ('Star Wars' , 1977, 124, TRUE, 'Fox');
INSERT INTO Filmes VALUES ('Indiana Jones' , 1984, 130, TRUE, 'Universal');
INSERT INTO Filmes VALUES ('Lion King' , 1997, 95, TRUE, 'Disney');
INSERT INTO Filmes VALUES ('Batman Returns' , 1992, 122, TRUE, 'Warner Brothers');
INSERT INTO Filmes VALUES ('Pocahontas' , 1998, 115, TRUE, 'Disney');
Agora o figo vai fazer um script em php que acede à base de dados dos filmes. A ideia é ter um form que permita que alguem introduza o nome de um estúdio. Ao ser executado, o script acede à base de dados filmes e vai ver todos os filmes produzidos por esse estúdio.
Em primeiro lugar, o figo tem de criar uma página que tenha um form para introduzir o nome do estúdio. Essa página pode ser feita com HTML puro. Aqui vai:
<html>
<head>
<title>Teste de PHP com base de dados</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Base de dados de filmes</h1>
<form action="pesquisa_filmes.php" method="GET">
<b>Nome do estúdio:</b>
<input type="text" value="" name="estudio" size="30">
<input type="submit" value="Enviar">
</form>
</body>
</html>
O figo também tem de criar um ficheiro em php que é executado quando o utilizador carrega no botão 'Enviar'. Aqui vai:
<html>
<body>
<title>pesquisa filmes</title>
</head>
<body bgcolor="#FFFFFF">
<?php
/* ligação à base de dados */
$bd = pg_Connect ("host=diana
dbname=filmes
user=figo
password=xxxxxx");
if(!$bd) {
printf("Nao consigo ligar a base de dados.\n");
exit;
}
/* criar query numa string */
$query = "SELECT nome, ano " .
"FROM filmes " .
"WHERE nomeEstudio = '$estudio'";
/* executar a query */
$result = pg_Exec($bd, $query );
/* processar o resultado */
$nrows = pg_numrows($result);
if( $nrows == 0 )
printf("<p>Não há nenhum filme do estúdio %s</p>\n", $estudio);
else
for($i=0; $i<$nrows; $i++) {
$tuple = pg_fetch_array($result,$i);
printf("%s, %s <br>\n",
$tuple['nome'], $tuple['ano']);
}
/* fechar a ligação à base de dados */
pg_close($bd);
?>
</body>
</html>
Experimentem clicando em http://diana.uceh.ualg.pt/~figo/filmes.html
Uma vez estando nessa página escrevam Disney na textbox e carreguem em Enviar. Ao clicarem no botão 'Enviar' o servidor Web que está a correr no computador diana vai executar o ficheiro pesquisa_filmes.php. Este ficheiro é um programa que tem HTML misturado com código PHP. O output é HTML puro que é gerado dinâmicamente e é enviado para o vosso browser.
Como podem ver, a sintaxe do PHP tem bastantes semelhanças com a linguagem C. O código acima começa por fazer uma ligação à base de dados, depois executa um select simples e envia o resultado para o teu browser.
No manual do PHP que está disponível no diana existe uma secção que explica as funções do PostgreSQL (pg_Connect, pg_Exec, ...). Dá uma olhada em http://diana.uceh.ualg.pt/php/ref.pgsql.html.
Aquilo que o figo fez também pode ser feito por um aluno qualquer.
Foi criado um directório public_html para todos os alunos da disciplina. Para os ficheiros que criarem nesse directório, devem dar permissões de leitura para todos os utilizadores (dentro do public_html façam chmod 644 *). Se não fizerem isto, não conseguem aceder às paginas que criarem.
Esta página ilustra apenas os conceitos básicos sobre HTML, PHP, e acesso a base de dados via Web. Existe muito mais coisas que poderam aprender sobre este assunto, mas o que está descrito aqui deverá ser suficiente para fazerem o vosso trabalho.
Documentação local no diana (só têm acesso nos computadores da universidade)
Websites
Livros