PDSD-329 Material

Fundamentos de Programación Web
MATERIAL TÉCNICO
DE APOYO
TAREA N°01
Conexión a Base de Datos MySQL - PDO
Como crear una Conexión inicial a MySQL con PDO (PHP)
1.- INTRODUCCIÓN.
PDO significa PHP Data Objects, Objetos de Datos de PHP, una extensión para
acceder a bases de datos. PDO permite acceder a diferentes sistemas de bases de
datos con un controlador específico (MySQL, SQLite, Oracle...) mediante el cual se
conecta. Independientemente del sistema utilizado, se emplearán siempre los
mismos métodos, lo que hace que cambiar de uno a otro resulte más sencillo.
Para ver los controladores (drivers) disponibles en tu servidor, puedes emplear el

método getAvailableDrivers():
Figura N° 01: Ver controladores disponibles en el servidor
El sistema PDO se fundamenta en 3 clases:
• PDO
• PDOStatement
• PDOException
La clase PDO se encarga de mantener la conexión a la base de datos y otro tipo de

conexiones específicas como transacciones, además de crear instancias de la clase
PDOStatement.
Es esta clase, PDOStatement, la que maneja las sentencias SQL y devuelve los
resultados.
La clase PDOException se utiliza para manejar los errores.
2.- CONECTAR A UNA BASE DE DATOS CON PDO.
El primer argumento de la clase PDO es el DSN, Data Source Name, en el cual se

han de especificar el tipo de base de datos (mysql), el host (localhost) y el nombre
de la base de datos (se puede especificar también el puerto). Diferentes sistemas de
bases de datos tienen distintos métodos para conectarse. La mayoría se conectan
de forma parecida a como se conecta a MySQL:
2
Figura N° 02: Conexión a la base de datos MySQL
DBH significa Database Handle, y es el nombre de variable que se suele utilizar

para el objeto PDO. Para cerrar una conexión:
Figura N° 03: Cerrar conexión MySQL
3. EXCEPCIONES Y OPCIONES CON PDO.
PDO maneja los errores en forma de excepciones, por lo que la conexión siempre
ha de ir encerrada en un bloque try/catch. Se puede (y se debe) especificar el modo
de error estableciendo el atributo error mode:
Figura N° 04: Manejo de errores en PDO
No importa el modo de error, si existe un fallo en la conexión siempre producirá una

excepción, por eso siempre se conecta con try/catch.
• PDO::ERRMODE_SILENT. Es el modo de error por defecto. Si se deja así habrá

que comprobar los errores de forma parecida a como se hace con mysqli. Se tendrían
que emplear PDO::errorCode() y PDO::errorInfo() o su versión en PDOStatement
PDOStatement::errorCode() y PDOStatement::errorInfo().
• PDO::ERRMODE_WARNING. Además de establecer el código de error, PDO
emitirá un mensaje E_WARNING. Modo empleado para depurar o hacer pruebas
para ver errores sin interrumpir el flujo de la aplicación.
• PDO::ERRMODE_EXCEPTION. Además de establecer el código de error, PDO
lanzará una excepción PDOException y establecerá sus propiedades para luego
poder reflejar el error y su información. Este modo se emplea en la mayoría de
situaciones, ya que permite manejar los errores y a la vez esconder datos que
podrían ayudar a alguien a atacar tu aplicación.
3
El modo de error se puede aplicar con el método PDO::setAttribute o mediante un

array de opciones al instanciar PDO:
Figura N° 05: Configuración del modo de error en PDO
Existen más opciones aparte de el modo de error ATTR_ERRMODE, algunas de

ellas son:
• ATTR_CASE. Fuerza a los nombres de las columnas a mayúsculas o minúsculas

(CASE_LOWER, CASE_UPPER).
• ATTR_TIMEOUT. Especifica el tiempo de espera en segundos.
• ATTR_STRINGIFY_FETCHES. Convierte los valores numéricos en cadenas.
4.- REGISTRAR DATOS CON PDO.
La clase PDOStatement es la que trata las sentencias SQL. Una instancia de

PDOStatement se crea cuando se llama a PDO->prepare(), y con ese objeto creado
se llama a métodos como bindParam() para pasar valores o execute() para ejecutar
sentencias. PDO facilita el uso de sentencias preparadas en PHP, que mejoran el
rendimiento y la seguridad de la aplicación. Cuando se obtienen, insertan o
actualizan datos, el esquema es: PREPARE -> [BIND] -> EXECUTE. Se pueden
indicar los parámetros en la sentencia con un interrogante "?" o mediante un nombre
específico.
4
Utilizando interrogantes para los valores:
Figura N° 06: Insertar datos utilizando interrogantes para los valores
Utilizando variables para los valores:
Figura N° 07: Insertar datos utilizando variables para los valores
También existe un método lazy, que es pasando los valores mediante un array
(siempre array, aunque sólo haya un valor) al método execute():
5
Figura N° 08: Insertar datos utilizando el método lazy
Es el método execute() el que realmente envía los datos a la base de datos.
Si no se llama a execute no se obtendrán los resultados sino un error.
Una característica importante cuando se utilizan variables para pasar los valores es
que se pueden insertar objetos directamente en la base de datos, suponiendo
que las propiedades coinciden con los nombres de las variables:
Figura N° 09: Insertar datos utilizando objetos
5.- DIFERENCIA ENTRE bindParam() y bindValue().
Existen dos métodos para enlazar valores:
• bindParam()
• bindValue()
Con bindParam() la variable es enlazada como una referencia y sólo será evaluada
cuando se llame a execute():
6
Figura N° 10: Enlazar valores con bindParam()
Con bindValue() se enlaza el valor de la variable y permanece hasta execute():
Figura N° 11: Enlazar valores con bindValue()
En la práctica bindValue() se suele usar cuando se tienen que insertar datos sólo
una vez.
Y bindParam() cuando se tienen que pasar datos múltiples (desde un array por
ejemplo).
Ambas funciones aceptan un tercer parámetro, que define el tipo de dato que se
espera. Los data types más utilizados son:
• PDO::PARAM_BOOL (booleano)
• PDO::PARAM_NULL (null)
• PDO::PARAM_INT (integer)
• PDO::PARAM_STR (string).
6.- CONSULTAR DATOS CON PDO.
La consulta de datos se realiza mediante PDOStatement::fetch, que obtiene la

