En los sitios web de redes sociales como Facebook, Instagram, etc., el nombre de usuario y la imagen de perfil del usuario que ha iniciado sesión se muestran en el encabezado del sitio web, y ese encabezado permanece constante, independientemente de la página web que haya abierto el usuario. Dicha funcionalidad se puede crear utilizando las variables de sesión .
Las variables de sesión existen solo mientras la sesión del usuario está activa. Una vez completada la sesión, las variables de la sesión se destruyen. Estos son únicos para cada visitante y generalmente se utilizan para almacenar información específica del usuario, como el nombre de usuario, la imagen de perfil, etc., una vez que el usuario inicia sesión.
Las variables de sesión se utilizan para mostrar la información del usuario registrado en PHP.
Explicación y código del proyecto:
Este es un sistema de registro simple. La página register.php solicita el nombre de usuario, el correo electrónico y la contraseña deseados del usuario, y luego envía los datos ingresados a la base de datos, una vez que se hace clic en el botón Enviar. Después de esto, el usuario es redirigido a la página index.php donde se muestra un mensaje de bienvenida y el nombre de usuario del usuario que inició sesión.
El primer paso es crear una base de datos y luego una tabla dentro de ella. La base de datos se llama ‘registro’ y la tabla se llama ‘usuarios’. La tabla de ‘usuarios’ contendrá 4 campos.
- id – clave principal – incremento automático
- nombre de usuario – varchar (100)
- correo electrónico – varchar (100)
- contraseña – varchar(100)
El ‘id’ será la clave principal, lo que significa que será único para cada usuario registrado. También se incrementará automáticamente para cada nuevo registro. El tipo de datos para nombre de usuario, correo electrónico y contraseña será varchar. El tamaño se puede ajustar según el requisito, sin embargo, 100 es suficiente.
Código SQL para la tabla:
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 )
phpMyAdmin después de la creación de la base de datos y la tabla
Carpeta del proyecto, que contiene los archivos necesarios
error.php
html
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
Explicación: El archivo error.php es responsable de contener los mensajes de error del sistema. Supongamos que el usuario ingresa la combinación incorrecta de nombre de usuario y contraseña, entonces, en tales casos, los mensajes de error se almacenarán en la variable $error, que luego se mostrará al usuario usando ‘echo; función de PHP.
servidor.php
php
<?php
// Starting the session, necessary
// for using session variables
session_start();
// Declaring and hoisting the variables
$username = "";
$email = "";
$errors = array();
$_SESSION['success'] = "";
// DBMS connection code -> hostname,
// username, password, database name
$db = mysqli_connect('localhost', 'root', '', 'registration');
// Registration code
if (isset($_POST['reg_user'])) {
// Receiving the values entered and storing
// in the variables
// Data sanitization is done to prevent
// SQL injections
$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']);
// Ensuring that the user has not left any input field blank
// error messages will be displayed for every blank input
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");
// Checking if the passwords match
}
// If the form is error free, then register the user
if (count($errors) == 0) {
// Password encryption to increase data security
$password = md5($password_1);
// Inserting data into table
$query = "INSERT INTO users (username, email, password)
VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
// Storing username of the logged in user,
// in the session variable
$_SESSION['username'] = $username;
// Welcome message
$_SESSION['success'] = "You have logged in";
// Page on which the user will be
// redirected after logging in
header('location: index.php');
}
}
// User login
if (isset($_POST['login_user'])) {
// Data sanitization to prevent SQL injection
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
// Error message if the input field is left blank
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
// Checking for the errors
if (count($errors) == 0) {
// Password matching
$password = md5($password);
$query = "SELECT * FROM users WHERE username=
'$username' AND password='$password'";
$results = mysqli_query($db, $query);
// $results = 1 means that one user with the
// entered username exists
if (mysqli_num_rows($results) == 1) {
// Storing username in session variable
$_SESSION['username'] = $username;
// Welcome message
$_SESSION['success'] = "You have logged in!";
// Page on which the user is sent
// to after logging in
header('location: index.php');
}
else {
// If the username and password doesn't match
array_push($errors, "Username or password incorrect");
}
}
}
?>
Explicación: La sesión se inicia utilizando el método session_start(). Después de eso, se declaran las variables y se crea una array de errores. Almacenará todos los mensajes de error. La página server.php luego se conecta a la base de datos de ‘registro’ creada anteriormente. Después de que el usuario haga clic en el botón ‘registrarse’ en el botón register.php, los datos ingresados se envían a la base de datos y esto completa un nuevo registro. Sin embargo, la validación del formulario se realiza antes para asegurarse de que el usuario está completando el formulario correctamente. Todos los campos son obligatorios y no se pueden dejar en blanco.
Línea 18 – 21: mysqli_real_escape_string escapa los caracteres especiales antes de enviar los datos a la base de datos. Esto es esencial para la seguridad de la base de datos frente a las inyecciones de SQL.
Línea 25 – 27:Estas líneas aseguran que el usuario está llenando todos los cuadros de entrada y si la ‘contraseña’ y ‘confirmar contraseña’ coinciden. Si ambas contraseñas coinciden, el código continúa ejecutándose.
Línea 29 – 32: Comprobar si la contraseña coincide o no.
Líneas 35 a 46: si el número de errores hasta este punto es cero, la contraseña se cifra con ‘md5’ y los datos ingresados se envían a la base de datos. Una vez que se completa el proceso de registro, el nombre de usuario se almacena en la variable de sesión y se redirige al usuario a la página index.php, donde se le solicita que ingrese las credenciales de inicio de sesión.
Línea 50 – 80:Primero se desinfectó el usuario y la contraseña ingresados. Esto es esencial para aumentar la seguridad de la base de datos, ya que elimina las posibilidades de cualquier inyección SQL. El usuario recibe un mensaje de error si el campo de nombre de usuario o contraseña se deja en blanco.
Si se encuentra que el número de errores hasta este punto del código es 0, se ejecuta una verificación de la base de datos. Si se encuentra que el nombre de usuario ingresado por el usuario está presente en la base de datos, entonces el usuario inicia sesión con éxito. Luego, el usuario es redirigido a la página ‘index.php’.
iniciar sesión.php
html
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>
Login and Registration
System - LAMP Stack
</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div class="header">
<h2>Login Here!</h2>
</div>
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="input-group">
<label>Enter Username</label>
<input type="text" name="username" >
</div>
<div class="input-group">
<label>Enter Password</label>
<input type="password" name="password">
</div>
<div class="input-group">
<button type="submit" class="btn"
name="login_user">
Login
</button>
</div>
<p>
New Here?
<a href="register.php">
Click here to register!
</a>
</p>
</form>
</body>
</html>
Explicación: Página de inicio de sesión del sistema. El usuario debe ingresar el nombre de usuario y la contraseña para iniciar sesión correctamente. Después de presionar el botón de inicio de sesión, se ejecuta el código de inicio de sesión escrito en la página server.php, que hace todo el trabajo de back-end, como verificar si el nombre de usuario y la contraseña coinciden o no.
registro.php
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>Enter 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>Enter 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 having an account?
<a href="login.php">
Login Here!
</a>
</p>
</form>
</body>
</html>
Explicación: Esta página contiene el código HTML de la página de registro. Las páginas ‘server.php’ y ‘errors.php’ se incluyen en las líneas 01 y 15 respectivamente. Esto es necesario para que el backend del sistema de registro funcione. Se le pide al usuario que ingrese el nombre de usuario, el correo electrónico y la contraseña para crear una cuenta. Después de llenar los campos de entrada, los datos ingresados se envían a la tabla de la base de datos.
índice.php
html
<?php
// Starting the session, to use and
// store data in session variable
session_start();
// If the session variable is empty, this
// means the user is yet to login
// User will be sent to 'login.php' page
// to allow the user to login
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You have to log in first";
header('location: login.php');
}
// Logout button will destroy the session, and
// will unset the session variables
// User will be headed to 'login.php'
// after logging out
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div class="header">
<h2>Home Page</h2>
</div>
<div class="content">
<!-- Creating notification when the
user logs in -->
<!-- Accessible only to the users that
have logged in already -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<!-- information of the user logged in -->
<!-- welcome message for the logged in user -->
<?php if (isset($_SESSION['username'])) : ?>
<p>
Welcome
<strong>
<?php echo $_SESSION['username']; ?>
</strong>
</p>
<p>
<a href="index.php?logout='1'" style="color: red;">
Click here to Logout
</a>
</p>
<?php endif ?>
</div>
</body>
</html>
Explicación:
Línea 01 – 19: El nombre de usuario que se almacenó en la variable de sesión ahora se muestra al usuario. Esta variable de sesión puede destruirse usando unset($_SESSION[“products”]) o session_destroy() . Sin embargo, session_destroy() destruirá todas las variables de sesión a la vez. Para destruir solo la variable de sesión ‘nombre de usuario’, será mejor desarmar la variable usando unset($_SESSION[“products”]) .
Líneas 34 a 42: esto asegura que esta página sea accesible solo para aquellos usuarios que hayan iniciado sesión.
Líneas 45 a 50: esto muestra un mensaje de bienvenida personalizado para el usuario una vez que inicie sesión.
Archivo CSS
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 10px 10px 10px;
}
.input-group label {
display: block;
text-align: left;
margin: 5px;
font-size: 20px;
}
.input-group input {
height: 32px;
width: 95%;
padding: 5px 10px;
font-size: 15px;
border-radius: 10px;
border: 1px solid gray;
}
.btn {
cursor: pointer;
padding: 12px;
font-size: 16px;
color: white;
background: #23585a;
border: none;
border-radius: 10px;
}
.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;
}
Representación pictórica:
Página de registro
El usuario es redirigido a esta página después de iniciar sesión. Allí se muestra un mensaje de bienvenida.
Página de inicio de sesión del sistema
El usuario ha iniciado sesión correctamente
Combinación incorrecta de nombre de usuario y contraseña
¿Cómo ejecutar este proyecto?
Los códigos fuente de este proyecto se pueden obtener de este repositorio de GitHub .
Después de descargar y descomprimir el proyecto, siga los pasos indicados para ejecutar el programa:
- Descargue todos los archivos o clone el repositorio en su sistema local.
- Cree una base de datos llamada ‘registro’ y una tabla llamada ‘usuarios’. El código MySQL de la tabla se ha proporcionado anteriormente.
- Use XAMP o WAMP para ejecutar el sistema en localhost.
- Asegúrese de que los puertos necesarios para ejecutar el servidor Apache y MySQL estén libres. De lo contrario, deberá cambiar los números de puerto.
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
PHP es un lenguaje de secuencias de comandos del lado del servidor diseñado específicamente para el desarrollo web. Puede aprender PHP desde cero siguiendo este tutorial de PHP y ejemplos de PHP .
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA