Projeto: Construindo um Sistema de Login e Logout Simples

🚀 Introdução

Bem-vindos ao projeto prático do Módulo 4! 🎉 Nesta aula, vamos aplicar os conhecimentos sobre interação web e Superglobais do PHP para construir um sistema básico de login e logout. Este é um passo fundamental para qualquer aplicação web que precise de autenticação de usuários, permitindo acesso a áreas restritas e personalização da experiência.

Vamos focar em:

Formulários HTML: Coletando dados do usuário.
Superglobal $_POST: Processando os dados submetidos.
Superglobal $_SESSION: Gerenciando o estado do usuário entre diferentes páginas.
Segurança Básica: Hashing de senhas para proteção.
Redirecionamento: Navegando o usuário após ações.

Ao final, você terá um sistema funcional que pode ser expandido para projetos mais complexos!

🧠 Entendendo os Componentes Essenciais

Antes de codificar, vamos revisar os pilares do nosso sistema.

🌐 HTML: A Interface do Usuário

O HTML será responsável por apresentar os formulários de login e os links de logout. É a primeira camada de interação do usuário.

Formulário de Login:
- Campos para username e password.
- method="POST" para enviar dados de forma segura.
- action apontando para o script PHP que processará o login.

<!-- Exemplo de formulário de login -->
<form action="processa_login.php" method="POST">
    <label for="username">Usuário:</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="password">Senha:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <button type="submit">Entrar</button>
</form>

💡 PHP: O Cérebro por Trás

O PHP será o motor do nosso sistema, lidando com a lógica de autenticação, gerenciamento de sessões e redirecionamento.

1. Processamento de Formulários com `$_POST`

Quando um formulário é submetido com method="POST", os dados são enviados para o servidor e ficam disponíveis na superglobal $_POST.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'] ?? ''; // Usamos o operador null coalescing para segurança
    $password = $_POST['password'] ?? '';
    
    // ... lógica de validação e autenticação ...
}
?>

2. Gerenciamento de Sessões com `$_SESSION`

As sessões PHP permitem armazenar informações sobre o usuário entre múltiplas requisições. Isso é crucial para manter o estado de "logado".

session_start(): Deve ser chamada no início de cada script que usa sessões. Ela inicia ou retoma uma sessão existente.
$_SESSION: Um array associativo onde você pode armazenar e recuperar variáveis de sessão.
session_unset(): Libera todas as variáveis de sessão registradas.
session_destroy(): Destrói todos os dados registrados em uma sessão.

Documentação Oficial:

<?php
session_start(); // Sempre no início!
 
// Armazenando algo na sessão
$_SESSION['user_id'] = 123;
$_SESSION['username'] = 'aluno@exemplo.com';
 
// Verificando se o usuário está logado
if (isset($_SESSION['user_id'])) {
    echo "Bem-vindo, " . $_SESSION['username'] . "!";
} else {
    echo "Você não está logado.";
}
 
// Destruindo a sessão (logout)
// session_unset(); // Remove todas as variáveis de sessão
// session_destroy(); // Destrói a sessão
?>

3. Segurança de Senhas: `password_hash()` e `password_verify()`

JAMAIS armazene senhas em texto puro! 🙅‍♀️ Use funções de hash seguras. O PHP oferece um conjunto excelente para isso.

password_hash(string $password, int $algo, array $options = []): string: Cria um hash de senha usando um algoritmo forte (Bcrypt por padrão).
password_verify(string $password, string $hash): bool: Verifica se uma senha corresponde a um hash.

Documentação Oficial:

<?php
$password = "minhaSenhaSecreta123";
 
// Gerando o hash da senha (para armazenar no "banco de dados")
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
echo "Senha original: " . $password . "<br>";
echo "Senha hashed: " . $hashed_password . "<br><br>";
 
// Verificando a senha enviada pelo usuário contra o hash armazenado
$user_input_password = "minhaSenhaSecreta123"; // Senha que o usuário digitou
if (password_verify($user_input_password, $hashed_password)) {
    echo "Senha verificada! ✅";
} else {
    echo "Senha incorreta! ❌";
}
 
