{"id":149,"date":"2023-06-02T18:16:27","date_gmt":"2023-06-02T23:16:27","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/sistinfo\/?p=149"},"modified":"2026-04-01T02:46:33","modified_gmt":"2026-04-01T07:46:33","slug":"taller-formularios-ingreso-datos","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/sistinfo\/taller-formularios-ingreso-datos\/","title":{"rendered":"S03 Taller_Resumen: Formularios de ingreso de datos y cuadros combinados"},"content":{"rendered":"\n<p>Para el proceso del modelo comercial <strong>Dropshipping<\/strong> indicado en caso dado como actividad, desarrolle un modelo de base de datos relacional b\u00e1sica.<\/p>\n\n\n\n<p>1. Realice la <strong>descripci\u00f3n conceptual<\/strong> un proceso\/transacci\u00f3n, las partes que intervienen, reglas a considerar dentro del proceso (ej: verificar ventas a clientes registrados). Realice por lo menos un p\u00e1rrafo.<\/p>\n\n\n\n<p>2. Dise\u00f1e las <strong>tablas, campos y las relaciones<\/strong> entre ellas, siguiendo los pasos de los talleres anteriores. Se presenta un ejemplo b\u00e1sico de desarrollo, a\u00f1ada tablas y campos acorde a su planteamiento realizado en el numeral anterior<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_TablaRelaciones01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"357\" height=\"333\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_TablaRelaciones01.png\" alt=\"tablas campos y relaciones para caso dropshipping\" class=\"wp-image-151\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_TablaRelaciones01.png 357w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_TablaRelaciones01-300x280.png 300w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Formulario para el ingreso de datos<\/h2>\n\n\n\n<p>El formulario se usa como interfase de usuario, pues el usuario operador tiene solo acceso a ingresar y\/o consultar datos, sin poder realizar cambios al dise\u00f1o de la DB.<\/p>\n\n\n\n<p>3.1 Por facilidad se inicia con un \"asistente de formularios\", seleccionando la tabla y campos a usar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"877\" height=\"127\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente01.png\" alt=\"Formulario Asistente Men\u00fa\" class=\"wp-image-152\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente01.png 877w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente01-300x43.png 300w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente01-768x111.png 768w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><\/a><\/figure>\n\n\n\n<p>3.2 Seleccione la tabla a usar, por ejemplo la tabla clientes para llenar sus datos.:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente02.png\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"356\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente02.png\" alt=\"Formulario asistente seleccionar tabla\" class=\"wp-image-154\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente02.png 583w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente02-300x183.png 300w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/figure>\n\n\n\n<p>3.3 Agrege los campos que se deben llenar en el formulario<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente03.png\"><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"359\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente03.png\" alt=\"Formulario asistente selecciona campos\" class=\"wp-image-156\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente03.png 582w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente03-300x185.png 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/a><\/figure>\n\n\n\n<p>3.4 La distribuci\u00f3n de las casillas que llenan los campos de un registro en la tabla par este formulario puede ser en columnas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente04.png\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"358\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente04.png\" alt=\"\" class=\"wp-image-157\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente04.png 583w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente04-300x184.png 300w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/figure>\n\n\n\n<p>3.5 Se asigna un nombre al formulario, por ejemplo \"F_clientes\" para diferenciarlo de la tabla \"clientes\".<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"355\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente05.png\" alt=\"formulario asistente agregar nombre\" class=\"wp-image-158\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente05.png 583w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioAsistente05-300x183.png 300w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/figure>\n\n\n\n<p>Con lo que se obtiene el formulario listo para ingresar los datos de un cliente en cada casilla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioDatos05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"353\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioDatos05.png\" alt=\"Formulario asistente Ingreso Datos\" class=\"wp-image-159\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioDatos05.png 760w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioDatos05-300x139.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/figure>\n\n\n\n<p>En la esquina inferior izquierda se encuentran los botones para \"navegar\" entre registros de la tabla vinculada al formulario.<\/p>\n\n\n\n<p><strong>Tarea<\/strong>: Realice el ingreso de empresas Pyme de forma semejante a la tabla de clientes<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4.&nbsp; Formularios y Cuadros combinados<\/h2>\n\n\n\n<p>Para el caso de el formulario de ingreso de datos de una transacci\u00f3n entre un cliente que comprar\u00eda a una Pyme, se encuentra relacionado a la tabla \"transacci\u00f3n\". En la tabla \"transacci\u00f3n solo se registra las claves primarias que identifican al cliente y a la Pyme, pues los dem\u00e1s datos ya se encuentran en las tablas correspondientes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioCuadroCombinado01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"759\" height=\"357\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioCuadroCombinado01.png\" alt=\"formulario de datos simple\" class=\"wp-image-160\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioCuadroCombinado01.png 759w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_FormularioCuadroCombinado01-300x141.png 300w\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" \/><\/a><\/figure>\n\n\n\n<p>Mostrar o seleccionar los datos de nombre de un cliente en un formulario se facilita usando un cuadro combinado como los mostrados en el siguiente formulario.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"284\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png\" alt=\"Formulario con cuadro combinado\" class=\"wp-image-162\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png 761w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01-300x112.png 300w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/a><\/figure>\n\n\n\n<p>En la vista dise\u00f1o, use la secci\u00f3n de controles, use el bot\u00f3n mostrado en la imagen, correspondiente a cuadro combinado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado02.png\"><img loading=\"lazy\" decoding=\"async\" width=\"929\" height=\"426\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado02.png\" alt=\"formulario con cuadro combinado\" class=\"wp-image-163\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado02.png 929w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado02-300x138.png 300w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado02-768x352.png 768w\" sizes=\"auto, (max-width: 929px) 100vw, 929px\" \/><\/a><\/figure>\n\n\n\n<p>Al ubicar un cuadro combinado en la secci\u00f3n de \"Detalle del Formulario\", se debe indicar los datos a usar en el cuadro combinado.<\/p>\n\n\n\n<p><strong>Ejemplo<\/strong>: Para seleccionar un producto por <code>id_producto<\/code>, se requiere usar desde la tabla producto,&nbsp; la clave primaria del producto y el nombre del producto. El asistente solicitar\u00e1 esta informaci\u00f3n para crear el cuadro combinado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado03.png\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"345\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado03.png\" alt=\"cuadro combinado origen de datos\" class=\"wp-image-164\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado03.png 510w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado03-300x203.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/figure>\n\n\n\n<p>Solicita la tabla de datos, para el caso es la tabla producto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado04.png\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"352\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado04.png\" alt=\"cuadro combinado selecciona origen de datos\" class=\"wp-image-165\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado04.png 507w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado04-300x208.png 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/a><\/figure>\n\n\n\n<p>Luego se agregan los campos a usar. Se requiere las claves primarias de producto y el nombre del producto. Puede agregar m\u00e1s campos, pero solo se mostrar\u00e1 el primero.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"349\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado05.png\" alt=\"cuadro combinado selecciona campos\" class=\"wp-image-166\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado05.png 507w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado05-300x207.png 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/a><\/figure>\n\n\n\n<p>La siguiente ventana pregunta si quiere \"ordenar\" los datos, por el momento solo se pasa a la siguiente. Al tener pocos datos, ser\u00e1 una pregunta a considerar luego.<\/p>\n\n\n\n<p>En la siguiente ventana se muestra un ejemplo de lo que se obtendr\u00e1 como datos,<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"349\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado06.png\" alt=\"cuadro combinado muestra ejemplo salida\" class=\"wp-image-167\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado06.png 510w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado06-300x205.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/figure>\n\n\n\n<p>De los campos seleccionados, se oculta el primero. En el ejercicio, el id_producto ya dispone de una casilla para llenar el dato, el cuadro combinado es complementario para mostrar un detalle del producto como el nombre o descripci\u00f3n.<\/p>\n\n\n\n<p>La siguiente pregunta es cual de los campos proporciona el dato a ser almacenado en el registro. El id_producto es todo lo necesario para reconocer un producto y es el que se usa en el ejemplo,<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado07.png\"><img loading=\"lazy\" decoding=\"async\" width=\"505\" height=\"353\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado07.png\" alt=\"cuadro combinado campo a usar\" class=\"wp-image-168\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado07.png 505w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado07-300x210.png 300w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><\/figure>\n\n\n\n<p>Se requiere un nombre para identificar al cuadro combinado dentro del formulario. Se usa el nombre de <code>sel_producto<\/code> por permitir seleccionar el producto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado08.png\"><img loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"355\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado08.png\" alt=\"\" class=\"wp-image-169\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado08.png 509w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado08-300x209.png 300w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/figure>\n\n\n\n<p>Se finaliza el proceso y se obtiene el cuadro combinado para seleccionar un producto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"284\" src=\"http:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png\" alt=\"Formulario con cuadro combinado\" class=\"wp-image-162\" srcset=\"https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01.png 761w, https:\/\/blog.espol.edu.ec\/sistinfo\/files\/2023\/06\/TallerS03_CuadroCombinado01-300x112.png 300w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/a><\/figure>\n\n\n\n<p>Tarea: Realice los cuadros combinados para los otros campos en el formulario<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para el proceso del modelo comercial Dropshipping indicado en caso dado como actividad, desarrolle un modelo de base de datos relacional b\u00e1sica. 1. Realice la descripci\u00f3n conceptual un proceso\/transacci\u00f3n, las partes que intervienen, reglas a considerar dentro del proceso (ej: verificar ventas a clientes registrados). Realice por lo menos un p\u00e1rrafo. 2. Dise\u00f1e las tablas, [&hellip;]<\/p>\n","protected":false},"author":8043,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1843],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-actividades"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/users\/8043"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":5,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":646,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/posts\/149\/revisions\/646"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/sistinfo\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}