siguiente fila de un conjunto de resultados. Antes de llamar a fetch (o durante)
hay que especificar como se quieren devolver los datos:
7
• PDO::FETCH_ASSOC: devuelve un array indexado cuyos keys son el nombre

de las columnas.PDO::FETCH_NUM: devuelve un array indexado cuyos keys
son números.
• PDO::FETCH_BOTH: valor por defecto. Devuelve un array indexado cuyos keys

son tanto el nombre de las columnas como números.
• PDO::FETCH_BOUND: asigna los valores de las columnas a las variables

establecidas con el método PDOStatement::bindColumn.
• PDO::FETCH_CLASS: asigna los valores de las columnas a propiedades de una

clase. Creará las propiedades si éstas no existen.
• PDO::FETCH_INTO: actualiza una instancia existente de una clase.
• PDO::FETCH_OBJ: devuelve un objeto anónimo con nombres de propiedades

ue corresponden a las columnas.
• PDO::FETCH_LAZY: combina PDO::FETCH_BOTH y PDO::FETCH_OBJ,

creando los nombres de las propiedades del objeto tal como se accedieron.
Los más utilizados son FETCH_ASSOC, FETCH_OBJ, FETCH_BOUND y

FETCH_CLASS. Vamos a poner un ejemplo de los dos primeros:
Figura N° 12: Consulta de datos utilizando FETCH_ASSOC
8
Con FETCH_BOUND debemos emplear el método bindColumn():
Figura N° 13: Consulta de datos utilizando FETCH_BOUND
El estilo de devolver los datos FETCH_CLASS es algo más complejo: devuelve los
datos directamente a una clase. Las propiedades del objeto se establecen ANTES
de llamar al constructor. Si hay nombres de columnas que no tienen una propiedad
creada para cada una, se crean como public. Si los datos necesitan una
transformación antes de que salgan de la base de datos, se puede hacer
automáticamente cada vez que se crea un objeto:
Figura N° 14: Consulta de datos utilizando FETCH_CLASS
9
Con lo anterior hemos podido modificar cómo queríamos mostrar nombre y ciudad
de cada registro. A nombre lo hemos puesto en mayúsculas y de ciudad sólo hemos
mostrado las tres primeras letras. Si lo que quieres es llamar al constructor ANTES
de que se asignen los datos, se hace lo siguiente:
Figura N° 15: Llamando al constructor antes que se asignen los datos
Si en el ejemplo anterior añadimos PDO::FETCH_PROPS_LATE, el nombre y la

ciudad se mostrarán como aparecen en la base de datos. También se pueden pasar
argumentos al constructor cuando se quieren devolver datos en objetos con PDO:
Figura N° 16: Pasar argumentos al constructor
O incluso datos diferentes para cada objeto:
Figura N° 17: Datos diferentes para cada objeto
Finalmente, para la consulta de datos también se puede emplear directamente

PDOStatement::fetchAll(), que devuelve un array con todas las filas devueltas
por la base de datos con las que poder iterar. También acepta estilos de devolución:
Figura N° 18: Consulta de datos utilizado PDOStatement
10
7.- DIFERENCIA ENTRE QUERY() Y PREPARE() / EXECUTE().
En los ejemplos anteriores para las sentencias en PDO, no se ha introducido el

método query(). Este método ejecuta la sentencia directamente y necesita que se
escapen los datos adecuadamente para evitar ataques SQL Injection y otros
problemas.
execute() ejecuta una sentencia preparada lo que permite enlazar parámetros y

evitar tener que escapar los parámetros. execute() también tiene mejor rendimiento
si se repite una sentencia múltiples veces, ya que se compila en el servidor de bases
de datos sólo una vez.
Ya hemos visto como funcionan las sentencias preparadas con prepare() y execute(),
vamos a ver un ejemplo con query():
Figura N° 19: Ejecución de una consulta con query()
Se cambia prepare por query y se quita el execute.
8.- TRANSACCIONES CON PDO.
Cuando tenemos que ejecutar varias sentencias de vez, como INSERT, es preferible
utilizar transacciones ya que agrupa todas las acciones y permite revertirlas todas en
caso de que haya algún error.
Una transacción en PDO comienza con el método PDO::beginTransaction(). Este

método desactiva cualquier otro commit o sentencia SQL o consultas que aún
no son commited hasta que la transacción es committed con PDO::commit().
Cuando este método es llamado, todas las acciones que estuvieran pendientes se
activan y la conexión a la base de datos vuelve de nuevo a su estado por defecto
que es auto-commit. Con PDO::rollback() se revierten los cambios realizados
durante la transacción.
11
TAREA N°02
Creación de Solución con AJAX, MVC y JSON
¿Qué es AJAX y cómo funciona?
AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and XML). Es

un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web
funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo
plano. Espera, ¿qué es AJAX de nuevo? Vamos a revisar cada término por separado.
JavaScript es un lenguaje de programación muy conocido. Entre otras funciones,

gestiona el contenido dinámico de un sitio web y permite la interacción dinámica del
usuario. XML es otra variante de un lenguaje de marcado como HTML, como lo
sugiere su nombre: eXtensible Markup Language. Mientras HTML está diseñado
para mostrar datos, XML está diseñado para contener y transportar datos. Tanto
JavaScript como XML funcionan de forma asíncrona en AJAX. Como resultado,
cualquier aplicación web que use AJAX puede enviar y recuperar datos del servidor
sin la necesidad de volver a cargar toda la página.
Ejemplos prácticos de AJAX