// Testando com senha errada
$wrong_password = "senhaErrada";
if (password_verify($wrong_password, $hashed_password)) {
    echo "Isso não deveria acontecer!";
} else {
    echo "Senha incorreta (correto)! ❌";
}
?>

4. Redirecionamento com `header()`

Para enviar o usuário para outra página após uma ação (login, logout), usamos a função header() com o cabeçalho Location.

Importante: header() deve ser chamada antes de qualquer saída para o navegador (HTML, echo, etc.).

Documentação Oficial:

header()

<?php
// Redireciona o usuário para a página do dashboard
header('Location: dashboard.php');
exit; // É boa prática usar exit() após um redirecionamento para garantir que o script pare de executar.
?>

🛠️ Mãos à Obra: Implementando o Sistema

Vamos construir nosso sistema passo a passo.

📂 Estrutura de Arquivos

Crie os seguintes arquivos na raiz do seu projeto (dentro da pasta do seu servidor web, ex: htdocs/login_simples/).

login_simples/
├── index.php           # Formulário de login
├── processa_login.php  # Lógica de autenticação
├── dashboard.php       # Página protegida (após login)
└── logout.php          # Lógica de logout

📝 Passo 1: O Formulário de Login (`index.php`)

Este arquivo conterá o formulário que o usuário usará para fazer login. Também exibirá mensagens de erro, se houver.

<?php
session_start(); // Inicia a sessão para verificar se já está logado ou exibir mensagens
 
// Se o usuário já estiver logado, redireciona para o dashboard
if (isset($_SESSION['user_id'])) {
    header('Location: dashboard.php');
    exit;
}
 
