Manual de Lenguaje de Programación I, Manuais, Projetos, Pesquisas de Informática

Baixe Manual de Lenguaje de Programación I e outras Manuais, Projetos, Pesquisas em PDF para Informática, somente na Docsity!

Lenguaje de

Programación I

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C. Curso Lenguaje de Programación I (SP4688) Formato Manual de curso Autor Institucional Cibertec Páginas 143 p. Elaborador Ventura Gonzales, Jorge Enrique y Atúncar Guzmán, José Revisor de Contenidos Morales Flores, Gustavo

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C.

• Presentación Índice
• Red de contenidos
  • 1.1 Tema 1 : HTML, JSP, Bootstrap y elementos de Script UNIDAD DE APRENDIZAJE 1: HTML, JQUERY, SERVLET, JSP Y JDBC
    • 1.1.1 : Implementación de un proyecto web con Eclipse
    • 1.1.2 : HML y JSP
    • 1.1.3 : Mejora usando Bootstrap
  • 1.2 Tema 2 : Servlet y validaciones
    • 1.2.1 : Arquitectura del Servlet
    • 1.2.2 : Servlet y JSP
    • 1.2.3 : Validaciones con JQuery y Bootstrap
  • 1.3 Tema 3 : JDBC, Aplicaciones Parte I
    • 1.3.1 : Introducción a BD en MySQL – Connection, Class.forName
    • 1.3. 2 : Generar Conexiones a base de datos
    • 1.3. 3 : Operaciones CRUD con DML: Clases PreparedStatement
    • 1.3. 4 : Aplicación de registro
    • 1.3. 5 : Aplicación de mantenimiento I
  • 1. 4 Tema 4 : JDBC, Aplicaciones Parte II
    • 1. 4 2 : Aplicación de listado
    • 1. 4 3 : Aplicación de mantenimiento II
  • 2.1 Tema 5 : Patrón DAO Parte I EXPRESIONES
    • 2.1.1 : Patrones de diseño de software
    • 2.1.2 : Patrón DAO con SQL Server
    • 2.1.3 : Aplicación Listado
  • 2.2 Tema 6 : Patrón DAO Parte II, Sesiones web y EL
    • 2.2.1 : Lenguaje de expresiones
    • 2.2.2 : Aplicación Mantenimiento
    • 2.2.3 : Sesiones web
    • 2.2. 4 : Aplicación de Logueo
  • 3.1 Tema 7 : JSTL, Custom Tag, Display UNIDAD DE APRENDIZAJE 3: ETIQUETAS, JSTL, TRANSACCIONES, AJAX Y LISTENERS
    • 3.1.1 : JSTL y Librerías
    • 3.1.2 : Aplicación Listado con JSTL
    • 3.1.3 : Creación de etiquetas personalizadas (Custom Tag)
    • 3.1.4 : Creación de etiquetas personalizadas con parámetros
    • 3.1.5 : Etiquetas y librerías para listados (Display Tag, Data Table)
  • 3.2 Tema 8 : Transacciones en Web
    • 3.2.1 : Implementado Listeners
    • 3.2.2 : Transacciones con JDBC
    • 3.2.3 : Aplicación Ajax y Transacción
• Bibliografía

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN

Presentación

El presente curso, forma parte de los cursos orientados a la programación y se dicta en la carrera de Computación e Informática. El curso brinda un grupo de conceptos, herramientas, buenas prácticas de software y librerías del lenguaje Java que permiten a los estudiantes aplicarlas en la creación de software orientado a la web. El contenido de este manual es de carácter académico y su alcance es servir como referencia para los ejercicios a realizar durante el curso, de acuerdo con el sílabo, por lo cual no cubre a detalle todos los temas/técnicas que se pueden aplicar en las distintas sesiones. El manual para el curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de ellas, se hallarán los logros que debe alcanzar, así como, los contenidos, temáticos. Asimismo, encontrará las actividades que deberá desarrollar en cada sesión, que le permitirán reforzar lo aprendido en la clase. El presente curso es práctico: consiste en desarrollar una aplicación web usando tecnología Java principalmente. En primer lugar, se inicia con creando prototipos usando Html5, Bootstrap, JavaScript, JQuery y JQuery Validator; luego continuamos creando programas utilizando la tecnología de Servlet y JSP; seguimos ahora aplicando conceptos más avanzados como patrones de diseño de software, sesiones en la web. Finalmente se desarrollan componentes reutilizables mediante TLD y CustomTag y concluimos con el uso de transacciones web, uso de Ajax, JQuery Avanzado y Listeners para una correcta gestión de datos en los diferentes ámbitos de las aplicaciones web con Java.

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN HTML, JQUERY, SERVLET, JSP Y JDBC

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, el alumno implementa una aplicación Java Web que utilice las