Tomemos como ejemplo la función de autocompletado de Google; esta te ayuda a
completar tus palabras clave mientras las escribes. Las palabras clave cambian en
tiempo real, sin embargo, la página como tal no cambia. A principios de los años 90,
cuando la Internet no era tan avanzada, la misma función requeriría que Google
volviera a cargar la página cada vez que apareciera una nueva recomendación en tu
pantalla. AJAX permite que el intercambio de datos y la capa de presentación
funcionen simultáneamente sin que interfieran la una con la otra.
Figura N° 20: Ejemplo práctica del funcionamiento de AJAX
12
El concepto de AJAX ha existido desde mediados de los años 90. Sin embargo,
obtuvo un reconocimiento más amplio cuando Google comenzó a incorporar el
concepto en Google Mail y Google Maps en el 2004. Hoy en día, se usa ampliamente
en varias aplicaciones web para agilizar el proceso de comunicación del servidor.
Aquí hay más ejemplos útiles de AJAX en nuestra vida cotidiana.
Sistemas de votación y calificación.
¿Alguna vez has calificado un producto que compraste online? ¿Alguna vez has
llenado un formulario de votación en línea? De cualquier manera, ambas
operaciones usan AJAX. Una vez que haces clic en el botón de calificación o de
votación, el sitio web actualizará el cálculo, pero la página completa permanecerá sin
cambios.
Salas de chat.
Algunos sitios web tienen un chat incorporado en su página principal, mediante el

cual puedes hablar con un agente de atención al cliente. No tienes que preocuparte
si quieres explorar la página al mismo tiempo. AJAX no volverá a cargar la página
cada vez que envíes y recibas un mensaje nuevo.
Notificación de tendencias de Twitter.
Twitter ha incorporado AJAX recientemente para sus actualizaciones. Cada vez que
se crean nuevos tweets sobre ciertos temas de tendencia, Twitter actualizará las
nuevas cifras sin afectar la página principal.
En pocas palabras, AJAX hace que las funciones multitarea sean fáciles. Si alguna
vez observas una situación similar en la que dos operaciones funcionan
simultáneamente, con una en ejecución y la otra inactiva, es posible que sea AJAX
en acción.
¿COMO FUNCIONA AJAX?
Ten en cuenta que AJAX no es una sola tecnología, ni es un lenguaje de

programación. Como se dijo antes, AJAX es un conjunto de técnicas de desarrollo
web. El sistema generalmente comprende:
• HTML/XHTML para el lenguaje principal y CSS para la presentación.

• El Modelo de objetos del documento (DOM) para datos de visualización
dinámicos y su interacción.
• XML para el intercambio de datos y XSLT para su manipulación. Muchos
desarrolladores han comenzado a reemplazarlo por JSON porque es más similar
a JavaScript en su forma.
13
• El objeto XMLHttpRequest para la comunicación asíncrona.

• Finalmente, el lenguaje de programación JavaScript para unir todas estas
tecnologías.
Es necesario algún conocimiento técnico para entenderlo completamente. Sin

embargo, el procedimiento general de cómo funciona AJAX es bastante simple. Dale
un vistazo al diagrama y la tabla siguientes para mayor explicación.
Figura N° 21: Diagrama de funcionamento de AJAX
La tabla comparativa entre el modelo convencional y el modelo AJAX que se muestra

a continuación puede distinguir entre el funcionamiento de ambos modelos y ver
cuáles son los conjuntos de pasos para el funcionamiento respectivo.
14
Modelo Convencional Modelo AJAX
1. Se envía una solicitud HTTP desde 1. El navegador crea una llamada

el navegador web al servidor. de JavaScript que luego activará
XMLHttpRequest.
2. El servidor recibe y,
posteriormente, recupera los 2. En segundo plano, el
datos. navegador web crea una
solicitud HTTP al servidor.
3. El servidor envía los datos
solicitados al navegador web. 3. El servidor recibe, recupera y
envía los datos al navegador
web.
4. El navegador web recibe los datos
y vuelve a cargar la página para
que aparezcan los datos. 4. El navegador web recibe los
datos solicitados que
aparecerán directamente en
5. Durante este proceso, los usuarios la página. No se necesita
no tienen más remedio que recargar.
esperar hasta que se complete
todo el proceso. No solo consume
mucho tiempo, sino que también
supone una carga innecesaria en
el servidor.
Dejando de lado la definición, la mayor ventaja de usar AJAX es que optimiza la

experiencia del usuario. Tus visitantes no tienen que esperar mucho tiempo para
acceder a tu contenido. Sin embargo, también depende de lo que necesites. Google,
por ejemplo, le permite a los usuarios elegir entre AJAX y una versión convencional
al usar Google Mail. Lo mejor es poner las necesidades de los usuarios como
prioridad en tu lista y usar AJAX de acuerdo con eso.
ARQUITECTURA MVC.
Patrones de software.
Antes de entrar en la parte más práctica de todo este asunto, es decir, antes de que
veamos los patrones de arquitectura y los apliquemos en un ejemplo concreto de
aplicación web, tienes que dejarme que te hable de los patrones de software.
Los patrones de software son soluciones comprobadas a problemas comunes en el

desarrollo de software. La arquitectura MVC, de hecho, es un patrón, porque se ha
probado infinidad de veces y se adapta a la perfección a multitud de problemas
diferentes.
15
Para que un patrón pueda considerarse tal cosa, tiene que cumplir estas
condiciones:
• Debe haber sido comprobado en otros sistemas.

• Debe ser fácilmente reutilizable.
• Debe ser aplicable a diferentes circunstancias.
• Debe estar bien documentado.
La arquitectura Modelo-Vista-Controlador (MVC)
Cuando hablamos de arquitectura de una aplicación nos referimos a la estructura

