Aplicación web con php | como crear una aplicación web con javascript

¿Qué es JavaScript y cómo se utiliza?

Introducción a JavaScript

• JavaScript, abreviado como JS, es un lenguaje de programación interpretado que forma parte del estándar ECMAScript. Se utiliza principalmente en el lado del cliente para mejorar la interfaz de usuario y crear aplicaciones web dinámicas.

• Desde 2012, todos los navegadores soportan una versión de JavaScript. Su sintaxis es similar a otros lenguajes de programación, aunque existen diferencias significativas.

Evolución y Popularidad

• Gracias al conocimiento de James, JavaScript se integró en la capa del servidor, creando un entorno programable tanto en el cliente como en el servidor. Esto ha llevado al desarrollo de frameworks populares como Angular, React y Vue.

• JetBrains ha clasificado recientemente a JavaScript como uno de los lenguajes más populares del mundo.

Creación de una Aplicación Web con JavaScript

Proyecto: Club de Empleados

• En este video se desarrollará una aplicación web para gestionar un club de empleados utilizando JavaScript. Se comenzará creando un documento HTML y luego se intercambiará información con una aplicación PHP y MySQL.

• Al final del proceso, se realizarán ajustes estéticos para que la aplicación sea presentable.

Requisitos Previos

• Es necesario tener conocimientos básicos de HTML5 para seguir el tutorial. El video también invita a comparar con otros videos sobre Angular, React y Vue.

Importancia del Aprendizaje de JavaScript

Fundamentos Sólidos

• Aprender JavaScript es crucial ya que permite desarrollar aplicaciones no solo web sino también aplicaciones de escritorio utilizando Node.js.

• Conocer bien JavaScript proporciona bases sólidas que facilitan la transición hacia frameworks más complejos sin sentirse limitado por su ausencia.

Experiencia Personal con Frameworks

Desarrollo Inicial

• El presentador comparte su experiencia personal comenzando con conocimientos básicos en JavaScript mientras lidiaba con frameworks como jQuery y Prototype.

Evolución Profesional

• A medida que evolucionaron los frameworks (Angular, Vue), el presentador aprendió a no sentirse intimidado gracias a sus fundamentos en JavaScript.

Conclusiones sobre el Aprendizaje Continuo

Adaptabilidad en Programación

• Los conocimientos adquiridos sobre JavaScript permiten adaptarse fácilmente a nuevos frameworks y tecnologías emergentes sin perder confianza ni habilidades fundamentales.

Preparativos para el Proyecto

• Para comenzar la creación de la aplicación, se establece un entorno adecuado utilizando Visual Studio Code donde se abrirá una carpeta vacía para iniciar el desarrollo.

Creación de una Aplicación Web con JavaScript

Configuración Inicial del Proyecto

• Se inicia la creación de un documento llamado index.html en el escritorio, donde se establece como título "Aplicación".

• Se menciona que se utilizará JavaScript para desarrollar un club de empleados y se presentan las extensiones necesarias para facilitar el proceso.

Herramientas y Extensiones Utilizadas

• Se instalarán varias extensiones:

• Bus 35: Ayuda a completar códigos de Bootstrap.

• Skype Autocomplete: Facilita la escritura rápida de código.

• Live Server: Permite ejecutar el archivo index.html en un navegador automáticamente.

• También se menciona la extensión Palin Night, que cambia la apariencia del editor Visual Studio, aunque no es obligatoria.

Creación y Ejecución del Documento HTML

• Se guarda el archivo con un saludo inicial "Hola Biblioteca" y se utiliza Live Server para abrirlo en el navegador, mostrando actualizaciones automáticas al guardar cambios.

• Se integra Bootstrap desde su sitio web oficial, comenzando por copiar fragmentos de CSS necesarios para estilizar los elementos HTML.

Desarrollo de la Interfaz Gráfica

• Se crea un botón simple como prueba para verificar que Bootstrap está funcionando correctamente. El botón tiene etiquetas básicas como "Hola Biblioteca".

• Se añade un contenedor (container) a la interfaz gráfica, donde se incluirán formularios y tablas.

Estructura del Formulario y Tabla

• Dentro del contenedor, se organiza una fila (row) con columnas (col) utilizando clases de Bootstrap.

• Se define un formulario con campos específicos (5 y 7), además de crear una tabla básica que incluye columnas para nombre, correo electrónico y acciones (editar/borrar).

Ajustes Finales a la Interfaz

• La tabla muestra datos estáticos como ejemplo. Además, se añaden botones para editar o borrar registros.

• Finalmente, se realizan ajustes estéticos en la parte superior de la interfaz para mejorar su presentación visual.

Creación de un Formulario para Empleados

Diseño del Formulario

• Se inicia la creación de un formulario en la vista empleados, específicamente en la sección de formularios, donde se establece el cuerpo del formulario.

