HTML reutilizável com PHP

Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.

É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa PHP: Hypertext Preprocessor. Sim, a sigla faz parte do nome, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.

O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS WordPress foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. Hypertext preprocessor é uma boa descrição do que ela costuma fazer.

Quando você visita um site estático, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?

O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em example.com/user/blake. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.

O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.

Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução include.

Como executar PHP

O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.

Eu recomendo o que se chama hospedagem compartilhada. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).

A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu perguntei no Mastodon.

E ainda tem o NearlyFreeSpeech.NET, a hospedagem que eu uso há anos. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.

Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com FTP.

Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.

O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de .html para .php. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.

Deixar uma página dinâmica

Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.

Por exemplo, aqui vai uma página que mostra o ano atual.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My website</title>
        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
    </head>
    <body>
        <h1>My website</h1>

        <p>The current year is: <?php echo date('Y') ?></p>
    </body>
</html>

Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.

Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<?php e ?>).

O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução echo é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função date devolve a data atual — neste caso, estamos dizendo que queremos só o ano.

Então a função date roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução echo, que o insere no documento.

O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.

Reutilizar partes do seu site

Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.

Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo aria-current, que muda conforme a página em que você está).

<nav>
  <a href="/index.html" aria-current="page">Home</a>
  <a href="/blog/">Blog</a>
  <a href="/about.html">About</a>
  <a href="/resume.html">Resume</a>
  <a href="/fun.html">Fun!</a>
</nav>

Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em cada página e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.

Primeiro, crie um arquivo chamado nav.php. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta includes, só para organizar.

Copie o menu de navegação da página inicial (index.html) e cole o conteúdo no arquivo nav.php. Por enquanto, remova o atributo aria-current="page", porque vamos precisar tornar essa parte dinâmica depois.

Você deve ter um arquivo nav.php mais ou menos assim:

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/about.php">About</a>
  <a href="/resume.php">Resume</a>
  <a href="/fun.php">Fun</a>
</nav>

O trecho acima não é só um recorte. É o conteúdo inteiro de nav.php. Ao contrário de outros arquivos HTML, que precisam de um <head>, um <body> etc., arquivos PHP podem conter um fragmento de HTML.

Agora vamos usar. Renomeie index.html para index.php. Apague o bloco <nav> inteiro e substitua pela seguinte linha de PHP.

<header>
    <?php include "includes/nav.php" ?>

    <h1>Blake&rsquo;s Homepage</h1>
</header>

Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.

Converter páginas HTML em PHP

Os passos são, em geral, os mesmos para cada página.

Mude a extensão do arquivo de .html para .php.
Substitua a tag <nav> pela instrução include do PHP.

Para páginas do nível mais alto, a instrução include do PHP vai ficar assim:

<?php include "includes/nav.php" ?>

Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe .. para subir um nível.

<?php include "../includes/nav.php" ?>

Observação

Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (.) aqui une as duas strings de texto.

<?php include $_SERVER['DOCUMENT_ROOT'] . "/includes/nav.php" ?>

Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o nav.php.

Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <head> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.

Bônus: destacar dinamicamente o link atual da navegação

Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo aria-current no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?

Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o aria-current automaticamente.

Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo aria-current="page".

Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar aria-current="true". Isso é menos específico e mais correto em termos de significado.

Beleza, então como adicionamos isso automaticamente com PHP?

Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado.

Esta técnica vai exigir que a gente chame uma função em cada item da navegação. Fica assim.

<nav>
    <a href="/" <?php aria_current('/') ?>>Home</a>
    <a href="/blog" <?php aria_current('/blog') ?>>Blog</a>
    <a href="/about.php" <?php aria_current('/about.php') ?>>About</a>
    <a href="/resume.php" <?php aria_current('/resume.php') ?>>Resume</a>
    <a href="/fun.php" <?php aria_current('/fun.php') ?>>Fun!</a>
</nav>

Vamos precisar de uma função personalizada chamada aria_current (eu te dou o código dessa função daqui a pouco). A função deve receber um argumento, que deve ser o texto do href. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando echo, o atributo aria-current.

Você pode colocar a função no mesmo arquivo, acima da marcação HTML.

<?php
function aria_current($url) {
    // If $url is an exact match for the current URL, return 'aria-current="page"'.
    if ($_SERVER['REQUEST_URI'] === $url) {
        echo 'aria-current="page"';
        return;
    }

    // Otherwise it might be a sub-page, so check if the current URL contains
    // $url. If it does, return 'aria-current="true"' to indicate that the link
    // is an ancestor of the current page. Ignore a lone slash.
    if ($url !== '/' && strpos($_SERVER['REQUEST_URI'], $url) !== false) {
        echo 'aria-current="true"';
        return;
    }
}
?>

<nav>
    <a href="/" <?php aria_current('/') ?>>Home</a>
    <a href="/blog" <?php aria_current('/blog') ?>>Blog</a>
    <a href="/about.php" <?php aria_current('/about.php') ?>>About</a>
    <a href="/resume.php" <?php aria_current('/resume.php') ?>>Resume</a>
    <a href="/fun.php" <?php aria_current('/fun.php') ?>>Fun!</a>
</nav>

Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada aria_current com um argumento: uma variável chamada $url.

Você pode ver onde eu acrescentei algumas notas chamadas comentários. Toda linha que começa com duas barras (//) é considerada comentário e é ignorada — está ali só para quem está olhando o código.

O primeiro pedaço de código é uma instrução if. O PHP tem uma variável global chamada $_SERVER com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de REQUEST_URI). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir aria-current="page" usando a instrução echo. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag <a>, onde ficam os atributos). Depois da instrução echo, usamos return para parar a função — já terminamos.

Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado?

Este teste tem duas partes:

Primeiro, queremos ignorar a página inicial (/), porque ela obviamente não é subpágina de nada.
Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação.

A segunda parte do teste usa uma função chamada strpos. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de palheiro). O segundo é um pedaço de texto que você está procurando (vamos chamar de agulha). A função devolve a posição da agulha no palheiro, se encontrar. Devolve false se não encontrar de jeito nenhum.

Então, de novo, vamos olhar a variável global embutida $_SERVER['REQUEST_URI']. Você pode imaginar isso como algo tipo /blog/my-first-post. Sabemos que a pessoa está numa subpágina do blog se encontrarmos /blog dentro desse caminho.

O teste passa nesse caso, e vamos imprimir aria-current="true" usando a instrução echo.

Se os dois testes falharem, não imprimimos nada.

Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o href do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo aria-current adequado. Caso contrário, não imprimimos nada.

Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript.

Conclusão

A criação de modelos com include no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso.

Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez.

E com isso, você terminou o último capítulo bônus de HTML e Pessoas! Obrigado por ler.