básica que la sustenta, como los pilares de un edificio en construcción. Si quitas las
paredes, las ventanas, las puertas, los azulejos de la cocina… todavía pueden
distinguirse las formas fundamentales. Pues bien, el patrón de arquitectura más
popular en aplicaciones web se llama MVC o Modelo-Vista-Controlador.
¿Qué es el MVC?
El MVC es tan solo una arquitectura multicapa estandarizada. Una arquitectura de 3

capas, para ser exactos. Este es el esquema de una arquitectura en 3 capas. Cada
capa ejecuta una parte de la solución, y entre ellas colaboran para formar la
aplicación completa. La capa superior interactúa con el usuario; la capa inferior, con
la máquina (donde dice “hardware”, debería decir “cualquier cosa menos abstracta
que nuestro programa”). Tienes permiso para imaginar cada capa como una clase
con sus métodos y atributos.
Figura N° 22: Esquema de la arquitectura a tres capas
16
Pues bien, si a esas tres capas les ponemos nombres exóticos como modelo, vista
y controlador, y tuneamos un poco el esquema, ya lo tenemos: la arquitectura MVC,
el cual podemos observar en la siguiente figura que define de mejor manera lo
explicado.
Figura N° 23: Esquema de la arquitectura MVC
Es decir, la arquitectura MVC solo es un caso particular de la arquitectura en 3 capas.
¿Y ya está? Bueno, no. Ahora tienes que aprender qué significa en realidad esta
definición.
Porque todo esto está muy bien como construcción teórica, pero:
• ¿cómo te afecta a ti a la hora de programar?

• ¿Qué clases tienes que crear?
• ¿Qué parte del código hay que poner en cada clase?
En la práctica, es más simple de lo que parece. Lo vas a ver enseguida. Y lo

maravilloso es que el 99,99% de las aplicaciones web encajan como un guante en
esta arquitectura.
Es decir, apenas tendremos que hacer trabajo de diseño previo, porque, si es una
aplicación web, ya sabemos qué clases tendremos que construir: los que nos indique
la arquitectura MVC.
17
Antes de pasar a la parte práctica de todo esto, permíteme un breve apunte: por
supuesto, nada impide construir arquitecturas con más de 3 capas en el desarrollo
de vuestros proyectos.
De hecho, nosotros vamos a usar una variante del MVC en el que se añade una
capa adicional por debajo del modelo, es decir, una arquitectura con 4 capas. Pero
ya llegaremos a eso.
MVC en la práctica: una implementación incremental.
Tras esta introducción al MVC, vamos a estudiar a fondo este patrón. Y lo vamos a
hacer por medio de un ejemplo, que es como mejor suelen comprenderse estas
cosas. Una vez terminado y comprendido el ejemplo, daremos una definición más
teórica.
Es decir, que lo vamos hacer al revés de lo habitual: primero la práctica y luego la

teoría. Según mi experiencia, la gente suele comprenderlo mejor en ese orden.
Pero, para que esto funcione, tienes que leer el código fuente con atención. Es un
código sencillo y bien comentado, y que se va complicando muy poco a poco, en
pasos incrementales, desde un código clásico monolítico hasta una implementación
completa de un MVC.
Si lo lees con la atención que te pido, verás como, al acabar, entenderás

perfectamente en qué consiste el MVC y podrás empezar a aplicarlo en tus
proyectos.
El ejemplo con el que vamos a trabajar es este: supongamos que queremos

programar una pequeña aplicación web que nos permita hacer publicaciones en una
especie de blog simplificado.
Esas publicaciones se guardan como registros en una tabla de una base de datos
que trabaja con el sistema.
En el código de ejemplo sobre el que vamos a trabajar, nos vamos a centrar en una
funcionalidad concreta de este mini-blog: el listado de los artículos existentes en la
base de datos en el cual están almacenadas toda la información correspondiente al
proyecto.
CÓDIGO MONOLÍTICO.
Una primera aproximación a la solución, sin usar ningún patrón de arquitectura en

absoluto, podría ser esta (échale un vistazo y asegúrate de entenderlo):
18
Figura N° 24: Código Monolítico
Esta solución se denomina monolítica, porque incluye todo el código necesario en el

mismo bloque.
Por supuesto, para un ejemplo tan simple como este, el código monolítico es más
que suficiente, pero en un sistema más complejo pronto empieza a convertirse en un
monstruo inmanejable.
PRIMERA MEJORA: CONTROLADOR + VISTA
Vamos a aproximarnos un poco a la solución MVC separando ese código monolítico

en dos bloques (que guardaremos en archivos distintos):
19
• Un controlador (archivo index.php).
• Una vista (archivo showAllArticles.php).
Primero, el controlador. Se encargará de recuperar los datos, pero no de mostrarlos.

Generar el interfaz de usuario, es decir, el HTML, será la labor que le dejaremos a la
vista.
El controlador preparará esos datos y los empaquetará en un array para que estén
disponibles en la vista.
Y la vista la insertaremos en el controlador con un include().
Figura N° 25: Controlador en el MVC
La vista que mostrará los datos del array contiene un código muy semejante al de
la solución monolítica, solo que ahora estará ubicada en un archivo aparte
(showAllArticles.php) y hará un bucle sobre el array de resultados que le ha
preparado el controlador:
20
Figura N° 26: Vista en el MVC
SEGUNDA MEJORA: MODELO, VISTA Y CONTROLADOR.
En esta segunda mejora, dividiremos el código en tres bloques (ubicados, de nuevo,

en archivos diferentes):
• Un modelo para los artículos (archivo articles.php). Contendrá una clase con
un método que se encargará de acceder a la base de datos y empaquetar el
resultado de la consulta en un array.
• Una vista (archivo showAllArticles.php). Se encargará de generar el HTML

