RESUMEN PROGRAMACION WEB.pdf

PROGRAMACIÓN WEB MODULO 4 Unidad 1. Estructura de un proyecto web La estructura de un proyecto web se puede diseñar de diferentes maneras, pero todas las páginas webs utilizan: - el mismo protocolo  HTTP - el mismo lenguaje de interfaz de usuarioHTML, CSS y JavaScript y es posible acceder a ella...

PROGRAMACIÓN WEB MODULO 4 Unidad 1. Estructura de un proyecto web La estructura de un proyecto web se puede diseñar de diferentes maneras, pero todas las páginas webs utilizan: - el mismo protocolo  HTTP - el mismo lenguaje de interfaz de usuarioHTML, CSS y JavaScript y es posible acceder a ellas mediante todos los navegadores webs. Tema 1. Protocolo HTTP (protocolo de transferencia de hipertexto) Un proyecto web es una aplicación cliente-servidor a la que se puede acceder mediante un navegador web si se utiliza el protocolo HTTP. Aplicaciones cliente-servidor Una aplicación cliente-servidor es un tipo de arquitectura en la que existen: proveedores de un servicio particular los servidores o servers solicitantes de un servicio particular los clientes o clients Pueden existir múltiples servidores que brindan un mismo servicio, como así también múltiples clientes que solicitan dichos servicios. En general, dado que un servidor puede responder a diferentes clientes, se tiene una cantidad superior de clientes que de servidores. Los clientes son los navegadores webs que consumen los datos (o están en conexión) con los servidores. SERVIDORES En los servidores, se ejecutan aplicaciones que pueden estar compuestas por uno o más lenguajes de programación. CLIENTES En los clientes, se ejecutan scripts (programados en lenguaje JavaScript o alguna biblioteca que se desarrolle en este lenguaje, por ejemplo, jQuery). Estos scripts toman acciones de los clientes (usuarios que navegan la web) y responden conforme se hayan desarrollado. Figura 1: Componentes de una arquitectura cliente-servidor En la comunicación cliente-servidor, los clientes, mayormente, son siempre los que empiezan la comunicación al solicitar un recurso u operación específica. Este pedido puede ser: - la solicitud de una página estáticaen la que el cliente no puede interactuar; o - la de una página dinámicael cliente interactúa con el servidor intercambiando datos Luego, el servidor responde acorde a lo que solicitó el cliente. 1 PROGRAMACIÓN WEB MODULO 4 Figura 2: Flujo de una comunicación cliente-servidor Navegadores webs (browsers) Son aplicaciones que permiten realizar solicitudes a servidores (cumpliendo la función de cliente), y son capaces de comprender lo que el servidor responde y mostrarlo en pantalla. Cuando se desarrollan aplicaciones webs, es muy importante saber cuál es el navegador que más se utiliza en el mercado, con el fin de asegurar que nuestra aplicación funcione para la mayoría de los usuarios. La gran mayoría de los navegadores webs cuentan con una potente herramienta llamada consola, en la que se pueden: - ver las propiedades del documento que se está navegando, - inspeccionar sus elementos, y - encontrar errores en la programación de los scripts. Protocolo HTTP (protocolo de transferencia de hipertexto) El protocolo HTTP establece reglas que se pueden utilizar para la comunicación entre clientes y servidores; - el cliente realiza una petición al servidor, - mientras que el servidor puede: o proveer recursos en HTML u otro protocolo, o realizar una acción determinada en nombre del cliente, siempre devolviendo una respuesta (al cliente) que se relacione con su petición. A cada recurso que el servidor ofrece mediante HTTP, se puede acceder utilizando una URL. Por ejemplo, una URL típica sería la siguiente: http://www.example.com/index.html, la cual indica: http://www.example.com/index.html Protocolo Nombre para identificar el servidor Nombre de un archivo Este protocolo define diferentes métodos que le indican al servidor la acción que se quiere realizar sobre cada recurso: Solicita una copia de un determinado recurso. GET Este método solo obtiene datos, sin ningún otro efecto. Cada vez que accedemos a una página web, utilizamos get. Solicita que se almacene o procese la información que se envía en la solicitud al servidor. Mientras get obtiene información del servidor, post envía la información para que la POST procese o almacene. En muchos casos, utilizamos post cuando se realiza un login o inicio de sesión, en el que 2 PROGRAMACIÓN WEB MODULO 4 enviamos nuestro usuario y contraseña al servidor para ser autenticados. PUT Solicita modificar un recurso ya existente o, si no existe, solicita su creación. Similar a post, en este método también se envía información al servidor. DELETE Elimina un recurso especificado en la URL. Este protocolo también define estados (status codes) de la petición que realizamos al servidor: Los que empiezan con el número dos, indican que la acción solicitada ha sido 2xx Éxito recibida, entendida y aceptada. Errores de Los que empiezan con el número cuatro advierten que el error parece ser 4xx cliente originado por el cliente. Errores de Los que empiezan con el número cinco se utilizan para indicar que el error 5xx servidor parece ser originado por el servidor. Evolución del protocolo HTTP Con el constante avance de la digitalización y un mayor uso de sistemas webs, este protocolo fue evolucionando hasta el actual HTTPS (la S final indica seguro). HTTPS utiliza una combinación de dos protocolos de comunicación: HTTP + SSL/TLS que hace que cualquier tipo de información que se transmita en la red se cifre y nadie pueda acceder a ella, únicamente el navegador y servidor web.  Para ello, es necesario que tu web tenga instalado un certificado SSL. Tema 2. Introducción a HTML (HyperText Markup Language) El lenguaje HTML es el estándar para crear páginas y aplicaciones webs. Utiliza elementos HTML que un navegador puede comprender y transformar en elementos multimedia. Cada elemento HTML tiene una función específica y se representa mediante una etiqueta o tag. 3 PROGRAMACIÓN WEB • <!DOCTYPE html> • <title> </title> • <meta> • <link> • <img> • <audio> </audio> • <video> </video> • <canvas> </canvas> MODULO 4 • <header> </header> • <div> </div> • <section> </section> • <footer> </footer> • <h1>......<h6> </h1>......</h 6> • <b> </b> • <i> </i> • <u> </u> • <br> • <p> </p> • <cite> </cite> • <code> </code> • <label> </label> • <input> • <Input type=”checkbox”> • <Input type=”radio”> • <textarea> </textarea> • <select> </select> • <button> </button> 4 • <a> </a> • <button> </button> • <table> </table> • <thead> </thead> • <tr> </tr> • <th> </th> • <tbody> </tbody> • <td> </td> • <tfoot> </tfoot> PROGRAMACIÓN WEB MODULO 4 DE ENCABEZADO Son etiquetas que definen información interna del documento y no se muestran en el navegador. <!DOCTYPE Define que estamos en presencia de un documento HTML. html> <title> Indica el título del documento HTML. </title> Define metadata del documento. Podemos definir diferentes metadatos: <meta charset="UTF-8"> <meta> <link> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript, Curso de programación Web"> <meta name="author" content=“Pedro Picapiedras”> <meta name="viewport" content="width=devicewidth, initial-scale=1.0"> Juego de caracteres a utilizar en el documento Descripción del documento Palabras claves que el documento va a desarrollar Autor del documento Visualización de la escala zoom a utilizar Carga estilos (CSS) que se utilizarán en el documento, como, por ejemplo: <link rel="stylesheet" href="/mi_hoja_de_estilos.css">. CONTENEDORES Son aquellos que formarán la estructura básica del documento, es decir, harán de contenedor a otros elementos, lo cual permitirá posicionarlos según sea necesario. Representa un contenedor introductorio. Mayormente, lo utilizaremos para mostrar <header> </header> contenidos en la parte superior de nuestra página. Determina secciones individuales dentro del documento y, muchas veces, es la <div> </div> etiqueta que más se utiliza. <section> Permite crear secciones internas; es muy similar a la etiqueta div. </section> <footer> Contenedor que indicaremos al final de nuestra página. </footer> DE REPRESENTACIÓN DE TEXTO Causan diferentes efectos en los textos que visualizamos. Denota un énfasis en el texto (es decir, van cambiando su tamaño); por ejemplo: <h1>Hola Mundo</h1> <h1>......<h6> </h1>......</h6> <h2>Hola Mundo</h2> <h3>Hola Mundo</h3> <b> </b> <i> </i> <u> </u> Mientras menor sea el valor numérico, mayor tamaño tomará el texto. Representa letras en negrita. Letras en cursiva Subrayado 5 PROGRAMACIÓN WEB MODULO 4 Salto de línea <br> Indica un párrafo de texto. Al cierre de esta etiqueta, se realiza un salto de línea. <p> </p> <cite> </cite> <code> </code> <label> </label> El texto será una cita o comentario. Simula el texto como un código de programación. Se comporta como una etiqueta informativa; generalmente, la utilizaremos en nuestros formularios. DE ACCIÓN Esta etiqueta se conoce como link, ya que su funcionalidad es cambiar el documento actual y abrir otro. Ejemplo: <a href=”https://google.com.ar”>Ir a Google</a> El link puede ser externo al servidor en el que estamos consultando o interno, para abrir otra página en él. <a> </a> <button> Grafica un botón para múltiples acciones. </button> MULTIMEDIA Sirven para mostrar contenido multimedia, como, por ejemplo, imágenes, audios, videos. <img> <audio> </audio> <video> </video> <canvas> </canvas> Muestra una imagen en el navegador. Ejemplo: <img src=”/images/logo.jpg”> Sirve para mostrar un controlador de audio y definirlo. Ejemplo: <audio controls> <source src="musica1.ogg" type="audio/ogg"> <source src="cancion2.mp3" type="audio/mpeg"> </audio> Carga un controlador de video y lo reproduce. Ejemplo: <video controls> <source src="pelicula1.mp4" type="video/mp4"> <source src="video2.ogg" type="video/ogg"> </video> Define un lienzo en el que podremos graficar figuras geométricas. DE FORMULARIOS Son un conjunto de elementos que le permiten al usuario ingresar o seleccionar datos. 6 PROGRAMACIÓN WEB <input> <Input type=”checkbox”> <Input type=”radio”> <textarea> </textarea> <select> </select> <button> </button> MODULO 4 Nos permite ingresar textos, números, dirección de e-mail, contraseñas. Ejemplos: <input type=”text” name=”nombre_usuario” value=””> <input type=”password” name=”contrasena” value=””> <input type=”number” name=”edad” value=””> <input type=”email” name=”correo_electronico” value=””> Cajas de selección múltiple Ejemplo: <label>Cuáles son tus colores favoritos</label> <input type=”checkbox” value=”rojo” name=”colores”> Rojo <input type=”checkbox” value=”azul” name=”colores”> Azul <input type=”checkbox” value=”verde” name=”colores”> Verde Cajas de selección simple Ejemplo: <label>Cuáles es tu color favorito</label> <input type=”radio” value=”rojo” name=”colores”> Rojo <input type=”radio” value=”azul” name=”colores”> Azul <input type=”radio” value=”verde” name=”colores”> Verde Ingreso de texto en múltiples líneas Lista de selección múltiple o simple; esta etiqueta se combina con el tag <option>. Ejemplo: <select name=”selector_color”> <option value=”rojo”> Rojo </option> <option value=”verde”> Verde </option> <option value=”azul”> Azul </option> </select> Para permitir múltiples selecciones, se indica la propiedad múltiple dentro de <select>: <select name=”selector_color” multiple=””> Envía los datos del formulario al servidor. Es importante aclarar que debe poseer la propiedad type como submit. <button type=”submit”> Enviar </button> DE TABLAS <table> </table> <thead> </thead> <tr> </tr> <th> </th> <tbody> </tbody> <td> </td> <tfoot> </tfoot> Indicamos que queremos construir una tabla. Indicamos que queremos construir una tabla con un encabezado. Acrónimo de table row (generamos filas). Generamos columnas dentro del head de la tabla. Indicamos que queremos construir el cuerpo de la tabla. Generamos columnas dentro del cuerpo de la tabla. Indicamos que queremos construir el pie de la tabla. 7 PROGRAMACIÓN WEB MODULO 4 Tema 3. Hojas de estilo en cascada (CSS) Permiten dar formato al contenido HTML de una página web. CSS, a diferencia de HTML, no utiliza tags, sino que engloba con llaves los estilos para cada elemento. CSS permite agregar múltiples formatos a cada elemento. Supongamos que tenemos en nuestro documento el siguiente código: <h1> Mi aplicación web </h1> Podemos cambiar el color del texto, la tipografía, el color del fondo y el tamaño de la fuente en una sola declaración: h1{ color: white; font-family: calibri; font-size: 20px; background-color: blue; } Agregar estilos al documento 1. Existen diversas formas de agregar estilos a nuestro documento; una de ellas es agregando las etiquetas <style> y la definición de estilos dentro del propio documento. <!DOCTYPE html> <html> <head> ---- definición de etiquetas de propiedades (title, meta, etc.) <style> h1{ color: white; font-family: calibri; font-size: 20px; background-color: blue; } </style> </head> <body> <h1> Mi aplicación web </h1> </body> </html> 2. Otra forma de agregar estilos es tener un archivo separado. Este archivo debe tener extensión .css y se incluye utilizando la etiqueta <link>: <link rel="stylesheet" href="/mi_hoja_de_estilos.css"> Existen bibliotecas ya creadas que nos permiten tener buenos estilos sin la necesidad de programarlos nosotros. Una de las librerías más difundidas para lograr esto se llama Bootstrap. 8 PROGRAMACIÓN WEB MODULO 4 Tema 4. Arquitectura de las aplicaciones webs, arquetipos y ciclo de vida Las aplicaciones webs tienen la siguiente arquitectura: • Código de servidor. Es un código que se ejecuta y «escucha» solicitudes de clientes remotos, y responde con los recursos y acciones solicitadas. • Código de cliente. Es un código que se envía desde el servidor y se ejecuta en el cliente. Esto incluye el código HTML, el JavaScript y el CSS necesario para mostrar el sitio web. Figura 7: Arquitectura simple de una aplicación web JavaScript JavaScript es un lenguaje (muy utilizado en aplicaciones webs) que permite manejar el comportamiento de lo que es mostrado al cliente. - HTML define qué es lo que se va a mostrar, - CSS determina cómo se va a mostrar HTML, y - JavaScript permite manipular los elementos HTML y CSS o realizar funciones frente a las acciones de los usuarios. Arquetipo Es un patrón o modelo que podemos utilizar para crear aplicaciones del mismo tipo. Los arquetipos permiten crear, de manera automática, las tareas que son comunes a un grupo de aplicaciones. El uso de estas herramientas permite asegurarnos de que estamos cumpliendo con buenas prácticas de desarrollo y crear aplicaciones de manera más rápida. Uno de los arquetipos más utilizados es el «modelo, vista, controlador» (MVC). Este modelo permite dividir las tres funciones más importantes del código de servidor en un idéntico número de capas: • Modelo: contiene lo que se va a grabar en la base de datos para acceder en el futuro. • Vista: es la interfaz de usuario del sistema. Generalmente, está compuesta de archivos HTML, CSS y JavaScript, que se envían al cliente para su interpretación y ejecución. • Controlador: se trata de la lógica de negocio de la aplicación. 9 PROGRAMACIÓN WEB MODULO 4 Las tres capas están relacionadas: - el controlador accede tanto a la vista como al modelo, - mientras que la vista solo tiene acceso directo a los modelos. Unidad 2. Bases de programación Para crear aplicaciones webs, se necesita comprender los conceptos básicos comunes a cualquier tipo de programación, como un entorno de desarrollo, variables, arreglos y matrices. Tema 1. Conceptos generales. Entorno de desarrollo Entorno de desarrollo Un entorno de desarrollo es un conjunto de programas que permiten empezar a codificar un proyecto de software. Crear un entorno de desarrollo es un proceso que varía de acuerdo con el lenguaje que queremos utilizar. Para crear un entorno de desarrollo para PHP, se puede utilizar la aplicación (IDE) NetBeans. Este programa ayuda controlando que el código que escribimos sea correcto y permite manejar librerías y servidores webs de prueba para ejecutar otras aplicaciones. NetBeans es un IDE (interfaz de desarrollo). Tema 2. Variables. Operadores. Estructuras de programación en PHP PHP es un lenguaje de programación de uso general que se adapta especialmente al desarrollo web. El código PHP se procesa en un servidor web mediante un intérprete PHP que se aplica como un módulo. Los códigos PHP: - comienzan con la etiqueta de apertura <?php y - pueden o no estar con su etiqueta de cierre ?>. Podemos intercalar código PHP en nuestros documentos HTML, pero debemos hacer hincapié en un concepto fundamental: cuando PHP se ejecuta, realiza procesos internos dentro del servidor, pero este siempre retornará código HTML a los clientes webs. La instrucción echo permite realizar una salida en el navegador. <?php echo "La suma de 2 + 8 es:".(2 + 10) ?> Variables en PHP PHP es un lenguaje no tipado, esto quiere decir que no debemos indicar las variables durante su creación. Todas las variables deben comenzar con el signo pesos ($). Una variable con un valor asignado (como por ejemplo un número entero) pueda ser cambiada de tipo. $miVariable1 = 23; 10 PROGRAMACIÓN WEB MODULO 4 Operadores en PHP Los operadores se dividen en: Operadores aritméticos Realizan operaciones matemáticas + * / % Suma Resta Multiplicación División Resto de la división entera Operadores lógicos Realizan operaciones de toma de decisiones. && AND lógico || OR lógico == Comparación de igualdad Operador de asignación = Lo utilizamos para darles un valor a las variables Estructuras de control PHP soporta programación estructurada. Una estructura de programación permite controlar el flujo de ejecución, es decir: - qué se ejecuta - qué no se ejecuta - cuántas veces se ejecuta IF WHILE FOR Verifica que una condición sea V y ejecuta el código de acuerdo con esto. Repite la ejecución de un bloque de código, siempre y cuando una condición sea V. Repite la ejecución de un bloque de código, generalmente se utiliza para acceder a todos los elementos de una estructura de datos como arrays. SWITCH Verifica que una condición es V y ejecuta el código de acuerdo con esto. Tema 3. Arreglos y matrices Arreglos Los arreglos son estructuras de datos permiten almacenar varios elementos en una sola variable. Sus características fundamentales son las siguientes: - También se los conoce como arrays o vector. - Tienen tamaño dinámico, es decir, van crecen o decrecen según agreguemos o quitemos elementos. El tamaño máximo estará dado por la capacidad del servidor, pero se recomienda no superar los 65536 elementos. 11 PROGRAMACIÓN WEB MODULO 4 - Pueden almacenar diferentes tipos de datos. Se puede acceder a cada elemento directamente conociendo su índice, que representa la posición del elemento en dicho arreglo. $miArreglo = array( 1, 2, "arbol", 12221.12, "planta" ); Si no se especifica un índice para los elementos, se asignarán partiendo de cero y aumentando de uno en uno por cada elemento nuevo. Ejemplo de arreglos con índices definidos por el programador: $miArreglo = array( "indice1" => 1, 2 => 2, "planta1" =>"arbol", 3 => 12221.12, "planta2" => "planta" ); El valor que se asigna a la izquierda del indicador=> es el índice del arreglo; el de la derecha es el valor para ese índice. Acceso e impresión del primer elemento de un arreglo (PHP) - Partiendo del último arreglo construido, podemos mostrar un valor en particular: echo $miArreglo[3]; - Si queremos visualizar todo el arreglo: var_dump($miArreglo); Matrices Las matrices permiten almacenar datos en forma de tabla, en la que especificamos un índice para la fila y otro para la columna. Una matriz es un arreglo de arreglos; esto significa que es un arreglo en el que cada elemento es otro arreglo. Ejemplo de creación de un array: $miArreglo = array( "frutas"=> array("frutillas", "Manzanas"), "hortalizas"=> array("lechuga", "zanhorias", "acelga"), "legumbres"=> array("lentejas", "porotos") ); Mostrar el array: echo "<pre>"; print_r($miArreglo); echo "</pre>"; 12 PROGRAMACIÓN WEB MODULO 4 Tema 4. Convenciones de código. Herramientas para el análisis de código Las convenciones de código son un conjunto de reglas que, si bien no son obligatorias para crear un programa, se recomiendan para que: - el código pueda ser entendido por diferentes personas, - para que sea más fácil su distribución y - las pruebas o tests sean más rápidos. En el caso de PHP, existe un estándar que establece reglas sobre nombres de archivos, organización, comentarios, declaraciones y prácticas de programación. Entre las convenciones más importantes, encontramos las siguientes: - Los nombres de variables, es obligatorio que empiecen con el signo $, la primer letra debe ser minúscula, y cada palabra se separa con una mayúscula. Por ejemplo, "$miPrimerVariable". - Los archivos que contienen código PHP deben tener el sufijo (extensión) ".php". - Los archivos no deben tener más de 2000 líneas de código. - Cada archivo de código debe empezar con comentarios. Los comentarios nunca se ejecutan y se definen como notas que permiten documentar el código para que otras personas lo puedan entender. - El código debe estar correctamente tabulado. 13 PROGRAMACIÓN WEB MODULO 4 Unidad 1. Principales nociones de JavaScript Tema 1. JavaScript, ¿qué es y cuál es su utilidad? JavaScript: características - Es un lenguaje interpretado: no necesita compilarse para su ejecución. - Está orientado a objetos y débilmente tipado, esto quiere decir que las variables que definamos en nuestros scripts pueden cambiar su tipo de dato en el transcurso de este. - Se ejecuta en el navegador web, no en el servidor. - Entre sus utilidades, podemos indicar: o el manejo de eventos: como clics en un botón o el envío de un formulario; o la manipulación de elementos HTML: cambiar el contenido de un div u otras etiquetas o el valor de un input; y o el acceso a valores de los elementos de un formulario o contenido dentro de una etiqueta. - Es utilizado para crear efectos visuales en nuestro desarrollo. - Este lenguaje nos permitirá crear nuestras propias funciones para, por ejemplo, validar las entradas (datos) de los usuarios en un formulario. - Todos los navegadores web actuales implementan este lenguaje, por lo cual, es el único lenguaje de programación que entienden de forma nativa. - Para interactuar con una página web, se provee al lenguaje JavaScript de una implementación llamada Document Object Model (DOM). Document hace referencia a todo el contexto de la página, esto es, todo lo que el navegador graficará en pantalla y estará a disposición de los usuarios. - Este lenguaje tiene una sintaxis similar al lenguaje C. - Incluirlos o Podemos tener archivos externos a nuestra página con el código JavaScript: <script src=”assets/js/main.js” type=”text/javascript”></script> o O pueden estar incluidos dentro de la misma página entre las etiquetas <script></script> <script> //NUESTRO CODIGO JAVA SCRIPT AQUI </script> Tema 2. Selectores de elementos Como nombramos anteriormente, este lenguaje nos permite interactuar con cualquier elemento del 14 PROGRAMACIÓN WEB MODULO 4 DOM y, para poder hacerlo, debemos encontrarlos para manipularlos de acuerdo con nuestras necesidades. Mapa con íconos 1. Selector por ID: devuelve un único elemento 2. Selector por nombre: obtendremos un array, que permite acceder al elemento por su nombre 3. Selector por nombre de clase: similar al selector name, pero con diferente sintaxis 4. Selector de elementos por nombre de tag : en formato array y seleccionando el índice del elemento Selector por ID Descripción Símbolo Sintaxis Manipular elementos Retorno Selector por nombre Selecciona un elemento por su ID único. # document.getElementById("idelemento") document.getElementById("idelemento").value=”VALOR” Un elemento Descripción Símbolo Sintaxis Manipular elementos Retorno Selector por nombre de clase Descripción Símbolo Sintaxis Manipular elementos Retorno Selecciona todos los elementos con el mismo nombre. name document.getElementsByName("nom bre-elemento") document.getElementsByName("nom bre-elemento")[i].value=”VALOR” Un array de elementos Selector por nombre de tag Selecciona todos los elementos con la misma clase. . document.getElementsByClassName ("clase-elemento") ocument.getElementsByClassName( "claseelemento")[i].value=”VALOR” Un array de elementos Descripción Símbolo Sintaxis Manipular elementos Retorno Selecciona todos los elementos con el mismo nombre de tag. > document.getElementsByTagName(" tag-elemento") document.getElementsByTagName(" tagelemento")[i].innerHTML=”VALOR” Un array de elementos *innerHTML: sirve para manipular el contenido que se encuentra entre las etiquetas de apertura y de cierre. Veamos de manera práctica cómo hacerlo: <form method=”POST”> <input type=“text” id=“nombre” class=“input-selector-nombre” name=“nombre”> <button id=“botón_enviar” class=“btn” type=“submit”>Enviar</button> <button id=“botón_cancelar” class=“btn” type=“submit”>Cancelar</button> </form> Tomemos como ejemplo el <input type="text"> de la imagen. Tenemos: - ID: es el identificador único del elemento, por esto es que siempre trataremos de que no existan dos elementos con el mismo valor de ID. - propiedad class: el nombre de la clase que representa el elemento y que utilizaremos mayormente para aplicarles estilos CSS. Pueden existir muchos elementos con el mismo valor de esta propiedad, ya que serán elementos a los que les queremos aplicar estilos 15 PROGRAMACIÓN WEB - MODULO 4 iguales. propiedad name: el nombre del elemento y el valor que se enviará al servidor cuando enviemos nuestro formulario. Pueden existir muchos elementos con el mismo valor de name. Tema 3. Principales propiedades de document Sus funcionalidades son diversas, como por ejemplo, generar eventos. Evento Descripción Cuando se dispara Código ready load Se dispara cuando el DOM está listo para interactuar. Cuando el navegador ha terminado de cargar el HTML, CSS y JavaScript de la página. <script> alert("La página está lista para ser utilizada por el usuario"); </script> </body> Se dispara cuando la página ha terminado de cargarse completamente Cuando el navegador ha terminado de cargar todo el contenido de la página, incluidos los recursos externos, como imágenes, archivos CSS y JavaScript. <script> Document.body.onload = function() { alert("La página ha terminado de cargarse completamente"); } <script> </body> Salida en pantalla *alert es una función propia de JavaScript y su propósito es mostrar un mensaje en pantalla en forma de un contenedor y un botón aceptar. Una vez que la página se encuentra lista para ser utilizada por el usuario, veremos una salida en pantalla con el mensaje correspondiente. La propiedad location document.location nos permitirá acceder y manipular las diferentes propiedades de la URL que estamos navegando. <script> Document.body.onload=function(){ alert(“La URL actual es ” + document.location.href); } </script> 16 PROGRAMACIÓN WEB MODULO 4 Al utilizar document.location.href, conocemos la URL completa que estamos navegando. Podemos asignar un valor nuevo a document.location.href. Con esto, el navegador dirigirá su página a esta nueva URL. Otras funcionalidades de document.location: • document.location.hostname nos retorna el nombre del host (servidor), en nuestro ejemplo anterior, la respuesta sería "locahost". • document.location.pathname nos dará a conocer la carpeta y el archivo en la que estamos navegando (es decir, sin el nombre del host). En nuestro ejemplo: "/TECLAB/index.php". • document.location.protocol indica el protocolo que estamos utilizando para navegar (HTTP o HTTPS). En nuestro ejemplo anterior, obtendremos "http:". Tema 4. Variables, constante y funciones de JavaScript Característica Variables Definición Un espacio en memoria donde se puede almacenar un valor. Sintaxis var nombre = valor; Valores permitidos Cualquier tipo de valor. Arreglos Constantes Un valor que no Una colección de puede ser valores. modificado. const nombre = [valor1, valor2, ...]; Cualquier tipo de valor, excepto funciones. 17 Funciones Un bloque de código que se puede ejecutar repetidamente. const nombre = valor; function nombre() { ... } Cualquier tipo de valor. Cualquier tipo de valor. PROGRAMACIÓN WEB Modificabilidad Usos MODULO 4 El valor de una variable puede modificarse. El contenido de un arreglo puede modificarse. Almacenar datos. Almacenar una colección de datos. El valor de una constante no puede modificarse. Almacenar un valor que no debe ser modificado. El código de una función puede modificarse. Ejecutar código repetidamente. Variables Las variables son representadas bajo un nombre simbólico que almacena un valor asociado en la memoria del ordenador. Para definir una variable en JavaScript, podemos utilizar tanto la sentencia varo let y var. Las variables pueden sobrescribirse o concatenarse con otras. - Para la concatenación, utilizamos el símbolo de suma(+). - Para sobrescribir su valor, no es necesario utilizar var.  sobresobrescribir  concatenar Es importante tener en cuenta que, si tenemos dos variables numéricas, el símbolo de concatenación (+) realizará la suma entre ambas. Por el contrario, si tenemos una variable de cadena de caracteres (sin importar su contenido) y otra numérica, se realizará la concatenación. Resultado= 1220 Resultado= 32 18 PROGRAMACIÓN WEB MODULO 4 Vectores: un tipo especial de variables (Array) Un vector es una zona de la memoria donde podemos guardar elementos relacionados dentro de una misma variable. Cada elemento del array tomará un índice que lo relaciona (siempre comenzando desde el índice cero). Existen dos formas actuales para definir un array: • var miVariable = [] • var miVariable = new Array() Para agregar elementos a un array, nos valdremos de la función push. Para acceder a un elemento en particular, utilizaremos su índice: También, es factible concatenar todos los elementos juntos utilizando la función join, a la cual podemos pasarles o no parámetros; de no pasarles la concatenación se hará separando cada elemento con una coma (,). A join podemos enviar la cadena de caracteres que queramos utilizar como separador de elementos. De igual forma, podemos obtener concatenación o suma de sus elementos. Para conocer la cantidad de elementos que posee un array en JavaScript, podemos recurrir a su propiedad length. 19 PROGRAMACIÓN WEB MODULO 4 Constantes Las constantes presentan dos diferencias importantes en comparación con las variables. - Para declararlas, utilizamos la sentencia const. - Una vez asignado el valor a una constante, este no podrá cambiarse (sobrescribirse) en todo el ciclo del sistema. De hacerlo, JavaScript nos indicará un error y el script actual se detiene. Si está permitido realizar las operaciones matemáticas y de concatenación entre constantes y constantes y entre constantes y variables. Resultado= 32 Funciones Una función es una sección de código que sirve para realizar una actividad específica. Una de las formas de declarar funciones en JavaScript es comenzar con la instrucción function seguida del nombre de dicha función y luego, entre paréntesis, se debe agregar, de ser necesario, los parámetros con los que esta trabajará. Para invocar una función, solo debemos escribir el nombre de esta y, entre paréntesis, enviar los parámetros solicitados. 20 PROGRAMACIÓN WEB MODULO 4 Unidad 2. JQuery: el framework de JavaScript es de los más utilizados en la actualidad JQuery es una biblioteca, es decir, un conjunto de herramientas que nos facilita la programación en JavaScript, al simplificar la forma de interactuar con los elementos HTML de la página web, los eventos y las acciones de los usuarios. Esta biblioteca es de código abierto y libre, por lo que se permite su utilización en proyectos libres o privados. Ofrece una serie de funcionalidades basadas en JavaScript que, de otra manera, requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo. El enfoque modular de la biblioteca jQuery permite la creación de poderosas páginas web dinámicas y aplicaciones web. Para poder utilizar jQuery en nuestros proyectos, tenemos dos opciones. 1. Incluir la librería directamente desde la web, como si estuviese en nuestro propio proyecto. <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> 2. Otra forma es descargar el código desde https://code.jquery.com/jquery-3.6.0.min.js y agregarlo a nuestra carpeta de proyecto (de esta forma, lo tendremos local, útil si se quiere trabajar sin conexión a internet durante el desarrollo en nuestro host local). Una vez agregado el archivo, solo resta incluirlo: <script src="assets/js/jquery- 3.6.0.min.js"></script> Las utilidades de jQuery siempre comenzarán con el signo pesos ($). Tema 1. Selectores en jQuery Selector Descripción ID Selecciona un elemento único por su ID. Símbolo # Sintaxis Retorno <script> $(“#nombre”); </script> Elemento con el id id 21 PROGRAMACIÓN WEB MODULO 4 Selecciona todos <script> los elementos con Nombre $(“[name=’nombre’]”); el </script> nombre nombre. Selecciona todos <script> Nombre de . $(“.input-selector-nombre”); los elementos con clase </script> la clase clase. Selecciona todos <script> los elementos con Nombre de tagName $(“button”); tag el nombre de </script> etiqueta tagName. Selecciona el elemento <script> Elemento :checked $(“[name=’opcion’]”:checked); actualmente seleccionado </script> seleccionado en un formulario. La función not() se utiliza para excluir. - Con el siguiente código, obtendremos todos los input que no posean la selector­ nombre. - Array.Todos los elementos con la clase nombre Array. Todos los elementos con la clase clase Array. Todos los elementos con el nombre de etiqueta tagName Elemento seleccionado clase input- Excluir elementos chequeados: Tema 2. Acceder y modificar valores de los elementos de un formulario desde jQuery Supongamos que queremos ver el contenido que el usuario ha ingresado en el input nombre, podemos hacerlo con el siguiente código: La funcionalidad val tiene dos posibilidades: - Si no pasamos parámetros a esta, nos retornará el valor que el usuario ha ingresado en el input nombre. - Si pasamos un parámetro (cadena de caracteres), el valor del input mostrará dicho valor. 22 PROGRAMACIÓN WEB MODULO 4 También, podemos manipular el contenido HTML de los tags: Mostramos el contenido que se encuentra entre las etiquetas de apertura y cierre <button></button>. Para cambiar su contenido, podemos enviar un parámetro a dicha función: Al seleccionar por clase, obtendremos todos los elementos. Cuando cambiemos el contenido HTML de la selección, jQuery lo hará para ambos al mismo tiempo. Para evitar esto y manipular uno de ellos, jQuery nos facilita algunas funcionalidades extras. • first() selecciona el primer div de la selección • last() selecciona el último div de la selección • eq(índice) selecciona el elemento según su índice de selección (recordemos que el selector por clase nos retorna un array cuyo índice inicial es el cero): 23 PROGRAMACIÓN WEB MODULO 4 Tema 3. Eventos en JQuery Evento Qué realiza ready Ejecuta la función adjunta cuando el documento está listo para interactuar con JavaScript. Ejecuta el código especificado en la función click adjunta cuando el usuario hace clic en el elemento. Ejecuta el código especificado en la función dblclick adjunta cuando el usuario hace doble clic en el elemento. Ejecuta el código especificado en la función focus adjunta cuando el elemento recibe el foco. Ejecuta el código especificado en la función focusout adjunta cuando el elemento pierde el foco. Ejecuta el código especificado en la función submit adjunta cuando el usuario envía el formulario. Oculta el elemento de la hide vista. show Muestra el elemento en la vista. toggle Oculta o muestra el elemento en la vista, según su estado actual. Cuando se activa Cuando el documento está listo para interactuar con JavaScript Cuando un usuario hace clic en un elemento Cuando un usuario hace doble clic en un elemento Para qué es útil Ejecutar código que necesita que el documento esté completamente cargado antes de ejecutarse Realizar una acción cuando un usuario hace clic en un elemento, como abrir un enlace o mostrar un cuadro de diálogo Realizar una acción cuando un usuario hace doble clic en un elemento, como abrir un menú contextual o iniciar una acción de edición Cuando un elemento recibe el foco Agregar un comportamiento cuando un elemento recibe el foco Cuando un elemento pierde el foco Agregar un comportamiento cuando un elemento pierde el foco Cuando un usuario envía un formulario Validar los datos del formulario o enviar los datos del formulario a un servidor Cuando un elemento se oculta Cuando un elemento se muestra Cuando un elemento se muestra o se oculta Ocultar un elemento de la vista Mostrar un elemento en la vista Mostrar u ocultar un elemento en la vista ready() Ofrece una mejora a la funcionalidad ready del documento HTML. 24 PROGRAMACIÓN WEB MODULO 4 Cumple una función fundamental, ya que podemos comenzar a manipular los elementos, asignar otros eventos a ellos y comenzar la interacción con los usuarios a sabiendas de que todos los elementos en el DOM ya se encuentran disponibles. click() Invoca una acción al realizar clic sobre los elementos asignados. Este evento se puede asignar a cualquier elemento del DOM. Hemos asociado el botón con ID botón_cancelar a un evento clic. Cuando el usuario pulse (haga clic en este) verá una alerta con la leyenda: se canceló el envío del formulario. focus() Este evento se ejecuta cuando un elemento tiene el foco (el usuario lo ha seleccionado). Se puede asignar a cualquier elemento del DOM. Ejemplo: 25 PROGRAMACIÓN WEB MODULO 4 Cuando el usuario ingresa la input cuyo ID es domicilio, verá la alerta correspondiente. focusout() Es el evento contrario a focus(), ya que se ejecutará cuando el elemento pierde el foco (el usuario ha seleccionado otro elemento). Este evento se puede asignar a cualquier elemento del DOM. Submit() Es uno de los más importantes en la manipulación de formularios, puesto que con él podemos impedir que este se envíe al servidor. Cobra su vital importancia en la validación de datos antes del envío, al verificarlos en el navegador. Como regla general, podemos indicar que siempre es conveniente la validación de datos del formulario en el navegador antes del envío al servidor, para aliviar a este último. Del lado del servidor también debemos validarlos, pero con la casi certeza de que los datos son correctos. - función trim(): quita los espacios en blanco delante y detrás de los datos ingresados por el usuario, ya que pueden causar un error cuando indicamos la propiedad que requiere en los elementos. - Referencia $(this) en los eventos: El denominador this dentro de las funciones hace referencia al elemento que causó el evento. Captamos el evento clic del botón_cancelar: Validando el formulario en el evento submit() 26 PROGRAMACIÓN WEB - - - MODULO 4 Guardamos en las variables nombre y domicilio los datos ingresados. Si el usuario ingresó espacios en blanco dentro del nombre o el domicilio, acumulamos los errores (dentro del array errores) e informamos sobre estos. length es una propiedad de los array o vectores que nos indica la cantidad de elementos que posee. Cuando algún campo no es válido, guardamos un mensaje de error dentro del array. Al finalizar la validación, vemos la cantidad de errores recogidos, de existir uno o más, mostramos una ventana de alerta para informar sobre estos y retornamos false (el formulario no se envía al servidor). Si la cantidad de errores de validación es 0, retornamos true y el formulario es enviado al servidor. hide() Esta función esconde los elementos seleccionados de la pantalla. Los elementos quedan ocultos (no visibles) y que no son eliminados del DOM. Podemos dar un efecto mientras estos se ocultan, pasando por parámetro la cantidad (en milisegundos que dura el efecto). show(): Es la función inversa de hide(), puesto que mostrará los elementos ocultos. 27 PROGRAMACIÓN WEB MODULO 4 También, admite el parámetro de tiempo en milisegundos que debe durar la acción. toggle(): Es una combinación entre hide y show, puesto que si los elementos están ocultos los mostrará, caso contrario, los ocultará. Tema 4. Modificar propiedades, atributos y estilos en JQuery Propiedades Son las que indican un estado de los elementos, así, por ejemplo: - required: indica que el elemento tiene un estado de requerido. - readonly: indica que el elemento es solo lectura - disabled: el elemento no puede tener el foco ni se responderá a los clics. Esta propiedad se utiliza, mayormente, en los botones. Las propiedades requieren un parámetro booleano (true o false) en su llamada.  deshabilita todos los elementos que posean un valor de class btn  convierte el input cuyo ID es nombre en solo lectura.  quita la obligatoriedad de completar datos en el input cuyo ID es domicilio Atributos Son aquellas palabras que se encuentran dentro de las etiquetas HTML y que tienen un valor definido. Las más importantes son: - name: el nombre del elemento. - class: la clase CSS de los elementos. - type: el tipo de elemento. Para modificar los atributos de los elementos, podemos valernos del siguiente código: 28 PROGRAMACIÓN WEB MODULO 4  cambia el tipo del input cuyo ID es nombre, transformándolo en un input del tipo password.  cambia la class del botón ID botón_cancelar a su nuevo  cambia el nombre del elemento cuyo ID es botón enviar a su valor mi boton Cambiar estilos CSS con jQuery Dentro del dinamismo que podemos obtener con esta poderosa herramienta, está la de cambiar la forma en que se ven los elementos en pantalla. Una de estas utilidades es la función css(). 29 PROGRAMACIÓN WEB MODULO 4 Unidad 1. Programación orientada a objetos (POO) Paradigmas de programación: Son un conjunto de reglas a seguir para codificar sistemas. POO: en la actualidad, hay una forma de programación llamada Programación Orientada a Objetos. Hoy, es la técnica mas difundida y verificada como mejor practica de programación. Esto se debe a que podemos abstraer cuestiones propias de un sistema, y así poder reutilizar código. 1. Secundaria 1: las clases. Las clases son el concepto principal del paradigma orientado a objetos. Las clases son importantes porque nos permiten definir y crear objetos. 2. Secundaria 2: variables. Encontramos variables miembro y variables finales. 3. Secundaria 3: métodos. Una operación o acción definida en la clase que podrá ser ejecutada por los objetos creados a partir de esta clase. Tema 1. Conceptos básicos de la programación orientada a objetos Clases Son el concepto principal del paradigma orientado a objetos. Las clases son importantes porque nos permiten definir y crear objetos. Este paradigma establece que la codificación de un sistema debe realizarse abstrayendo los objetos con los que las personas interactúan en la vida real. Variables Encontramos variables miembro y variables finales. • Variables miembro Son variables que forman parte de un objeto y se definen en la clase de ese objeto. Pueden ser: o Primitivas: string, int, float, double, bool o referencias a objetos de otra clase. Las clases nos permiten crear objetos; cada objeto que se crea tiene las mismas variables definidas en la clase, pero cada uno de ellos puede tener diferentes valores asociados con esas variables. • Variables finales Son un tipo especial de variable que, una vez que se le asigna un valor, no puede cambiar. Son útiles para definir valores que sabemos que nunca van a ser modificados. Métodos Es una operación o acción definida en la clase que podrá ser ejecutada por los objetos creados a partir de esta clase. Utilizan las variables miembro junto con otros datos, que llamaremos parámetros, para obtener un 30 PROGRAMACIÓN WEB MODULO 4 resultado determinado. En PHP, los métodos tienen una estructura similar a lo siguiente: <Visibilidad> <nombre> (<parámetros>) Por ejemplo: public function lmprimirNombre() { echo $this->nombre; } El modificador establece que otras clases u objetos pueden ejecutar el método; las opciones son propiedades del método. Luego, el nombre permite identificar el método y es elección del programador. Por último, los parámetros son valores que el método necesita para realizar una operación y siempre se incluyen entre paréntesis. Si necesitamos más de un parámetro, los separamos mediante comas. Métodos get y set También conocidos como getters y setters. • get: permite obtener el valor de las variables miembro. • set: permite cambiar el valor de las variables miembro. En cada clase que se defina, hay que tener un get y un set por cada atributo o variable miembro. Tema 2. Herencia y polimorfismo Herencia El paradigma orientado a objetos permite hacer uso de esta técnica para reutilizar bloque de código, así se ahorra tiempo y es más fácil hacer cambios cuando sea necesario. La herencia establece qué clases pueden crearse utilizando otra clase ya definida, con la cual comparten un determinado atributo. 31 PROGRAMACIÓN WEB MODULO 4 Cuando una clase hereda de otra, la que proporciona la «herencia» se llama clase padre o superclase, mientras que la que hereda de otra se denomina clase hija o subclase. Los métodos también se heredan. Los métodos heredados pueden redefinirse en la clase hija, con la excepción de los métodos finales. Un método redefinido es uno que ha sido heredado, pero modificado, en la clase hija, para que cumpla determinado comportamiento. Polimorfismo Establece que dos objetos de distinto tipo pueden aceptar el mismo mensaje, pero comportarse de manera diferente. Tema 3. Clases y métodos finales. Interfaces Descripción Código CLASES FINALES Se caracterizan por no permitir que otras clases hereden sus variables y métodos. METODOS FINALES Pueden ser heredados, pero no modificados (o redefinidos) por las clases hijas. Son elementos que definen únicamente el comportamiento que una clase debe implementar INTERFACES Para aplicar una interfaz en una clase, se utiliza la palabra clave implements. Cuando aplicamos una interfaz, se deben redefinir los métodos que se declaran en ella dentro de la clase. 32 PROGRAMACIÓN WEB MODULO 4 Tema 4. Permisos de acceso En PHP, existen diferentes tipos de acceso (también conocidos como modificadores) para variables, métodos y clases: Sintaxis Publico public Privado private Protegido Momento Descripción al inicio de la declaración Es accesible por otras clases en cualquier paquete. Es el tipo de acceso (visibilidad) por defecto. al inicio de la declaración al inicio de la protected declaración Es accesible solo dentro de la clase en la que se creó el elemento. Es accesible para clases definidas para sus subclases. Sin si no se especifica ningún tipo de acceso, por defecto, es público. especificar En programación orientada a objetos, todas las variables miembro de una clase deberían ser privadas y solamente accesibles por los métodos get y set. Unidad 2. Introducción a PHP y bases de datos Tema 1. Funciones de PHP: estructuras de control y toma de definiciones Funciones Una función es un fragmento del programa que se dedica a realizar una acción específica. Se basa en la reutilización de código, puesto que podemos llamar a las funciones desde cualquier parte del sistema y, al enviarle diferentes parámetros, obtendremos valores diferentes. Una de las virtudes esenciales de PHP es que podemos intercambiar código HTML, CSS, JavaScript y el propio Lenguaje PHP. Todas las instrucciones PHP se deben escribir entre los tags: • de apertura <?php y • el de cierre?>. La funcionalidad echo produce la salida en pantalla de lo que incluimos entre comillas. <?php echo '<span style="font-size: 20px; color: blue; font-style: italic">HOLA MUNDO!!! </span>'; ?> Dentro de la etiqueta style, tenemos propiedades/valores: • «font-size: » indica el tamaño de la fuente (texto) 33 PROGRAMACIÓN WEB MODULO 4 • «color: » índice el color de la fuente • «font-style: » indica que el estilo de la fuente Dentro de una sentencia echo, agregamos código HTML, junto a CSS. Y lo más formidable es que lo realizamos desde PHP. Estructuras de repetición PHP PHP es descendiente directo de C, las estructuras son idénticas. • Estructura for Sin definir la variable $i como valor entero: <?php for ($i = O; $i < 7; $i ++){ echo '<span style="font-size: 20px; color: blue; fontitalic">EI valor de $i es '.$i.'</span><br>'; } ?> style: ¿Podemos mezclar más PHP con HTML? Sí. <?php for ($i = O; $i < 7; $i ++){ ?> <span style="font-size: 20px; color: blue; font-style: italic">EI valor de $i es <?php echo $i; ?> </span><br> <?php} ?> Los tags de PHP debemos abrirlos y cerrarlos en el menor código posible. • Estructura while <?php $i = O; while ($i < 7){ ?> <span style="font-size: 20px; color: blue; font-style: italic">EI valor de $i es <?php echo $i; ?> </span><br> <?php $i++; } ?> While nos permite recorrer repetitivamente la variable i mientras sea menor que el valor indicado. ¿Qué ocurriría si a $i no la incrementamos? El ciclo nunca terminaría. Estructuras de control y toma de definiciones • Estructura if La condición debe retornar un valor verdadero; caso contrario, se ejecuta el else. Es factible tener if anidados. <?php $valor= 3; if ($valor < 3){ echo "el valor es menor 3"; } else if ($valor > 3){ echo "el valor es mayor 3"; } else { echo "el valor es 3"; } ?> 34 PROGRAMACIÓN WEB MODULO 4 • Estructura switch Switch valida el valor posible de una variable y puede compararse con un número infinito de posibilidades. Si el valor no coincide con ninguna de las condiciones programadas (case), entonces se ejecuta el valor default, si es que este se ha declarado: <?php $valor= 7; switch ($valor){ case 1: echo "el valor es 1"; break; case 2: echo "el valor es 2"; break; case 3: echo "el valor es 3"; break; default: echo "No se responde al valor"; } ?> • Excepciones try y catch Esta estructura nos permite manejar errores que puedan surgir mientras el programa se va ejecutando. Tema 2. Conectores a base de datos en PHP El lenguaje PHP ofrece diferentes formas de conexión a base de datos. MySQLi Desde la versión 5.5, PHP cuenta con una librería llamada MySQLi para realizar las conexiones a base de datos MySQL. Esta librería requiere realizar una conexión indicando el host (o dirección IP de nuestro servidor de base de datos), el nombre de usuario definido para el acceso, su password y un nombre de base de datos que tengamos definido en nuestro servidor. Al crear la conexión, obtendremos un recurso que utilizaremos luego para realizar nuestros accesos a las tablas. Es muy importante cerrar este recurso al finalizar nuestras tareas con la base de datos, ya que este recurso ocupa un espacio de memoria en nuestro servidor web, y provocaría que cada vez vaya funcionando con menor rendimiento. 35 PROGRAMACIÓN WEB MODULO 4 En caso de que la conexión falle podremos utilizar las siguientes funciones para detectar el error: • mysqli_connect_errno(): Muestra el código de error mySQL. • mysqli_connect_error(): Muestra el propio mensaje de error MySQL. Tema 3. Clase PDO de PHP Otra forma de conectar a nuestra base de datos es una librería más amplia que la anterior llamada PDO. Esta librería permite conectar nuestro sistema web a diferentes motores de base de datos, como MySQL, PostgreSQL, SQLite, MS SQL Server (PDO), entre otros. A diferencia de MySQLi, PDO se utiliza como una clase, es decir, debemos instanciar un objeto PDO para crear la conexión. Al realizar esta acción, también obtenemos un recurso, pero no estamos obligados a cerrar este recurso al finalizar el programa, PHP descubre cuándo dejamos de utilizar el recurso y lo cierra automáticamente. Hoy, PDO es la librería marcada como mejores prácticas para la conexión de base de datos, puesto que en su desarrollo se han introducido mejoras en seguridad de conexiones. - mysql hace referencia al motor de base de datos que nos vamos a conectar dbname, indicamos el nombre de nuestra base de datos dentro del servidor host indicamos la dirección IP de nuestro servidor de base de datos. En los parámetros user y pass, debemos indicar usuario y contraseña para el acceso a la base de datos. Tema 4. Realización de consultas (insert, delete, update, Select y procesamiento de datos) Insertando registros 1. Luego de la conexión, creamos una sentencia prepare, en la que escribimos la consulta SQL de 36 PROGRAMACIÓN WEB MODULO 4 forma tradicional, pero en values indicamos tantos signos de interrogación como nombres de campos que hemos indicado. 2. Posteriormente, definimos un array (o arreglo) con los valores a insertar en el orden correcto a la definición del insert. 3. Por último, llamamos a ejecutar pasando dicho array como parámetros. ¿Por qué utilizamos prepare y realizamos la consulta de esta forma? Esto tiene dos respuestas, ambas ventajosas: - Nos permite realizar múltiples inserciones modificando solamente el array con los valores: - Escapar la consulta. Las sentencias prepare y execute transforman una consulta errónea por entrecomillado, agregando automáticamente el carácter de escape \ y previene el error, permitiendo así usar el entrecomillado. INSERT INTO empleados (nombre, apellido, fecha_nacimiento, email, domicilio) VALUES ("Vilma", "Picapiedras", "1976-09-15", "[email protected]", "Rocallosas \"50\""); Actualizando registros Podemos actualizar los registros con prepare y execute: Recuperando registros Podemos realizar el recupero de registros mediante una consulta de selección (select) con consultas preparadas (prepare). Luego, para facilitar el retorno de datos obtenidos, nos podemos valer de la funcionalidad fetchAll. 37 PROGRAMACIÓN WEB MODULO 4 Eliminando registros Una consulta de eliminación (delete) es la que nos permite quitar registros que ya no utilizaremos en nuestras tablas. 38 PROGRAMACIÓN WEB MODULO 4 Tema 5. Creación de una clase programática Imaginemos una clase de acceso a base de datos, en la que tengamos los métodos de inserción, actualización, selección y eliminación siempre disponibles, solamente enviando los parámetros necesarios para realizar la acción requerida. Estos parámetros serán el nombre de la tabla, los filtros a aplicar, el orden que queremos obtener, el límite de registros a obtener en el caso de la selección. Veamos la base de esta clase: class base_datos{ } private $gbd; function _construct($driver, $base_datos, $host, $user, $pass) { $conection = $driver.":dbname=" .$base_datos.";host=$host"; $this->gbd = new PDO($conection, $user, $pass); if (!$this->gbd){ throw new Exception("No se ha podido realizar la conexión"); } function select($tabla, $filtros= null, $arr_porepare = null, $orden = null, $1imit = null){ $sql = "SELECT * FROM ".$tabla; if ($filtros != null){ $sql .= "WHERE ".$filtros; } if ($orden != null){ $sql .= "ORDER BY ".$orden; } if ($limit != null){ $sql .=" LIMIT ".$1imit; } $resourse = $this->gbd->prepare($sql); $resourse->execute($arr_porepare); if ($resourse){ return $resourse->fetchAll(PDO::FETCH_ASSOC); } else { throw new Exception ("No se pudo realizar la consulta de selección"); } } function delete($tabla, $filtros = null, $arr_prepare = null){ // implementación de nuestra función } function insert($tabla, $campos, $valores, $arr_prepare = null){ / / implementación de nuestra función } function update($tabla, $campos, $valores, $filtros, $arr_prepare = null){ // implementación de nuestra función } } En esta clase, hemos creado un constructor que nos permite conectarnos a cualquier base de 39 PROGRAMACIÓN WEB MODULO 4 datos que tengamos disponible, solamente enviando los parámetros necesarios. Para utilizar dicha clase, solo hace falta instanciar un objeto de la clase base_datos y luego llamar a sus funcionalidades: $db = new base_datos("mysql", "test", "127.0.0.1", "aquiles248", "aquiles248"); $empleados = $db->select("empleados", "id = ?", array(1), "nombre ASC", 2); Cabe destacar que una vez instanciada la clase, podemos acceder tantas veces sea necesario a sus métodos, sin necesidad de una nueva instancia. También, podemos generar paralelamente otra instancia para conectarnos al mismo tiempo a otro motor de base de datos. 40 PROGRAMACIÓN WEB MODULO 4 Unidad 1. Clases y bases de datos Una de las principales ventajas de los sistemas es poder: - guardar, - modificar y - obtener datos, ya sea mediante el uso de: - bases de datos, o - webs services (sistemas a los que podemos conectar nuestro desarrollo con otros sistemas o diferentes dispositivos). Las bases de datos son un almacén de datos que pertenece a un mismo contexto (o sistema), aunque un sistema puede requerir varias bases de datos -de las cuales algunas pueden ser compartidas por otros sistemas-. Este es el caso de los webs services, que almacenan sus datos en una base de datos, de forma tal que, al ser consultados, nos retornan la información o los datos solicitados. Los datos se dispondrán en tablas, que tienen sus propiedades y representan una entidad o vinculación de entidades. Dentro de los sistemas de bases de datos, contamos con diferentes motores. Muchos de ellos trabajan con lenguajes similares (SQL), y existen motores gratuitos o pagos. Motores gratuitos Motores pagos • MySQL • PostgreSQL. • Microsoft SQL Server. • SQLite. • Microsoft Access. • MongoDB. PHP permite realizar conexiones para cualquiera de estos motores. Al contratar un servidor para nuestros sistemas, mayormente vienen con MySQL, por lo cual es el que más se difunde actualmente en sistemas webs. Los webs services, que también utilizan bases de datos para recuperar información, se llaman desde una URL común. Tema 1. Archivos de proyecto (include y require) Archivos de un proyecto: son archivos que se alojan dentro del disco duro del servidor, en los que escribiremos nuestro código. Podemos tener archivos con diferentes extensiones: Son los archivos que contienen las cuestiones lógicas del sistema y se tratan con el .php procesador PHP instalado en nuestro servidor. .html Son los archivos de vista, lo que representaremos en el navegador. Archivos de hojas de estilos aplicadas a nuestro código html, para darle formato (colores, .css tamaño y tipo de letras, tamaño de imágenes). Archivos del lenguaje javascript que se utiliza, entre otras cosas, para realizar validaciones .js del lado del cliente (navegador), responder a eventos del usuario, como por ejemplo, clics, pulsaciones de teclas. 41 PROGRAMACIÓN WEB MODULO 4 Estructura de proyecto Las carpetas principales son: - Assets: en la que gu