$error_message = $_SESSION['login_error'] ?? ''; // Pega mensagem de erro da sessão
unset($_SESSION['login_error']); // Limpa a mensagem de erro da sessão
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Sistema Simples</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; margin: 0; }
        .login-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 300px; text-align: center; }
        .login-container h2 { margin-bottom: 20px; color: #333; }
        .login-container label { display: block; text-align: left; margin-bottom: 5px; color: #555; }
        .login-container input[type="text"],
        .login-container input[type="password"] { width: calc(100% - 20px); padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; }
        .login-container button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; }
        .login-container button:hover { background-color: #0056b3; }
        .error-message { color: red; margin-top: 10px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <?php if ($error_message): ?>
            <p class="error-message">❌ <?php echo htmlspecialchars($error_message); ?></p>
        <?php endif; ?>
        <form action="processa_login.php" method="POST">
            <label for="username">Usuário:</label>
            <input type="text" id="username" name="username" required>
            
            <label for="password">Senha:</label>
            <input type="password" id="password" name="password" required>
            
            <button type="submit">Entrar</button>
        </form>
    </div>
</body>
</html>

🔑 Passo 2: Processando o Login (`processa_login.php`)

Este script receberá os dados do formulário, verificará as credenciais e iniciará a sessão do usuário.

<?php
session_start(); // Inicia a sessão
 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
 
    // --- SIMULAÇÃO DE USUÁRIOS (Em um projeto real, isso viria de um banco de dados) ---
    // Senha para 'admin' é 'senha123'
    $hashed_password_admin = password_hash('senha123', PASSWORD_DEFAULT);
    
    // Senha para 'usuario' é 'phpdev'
    $hashed_password_user = password_hash('phpdev', PASSWORD_DEFAULT);
 
    $users = [
        'admin' => [
            'id' => 1,
            'password' => $hashed_password_admin,
            'name' => 'Administrador'
        ],
        'usuario' => [
            'id' => 2,
            'password' => $hashed_password_user,
            'name' => 'Usuário Comum'
        ]
    ];
    // --- FIM DA SIMULAÇÃO ---
 
    $authenticated = false;
    $user_data = null;
 
    // Verifica se o username existe e a senha está correta
    if (isset($users[$username])) {
        if (password_verify($password, $users[$username]['password'])) {
            $authenticated = true;
            $user_data = $users[$username];
        }
    }
 
    if ($authenticated) {
        // Login bem-sucedido: Armazena informações na sessão
        $_SESSION['user_id'] = $user_data['id'];
        $_SESSION['username'] = $username;
        $_SESSION['user_name'] = $user_data['name'];
        
        // Redireciona para a página protegida (dashboard)
        header('Location: dashboard.php');
        exit;
    } else {
        // Login falhou: Armazena mensagem de erro na sessão e redireciona de volta para o login
        $_SESSION['login_error'] = 'Usuário ou senha inválidos.';
        header('Location: index.php');
        exit;
    }
} else {
    // Se a requisição não for POST, redireciona para a página de login
    header('Location: index.php');
    exit;
}
?>

🔒 Passo 3: A Página Protegida (`dashboard.php`)

Esta página só será acessível após o usuário ter feito login. Ela exibirá informações do usuário e um link para logout.

<?php
session_start(); // Inicia a sessão
 
// Verifica se o usuário está logado. Se não estiver, redireciona para a página de login.
if (!isset($_SESSION['user_id'])) {
    header('Location: index.php');
    exit;
}
 
// Pega os dados do usuário da sessão
$user_name = $_SESSION['user_name'] ?? 'Visitante';
$username = $_SESSION['username'] ?? 'desconhecido';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Sistema Simples</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e6f7ff; margin: 0; }
        .dashboard-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); width: 400px; text-align: center; }
        .dashboard-container h2 { margin-bottom: 20px; color: #007bff; }
        .dashboard-container p { margin-bottom: 15px; color: #333; }
        .dashboard-container a { background-color: #dc3545; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 16px; display: inline-block; margin-top: 20px; }
        .dashboard-container a:hover { background-color: #c82333; }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <h2>Bem-vindo ao Dashboard! 👋</h2>
        <p>Olá, **<?php echo htmlspecialchars($user_name); ?>** (<?php echo htmlspecialchars($username); ?>)!</p>
        <p>Esta é uma área protegida. Você está logado com sucesso.</p>
        
        <a href="logout.php">Sair (Logout)</a>
    </div>
</body>
</html>

👋 Passo 4: O Logout (`logout.php`)

Este script será responsável por destruir a sessão do usuário e redirecioná-lo para a página de login.

<?php
session_start(); // Inicia a sessão
 
// Limpa todas as variáveis de sessão
session_unset();
 
// Destrói a sessão
session_destroy();
 
// Redireciona o usuário para a página de login
header('Location: index.php');
exit;
?>

🧪 Testando o Sistema

Configure seu servidor web: Certifique-se de que o PHP está instalado e configurado (XAMPP, WAMP, Docker, PHP built-in server).
Crie os arquivos: Salve os quatro arquivos (index.php, processa_login.php, dashboard.php, logout.php) na pasta do seu projeto (login_simples/) dentro do diretório raiz do seu servidor web (ex: htdocs para XAMPP).
Acesse o index.php: Abra seu navegador e vá para http://localhost/login_simples/index.php (ou o caminho correspondente no seu servidor).

Cenários de Teste:

Login com credenciais corretas:
- Usuário: admin, Senha: senha123 -> Deve ir para dashboard.php.
- Usuário: usuario, Senha: phpdev -> Deve ir para dashboard.php.
Login com credenciais incorretas:
- Usuário: admin, Senha: senha_errada -> Deve voltar para index.php com mensagem de erro.
Acessar dashboard.php diretamente sem login:
- Tente ir para http://localhost/login_simples/dashboard.php sem ter feito login -> Deve ser redirecionado para index.php.
Logout:
- Após logar, clique no link "Sair (Logout)" -> Deve ser redirecionado para index.php.

🎯 Desafios e Melhorias

Este é um sistema básico. Aqui estão alguns desafios para você aprimorar suas habilidades e tornar o sistema mais robusto:

Lista de Tarefas para Melhoria:

Persistência de Dados: Ao invés de usar um array fixo de usuários, armazene-os em um banco de dados (MySQL, SQLite) e use PDO para interagir com ele.
Registro de Usuários: Crie um formulário e um script para permitir que novos usuários se registrem no sistema, armazenando suas credenciais (com password_hash()) no banco de dados.
Validação de Entrada: Implemente validação mais robusta para os campos de usuário e senha (tamanho mínimo, caracteres permitidos, etc.) no lado do servidor.
Mensagens Flash: Crie um sistema de mensagens flash mais genérico para exibir mensagens de sucesso ou erro de forma mais dinâmica e estilizada.
Proteção CSRF: Implemente proteção contra Cross-Site Request Forgery (CSRF) usando tokens de sessão nos formulários.
"Lembrar-me" (Remember Me): Adicione a funcionalidade "Lembrar-me" usando cookies seguros para manter o usuário logado por mais tempo.
Estilização CSS: Melhore a aparência das páginas com CSS mais elaborado.
Funções Auxiliares: Organize o código PHP em funções para reutilização e melhor legibilidade (ex: is_logged_in(), redirect_to()).

📚 Resumo e Próximos Passos

Parabéns! 🎉 Você construiu um sistema de login e logout funcional, aplicando conceitos essenciais de PHP como superglobais ($_POST, $_SESSION), gerenciamento de sessões, segurança de senhas (password_hash, password_verify) e redirecionamento (header()).

Este projeto é a base para qualquer aplicação web que exija autenticação. Os desafios propostos são excelentes oportunidades para aprofundar seus conhecimentos e começar a pensar em segurança e escalabilidade.

Nos próximos módulos, exploraremos tópicos como interação com bancos de dados, manipulação de arquivos e talvez até a introdução a frameworks PHP, que abstraem muitas dessas lógicas e facilitam o desenvolvimento de aplicações complexas. Continue praticando e experimentando! 👨‍💻👩‍💻

Fundamentos do PHP

Projeto: Construindo um sistema de login e logout simples

Projeto: Construindo um Sistema de Login e Logout Simples

🚀 Introdução

🧠 Entendendo os Componentes Essenciais

🌐 HTML: A Interface do Usuário

💡 PHP: O Cérebro por Trás

1. Processamento de Formulários com `$_POST`

2. Gerenciamento de Sessões com `$_SESSION`

3. Segurança de Senhas: `password_hash()` e `password_verify()`

4. Redirecionamento com `header()`

🛠️ Mãos à Obra: Implementando o Sistema

📂 Estrutura de Arquivos

📝 Passo 1: O Formulário de Login (`index.php`)

🔑 Passo 2: Processando o Login (`processa_login.php`)

🔒 Passo 3: A Página Protegida (`dashboard.php`)

👋 Passo 4: O Logout (`logout.php`)

🧪 Testando o Sistema

🎯 Desafios e Melhorias

Lista de Tarefas para Melhoria:

📚 Resumo e Próximos Passos

Fundamentos do PHP

Projeto: Construindo um sistema de login e logout simples

Projeto: Construindo um Sistema de Login e Logout Simples

🚀 Introdução

🧠 Entendendo os Componentes Essenciais

🌐 HTML: A Interface do Usuário

💡 PHP: O Cérebro por Trás

1. Processamento de Formulários com $_POST

2. Gerenciamento de Sessões com $_SESSION

3. Segurança de Senhas: password_hash() e password_verify()

4. Redirecionamento com header()

🛠️ Mãos à Obra: Implementando o Sistema

📂 Estrutura de Arquivos

📝 Passo 1: O Formulário de Login (index.php)

🔑 Passo 2: Processando o Login (processa_login.php)

🔒 Passo 3: A Página Protegida (dashboard.php)

👋 Passo 4: O Logout (logout.php)

🧪 Testando o Sistema

🎯 Desafios e Melhorias

Lista de Tarefas para Melhoria:

📚 Resumo e Próximos Passos

1. Processamento de Formulários com `$_POST`

2. Gerenciamento de Sessões com `$_SESSION`

3. Segurança de Senhas: `password_hash()` e `password_verify()`

4. Redirecionamento com `header()`

📝 Passo 1: O Formulário de Login (`index.php`)

🔑 Passo 2: Processando o Login (`processa_login.php`)

🔒 Passo 3: A Página Protegida (`dashboard.php`)

👋 Passo 4: O Logout (`logout.php`)