con el resultado de la consulta.
• Un controlador (archivo index.php). Se encargará de invocar al modelo y a la

vista en el orden correcto.
Por lo tanto, el controlador (index.php), al extraer de él todo lo que tenga que ver con
la base de datos, se queda en algo tan sencillo como esto:
21
El modelo (articles.php) consta de una clase con solo un método (de momento)
encargado de consultar todos los artículos y devolverlos empaquetados en un array:
Figura N° 28: Modelo en el MVC
Por último, la vista (showAllArticles.php) será exactamente igual que en la versión

anterior: un recorrido por el array de artículos para mostrarlos en formato HTML:
22
TAREA N°03
Programación usando JavaScript y JQuery
Una introducción a JavaScript
Veamos qué tiene de especial JavaScript, qué podemos lograr con este lenguaje y
qué otras tecnologías se integran bien con él.
¿Qué es JavaScript?
JavaScript fue creado para “dar vida a las páginas web”.
Los programas en este lenguaje se llaman scripts. Se pueden escribir directamente

en el HTML de una página web y ejecutarse automáticamente a medida que se carga
la página.
Los scripts se proporcionan y ejecutan como texto plano. No necesitan preparación

especial o compilación para correr.
En este aspecto, JavaScript es muy diferente a otro lenguaje llamado Java.
¿Por qué se llama JavaScript?
Cuando JavaScript fue creado, inicialmente tenía otro nombre: “LiveScript”. Pero
Java era muy popular en ese momento, así que se decidió que el posicionamiento
de un nuevo lenguaje como un “Hermano menor” de Java ayudaría.
Pero a medida que evolucionaba, JavaScript se convirtió en un lenguaje

completamente independiente con su propia especificación llamada ECMAScript, y
ahora no tiene ninguna relación con Java.
Hoy, JavaScript puede ejecutarse no solo en los navegadores, sino también en

servidores o incluso en cualquier dispositivo que cuente con un programa especial
llamado El motor o intérprete de JavaScript.
El navegador tiene un motor embebido a veces llamado una “Máquina virtual de

JavaScript”.
¿Como trabajan los motores?
Los motores son complicados, pero los fundamentos son fáciles.
1. El motor (embebido si es un navegador) lee (“analiza”) el script.

2. Luego convierte (“compila”) el script a lenguaje de máquina.
3. Por último, el código máquina se ejecuta, muy rápido.
23
El motor aplica optimizaciones en cada paso del proceso. Incluso observa como el
script compilado se ejecuta, analiza los datos que fluyen a través de él y aplica
optimizaciones al código maquina basadas en ese conocimiento.
¿Qué puede hacer JavaScript en el navegador?
El JavaScript moderno es un lenguaje de programación “seguro”. No proporciona

acceso de bajo nivel a la memoria ni a la CPU (UCP); ya que se creó inicialmente
para los navegadores, los cuales no lo requieren.
Las capacidades de JavaScript dependen en gran medida en el entorno en que se

ejecuta. Por ejemplo, Node.JS soporta funciones que permiten a JavaScript leer y
escribir archivos arbitrariamente, realizar solicitudes de red, etc.
En el navegador JavaScript puede realizar cualquier cosa relacionada con la

manipulación de una página web, interacción con el usuario y el servidor web.
Por ejemplo, en el navegador JavaScript es capaz de:
• Agregar nuevo HTML a la página, cambiar el contenido existente y modificar

estilos.
• Reaccionar a las acciones del usuario, ejecutarse con los clics del ratón,
movimientos del puntero y al oprimir teclas.
• Enviar solicitudes de red a servidores remotos, descargar y cargar archivos
(Tecnologías llamadas AJAX y COMET).
• Obtener y configurar cookies, hacer preguntas al visitante y mostrar mensajes.
• Recordar datos en el lado del cliente con el almacenamiento local (“local
storage”).
¿Qué NO PUEDE hacer JavaScript en el navegador?
Las capacidades de JavaScript en el navegador están limitadas para proteger la

seguridad de usuario. El objetivo es evitar que una página maliciosa acceda a
información privada o dañe los datos de usuario.
Ejemplos de tales restricciones incluyen:
JavaScript en el navegador no puede leer y escribir arbitrariamente archivos

en el disco duro, copiarlos o ejecutar programas. No tiene acceso directo a
funciones del Sistema operativo (OS).
Los navegadores más modernos le permiten trabajar con archivos, pero el acceso
es limitado y solo permitido si el usuario realiza ciertas acciones, como “arrastrar” un
archivo a la ventana del navegador o seleccionarlo por medio de una etiqueta
<input>.
Existen maneras de interactuar con la cámara, micrófono y otros dispositivos, pero
eso requiere el permiso explícito del usuario. Por lo tanto, una página habilitada para
JavaScript no puede habilitar una cámara web para observar el entorno y enviar la
información a la NSA.
24
Diferentes pestañas y ventanas generalmente no se conocen entre sí. A veces

sí lo hacen: por ejemplo, cuando una ventana usa JavaScript para abrir otra.
Pero incluso en este caso, JavaScript no puede acceder a la otra si provienen
de diferentes sitios (de diferente dominio, protocolo o puerto).
Esta restricción es conocida como “política del mismo origen” (“Same Origin Policy”).
Es posible la comunicación, pero ambas páginas deben acordar el intercambio de
datos y también deben contener el código especial de JavaScript que permite
controlarlo. Cubriremos esto en el tutorial.
De nuevo: esta limitación es para la seguridad del usuario. Una página de

http://algunsitio.com, que el usuario haya abierto, no debe ser capaz de acceder a
otra pestaña del navegador con la URL http://gmail.com y robar la información de
esta otra página.
JavaScript puede fácilmente comunicarse a través de la red con el servidor de