tecnologías JQuery, JSP y Servlet con base de datos.

TEMARIO

1.1 Tema 1 : HTML, JSP, Bootstrap y elementos de Script 1.1.1 : Implementación de un proyecto web con eclipse 1.1. 1.1.

HTML y JPS Mejora usando Bootstrap 1.2 Tema 2 : Servlets y validaciones 1.2.1 : Arquitectura del Servlet 1.2. 1.2.

Servlet y JSP Validaciones con JQuery y Bootstrap 1.3 Tema 3 : JDBC, Aplicaciones Parte I 1.3.1 : Introducción a BD en MySQL – Connection, Class.forName 1.3. 2 : Generar Conexiones a base de datos 1.3. 3 : Operaciones CRUD con DML: Clases PreparedStatement 1.3. 4 : Aplicación de registro 1.3. 5 : Aplicación de mantenimiento I

1. 4 Tema 4 : JDBC, Aplicaciones Parte II 1. 4. 1 : Operaciones CRUD con Procedimientos Almacenados: Clases CallStatement y ResultSet 1. 4. 2 : Aplicación de listado 1. 4. 3 : Aplicación de mantenimiento II

ACTIVIDADES PROPUESTAS

 Los alumnos resuelven ejercicios usando Html5, JQuery y JQuery Validator para

aplicar validaciones en los formularios de entrada.

 Los alumnos implementan una aplicación web JSP con base de datos MySQL para

las operaciones de registrar y listar.

UNIDAD

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C. 1.1. HTML, JSP, BOOSTRAP Y ELEMENTOS DE SCRIPT

1.1.1. Implementación de un proyecto web con Eclipse

En la actualidad existen diversos IDE para poder programar en java, pero para poder trabajar adecuadamente se recomienda el uso del IDE Eclipse. "Si se quiere algo más potente, una buena opción es Eclipse. Eclipse fue desarrollado primeramente por IBM, aunque actualmente es un IDE de código abierto desarrollado y mantenido por la Fundación Eclipse" (Moreno, 2014, p66). Para implementar un proyecto web en eclipse, se necesitará que IDE soporte diseño web; para ello, descargaremos Eclipse versión EE (Enterprise Edition), de acuerdo con nuestro sistema operativo. Figura 1 : Página oficial de Eclipse Adaptado de Packages [Fotografía], por Eclipse, 2023, eclipse.org (https://www.eclipse.org/downloads/packages/) Bastará con descargar la opción “portable”, descomprimir y ejecutar. No olvidar, que se debe indicar la carpeta de trabajo (Workspace). En esta carpeta, se guardará la configuración necesaria. Los workspace son importantes para el buen desarrollo de un proyecto en eclipse. "Workspaces (espacios de trabajo) de Eclipse son una colección de proyectos, configuraciones y preferencias. Es una carpeta donde Eclipse almacena esta información. Debe crear un espacio de trabajo para comenzar a usar Eclipse" (kulkami, 2018, p14). Una vez iniciado Eclipse, instalar el Servidor de aplicaciones web, que permita desplegar nuestro proyecto y probar su funcionalidad, para ello utilizaremos Apache Tomcat. Figura 2 .- Página oficial de Apache Tomcat Adaptado de Apache Tomcat [Fotografía], por Tomcat, 2023, tomcat.apache.org (https://tomcat.apache.org/)

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C. Creando un proyecto web Usamos el menú File y la opción Dynamic Web Proyect Especificamos el nombre del proyecto y verificamos el destino de ejecución. Figura 6 : Creando un nuevo proyecto web dinámico, usando el servidor instalado Adaptado de Elaboración Propia Una vez finalizado, se muestra la estructura del proyecto. Figura 7 : Estructura de un proyecto web dinámico en la IDE Eclipse Adaptado de Elaboración Propia

Exportando e importando

Los proyectos web desarrollados en Eclipse EE, se pueden exportar e importar, utilizando el formato comprimido especial .WAR. Figura 8 : Importar / Exportar proyectos Adaptado de Elaboración Propia Carpeta para los archivos Java (paquetes / Clases / archivos de configuración) Carpeta para el contenido web (páginas web / imágenes / hojas de estilo / etc.)

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN Verificando que se activen opciones como exportar los archivos fuente (código Java) y la configuración del servidor. Figura 9 :Opciones para exportar el proyecto Adaptado de Elaboración Propia

1.1.2. HTML y JSP

HTML, siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML), para la definición de contenido de una página web, como texto, imágenes, videos, entre otros. Es muy importante tener presente la analogía que hace Prescott sobre la importancia de HTML. "Si lo comparamos con una casa, HTML serían los cimientos, y el resto serían los ladrillos. Por eso, es muy importante dominar HTML antes de pasar a trabajar con otros lenguajes de programación más complejos como JavaScript" (Prescott, 2015, p3). JSP es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a desarrollar páginas web en Java. JSP es un lenguaje multiplataforma, creado para ejecutarse del lado del servidor. Además, JSP fue desarrollado por Sun Microsystems. Como lo indica Zambon y Sekler (2007) afirman que “JSP es una tecnología que le permite agregar contenido dinámico a las páginas web. Sin JSP, siempre tiene que actualizar a mano la apariencia o el contenido de las páginas HTML estáticas sin formato” (p.2). En eclipse se pueden utilizar los dos tipos de páginas:

