Variáveis que montam uma página

Neste capítulo você vai guardar textos em variáveis e usar esses valores no HTML.

Seu ponto de partida

Estude depois do capítulo 01. O exemplo deste capítulo é 02-variaveis-html, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Execute o PHP na raiz da sua cópia com php -S 127.0.0.1:8000 -t public. Abra http://127.0.0.1:8000/. Não abra PHP por duplo clique nem use o servidor de Python. Encerre com Ctrl+C antes de trocar de etapa.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Dê um nome ao texto

Uma variável guarda um valor para você usar depois. Em PHP, o nome começa com cifrão. O sinal de igual atribui o valor que está à direita ao nome que está à esquerda. A atribuição não mostra o texto sozinha.

Nesta etapa, a frase deixou de ficar dentro de echo e passou para mensagem no início do arquivo. Mais abaixo, echo usa a variável para montar o parágrafo. As duas partes pertencem ao mesmo pedido: ao recarregar, o PHP executa o arquivo novamente.

Nomes distinguem maiúsculas e minúsculas. Mensagem com letra maiúscula seria outro nome. Use o mesmo nome na atribuição e na saída.

Faça no seu exemplo

No início de public/index.php, confira a atribuição. Depois localize o echo no parágrafo.

$mensagem = "Uma visita por vez.";

Mude uma coisa e preveja

Troque somente o valor por Estou aprendendo a guardar um texto.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Recarregue. O parágrafo deve usar o novo valor. O nome da variável permanece no editor e não aparece no texto mostrado.

Se não acontecer

Se aparecer variável indefinida, compare mensagem no início com mensagem no echo, incluindo o cifrão e as letras.

Junte dois textos

O ponto concatena, ou seja, junta textos. Ele não é um espaço automático. Se você quiser separar nome e frase, inclua o espaço dentro das aspas.

O nome Lia é fictício. Não precisa usar seu próprio nome. Nosso objetivo é ver como uma instrução monta uma frase a partir de peças. Essas variáveis são escritas no arquivo pelo aluno; ainda não vêm de um formulário.

Um comentário começa com duas barras. Ele explica uma intenção para quem lê o código e não entra na resposta. Evite comentar uma linha apenas repetindo suas palavras.

Faça no seu exemplo

Na área PHP no início do arquivo, acrescente ou confira a montagem da frase.

$nome = "Lia";
$boasVindas = "Olá, " . $nome . ". Este é um exercício local.";

Mude uma coisa e preveja

Troque Lia por Bia e mantenha a pontuação ao redor.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Recarregue. A frase deve dizer Olá, Bia. O ponto usado pelo PHP para concatenar não aparece, mas o ponto dentro das aspas aparece.

Se não acontecer

Se duas palavras ficarem coladas, confira os espaços dentro das aspas. Não acrescente um ponto ao nome da variável para tentar criar espaço.

Mostre a variável no lugar certo

HTML identifica o papel do texto: título, parágrafo e outras partes. PHP calcula ou escolhe o valor antes de o navegador receber essa estrutura. Um parágrafo pode conter uma saída PHP sem deixar de ser um parágrafo.

O arquivo de estilos fica separado em public/estilos.css. As regras de apoio deixam a página legível e mostram o foco de teclado. Este volume de PHP não exige reconstruir o CSS.

Em um arquivo contendo apenas PHP, costuma-se omitir ?> ao final. No index.php desta etapa ele é necessário para voltar ao HTML. Não acrescente saídas antes de futuros cabeçalhos; essa ordem será estudada no redirecionamento.

Faça no seu exemplo

No corpo HTML, confira este parágrafo. Ele usa a frase montada no início.

<p><?php echo $boasVindas; ?></p>

Mude uma coisa e preveja

Mude apenas o texto do h1 em HTML para Livro de visitas de prática.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Recarregue. O título muda, mas a saudação conserva o valor da variável. Você alterou a estrutura textual no HTML, sem alterar a montagem PHP.

Se não acontecer

Se o código aparecer como texto, confirme que o arquivo ainda se chama index.php e que o endereço é HTTP do servidor PHP.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Crie cidade com o valor Recife e mostre em um parágrafo.

2. Retire o espaço depois de Olá, e descreva a diferença.

3. Altere Mensagem com maiúscula no echo e depois corrija.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Use $cidade = “Recife”; e

   . A referência completa acompanha a etapa.

2. Concatenação preserva exatamente os textos. Sem o espaço fornecido, a frase fica colada.

3. A variável é outra. Restaure $mensagem, o mesmo nome que recebeu o valor.

Quando seguir

Você reconhece atribuição, concatenação e saída, e consegue alterar cada parte separadamente. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

Consulta opcional

Não é preciso ler os links externos para executar os arquivos fornecidos. Eles servem para consultar detalhes quando você quiser.

• Variáveis

O arquivo completo

Referência do exemplo 02-variaveis-html, reproduzida aqui para que você possa conferir sem sair da página.

public/index.php

<?php
declare(strict_types=1);
$mensagem = "Uma visita por vez.";
$nome = "Lia";
$boasVindas = "Olá, " . $nome . ". Este é um exercício local.";
?>
<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Livro de visitas de prática</title><link rel="stylesheet" href="estilos.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Prática de PHP em pequenos passos</p><h1>Livro de visitas</h1>
<p>Conteúdo fictício. Somente neste computador.</p></header>
<main id="conteudo" tabindex="-1">
<p><?php echo $mensagem; ?></p>
<p><?php echo $boasVindas; ?></p>
</main><footer><p>Servidor de estudo em 127.0.0.1. Encerre com Ctrl+C.</p></footer></body></html>

public/estilos.css

* { box-sizing: border-box; }
body { margin: 0; background: #f4f7fb; color: #203246;
  font: 1.05rem/1.65 Arial, sans-serif; }
header, main, footer { max-width: 48rem; margin-inline: auto; padding: 1.5rem; }
header { padding-top: 2.5rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.2; }
main { background: #fff; border-radius: .8rem; }
article { border-top: 1px solid #cad4df; padding-block: 1rem; }
a { color: #124e77; text-underline-offset: .2em; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
label { display: block; font-weight: bold; }
input:not([type=hidden]), textarea { width: 100%; max-width: 34rem;
  border: 2px solid #718095; border-radius: .35rem; padding: .7rem;
  font: inherit; color: inherit; background: #fff; }
button { font: inherit; background: #124e77; color: white;
  border: 0; border-radius: .35rem; padding: .75rem 1.2rem; cursor: pointer; }
button:hover { background: #103b59; }
.mensagem { white-space: pre-wrap; overflow-wrap: anywhere; }
.erros { color: #8b142c; }
.ok { color: #175c30; font-weight: bold; }
:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
@media (max-width: 35rem) { header,main,footer { padding: 1rem; } }