Neste tutorial, acompanho você pelo processo completo de criação de um sistema de registro de usuários onde os usuários podem criar uma conta fornecendo nome de usuário, e-mail e senha, login e logout usando PHP e MySQL. Também mostrarei como você pode tornar algumas páginas acessíveis apenas para usuários logados. Qualquer outro usuário não logado não poderá acessar a página.
A primeira coisa que precisamos fazer é configurar nosso banco de dados.
Crie um banco de dados chamado registro . No registro banco de dados, adicione uma tabela chamada usuários . A tabela de usuários terá os quatro campos a seguir.
- código
- nome de usuário - varchar(100)
- e-mail - varchar(100)
- senha - varchar(100)
Você pode criá-lo usando um cliente MySQL, como PHPMyAdmin.
Ou você pode criá-lo no prompt do MySQL usando o seguinte script SQL:
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`username` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;E é isso com o banco de dados.
Agora crie uma pasta chamada registro em um diretório acessível ao nosso servidor. ou seja, crie a pasta dentro de htdocs (se você estiver usando o servidor XAMPP) ou dentro de www (se você estiver usando o servidor wampp).
Dentro da pasta registro, crie os seguintes arquivos:
Abra esses arquivos em um editor de texto de sua escolha. O meu é o Texto Sublime 3.
Registrando um usuário
Abra o arquivo register.php e cole o seguinte código nele:
regiser.php:
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="<?php echo $username; ?>">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $email; ?>">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="reg_user">Register</button>
</div>
<p>
Already a member? <a href="login.php">Sign in</a>
</p>
</form>
</body>
</html>Nada complicado até agora certo?
Algumas coisas a serem observadas aqui:
A primeira é que a ação do nosso formulário atributo está definido como register.php. Isso significa que, quando o botão de envio do formulário for clicado, todos os dados do formulário serão enviados para a mesma página (register.php). A parte do código que recebe esses dados do formulário é escrita no arquivo server.php e é por isso que a incluímos no topo do arquivo register.php.
Observe também que estamos incluindo o arquivo errors.php para exibir os erros do formulário. Chegaremos a isso em breve.
Como você pode ver na seção principal, estamos vinculando a um arquivo style.css. Abra o arquivo style.css e cole nele o seguinte CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #5F9EA0;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
Agora a forma ficou linda.
Vamos agora escrever o código que receberá as informações enviadas do formulário e armazenar (registrar) as informações no banco de dados. Como prometido anteriormente, fazemos isso no arquivo server.php.
Abra server.php e cole este código nele:
servidor.php
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
// REGISTER USER
if (isset($_POST['reg_user'])) {
// receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// form validation: ensure that the form is correctly filled ...
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) { array_push($errors, "Username is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password_1)) { array_push($errors, "Password is required"); }
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// first check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // if user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1);//encrypt the password before saving in the database
$query = "INSERT INTO users (username, email, password)
VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}
}
// ...
As sessões são usadas para rastrear usuários logados e, portanto, incluímos um session_start() no topo do arquivo.
Os comentários no código explicam praticamente tudo, mas vou destacar algumas coisas aqui.
A instrução if determina se o botão reg_user no formulário de registro foi clicado. Lembre-se, em nosso formulário, o botão submit tem um atributo name definido como reg_user e é isso que estamos referenciando na instrução if.
Todos os dados são recebidos do formulário e verificados para garantir que o usuário preencheu corretamente o formulário. As senhas também são comparadas para garantir que elas correspondam.
Se nenhum erro for encontrado, o usuário será registrado em usuários tabela no banco de dados com uma senha com hash. A senha com hash é por motivos de segurança. Ele garante que, mesmo que um hacker consiga acessar seu banco de dados, ele não poderá ler sua senha.
Mas as mensagens de erro não estão sendo exibidas agora porque nosso arquivo errors.php ainda está vazio. Para exibir os erros, cole este código no arquivo errors.php.
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
Quando um usuário é cadastrado no banco de dados, ele é imediatamente logado e redirecionado para a página index.php.
E é isso para o registro. Vejamos o login do usuário.
Login de usuário
Fazer o login de um usuário é uma coisa ainda mais fácil de fazer. Basta abrir a página de login e colocar este código dentro dela:
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Login</h2>
</div>
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" >
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="input-group">
<button type="submit" class="btn" name="login_user">Login</button>
</div>
<p>
Not yet a member? <a href="register.php">Sign up</a>
</p>
</form>
</body>
</html>Tudo nesta página é bastante semelhante à página register.php.
Agora o código que loga o usuário deve ser escrito no mesmo arquivo server.php. Então abra o arquivo server.php e adicione este código no final do arquivo:
// ...
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}
?>Novamente, tudo o que isso faz é verificar se o usuário preencheu o formulário corretamente, verifica se suas credenciais correspondem a um registro do banco de dados e efetua o login, se corresponder. Após o login, o usuário é redirecionado para o arquivo index.php com uma mensagem de sucesso.
Agora vamos ver o que acontece no arquivo index.php. Abra-o e cole o seguinte código nele:
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Home Page</h2>
</div>
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<!-- logged in user information -->
<?php if (isset($_SESSION['username'])) : ?>
<p>Welcome <strong><?php echo $_SESSION['username']; ?></strong></p>
<p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>
<?php endif ?>
</div>
</body>
</html>A primeira instrução if verifica se o usuário já está logado. Se não estiver logado, será redirecionado para a página de login. Portanto, esta página é acessível apenas para usuários logados. Se você quiser tornar qualquer página acessível apenas para usuários logados, tudo o que você precisa fazer é colocar esta instrução if na parte superior do arquivo.
A segunda instrução if verifica se o usuário clicou no botão de logout. Se sim, o sistema os desconecta e os redireciona de volta para a página de login.
E é isso!
Agora vá em frente, personalize-o para atender às suas necessidades e crie um site incrível. Se você tiver alguma dúvida ou algo que precise esclarecer, deixe nos comentários abaixo e a ajuda virá.
Você sempre pode apoiar compartilhando nas redes sociais ou recomendando meu blog para seus amigos e colegas.
Grande abraço :D
