{"id":104,"date":"2022-02-15T19:29:28","date_gmt":"2022-02-15T19:29:28","guid":{"rendered":"https:\/\/www.jorgerodrigoglez.es\/blog\/?p=104"},"modified":"2022-12-09T20:33:41","modified_gmt":"2022-12-09T20:33:41","slug":"creacion-de-bbdd-con-indexeddb","status":"publish","type":"post","link":"https:\/\/www.jorgerodrigoglez.es\/blog\/creacion-de-bbdd-con-indexeddb\/","title":{"rendered":"Creaci\u00f3n de BBDD con IndexedDB…"},"content":{"rendered":"\n
Ejemplo del ejercicio en el navegador<\/strong>\nhttps:\/\/wsizra83jvj5nj5x5copjq-on.drv.tw\/indexedDB\/daw_m06_uf3_pac2.html<\/a>\n\nC\u00f3digo de la aplicaci\u00f3n en google drive<\/strong>\nhttps:\/\/drive.google.com\/file\/d\/1AiojIlo_duC5_tMrkLbDa9Ev_ExlYMFy\/view?usp=sharing<\/a>\n\n\nC\u00f3digo HTML \/ CSS Y JavaScript comentado:<\/strong><\/em>\n\n<!DOCTYPE html>\n<html lang=\"en\"><\/strong>\n<head><\/strong>\n    <meta charset=\"UTF-8\">\n    <title>DAW_M06_UF3_PAC2<\/title>\n    <!-- ESTILOS CSS -->\n\n    <style>\n\n        h1{\n            width: 75%;\n            margin: 0 auto;\n            text-align: center;\n            text-transform: uppercase;\n            font-size: 1.5rem;\n            padding: 2rem;\n        }\n\n        form{\n            width: 75%;\n            margin: 0 auto;\n            background-color: aqua;\n            padding: 3rem;\n        }\n\n        label{\n            display: block;\n            text-transform: uppercase;\n            font-weight: bold;\n            padding: .5rem;\n        }\n\n        input{\n            width:40%;\n            padding: .35rem;\n            cursor: pointer;\n        }\n\n        button{\n            cursor: pointer;        \n            \n        }\n\n        .button{\n            width: 30%;\n            margin: 0 auto;\n            margin-top: 2rem;\n            padding: .5rem;\n            background-color: blue;\n            color: white;\n            font-size: 1rem;\n        }\n\n        table{\n            width: 85%;\n            margin: 0 auto;\n            background-color: aqua;\n            \n        }   \n\n        .title_table{           \n            font-size: 1.2rem;      \n            padding: 1rem;\n            background-color: #fcc;\n            font-weight: bold;\n        }\n\n        td{\n            border-bottom: solid 2px;\n            padding: .5rem;\n        }\n\n        caption{\n            width: 100%;\n            margin-bottom: 1rem;\n            text-align: center;\n            font-weight: bold;\n            font-size: 2rem;            \n        }\n\n        .center{\n            text-align: center;         \n            font-weight: bold;\n            padding: .5rem;\n            margin-top: 1rem auto;\n        }\n\n        .float-left{\n            float: left;\n        }\n\n        .float-right{\n            float: right;\n        }\n\n        .select{\n            float: right;\n            background-color: white;\n            border: solid 1px;\n        }\n\n        .col-id{\n            background-color: #fcc;\n            font-weight: bold;\n        }\n\n        .col-asig{\n            font-weight: bold;\n        }\n    <\/style>\n\n<\/head><\/strong>\n\n<!-- INICIAMOS LA APLICACI\u00d3N --><\/strong>\n<body<\/strong> onload=\"startDB()<\/strong>;\">\n    <!-- IMAGEN 1 -->\n    <div class=\"center\">\n        <img src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSqHW8ibUdaVIiQgJrB2R1fVWtrb2NL_5AsmYcNVP04XLYHdEl6Ng\" alt=\"imagen_formulario\" width=\"100px\" height=\"100px\" class=\"float-left\">\n    <\/div>\n    <!-- H1 -->\n    <h1>Formulario de centros<\/h1>\n    <!-- FORMULARIO -->\n    <form action=\"\">\n        <!-- IMAGEN 2 -->\n        <img src=\"http:\/\/abogadoresponde.net\/wp-content\/uploads\/2016\/03\/ICONO-Formulario.png\" alt=\"imagen_formulario\" width=\"200px\" height=\"200px\" class=\"float-right\">\n        <!-- ASIGNATURA -->\n        <label for=\"asignatura\">Asignatura:<\/label>\n        <input type=\"text\" id=\"asignatura\" name=\"asignatura\" placeholder=\"ASIGNATURA\">\n        <!-- CURSO -->\n        <label for=\"curso\">Curso:<\/label>\n        <input type=\"text\" id=\"curso\" name=\"curso\" placeholder=\"CURSO\">\n        <!-- FECHA -->\n        <label for=\"fecha\">Fecha:<\/label>\n        <input type=\"date\" id=\"fecha\" name=\"fecha\" placeholder=\"FECHA\">\n        <br>\n        <!-- BOT\u00d3N A\u00d1ADIR DATOS A BD Y LIMPIAR CAMPOS -->\n        <input class=\"button\" type=\"button\" onclick=\"add();\" value=\"Nuevo registro...\"> \n        <input class=\"button\" type=\"reset\" value=\"Limpiar campos...\">\n        <!-- COMENTARIOS -->\n        <p><b>**El Ejercicio est\u00e1 realizado con IndexedDB, al cerrar el navegador los datos permaneceran en \u00e9ste, y volver\u00e1n a aparecer de nuevo cuando se vuelva a abrir.La versi\u00f3n \u00b4de la BBDD es la 3.<\/b><\/p>\n        <p>**Para EDITAR rellena los campos del formulario y luego pulsa en el bot\u00f3n EDIT del registro correspondiente, para cambiar los datos.<\/p>\n        <p>**Para BORRAR cualquier registro pulsa en el bot\u00f3n DELETE del registro correspondiente.<\/p>\n        <p>**El bot\u00f3n SELECT solo selecciona los datos de un registro y los muestra en el formulario.<\/p>\n        \n    <\/form>\n\n    <hr>\n    <!-- TABLA DE DATOS -->\n    <div id=\"table\">\n        <table>     \n            <thead>\n                <tr>\n                    <td class=\"title_table\">Id<\/td>\n                    <td class=\"title_table\">Asignatura<\/td>\n                    <td class=\"title_table\">Curso<\/td>\n                    <td class=\"title_table\">Fecha<\/td>\n                    <td class=\"title_table\">Acciones<\/td>\n                <\/tr>\n            <\/thead>\n\n            <tbody id=\"tableList\">\n                <tr>\n                    <td id=\"tableItem\">Por el momento, no hay nada que mostrar...<\/td>\n                <\/tr>\n            <\/tbody>\n\n        <\/table>\n        <!--DATOS EJERCICIO -->\n        <div class=\"center\">\n            <p>Jorge Rorigo Gonz\u00e1lez<\/p>\n            <p>Desarrollo Web Entorno Cliente<\/p>\n            <p>DAW_M06_UF3_PAC2<\/p>\n        <\/div>  \n    <\/div>\n    \n\/\/ PROGRAMACI\u00d3N DE LA BBDD<\/strong> \/\/\n\n<script type=\"text\/javascript\"><\/strong>\n        \n\/\/C\u00d3DIGO PARA LA COMPATIBILIDAD DE NAVEGADORES<\/strong>\nvar indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;\nvar dataBase = null;\n\/\/MENSAJE EN CASO DE QUE EL NAVEGADOR NO SOPORTE INDEXDEDB<\/strong>\nif(!window.indexedDB){\n   alert(\"Tu navegador no soporta IndexedDB\");\n}\n\/\/C\u00d3DIGO PARA LA CREACI\u00d3N DE LA BASE DE DATOS<\/strong>\nfunction startDB(){\n\/\/CREAMOS LA BASE DE DATOS CON LA VERSI\u00d3N<\/strong>\ndataBase = indexedDB.open(\"object\", 3);\n\/\/CREAMOS LOS CURSORES DE LA BASE DE DATOS<\/strong>\ndataBase.onupgradeneeded = function(e){\n   var activate = dataBase.result;         \n   var object = activate.createObjectStore(\"DB_centros_formacion\", { keyPath :     'id', autoIncrement : true });\n\/\/CREAMOS LOS SIGUIENTES CAMPOS PARA INTRODUCIR LOS DATOS EN LA BBDD<\/strong>\n   object.createIndex('asignatura', 'nombre_asignatura', { multiEntry : true });\n   object.createIndex('curso', 'nombre_curso', { multiEntry : true });\n   object.createIndex('fecha', 'fecha_curso', { multiEntry : true });\n}\n\/\/MESAJE DE \u00c9XITO EN LA CREACI\u00d3N DE LA BBDD<\/strong>\ndataBase.onsuccess = function(e){\n   alert('Base de Datos Creada');              \n   \/\/LLAMAMOS A LA FUNCI\u00d3N MOSTRAR DATOS<\/strong>\n        loadAll();\n    }\n    \/\/MENSAJE DE ERROR EN LA CREACI\u00d3N DE LA BBDD<\/strong>\n        dataBase.onerror = function(e){\n        alert('Error en la Creaci\u00f3n de la Base de Datos');      \n     }\n   }\n\/\/C\u00d3DIGO PARA INTRODUCIR DATOS EN LA BBDD<\/strong>\nfunction add(){          \n\n  \/\/ VARIABLES DE BBDD\n  \/\/LLAMAMOS A LA BBDD<\/strong>\n  var activate = dataBase.result;\n  \/\/CREAMOS LA TRANSASACCI\u00d3N<\/strong>\n  var data = activate.transaction([\"DB_centros_formacion\"], 'readwrite');\n  \/\/INDICAMOS EL ALMACEN SOBRE EL QUE SE VA A REALIZAR DICHA TRANSACCI\u00d3N<\/strong>\n  var object = data.objectStore(\"DB_centros_formacion\");\n  \/\/ INTRODUCE LOS DATOS COMO OBJETO JS EN LA BBDD<\/strong>\n  var request = object.put({\n      nombre_asignatura : document.querySelector('#asignatura').value,\n      nombre_curso : document.querySelector('#curso').value,\n      fecha_curso : document.querySelector('#fecha').value,\n   })\n   \/\/MENSAJE DE ERROR<\/strong>\n   request.onerror = function(e){\n      alert('request.error.name' + '\\n\\n' + request.error.message);\n    }\n    \/\/MENSAJE DE \u00c9XITO AL INTRODUCIR DATOS EN LA BBDD<\/strong>\n    data.oncomplete = function(e){\n       document.querySelector('#asignatura').value = '';\n       document.querySelector('#curso').value = '';\n       document.querySelector('#fecha').value = '';\n       \/\/AVISAMOS DE QUE LA ACCI\u00d3N SE HA EJECUTADO CORRECTAMENTE<\/strong>\n       alert('El dato se a\u00f1adio correctamente');\n       \/\/LLAMAMOS A LA FUNCI\u00d3N PARA VISUALIZAR LOS DATOS EN LA TABLA<\/strong>\n           loadAll();              \n        }   \n     }\n     \/\/C\u00d3DIGO PARA BORRAR UN REGISTRO DE LA BBDD<\/strong>\n     function deleteObject(id) {\n       \/\/VARIABLES DE LA BBDD<\/strong>\n       var activate = dataBase.result;\n       var data = activate.transaction([\"DB_centros_formacion\"], \"readwrite\");\n       var object = data.objectStore(\"DB_centros_formacion\");\n       \/\/VARIABLE PARA RECOGER LOS DATOS EN UN ARRAY<\/strong>\n        var elements = [];\n       \/\/PETI\u00d3N PARA BORRAR EL REGISTRO SEG\u00daN EL ID<\/strong>\n        var request = object.delete(id);\n       \/\/RECORRE LOS DATOS DEL LA BBDD MEDIANTE CURSOR<\/strong>\n         object.openCursor().onsuccess = function (e){\n           var result = e.target.result;\n           \/\/SI EL REGISTRO ES NULO NO SE RECOJE EL DATO Y RETORNA EL VALOR<\/strong>\n           if(result === null){\n               return;\n            }\n           \/\/ALMACENA DATOS LEIDOS POR EL CURSOR EN EL ARRAY<\/strong>\n           elements.push(result.value);\n           \/\/HAY QUE LLAMAR A LA FUNCI\u00d3N CONTINUE PARA QUE EL CURSOR AVANCE AL LEER LOS DATOS<\/strong>\n              result.continue();\n           } \n           \/\/SI LA ACCI\u00d3N SE COMPLETA HAY QUE DIBUJAR LA TABLA SIN NECESIDAD DE REINICIAR EL NAVEGADOR <\/strong>\n          data.oncomplete = function () {                  \n             \/\/VARIABLE PARA ESCRIBIR LA TABLA EN EL HTML<\/strong>\n             var outerHTML = '';\n             \/\/RECORREMOS TODOS LOS ELEMENTOS DEL ARRAY PARA DIBUJAR LA TABLA<\/strong>\n             for(var i in elements) {\n               \/\/A\u00d1ADIMOS TODOS LOS DATOS EN LA VARIABLE CON EL BUCLE FOR<\/strong>\n               \/\/DIBUJAMOS LA TABLA MOSTRANDO LA INFORMACI\u00d3N DE CADA REGISTRO Y DIBUJAMOS LOS BOTONES CON SU CORRESPONDIENTE FUNCI\u00d3N E ID<\/strong>\n          outerHTML += '\\n\\\n           <tr>\\n\\\n             <td class=\"col-id\">' + elements[i].id + '<\/td>\\n\\\n             <td class=\"col-asig\">' + elements[i].nombre_asignatura + '<\/td>\\n\\\n              <td>' + elements[i].nombre_curso + '<\/td>\\n\\\n              <td>' + elements[i].fecha_curso + '<\/td>\\n\\\n              <td class=\"col-id\">\\n\\\n           <button  class=\"select\" onclick=\"selectObject(' + elements[i].id + ');\">Seleccionar<\/button>\\n\\\n           <button onclick=\"editObject(' + elements[i].id + ');\">Editar<\/button>\\n\\\n           <button onclick=\"deleteObject(' + elements[i].id + ');\">Borrar<\/button>\\n\\\n               <\/td>\\n\\\n             <\/tr>';  \n         }\n        \/\/UNA QUE LIMPIAR EL ARRAY DE DATOS PARA PODER SOBREESCRIBIR LOS DATOS DE LA TABLA<\/strong>\n         elements = [];\n         document.querySelector('#tableList').innerHTML = outerHTML;\n         \/\/SI TODO HA IDO BIEN MOSTRAMOS EL ALERT CON EL ID DEL ELEMENTO BORRADO<\/strong>\n                alert(\"Objeto ELIMINADO con \u00e9xito = \" + ' ID ('+ id +')');\n            }             \n        }\n        \/\/C\u00d3DIGO PARA SELECCIONAR UN REGISTRO<\/strong>\n        function selectObject(id) {\n            \/\/VARIABLES DE LA BASE DE DATOS<\/strong>   \n            var activate = dataBase.result;\n            var data = activate.transaction([\"DB_centros_formacion\"], \"readwrite\");\n            var object = data.objectStore(\"DB_centros_formacion\");            \n            \/\/ACCI\u00d3N PARA SELECCIONAR EL REGISTRO NOS ASEGURAMOS DE QUE SEA UN N\u00daMERO ENTERO<\/strong>\n            var request = object.get(parseInt(id));\n            \/\/SI HAY UN ERROR EN LA SOLICITUD<\/strong>\n            request.onerror = function(e){\n                alert('No se pueden leer los datos de la ID' + id);\n            }   \n            \/\/MENSAJE DE \u00c9XITO AL INTRODUCIR DATO<\/strong>\n            request.onsuccess = function (e) {              \n              \/\/RESULTADO DE LA PETICI\u00d3N<\/strong>\n              var result = request.result;\n           \/\/SI LA PETICI\u00d3N SE HA REALIZADO MOSTRAMOS LOS DATOS EN EL FORMULARIO<\/strong>\n                if(request.result) {                    \n                  document.querySelector('#asignatura').value =   request.result.nombre_asignatura;\n                  document.querySelector('#curso').value = request.result.nombre_curso;\n                  document.querySelector('#fecha').value = request.result.fecha_curso;\n                }                   \n            }                \n        }     \n     \/\/C\u00d3DIGO PARA EDITAR CUALQUIER REGISTRO<\/strong>\n     function editObject(id){   \n        \/\/SELECCIONAMOS LOS CAMPOS DEL FORMULARIO MEDIANTE VARIABLES<\/strong> \n         var a = document.querySelector('#asignatura').value;\n         var b = document.querySelector('#curso').value;\n         var c = document.querySelector('#fecha').value;         \n         \/\/VARIABLES DE LA BBDD<\/strong>\n         var activate = dataBase.result;\n         var data = activate.transaction([\"DB_centros_formacion\"], \"readwrite\");\n         var object = data.objectStore(\"DB_centros_formacion\");\n         \/\/CREAMOS LA PETICI\u00d3N PARA EDITAR DATOS<\/strong>\n         var request = object.put({id:id, nombre_asignatura:a, nombre_curso:b, fecha_curso:c }); \n        \/\/ARRAY DE DATOS<\/strong>\n        var elements = [];\n        \/\/REALIZAMOS LA MISMA OPERACI\u00d3N PARA DIBUJAR LA TABLA EN EL HTML<\/strong>\n        object.openCursor().onsuccess = function (e){\n            var result = e.target.result;\n            if (result === null){\n                return;\n            }\n              elements.push(result.value);\n              result.continue();          \n            }   \n     \/\/AVISAMOS AL USUARIO AL SER UN ALERT LA OPERACI\u00d3N SE EJECUTA DE TODOS MODOS<\/strong>\n          alert(\"VAS A EDITAR EL ELEMENTO\");\n          \/\/CONTROLAMOS EL ERROR<\/strong>\n          request.onerror = function(event) {\n             alert(\"Error al Editar Datos\");\n          }\n          \/\/COMPLETAMOS LA OPERACI\u00d3N AL IGUAL QUE ANTES DIBUJADO LA TABLA<\/strong>\n          data.oncomplete = function (){\n             var outerHTML = '';\n             for (var i in elements){                    \n              outerHTML += '\\n\\\n              <tr>\\n\\\n               <td class=\"col-id\">' + elements[i].id + '<\/td>\\n\\\n               <td class=\"col-asig\">' + elements[i].nombre_asignatura + '<\/td>\\n\\\n               <td>' + elements[i].nombre_curso + '<\/td>\\n\\\n               <td>' + elements[i].fecha_curso + '<\/td>\\n\\\n               <td class=\"col-id\">\\n\\\n               <button class=\"select\" onclick=\"selectObject(' + elements[i].id + ');\">Select<\/button>\\n\\\n               <button onclick=\"editObject(' + elements[i].id + ');\">Edit<\/button>\\n\\\n               <button onclick=\"deleteObject(' + elements[i].id + ');\">Delete<\/button>\\n\\\n              <\/td>\\n\\\n             <\/tr>';                 \n\n           }\n           elements = [];\n           document.querySelector('#tableList').innerHTML = outerHTML;\n            }\n        }           \n        \/\/C\u00d3DIGO PARA CARGAR OBJETOS DE LA BBDD Y MOSTRARLOS EN EL HTML, SEG\u00daN ESTOS OBJETOS SE A\u00d1ADEN A LA BBDD<\/strong>\n        function loadAll(id){\n          \/\/VARIABLES DE LA BBDD<\/strong>\n          var activate = dataBase.result;\n          var data = activate.transaction([\"DB_centros_formacion\"], \"readonly\");\n          var object = data.objectStore(\"DB_centros_formacion\");\n          \/\/IGUAL QUE EN LOS CASOS ANTERIORES<\/strong>\n          var elements = [];\n          \/\/CURSOR<\/strong>\n          object.openCursor().onsuccess = function (e){\n              var result = e.target.result;\n              if (result === null){\n                  return;\n               }\n               elements.push(result.value);\n               result.continue();\n            }\n            \/\/COMPLETAMOS LA OPERACI\u00d3N DIBUJANDO LA TABLA<\/strong>\n            data.oncomplete = function (){\n            var outerHTML = '';\n             for (var i in elements) {                    \n              outerHTML += '\\n\\\n              <tr>\\n\\\n               <td class=\"col-id\">' + elements[i].id + '<\/td>\\n\\\n               <td class=\"col-asig\">' + elements[i].nombre_asignatura + '<\/td>\\n\\\n               <td>' + elements[i].nombre_curso + '<\/td>\\n\\\n               <td>' + elements[i].fecha_curso + '<\/td>\\n\\\n               <td class=\"col-id\">\\n\\\n              <button class=\"select\" onclick=\"selectObject(' + elements[i].id + ');\">Select<\/button>\\n\\\n              <button onclick=\"editObject(' + elements[i].id + ');\">Edit<\/button>\\n\\\n              <button onclick=\"deleteObject(' + elements[i].id + ');\">Delete<\/button>\\n\\\n               <\/td>\\n\\\n             <\/tr>'; \n            }\n            elements = [];\n            document.querySelector('#tableList').innerHTML = outerHTML;\n            }\n        }\n  <\/script>\n\n<\/body>\n<\/html><\/strong>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Creaci\u00f3n de un formulario que permite introducir datos mediante un formulario para crear una BBDD en el navegador web mediante api de html5 indexeddb. Tambi\u00e9n permite el borrado y edici\u00f3n de los datos creados en la BBDD. Ejercicio realizado en el m\u00f3dulo de aplicaciones web del lado del cliente del CFGS de aplicaciones web<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[16,15],"class_list":["post-104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-indexeddb","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/posts\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":15,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/posts\/104\/revisions\/169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jorgerodrigoglez.es\/blog\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}