Como Criar uma Tela de Login Usando PHP e Bootstrap
Aprender a criar uma tela de login é um passo fundamental para quem deseja desenvolver aplicações web. Neste tutorial, mostraremos como criar uma tela de login simples utilizando PHP e Bootstrap, com um passo a passo detalhado para iniciantes.
![O que é PHP? [Guia para iniciantes] • Aplicativos e Software • Tecnoblog](https://files.tecnoblog.net/wp-content/uploads/2021/01/o_que_e_php_unsplash-e1612906186814.jpg)
Passo 1: Preparar o Ambiente
Antes de começar, certifique-se de ter os seguintes itens configurados:
- Servidor local (XAMPP, WAMP ou equivalente).
- Editor de código (Visual Studio Code, Sublime Text, etc.).
- Arquivos do Bootstrap (você pode usar o link CDN).
Passo 2: Criar a Estrutura de Arquivos
Organize seus arquivos da seguinte forma:
|– index.php
|– login.php
|– style.css
Passo 3: Criar o HTML da Página de Login
Adicione o seguinte código no arquivo login.php:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Tela de Login</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container d-flex justify-content-center align-items-center” style=”height: 100vh;”>
<div class=”card p-4″ style=”width: 400px;”>
<h3 class=”text-center”>Login</h3>
<form action=”index.php” method=”POST”>
<div class=”mb-3″>
<label for=”username” class=”form-label”>Usuário</label>
<input type=”text” class=”form-control” id=”username” name=”username” required>
</div>
<div class=”mb-3″>
<label for=”password” class=”form-label”>Senha</label>
<input type=”password” class=”form-control” id=”password” name=”password” required>
</div>
<button type=”submit” class=”btn btn-primary w-100″>Entrar</button>
</form>
</div>
</div>
</body>
</html>
Passo 4: Criar o Script PHP para Processar o Login
Adicione o seguinte código no arquivo index.php:
// Dados de login para exemplo
$valid_username = ‘admin’;
$valid_password = ‘1234’;if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
$username = $_POST[‘username’];
$password = $_POST[‘password’];if ($username === $valid_username && $password === $valid_password) {
echo “<h1>Bem-vindo, $username!</h1>”;
} else {
echo “<h1>Usuário ou senha incorretos.</h1>”;
}
}
?>
Passo 5: Adicionar Estilo Personalizado
Adicione o seguinte CSS no arquivo style.css para personalizar o visual da página:
background-color: #f8f9fa;
}
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
Conclusão
Com esses passos, você criou uma tela de login funcional usando PHP e Bootstrap. Você pode expandir essa funcionalidade conectando-se a um banco de dados para autenticação ou adicionando mais validações no formulário.
Se tiver dúvidas ou sugestões, deixe nos comentários!