donde la página actual proviene. Pero su capacidad para recibir información
de otros sitios y dominios está bloqueada. Aunque sea posible, esto requiere
un acuerdo explícito (expresado en los encabezados HTTP) desde el sitio
remoto. Una vez más: esto es una limitación de seguridad.
Figura N° 30: Funcionamiento de JavaScript
25
Tales limitaciones no existen si JavaScript es usado fuera del navegador; por

ejemplo, en un servidor. Los navegadores modernos también permiten
complementos y extensiones que pueden solicitar permisos extendidos.
¿Qué hace a JavaScript único?
Existen al menos tres cosas geniales sobre JavaScript:
• Completa integración con HTML y CSS.
• Las cosas simples se hacen de manera simple.
• Soportado por la mayoría de los navegadores y habilitado de forma

predeterminada.
JavaScript es la única tecnología de los navegadores que combina estas tres cosas.
Eso es lo que hace a JavaScript único. Por esto es la herramienta más extendida
para crear interfaces de navegador.
Dicho esto, JavaScript también permite crear servidores, aplicaciones móviles, etc.
Lenguajes “por arriba de” JavaScript
La sintaxis de JavaScript no se adapta a las necesidades de todos. Personas

diferentes querrán diferentes características.
Esto es algo obvio, porque los proyectos y requerimientos son diferentes para cada
persona.
Así que recientemente han aparecido una gran cantidad de nuevos lenguajes, los
cuales son transpilados (convertidos) a JavaScript antes de ser ejecutados en el
navegador.
Las herramientas modernas hacen la conversión (Transpilación) muy rápida y

transparente, permitiendo a los desarrolladores codificar en otros lenguajes y
convertirlo automáticamente detrás de escena.
Ejemplos de tales lenguajes:
• CoffeeScript Es una “sintaxis azucarada” para JavaScript. Introduce una sintaxis

corta, permitiéndonos escribir un código más claro y preciso. Usualmente
desarrolladores de Ruby prefieren este lenguaje.
• TypeScript se concentra en agregar “tipado estricto” (“strict data typing”) para

simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por
Microsoft.
26
• FLow también agrega la escritura de datos, pero de una manera diferente.

Desarrollado por Facebook.
• Dart es un lenguaje independiente, tiene su propio motor que se ejecuta en

entornos que no son de navegador (como aplicaciones móviles), pero que
también se puede convertir/transpilar a JavaScript. Desarrollado por Google.
• Brython es un transpilador de Python a JavaScript que permite escribir

aplicaciones en Python puro sin JavaScript.
• Kotlin es un lenguaje moderno, seguro y conciso que puede apuntar al

navegador o a Node.
Hay más. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes
transpilados, deberíamos conocer también JavaScript para realmente entender qué
estamos haciendo.
RESUMEN
JavaScript fue inicialmente creado como un lenguaje solamente para el navegador,

pero ahora es usado también en muchos otros entornos.
Hoy en día, JavaScript tiene una posición única como el lenguaje más extendido y
adoptado de navegador, con una integración completa con HTML y CSS.
Existen muchos lenguajes que se convierten o transpilan a JavaScript y aportan

ciertas características. Es recomendable echarles un vistazo, al menos brevemente,
después de dominar JavaScript.
27
TAREA N°04
Programación usando AngularJS
Angular JS Introducción.
Y finalmente ejecutar el script generado, aunque es recomendable una revisión

previa de las sentencias generadas:
¿Qué es AngularJS?
AngularJS es un marco de código abierto Modelo-View-Controller que es similar al

marco de JavaScript.
Angular JS es probablemente uno de los marcos web modernos más populares

disponibles hoy en día. Este marco se utiliza para desarrollar principalmente
aplicaciones de una sola página. Este marco ha sido desarrollado por un grupo de
desarrolladores de Google mismo.
Debido al apoyo de Google y las ideas de un amplio foro comunitario, el marco

siempre se mantiene actualizado. Además, siempre incorpora las últimas tendencias
de desarrollo del mercado.
Características de AngularJS
Angular tiene las siguientes características clave que lo convierten en uno de los
marcos de gran alcance en el mercado.
MVC – El marco se basa en el famoso concepto de MVC (Modelo-View-Controller).

Este es un patrón de diseño utilizado en todas las aplicaciones web modernas. Este
patrón se basa en dividir la capa de lógica empresarial, la capa de datos y la capa
de presentación en secciones separadas. La división en diferentes secciones se
realiza para que cada una pueda ser manejada con mayor facilidad.
Enlace del modelo de datos – no es necesario escribir código especial para enlazar
datos a los controles HTML. Esto puede hacerlo Angular simplemente agregando
algunos fragmentos de código.
Escribir menos código – cuando se lleva a cabo la manipulación DOM, se requirió

escribir mucho JavaScript para diseñar cualquier aplicación. Pero con Angular, se
sorprenderá con la menor cantidad de código que necesita para escribir para la
manipulación DOM.
Pruebas unitarias listas – Los diseñadores de Google no solo desarrollaron Angular

sino que también desarrollaron un marco de pruebas llamado “Karma” que ayuda en
el diseño de pruebas unitarias para aplicaciones AngularJS.
28
Arquitectura AngularJS
Angular.js sigue la arquitectura MVC, el diagrama del marco MVC como se muestra
a continuación.
Figura N° 31: Arquitectura AngularJS
• El controlador representa la capa que tiene la lógica empresarial. Los eventos de

usuario activan las funciones que se almacenan dentro de su controlador. Los
eventos de usuario son parte del controlador.
• Las vistas se utilizan para representar la capa de presentación que se

proporciona a los usuarios finales
• Los modelos se utilizan para representar los datos. Los datos en su modelo
pueden ser tan simples como simplemente tener declaraciones primitivas. Por
ejemplo, si mantiene una solicitud de estudiante, su modelo de datos podría tener
un ID de estudiante y un nombre. O también puede ser complejo al tener un
modelo de datos estructurado. Si usted está manteniendo una aplicación de
propiedad de automóviles, puede tener estructuras para definir el vehículo en sí
en términos de capacidad del motor, capacidad de asiento, etc.
29
Ventajas de AngularJS
• Dado que es un marco de código abierto, puede esperar que la cantidad de

