Introdução ao desenvolvimento Web usando HTML, CSS e PHP

Curso de Verão em
Bioinformática Estrutural
Introdução ao desenvolvimento Web
usando HTML, CSS e PHP
Eduardo Campos dos Santos
Felipe Ferré
Apresentação
Este documento foi construído para servir como material de apoio, mais especificamente como notas de aula, sobre conceitos de desenvolvimento Web discutidos durante o I Curso de Verão em Bioinformática Estrutural.
Introdução
A programação do ambiente Web que desenvolveremos neste curso envolverá o desenvolvimento
de parte de código que é interpretado no computador do usuário – mais especificamente pelo seu
navegador – e parte de código que será executado pelo computador que atuará como servidor. No
primeiro caso dizemos tratar-se de programação client-side e, no segundo caso, chamamos de programação server-side.
Sobre a programação client-side apresentaremos fundamentos sobre HTML, CSS e JavaScript. Focaremos somente sobre os fundamentos e apresentaremos exemplos particularmente interessantes
para nossos propósitos. Induziremos os alunos a adotarem os padrões sugeridos pelo XHTML de
modo que seu código HTML seja mais robusto, eficiente e confiável.
Preparação do servidor (LAMP)
O acrônimo LAMP (às vezes chamado de quarteto fantástico) vem de: Linux, Apache, MySQL,
PHP. Significa um servidor web e de banco de dados baseado no sistema operacional Linux, no
web-server Apache, no servidor de banco de dados MySQL e no interpretador de comandos PHP.
Para que tudo funcione como se espera é preciso ainda que esteja instaladas algumas bibliotecas
adicionais e algumas configurações precisam ser ajustadas. Felizmente, as distribuições de Linux
atuais fornecem mecanismos bastante simples para deixar tudo instalado e configurado adequadamente. Mostraremos aqui uma maneira que consiste em dar um único comando na linha de comandos do console. Tomando-se como exemplo o Ubuntu 10.10 (ou outra distro debian-like atual), basta dar o seguinte comando como root:
apt-get install apache2 mysql-server php5 libapache2-mod-php5 php5-mysql
Outros pacotes serão incluídos pelo apt-get devido às dependências de pacotes encontradas. Observe que além do servidor web (apache), do servidor MySQL (mysql-server) e do interpretador PHP
(php5), incluímos na lista de pacotes a biblioteca que contém o módulo do Apache2 que permite ao
Apache2 executar o PHP5 ( libapache2-mod-php5) e também o módulo do PHP que adiciona as
funções do PHP para acessar e manipular uma base de dados MySQL (php5-mysql).
Observe que o comando deve ser dado como root. Alternativamente, utilizando um usuário com privilégios de root, pode usar o comando sudo:
sudo apt-get install apache2 mysql-server php5 libapache2-mod-php5 php5-mysql
Por padrão, o Apache só reconhece o diretório /var/www constituindo este a raiz do Webserver. A
página com a frase “It's Working” é o arquivo index.html que está no referido diretório. Somente o
usuário root tem poder de escrita neste diretório. Para configurar o Apache para reconhecer também
a chamada pasta pública do usuário (usualmente uma pasta denominada public_html na pasta do
usuário) é preciso efetuar alguns simples procedimentos. 1) É preciso criar em /etc/apache2/mods-e nabled os soft links para os arquivos userdir.conf e userdir.load que estão em /etc/apache2/mods-available. Ou seja, os módulos já estão disponíveis (available) mas não ativados (enabled). 2) Além
disso é preciso comentar algumas linhas do arquivo php5.conf (pode abri-lo diretamente em modsavailable ou pelo seu link em mods-enabled). Leia as orientações no próprio arquivo.
Quanto ao servidor MySQL, vale destacar que, por padrão, ele está configurado para não aceitar conexões remotas. Se seu webserver (Apache) estiver em uma máquina diferente da que está instalada
o MySQL, será preciso modificar uma linha do arquivo /etc/mysql/my.cnf. Neste caso, basta comentar a linha:
bind-address = 127.0.0.1
Visão geral
Façamos aqui uma explanação sobre como tudo funciona.
Figura 1: Fluxograma geral de uma aplicação web no LAMP (Linux, Apache, MySQL, PHP).
Façamos um exercício simples para compreender que o PHP é um interpretador e, portanto, não fica
rodando (ou escutando uma dada porta). E ele entrega o resultado da interpretação do código para
aquele que o chamou. Assim, se ele for chamado a partir do console, retornará o resultado para o
console. Mas se for acionado via Webserver (este sim é um servidor e fica "escutando uma porta"),
entregará o resultado para o Webserver. Este, por sua vez, repassa o resultado para quem o requisitou – o navegador do usuário. A Figura 2 ilustra e explica o experimento.
Figura 2: Experimento: acessando um mesmo arquivo via php-cli (acionado a partir do console) e
do Apache (acionado por uma requisição disparada em um navegador). Em ambos os casos, o
interpretador PHP apenas interpreta o código do arquivo e retorna o resultado para o ente que o
acionou. O código-fonte PHP original é simplesmente <?php echo(“<b>Oi Mundo!</b>\n”); ?>.
Console como o navegador recebem o mesmo resultado, entretanto, como o console não interpreta
tags HTML, ele exibe na tela exatamente o conteúdo retornado pelo PHP. Já o navegador,
interpreta o conteúdo recebido como sendo um código-fonte HTML e exibe o resultado desta
interpretação (ao invés de exibir <b> e </b>, exibe o texto que se encontra entre esses dois
elementos em negrito). Para visualizar o conteúdo do arquivo recebido pelo navegador, basta dar o
comando para o navegador exibir o código-fonte. O \n foi transformado em quebra de linha em
ambos os casos. No caso do console, isso foi interessante para que o prompt seguinte não ficasse
na mesma linha do <b>Oi Mundo!</b>. No caso de um documento HTML, quebras de linha e
tabulação não modificam o resultado renderizado e exibido na tela do navegador, mas dão uma
aparência mais agradável ao código-fonte HTML e pode ser interessante se você precisar analisar
este código.
Programação client-side: XHTML, CSS e JavaScript
Fundamentos de HTML / XHTML
HTML (HyperText Markup Language) é a linguagem para criação de páginas web e seus enlaces. É
constituída por entidades denominadas tags. Uma tag pode possuir atributos (ou propriedades) e
seus respectivos valores. O estudo de HTML consiste em estudar as tags que existem e seus respectivos atributos e possíveis valores. Ou seja, não se pode criar uma tag ou definir um novo atributo
para uma dada tag ou ainda usar um valor não aceito para determinado atributo de determinada tag.
Em XML (eXtensible Markup Language) pode-se criar novas tags e definir seus possíveis atributos
e valores. Isso porque XML serve para estruturar o conteúdo de um dado documento num formato
bom para ser lido por algum programa (machine-readable). Mas se você quer que seu documento
possa ser visualizado em um navegador mostrando-se com textos formatados, gravuras ilustrativas,
tabelas etc., então você precisa usar HTML.
O XHTML consiste-se do prórprio HTML, mas com a observância obrigatória de algumas regras
provindas do XML. A maior restrição imposta por essas regras garantem um código mais confiável.
Algumas das regras já existiam no HTML, mas os navegadores modernos aceitavam (e por vezes
até interpretavam adequadamente) códigos que desrespeitavam tais regras. Por exemplo, a ordem
adequada para abrir e fechar tags sempre foi similar à regra da matemática sobre chaves, colchetes e
parênteses. Ou seja, estruturas como {[…][(...)]} estão corretas, mas uma estrutura como {[(…])} é
imprópria porque o colchetes é fechado antes do parênteses.
O programa que interpreta os códigos HTML é o navegador do usuário. Quando o usuário navega
em um site (ou simplesmente visualiza um documento HTML em seu navegador), o navegador interpreta todas as estruturas do tipo <algo> ou <algo e mais alguma coisa> como sendo tags HTML e
tenta fornecer o resultado dessa tag. Se o que aparece entre os símbolos < e > não for uma tag
HTML válida, o navegador, em geral, simplesmente a desconsidera e não exibe nem os símbolos <
e >, nem o texto que estiver entre eles. Observe que a primeira palavra entre os símbolos < e > deve
estar “colada” (sem espaços) ao símbolo <. Dito isso, podemos agora definir tag.
Uma tag é uma entidade no formato:
<nome_da_tag atributo1=”valor_do_atributo_1” atributo2=”valor_do_atributo_2”>
O que define o nome da tag é a palavra (ou letra) que aparece “colada” ao símbolo <. Pode haver
espaço(s) após o nome da tag e, caso haja algo mais depois do nome da tag e o símbolo de fecha mento >, então o que aparece deve apresentar-se no formato atributo=”valor”. Aqui já estamos adotando uma regra do XHTML – compare no quadro abaixo alguns casos do padrão antigo HTML e
do novo padrão XHTML.
Padrão antigo (HTML)
Novo padrão XHTML
<br>
<br />
<img src=”...” alt=”...” >
<img src=”...” alt=”...” />
<input type=”checkbox” checked>
<input type=”checkbox” checked=”checked” />
<input name=”pdb” ...>
<input name=”pdb” id=”pdb” … />
No padrão antigo (HTML), para incluir uma caixa do tipo checkbox que devia aparecer já marcada,
bastava incluir a palavra-chave checked dentro da tag input que define a referida caixa. Entretanto,
para que a tag input que define a caixa fique de acordo com o padrão XHTML, devemos usar uma
estrutura que mais parece uma gambiarra (e talvez seja mesmo) – mas é a “gambiarra” padronizada
oficialmente – incluímos não apenas a palavra checked mas sim checked=”checked”. Além disso,
para ficar de acordo com o XHTML que define que toda tag será fechada incluímos um espaço seguido da barra / antes de fecharmos a tag. Isso porque a tag input originalmente no HTML não era
fechada.
Bem... vamos definir logo as regras do padrão XHTML para que já nos acostumemos com elas.
•
Toda tag e seus atributos devem ser escritos com letras minúsculas;
•
A todo atributo deve estar definido um valor entre aspas duplas;
•
Toda tag deve ser fechada;
•
As tags devem ser fechadas na ordem apropriada.
Para uma discussão mais detalhada sobre as diferenças entre HTML e XHTML, incluindo alguns
exemplos ilustrativos, sugerimos consultar as páginas:
http://www.landofcode.com/xhtml-tutorials/differences-between-html-and-xhtml.php
http://www.landofcode.com/xhtml-tutorials/xhtml-syntax.php
O quadro da Figura 3 exibe o código básico que toda página no padrão XHTML deve conter:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Este é o título que aparece na Barra de Título do navegador</title>
</head>
<body>
<p>Aqui fica o conteúdo do corpo da página. Este foi o primeiro paráragrafo.</p>
</body>
</html>
Figura 3: Código XHTML básico
A duas primeiras “tags” são casos diferentes – não são fechadas com barra (/) no final. A primeira é
importante se você for usar caracteres especiais (e.g. letras acentuadas, cedilha etc.) sem ter que
usar códigos para elas. A segunda linha define o Doctype do documento. O Doctype é a Declaração
do Tipo de Documento ou simplesmente DTD, todo documento (X)HTML deve conter um Doctype
logo em seu início. É ele que vai dizer para o navegador qual é a versão do (X)HTML que você está
usando no arquivo. Existem diferentes versões de HTML, cada uma com sua regra e algumas diferenças na sintaxe.
Se você deixar de declarar o Doctype em seu arquivo (X)HTML, o navegador tentará “adivinhar”
qual é o Doctype. Às vezes ele acerta, às vezes não, o que pode provocar uma renderização defei tuosa pelo navegador. Existem três tipos principais (e alguns outros “exóticos”): Strict; Transitional
e; Frameset.
Doctype Strict pode ser um pouco complicado para iniciantes porque você precisa escrever um código impecável, sem erros, você não pode usar tags e atributos de apresentação como a tag <font>,
<body bgcolor=”red”>, etc. E você deve usar CSS para qualquer tipo de estilo/apresentação/design
que queria usar na página.
Doctype Transitional foi destinado para permitir a escrita de códigos compatíveis com navegadores mais antigos (que não reconhecem CSS por exemplo) e para ajudar os web designers a melhorarem seus códigos enquanto aprenderem as novas recomendações. Com Transitional você poderá cometer alguns erros e usar tags e atributos de apresentação.
Doctype Frameset foi feito para designers que querem usar frames em suas páginas. O uso de frameset foi criticado desde que surgiu. Pesquise bastante antes de optar por usar frames. A dica que
deixamos aqui, é: NÃO USE FRAMES. No máximo, use inline frames (iframes) e em casos específicos onde sejam, de fato, interessantes. Quer um bom exemplo de uso de iframes? Gmail.
No quadro abaixo, incluímos o uso de algumas outras tags básicas – todas destinadas à formatação.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Este é o título que aparece na Barra de Título do navegador</title>
</head>
<body>
<h1>Esta é uma forma simples de definir um título</h1>
<h2>Esta é uma forma simples de definir um subtítulo</h2>
<h3>Esta é uma forma simples de definir um subsubtítulo</h3>
<p>Este é o primeiro paráragrafo.</p>
<p>Esta é a primeira linha do segundo parágrafo.<br />E esta, a segunda.</p>
<p>Usar duas tags “br” NÃO é o mesmo que usar a tag parágrafo.</p>
<p style="text-align:center">Teste com dois parágrafos.</p>
<p>Como ficou o alinhamento deste?</p>
<p style="text-align:center">Teste com dois &lt;br /&gt;.<br /><br />
Como ficou o alinhamento deste?</p>
<!-- Comentário: o uso do atributo align para a tag p foi eliminado a partir do
HTML 4.01 e do XHTML 1.0. Os navegadores atuais não reconhecem este atributo. -->
<p>Um pequeno exemplo com algumas coisas: você pode escrever <qualquer abobrinha> ??
entre os símbolos < e > desde que tenha uma letra colada ao sinal de
<font color="#ff0000">menor que (<)</font> porque o navegador tentará interpretar como
código <b>HTML</b> e, se não conseguir, simplesmente ignorará sem
<font color="#0000ff" size="+3">exibir</font> nenhuma mensagem de erro. Por outro lado,
entenda que você precisa escrever tags, atributos e valores corretamente
(inclusive sem erros de grafia).</p>
<p>Aqui um exemplo de: <i>itálico</i>, <b>negrito (bold)</b>, <u>sublinhado (underline)</u>
e também de algumas combinações: <b><i>negrito e itálico</i></b>.
</body>
</html>
Figura 4: Código XHTML com algumas tags fundamentais
Figura 5: O Resultado da renderização do código da Figura anterior
Para inserir uma imagem, use a tar <img> e para inserir um link, use a tag <a>. Para indicar qual
imagem deve ser carregada ou qual documento deve ser referenciado, é preciso indicar o caminho e
o nome do arquivo. No caso da tag <img> isso é feito pelo atributo src e, no caso da tag <a>, pelo
atributo href. As Figuras 6 a 9 ilustram exemplos de endereços relativos.
Figura 9: Exemplo contendo um link (tag <a> de address). O conceito de endereço
relativo é o mesmo daquele relativo à tag <img>.
A Figura 10 ilustra o uso de endereços absolutos.
O uso de tabelas é muito usual em sites do tipo que iremos trabalhar. Atualmente, é possível cons truir páginas com estruturas de linhas e colunas sem utilizar tabelas propriamente ditas. Isso é possível utilizando CSS com tags <div>. A boa e velha tabela sempre tem seu lugar. A Figura 11 representa um pequeno tutorial sobre tabelas ilustrando o efeito de alguns de seus atributos. Deixaremos
para criar uma tabela efetivamente útil para nossos propósitos ao tratarmos o CSS.
Vejamos agora algo sobre formulários. A Figura 12 ilustra um exemplo simples de formulário e a
Figura 13 exibe seu código-fonte. Este exemplo contém apenas dois tipos de elementos (<input
type=”text” … /> e <select ...>) além dos botões (<input type=”submit” … /> e <input type=”reset”
… />). Outros exemplos possíveis são <input type=”checkbox” … /> <input type=”radio” … />
<input type=”hidden” … /> <textarea ...>.
Figura 12: Exemplo de formulário
Figura 13: O código-fonte para gerar o formulário da Figura anterior. Aqui foram utilizados
somente dois tipos de elementos (caixa de texto e lista de seleção). Observe que a lista de seleção
permite passar valores múltiplos. Por isso, seu valor está sendo passado em um array –
selected_target[]. Atenção ao uso dos atributos name e id para garantir retrocompatibilidade
(name), compatibilidade com as recomendações atuais (id) e também para poder escrever códigos
JavaScript que referenciam os elementos do formulário.
Fundamentos de CSS
O uso do CSS (Cascading Style Sheet) atualmente é não apenas necessário para construir interfaces
mais atraentes, mas é também uma recomendação para construir códigos mais confiáveis segundo
padrões webstandart e melhor tratados por navegadores e outros programas (programas que lêem o
documento e transformam o texto em voz; programas para tratamento automático da informação
distribuída em diversos documentos etc.).
Além disso, como já vimos, alguns atributos HTML estão sendo simplesmente eliminados e não
mais compreendidos pelos navegadores, tornando o CSS a única alternativa para obter certos resultados. Como o caso do atributo align da tag <p>.
Para evitar que sua página fique com uma aparência arcaica, você deve, no mínimo, utilizar a atri buição text-decoration:none do CSS para fazer com que os hyperlinks não sejam sublinhados, pois
os navegadores atuais ainda sublinham por padrão os hyperlinks.
A combinação de CSS com JavaScript costuma produzir resultados bastante atraentes e interessantes, como menus dinâmicos e seções dinâmicas.
Há quatro maneiras de se inserir atribuições CSS em um documento: (1) diretamente em uma dada
tag usando o atributo style, por exemplo:
<font style=”color:#f4f3fa; font-style:italic”>teste</font>)
(2) pode-se definir os estilos de formatação para as tags HTML ou criar classes de estilo que podem
ser usadas em diferentes tipos de tags usando a tag <style>. Em geral, isso é definido no cabeçalho
do documento HTML, ou seja, entre <head> e </head>. Por exemplo:
<style>
body {
background: #ccc;
color: #666
}
a {
text-decoration:none;
color: #aac;
}
a:hover {
text-decoration: underline overline;
color: #caa;
}
.protein {
background: red;
color: white;
}
</style>
(3) outra alternativa consiste em colocar as definições CSS em um arquivo separado, geralmente,
com extensão .css, e incorporá-lo aos documentos HTML. Esse arquivo é chamado de folha de estilo. Uma vantagem óbvia, é que você pode centralizar as definições facilitando eventuais alterações
em estilos de formatação que devem modificar a aparência de todas as páginas do website. Além
disso, pode-se incluir mais de uma folha de estilo em um mesmo documento. Isso facilita o gerenciamento da formatação de diferentes seções do website. Se uma atribuição é definida em mais de
uma folha de estilo e ambas são incorporadas a um dado documento, vale a atribuição definida no
último arquivo incorporado. Ou seja, uma atribuição sobre um mesmo elemento sobrescreve uma
eventual atribuição anterior. Para incorporar uma folha de estilo a um documento, há duas maneiras:
usar a tag <link> ou usar @import dentro de uma seção <style>. Esta última alternativa costuma gerar problemas, sobretudo para algumas (talvez todas) versões do MSIE. Em geral, sugere-se dar preferência ao uso de <link> para incorporar folhas de estilo. Assim, apresentaremos exemplo somente
para esta opção e deixamos como exercício a consulta sobre o uso da quarta opção que é o uso do
@import. Para inserir uma folha de estilo usando <link>, basta inserir, geralmente, no cabeçalho
(i.e. Entre <head> e </head>):
<link rel=”stylesheet” type=”text/css” href=”caminho_e_nome_do_arquivo.css” />
Em geral, esta é a forma usada. Deixamos como referência o site da W3C para leitura complementar sobre outros atributos e outras possibilidades envolvendo a incorporação de folhas de estilo.
http://www.w3.org/TR/html4/present/styles.html
http://www.w3.org/TR/CSS2/media.html
Figura 14: Uso de CSS para criar uma tabela HTML personalizada (permitindo, dentre outras
coisas definir bordas diferentes na mesma tabela) e de uma forma mais centralizada e eficiente – as
mesmas configurações podem ser aplicadas para outras tabelas do documento e, para alterar
totalmente a aparência dessas tabelas, basta alterar as especificações CSS sem ter que alterar o
código HTML. Além disso, as especificações CSS podem estar em um documento .css separado
servindo para atender a todos os documentos do site – para mudar alguma formatação no futuro,
bastará alterar a definição no arquivo .css.
Figura 15: Um exemplo de saída possível para uma aplicação que exibe informações sobre um
conjunto de moléculas.
Figura 16: Código-fonte (somente HTML) que gerou a tabela da Figura anterior. Observe que as
definições CSS foram importadas de um documento .css usando a tag <link>.
Figura 17: Especificações CSS
para o código da Figura anterior.
Figura 18: Usando um código-fonte HTML essencialmente idêntico ao da Figura anterior,
produziu-se uma tabela com um visual bem diferente.
Figura 19: Código-fonte (parte HTML) que produziu a tabela da Figura anterior. As definições
CSS estão exibidas na próxima Figura.
Figura 20: As definições CSS para o
código da Figura anterior.
Fundamentos de JavaScript
Não estudaremos o JavaScript aqui por falta de tempo. Mas vamos tentar explicar o que ele é e para
que serve. Diferentemente do que vimos até agora (HTML e CSS) o JavaScript é uma linguagem de
programação. Enquanto HTML/CSS servem para definir a apresentação e a formatação do conteúdo
de suas páginas, bem como permitir a interatividade através de hyperlinks e formulários, o JavaScript serve para inserir comportamentos disparados, em geral, instantaneamente em resposta a ações
do usuário ou de algum temporizador (construído com o próprio JavaScript).
Mas assim como HTML e CSS, JavaScript é executado pelo navegador. Um exemplo clássico de
uso de JavaScript é a validação de formulários executada pelo próprio navegador do usuário, ou
seja, sem requerer que os dados sejam enviados para o servidor e este faça a validação para então
retornar alguma mensagem de erro caso encontre algo de errado. Para garantir segurança e confiabilidade, é importante que os dados passados via formulário sejam revalidados pelo servidor porque o
código JavaScript pode ser adulterado ou pode haver alguma falha na sua execução que deixe passar algo impróprio.
Outro exemplo bastante útil de aplicação do JavaScript é na disponibilização de uma funcionalidade
de autocompletar ao digitar dados em uma caixa de texto de formulário (como os nomes de proteínas ou da espécie a ser pesquisada). Veja esse recurso sendo usado no site de sequências protéicas
Uniprot (www.uniprot.org) e também em Drugs.com(http://www.drugs.com/drug_interactions.php).
Programação server-side: PHP
PHP é uma linguagem de programação que é executada no servidor. Assim, não há problemas de incompatibilidade com os navegadores como ocorre com HTML/CSS/JavaScript. Quando o usuário
navega em um site e requer visualizar um dado documento PHP, o Webserver (Apache no nosso
caso) chama o interpretador PHP para que este leia e execute o código. O que determina que o PHP
deve ser chamado é a extensão do arquivo (.php) e não seu conteúdo. Alguns administradores configuram o Apache para também chamar o PHP quando a extensão do arquivo for .inc (de include).
Cuidado com isso! Você pode ter surpresas desagradáveis com usuários conseguindo visualizar seu
código-fonte PHP (às vezes até contendo senhas escritas) em algum documento .inc porque o administrador (ou mesmo você) se esqueceu de refazer a configuração adequada ao atualizar ou substituir um dado servidor. Assim, fica uma dica: ao escrever fragmentos de código que deverão ser incluídos em outros documentos PHP (isso pode ser feito com as funções include(), require() e outras)
prefira denominar seus arquivos no formato foo.inc.php ou invente algo para ajudá-lo a gerenciar
seus arquivos mas sempre usando a extensão .php.
Um documento pode conter trechos que não serão interpretados pelo PHP de modo que você pode
misturar PHP, HTML e qualquer texto no mesmo documento. Toda vez que um trecho precisar ser
interpretado pelo PHP, deve-se abrir uma seção com <?php e encerrá-la com ?>. Veja o exemplo
abaixo:
<html>
<head>
<title>Teste com PHP</title>
</head>
<body>
Este trecho pode ser visto por todos.<br />
<?php
if($login == 1){
echo “Já isso só é exibido se a condição acima for <b>satisfeita</b>.<br />\n”;
}
?>
Esse outro trecho também é exibido sempre.
</body>
</html>
Vejamos agora um exemplo usando includes.
<?php
include(head.inc.php);
include(protein_details.inc.php);
include(foot.inc.php);
?>
<!-- Este é o conteúdo do arquivo head.inc.php -->
<xml … >
<!doctype …>
<html>
<head>
...
</head>
<body>
<!-- Aqui a barra de menu do site -->
<!-- Este é o conteúdo do arquivo foot.inc.php -->
<!-- Aqui texto do rodapé da página (endereço e telefone), copyright etc. -->
</body>
</html>
Vamos reconstruir a tabela da Figura 15 (cujo código-fonte está exibido na Figura 16).
Figura 21: Código PHP para gerar a tabela da próxima Figura.
Figura 22: Resultado do código PHP conforme exibido pelo navegador.
Figura 23: Código HTML retornado pelo PHP e entregue ao navegador.
A documentação online do PHP (php.net) é excelente e recomendamos consultá-la. Verifique, por
exemplo, as funções que tratam arrays (ordenar, colocar e retirar elementos, splits etc.). Verifique
também as possíveis estruturas de repetição (for, while etc.) e as estruturas condicionais (if-elseif-else, case etc.).
Você talvez precise rodar um programa externo (escrito em perl, por exemplo, ou o programa do
próprio sistema operacional para compactar um dado arquivo a ser enviado por e-mail ao usuário).
Se não for necessário que o script PHP receba algum retorno do programa externo, pode-se usar a
função exec(), caso contrário, use a função system().
Outro recurso que pode ser interessante para a interface web que construiremos: guardar seção. Digamos que você selecione alguma estrutura durante a navegação e quer que essa seleção se mantenha enquanto navega pela interface e seleciona outras estruturas para serem todas analisadas em
conjunto mais tarde. Para isso, pesquise sobre funções de sessões no php.net, principalmente as funções session_start, session_register e session_destroy (http://php.net/manual/en/ref.session.php).
Bem... temos pouco tempo para tratar sobre HTML, CSS e PHP em nossa aula. Mas esperamos que
as dicas apresentadas aqui ajudem a orientar seus estudos. Na segunda parte de nosso treinamento
sobre desenvolvimento web e banco de dados, voltaremos a apresentar alguns exemplos de código
em PHP.
Abraços,
Eduardo e Felipe.