Scribd
Upload
47 views6 pages

Lo

The document is an HTML page that includes a DataTable for displaying user data with functionalities for pagination, searching, and server-side processing. It also contains server-side validation for user input, including checks for username, email, and password strength before inserting data into a database. Additionally, it implements error handling and encryption for sensitive information like email and passwords.

Uploaded by

Vatmin Himmel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
47 views6 pages

Lo

The document is an HTML page that includes a DataTable for displaying user data with functionalities for pagination, searching, and server-side processing. It also contains server-side validation for user input, including checks for username, email, and password strength before inserting data into a database. Additionally, it implements error handling and encryption for sensitive information like email and passwords.

Uploaded by

Vatmin Himmel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<html>

<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
<link rel="stylesheet" href="css/tbapi.css" type="text/css" media="all">
<link rel="stylesheet" href="css/.css">
</head>
<body>
<div class="container mb-4">
<a href="php/cerrar.php" class="btn-danger btn my-2"> Cerrar cesión</a>
<div id="dataList_wrapper" class="dt-container dt-bootstrap5">
<div class="row mt-2 justify-content-between">
<div class="d-md-flex justify-content-between align-items-center dt-layout-
start col-md-auto me-auto">
<div class="dt-length">
<select aria-controls="dataList" class="form-select form-select-sm" id="dt-
length-0"><option value="10">10</option><option value="25">25</option><option
value="50">50</option><option value="100">100</option></select>
<label for="dt-length-0"> entries per page</label>
</div>
</div>
<div class="d-md-flex justify-content-between align-items-center dt-layout-end
col-md-auto ms-auto">
<div class="dt-search">
<label for="dt-search-0">Search:</label>
<input type="search" class="form-control form-control-sm" id="dt-search-0"
placeholder="" aria-controls="dataList">
</div>
</div>
</div>
<div class="row mt-2 justify-content-between dt-layout-table">
<div class="d-md-flex justify-content-between align-items-center col-12 dt-
layout-full col-md">
<div id="dataList_processing" class="dt-processing card" role="status"
style="display: block;">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<table id="dataList" class="table table-striped nowrap w-100 dataTable dtr-
inline" aria-describedby="dataList_info">
<colgroup>
<col data-dt-column="0">
<col data-dt-column="1">
<col data-dt-column="2">
<col data-dt-column="3">
<col data-dt-column="4">
</colgroup>
<thead bgcolor="#6cd8dc">
<tr class="">
<th data-dt-column="0" rowspan="1" colspan="1" class="dt-orderable-asc dt-
orderable-desc dt-ordering-asc" aria-sort="ascending"><span class="dt-column-
title">Id</span><span class="dt-column-order" role="button" aria-label="Id:
Activate to invert sorting" tabindex="0"></span></th>
<th data-dt-column="1" rowspan="1" colspan="1" class="dt-orderable-asc dt-
orderable-desc"><span class="dt-column-title">Usuario</span><span class="dt-column-
order" role="button" aria-label="Usuario: Activate to sort"
tabindex="0"></span></th>
<th data-dt-column="2" rowspan="1" colspan="1" class="dt-orderable-asc dt-
orderable-desc"><span class="dt-column-title">correo</span><span class="dt-column-
order" role="button" aria-label="correo: Activate to sort"
tabindex="0"></span></th>
<th data-dt-column="3" rowspan="1" colspan="1" class="dt-orderable-asc dt-
orderable-desc"><span class="dt-column-title">contrasena</span><span class="dt-
column-order" role="button" aria-label="contrasena: Activate to sort"
tabindex="0"></span></th>
<th data-dt-column="4" rowspan="1" colspan="1" class="dt-orderable-
none"><span class="dt-column-title">iv</span><span
class="dt-column-order"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dt-empty">Loading...</td>
</tr>
</tbody>
<tfoot>
<tr>
<th data-dt-column="0" rowspan="1" colspan="1"><span class="dt-column-
title">Id</span></th>
<th data-dt-column="1" rowspan="1" colspan="1"><span class="dt-column-
title">Usuario</span></th>
<th data-dt-column="2" rowspan="1" colspan="1"><span class="dt-column-
title">correo</span></th>
<th data-dt-column="3" rowspan="1" colspan="1"><span class="dt-column-
title">contrasena</span></th>
<th data-dt-column="4" rowspan="1" colspan="1"><span class="dt-column-
title">iv</span></th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row mt-2 justify-content-between">
<div class="d-md-flex justify-content-between align-items-center dt-layout-
start col-md-auto me-auto">
<div class="dt-info" aria-live="polite" id="dataList_info"
role="status"></div>
</div>
<div class="d-md-flex justify-content-between align-items-center dt-layout-end
col-md-auto ms-auto">
<div class="dt-paging">
<nav aria-label="pagination"></nav>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize DataTables API object and configure table
var table = $("#dataList").DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "server/fetchData.php",
// responsive: true,
columnDefs: [{ orderable: false, targets: 4 }]
})

$(document).ready(function () {
// Draw the tble
table.draw()
})
</script>
</body>
</html>

initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this
var title = column.footer().textContent

// Create input element and add event


listener
$('<input type="text" placeholder="Search
' + title + '" />')
.appendTo($
(column.footer()).empty())
.on("keyup change clear", function
() {
if (column.search() !==
this.value) {

column.search(this.value).draw()
}
})
})
}

