Página inicial
Desenvolvimento Web
PHP

Aprender PHP do Zero - Parte 8

Agora vamos deixar o sistema mais profissional! Aprenda a permitir que cada usuário tenha uma imagem de perfil, que será exibida no painel após o logi
Carsai Mozambique

📘 Aprender PHP do Zero — Parte 8: Imagem de Perfil do Usuário (Avatar)

Agora vamos deixar o sistema mais profissional! Aprenda a permitir que cada usuário tenha uma imagem de perfil, que será exibida no painel após o login.

Você vai aprender:

  • Adicionar imagem no cadastro
  • Gravar imagem no servidor
  • Vincular imagem ao usuário
  • Mostrar avatar no painel
  • Permitir alterar a imagem de perfil

🧱 1. Alterar tabela de usuários

Adicione uma nova coluna chamada avatar:

ALTER TABLE usuarios ADD avatar VARCHAR(255);

Essa coluna guardará o nome da imagem do perfil do usuário.

Crie também a pasta uploads/ com permissão total:

mkdir uploads
chmod 777 uploads

📝 2. Formulário de cadastro com imagem (cadastro.html)

<form method="POST" action="registrar.php" enctype="multipart/form-data">
  Nome: <input name="nome"><br>
  Email: <input type="email" name="email"><br>
  Senha: <input type="password" name="senha"><br>
  Foto de perfil: <input type="file" name="avatar"><br>
  <input type="submit" value="Cadastrar">
</form>

📤 3. registrar.php (faz upload + salva no banco)

<?php
require "conexao.php";

$nome = $_POST["nome"];
$email = $_POST["email"];
$senha = md5($_POST["senha"]);
$avatar = $_FILES["avatar"];

$permitidos = ["image/png", "image/jpeg", "image/jpg"];
$max = 2 * 1024 * 1024;

$nome_avatar = "";

if ($avatar["name"] != "") {
  if (!in_array($avatar["type"], $permitidos)) {
    die("Tipo de imagem inválido.");
  }
  if ($avatar["size"] > $max) {
    die("Imagem muito grande. Máximo: 2MB");
  }

  $nome_avatar = uniqid() . "-" . basename($avatar["name"]);
  move_uploaded_file($avatar["tmp_name"], "uploads/" . $nome_avatar);
}

$stmt = $conn->prepare("INSERT INTO usuarios (nome, email, senha, avatar) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $nome, $email, $senha, $nome_avatar);
$stmt->execute();

echo "Cadastro realizado com sucesso! <a href='login.html'>Ir para login</a>";
?>

🔐 4. Login e mostrar avatar (painel.php)

<?php
session_start();
require "conexao.php";

if (!isset($_SESSION["usuario"])) {
  header("Location: login.html");
  exit;
}

$id = $_SESSION["usuario_id"];
$res = $conn->query("SELECT * FROM usuarios WHERE id = $id");
$user = $res->fetch_assoc();
?>

<h2>Bem-vindo, <?= $user["nome"] ?></h2>

<?php if ($user["avatar"]) : ?>
  <img src="uploads/<?= $user["avatar"] ?>" width="120" style="border-radius: 50%">
<?php else: ?>
  <img src="uploads/default.png" width="120">
<?php endif; ?>

<br>
<a href="atualizar_foto.php">Alterar foto</a> | 
<a href="logout.php">Sair</a>

♻️ 5. Formulário para atualizar imagem (atualizar_foto.php)

<?php
session_start();
if (!isset($_SESSION["usuario_id"])) {
  header("Location: login.html");
  exit;
}
?>

<form method="POST" action="salvar_foto.php" enctype="multipart/form-data">
  Nova imagem de perfil:
  <input type="file" name="avatar"><br>
  <input type="submit" value="Atualizar">
</form>

salvar_foto.php

<?php
session_start();
require "conexao.php";

$id = $_SESSION["usuario_id"];
$foto = $_FILES["avatar"];

$permitidos = ["image/png", "image/jpeg"];
$max = 2 * 1024 * 1024;

if (!in_array($foto["type"], $permitidos)) {
  die("Tipo inválido.");
}

if ($foto["size"] > $max) {
  die("Imagem muito grande.");
}

$novo = uniqid() . "-" . basename($foto["name"]);
move_uploaded_file($foto["tmp_name"], "uploads/" . $novo);

// Atualiza no banco
$stmt = $conn->prepare("UPDATE usuarios SET avatar=? WHERE id=?");
$stmt->bind_param("si", $novo, $id);
$stmt->execute();

header("Location: painel.php");
?>

🧪 6. Testando no Android

  1. Use Acode ou Termux
  2. Crie os arquivos:
    • cadastro.html
    • registrar.php
    • login.html, login.php
    • painel.php
    • atualizar_foto.php
    • salvar_foto.php
  3. Crie a pasta uploads/ com permissão total
  4. Rode o servidor local:
    php -S localhost:8000
  5. Acesse: http://localhost:8000/cadastro.html

⚠️ O avatar aparece após login, e pode ser atualizado a qualquer momento.

✅ Conclusão da Parte 8

Você agora sabe:

  • Adicionar imagem ao perfil do usuário
  • Validar tipo e tamanho de imagem
  • Gravar e atualizar imagens em PHP
  • Exibir avatar de forma dinâmica no painel

👉 Parte 9: Você quer aprender a criar:

  • Comentários entre usuários
  • Relacionar usuários com posts
  • Sistema de notificações básicas?

Comente se tiver dúvida!

Enviar um comentário