• Se define que el formulario no enviará datos a ningún lado al presionar el botón de agregar registro, ya que no se está utilizando tecnología para recibir los datos. Se opta por JavaScript con javascript:void(0) como acción.

• Se agrega un elemento <input> al formulario, comenzando con el campo para ingresar el nombre del empleado. Se establece un placeholder "nombre del empleado" y se define su tipo como texto.

Campos Adicionales y Botón

• Se elimina una indicación innecesaria y se asegura que tanto el label como el input tengan el mismo identificador "nombre" para facilitar la referencia.

• Se añade otro campo al formulario para capturar el correo electrónico del empleado, estableciendo también su placeholder correspondiente.

• A pesar de tener los campos necesarios, inicialmente no hay botón para enviar información. Por lo tanto, se crea un botón tipo submit etiquetado como "agregar empleado".

Estilo y Funcionalidad

• El botón es estilizado con clases Bootstrap para mejorar su apariencia visual; se cambia a verde usando btn-success.

• Concluida la interfaz básica HTML del formulario, se procede a integrar JavaScript dentro de una etiqueta <script> antes del cierre del body.

Creación de la Aplicación

• Se declara una variable llamada aplicación que inicializa una nueva función destinada a ejecutar instrucciones específicas relacionadas con los datos ingresados.

• La función creada permitirá insertar registros en el DOM cuando sea invocada. Esto implica manipular elementos directamente desde JavaScript.

Referencia a Elementos y Funciones

• La aplicación utilizará una referencia denominada empleados que apunta a un contenedor específico en el documento HTML donde se insertarán los registros.

• Al crear esta referencia mediante document.getElementById, se facilita la inclusión y manipulación de nuevos elementos dentro del contenedor designado.

Este resumen proporciona una visión clara sobre cómo construir un formulario básico utilizando HTML y JavaScript, destacando las decisiones clave tomadas durante su desarrollo.

Creación de una Aplicación Web Básica

Inicialización de Datos

• Se inicia la creación de una función estática para manejar datos, comenzando con la inicialización de variables vacías.

• Se menciona un error al intentar cortar y pegar código, lo que indica que se deben ajustar ciertos elementos en el proceso.

Estructura HTML y Visualización

• Se utiliza innerHTML para incrustar datos en el cuerpo del documento HTML, específicamente en el <tbody>.

• Al actualizar la aplicación, no se muestra información debido a que los datos aún no están incrustados correctamente.

Ejecución del Método Leer

• Se ejecuta el método leer, lo que permite visualizar registros en la aplicación por primera vez.

• A continuación, se planea crear un método para agregar nuevos registros mediante la recolección de información desde inputs.

Recolección de Información del Formulario

• Se define un nuevo método llamado agregar, donde se imprimen valores como nombre y correo.

• La obtención de estos valores se realiza a través del DOM utilizando document.getElementById.

Envío y Manejo de Datos

• Los valores recolectados (nombre y correo) son impresos cuando se envía el formulario.

• El método agregar es invocado al enviar el formulario, permitiendo así la recolección efectiva de datos.

Resultados y Conexión con PHP

• Al probar la funcionalidad, los datos ingresados aparecen en la consola, confirmando su correcta recolección.

• Se menciona la intención de utilizar un servicio web PHP para gestionar los datos enviados desde el formulario.

¿Cómo se conecta una aplicación JavaScript a una base de datos?

Recepción y manipulación de datos en PHP

• Se explica cómo un archivo PHP se comunica con una base de datos específica, insertando, leyendo y modificando registros en la tabla "empleados".

• Se menciona la importancia de las cabeceras para recibir datos mediante el método GET, así como el uso del formulario que envía información usando el método POST.

• La conexión al servidor se establece utilizando localhost y credenciales específicas (usuario y contraseña), permitiendo realizar consultas sobre los empleados.

• El script permite no solo consultar, sino también insertar, actualizar y borrar registros en la base de datos según los parámetros enviados.

• Se destaca que este documento es útil para simular aplicaciones y puede ser utilizado con diferentes lenguajes como Python o Go.

Estructura del código y solicitudes

• El script PHP actúa como un intermediario que recibe, manipula y altera información en MySQL; lo crucial es su capacidad para recibir datos a través de las cabeceras.

• Se inicia la creación de una URL para acceder a la aplicación localmente, específicamente a "localhost/empleados", donde se leerán los datos antes de insertarlos.

• En la función "leer", se utiliza una solicitud directa a la URL para obtener información en formato JSON desde el servidor.

• La respuesta recibida será procesada e impresa en consola; esto incluye manejar errores potenciales durante la solicitud con un bloque catch.

• La función está diseñada para mostrar los datos obtenidos desde el API directamente en consola, facilitando así su visualización.

Visualización de datos