$('#example').DataTable({
initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this;
var title = column.footer().textContent;

// Create input element and add event listener


$('<input type="text" placeholder="Search ' + title + '" />')
.appendTo($(column.footer()).empty())
.on('keyup change clear', function () {
if (column.search() !== this.value) {
column.search(this.value).draw();
}
});
});
}
});

try {
if (strlen($usuario) < 3) {
// Validaciones adicionales del lado del servidor (ejemplos)
$data = [
"data" => "El campo Usuario requiere al menos 3 carácteres",
];
echo json_encode($data);
exit();
}

if (!filter_var($correo, FILTER_VALIDATE_EMAIL)) {
errorjson("E-mail no válido", "El servidor no valida este correo:
$correo");
$conn = null;
exit();
}

if (strlen($contrasena) < 6) {
errorjson("No admitido", "Se requiere al menos 6 carácteres");
$conn = null;
exit();
}

if ($contrasena !== $confirmar) {


errorjson(
"No coinciden",
"Las contraseñas ingresadas al servidor no son identicas",
);
$conn = null;
exit();
}

$comprobar_usuario = $conn->prepare(
"SELECT * FROM usuarios WHERE usuario = :usuario",
);
$comprobar_usuario->bindParam(":usuario", $usuario);
$comprobar_usuario->execute();
$test_usuario = $comprobar_usuario->fetchaLl(PDO::FETCH_ASSOC);
if ($test_usuario) {
// Usuario encontrad
errorjson("Ya existe", " Se ha detectado un doble de este usuario:
$usuario");
$conn = null;
exit();
}

$comprobar_correo = $conn->prepare(
"SELECT * FROM usuarios WHERE correo = :correo",
);
$comprobar_correo->bindParam(":correo", $correo);
$comprobar_correo->execute();
$test_correo = $comprobar_correo->fetchaLl(PDO::FETCH_ASSOC);
if ($test_correo) {
// correo encontrado
errorjson("Ya existe", "Se ha detectado otro doble de este correo:
$correo");
$conn = null;
exit();
}
// Cifrado de correo (OpenSSL)
$clave = openssl_random_pseudo_bytes(32); // Genera una clave segura
$semilla = openssl_random_pseudo_bytes(16); // Genera un IV seguro
//crear los datos encriptados a partir de los cifrados generados
$correo_encriptado = openssl_encrypt(
$correo,
"AES-256-CBC",
$clave,
0,
$semilla,
);
$clave_hexadecimal = bin2hex($clave);
$semilla_hexadecimal = bin2hex($semilla);
// Hash de contraseña
$contrasena_hash = password_hash($contrasena, PASSWORD_DEFAULT);
$correo_original = $correo;
// Insertar en la base de datos
$stmt = $conn->prepare(
"INSERT INTO usuarios (usuario, correo, contrasena, clave_cifrado, iv,
correo_e) VALUES (?, ?, ?, ?, ?, ?)",
);
$stmt->execute([
$usuario,
$correo_original,
$contrasena_hash,
$clave_hexadecimal,
$semilla_hexadecimal,
$correo_encriptado,
]);

$id_usuario_insertado = $conn->lastInsertId();

$stmt_verificar = $conn->prepare("SELECT * FROM usuarios WHERE id = ?");


$stmt_verificar->execute([$id_usuario_insertado]);
$usuario_registrado = $stmt_verificar->fetchall();
$usuario_db = $stmt_verificar->fetch();
if ($usuario_registrado) {
$stmt = $conn->prepare("SELECT * FROM usuarios WHERE correo
= :usuario");
$stmt->bindparam(":usuario", $usuario);
$stmt->execute();
$usuario_db = $stmt->fetch();
//verificando correo y contraseña
$_SESSION["id"] = $usuario_db["id"];
echo "true";
$conn = null;
exit();
}
} catch (PDOException $e) {
if ($e->getCode() == "HY000") {
errorjson("Denegado", "Tipo de caracter no admitido");
} else {
echo "Error: " . $e->getMessage();
}
} catch (Exception $e) {
// Manejar otros errores
echo "Error: " . $e->getMessage();
}
function errorjson($titulo, $mensaje)
{
$data = [
"t" => "error",
"title" => $titulo, // Título de la alerta
"text" => $mensaje, // Texto principal de la alerta
"icon" => "error", // Icono de la alerta ('success', 'error',
'warning', 'info', 'question')
"confirmButtonText" => "Reintentar", // Texto del botón de confirmación
"allowOutsideClick" => true, // Permite cerrar la alerta al hacer clic
fuera de ella
"allowEscapeKey" => true, // Permite cerrar la alerta con la tecla Esc
"width" => "600px", // Controla cómo se expande la alerta ('row',
'column', 'fullscreen', false)
];
echo json_encode($data);
}

function exitojson($titulo, $mensaje)


{
$data = [
"t" => "true",
"title" => $titulo, // Título de la alerta
"text" => $mensaje, // Texto principal de la alerta
"icon" => "success",
"confirmButtonText" => "Cerrar",
"allowOutsideClick" => true,
"allowEscapeKey" => true,
"width" => "600px",
];
echo json_encode($data);
}

?>

You might also like