---
title: 'HTML reutilizável com PHP'
summary: 'Aprenda a reutilizar elementos como menus de navegação, aproveitando a capacidade dinâmica do PHP.'
permalink: 'html-reutilizavel-com-php/'
originalPath: /reusable-html-with-php/
tags: chapter
layout: 'chapter.njk'
---

# 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](https://en.wikipedia.org/wiki/Recursive_acronym), 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](https://wordpress.org/) 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).

{% aside 'Observação' %}
É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro.

O jeito mais fácil provavelmente é usar um app como [XAMPP](https://www.apachefriends.org/) ou [MAMP](https://www.mamp.info) (o que eu uso). Você também pode [instalar o PHP direto no sistema](https://perma.cc/MZB9-GKBD) e usar o [servidor de desenvolvimento embutido](https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php).
{% endaside %}

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](https://perma.cc/WAD3-JCNX).

- [DreamHost](https://www.dreamhost.com/)
- [SiteGround](https://www.siteground.com/)
- [Reclaim Hosting](https://www.reclaimhosting.com/)
- [InfinityFree](https://www.infinityfree.com/)

E ainda tem o [NearlyFreeSpeech.NET](https://www.nearlyfreespeech.net/), a hospedagem [que eu uso há anos](https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/). 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](https://perma.cc/P7Y7-CR6P).

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.

```php
<!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á).

```html
<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:

```html
<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.

{% aside 'Observação' %}
No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra `/` e escreva o caminho completo. Veja esta [seção sobre URLs relativas e URLs absolutas](/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas) do capítulo do servidor web, se você ainda não viu.
{% endaside %}

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

```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.

1. Mude a extensão do arquivo de `.html` para `.php`.
2. 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
<?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
<?php include "../includes/nav.php" ?>
```

{% aside '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
<?php include $_SERVER['DOCUMENT_ROOT'] . "/includes/nav.php" ?>
```

{% endaside %}

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.

```php
<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
<?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:

1. Primeiro, queremos ignorar a página inicial (`/`), porque ela obviamente não é subpágina de nada.
2. 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.