🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[Regras Básicas do PHP] Domine Variáveis e Arrays Associativos para Criar um Cartão de Perfil!

No artigo anterior, criamos uma página de "Frase do Dia" que mudava a mensagem dependendo do dia da semana usando PHP. Espero que você tenha conseguido experimentar a diversão de ter o PHP a rodar no servidor para gerar HTML dinamicamente.

Desta vez, vamos aprender o núcleo da programação em PHP: "como lidar com dados". Especificamente, você irá adquirir duas armas importantes: as "variáveis", para armazenar um único dado, e os "arrays associativos", para gerir múltiplos dados relacionados em conjunto.

Ao terminar de ler este artigo, você terá adquirido as bases para manipular informação à vontade com PHP e, no final, será capaz de criar o seu próprio **cartão de perfil original** como o que se segue. É um conteúdo muito prático que pode usar imediatamente como um widget de apresentação pessoal, bastando para isso alterar a informação para a sua. Vamos começar!

Está pronto para executar o PHP?

Antes de entrarmos no assunto principal, uma verificação importante. Para executar o código deste artigo, você precisa de um ambiente de servidor onde o PHP possa funcionar. Se ainda não preparou um ambiente de desenvolvimento no seu computador, por favor, consulte primeiro este artigo para se preparar.

[Introdução ao PHP] Guia Completo para Baixar e Instalar o XAMPP!

Se já está tudo pronto, vamos para o próximo passo!

1. Variáveis: "Caixas" para guardar dados

Na programação, uma "variável" é como uma "caixa com nome" para guardar dados como números ou strings de texto. Em PHP, os nomes das variáveis devem começar sempre com um cifrão ($).

Por exemplo, para lidar com o título do seu site ou o seu nome em PHP, você escreveria da seguinte forma. 


<?php
// Armazenar uma string na variável $site_title
$site_title = "A Minha Página de Perfil";

// Armazenar uma string na variável $my_name
$my_name = "Maria Silva";

// Armazenar um número na variável $age
$age = 28;
?>
<!DOCTYPE html>
<html lang="pt">
<head>
    <title><?php echo $site_title; ?></title>
</head>
<body>
    <p>Olá, sou a <?php echo $my_name; ?>. Tenho <?php echo $age; ?> anos.</p>
</body>
</html>

A linha $my_name = "Maria Silva"; significa "coloque a string de texto 'Maria Silva' na caixa chamada `$my_name`". Uma vez que você guardou algo numa variável, pode usar o echo para chamar o seu conteúdo em qualquer lugar, quantas vezes quiser.

2. Arrays Associativos: "Prateleiras com Etiquetas" para dados relacionados

A informação de um perfil tem muitos dados relacionados, como nome, cargo, passatempos, etc. Gerir cada um destes em variáveis separadas (`$name`, `$role`, `$hobby`...) torna-se complicado à medida que o número de itens aumenta.

É aqui que entram os "arrays". Um array é uma caixa maior que pode gerir múltiplos dados em conjunto. Um tipo especialmente utilizado em PHP é o "array associativo", que é como uma "prateleira com etiquetas" que lhe permite gerir dados não por números, mas por um "nome (chave)".

Como criar e usar um array associativo

Se quiser gerir a informação de um perfil com um array associativo, pode escrevê-lo da seguinte forma. 


<?php
// Armazenar a informação do perfil num array associativo $profile
$profile = [
    'name'    => 'João Pereira',
    'role'    => 'Designer Web',
    'hobby'   => 'Ir a cafés aos fins de semana',
    'comment' => 'Esforço-me por criar designs simples e fáceis de usar.'
];
?>

Aqui, 'name' e 'role' são as "chaves (etiquetas)", e o que está à direita de => é o "valor (o conteúdo)".

Para obter um dado específico de um array, especifica-se no formato nome_do_array['chave']. 


<?php
$profile = [
    'name'    => 'João Pereira',
    'role'    => 'Designer Web',
    'hobby'   => 'Ir a cafés aos fins de semana',
    'comment' => 'Esforço-me por criar designs simples e fáceis de usar.'
];

// Especificar a chave 'name' para obter e exibir o valor
echo $profile['name']; // Resultado: João Pereira

echo '<br>'; // Para uma quebra de linha

// Especificar a chave 'comment' para obter e exibir o valor
echo $profile['comment']; // Resultado: Esforço-me por criar designs simples e fáceis de usar.
?>

Como pode ver, usando arrays associativos, pode gerir dados altamente relacionados como os de um perfil de uma forma muito clara e como uma única unidade.

A Versão Final: Um "Cartão de Perfil" que Funciona com Copiar e Colar

Agora, vamos combinar os nossos conhecimentos de variáveis e arrays associativos para completar o nosso objetivo final: o "Cartão de Perfil".

