Jorge Rodrigo GonzálezEjemplo del ejercicio en el navegador
https://wsizra83jvj5nj5x5copjq-on.drv.tw/indexedDB/daw_m06_uf3_pac2.html
Código de la aplicación en google drive
https://drive.google.com/file/d/1AiojIlo_duC5_tMrkLbDa9Ev_ExlYMFy/view?usp=sharing
Código HTML / CSS Y JavaScript comentado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DAW_M06_UF3_PAC2</title>
<!-- ESTILOS CSS -->
<style>
h1{
width: 75%;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-size: 1.5rem;
padding: 2rem;
}
form{
width: 75%;
margin: 0 auto;
background-color: aqua;
padding: 3rem;
}
label{
display: block;
text-transform: uppercase;
font-weight: bold;
padding: .5rem;
}
input{
width:40%;
padding: .35rem;
cursor: pointer;
}
button{
cursor: pointer;
}
.button{
width: 30%;
margin: 0 auto;
margin-top: 2rem;
padding: .5rem;
background-color: blue;
color: white;
font-size: 1rem;
}
table{
width: 85%;
margin: 0 auto;
background-color: aqua;
}
.title_table{
font-size: 1.2rem;
padding: 1rem;
background-color: #fcc;
font-weight: bold;
}
td{
border-bottom: solid 2px;
padding: .5rem;
}
caption{
width: 100%;
margin-bottom: 1rem;
text-align: center;
font-weight: bold;
font-size: 2rem;
}
.center{
text-align: center;
font-weight: bold;
padding: .5rem;
margin-top: 1rem auto;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.select{
float: right;
background-color: white;
border: solid 1px;
}
.col-id{
background-color: #fcc;
font-weight: bold;
}
.col-asig{
font-weight: bold;
}
</style>
</head>
<!-- INICIAMOS LA APLICACIÓN -->
<body onload="startDB();">
<!-- IMAGEN 1 -->
<div class="center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqHW8ibUdaVIiQgJrB2R1fVWtrb2NL_5AsmYcNVP04XLYHdEl6Ng" alt="imagen_formulario" width="100px" height="100px" class="float-left">
</div>
<!-- H1 -->
<h1>Formulario de centros</h1>
<!-- FORMULARIO -->
<form action="">
<!-- IMAGEN 2 -->
<img src="http://abogadoresponde.net/wp-content/uploads/2016/03/ICONO-Formulario.png" alt="imagen_formulario" width="200px" height="200px" class="float-right">
<!-- ASIGNATURA -->
<label for="asignatura">Asignatura:</label>
<input type="text" id="asignatura" name="asignatura" placeholder="ASIGNATURA">
<!-- CURSO -->
<label for="curso">Curso:</label>
<input type="text" id="curso" name="curso" placeholder="CURSO">
<!-- FECHA -->
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha" placeholder="FECHA">
<br>
<!-- BOTÓN AÑADIR DATOS A BD Y LIMPIAR CAMPOS -->
<input class="button" type="button" onclick="add();" value="Nuevo registro...">
<input class="button" type="reset" value="Limpiar campos...">
<!-- COMENTARIOS -->
<p><b>**El Ejercicio está realizado con IndexedDB, al cerrar el navegador los datos permaneceran en éste, y volverán a aparecer de nuevo cuando se vuelva a abrir.La versión ´de la BBDD es la 3.</b></p>
<p>**Para EDITAR rellena los campos del formulario y luego pulsa en el botón EDIT del registro correspondiente, para cambiar los datos.</p>
<p>**Para BORRAR cualquier registro pulsa en el botón DELETE del registro correspondiente.</p>
<p>**El botón SELECT solo selecciona los datos de un registro y los muestra en el formulario.</p>
</form>
<hr>
<!-- TABLA DE DATOS -->
<div id="table">
<table>
<thead>
<tr>
<td class="title_table">Id</td>
<td class="title_table">Asignatura</td>
<td class="title_table">Curso</td>
<td class="title_table">Fecha</td>
<td class="title_table">Acciones</td>
</tr>
</thead>
<tbody id="tableList">
<tr>
<td id="tableItem">Por el momento, no hay nada que mostrar...</td>
</tr>
</tbody>
</table>
<!--DATOS EJERCICIO -->
<div class="center">
<p>Jorge Rorigo González</p>
<p>Desarrollo Web Entorno Cliente</p>
<p>DAW_M06_UF3_PAC2</p>
</div>
</div>
// PROGRAMACIÓN DE LA BBDD //
<script type="text/javascript">
//CÓDIGO PARA LA COMPATIBILIDAD DE NAVEGADORES
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var dataBase = null;
//MENSAJE EN CASO DE QUE EL NAVEGADOR NO SOPORTE INDEXDEDB
if(!window.indexedDB){
alert("Tu navegador no soporta IndexedDB");
}
//CÓDIGO PARA LA CREACIÓN DE LA BASE DE DATOS
function startDB(){
//CREAMOS LA BASE DE DATOS CON LA VERSIÓN
dataBase = indexedDB.open("object", 3);
//CREAMOS LOS CURSORES DE LA BASE DE DATOS
dataBase.onupgradeneeded = function(e){
var activate = dataBase.result;
var object = activate.createObjectStore("DB_centros_formacion", { keyPath : 'id', autoIncrement : true });
//CREAMOS LOS SIGUIENTES CAMPOS PARA INTRODUCIR LOS DATOS EN LA BBDD
object.createIndex('asignatura', 'nombre_asignatura', { multiEntry : true });
object.createIndex('curso', 'nombre_curso', { multiEntry : true });
object.createIndex('fecha', 'fecha_curso', { multiEntry : true });
}
//MESAJE DE ÉXITO EN LA CREACIÓN DE LA BBDD
dataBase.onsuccess = function(e){
alert('Base de Datos Creada');
//LLAMAMOS A LA FUNCIÓN MOSTRAR DATOS
loadAll();
}
//MENSAJE DE ERROR EN LA CREACIÓN DE LA BBDD
dataBase.onerror = function(e){
alert('Error en la Creación de la Base de Datos');
}
}
//CÓDIGO PARA INTRODUCIR DATOS EN LA BBDD
function add(){
// VARIABLES DE BBDD
//LLAMAMOS A LA BBDD
var activate = dataBase.result;
//CREAMOS LA TRANSASACCIÓN
var data = activate.transaction(["DB_centros_formacion"], 'readwrite');
//INDICAMOS EL ALMACEN SOBRE EL QUE SE VA A REALIZAR DICHA TRANSACCIÓN
var object = data.objectStore("DB_centros_formacion");
// INTRODUCE LOS DATOS COMO OBJETO JS EN LA BBDD
var request = object.put({
nombre_asignatura : document.querySelector('#asignatura').value,
nombre_curso : document.querySelector('#curso').value,
fecha_curso : document.querySelector('#fecha').value,
})
//MENSAJE DE ERROR
request.onerror = function(e){
alert('request.error.name' + '\n\n' + request.error.message);
}
//MENSAJE DE ÉXITO AL INTRODUCIR DATOS EN LA BBDD
data.oncomplete = function(e){
document.querySelector('#asignatura').value = '';
document.querySelector('#curso').value = '';
document.querySelector('#fecha').value = '';
//AVISAMOS DE QUE LA ACCIÓN SE HA EJECUTADO CORRECTAMENTE
alert('El dato se añadio correctamente');
//LLAMAMOS A LA FUNCIÓN PARA VISUALIZAR LOS DATOS EN LA TABLA
loadAll();
}
}
//CÓDIGO PARA BORRAR UN REGISTRO DE LA BBDD
function deleteObject(id) {
//VARIABLES DE LA BBDD
var activate = dataBase.result;
var data = activate.transaction(["DB_centros_formacion"], "readwrite");
var object = data.objectStore("DB_centros_formacion");
//VARIABLE PARA RECOGER LOS DATOS EN UN ARRAY
var elements = [];
//PETIÓN PARA BORRAR EL REGISTRO SEGÚN EL ID
var request = object.delete(id);
//RECORRE LOS DATOS DEL LA BBDD MEDIANTE CURSOR
object.openCursor().onsuccess = function (e){
var result = e.target.result;
//SI EL REGISTRO ES NULO NO SE RECOJE EL DATO Y RETORNA EL VALOR
if(result === null){
return;
}
//ALMACENA DATOS LEIDOS POR EL CURSOR EN EL ARRAY
elements.push(result.value);
//HAY QUE LLAMAR A LA FUNCIÓN CONTINUE PARA QUE EL CURSOR AVANCE AL LEER LOS DATOS
result.continue();
}
//SI LA ACCIÓN SE COMPLETA HAY QUE DIBUJAR LA TABLA SIN NECESIDAD DE REINICIAR EL NAVEGADOR
data.oncomplete = function () {
//VARIABLE PARA ESCRIBIR LA TABLA EN EL HTML
var outerHTML = '';
//RECORREMOS TODOS LOS ELEMENTOS DEL ARRAY PARA DIBUJAR LA TABLA
for(var i in elements) {
//AÑADIMOS TODOS LOS DATOS EN LA VARIABLE CON EL BUCLE FOR
//DIBUJAMOS LA TABLA MOSTRANDO LA INFORMACIÓN DE CADA REGISTRO Y DIBUJAMOS LOS BOTONES CON SU CORRESPONDIENTE FUNCIÓN E ID
outerHTML += '\n\
<tr>\n\
<td class="col-id">' + elements[i].id + '</td>\n\
<td class="col-asig">' + elements[i].nombre_asignatura + '</td>\n\
<td>' + elements[i].nombre_curso + '</td>\n\
<td>' + elements[i].fecha_curso + '</td>\n\
<td class="col-id">\n\
<button class="select" onclick="selectObject(' + elements[i].id + ');">Seleccionar</button>\n\
<button onclick="editObject(' + elements[i].id + ');">Editar</button>\n\
<button onclick="deleteObject(' + elements[i].id + ');">Borrar</button>\n\
</td>\n\
</tr>';
}
//UNA QUE LIMPIAR EL ARRAY DE DATOS PARA PODER SOBREESCRIBIR LOS DATOS DE LA TABLA
elements = [];
document.querySelector('#tableList').innerHTML = outerHTML;
//SI TODO HA IDO BIEN MOSTRAMOS EL ALERT CON EL ID DEL ELEMENTO BORRADO
alert("Objeto ELIMINADO con éxito = " + ' ID ('+ id +')');
}
}
//CÓDIGO PARA SELECCIONAR UN REGISTRO
function selectObject(id) {
//VARIABLES DE LA BASE DE DATOS
var activate = dataBase.result;
var data = activate.transaction(["DB_centros_formacion"], "readwrite");
var object = data.objectStore("DB_centros_formacion");
//ACCIÓN PARA SELECCIONAR EL REGISTRO NOS ASEGURAMOS DE QUE SEA UN NÚMERO ENTERO
var request = object.get(parseInt(id));
//SI HAY UN ERROR EN LA SOLICITUD
request.onerror = function(e){
alert('No se pueden leer los datos de la ID' + id);
}
//MENSAJE DE ÉXITO AL INTRODUCIR DATO
request.onsuccess = function (e) {
//RESULTADO DE LA PETICIÓN
var result = request.result;
//SI LA PETICIÓN SE HA REALIZADO MOSTRAMOS LOS DATOS EN EL FORMULARIO
if(request.result) {
document.querySelector('#asignatura').value = request.result.nombre_asignatura;
document.querySelector('#curso').value = request.result.nombre_curso;
document.querySelector('#fecha').value = request.result.fecha_curso;
}
}
}
//CÓDIGO PARA EDITAR CUALQUIER REGISTRO
function editObject(id){
//SELECCIONAMOS LOS CAMPOS DEL FORMULARIO MEDIANTE VARIABLES
var a = document.querySelector('#asignatura').value;
var b = document.querySelector('#curso').value;
var c = document.querySelector('#fecha').value;
//VARIABLES DE LA BBDD
var activate = dataBase.result;
var data = activate.transaction(["DB_centros_formacion"], "readwrite");
var object = data.objectStore("DB_centros_formacion");
//CREAMOS LA PETICIÓN PARA EDITAR DATOS
var request = object.put({id:id, nombre_asignatura:a, nombre_curso:b, fecha_curso:c });
//ARRAY DE DATOS
var elements = [];
//REALIZAMOS LA MISMA OPERACIÓN PARA DIBUJAR LA TABLA EN EL HTML
object.openCursor().onsuccess = function (e){
var result = e.target.result;
if (result === null){
return;
}
elements.push(result.value);
result.continue();
}
//AVISAMOS AL USUARIO AL SER UN ALERT LA OPERACIÓN SE EJECUTA DE TODOS MODOS
alert("VAS A EDITAR EL ELEMENTO");
//CONTROLAMOS EL ERROR
request.onerror = function(event) {
alert("Error al Editar Datos");
}
//COMPLETAMOS LA OPERACIÓN AL IGUAL QUE ANTES DIBUJADO LA TABLA
data.oncomplete = function (){
var outerHTML = '';
for (var i in elements){
outerHTML += '\n\
<tr>\n\
<td class="col-id">' + elements[i].id + '</td>\n\
<td class="col-asig">' + elements[i].nombre_asignatura + '</td>\n\
<td>' + elements[i].nombre_curso + '</td>\n\
<td>' + elements[i].fecha_curso + '</td>\n\
<td class="col-id">\n\
<button class="select" onclick="selectObject(' + elements[i].id + ');">Select</button>\n\
<button onclick="editObject(' + elements[i].id + ');">Edit</button>\n\
<button onclick="deleteObject(' + elements[i].id + ');">Delete</button>\n\
</td>\n\
</tr>';
}
elements = [];
document.querySelector('#tableList').innerHTML = outerHTML;
}
}
//CÓDIGO PARA CARGAR OBJETOS DE LA BBDD Y MOSTRARLOS EN EL HTML, SEGÚN ESTOS OBJETOS SE AÑADEN A LA BBDD
function loadAll(id){
//VARIABLES DE LA BBDD
var activate = dataBase.result;
var data = activate.transaction(["DB_centros_formacion"], "readonly");
var object = data.objectStore("DB_centros_formacion");
//IGUAL QUE EN LOS CASOS ANTERIORES
var elements = [];
//CURSOR
object.openCursor().onsuccess = function (e){
var result = e.target.result;
if (result === null){
return;
}
elements.push(result.value);
result.continue();
}
//COMPLETAMOS LA OPERACIÓN DIBUJANDO LA TABLA
data.oncomplete = function (){
var outerHTML = '';
for (var i in elements) {
outerHTML += '\n\
<tr>\n\
<td class="col-id">' + elements[i].id + '</td>\n\
<td class="col-asig">' + elements[i].nombre_asignatura + '</td>\n\
<td>' + elements[i].nombre_curso + '</td>\n\
<td>' + elements[i].fecha_curso + '</td>\n\
<td class="col-id">\n\
<button class="select" onclick="selectObject(' + elements[i].id + ');">Select</button>\n\
<button onclick="editObject(' + elements[i].id + ');">Edit</button>\n\
<button onclick="deleteObject(' + elements[i].id + ');">Delete</button>\n\
</td>\n\
</tr>';
}
elements = [];
document.querySelector('#tableList').innerHTML = outerHTML;
}
}
</script>
</body>
</html>
15 de febrero de 2022 • Jorge Rodrigo González
Categorías: JavaScript
Etiquetas: Etiquetas: indexeddb, javascript
Formato: Standard