errores o problemas sea mínima.
• Encuadernación bidireccional: Angular.js mantiene sincronizada la capa de datos

y presentación. Ahora no necesita escribir código JavaScript adicional para
mantener los datos en su código HTML y sus datos más adelante sincronizados.
Angular.js hará esto automáticamente por usted. Solo necesita especificar qué
control está vinculado a qué parte de su modelo.
Figura N° 32: Encuadernación bidireccional en AngularJS
• Enrutamiento: Angular puede encargarse del enrutamiento, lo que significa

moverse de una vista a otra. Esta es la clave fundamental de las aplicaciones de
una sola página; en la que puede moverse a diferentes funcionalidades en su
aplicación web basadas en la interacción del usuario, pero aún así permanecer
en la misma página.
• Angular admite pruebas, pruebas unitarias y pruebas de integración.
• Se extiende HTML proporcionando sus propios elementos llamados directivas.

En un nivel alto, las directivas son marcadores en un elemento DOM (como un
atributo, nombre de elemento y comentario o clase CSS) que le dicen al
compilador HTML de AngularJS que adjunte un comportamiento especificado a
ese elemento DOM. Estas directivas ayudan a ampliar la funcionalidad de los
elementos HTML existentes para dar más potencia a su aplicación web.
AngularJS Hello World Application: su primer programa de ejemplo
La mejor manera de ver el poder de una aplicación AngularJS es crear su primer