• Páginas HTML. Páginas diseñadas con el lenguaje HTML.
• Páginas JSP. Páginas con contenido dinámico, con soporte JAVA. Ejemplo, creando la página demo.jsp Paso 1. En la carpeta WebContent del proyecto, hacemos clic derecho y seleccionamos JSP File.

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN La página se visualizará en una ventana interna. Figura 14 : demo.jsp en modo edición y ejecución Adaptado de Elaboración Propia Se puede realizar la ejecución en un navegador, copiando el URL de la ventana interna y pegando en un navegador o estableciendo el destino. Figura 15 : Cambiando la salida de visualización Adaptado de Elaboración Propia Figura 16 : La página demo.jsp ejecutada en un navegador Adaptado de Elaboración Propia

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C. Repaso de etiquetas HTML HTML es el lenguaje usado para escribir las páginas web, describe la estructura y el contenido usando solo texto. Los archivos así creados son guardados con la extensión de archivo HTM o HTML. Su estructura se compone de etiquetas o tags, entre las cuales van insertados los diferentes elementos que componen la página como son los bloques de texto, scripts y la ruta, a la ubicación de archivos externos como imágenes y otros archivos multimedia. "HTML contiene instrucciones especias que hacen que el texto pueda enlazar con otro contenido de Internet. Estos marcadores se suelen llamar hipervínculos y son muy importantes en la composición de la red, si no fuera por ellos, esta no podría existir" (Prescott, 2015, p3), Es más ligero al ser más sencillo y simple el código, lo que permite que las páginas escritas en este lenguaje carguen más rápido en el navegador. Si aún no fuera suficiente, introduce infinidad de opciones que hasta ahora estaban vedadas a las páginas web, como insertar directamente video (no flash), música y casi cualquier elemento. Formulario Es el contenedor principal donde se encuentran los controles que utilizaremos para ingresar información referente a una entidad de un sistema. “El elemento HTML form (

) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web” (Mozilla, 2022). Parámetros de la etiqueta FORM:  action : sirve para indicar a dónde enviaremos los datos introducidos en los campos del formulario, un destino determinado como: servlet, jsp, etc.  method : este atributo indica el modo de transmisión de los datos. El modo GET utiliza la dirección URL para pasar los valores introducidos en los campos del formulario, da como resultado una url, como: www.plataforma.com/enviar.jsp?Apellido=Lara&Nombre=Luis. El modo POST envía los datos como parte de la entrada estándar (no visible en la url).  name : identifica el nombre del formulario, este nombre facilita identificar el formulario desde el script.  target : indica la ventana de destino diferente a la del envío de los datos.  accept-charset : especifica el juego de caracteres que el servidor utiliza para gestionar los datos del formulario.  autocomplete : puede ser ON u OFF. Para activar el autocompletado de datos del formulario. Etiqueta INPUT Es la etiqueta más utilizada y también la que presenta más opciones. El atributo TYPE le permite indicar la clase de entrada de datos. El valor predeterminado es TEXT y representa una línea de entrada de datos. Otros valores que puede adoptar el atributo TYPE de la etiqueta INPUT son: •Password Representa una entrada de datos de texto que se visualizan asteriscos, pero al enviarse se envían los datos reales, el dato introducido en el campo se asigna al atributo value.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C. CHECKED Para indicar si el elemento está seleccionado por defecto, solo se utiliza en algunos tipos. PLACEHOLDER Texto que sirve de información o guía al usuario y desaparece al pulsar dentro del campo. Anteriormente, este efecto se creaba con JavaScript. DISABLED Es un valor booleano que indica que el elemento está desactivado, con lo cual no admite entrada de datos. READONLY Valor booleano que indica que el campo no se puede modificar, es solo lectura. FORM ENCTYPE Indica el modo de envío de los datos. FORM ACTION Es la dirección url que se utiliza al activar el elemento. FORM NOVALIDATE Es un valor booleano que indica que el formulario no se valida antes de enviarse. FORM TARGET Ventana del destino del formulario. DISABLED Es un valor booleano que indica que el elemento está desactivado, con lo cual no admite entrada de datos. HEIGHT Altura del campo en cuestión. WIDTH Anchura del campo en cuestión. SIZE Indica la cantidad de caracteres que se pueden introducir en el campo. MAX Valor máximo que se puede entrar en el elemento de datos. MIN Valor Mínimo que se puede entrar en el elemento de datos. MAXLENGTH Longitud máxima de la entrada de datos. LIST Es un identificador de una lista que se define con DATALIST. MULTIPLE Valor booleano que indica que se permite la selección de valores múltiples. NAME Nombre que identifica al campo de datos. PATTERN Expresión regular que se utiliza para validar entradas de datos. Este atributo permite hacer validaciones muy complejas y utilizado correctamente, puede ahorrarse muchas líneas de código. MULTIPLE Valor booleano que indica que se permite la selección de valores múltiples. Etiqueta TEXTAREA Se pueden crear áreas de texto (en columnas y filas), para que el usuario pueda insertar contenido donde requiere gran cantidad de información. A diferencia de los input de tipo text, en los textarea el usuario puede incluir saltos de línea. Con los atributos rows y cols , indica la cantidad de filas y columnas que tendrá el control. Etiqueta FIELDSET Sirve para agrupar los elementos. Se utiliza con su respectiva etiqueta de cierre y crea un recuadro que rodea a los elementos de formulario colocados dentro de ella. Etiqueta LEGEND Sirve para nombrar o etiquetar un grupo creado con FIELDSET. Añade simplemente una nota aclaratoria sobre qué tipo de información se está agrupando en el recuadro.

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN Si desea profundizar un poco más en el uso de las etiquetas de HTML puedes visitar la página oficial de Developer Mozilla: https://developer.mozilla.org/es/docs/Web/HTML

Ejemplo 01 :

Diseñamos la página listado_cursos.jsp Figura 17 : Ejemplo del uso de etiquetas para tablas Adaptado de Elaboración Propia <%@ page language= "java" contentType= "text/html; charset=ISO- 8859 - 1" pageEncoding= "ISO- 8859 - 1" %>

Cursos Disponibles

IES CIBERTEC ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN Ejemplo 03: Diseñamos la página cursos.jsp Figura 18 : Ejemplo del uso de etiquetas de formulario y tablas Adaptado de Elaboración Propia <%@ page language= "java" contentType= "text/html; charset=ISO- 8859 - 1" pageEncoding= "ISO- 8859 - 1" %>

Registrar Cursos

Código

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN IES CIBERTEC S.A.C.

Nombre

Nivel

Profesor

Id	Código	Nombre	Nivel	Profesor	Acciones
1	2414

Id	Código	Nombre	Nivel	Profesor	Acciones
1	2414	Seguridad de Aplicaciones	Intermedio	Jose Gomez
2