Ler e mostrar as visitas guardadas

Neste capítulo você vai recuperar os registros locais e apresentar uma lista legível.

Seu ponto de partida

Estude depois do capítulo 16. O exemplo deste capítulo é 17-ler-visitas, 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.

Trate a primeira abertura sem registros

Na primeira abertura pode não existir entradas.jsonl. Isso é um estado normal: ainda não houve visita. O programa começa com um array vazio e mostra uma frase explícita.

Quando o arquivo existe, file lê suas linhas. FILE_IGNORE_NEW_LINES remove a quebra que separa registros e FILE_SKIP_EMPTY_LINES ignora linhas vazias. Json_decode transforma cada linha JSON de volta em um array.

A implementação completa de ler_visitas fica em apoio.php. Ela confere falhas de leitura e o formato dos campos. Um registro inválido produz uma mensagem de falha, sem apagar automaticamente o arquivo que precisa ser investigado.

Faça no seu exemplo

Confira a chamada de leitura e a condição no HTML.

$visitas = ler_visitas($arquivo);
// No HTML: se $visitas === [], mostre Ainda não há visitas.

Mude uma coisa e preveja

Numa cópia nova, abra a página antes do primeiro envio.

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

Recarregue e confira

A seção Visitas neste computador deve dizer Ainda não há visitas. A página não deve ficar em branco nem mostrar aviso de arquivo ausente.

Se não acontecer

Se houver aviso na primeira abertura, confira is_file dentro da função de apoio. Não crie um registro falso para esconder a ausência de dados.

Mostre cada registro com foreach

O que você aprendeu com os assuntos agora serve para visitas. Foreach recebe cada array de visita e cria um article. O nome identifica a entrada e a mensagem aparece em um parágrafo.

Array_reverse muda a ordem de apresentação para mostrar o registro mais recente primeiro. Ele não reescreve o arquivo. A ordem da lista no navegador e a ordem de gravação no disco podem ser diferentes sem haver perda de dados.

A data do registro vem do computador que executa o PHP. Esta etapa conserva o valor, mas não precisa apresentar uma hora local formatada para o aluno entender a leitura.

Faça no seu exemplo

Localize o foreach da seção de visitas.

<?php foreach (array_reverse($visitas) as $visita): ?>
  <article>
    <h3><?= escapar($visita["nome"]) ?></h3>
    <p class="mensagem"><?= escapar($visita["mensagem"]) ?></p>
  </article>
<?php endforeach; ?>

Mude uma coisa e preveja

Envie Primeiro teste e depois Segundo teste como mensagens fictícias.

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

Recarregue e confira

A lista deve mostrar Segundo teste antes de Primeiro teste. No disco, os registros continuam na ordem dos envios.

Se não acontecer

Se nomes e mensagens se misturarem, confira o acesso por chave de cada visita. Não use uma posição fixa de uma linha separada por tabulação.

Preserve texto e linhas sem executar marcação

Escapar também é necessário na saída das visitas guardadas. O arquivo é armazenamento de texto, e não uma fonte de tags autorizadas pelo programa.

A classe mensagem usa white-space: pre-wrap no CSS para apresentar quebras de linha preservadas. A função escapar impede que uma mensagem com strong ou script vire um novo elemento. Cada ferramenta tem uma tarefa: JSON conserva o registro, escapar prepara a saída e CSS apresenta as linhas.

Não use o e-mail como texto público só porque o formulário recebeu esse campo. Nesta edição o arquivo de visitas nem o guarda.

Faça no seu exemplo

Confira a regra de apresentação em public/estilos.css e a saída preparada no PHP.

.mensagem {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

Mude uma coisa e preveja

Envie uma mensagem com duas linhas e teste literal.

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

Recarregue e confira

A lista deve preservar as duas linhas e mostrar os sinais como texto. Inspecionando o article, não deve existir um novo strong criado por essa mensagem.

Se não acontecer

Se a mensagem aparecer em uma linha só, confira white-space. Se aparecer negrito, confira escapar; CSS não impede interpretação de HTML.

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. Observe uma lista vazia numa cópia nova.

2. Envie duas visitas e compare ordem no disco e no navegador.

3. Envie sinais de HTML e confira que aparecem literalmente.

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. Uma frase deve identificar que ainda não houve registros.

2. FILE_APPEND conserva a ordem no arquivo; array_reverse apresenta a mais nova primeiro.

3. A saída usa escapar. O arquivo conserva o texto e a página não o transforma em elementos.

Quando seguir

Você recupera uma mensagem completa, inclusive linhas e caracteres especiais, e explica a ordem mostrada. 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.

• File
• Json_decode

O arquivo completo

Referência do exemplo 17-ler-visitas, reproduzida aqui para que você possa conferir sem sair da página.

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; } }