programa básico “Hello World” aplicación en Angular.js.
Hay muchos entornos de desarrollo integrados que puede usar para el desarrollo de
AngularJS, algunos de los más populares se mencionan a continuación. En nuestro
ejemplo, estamos usando Webstorm como nuestro IDE.
1. Tormenta web
2. Texto Sublime
3. AngularJS Eclipse
4. Estudio visual
30
Hola mundo, AngularJS
El siguiente ejemplo muestra la forma más fácil de crear su primera aplicación “Hello
world” en AngularJS.
Figura N° 33: Aplicación “Hola Mundo” en AngularJS
Explicación del código:
1. La palabra clave “ng-app” se utiliza para denotar que esta aplicación debe
considerarse como una aplicación js angular. Cualquier nombre se puede dar a
esta aplicación.
2. El controlador es lo que se utiliza para mantener la lógica empresarial. En la
etiqueta h1, queremos acceder al controlador, que tendrá la lógica para mostrar
“HelloWorld”, por lo que podemos decir, en esta etiqueta queremos acceder al
controlador llamado “HelloWorldCtrl”.
3. Estamos utilizando una variable miembro llamada “message” que no es más que
un marcador de posición para mostrar el mensaje “Hello World”.
4. La “etiqueta de script” se utiliza para hacer referencia al script angular.js que tiene
toda la funcionalidad necesaria para js angular. Sin esta referencia, si tratamos
de usar cualquier función AngularJS, no funcionarán.
5. “Controller” es el lugar donde realmente estamos creando nuestra lógica de
negocio, que es nuestro controlador. Los detalles de cada palabra clave se
explicarán en los capítulos siguientes. Lo que es importante tener en cuenta que
estamos definiendo un método de controlador llamado ‘HelloWorldCtrl’ al que se
hace referencia en el paso 2.
6. Estamos creando una “función” que se llamará cuando nuestro código llame a
este controlador. El objeto $scope es un objeto especial en AngularJS que es un
objeto global utilizado dentro de Angular.js. El objeto $scope se utiliza para
administrar los datos entre el controlador y la vista.
7. Estamos creando una variable miembro llamada “message”, asignándole el valor
de “HelloWorld” y adjuntando la variable miembro al objeto scope.
31
NOTA: La directiva ng-controller es una palabra clave definida en AngularJS (paso

#2) y se utiliza para definir controladores en su aplicación. Aquí en nuestra
aplicación, hemos utilizado la palabra clave ng-controller para definir un controlador
llamado ‘HelloWorldCtrl’. La lógica real para el controlador se creará en (paso #5).
Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando

ejecute el código en el navegador.
Salida:
Aparecerá el mensaje “Hola Mundo”.
Figura N° 34: Resultado de la aplicación “Hola Mundo” en AngularJS
32
REFERENCIAS BIBLIOGRÁFÍCAS
Referencia N° 01:
DIEGO.COM. (21 de octubre del 2021). Tutorial del PDO.
https://diego.com.es/tutorial-de-pdo
Referencia N° 02:
Gustavo B. (11 de enero del 2023). ¿Qué es AJAX y como funciona?.
https://www.hostinger.es/tutoriales/que-es-ajax
Referencia N° 03:
DWES DOCS. (20 de febrero del 2023). Arquitectura MVC
Referencia N° 04:
JAVASCRIPT.INFO. (27 de noviembre del 2023). El Tutorial de JavaScript Moderno
Referencia N° 05:
GURU99. (01 de noviembre del 2023). Tutorial AngularJS para principiantes: ¡Aprende
AngularJS en 7 días!
https://guru99.es/angularjs-tutorial/
33
REFERENCIAS DE IMÁGENES
Figura N° 01: Ver controladores disponibles en el servidor
Figura N° 02: Conexión a la base de datos MySQL

Figura N° 03: Cerrar conexión MySQL

Figura N° 04: Manejo de errores en PDO

Figura N° 05: Configuración del modo de error en PDO

Figura N° 06: Insertar datos utilizando interrogantes para los valores

Figura N° 07: Insertar datos utilizando variables para los valores

Figura N° 08: Insertar datos utilizando el método lazy

Figura N° 09: Insertar datos utilizando objetos

Figura N° 10: Enlazar valores con bindParam()

Figura N° 11: Enlazar valores con bindValue()

Figura N° 12: Consulta de datos utilizando FETCH_ASSOC

34
Figura N° 13: Consulta de datos utilizando FETCH_BOUND

Figura N° 14: Consulta de datos utilizando FETCH_CLASS

Figura N° 15: Llamando al constructor antes que se asignen los datos

Figura N° 16: Pasar argumentos al constructor

Figura N° 17: Datos diferentes para cada objeto

Figura N° 18: Consulta de datos utilizado PDOStatement

Figura N° 19: Ejecución de una consulta con query()

Figura N° 20: Ejemplo práctica del funcionamiento de AJAX

https://iescelia.org/docs/dwes/_site/mvc/
Figura N° 21: Diagrama de funcionamento de AJAX

Figura N° 22: Esquema de la arquitectura a tres capas

Figura N° 23: Esquema de la arquitectura MVC

Figura N° 24: Código Monolítico


35


Figura N° 28: Modelo en el MVC


Figura N° 30: Funcionamiento de JavaScript

https://es.javascript.info/intro
Figura N° 31: Arquitectura AngularJS

Figura N° 32: Encuadernación bidireccional en AngularJS

Figura N° 33: Aplicación “Hola Mundo” en AngularJS

Figura N° 34: Resultado de la aplicación “Hola Mundo” en AngularJS

36

PDSD-329 Material

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PDSD-329 Material

Cargado por

Copyright:

Formatos disponibles

Fundamentos de Programación Web

Conexión a Base de Datos MySQL - PDO

Como crear una Conexión inicial a MySQL con PDO (PHP)

Para ver los controladores (drivers) disponibles en tu servidor, puedes emplear el

Figura N° 01: Ver controladores disponibles en el servidor

El sistema PDO se fundamenta en 3 clases:

La clase PDO se encarga de mantener la conexión a la base de datos y otro tipo de

La clase PDOException se utiliza para manejar los errores.

2.- CONECTAR A UNA BASE DE DATOS CON PDO.

El primer argumento de la clase PDO es el DSN, Data Source Name, en el cual se

Figura N° 02: Conexión a la base de datos MySQL

DBH significa Database Handle, y es el nombre de variable que se suele utilizar

Figura N° 03: Cerrar conexión MySQL

3. EXCEPCIONES Y OPCIONES CON PDO.

Figura N° 04: Manejo de errores en PDO

No importa el modo de error, si existe un fallo en la conexión siempre producirá una

• PDO::ERRMODE_SILENT. Es el modo de error por defecto. Si se deja así habrá

El modo de error se puede aplicar con el método PDO::setAttribute o mediante un

Figura N° 05: Configuración del modo de error en PDO

Existen más opciones aparte de el modo de error ATTR_ERRMODE, algunas de

• ATTR_CASE. Fuerza a los nombres de las columnas a mayúsculas o minúsculas

4.- REGISTRAR DATOS CON PDO.

La clase PDOStatement es la que trata las sentencias SQL. Una instancia de

Utilizando interrogantes para los valores:

Figura N° 06: Insertar datos utilizando interrogantes para los valores

Utilizando variables para los valores:

Figura N° 07: Insertar datos utilizando variables para los valores

Figura N° 08: Insertar datos utilizando el método lazy

Es el método execute() el que realmente envía los datos a la base de datos.

Si no se llama a execute no se obtendrán los resultados sino un error.

Figura N° 09: Insertar datos utilizando objetos

5.- DIFERENCIA ENTRE bindParam() y bindValue().

Existen dos métodos para enlazar valores:

Figura N° 10: Enlazar valores con bindParam()

Con bindValue() se enlaza el valor de la variable y permanece hasta execute():

Figura N° 11: Enlazar valores con bindValue()

6.- CONSULTAR DATOS CON PDO.

La consulta de datos se realiza mediante PDOStatement::fetch, que obtiene la

• PDO::FETCH_ASSOC: devuelve un array indexado cuyos keys son el nombre

• PDO::FETCH_BOTH: valor por defecto. Devuelve un array indexado cuyos keys

• PDO::FETCH_BOUND: asigna los valores de las columnas a las variables

• PDO::FETCH_CLASS: asigna los valores de las columnas a propiedades de una

• PDO::FETCH_INTO: actualiza una instancia existente de una clase.

• PDO::FETCH_OBJ: devuelve un objeto anónimo con nombres de propiedades

• PDO::FETCH_LAZY: combina PDO::FETCH_BOTH y PDO::FETCH_OBJ,

Los más utilizados son FETCH_ASSOC, FETCH_OBJ, FETCH_BOUND y

Figura N° 12: Consulta de datos utilizando FETCH_ASSOC

Con FETCH_BOUND debemos emplear el método bindColumn():

Figura N° 13: Consulta de datos utilizando FETCH_BOUND

Figura N° 14: Consulta de datos utilizando FETCH_CLASS

Figura N° 15: Llamando al constructor antes que se asignen los datos

Si en el ejemplo anterior añadimos PDO::FETCH_PROPS_LATE, el nombre y la

Figura N° 16: Pasar argumentos al constructor

O incluso datos diferentes para cada objeto:

Figura N° 17: Datos diferentes para cada objeto

Finalmente, para la consulta de datos también se puede emplear directamente

Figura N° 18: Consulta de datos utilizado PDOStatement

7.- DIFERENCIA ENTRE QUERY() Y PREPARE() / EXECUTE().

En los ejemplos anteriores para las sentencias en PDO, no se ha introducido el

execute() ejecuta una sentencia preparada lo que permite enlazar parámetros y

Figura N° 19: Ejecución de una consulta con query()

Se cambia prepare por query y se quita el execute.

8.- TRANSACCIONES CON PDO.