• Al actualizar los datos consultados, estos deben reflejarse correctamente en una tabla HTML; el objetivo es mostrar registros organizados por filas y columnas.

• Una vez consultada la información, esta debe ser alterada adecuadamente dentro del cuerpo de la tabla (tbody), asegurando que todos los registros sean visibles.

¿Cómo se realiza un mapeado de datos en una tabla?

Proceso de Mapeo de Datos

• Se inicia el proceso de mapeo, donde se recorrerán los datos que se mostrarán. Se menciona la necesidad de crear una función para recolectar y mostrar la información.

• La información llega en formato de empleado y se utilizará un índice para manejar los datos en forma de array. Se establece que los datos serán concatenados para su visualización.

• Se utiliza la etiqueta <tr> para imprimir cada fila correspondiente a un registro. A continuación, se añade la etiqueta <td> para mostrar los campos específicos del empleado, como ID y nombre.

• Los campos a imprimir incluyen: ID, nombre, correo y acciones. Se explica cómo estos datos son organizados dentro del HTML utilizando las etiquetas adecuadas.

• Una vez que los datos están estructurados con las etiquetas necesarias, se procede a devolverlos en la tabla correspondiente. Esto permite visualizar correctamente la información recolectada.

Inserción de Datos

• Después de desplegar la información, el siguiente paso es insertar nuevos registros mediante un método POST. Esto asegura que cualquier nuevo registro aparezca directamente en la tabla.

• Para realizar esta inserción, se utilizará una función específica que maneja solicitudes HTTP. Se menciona el uso del objeto fetch para enviar los datos al servidor.

• La respuesta esperada será en formato JSON y debe incluir las llaves necesarias para procesar correctamente la solicitud desde el cliente hacia el servidor.

• Es importante cambiar algunos nombres dentro del código para evitar confusiones entre diferentes variables utilizadas durante el proceso de inserción.

• Al finalizar la inserción, se mostrará un mensaje en consola confirmando que los datos han sido insertados exitosamente. Esto ayuda a verificar si todo ha funcionado como se esperaba.

Envío de Parámetros

• Al enviar parámetros con el método POST, es crucial especificar tanto el método como el cuerpo del envío. Esto incluye definir qué tipo de dato estamos enviando al servidor.

• El cuerpo del envío debe estar estructurado como JSON e incluir todos los valores necesarios (nombre y correo). Estos valores son esenciales para completar correctamente la inserción en base de datos.

• Los valores enviados deben ser asignados adecuadamente dentro del objeto JSON antes mencionado; esto garantiza que PHP pueda recibirlos sin problemas durante su procesamiento.

• La estructura final incluye una URL específica junto con parámetros adicionales necesarios para indicar al servidor qué acción realizar (en este caso, insertar).

• Finalmente, después de recibir una respuesta exitosa del servidor sobre la inserción realizada, es posible actualizar automáticamente los registros visibles mediante otra función llamada leer.

Implementación de Funciones en la Aplicación

Envío de Datos y Actualización de Registros

• Se envían datos a través de una URL utilizando el método POST, donde se imprimen en consola las acciones de inserción y actualización en la tabla.

• Se realiza una prueba añadiendo un nuevo registro con los nombres "Pedro" y "Marie Simmons", confirmando que los datos se insertan correctamente.

Modificación de Interfaz: Botones para Editar y Borrar

• Se discute la necesidad de agregar botones para editar y borrar registros, inicialmente omitidos por su función específica.

• Se planea crear un grupo visualmente presentable para estos botones, asegurando que no generen errores al ser implementados.

Implementación del Código para Botones

• Se ajusta el código eliminando información innecesaria y asegurándose de usar comillas simples para evitar problemas.

• Los botones son actualizados con texto correspondiente ("Editar" y "Borrar") mientras se prepara la lógica detrás de cada acción.

Lógica del Botón Borrar

• Al presionar el botón "Borrar", se debe ejecutar una función que elimine el registro seleccionado; esto requiere atención especial al código.

• La implementación incluye alertas que confirmen la acción antes de proceder a eliminar un registro específico.

Ejecución Final y Pruebas

• La función aplicación.borrar es llamada con el ID del empleado como parámetro, permitiendo así la eliminación efectiva del registro.

• Tras realizar pruebas, se confirma que los registros pueden ser borrados correctamente, mostrando IDs específicos en consola.

¿Cómo implementar funciones de borrar y editar en una aplicación?

Implementación de la función de borrado

• Se envía una solicitud a la URL con un parámetro "borrar" para eliminar un registro específico.

• La función de lectura actualiza la tabla después de que se borra el registro, asegurando que los datos reflejen los cambios realizados.

• La acción de borrado se confirma al enviar correctamente la solicitud a la base de datos, eliminando el registro deseado.

Implementación de la función de edición