【IMPORTANTE】Copie todo o código abaixo e crie um arquivo chamado perfil.php. Em seguida, coloque esse arquivo na pasta `htdocs` do seu XAMPP e acesse-o no seu navegador através de um URL como http://localhost/perfil.php. 


<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>O Meu Perfil</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #eef2f7; padding: 2rem; }
        .profile-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            text-align: center;
            padding: 2.5rem;
            border-top: 5px solid #007bff;
        }
        .profile-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin-bottom: 1rem; }
        .profile-name { font-size: 1.8rem; font-weight: 600; color: #333; margin: 0; }
        .profile-role { font-size: 1.1rem; font-weight: 300; color: #777; margin-top: 0.25rem; }
        .profile-divider { border: 0; height: 1px; background-color: #eee; margin: 1.5rem 0; }
        .profile-info p { font-size: 1rem; color: #555; line-height: 1.6; text-align: left; margin: 0.5rem 0; }
        .profile-info p strong { color: #333; margin-right: 0.5em; }
    </style>
</head>
<body>
<?php
// Gerir toda a informação do perfil num array associativo
$profile = [
    'name'        => 'Ana Sofia',
    'role'        => 'Engenheira de Frontend',
    'hobby'       => 'Fotografia, Viagens',
    'comment'     => 'Procuro criar UI/UX intuitivas e memoráveis para os utilizadores.',
    'image_url'   => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300' // Coloque o URL da sua imagem aqui
];
?>
    <div class="profile-card">
        <img src="<?php echo $profile['image_url']; ?>" alt="Foto de Perfil" class="profile-img">
        <h2 class="profile-name"><?php echo $profile['name']; ?></h2>
        <p class="profile-role"><?php echo $profile['role']; ?></p>
        <hr class="profile-divider">
        <div class="profile-info">
            <p><strong>Hobby:</strong><?php echo $profile['hobby']; ?></p>
            <p><strong>Lema:</strong><?php echo $profile['comment']; ?></p>
        </div>
    </div>

</body>
</html>

Apareceu um belo cartão de perfil no seu navegador? Simplesmente alterando o conteúdo do array $profile na secção de PHP para a sua própria informação, pode criar facilmente um cartão de apresentação pessoal. Sinta-se à vontade para trocar o URL da imagem e divertir-se com ele.

Aplicação Avançada: Gerar Automaticamente Vários Cartões de Pessoal

E se quiser apresentar vários membros da equipa? Copiar e colar o código do cartão de perfil para cada pessoa seria muito trabalhoso, certo? É em momentos como este que a programação entra em ação.

Combinando uma estrutura aninhada ("um array dentro de outro array", ou um array multidimensional) e o "loop (foreach)" que mencionámos no artigo anterior, pode gerar automaticamente cartões para todos os membros da sua equipa. 


<?php
// Armazenar os perfis de múltiplos membros da equipa como um array de arrays
$staff_list = [
    [
        'name' => 'João Pereira', 'role' => 'Diretor', 'comment' => 'Levo os nossos projetos ao sucesso.', 'image_url' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=300'
    ],
    [
        'name' => 'Ana Sofia', 'role' => 'Designer', 'comment' => 'Crio designs que deixam uma impressão duradoura.', 'image_url' => 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=300'
    ],
    [
        'name' => 'Carlos Miguel', 'role' => 'Engenheiro', 'comment' => 'Construo sistemas estáveis e fiáveis.', 'image_url' => 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=300'
    ]
];
?>

<!-- A parte de exibição do HTML está fora do loop -->
<div class="staff-container">
    <h1>A Nossa Equipa</h1>
    <div class="card-grid">
        <?php foreach ($staff_list as $staff_member): ?>
            <div class="profile-card">
                <img src="<?php echo $staff_member['image_url']; ?>" class="profile-img">
                <h2 class="profile-name"><?php echo $staff_member['name']; ?></h2>
                <p class="profile-role"><?php echo $staff_member['role']; ?></p>
                <p><?php echo $staff_member['comment']; ?></p>
            </div>
        <?php endforeach; ?>
    </div>
</div>

O loop foreach pega cada elemento (o array de perfil de cada membro da equipa) do array $staff_list um a um e gera um cartão HTML para ele de cada vez. Não importa quantos membros da equipa você adicione, só precisa de adicionar os seus dados ao array PHP, o que é extremamente eficiente.

Resumo

Ótimo trabalho! Desta vez, aprendemos as formas mais fundamentais de lidar com dados em PHP.

Ser capaz de organizar e lidar com dados na forma de "variáveis" e "arrays" é um grande passo na programação. Este conceito é uma base crucial para processos mais avançados que encontrará mais tarde, como a integração com bases de dados.

Da próxima vez, aprenderemos sobre as "estruturas de controlo (como as instruções if)", que permitem aos seus programas tomar decisões, como "se isto for verdade, faça aquilo"!