• Para editar, se utiliza un control similar al del borrado, pero cambiando el parámetro a "editar".

• Al hacer clic en el botón "editar", se abre un modal que permite al usuario modificar los datos del registro seleccionado.

Uso del modal para recolección de datos

• El modal contiene un formulario que facilita la actualización directa sin necesidad de seleccionar valores manualmente.

• Se construye el modal utilizando Bootstrap, lo cual simplifica su implementación y mejora la experiencia del usuario.

Activación y referencia del modal

• Se crea una referencia al modal mediante JavaScript para poder abrirlo cuando sea necesario.

• Al presionar el botón "editar", se activa el modal mostrando así las opciones para actualizar información.

Modificación del formulario dentro del modal

• Se elimina un botón por defecto ya innecesario y se personaliza el formulario dentro del modal para incluir campos relevantes como nombre y otros datos necesarios.

Creación y Edición de Formularios en Aplicaciones

Proceso de Edición del Formulario

• Se inicia la edición del formulario, destacando que los datos serán diferentes a los que se encuentran en el formulario original. Se planea crear un nuevo ID para el formulario.

• Se establece el tipo de input como "text" y se modifica el botón "save" a "editar". Además, se traduce "close" al español como "cerrar".

• Se menciona la necesidad de actualizar el formulario y se verifica que todos los botones estén correctamente etiquetados.

Adaptación del Formulario Existente

• El formulario existente se copia para adaptarlo a las nuevas necesidades, eliminando partes innecesarias y asegurándose de incluir todos los elementos requeridos.

• Se busca adaptar el contenido del modal, asegurando que contenga todos los inputs necesarios para la actualización.

Implementación de Funcionalidades

• Se cambia un botón a "submit", indicando que será utilizado para enviar información. También se crea una función básica para manejar la actualización.

• La función creada permite realizar una instrucción simple al presionar editar, aunque aún no recupera datos específicos.

Recuperación y Consulta de Datos

• Se discute cómo recuperar datos cuando se presiona editar. Es esencial referenciar correctamente los campos del nuevo formulario creado.

• Los campos necesarios (nombre y correo electrónico) son identificados y preparados para recibir datos desde la aplicación principal.

Validación de Datos Recibidos

• Al consultar datos, se asignan valores temporales a los campos editables para verificar si la información está llegando correctamente desde la base de datos o servicio correspondiente.

• Finalmente, al ejecutar el proceso completo, se confirma que los datos correctos son mostrados en el modal, validando así que la funcionalidad está operativa.

¿Cómo actualizar datos en una aplicación usando JavaScript?

Proceso de recuperación y actualización de datos

• Se inicia el proceso recuperando información de un usuario, en este caso "Óscar", utilizando su correo electrónico. Se accede a los datos mediante un índice cero.

• Los datos se imprimen en la posición cero, mostrando el valor del nombre. Esto permite utilizar los tres elementos necesarios para la actualización.

• La información recuperada debe reflejarse en una tabla al presionar el botón de actualizar. Se asegura que todos los datos estén correctamente almacenados antes de proceder.

• Al abrir la ventana modal, se implementa la funcionalidad para recuperar información previamente ingresada y realizar cambios necesarios.

• Se copian fragmentos de código previos para facilitar la recolección de información, asegurando que se envíe correctamente a la aplicación.

Implementación del método POST para actualizaciones

• El enfoque cambia a un método POST para enviar actualizaciones en lugar de inserciones. Esto implica modificar el mensaje que confirma si los datos han sido actualizados exitosamente.

• Al recibir una respuesta positiva tras la actualización, se indica que los "datos han sido actualizados" y no insertados como anteriormente.

• Se implementa un modelo que oculta automáticamente el modal después de actualizar los datos, permitiendo ver las modificaciones directamente en la tabla.

Validaciones y mejoras en la interfaz gráfica

• Durante las pruebas, se observa cómo los cambios realizados son visibles inmediatamente al actualizar. Esto incluye editar nombres y otros campos relevantes.

• Se discuten ajustes adicionales como evitar que el usuario modifique ciertos campos (como ID), mejorando así la seguridad y usabilidad del formulario.

• En cuanto a diseño, se establece que algunos campos sean solo lectura (read-only), lo cual es crucial para mantener integridad en los datos ingresados por el usuario.

Manejo de errores y finalización del proyecto

• Se implementan validaciones simples para asegurar que no se puedan enviar formularios vacíos; esto mejora significativamente la experiencia del usuario al interactuar con el sistema.

• A medida que se realizan pruebas finales, se verifica cómo responde el sistema ante entradas incorrectas o incompletas, garantizando robustez en su funcionamiento general.

• El presentador concluye enfatizando que esta aplicación es solo una base; menciona otras tecnologías como Angular o Vue.js como alternativas viables para desarrollar aplicaciones similares sin necesidad de frameworks complejos.