LIBRO PHP

Desarrollo Web con PHP Oscar Capuñay Uceda

Contenido

DEDICATORIA 7

AGRADECIMIENTOS 7

INTRODUCCIÓN 9

I. PREPARANDO LA PLATAFORMA DE DESARROLLO 11

INSTALACIÓN DEL SERVIDOR WEB Y PHP 11 INSTALACIÓN EN WINDOWS 11

II. DHTML 16

HTML 16 FORMATO DE TEXTO CON HTML 19 LISTAS 19 COMENTARIOS NO VISIBLES EN LA PANTALLA 22 CARACTERES ESPECIALES 23 ENLACES O HIPERVÍNCULOS 25 IMÁGENES 28 TABLAS 31 FORMULARIOS 38 HTML 4 45 JAVASCRIPT 61 ELEMENTOS BÁSICOS 62 COMENTARIOS 62 LITERALES 63 TIPOS DE DATOS 64 VARIABLES 64 OPERADORES 65 ESTRUCTURAS DE CONTROL 68 OBJETOS 70 OBJETOS PREDEFINIDOS 71 EVENTOS 75 DEFINICIÓN MEDIANTE CÓDIGO 77 MODELO DE OBJETOS DEL DOCUMENTO 78 OBJETO WINDOW 79 OBJETO DOCUMENT 82 OBJETO FORM 83 OTROS OBJETOS 88 FICHEROS .JS 90 HOJAS DE ESTILO EN CASCADA 91 SINTAXIS Y TIPOS BÁSICOS DE DATOS EN CSS2 95 PALABRAS CLAVE 97

III. INICIANDO LA PROGRAMACIÓN CON PHP 99

QUE ES PHP? 99 VARIABLES 99 CONSTANTES 99 TIPOS DE DATOS 100 EXPRESIONES 100 OPERADORES 102 OPERADORES DE ARITMÉTICA 103 OPERADORES DE ASIGNACIÓN 103 OPERADORES DE COMPARACIÓN 104 OPERADORES DE CONTROL DE ERRORES 105 OPERADORES DE EJECUCIÓN 106 OPERADORES DE INCREMENTO/DECREMENTO 106 OPERADORES DE LÓGICA 108 OPERADORES DE CADENA 108 OPERADORES DE MATRICES 109 OPERADORES DE TIPO 110

IV. ESTRUCTURAS DE CONTROL 113

SI (CONDICIONAL): IF 113 ELSE 114 ELSEIF 114 FOR 115 WHILE 115 DO..WHILE 115

V. ACCESO A DATOS CON PHP 117

FORMULARIOS HTML Y PHP 124 SUBIENDO ARCHIVOS AL SERVIDOR 129 ACCESO A BASES DE DATOS 132 CREANDO UNA BASE DE DATOS MYSQL EN MYSQL ADMINISTRATOR 132 CREANDO UNA BASE DE DATOS MYSQL EN PHPMYADMIN 137 ACCESO A MYSQL DESDE PHP 143 INSTALACIÓN DE POSTGRESQL SOBRE WINDOWS XP 151 CREANDO UNA BASE DE DATOS POSTGRESQL EN PGADMIN III 158 CREANDO UNA BASE DE DATOS POSTGRESQL EN PHPPGADMIN 165 ACCESO A POSTGRESQL DESDE PHP 170 ACCESO A MS SQL-SERVER DESDE PHP 177

VI. PHP ORIENTADO A OBJETOS 187

CLASES EN PHP 187 INSTANCIA DE UN OBJETO 187 EXTENDIENDO OBJETOS 188

AUTO CARGA DE OBJETOS 189 ACCESO A MYSQL CON PHP ORIENTADO A OBJETOS 191 MYSQLI 191 MYSQLI_STMT 193 MYSQLI_RESULT 194 PAGINANDO RESULTADOS 202 ARQUITECTURA MVC 205 MVC CON PHP 205 MVC Y PHP CON ACCESO A BASE DE DATOS 212 PDO – PHP DATA OBJECT 215 CLASES PREDEFINIDAS 215 CONEXIONES CON PDO 218 EJECUCIÓN DE SENTENCIAS PREPARADAS CON PDO 221

VII. SEGURIDAD WEB 225

SEGURIDAD EN EL SISTEMA DE ARCHIVOS 225 SEGURIDAD EN BASE DE DATOS 227 INYECCIÓN SQL 229 SESIONES 242 AUTENTIFICACIÓN HTTP CON PHP 246 LOGIN 248 CAPTCHA 253

VIII. GENERACIÓN DE ARCHIVOS CON PHP 257

IMÁGENES 257 ARCHIVOS PDF 264 FPDF 264 ARCHIVOS XLS 274

IX. PHP + AJAX 281

AJAX 281 XAJAX 282 EVENTOS CON XAJAX 291 TRABAJO CON FORMULARIOS EN XAJAX 293 ERROR COMÚN 298 BÚSQUEDA EN BASE DE DATOS CON XAJAX 299 ADMINISTRACIÓN DE DATOS CON AJAX 301 CONTROLADOR CON AJAX 301 CAPA DE DATOS CON AJAX 306 VISTA CON AJAX 308

X. REFERENCIAS BIBLIOGRAFICAS 313

XI. ANEXOS 314

LISTA DE EJEMPLOS 314 LISTA DE TABLAS 318 LISTA DE FIGURAS 319

Dedicatoria Este libro lo dedico a Dios, a mi esposa Kelly, y a mi hijo Oscar Armando.

Agradecimientos Este libro es gracias a la bendición de Dios, al apoyo y aliento de mis padres, a la colaboración de mis hermanos Carlos, Jaime y Benjamín y al amor de mi esposa Kelly.

Introducción

Introducción PHP desde el año 1997 ha crecido aceleradamente, su versión 4 lanzada en el 2000 ganó mucha popularidad y logró estar instalado en mas de la cuarta parte de los servidores Web a nivel mundial, esto la convirtió en el 2003 en la plataforma Web con mayor presencia en Internet en comparación con sus similares. En la actualidad muchas empresas han optado por el desarrollo de sus aplicaciones con PHP, esto ha generado una creciente demanda de profesionales con habilidades y conocimiento de este lenguaje, es por este motivo que decidí escribir este libro, y aportar algunos conocimientos basados en la experiencia obtenida en los últimos seis años desarrollando aplicaciones Web.

Oscar E Capuñay Uceda 9

Preparando la plataforma de desarrollo

I. Preparando la plataforma de desarrollo

Instalación del servidor Web y PHP

Instalación en Windows Para trabajar con PHP vamos a utilizar WAMP un software que instala el servidor Web APACHE, PHP y el manejador de base de datos MySQL. Veamos a continuación los pasos de la instalación:

Figura 1. Inicio de la instalación de WAMP



Figura 2. Licencia de uso de WAMP

Si estamos de acuerdo con los términos de la licencia, seleccionamos “I

ccept the agreement” y presionamos el botón “Next” para continuar. a

Figura 3. Destino de la instalación de WAMP

Luego seleccionamos la ubicación de los paquetes que vamos a instalar.



Figura 4. Seleccionar menú de inicio de WAMP

Luego indicamos el nombre del acceso directo que nos permitirá cargar WAMP desde el menú de inicio.

Figura 5. Inicio de WAMP en el arranque del Sistema Operativo.

Después elegimos si queremos que WAMP se inicie automáticamente cuando se inicie una sesión en el sistema operativo.



Figura 6. Resumen de la configuración de la instalación

Ahora nos muestra el resumen de la configuración elegida antes del inicio de la instalación. Sólo nos queda presionar el botón “Install” para instalar los programas.

Figura 7. Instalando WAMP



Figura 8. Instalación de WAMP completa

Finalmente la instalación termina y nos muestra la pantalla anterior en la que podemos elegir si se carga WAMP en ese momento o posteriormente. Hay que cerciorarnos que cuando WAMP se inicie los servicios deben estar iniciados correctamente, haciendo clic en el icono que aparece en la barra de

tareas: . Luego de hacer clic aparecerá un menú:

Figura 9. Menú de WAMP


DHTML

II. DHTML Para desarrollar aplicaciones Web con PHP es necesario tener

define el lenguaje HTML como “un lenguaje reconocido mente y que permite publicar información de forma global”. Desde ra definición, el lenguaje HTML ha sido un lenguaje utilizado

s electrónicos pero es un lenguaje que aciones electrónicas (aplicaciones Web

es, educativas, financieras y también muy utilizada en buscadores,

e HTML, cuenta con un conjunto de etiquetas o también llamadas s cuales funcionan de la siguiente manera:

rla así: <br />.

conocimientos de HTML Dinámico – DHTML, debido a que en los documentos Web no sólo se escribe un lenguaje sino que es necesario utilizar diferentes lenguajes para la implementación de las diversas rutinas que se pueden requerir para un buen funcionamiento de la aplicación. Debido a esto a continuación veremos un repaso rápido de los temas relacionados con DHTML.

HTML HTML es un lenguaje que permite definir los elementos que conforman una página Web. Los diseñadores y programadores de páginas Web utilizan el lenguaje HTML de modo que los navegadores que utilizamos los usuarios muestran las páginas Web después de interpretar su contenido HTML.

l W3C Euniversalsu primeexclusivamente para crear documentose utiliza en la mayoría de apliccomercialetc.). El lenguaj"Tags", la <tag> Modelo de Inicio de una etiqueta. </tag> modelo de Cierre de una etiqueta. El texto o cualquier elemento de la página Web, que esté entre ambas etiquetas (de inicio y cierre), estará influenciado por la acción que éstas realicen. Por ejemplo, todo el documento HTML debe estar entre las tiquetas <HTML> y </HTML>. e

<HTML> [Documento Web] </HTML> Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque se recomienda que las etiquetas o tags que no tienen incluyan un “/” antes del cierre. Por ejemplo la etiqueta BR se recomienda escribi Es indiferente escribir las etiquetas en mayúsculas o minúsculas. Pero se recomienda escribirlas en minúsculas. Para diferenciarlas del texto común, las escribiremos en mayúsculas.


DHTML

Toda página Web, esta dividida en dos partes bien definidas: la primera es la “cabecera” o “encabezado” y la segunda es el “cuerpo“ o “contenido” del

a cabecera se define con la etiqueta <HEAD> y su finalización es con cera se coloca la información sobre la página Web,

ero hay que tener en cuenta que esta información no se muestra en el r, excepto el título de la página que se muestra en la barra de título tana del navegador, el cual se encuentra entre las etiquetas

está comprendido entre las etiquetas <BODY> y </BODY>. que aparezca en la pantalla

l encabezado y el cuerpo, y as utilizadas para delimitar estas partes, las

TML para construir una página Web deben estar en el siguiente

<HEAD> <TITLE> Título de la p

/HEAD>

ner varios títulos, los cuales escribiremos y , etc. (hasta H6), el número

xisten otros tags como por ejemplo, los separadores horizontales

documento. L</HEAD>. En la cabepnavegadode la ven<TITLE> y </TITLE>.

,El cuerpoDentro de éste está todo lo que queremos

(texto, imágenes, etc.) principal Por lo mencionado anteriormente, podemos concluir que la estructura de un documento Web (página Web) tiene dos partes: eque de acuerdo a las etiquetetiquetas Horden: <HTML>

ágina </TITLE> <<BODY> [En este lugar escribiremos el contenido de la página] </BODY> </HTML> Antes de crear nuestra primera página Web, debemos tener ciertas consideraciones sobre el texto que vamos a incluir en el documento: No hay necesidad de tratar de justificar el texto al ancho del navegador, pues el texto de una página Web se caracteriza por justificarse de acuerdo al ancho que tome la ventana, además cuando queramos pasar a un nuevo párrafo, es

ecesario utilizar la etiqueta <P>. n El contenido de la página puede teentre las etiquetas <H1> y </H1>, <H2> </H2>en la etiqueta de título indica el tamaño de los caracteres de la frase o palabra. El tamaño mayor es el correspondiente al número 1. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (debemos tomar en cuenta que a esta etiqueta no la soportan todos los navegadores, aunque sí la mayoría de ellos). Esta etiqueta centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc. E(horizontal rules), que se insertan con la etiqueta <HR> (este tag no tiene la correspondiente etiqueta de cierre). Con ella se obtiene una raya horizontal


DHTML

tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, o podemos también especificar su ancho en píxeles o en porcentaje respecto al ancho de la ventana.

era página Web

<HEAD> </TITLE>

mi primera página Web programando con HTML, aun es muy sencillo el

Ejemplo 1: Prim Ejercicio01.html <HTML> <TITLE> Mi Primer Ejercicio </HEAD> <BODY> <H1> <CENTER> Ejercicio 1 </CENTER> </H1> <HR> Esta es diseño pero pronto haremos páginas más complejas. <P> Este es el segundo párrafo. </BODY>

</HTML> Resultado Web

Figura 10. Resultado de ejercicio01.html

Cuando programsea necesario, mayorme

emos, tratemos de colocar algunas líneas en blanco cuando nte para separar la cabecera del cuerpo de la

página, y además justificar a la izquierda las líneas en varios niveles, para identificar con mucha mayor claridad el código que se encuentra dentro de ciertas etiquetas, como lo podemos notar en el ejemplo anterior. De hecho, todo el código podría estar escrito dentro de una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. En el ejemplo podemos notar la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.


DHTML

Formato de Texto con texto, este

os crear un s la etiqueta <P>, esta etiqueta inserta una línea en

ma del párrafo anterior. Pero si deseamos realizar nea, es decir pasar a la siguiente línea sin incluir una en blanco,

mos el tag <BR>. Esta etiqueta por su funcionamiento no tiene una

y Cursiva bajamos con texto formateado, las características más utilizadas

a y cursiva. Pues en HTML, podemos darle esas características al tilizando las etiquetas: <B> para poner el texto en negrita, y <I> para

Cada una de ellas si cuenta con su respectiva etiqueta de >).

spacios en blanco

ndices y Subíndices matemáticas puede interesar poder escribir índices y

nsiguen con las etiquetas <SUP> </SUP> y <SUB> te. Por ejemplo: m2 se obtiene con: m<SUP>2</SUP>

/SUB>.

ntos es necesario mostrarlos en forma de listas, las cuales pueden ser de diferentes tipos: 1. Listas sin orden (sin numerar) 2. Listas ordenadas (numeradas) 3. Listas de definición. Una lista sin orden (Unordered List) sirve para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente: <UL> <LI> Naranja

LI> Manzana

HTML En ejemplo anterior, podemos notar que cuando colocamos

ce sin ningún formato en especial. Sólo, cuando quisimaparenuevo párrafo, utilizamoblanco después de la últiun salto de líutilizareetiqueta de cierre. Negrita Cuando tra

egritson: nexto utformato cursiva. c rre (</B> y </Iie

EAl escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código " " (non-breaking space). SuperíEn las fórmulassubíndices, que se co</SUB> respectivameny v con: v<SUB>x<x

Listas Cuando tenemos un conjunto de eleme

<<LI> Fresa

LI> Etc. <</UL> Como se puede apreciar, para crear una lista de este tipo se utiliza la etiqueta <UL>, y luego para cada elemento la etiqueta <LI> (List Item).


DHTML

Resultado Web

Figura 11. Lista sin orden

Además podemos anidar una lista dentro de otra. Por ejemplo:

<LI> Bacalao

<UL> <LI> Mamíferos <LI> Peces <UL> <LI> Sardina </UL> <LI> Aves </UL> Resultado Web

Figura 12. Listas sin orden anidadas

s Ordenadas (Ordered Lists) sirven para presentar ítems en un eterminado. Su estructura es muy similar a la anterior. La diferencia

ente un número

Las Lista

rden doestá en que en el resultado aparecerá automáticam

ativo para cada elemento de la lista. correl <OL>

troduccion <LI> In<LI> Conceptos Basicos <LI> Aplicaciones


DHTML

<LI> Bibliografia </OL> El texto aparecerá de la siguiente forma:

Figura 13. Lista ordenada

listas sin orden, también se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definición. Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). <DL> <DT> HTML <DD> Son las iniciales de HyperText Markup Language <DT> WWW <DD> Son las iniciales de World Wide Web </DL> Su resultado es:

Al igual que las

Figura 14. Lista de definiciones


DHTML

Comentarios no visibles en la pantalla A veces es muy útil escribir comentarios en el documento HTML sobre todo cuando creamos páginas dinámicas, el código que escribimos, nos pueden ervir para recordar posteriormente sobre lo que hicimos, y s

qque no queremos

stos dos símbolos: !-- y --> .

Por eje 

ici E></HEAD> <BODY> <CENTER> <H1> Mis Cur</CENTER> <HR>

LI> Software de Aplicación I

s de rencial

os cursos que me gustan son <I> (en orden de preferencia): </I>

eria de Software erencial

s de Computadoras

ue se vean en pantalla. Esto se consigue encerrando dichos comentarios entre e<

mplo:

o es un com ntario que puedo incluir en cualquier pa Ejemplo 2: Comentarios Ejercicio02.html <HTML>

HEAD> <<TITLE> Ejerc o 2 </TITL

sos </H1>

Sin un orden particular, mis <B> cursos </B> son los siguientes: <UL> <LI> Redes de computadoras <LI> Ingenieria de Software <UL> <LI> Herramientas Case <<LI> Software de Aplicación II </UL> <LI> Sistema Información Ge

/UL> < L<OL> <LI> Ingeni<LI> Sistemas de Información G<LI> Rede</OL> </BODY> </HTML>


DHTML

Resultado Web:


s, y no hemos utilizado algunos otros caracteres que existen algunas limitaciones para escribir el ebido a que las etiquetas se forman como un

nto, si se quisieran scribir estos caracteres como parte normal del texto, provocaría una

egador podría interpretarlos como el comienzo o nal de una etiqueta, en vez de un carácter más del texto.

Tabla 1. Códigos HTML para caracteres especiales < obtenemos < (less than, menor que)

Caracteres especiales Hemos podido notar en los ejemplos anteriores, que las palabras no aparecen con tildeespeciales, esto debido atexto. Una de ellas es dcomando escrito entre los símbolos "<" y ">". Por taeambigüedad, ya que el navfi Para superar estas limitaciones, existen códigos para escribir estos caracteres y otros relacionados junto con las etiquetas.

> obtenemos > (greater than, mayor que) & obtenemos & (ampersand) " obtenemos " (double quotation)

Podemos ver, que estos códigos empiezan siempre con el signo “&“ y

digos para escribir letras s vocales acentuadas se

acaban siempre con “;”. De igual manera, existen cóespecíficas de distintos idiomas. Los códigos de la


DHTML

forman comenzando con &, seguido de la vocal en cuestión, seguido de la alabra acute (aguda) y terminando con el signo: “;” (punto y coma).

odo esto, que como se ve es muy laborioso, puede parecer inútil ya que si

ngún caso de estas convenciones, scribiendo las letras acentuadas y demás signos directamente, es muy

es ocurra lo mismo a todos los que ccedan a nu avegadores distintos.

izaremos el

os siguientes:

p

Tabla 2. Códigos HTML para caracteres especiales Á - á Á - Á É - é É - É Í - í Í - Í Ó - ó Ó - Ó Ú - ú Ú - Ú Ñ - ñ Ñ - Ñ ¿ - ¿ ¡ - ¡

Tescribimos nuestro texto sin hacer nieposible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que l

estras páginas con otros na Para corregir el ejercicio anterior con vocales acentuadas utilsiguiente ejemplo. Ejemplo 3: Uso de tildes Ejercicio03.html

HTML> <<HEAD> <TITLE> Ejercicio 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis Cursos </H1> </CENTER> <HR>

in un orden particular, mis <B> cursos </B> son lS<UL> <LI> Redes de computadoras <LI> Ingeniería de Software <UL> <LI> Herramientas Case <LI> Software de Aplicación I <LI> Software de Aplicación II </UL> <LI> Sistemas de Información Gerencial

/UL> <Los cursos que me gustan son <I> (en orden de preferencia): </I> <OL> <LI> Ingeniería de Software


DHTML

<LI> Sistemas de Información Gerencial <LI> Redes de Computadoras </OL> </BODY>

/HTML> < Resultado Web:


te en este elemento: el “Hipervínculo” o tos repartidos

s, en general, tienen la siguiente estructura:

yyy </A> xxx : es el destino del hipervínculo. yyy : es el texto que generalmente aparece subrayado y con un color especial, el cual indicará en la pantalla la existencia de un enlace.

Enlaces o hipervínculos El éxito de la Web, se basa justamenenlace, pues nos da la posibilidad de unir los distintos documenpor todo el mundo. Estructura de los enlaces Los enlace <A REF = "xxx" >


DHTML

Tipos de enlaces Los enlaces los podemos clasificar en cuatro tipos: Enlaces dentro de la misma página Enlaces con otra página nuestra Enlaces con una página fuera de nuestro sistema Enlaces con una dirección de correo electrónico • Enlaces dentro de la misma página

Cuando tenemos documentos (o páginas Web) muy extensos, es adecuado trabajar con este tipo de enlaces, pues nos permite dar un salto desde una posición a otra determinada, dentro de la misma página. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltarse sustituye por alquier palabra). Lo que hemos llamado antes YYY es la palabra (o palabras) que

en la pantalla en color (en forma de hipertexto). Su estructura

remos saltar, debemos poner la siguiente > </A>

ltar desde aquí a la pantalla final, pongo la siguiente

página nuestra arias mpre

pal y otras enlazadas a ella.

<A

, #marcador (la palabra marcador puede ser cu

apareceránes, entonces:

<A HREF="#marcador"> YYY </A>. En el sitio exacto a donde quetiqueta: <A NAME="marcador"e

or ejemplo, si quiero saP

etiqueta:<A HREF="#final"> Haga Click aquí para ir al final</A>. En el final del documento se inserta esta etiqueta: <A NAME="final"> </A>. Enlaces con otra •

Generalmente cuando vamos a crear un Sitio Web, contamos con váginas, las cuales necesitamos enlazar unas con otras. Contamos siep

con una página que será la Inicial o princi Supongamos que queremos enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado ejemplo2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo: <A HREF="ejemplo2.html"> Ejemplo 2 </A> Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca o marcador (ver sección anterior), y completar el enlace on la referencia a ese marcador. c

En este ejemplo podremos hacer un enlace de este tipo: Deseo poner un enlace desde aquí a otra página (supongamos que se llame pag5.html), pero a un sitio concreto de esa página, donde he puesto el

arcador <A NAME="cursos"></A>. Entonces la etiqueta tiene que ser: mHREF="pag5.html#cursos"> Cursos </A>.


DHTML

Si la página a la que quiero saltar está, por ejemplo en el subdirectorio

a la inversa, si quiero saltar desde una página a otra que está en un ue haber puesto irectorio anterior.

os subdirectorios, y emos evitar todas

(es dor distinto), es necesario conocer su dirección

source Locator). El URL podría ser, además de

recciones correctamente (respetando las í las distinguen)

rio@servidoremail">Texto del enlace</A>

CENTER><H1> Mis páginas favoritas </H1></CENTER>

stas son mis páginas favoritas: EF="http://www.desarrolloweb.com">Desarrollo Web</A> REF="http://www.forosdelweb.com">Foros del Web</A>

cursos, entonces en la etiqueta tendría que haber puesto "cursos/pag5.html". Según el párrafo anterior, la etiqueta tiene que ser: <A HREF="cursos/pag5.html#cursos"> Cursos </A>. Ydirectorio anterior o nivel superior, en la etiqueta tendría q"../pag5.html". Esos dos puntos (..) hace que se dirija al dObsérvese que se debe utilizar el símbolo / para indicar l

o este otro \, que es propio únicamente de Windows. Podnestas complicaciones colocando todos los archivos en un solo directorio, pero si tenemos muchas páginas lo mejor es tenerlas en directorios, pues nos facilitará el mantenimiento de ellas. • Enlaces con una página fuera de nuestro sistema

i queremos enlazar con una página que esté fuera de nuestro Sitio Web Sdecir, que esté en un serviompleta, o URL (Uniform Rec

la dirección de una página del Web, una dirección de ftp, gopher, etc. Una vez conocida la dirección (o URL), la colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de la Nasa (cuyo URL es: http://www.nasa.com), la etiqueta sería: <A HREF="http://www.nasa.com/">Página inicial de la Nasa </A>

s importante escribir estas diEmayúsculas y minúsculas, pues los servidores UNIX s • Enlaces con una dirección de Correo Electrónico En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de correo electrónico. La estructura de la etiqueta es:

A HREF="mailto: usua< Ejemplo 4: Enlaces <HTML><HEAD><TITLE> Ejercicio 4 </TITLE></HEAD> <BODY> <<HR> E<P><A HR<BR><A H<BR> <A HREF="http://www.google.com">Google</A> </BODY> </HTML>


DHTML

Resultado Web:


Imágenes a etiqueta que nos sirve para incluir imágenes en las páginas Web es muy

similar a la de enlaces a otras páginas. A esta etiqueta se le indica el nombre zación de un archivo que contiene una imagen.

na imagen llamada imagen.gif (el nombre que

pueden añadir otros comandos, tal como ALT

ión (una palabra o una frase breve) de la mitir, es en beneficio de los que accedan a nuestra navegador en forma de texto sólo. Ya que no son

n, por lo menos pueden hacerse una idea sobre ella.

i el archivo se encuentra en el mismo directorio, es suficiente escribir el

ilizando los criterios que vimos en la parte de enlaces.

té

L

y la locali La estructura de la etiqueta es: <IMG SRC="imagen.gif"> Con el comando IMG SRC (Image Source, origen o fuente de la imagen) se

dica que se quiere mostrar uintenga el archivo).

etiqueta se Dentro de la <IMG SRC="imagen.gif" ALT="descripción">

on ALT se inserta una descripcCimagen. ALT se puede opágina con un programacapaces de ver la image Snombre. Pero si se encontrara en otro lugar es necesario indicar su ubicación exacta, ut Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esintentando cargar nuestra página se canse de esperar, y desista de ello.


DHTML

Para elegir la posición de la imagen con respecto al texto hay distintas osibilidades. La más sencilla es colocarla entre dos párrafos, con un titular

.

a posición del titular con e un titular, claro está). Se

n medio o abajo del lado de la imagen. Para ello se IGN a la etiqueta, de la siguiente manera:

s

os anteriormente, la estructura general de un enlace es:

"xxx"> yyy </A>.

destino del enlace e yyy el texto del enlace (o más generalmente hablando, lo que aparece en la pantalla como el enlace; anteriormente era un texto, y en éste va a ser una imagen). En este caso sustituimos xxx por el nombre del archivo de la página a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del enlace). Como ejemplo vamos a utilizar la imagen (flecha.gif) para acceder al ejercicio 2 (ejercicio2.html): <A HREF="ejercicio2.html"><IMG SRC="flecha.gif"></A> Pulsando la imagen comprobamos cómo efectivamente enlaza con la página deseada. Obsérvese además que la imagen está rodeada de un rectágulo del color normal en los enlaces. Si no se desea que aparezca eserectángulo, hay que incluir la imagen el atributo

ORDER=0, es decir:

gen, comprobamos que actúa mbién como enlace aunque carezca del rectángulo de color. Esto puede

resultar más estético, pero se corre el riesgo de que el usuario no se dé cuenta de que la imagen

genes

pa un lado De momento nos vamos a limitar a escoger l

a imagen (si es que queremos ponerlrespecto a lpuede poner arriba, e

ando ALañade el com

if" ALIGN=TOP> Titular alineado arriba <IMG SRC="isla.g<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio <IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente imágenes pequeña(iconos), aunque se puede usar cualquier tipo de imagen. Según vim

A HREF=< Donde xxx era el

dentro de la etiqueta de

B <A HREF="ejercicio2.html"> <IMG SRC="flecha.gif" BORDER=0> </A> Posicionando el cursor sobre esta última imata

sirve de enlace. Ejemplo 5: Imá <HTML> <HEAD>


DHTML

<TITLE> Ejercicio 5 </TITLE>

icio 5</H1></CENTER>

entos básicos sobre todo

cio1.html"> <IMG SRC ="iconos/nuevo.gif" width="20" </A> Mi primera pagina Web. cio2.html"> <IMG SRC ="iconos/buscar.gif" width="15"

"15" border="0"> </A> Mis Cursos

P </H3> ado.jpg" ALT="playa" height="145">

R>

Resultado Web:

</HEAD> <BODY> <CENTER><H1>Ejerc<HR> Esta es una página Web. Tiene todos los elemimágenes. <P><A HREF ="ejerciheight="22" border="0"> <P><Aheight=

HREF ="ejerci

<CENTER> <H3> Desarrollo Web con PH<IMG SRC="imagenes/tecl</CENTE</BODY></HTML>



DHTML

Tablas ara crear tablas son:

ara especificar el inicio y final de la tabla.

etiqueta le podemos añadir un comando: BORDER, que sirve para el grosor del borde de las celdas. La manera de especificar esta

tica es la siguiente:

<TABLE BORDER=[espesor]> [resto de las etiquetas]

</TABLE>

<TABLE BORDER=1>

entro de estas etiquetas, es necesario especificar las filas y columnas que

uetas para formar cada fila (row) de la tabla, que son: <TR> y </TR>. stas etiquetas tenemos que repetirlas tantas veces como filas queremos

s veces como celdas queremos que haya en esa fila.

ntana -->

>fila2-celda2</TD> <TD>fila2-celda3</TD></TR>

/HTML>

Las etiquetas necesarias p<TABLE> Y </TABLE> p A esta especificararacterísc

Por ejemplo: si queremos una tabla con un borde de una unidad de espesor, escribiremos el siguiente código: [resto de las etiquetas] </TABLE> Dcontendrá la tabla. Las etiqEque tenga la tabla. Las etiquetas para crear columnas son: <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tanta Ejemplo 6: Tablas Ejercicio06.html <HTML> <HEAD><TITLE> Ejercicio 6 </TITLE></HEAD> <BODY BGCOLOR="#CCFFFF" TEXT="#AA0000"> <CENTER> <H1> Ejercicio 6 </H1> </CENTER>  </script> <title>menu</title> </head> < <table> <tr> <th width="16"><a href="#" onClick=title="Ocultar o Mostrar Menu"> b <th><SPAN>Tablas</SPAN></th> </tr> <div id="tab <table>

<tr> <td><a href="universidad.php"

rget="principal">Universidades</a></td> ta </tr> <tr> <td><a href="facultad.php" target="principal">Facultades</a></td> </tr> <tr> <td><a href="escuela.php" target="principal"> </tr> <tr>


DHTML

</table> </div> <table> <tr>

onClick="toggle('academico');return lse;" title="Ocultar o Mostrar Menu">

SPAN>Maestros</SPAN></th> </tr>

r> <tr>

<td><a href="evaluacion.php" target="principal"> Evaluaciones </a></td>

<tr> <td><a href="en uestas</a></td>

os ver en este ejem que p os ocultar o ha visible las DIV.

do Web:

<th width="16"><a href="#" fa <img src="iconos/nuevo.gif" alt="despliegue2" width="16" height="16" border="0"></a></th> <th>< </table> <div id="academico" style="display: block;"> <table>

<tr> <td><a href="alumno.php" target="principal">Alumnos</a></td> </t <td><a href="curso.php" target="principal">Cursos</a></td> </tr> <tr>

</tr> <tr> <td><a href="registro.php" target="principal">Registro</a></td> </tr> <tr> <td><a href="asistencia.php" target="principal">Inasistencias</a></td> </tr> <tr> <td><a href="resultado.php" target="principal">Resultados</a></td> </tr> <tr> <td><a href="mensaje.php" target="principal">Mensajes</a></td> </tr>

cuesta.php" target="principal">Enc </tr> </table> </div> </body> </html> Podem

plo odem cer

Resulta


DHTML

Figura 38. Ejemplo de página con DIV ANs s y SP


DHTML

JavaScript avaScript, al igual que Java o VRML, es una de las múltiples maneras que

pacidades del lenguaje HTML. Al ser la más

er un rograma con JavaSc página Web con

algunas cosas senc aS cosas distintas, principalmente programación completo. Lo ú e n mi xis. Existen tres versiones de Ja C ha n este documento funciona con la versión 1.0, que na n e vigator 2.0. También existe una versió d cida en la versión 4.06. Esta versión

s una pequeña revisión de la 1.2 creada para ajustarse al estándar la el lenguaje JavaScript.

s una página Web , al pulsarlo, muestra el mensaje.

, Web

AME Boton" VALUE=" ame" onClick="HolaWeb()">

/HTML> Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la página anterior: <SCRIPT LANGUAGE="JavaScript"> </SCRIPT>

Jhan surgido para extender las casencilla, es por el momento la más extendida. Es importante saber que: JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de

acros que tienen muchos procesadores de texto. Nunca se podrá hacmp ript, tan sólo se podrá mejorar una

illas. Jav cript y Java son dos porque Java sí que es un lenguaje denico qu comparte es la sma sintavaScript. asi todo lo que se

ció co escrito el Netscape Na

n 1.3, intro ueinternacional ECMA que regu Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el mensaje "hola, Web". Así podremos ver los

lementos principales del lenguaje. El siguiente código eecompleta con un botón que Ejemplo 21: función alert HolaWeb.html <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">

function HolaWeb() { alert("¡Hola }

!");

</SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" N =" Puls </FORM> </BODY> <


DHTML

Dentro de estos elementos será donde se puedan poner funciones en

"archivo.js"> </script>

plo, se ha escrito en la cabecera con la finalidad de hacer igo más legible. Si un navegador no acepta JavaScript no leerá lo que tre estos elementos.

unque JavaScript es o a objetos no es de ningún modo tan a de un objeto. En el código de la

utton" NAME="Boton" VALUE="Pulsame"

ento que usamos para mostrar un botón vemos una cosa vento. Cuando el usuario pulsa el

vento click se dispara y ejecuta el código que tenga entre comillas dor de evento onClick, en este caso la llamada a la función

con anterioridad. Existen uchos más eventos que iremos descubriendo según avancemos. En alidad, podríamos haber escrito lo siguiente:

<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="alert('¡Hola,Mundo!')">

es una parte de nuestro programa que el ordenador ignora y realiza ninguna tarea. Se utilizan generalmente para poner

JavaScript. Por otra parte el código de JavaScript puede ser incluido en la página Web de la siguiente manera:

script language="JavaScript" src =< El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba con la extensión js. El código de Java Script puede ser escrito en cualquier lugar de la página

eb, en este ejemWel códhay en function HolaWeb() { alert("¡Hola, Web!"); } A té orientadestricto como Java, donde nada está fuerfunción vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. <FORM> <INPUT TYPE="b onClick="HolaWeb()"> </FORM> Dentro del elemnueva: onClick. Es un controlador de ebotón, el eel controlaHolaWeb(), que tendremos que haber definido mre <FORM> </FORM>

Elementos básicos

Comentarios Un comentario que, por tanto, no


DHTML

en lenguaje humano lo que estamos haciendo en el lenguaje de r que el código sea más comprensible.

tipos de comentarios. El primero nos permite que e la línea sea un comentario. Para ello se utilizan dos barras

mentario

ue, false

yso vectores:

acaciones = ["Navidad", "Semana Santa", "Verano"]; lert(vacaciones[0]);

Tabla 3. Caracteres especiales para cadenas en JavaScript do

programación y así hace JavaScript existen dos En

el resto dinclinadas: ar i = 1; // Aqui esta el cov

Sin embargo, también permite un tipo de comentario que puede tener las líneas que queramos. Estos comentario comienzan con: /* y terminan por */.

Literales Se llama así a los valores que puede tomar una variable o una constante.

parte de los distintos tipos de números y valores booleanos: A "Soy una cadena" 3434 3.43 tr También podemos especificar arra va Dentro de las cadenas podemos indicar varios caracteres especiales, con significados especiales. Estos son los más usados:

Carácter Significa\n Nueva línea \t Tabulador \' Comilla simple \" Comilla doble \\ Barra invertida \999 El número ASCII (según la codificación Latin-1) del carácter en

hexadecimal De este modo, el siguiente literal: "Javascript (\xA9 2002)" e corresponde con la cadena: s

2) Javascript (© 200

or último, tambiéP

fun se pueden especificar objetos como literales, aunque no

ncione en más que en Netscape 4 y superiores:


DHTML

miNavegador = {nombre: "Netscape", version: 4.5, idioma: "Español", plataforma: "PC"}; alert(miNavegador.plataforma);

s tipos de datos se asignan dinámicamente según namos valores a las distintas variables y son los clásicos: cadenas de

xto, varios tipos de enteros y reales, valores booleanos, vectores, matrices, ferencias y objetos.

riable, cuando no es declarada, tiene será de ámbito

da dentro:

sible fuera y dentro de pruebas

rdenado de elementos, o una variable distinta. En Javascript, tos. Como veremos que hacen todos

n utilizando el operador new:

y(20)

Sentencias y bloques En Javascript las sentencias se separan con un punto y coma, y se agrupan mediante llaves ({ y }).

Tipos de datos En

igJavascript lo

asetre

Variables Las variables son nombres que ponemos a los lugares donde almacenamos la información. En Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber además dígitos entre los demás caracteres. No es necesario declarar una variable, pero cuando se hace es por medio

e la palabra reservada var. Una vadsiempre ámbito global, mientras que en caso contrario

lobal si está definida fuera de una función, y local si está definig var x; // Accesible fuera y dentro de pruebas y = 2; // Accesible fuera y dentro de pruebas function pruebas() { var z; // Accesible sólo dentro de pruebas w = 1; // Acce

} Se pueden declarar varias variables en una misma sentencia separándolos por comas:

x, y, z; var El tipo de datos de la variable será aquel que tenga el valor que asignemos a la misma, a no ser que le asignemos un objeto por medio del operador new. Vectores y matrices

stos tipos de datos complejos son un conjunto oEcada uno de los cuales es en sí mism

atrices son objelos vectores y las mlos objetos, se declara miVector = new Arra


DHTML

El vector tendrá inicialmente 20 elementos (desde el 0 hasta el 19). Si queremos ampliarlo no tenemos más que asignar un valor a un elemento que esté fuera de los límites del vector:

s utilizar de índices cualquier expresión que deseemos esitamos especificar la longitud inicial del vector si no

s favoritos"] = "Esto es Javascript";

ya que tenemos que ctor nuevo en cada elemento del vector

iginal.

de JavaScript deben referenciarse cómo se definieron, no es

os operadores nos permiten unir identificadores y literales para formar nes son el resultado de operaciones matemáticas variable son expresiones, pero también lo son esos

rar que nuestro código no lo entendamos ni nosotros.

e los operadores aritméticos clásicos y algún que otro

eradores aritméticos

lo Expresión de ejemplo

Resultado del ejemplo

miEstupendoVector[25] = "Algún valor"

e hecho, podemoDutilizar. Ni siquiera necueremos: q

ectorRaro = new Array(); v

vectorRaro["insertar en lo

es más complicado,Hacer una matriz bidimensionalhacer un bucle que cree un veor Nota importante: JavaScript es sensible a mayúsculas y minúsculas, todos los elementoslo mismo "Salto" que "salto".

Operadores Lexpresiones. Las expresioo lógicas. Un literal o una mismos literales y variables unidos entre sí mediante operadores. JavaScript dispone de muchos más operadores que la mayoría de los lenguajes, si exceptuamos a sus padres C, C++ y Java. Algunos de ellos no los estudiaremos debido a su escasa utilidad y con algunos otros (especialmente el condicional) deberemos andarnos con cuidado, ya que puede log Operadores aritméticos JavaScript dispone dmás:

Tabla 4. Op

Descripción Símbo

Multiplicación * 2*4 8 División / 5/2 2.5 Resto de una división entera % 5 % 2 1

Suma + 2+2 4 Resta - 7-2 5 Incremento ++ ++2 3 Decremento -- --2 1


DHTML

Menos unario - -(2+4) -6

os operadores de incremento y L decremento merecen una explicación

b 2 también. Sin embargo:

u operando, pero si se colocan detrás del mismo se jecutan después de todas las demás operaciones.

mparación

del ejemplo

auxiliar. Se pueden colocar tanto antes como después de la expresión que deseemos modificar pero sólo devuelven el valor modificado si están delante. a = 1;

= ++a; bEn este primer caso, a valdrá 2 ya = 1;

= a++; b Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores modifican siempre a se

Operadores de co

ientes: Podemos usar los sigu

Tabla 5. Operadores de comparación

Descripción Símbolo Expresión de ejemplo ResultadoIgualdad == 2 == '2' Verdadero Desigualdad != 2 != 2 Falso Igualdad estricta === 2 === '2' Falso Desigualdad estricta !== 2 !== 2 Falso Menor que < 2 < 2 Falso Mayor que > 3 > 2 Verdadero Menor o igual que <= 2 <= 2 Verdadero Mayor o igual que >= 1 >= 2 Falso

a igualdad y desigualdad estricta son iguales a las noL rmales pero hacen bación estricta de tipo. Han sido incluidos en el estándar

lo soportan Netscape 4.06 y superiores y Explorer 3 y que indicar que versiones más antiguas de Netscape tratan

. Operadores lógicos

n Símbolo Expresión de ejemplo Resultado del ejemplo

una comproECMAScript y superiores. Hay la igualdad normal como si fuera estricta. Operadores lógicos Estos operadores permiten realizar expresiones lógicas complejas:

Tabla 6

DescripcióNegación ! !(2 = 2) Falso


DHTML

Y && (2 = 2) && (2 >= 0) Verdadero Ó || (2 = 2) || (2 <> 2) Verdadero

Operadores de asignación

los lenguajes tienen un único operador de asignación, que en ímbolo =. Pero en este lenguaje, dicho operador se puede

n operadores aritméticos y lógicos para dar los siguientes:

Tabla 7. Operadores de asignación

erador Significado Operador Significado

NormalmenteJavaScript es el scombinar co

Opx += y x = x + y x -= y x = x - y x /= y x = x / y x *= y x = x * y x % y x = x % y

Operadores Especiales Vamos a incluir en este apartado operadores que no hayan sido incluidos en

s anteriores. La concatenación de cadenas, por ejemplo, se realiza con el l operador condicional tiene esta estructura:

Si la condición se cumple devuelve el primer valor y, en caso contrario, el ejemplo asignaría a la variable a un 2:

ores:

bla

ió olo Ejemplo

losímbolo +. E condición ? valor1 : valor2

segundo. El siguiente a = 2 > 3 ? 1 : 2

ara tratar con objetos disponemos de tres operadP

Ta 8. Operadores especiales

Descripc n Símb Resultado del ejemplo Crear un o a = new Array( n vector bjeto new ) a es ahora u

Borrar un objeto delete delete a Elimina el vector anteriormente creado

Referencia actual is al thobjeto

this se a otros m

su r en el código de los métodos de un objeto para referirse é objeto. ele utilizatodos o a propiedades de su mismo


DHTML

Estructupos: bifurcaciones de e ucturas de

control, en estructuras adicionales para ar el

a) Bifurc les bifurc al en una estruc za una rea u otra

ependiendo del resultado de evaluar una condición. La primera que vamos a estudiar es la estructura if...else. Esta estructura es la más sencilla y

mayor

es mayor que b”);

s o

Es la se

witch(color) {

rojo”);

o”);

dicar que no es compatible con estándar ECMA y no es soportado or el Explorer 3.

petir una tarea un número de na condición. Para hacer bucles podemos utilizar

ncia entre ellas es que la primera omprueba dicha condición antes de realizar cada iteración y la segunda lo

ras de control Estas estrcondiciona

ucturas se pueden clasificar en doles y bucles. Aparte de los dos

s grandes gru tipos clásicos str

JavaScript disponemos de algunasmanejo de objetos.

aciones condiciona

facilit

Una ación condicion tura que reali tad

antigua de todas: a=5; b=7; f (a>b) i alert(“a es que b”); else alert(“a no Hay que indicar que el else e pcional..

La siguiente estructura bifurca suna variable específica.

egún los distintos valores que pueda tomar ntencia switch:

s case "azul": alert(“ El color elegido es el azul”); break; case "rojo": alert(“ El color elegido es el break; default:

alert(“ El color por defecto es negr } Hay que inp Bucles Un bucle es una estructura que permite reveces, determinado por ulas estructuras while y do...while. Estos bucles iteran indefinidamente mientras se cumpla una condición. La diferechace después: var numero=0;


DHTML

while (numero==1) {

oy un do...while');

es un while. ¿Qué por qué? Veamos. El while comprueba primero si

s igual a 1 y, como no lo es, no ejecutaría el código que tiene

ente potente. No se reduce a casos os da mucha más

con condición se tes enzar la primera iter e ejecutará la

c era más sa dades es, claro

for (n = 2, factorial = 1; n

hay cución d ncia break dentro de

r parte del salida i hay lizarlo, e

legibilidad y elegancia del código.

s sp distintas. La ucle for...in, que

ropiedente mplo:

= [

alert('Soy un while'); } do { alert('S

} while (numero==1);

n este caso solo veríamos aparecer una ventana diciendo que Edo...numero edentro del bucle. En cambio, el do...while primero ejecuta el código y luego, viendo que la condición es falsa, saldría. Hay que resaltar que do...while no pertenece al estándar y no es soportado por el Explorer 3.

n Javascript, el bucle for es singularmEnuméricos como en muchos otros lenguajes sino que nbertad. Tiene la siguiente estructura: li

r (inicio; condición; incremento) fo código El códigocumpla. An

tenido en el bucle se ejecut de com

ará mientras la ación del bucle s

sentencia inihabitual de u

io y en cada iteración lo harr estas posibili

á incremento. La man está, la numérica:

var numero = 4; <= numero; n++)

; factorial *= n

Por último, que decir que la eje e la sentecualquieveces no

bucle provoca la más remedio que uti

nmediata del mismo. Aunque a s mejor evitarlo para mejorar la

EstructuraJavaScript di

de manejo de objetos one de dos bien primera es el b

nos permitirá recorrer tprincipalm

odas las p con vectores. Por eje

ades de un objeto. Se usa

var vector 1, 2, 2, 5]; for (i in vector) vector[i] += 2;


DHTML

Este ejemplo sumaría dos a todos los elementos del vector. Sin embargo, conviene tener cuidado ya que, de los navegadores de Microsoft, sólo la ersión 5 lo soporta.

a otra estructura es with, que nos permitirá una mayor comodidad cuando tratar con muyas propiedades de un mismo objeto. En lugar

e referirnos a todas ellas con un objeto.propiedad podemos

to es una estructura que contiene tanto variables (llamadas ulan dichas variables (llamadas

uctura se ha creado un nuevo modelo de programación mación orientada a objetos) que atribuye a los objetos propiedades ncia o polimorfismo.

s, JavaScript simplifica en algo este modelo. Creación mediante co

n constructor es una fun do creamos un bjeto nuevo del tipo que sea, lo que hacemos en realidad es llamar al

constructor pasándole argumentos. Por ejemplo, si creamos un objeto Array de esta manera: vector = new Array(9); En realidad, estamos llamando a un constructor llamado Array que admite un parámetro. Sería algo así: function Array(longitu ...

bjeto. Supongamos que queremos codificar

= autor;

v Ltengamos quede tener quhacer: with (objeto) { propiedad1 = ... propiedad2 = ... ... }

Objetos Un objepropiedades) como las funciones que manipmétodos).

rtir de esta estrA pa(la progra

recomo he

omo veremoC

nstructores ción que inicializa un objeto. CuanU

o

d) {

} Vamos a crear nuestro primero oen Javascript una aplicación que lleve nuestra biblioteca de libros técnicos de Informática. Para lograrlo, crearemos un objeto Libro que guarde toda la información de cada libro. Este sería el constructor: function Libro(titulo, autor, tema) { this.titulo = titulo; this.autor

this.tema = tema; }


DHTML

Como vemos, accederemos a las propiedades y métodos de nuestros por medio de la referencia this. Ahora podemos crear y acceder a

Libro("JavaScript Bible", "Danny Goodman",

ro.autor);

demos incluirlos de la siguiente forma:

escribirLibro() { l libro " + this.titulo + " de " + this.autor +

" trata sobre " + this.tema); }

ara incluirlo en nuestro objeto añadimos la siguiente línea a nuestra función constructora: this.escribir = escribirLibro; Y podremos acceder al mismo de la manera normal: miLibro.escribir();

Objetos predefinidos JavaScript dispone d er a muchas de

s funciones normales de cualquier lenguaje, como puede ser el manejo de algunos casos estaremos tratando con objetos

unque no nos demos cuenta, ya que los usos más habituales de los ponen de abreviaturas que esconden el hecho de que sean

bjetos.

ctores. Se inicializa de iguientes maneras:

ngitud); emento1, elemento2, ..., elementoN);

er caso crearemos un vector con el número especificado de s, mientras que en el segundo tendremos un vector que contiene entos indicados y de longitud N. Para acceder al mismo debemos que el primero elemento es el número cero. Array tiene, entre otros, los siguientes métodos y propiedades:

ngth: Propiedad que contiene el número de elementos del vector.

objetos nuestros objetos tipo Libro: miLibro = new"JavaScript"); alert(miLib Los métodos también po function alert("E

P

e varios objetos predefinidos para accedlavectores o el de fechas. Enamismos diso

a) Objeto Array Como dijimos an

las stes, este objeto permite crear ve

cualquiera de vector = new Array(lo

r = new Array(elvecto

rimEn el pelemento

elemlosrecordar El objeto le


DHTML

concat(vector2): Añade los elementos de vector2 al final de los del vector

etTime(milisegundos)

btienen y ponen, respectivamente, la fecha y la hora tomados como

plementación de éstos métodos puede variar en las ltimas versiones de Netscape.

que invoca el método, devolviendo el resultado. No funciona en Explorer 3 y no forma parte del estándar ECMA. ort(funcionComparacion): Ordena los elementos del vector s

alfabéticamente. Si se añade una función de comparación como parámetro los ordenará utilizando ésta. Dicha función debe aceptar dos parámetros y devolver 0 si son iguales, menor que cero si el primer parámetro es menor que el segundo y mayor que cero si es al revés.

nction compararEnteros(a,b) { fu return a<b ? -1 : (a==b ? 0 : 1); } Usando esta función ordenaría numéricamente (y de menor a mayor) los elementos del vector.

b) Objeto Date Este objeto nos permitirá manejar fechas y horas. Se invoca así: fecha = new Date(); fecha = new Date(año, mes, dia); fecha = new Date(año, mes, dia, hora, minuto, segundo); Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales, obtenidas del reloj del sistema. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Así, por ejemplo: navidad99 = new Date(1999, 11, 25) El objeto Date dispone, entre otros, de los siguientes métodos: getTime() s Omilisegundos transcurridos desde el 1 de enero de 1970. getYear() setYear(año) Obtienen y poner, respectivamente, el año de la fecha. Éste se devuelven como números de 4 dígitos excepto en el caso en que estén entre 1900 y 1999, en cuyo caso se devolverán las dos últimas cifras. Hay que tener cuidado, ya que la imú getFullYear() setFullYear(año)


DHTML

Realizan la misma función que los anteriores, pero sin tantos líos, ya que

úmeros con todos sus dígitos. Funciona en Explorer 4 y y superiores.

etMonth()

) utos)

nds(segundos)

, el mes, día, hora, minuto y segundo de espectivamente hablando.

a de número que va

o está construido para que tengamos nuestras variables Math, contenedor donde meter diversas constantes (como Math.E y

los siguientes métodos matemáticos:

Tabla 9. Métodos matemáticos del Objeto Math

ejemplo del ejemplo

siempre devuelven nNetscape 4.06 gsetMonth(mes) getDate() setDate(dia) getHours() setHours(horas)

etMinutes(gsetMinutes(min

etSeconds() gsetSeco Obtienen y ponen, respectivamente

ivamente, rla fecha, también respect getDay() Devuelve el día de la semana de la fecha en form del 0 (domingo) al 6 (sábado).

c) Objeto Math Este objeto nsino como unMath.PI

) y

Método Descripción Expresión de Resultado

abs Valor absoluto Math.abs(-2) 2

sin, cos, n

Funciones trigonométricas, reciben el argumento en Math.cos(Math.PI) -1 ta radianes

asin, acos, atan

Funciones trigonométricas inversas Math.asin(1) 1.57

exp, log Exponenciación y logaritmo, Math.log(Mbase E ath.E) 1

Devuelve el entero más pequeño mayor o igual al argument

Math.ceil(-2.7) -2 ceil o

floor Devuelve el entero más grande menor o igual al argumento Math.floor(-2.7) -3


DHTML

round Devuelve el entero más cercano o igual al argumento Math.round(-2.7) -3

min, max Devuelve el menor (o mayor) de sus dos argumentos Math.min(2,4) 2

pow Exponenciación, siendo el primer argumento la base y el segundo el exponente

Math.pow(2,4) 16

sqrt Raíz cuadrada Math.sqrt(4) 2

d) Objeto Number l igual que en el objetos de tipo

r, sino que debemos referirnos al genérico. Este objeto contiene A caso anterior, no se pueden crear Numbecomo propiedades los siguientes valores numéricos.

Tabla 10. Propiedades del objeto Number

Propiedad Descripción NaN Valor que significa "no es un número" MAX_VALUE y MIN_VALUE Máximo y mínimo número representable

NEGATIVE_INFINITIVE y Infinito negativo y positivo,

POSITIVE_INFINITIVE

se utilizan cuando hay desbordamiento al realizar alguna operación matemática

e) Objeto String Al crear una cadena estamos Su utilidad está en sus métodos, entre lo

creando a la vez un objeto String asociado.

a posición de la subcadena dentro de la cadena, o -1 en caso de

plit(separador) ena por el

ciona en Explorer 3. ,Verano";

ector = cadena.split(","); jemplo, el vector tendrá tres elementos con cada una de las

oncat(cadena2) sultado de concatenar cadena2 al final de la cadena. No

funciona en Explorer 3 y no forma parte del estándar ECMA.

s que cabe destacar: charAt(pos) y charCodeAt(pos) Devuelven el caracter o el código numérico del carácter que está en la posición indicada de la cadena. indexOf(subcadena) Devuelven lno estar. sDevuelven un vector con subcadenas obtenidas separando la cadcarácter separador. No funcadena = "Navidad,Semana SantavEn el evacaciones de un escolar español normal. cDevuelve el re


DHTML

substr(indice,longitud) y substring(indice1, indice2) Devuelven una

teres a subcadena de la cadena, ya sea cogiendo un número de

arac partir de un índice o pillando todos los caracteres entre dos

" onMouseOver="MiFuncion()">

Tabla 11. Eventos de JavaScript

Descripción Elementos que lo admiten

cíndices. toLowerCase()y toUpperCase() Transforman la cadena a minúsculas y mayúsculas, respectivamente.

Eventos Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute sólo cuando suceda algo extraño deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen así: <A HREF="http://home.netscape.com Lista de eventos Aquí tienes una pequeña guía de eventos definidos en JavaScript.

Evento

OnLoad Terminar de cargarse una página

<BODY...> <FRAMESET...>

OnUnLoad Salir de una página(descargarla) <BODY...><FRAMESET...>

onMouseOver Pasar el ratón por <A HREF..> encima <AREA...>

onMouseOut encima <AREA...> Que el ratón deje de estar <A HREF..>

onSubmit Enviar un formulario <FORM...>

onClick Pulsar un elemento <INPUT TYPE="button, checkbox, link, radio"...>

onBlur Perder el cursor <INPUT TYPE="text"...> <TEXTAREA...>

OnChange Cambiar de contenido o perder el cursor

<INPUT TYPE="text"...> <TEXTAREA...>

OnFocus Conseguir el cursor <INPUT TYPE="text"...> <TEXTAREA...> <INPUT TYPE="text"...> OnSelect Seleccionar texto <TEXTAREA...>

Como ejemplo, vamos a hacer que una ventana aparezca automáticamente

to pasemos un cursor por encima de un elemento <A> (e en cuan


DHTML

impidiendo, de paso, que quien esté viendo la página pueda hacer uso del

HTML>

<SCRIPT LANGUAGE="JavaScript"> arios esconden el código a navegadores sin JavaScript

function Alarma() { e activo la función Alarma"); ue;

eb:

mismo). Ejemplo 22: Eventos eventos.html <<HEAD> 

> </SCRIPT</HEAD> <BODY> <A HREF="eventos.html" onMouseOver="Alarma()"> Pasa por aquí encima </A> </BODY> </HTML>

esultado WR

Figura 39. Resultado de eventos.html

Figura 40. Resultado del método alert


DHTML

Definición mediante código isto como declarar un controlHemos v

HTML. Sinador de eventos desde etiquetas

s versiones 3 de Netscape y 4 de Explorer, acerlo mediante código.

rmiten atributos acceso a dichos

tml

<HTML>

}

embargo, y desde latro modo de hexiste o

Muchos objetos cuyas etiquetas HTML correspondientes pen controladores de evento, permiten el que define

controladores por medio de propiedades con el mismo nombre. Por ejemplo, la página: Ejemplo 23: Definición mediante código load1.h

<HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="Saludo()"> . ..

</BODY> </HTML>

Figura 41. Resultado de load1.html


DHTML

Figura 42. Resultado del método alert

ibir como:

load2.html <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> ... </BODY>

/HTML>

Modelo de objetos duando funciona en un navegador, el lenguaje JavaScript dispone de una erie de objetos que se refieren a cosas como la ventana actual, el

que pueda parecer, no existe

e representa una ventana or. Dado que cada marco se considera una ventana

e puede reescrS

<

el documento Csdocumento sobre el que trabajamos, o el navegador que estamos utilizando. Para los más iniciados en la programación orientada a objetos, conviene aclarar que en esta jerarquía, contra loherencia alguna. Los objetos se relacionan por composición, es decir, un objeto Window se compone (entre otras cosas) de un objeto Document, y éste a su vez se compone de diversos objetos Form, Image, etc..

jerarquía es el objeto Window, quEl padre de estae nuestro navegadd

distinta, cada uno de ellos dispone de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de los objetos que lo componen se corresponde con diversas etiquetas HTML.


DHTML

Objeto Window na sobre la que estamos trabajando e

a la barra de tareas, el documento o la secuencia de direcciones de la última sesión. En este capítulo veremos los métodos y propiedades más utilizadas, al menos por mí, dejando el estudio de dichos objetos para sus capítulos correspondientes. Aún cuando el objeto se llame Window, disponemos siempre de una

Por último, indicar que en Javascript, se supone que todas las propiedades y tilizar ninguna referencia, en realidad se hacen

ow.]open(URL, nombre, propiedades)

able, si no te invocamos el método: el navegador automáticamente sabrá

los

ner cuidado con las propiedades que modifiquemos, es posible nas combinaciones de los mismos no funcionen en todos los res. El Explorer 4, por ejemplo, da error ante la combinación

enubar=no. Veamos un ejemplo:

<SCRIPT LANGUAGE="JavaScript">

Es el objeto principal. Define la ventaincluye los objetos referentes

referencia a él llamada window (recuerde que Javascript distingue entre mayúsculas y minúsculas). Será con esa referencia con la que trabajemos.

métodos que llamamos sin uutilizando esa referencia window. Así, por ejemplo, cuando ejecutamos el método alert en realidad lo que estamos haciendo es ejecutar el método window.alert. [Variable=][wind Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella

esde la ventana donde la creamos deberemos asignarle una varidsimplemenque pertenece al objeto window. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con una página en blanco. El nombre será el

ue queramos que se utilice como parámetro de un TARGET y lasqpropiedades son una lista separada por comas de algunos de iguientes elementos: s

olbar[=yes|no] to

location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] esizable[=yes|no] r

width=pixels height=pixels Debemos teque algunavegadotoolbar=no, directories=no, m Ejemplo 24: Función open() ventanas.html <HTML> <HEAD>


DHTML

function AbrirVentana() {

oolbar=no,directories=no,menubar=no,status=yes"); nueva

B>Texto de

INPUT TYPE="button" NAME="Boton1" VALUE="Abrir otra ventana"

/HTML> Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la función AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta función crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document todo el código HTML de la página. Resultado Web:

MiVentana=open("","ventana2","t MiVentana.document.write("<HEAD><TITLE>Una ventana</TITLE></HEAD>"); MiVentana.document.write("<CENTER><H1><prueba</B></H1></CENTER>"); } </SCRIPT> </HEAD> <BODY> <FORM> <onClick="AbrirVentana()"> </FORM> </BODY> <

Figura 43. Resultado de ventanas.html


DHTML

Figura 44. La nueva ventana abierta

close()

la ventana. A no ser que hayamos acabado de abrirla nosotros

hace por motivos de seguridad, ya que sería emasiado fácil hacer un script de esos mal intencionados que nos cerrase

del navegador, con lo que fastidia eso.

ra una ventana de diálogo con el mensaje especificado.

onfirm(mensaje) a ventana de diálogo con el mensaje especificado y dos

OK, el método devuelve true. Si, en cambio, ulsa Cancelar, devolverá false.

ado y un campo e texto en el que el usuario pueda teclear, cuyo valor inicial será igual a

el botón de Aceptar:

e llamas, criatura?", "");

tatus adena de caracteres que saldrá en la barra de estado en un

atus

Cierramostrará al usuario una ventana de confirmación para que decida él si quiere o no cerrarla. Esto se dla ventana

lert(mensaje) aMuest cMuestra unbotones. Si el usuario pulsa p prompt(mensaje, sugerencia) Muestra una ventana de diálogo con el mensaje especificdsugerencia. Si el usuario pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolverá el valor null. Dado que este valor se considera igual a false, podemos comprabarlo directamente en una condición para ver que ha hecho el usuario. Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado var contestacion = prompt("¿Cómo tif (contestacion) alert("Hola, " + contestacion); sDefine la cmomento dado. defaultSt


DHTML

Define la cadena de caracteres que saldrá por defecto en la barra de estado. la especificamos, defaultStatus será igual al último valor que

o milisegundos. deba ejecutarse a

ferencian a objetos Image, Form o s, formularios y enlaces del

la fecha y hora en que se modificó el documento por última vez y conjunción con write para añadir al final del documento

ector que contiene los formularios del documento. El primero será el

ages[] Vector que contiene las imágenes del documento. Se ordenan igual que en

o, aunque también permiten ser accedidas con el nombre

nks[] cumento. Se ordenan igual que en los

os anterioers, aunque no se suele utilizar en el código Javascript. Su razón , al ser los enlaces objetos, permiten incluir código Javascript

n ellos por medio de la pseudo-URL javascript:codigo.

ena) y writeln(cadena) do en cadena en nuestro documento HTML.

orno de carro.

o escribir de nuevo en él.

Cuando notomó status. setTimeout("función",tiempo) Llama a función cuando hayan pasado tiempImprescindible a la hora de realizar cualquier rutina que cierta velocidad.

Objeto Document Este objeto representa el documento HTML en el que estamos. Se accede a él por medio de la referencia document. Su mayor importancia viene por el úmero de vectores que posee, que ren

Link, los cuales permiten acceder a las imágenedocumento, respectivamente. astModified lContiene se suele usar enestas características.

lor bgCoModifica el color de fondo del documento. El color deberá estar en el formato usado en HTML. Es decir, puede ser red o FF0000. forms[] Vnúmero 0, el segundo el 1, etc.. im

el anterior cascomo índice. Es decir, a una imagen definida como <IMG SRC=".." NAME="miImagen"> se puede acceder con document.inages["miImagen"]. liVector que contiene los enlaces del dodde ser es quee write(cadEscribe el código HTML indicawriteln hace lo mismo, pero incluyendo al final un ret close()

el documento, impidiendCierra


DHTML

Cómo escribir en el documento

de escribir en un documento por medio de write o writeln hay en cuenta un hecho fundamental. Para poder escribir en un , éste debe estar abierto y, al abrirlo, se destruye todo el e haya en él.

<TITLE>Escribe y no sobreescribe</TITLE>

<BODY> Esta página fue modificada por última vez el día <script language="JavaScript" type="text/javascript"> document.write(document.lastModified); </SCRIPT> </BODY> </HTML> Resultado Web:

A la horaque tener

odocumentcódigo qu Ejemplo 25: Escribir HTML con javascript escribir.html <HTML>

HEAD> < </HEAD>

Figura 45. Resultado de escribir.html

Objeto Form Los formularios siempre han sido la mejor manera de facilitar la comunicación entre los usuarios y los creadores de una Web. Sin embargo, la implementación de los mismos en el lenguaje HTML ha provocado ciertos problemas debido a sus carencias. Estos problemas han intentado solventarse con scripts, situados tanto en el servidor como en el navegador. Los programas que se ejecutan en el navegador suelen estar escritos en JavaScript, y realizan tareas simples de validación. En muchas ocasiones están combinados con scripts CGI que modifican el mensaje generado por un formulario para facilitar su lectura y manejo.


DHTML

El vector document.forms contiene todos los formularios de un documento. Así, se accedería al primer formulario definido como document.forms[0]. Sin embargo, si usamos el parámetro NAME en la etiqueta HTML: <FORM NAME="miFormulario"> Entonces podremos acceder al formulario con document.miFormulario, que resulta bastante más cómodo y estable ante la posibilidad de variación del número y posición de formularios en el documento. Estos son los métodos y propiedades del objeto Form: submit() Envía el formulario. reset() Devuelve los valores de un formulario a su estado inicial. elements[] Contiene todos y cada uno de los elementos de los que consta el formulario, es decir, los botones, cajas de textos, listas desplegables, etc. que componen un formulario. Cada elemento puede ser un objeto distinto, por lo que deberemos averiguar de qué tipo son por medio de la propiedad común type.

Objetos Text Cuatro elementos HTML distintos (text, textarea, password y hidden) son, desde el punto de vista del DOM, objetos tan parecidos entre sí que vamos a estudiarlos conjuntamente. En realidad, sólo tienen tres propiedades verdaderamente importantes: name, type y value. Los métodos que podemos utilizar en estos objetos son: blur(). Pierde el foco del ratón sobre el objeto especificado. focus(). Obtiene el foco del ratón sobre el objeto especificado. select(). Selecciona el texto dentro del objeto dado. Como ejemplo de su uso, vamos a ver ahora el código de nuestro primer formulario con validación, que comprueba si la dirección de correo electrónico que introduce el usuario es correcta: formularios.html <HTML> <HEAD> <TITLE>Ejemplo de formularios</TITLE> <SCRIPT LANGUAGE="JavaScript"> function validar(direccion) { if (direccion.indexOf("@") != -1) return true; else { alert('Debe escribir una dirección válida');


DHTML

return false;

/HEAD>

T" ACTION="mailto:[email protected]"

Env<INPUT </FORM </BODY</HTML> Res

} }

</SCRIPT> < <BODY> <FORM NAME="form1" METHOD="POS ENCTYPE="text/plain" onSubmit="return validar(this.email.value)">

íame tu e-mail: <INPUT NAME="email" TYPE="text"><BR> TYPE="submit" VALUE="Enviame tu e-mail"> >

>

ultado Web

Figura 46. Resultado de formularios.html

Figura 47. Mensaje de validación


DHTML

El códionSubenviadoarroba e il del formulario. La mvalidardependutiliza pthis.ema this s real dque estthis sedel camhaya tec

Obj oEn estopropiedEn amb estado del elemento es de tipo lógico: puede estar seleccioPor tanun botó

ObjetoEl objetcontienepropied selectedEmpezahay vari cionadas, indica la opción con el índice más bajo. options[Vector una de propied selecte está seleccionada.

as. Cada etiqueta OPTION tendrá como parámetro gina Web e incluiremos un controlador del

go es sencillo: el código llamado por el controlador de evento mit debe devolver false si deseamos que el formulario no sea . Así pues, llamamos a la función que comprueba si hay alguna n el campo ema

anera de llamar a esta función es quizás lo más complicado. La función recibe una cadena de caracteres, devolviendo verdadero o falso iendo de que haya o no una arroba dentro de ella. El controlador ara llamar a esta función lo siguiente: il.value

una referencia estándar. Cuando veamos this en algún códige o en ida deberemos sustituirlo mentalmente por el nombre del objeto en el

á el código. En este caso, como estamos dentro de miFormulario, rá equivalente a document.miFormulario. email es el nombre po que queremos investigar y value el atributo que contiene lo que leado el usuario.

et s Checkbox y Radio s objetos, tanto el atributo HTML VALUE como su correspondiente ad value accesible desde Javascript no corresponden a nada visible. os casos, el nado o no. Este valor lógico se contiene en la propiedad checked.

to, para comprobar si está pulsado o no una caja de confirmación o n de selección específico deberemos preguntar por dicha propiedad.

s Select y Option o Select es, con mucho, el más complicado. Esto es debido a que en su interior un vector de objetos Option. Dispone de dos

ades interesantes:

Index ndo a contar a partir de cero, indica qué opción está seleccionada. Si as selec

] que contiene los objetos Option correspondientes a todas y cada las opciones. El objeto Option, por otro lado, dispone de otras dos ades a estudiar (aparte de las comunes, como type o value):

d: Valor lógico que será verdadero si la opción Text : Texto que acompaña a la opción. Como ejemplo, vamos a ver una lista desplegable que nos permita navegar por diversas páginVALUE la dirección de la pá


DHTML

evento onChange (que se ejecuta cuando el usuario cambia la opción en la lista) que llamará a una rutina que explicamos más adelante:

ipt

l

Ejemplo de Select</TITLE>

ons[menu.selectedIndex].value;

ALUE="">Visitar AL p://www.w3c.org">W3C

<OPTION VALUE="http://www.capunay.com">Capunay le

irA simplemente utiliza la opción elegida para obtener por medio r la dirección de la página a la que debe acudir.

escogida Ejemplo 26: Select con javascr select.htm <HTML> <HEAD> <TITLE> <SCRIPT LANGUAGE="JavaScript"> function irA(menu){

ref = menu.opti window.location.h } </SCRIPT> </HEAD> <BODY> <FORM name="formulario"> <SELECT NAME="menu" SIZE=1 onChange ="irA(this)"> <OPTION V <OPTION V UE="htt

<OPTION VALUE="http://www.google.com.pe">Goog

T> </SELEC</FORM> </BODY> </HTML> La funció

on

de su valResultado Web:

Figura 48. Resultado de select.html


DHTML

Otros objetos lo de objetos del documento define varios objetos, por así decirlo,

ción con nada físico de la página en la que que estén en

dio de la referencia document.history y ontiene todas las direcciones que se han visitado en la sesión actual.

erm pone de varios métodos para sustituir l documento actual por alguno que el usuario ya haya visitado:

a página anterior. Es muy sencillo de utilizar:

iente.

e se indique, siendo donde un número tal que go(1)=forward()

rotocolo de la página actual. Habitualmente http.

de se alberga la página actual.

la página actual.

dido a una página por medio de un ancla, contiene una ohadilla seguida de ese ancla. Por ejemplo, #location.

E"m

l modeenores", que no tienen rela

estamos. Es decir, no guardan relación con las etiquetas HTMLellas escritas.

Objeto History Se accede a este objeto por mecAunque no p ite acceder a ellas, dise back() Volver a l<A HREF="javascript:window.history.back()"> forward() Ir a la página sigu go(donde)Ir a dondy go(-1)=back().

Objeto Location Se accede a este objeto por medio de la referencia document.location y contiene información sobre la dirección de la página actual en varias propiedades. href Permite el acceso a la dirección de la página actual. Si lo cambiamos, pues cambiaremos de página. protocol P host Máquina don pathname Camino de hash Si hemos accealm search


DHTML

Puede que hallas notado que muchas páginas (especialmente en los con una estructura

ina.php?busq=HTML+en+espanol&tipo=Y. Esta propiedad acceder a esa última parte de la dirección (a partir de la

terrogación, inclusive). Puede ser útil para pasar parámetros de una página

donde esta ejecutándose. o podemos sobreescribir estos atributos, pero sí leerlos.

bjeto sólo está disponible desde las 0 de ambos navegadores.

lo:

as Communicator o IE4 para veriguarlo.";

document.write(texto); Puede verse que antes de acceder al objeto, investigo si éste existe, most mensaje stancias en caso de que no sea así.

motores de búsqueda) tienen unas direcciones inmensascomo: pagpermite ina otra.

Objeto Navigator Se accede a él por medio de la referencia navigator y nos permite averiguar varias características del navegador que usamos. Por ejemplo: appName Nombre del navegador. appVer Número principal de versión. language Idioma del mismo. platform

lataformaPN

Objeto Screen Como cabía esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos permitirá conocer la configuración de la pantalla del usuario. Al igual que en el anterior objeto, todos sus atributos son de sólo

ctura. Conviene indicar que este oleversiones 4. height :Altura de la resolución de la pantalla. width :Anchura de la resolución de la pantalla. pixelDepth :Número de bits por pixel.

jempEif (window.screen) texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + " colores."; else texto="quien sabe cuantos colores, necesito que tenga

rando un de circun


DHTML

FichUn fi es un ar e podremos guardar funciones y variables globa rán leerse desde cualquier página HTML. Gracias a ellos podre plicar funciones que se necesiten en más de un do rarlos a nuestras páginas de esta manera: Ejemplo 27: Uso de externo.html <HTM<HEA <TIT ágina</TITL <SCRIPT LANGUAGE=" ript" SRC="funciones.js">  </SCRIPT> </HEAD> <BODY> Lo qu ea. </BODY> </HTM El código q IPT> sólo se ejecu de q ra del fichero .js falle. Por otra parte, hay que i fiche n cuestión contendrá sólo código en Javascript, no e e ún tipo, ni siquiera las de apertura y cierre de SCRIPT.

eros .js chero .js chivo dondles que podmos evitar el tenecumento. Podrem

r que duos incorpo

archivos js

L> D> LE>Mi P E>

Javasc

o js');

e s

L>

ue incluyamtará en caso

os entre un <SCRIPT SRC> y un </SCRue la lectu

ndicar que el ro etiquetas HTML d ning


DHTML

HOJ CSS – Ca Dentro del dis eb, se presenta esta como la vanguardia en uanto a definición de estilos dentro de las plantillas de diseño. A través de

nforman el proyecto. SS2, como fue antes CSS1, se basa en una serie de reglas de diseño: • atibilid Las aplicaciones del

o CSS s hojas de estilo CSS1. aci e estilo

y de Además, las ones

trar los to estilí r CSS no será procesado, pero el conte

men os. Las hojas de comp

acionesmarcado. Dimpacto en e

• Independen or, la plataforma y el dispositivo. Las hojas

un archivo necesita ser cambiado.

d. CSS2 es más compleja que CSS1, pero sigue siendo je de estilo simple que es humanamente legible y posible

eterminado. • Rendimiento de la red. CSS proporciona una compacta codificación

los contenidos. Comparado con los archivos de nes o de audio que son usados frecuentemente por los

ara conseguir ciertos efectos en el procesamiento, las tilo, la mayoría de las veces, disminuyen el tamaño del Además, menos conexiones de la red tienen que ser

abiertas, lo cual ayuda a incrementar el rendimiento de la red. • Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias

maneras. La característica clave es la capacidad de formar una cascada de estilos con la información especificada en la hoja de

AS DE ESTILO EN CASCADA

scade Style Sheet (Hojas de Estilo en Cascada).

eño de páginas Wcinstrucciones en código HTML se definen los estándares del conjunto de páginas que coC

Compusuari

ad hac 2 serán capaces de entender la

ia atrás y hacia adelante.

Las aplic ones del usuario CSS1 podrán leer las hojas dscartar las partes que no entienden. CSS2

aplicacimos

del usuario que no soporten CSS serán capaces de documentos estilísticamente mejorados. Por supuesto, el

efectodo

stico hecho posible ponido será presentado.

• Comple tariedad con documentos estructuradlementan los documentos estructuradestilo os (ej., HTML y XML) proveyendo información estilística del texto ebe ser fácil cambiar la hoja de estilo con poco o ningún l sistema de marcas.

cia del vended

aplic

de estilo permiten a los documentos permanecer independientes del vendedor, la plataforma y el dispositivo. Las mismas hojas de estilo son también independientes del vendedor y la plataforma, pero CSS2 permite dirigir una hoja de estilo a un grupo de dispositivos (ej., impresoras).

• Mantenibilidad. Apuntando a una hoja de estilo desde los documentos, los responsables de los sitios en la Web pueden simplificar el mantenimiento y conservar un estilo y un efecto consistente a todo lo largo del sitio. Por ejemplo, si el color del fondo de las páginas de una organización cambia, sólo

• Simplicidaun lenguade escribir. Las propiedades CSS se mantienen independientes unas de otras en la medida de lo posible y generalmente sólo hay un modo de conseguir un efecto d

para presentar imágeautores phojas de escontenido.


DHTML

estilo predeterminada (aplicación del usuario), las hojas de estilo del usuario, las hojas de estilo vinculadas, el encabezamiento del documento y en los atributos de los elementos que forman el cuerpo del documento.

• Riqueza. Proporcionando a los autores un abundante juego de efectos de procesamiento, aumenta la riqueza de la Web como medio de expresión. Los diseñadores han estado ambicionando la funcionalidad comúnmente encontrada en los programas de edición y de presentaciones gráficas. Algunos de los efectos requeridos entran en conflicto con la independencia del dispositivo, pero CSS2 llega muy lejos satisfaciendo las demandas de los diseñadores.

• Combinación con lenguajes alternativos. El juego de propiedades de CSS descriptas en esta especificación conforman un sólido modelo de aplicación de formatos para presentaciones visuales y auditivas. Este modelo puede ser accedido mediante el lenguaje CSS, pero la combinación con otros lenguajes también es posible. Por ejemplo, un programa en JavaScript puede cambiar dinámicamente el valor de la propiedad 'color' de un determinado elemento.

• Accesibilidad. Varias características de CSS harán a la Web más accesible para los usuarios con discapacidades: Las propiedades para controlar la apariencia de las fuentes permiten a los autores eliminar las inaccesibles imágenes de texto renderizado. Las propiedades de posicionamiento permite a los autores eliminar los artilugios con el sistema de marcas (ej., imágenes invisibles) para forzar la composición. La semántica de las reglas !important indica que los usuarios con particulares requerimientos de presentación pueden suplantar las hojas de estilo del autor. El nuevo valor 'inherit' (heredado) para todas las propiedades mejora la generalidad del funcionamiento en cascada y permite una más fácil y consistente sintonía en el estilo. El avanzado soporte de medios, incluyendo grupos de medios y los tipos de medios braille, de relieve y tty permitirán a los usuarios y autores confeccionar páginas para esos dispositivos. Las propiedades auditivas ofrecen control sobre la salida de voz y audio. Los selectores de atributos, la función 'attr()' y la propiedad 'content' brindan acceso al contenido alterno. Los contadores y la numeración de secciones y párrafos pueden mejorar la navegabilidad del documento y economizar espacio de sangrado (importante en los dispositivos braille). Las propiedades 'word-spacing' y 'text-indent' también eliminan la necesidad de usar espacios en blanco extras en el documento.

Aquí Mostraremos cuán fácil puede ser diseñar unas simples hojas de estilo. Para esta guía, necesitará saber un poco del código HTML y alguna terminología básica de composición gráfica. Comenzamos con un pequeño documento HTML: Ejemplo 28: HTML y CSS


DHTML

>

<BODY> rCap</H1>

L PUBLIC "-//W3C//DTD HTML 4.0//EN">

<BODY> scarCap</H1>

ente HTML y pueden compartirse entre varios documentos. Para vincular

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> HTML>

<H > <TITLE> <LI re </HEAD <BO Y> <H1>L /H1> <P s

<HTML <HEAD> <TITLE>La Web de OscarCap</TITLE> </HEAD>

<H1>La Web de Osca <P>Esta página le ayudará a diseñar páginas Web. </BODY> </HTML> Para establecer el color azul para el texto de los elementos H1, puede escribir la siguiente regla CSS: H1 { color: blue } Una regla CSS consta de dos partes principales: un selector ('H1') y una declaración ('color: blue'). La declaración tiene dos partes: una propiedad ('color') y un valor ('blue'). La especificación HTML 4.0 define de qué manera las reglas de las hojas de estilo pueden especificarse para los documentos HTML: ya sea dentro del documento HTML o a través de una hoja de estilo externa. Para poner la hoja de estilo dentro del documento, use el elemento STYLE: Ejemplo 29: Style <!DOCTYPE HTM<HTML> <HEAD> <TITLE> ---- La Web de OscarCap ---- </TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD>

<H1>La Web de O <P>Esta página Web te enseñará mucho. </BODY> </HTML> Para una mayor flexibilidad, recomiendo que los diseñadores especifiquen hojas de estilo externas; ellas pueden cambiarse sin modificar el documento fuuna hoja de estilo externa puede usar el elemento LINK:<<

EAD La Web de OscarCap</TITLE>

NK l="stylesheet" href="oscar.css" type="text/css"> >

D a Web de OscarCap<

> E ta página Web te enseñará mucho.


DHTML

</BODY>

ento LINK especifica: lesheet").

uto "href". de hoja de estilo que se vincula: "text/css".

Para mostrar la íntima relación entre una hoja de estilo y el sistema as, continuamos usando el elemento STYLE en esta

carCap ---- </TITLE>

r del D gunda coloca el color del en 'blue'. Co o ningún valor para el color

ento P, éste heredará el color de su elemento padre, es decir, ento H1 también es un elemento hijo de BODY pero la

plaza el valor heredado. En CSS existen a menudo tales ntre diferentes valores y esta especificación describe cómo

erlos. 2 tiene más de 100 propiedades diferentes, incluyendo 'color'. Veamos

</HTML> El elemel tipo de vínculo: a una hoja de estilo ("styla ubicación de la hoja de estilo a través del atribel tipo

estructurado de marcguía. Agreguemos más colores: Ejemplo 30: Colores con CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> ---- La Web de Os <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE>

</HEAD> <BODY> <H1>La Web de OscarCap</H1> <P> Esta página Web te enseñará mucho. </BODY>

</HTML> a hoja de estilo contiene ahora dos reglas: la primera establece el coloL

elemento BO Y como 'red' , en tanto la selemento H1 mo no se ha especificade

del elemBODY. El elem

la reemsegunda regnflictos eco

resolvSSC

algunos otros: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> ---- La Web de OscarCap ---- </TITLE>

<STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD>

<BODY>


DHTML

<H1>La Web de OscarCap</H1> <P> Esta página Web te enseñará mucho. </BODY> </HTML> Lo primero que se puede observar es que varias declaraciones se agrupan en un bloque encerrado por llaves ({...}) y separado por un punto y coma, no obstante la última declaración también debe estar seguida por un punto y coma. La primera declaración en el elemento BODY establece la familia de fuentes "Gill Sans". Si esa fuente no está disponible, el navegador del usuario usará la familia 'sans-serif' que es una de las cinco familias de fuentes genéricas

ue todas las aplicaciones del usuario reconocen. Los elementos hijos de

argen alrededor del elemento BODY es tres veces mayor que el tamaño de

de CSS (incluyendo CSS2). Las futuras

qBODY heredarán el valor de la propiedad 'font-family'. La segunda declaración establece el tamaño de la fuente del elemento BODY en 12 puntos. La unidad de medida "punto" es normalmente usada en la tipografía impresa para indicar el tamaño de la fuente y otras dimensiones. Es un ejemplo de unidad de medida absoluta que no varía según el entorno. La tercera declaración usa una unidad de medida relativa que varía de acuerdo a las circunstancias. La unidad "eme" está relacionada con el tamaño de la fuente del elemento. En este caso el resultado es que el mla fuente.

Sintaxis y tipos básicos de datos en CSS2 Esta sección describe una gramática (y reglas de análisis con compatibilidad utura) común a cualquier versión f

versiones de CSS adherirán a esta sintaxis central, aunque pueden agregar restricciones sintácticas adicionales. Comandos Todos los niveles de CSS --nivel 1, nivel 2 y cualquier futuro nivel-- usan la misma sintaxis central. Los diseñadores pueden usar esta característica para crear hojas de estilo que funcionen con aplicaciones de usuario antiguas, mientras ejercitan también las posibilidades de los niveles más nuevos de CSS. A nivel de léxico, las hojas de estilo CSS consisten de una secuencia de comandos. La lista de comandos para CSS2 es la que sigue. Las definiciones usan expresiones regulares al estilo de Lex. Los códigos octales se refieren a ISO 10646. Como en Lex, en caso de múltiples equivalencias, la equivalencia más larga determina el comando.

Tabla 12. Comando CSS Comando Definición

IDENT {ident} ATKEYWORD ST

@{ident} RING {string}


DHTML

Comando Definición HASH #{name}

N {num}{ident}

&*-~]|{nonascii}|{escape})*{w}\)

ICODE- U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?

 ; ; { \{ } ( \(

[ \[ ] \] S [ \t COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/ FUNCTION {ident}\( INCLUDES

DELIM cualquier otro carácter no equivalente con las reglas anteriores

Las macros entre llaves ({}) arriba son definidas como sigue:

Macro Definición

-Z0-9]|{nonascii}|{escape}

|

Ident {nmstart}{nmchar}* name {nmchar}+ nmstart [a-zA-Z]|{nonascii}|{escape} nonascii [^\0-\177] unicode \\[0-9a-f]{1,6}[ \n\r\t\f]? escape {unicode}|\\[ -~\200-\4177777] nmchar [a-zAnum [0-9]+|[0-9]*\.[0-9]+ string {string1} {string2}


DHTML

Macro Definición string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii} {escape})*\"

\'([\ - {escape})*\' \n|\r\n|\r|\f

[ \t\r\n\f]* Abajo está la sintax CSS. Las en cóm .

a ATKEYWORD S* otros* [ bloque | ';' S* ];

'}' S*; elector otros+;

declaración propiedad ':' S* valor;

UNCTION | DASHMATCH | '(' otros* ')' | '[' otros* ']' ] S*;

T no aparecen en la gramática (para mantenerla gible), pero cualquier cantidad de estos comandos pueden aparecer en

r el comando S en la gramática anterior está colocado para los espacios en

Solamente los caracteres "espacio" (código 32 en Unicode), ance de

(12) pueden aparecer en los espacios en blanco. Otros caracteres que roducen espacios, tales como "espacio eme" (8195) y "espacio ideográfico"

clave to s palabras clave no s una palabra clave,

d" no lo es. (Es una cadena.)

|

~]|\\{nl} cii}|string2 t !#$%&( |\"|{nonasnl w

is central para secciones siguientes describo usarla

Tabla 14. Secciones CSS

hoja de estilo [ CDO | CDC | S | estamento ]*; estamento regla | regla-arroba; regla-arrobbloque '{' S* [ otros | bloque | ATKEYWORD S* | ';' ]* '}' S*; regla selector? '{' S* declaración? [ ';' S* declaración? ]*s

propiedad IDENT S*; valor [ otros | bloque | ATKEYWORD S* ]+; otros [ IDENT | NUMBER | PERCENTAGE | DIMENSION |

STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | F

Los comandos COMMENlecualquier luga ntre otros comandos. Eblanco. "tabulador" (9), "avance de línea" (10), "retorno de carro" (13) y "avhoja"p(12288) nunca forman parte de los espacios en blanco.

Palabras clave Las palabras man la forma de identificadores. Ladeben ir entre comillas ("..." o '...'). De este modo, red epero "re Otros ejemplos ilícitos: width: "auto"; border: "none"; font-family: "serif"; background: "red";


Iniciando la programación con PHP

III. Iniciando la programación con PHP Para iniciar debemos conocer algunos conceptos básicos, para ello nos

s PHP? pertext Preprocessor") es un lenguaje de

go abierto" interpretado, de alto nivel, embebido en páginas HTML y tado en el servidor [1]. Este lenguaje se caracteriza porque solo es

o JavaScript, PHP es un lenguaje

similar a C; se puede usar en tres

-GTK.

s en PHP pueden almacenar datos de diferentes tipos, sin intaxis para el uso de

siguiente modelo: $var , es decir, toda variable ebe iniciar con el símbolo de dólar ($) y luego se escribe el nombre de la

edad” se escribe $edad.

fine(). Una vez definida, a. stante solo es necesario especificar su

tiene que especificar el prefijo $.

Las constantes solo pueden ser definidas usando la función define(),

stantes solo puede albergar valores escalares

haremos una pregunta:

Que ePHP (acrónimo de "PHP: Hy"códi

jecueinterpretado pero no compilado, y es embebido en el código HTML, lo que le da una alto rendimiento y potencia.

diferencia de otros lenguajes script comAscript que se ejecuta en el servidor Web, de tal manera que, solamente el resultado de su ejecución es enviado al cliente Web (navegador). Tomando en cuenta lo escrito anteriormente podemos decir que, el código fuente escrito en PHP no aparecerá en el código fuente de la página Web que muestra el navegador. Viendo el lenguaje desde el punto de vista del programador podemos decir

ue es un lenguaje con una sintaxis qcampos: el primero - el mas tradicional - es en los scripts del lado del servidor, el segundo es la ejecución de scripts en la línea de comandos del sistema operativo (Linux o Windows); y el tercero en el desarrollo de plicaciones de interfaz gráfica con PHPa

Variables Las variablenecesidad de ser declaradas previamente. La svariables esta definido por eldvariable. Por ejemplo para hacer referencia a la variable “

Constantes te usando la función deSe puede definir una constan

no puede ser modificada ni eliminadara obtener el valor de una conP

nombre. A diferencia de las variables, no se Estas son las diferencias entre constantes y variables:

•nunca por simple asignación

• Las constantes pueden ser definidas y accedidas sin tener en cuenta las reglas de alcance del ámbito.

• Las constantes no pueden ser redefinidas o eliminadas después de establecerse; y

• Las con



Ejemplo 31: Definición de constantes <?php define("CONSTANT", "Desarrollo Web.");

AN rrollo Web" >

o 'double'), eciales:

xpresiones

', obviamente, tiene el valor 5 ó, en otras palabras '5' es una expresión con el valor 5 (en este caso,

) {

zado con el concepto de funciones, asumirás ue escribir $c = foo() es esencialmente lo mismo que escribir $c = 5, y has

lmente las

scalares son aquellos cuyos valores no pueden 'dividirse'

echo CONST T; // imprime "Desa?

Tipos de datos PHP soporta ocho tipos primitivos. Cuatro tipos escalares: bolean Integer, float (número de punto-flotante, también conocido com

s espstring Dos tipos compuestos: array, object Y finalmente dos tiporesource y NULL.

ELas expresiones son la piedra angular de PHP. En PHP, casi cualquier cosa que escribes es una expresión. La forma más simple y ajustada de definir una expresión es "cualquier cosa que tiene un valor". Las formas más básicas de expresiones son las constantes y las variables. Cuando escribes "$a = 5", estás asignando '5' a $a. '5

'5' es una constante entera). Las funciones son un ejemplo algo más complejo de expresiones. Ejemplo 32: Considera la siguiente función

?php <function foo ( return 5;

} ?>

niendo que estés familiariSupoqacertado. Las funciones son expresiones que valen el valor que retornan. Como foo() devuelve 5, el valor de la expresión 'foo()' es 5. Normafunciones no devuelven un valor fijo, sino que suele ser calculado. Desde luego, los valores en PHP no se limitan a enteros, y lo más normal es que no lo sean. PHP soporta tres tipos escalares: enteros, punto flotante y cadenas (los tipos een partes menores, no como los arrays, por ejemplo). PHP también soporta dos tipos compuestos (no escalares): arrays y objetos. Se puede asignar cada uno de estos tipos de valor a variables o bien retornarse de funciones, sin ningún tipo de limitación.



P va las cho mes un lenguaje orientado a expresi en el sentido de que casi todo es una expresió mpldos valores involucrados, el valor d nstante entera '5', y el valor de $a q tá sien mbiéadicional implicado aquí, y es el valor de la propia asignación. La asignación misma se ev odecir que '$a = 5', independienteme lo que hace, es una expresión con l valor 5. De esta manera, escribir algo como '$b = ($a = 5)' es como

5; e una instrucción). omo las asignaciones se evalúan de derecha a izquierda, puedes escribir

'$b = $a = 5'.

, como en C, hay dos tipos de incremento - pre-incremento y post-mentan la variable y el efecto en la

dica en el valor de la propia expresión cremento. El preincremento, escrito '++$variable', se evalúa al valor

variable antes de leer su valor, de ahí el 'preincremento'). El postincremento, escrito '$variable++', se evalúa

alizar el incremento (PHP incrementa de ahí el nombre 'postincremento').

s son las expresiones de comparación. xpresiones se evalúan a 0 o 1, significando FALSO (FALSE) o

nte. PHP soporta > (mayor que), >= = (distinto), < (menor que) y <= (menor o

ual que). Estas expresiones se usan frecuentemente dentro de la ejecución

taremos, es la combinación operador- incrementar $a en 1, basta con escribir

' o ++$a'. Pero qué pasa si quieres añadir más de 1, por ejemplo 3? odrías escribir '$a++' múltiples veces, pero no es una forma de hacerlo ni

se evalúa al valor de $a más 3, y se asigna de nuevo a $a, lo que sulta en incrementar $a en 3. En PHP, como en otros lenguajes como C,

bir rá más lara y también fácil de entender. Añadir 3 al valor actual de $a se puede

re decir exactamente "toma el valor de $a, úmale 3, y asígnalo otra vez a $a". Además de ser más corto y claro,

resulta en una ejecución más rápida. El valor de '$a += 3', como el a asignación normal y corriente, es el valor asignado. Ten en

o el valor combinado de $a más 3 (ése es el valor alquier operación binaria puede ser usada en forma de

erador-asignación, por ejemplo '$a -= 5' (restar 5 del valor de $a), '$b *= 7' iplicar el valor de $b por 7), etc.

ón que puede parecer extraña si no la has visto en otros nguajes, el operador condicional ternario:

<?php

HP lle expresiones mu ás allá, al igual que otros lenguajes. PHP ones,

n. Considera el eje o anterior '$a = 5'. Es sencillo ver que hay e la co

ue es do actualizado ta n a 5. Pero la verdad es que hay un valor

alúa al valor asignad , en este caso 5. En la práctica, quiere nte de

eescribir '$a = $b = 5;' (un punto y coma marca el final dCtambién En PHPincremento. Ambos, en esencia, increvariable es idéntico. La diferencia rainincrementado (PHP incrementa lanombre al valor original de $variable antes de rela variable después de leer su valor, Un tipo muy corriente de expresioneEstas eVERDADERO (TRUE), respectivame(mayor o igual que), == (igual que), !igcondicional como la instrucción if. El último tipo de expresiones que traasignación. Ya sabes que si quieres'$a++Peficiente ni cómoda. Una práctica mucho más corriente es escribir '$a = $a + 3'. '$a + 3'repuedes escri esto de una forma más concisa, que con el tiempo secescribir como '$a += 3'. Esto quiestambiénvalor de uncuenta que NO es 3, sinasignado a $a). Cuop(mult Hay otra expresile



$first ? $second : $third

ubexpresión es verdadero (distinto de cero), entonces se evalúa la segunda subexpresión, si no, se evalúa la tercera y

ejemplo te a co mejor el pre y post i y las <f le( return $i*2; } $b = $a valor c$c = $a++; /* p nto, asi (5) a $c */

= ++$b; /* nto, a do de $b (6)

r el doble del valor de $d antes del incremento,

as las expresiones son instrucciones. En este caso, una instrucción a expresión seguida de un punto y coma.

na instrucción en álida [3].

perador es algo a lo recibe uno o más valores y produce otro valor. Existen tres tipos de operadores:

era sobre un único valor, por ejemplo: ! perador de negación) ra

S los o mayoría de o que Y or te Éste de s, en a terceo ecu r las emuy buena idea Existen varios tip ores nas clases:

?> Si el valor de la primera s

ése es el valor. El siguiente yudará a mprender un poco

s en gencremento expresione neral:

?php unction doub $i) {

= 5; /* asignar el inco a las variables $a y $b */ ostincreme

preincremegnar el valor original de $a

signar el valor incrementa$e = $da $d y a $e */ /* En este punto, tanto $d como $e son iguales a 6 */ $f = double($d++); /* asigna2*6 = 12 a $f */ $g = double(++$e); /* asignar el doble del valor de $e después del incremento, 2*7 = 14 a $g */ $h = $g += 10; /* primero, $g es incrementado en 10 y termina valiendo 24. Después el valor de la asignación (24) se asigna a $h, y $h también acaba valiendo 24. */ ?> No todtiene la forma 'expr' ';', es decir, unEn '$b=$a=5;', $a=5 es una expresión válida, pero no es usí misma. Por otro lado '$b=$a=5:' sí es una instrucción v

Operadores Un o

l operador unario, el cual opE

(o o ++ (ope dor de incremento). binar upo contiene la egundo,

speradores

PHP. ios; este gr

peradore soporta el operadxpresione

rnario: ?:. base a un

ebe ser usado para seleccionar entre dos ra, en lugar de seleccionar dos sentencias

rutas de ej ción. Rodea. [4]

xpresiones ternarias con paréntesis es una

os de operad , a continuación veremos algu



Operadores de Aritmética

El opuesto de $a Suma de $a y $b.

Substracción Diferencia entre $a y $b. Multiplicación Producto de $a y $b. División Cociente de $a y $b.

sto de $a dividido por $b.

en todos los casos, ros (o cadenas que son convertidas a

$a % $b es negativo para valores negativos de $a.

co de asignación es "=". A primera vista, usted podría en él como "es igual a". No lo haga. Lo que quiere decir en realidad

de la izquierda recibe el valor de la expresión a la e a").

El valor de una expresión de asignación es el valor que se asigna. Es decir, el valor de "$a = 3" es 3. Ejemplo 33: Operador de asignación <?php $a = ($b = 4) + 5; // $a es igual a 9 ahora, y $b ha sido definido a 4. ?> En conjunto con el operador básico de asignación, existen "operadores combinados" para todos los operadores de aritmética binaria, unión de matrices y de cadenas, que le permiten usar un valor en una expresión y luego definir su va

?php

a += 5; // define $a como 8, como si hubiésemos dicho: $a = $a + 5;

b .= "a todos!"; // (Ojo con el punto “.” Después de la variable $b) define $b Hola a todos!", tal como $b = $b . "a todos!";

ote que la asignación copia la variable original en la nueva (asignación por bio a una no afecta a la otra. Esto puede copiar algo como una matriz de gran

Tabla 15. Operadores aritméticos de PHP

Ejemplo Operador Resultado -$a Negación $a + $b Adición $a - $b $a * $b $a / $b $a % $b Módulo Re

El operador de división ("/") devuelve un valor flotante incluso si los dos operandos son enteenteros). Nota: El resto de

Operadores de Asignación El o

ensar perador bási

pes que el operando

erecha (es decir, "se defind

lor como el resultado de esa expresión. Ejemplo 34: Operadores de asignación combinados <$a = 3; $$b = "¡Hola "; $como "¡?> Nvalor), de modo que cualquier camresultar de importancia si necesita



tamaño al interior de un ciclo reducido. A partir de PHP4, es soportada la signación por referencia, usando la sintaxis $var = &$otra_var;, pero esto

HP3.

Operadores deen comparar dos valores y son los siguientes:

perador Resultado $a == $b Igual TRUE si $a es igual a $b.

UE si $a es igual a $b, y son del mismo tipo.

Diferente TRUE si $a no es igual a $b. $a <> $b Diferente TRUE si $a no es igual a $b.

= $b No idénticos TRUE si $a no es igual a $b, o si no son del mismo tipo.

$a < $b Menor que TRUE si $a es estrictamente menor que $b.

Mayor que TRUE si $a es estrictamente mayor que $b.

$a <= $b Menor o igual que

TRUE si $a es menor o igual que $b.

$a >= $b Mayor o igual TRUE si $a es mayor o igual que $b.

i compara un entero con una cadena, la cadena es convertida a un número. cadenas numéricas, ellas son comparadas como enteros.

stas reglas también se aplican a la sentencia switch. <?php var_dump(0 == "a"); // 0 == 0 -> true var_dump("1" == "01"); // 1 == 1 -> true switch ("a") { case 0: echo "0"; break;

erador condicional es el operador "?:" (o ternario).

r ternario

ano es posible en P

Comparación Estos operadores permit

Tabla 16. Operadores de comparación de PHP Ejemplo O

$a === $b Idéntico TR

$a != $b

$a !=

$a > $b

que SSi compara dos E

case "a": // nunca se ejecuta ya que "a" ya ha coincidido con 0 echo "a"; break;

} > ?

perador Ternario O

Otro op

emplo 35: OperadoEj <?php



// Ejemplo de uso de: el Operador Ternario ccion = (empty($_POST['accion'])) ? 'predeterminada' : $_POST['accion'];

sentencia if/else

ccion = 'predeterminada'; else {

ST['accion']; } ?>

ota: Por favor note que el operador ternario es una sentencia, y que no v sentencia. Es importante

aber esto si se desea devolver una variable por referencia. La sentencia: var == 42 ? $a : $b; en una función con retorno-por-referencia no

e se ha mencionado y una advertencia es generada en rsiones posteriores de PHP.

"apilar" las expresiones ternarias. El mportamiento de PHP cuando se usa más de un operador ternario al erior de una sentencia no es obvio:

rnario No-Obvio

p a primera vista, lo siguiente parece imprimir 'true'

rgo, la salida real de la línea anterior es 't' be a que las expresiones ternarias

son evaluadas de izquierda a derecha

presentado anteriormente 'tru

uede ver que la primera expresión 'true', la cual

en su lugar evalúa a (bool)true, devolviendo por lo tanto la rama de verdad de la segunda expresión ternaria.

peradores de Control de Errores para un operador de control de errores: el signo de

o es colocado al comienzo de una expresión en PHP, de error que pudiera generarse a causa de esa expresión

$a // La línea anterior es idéntica a estaif (empty($_POST['accion'])) { $a} $accion = $_PO

La expresión (expr1) ? (expr2) : (expr3) evalúa a expr2 si expr1 evalúa a TRUE, y expr3 si expr1 evalúa a FALSE. Nevalúa a una ariable, sino al resultado de una sreturn $funcionará por lo quve Nota: Es recomendable que evite coint Ejemplo 36: Comportamiento Te <?ph//echo (true?'true':false?'t':'f'); // sin emba// esto se de// // la siguiente es una versión más obvia del código //echo ((true ? e' : 'false') ? 't' : 'f'); // aquí p// es evaluada como// // ?>

OPHP ofrece soporte

andarroba (@). Cucualquier mensaje será ignorado.



Si la característica track_errors está habilitada, cualquier mensaje de error hp_errormsg.

riable será sobrescrita en cada instancia de error, así que realice sus hequeos de forma temprana si quiere usarla.

jemplo 37: Control de errores

cional de archivo */ i_archivo = @file ('archivo_que_no_existe') or

ión, no solo con funciones: valor = @$cache[$llave];

// no producirá una anotación si el índice $llave no existe. ?> Nota: El operador @ trabaja sólo sobre expresiones. Una simple regla de oro es: si usted puede tomar el valor de algo, entonces puede usar el operador @ sobre ese algo. Por ejemplo, puede usarlo al inicio de variables, llamadas a funciones y sencencias include(), constantes, y así sucesivamente. No puede usarlo sobre definiciones de función o clase, ni sobre estructuras condicionales como if y foreach, y así sucesivamente.

Operadores de ejecución PHP soporta un operador de ejecución: las comillas invertidas (``). PHP ejecuta el contenido entre las comillas como si se tratara de un comando del intérprete de comandos; su salida será devuelta (puede ser asignada a una variable).El uso del operador de comillas invertidas es idéntico al de shell_exec(). Ejemplo 38: Operador de ejecución <?php $salida = `dir *.*`; echo "<pre>$salida</pre>"; ?> Nota: El operador de comillas invertidas es deshabilitado cuando se encuentra activo safe mode o cuando se deshabilita shell_exec().

Operadores de Incremento/Decremento PHP ofrece soporte de operadores de pre- y post-incremento y decremento, estilo lenguaje C. Nota: Los operadores de incremento/decremento no afectan a los valores booleanos. Decrementar valores NULL tampoco tiene efecto, aunque incrementarlos resulta en 1.

Tabla 17. Operadores de incremento y decremento de PHP Ejemplo Operador Efecto

generado por la expresión será almacenado en la variable $pLa vac E <?php /* Error inten$m die ("La apertura de archivo ha fallado: el error fue '$php_errormsg'"); // esto funciona con cualquier expres$



++$a Pre-incremento Incrementa $a en uno, y luego devuelve

incrementa $a en uno.

: Operadores de incremento y decremento

cho "<h3>Postincremento</h3>";

cho "Debe ser 5: " . $a++ . "<br />\n"; echo "Debe ser 6: " . $a . "<br />\n";

to</h3>";

"<h3>Predecremento</h3>";

ebe ser 4: " . $a . "<br />\n";

incrementos y decrementos sobre variables de er.

peradores_i.php

6; $n++) {

ltado Web:

$a. $a++ Post-incremento Devuelve $a, y luego

--$a Pre-decremento Decrementa $a en uno, luego devuelve $a.

$a-- Post-decremento Devuelve $a, luego decrementa $a en uno.

Ejemplo 39 <?php e$a = 5; e

echo "<h3>Preincremento</h3>"; $a = 5; echo "Debe ser 6: " . ++$a . "<br />\n"; cho "Debe ser 6: " . $a . "<br />\n"; e

echo "<h3>Postdecremen

= 5; $aecho "Debe ser 5: " . $a-- . "<br />\n";

ho "Debe ser 4: " . $a . "<br />\n"; ec

choe$a = 5; cho "Debe ser 4: " . --$a . "<br />\n"; e

echo "D?>

como se trabaja los Notearactc

Ejemplo 40: Incremento y decremento con variables tipo carácter. o

?php <$i = 'W';for ($n=0; $n< echo ++$i . "\n"; } ?> Resu



Figura 49. Resultado de operadores_i.php

os operadores de incremento/decremento no afectan a los valores

peradores de Lógica

Tabla 18. Operadores lógicos lo Operador Resultado

TRUE si tanto $a como $b son TRUE.

TRUE si cualquiera de $a o $b es TRUE.

xor $b O exclusivo (Xor)

TRUE si $a o $b es TRUE, pero no ambos.

! $a Negación TRUE si $a no es TRUE.

s "and" y

datos tipo string. El primero es el operador de oncatenación ('.'), el cual devuelve el resultado de concatenar sus

ntas a lado derecho e izquierdo. El segundo es el operador de bre concatenación ('.='), el cual adiciona el argumento del lado

do izquierdo.

e cadena

= "¡Hola "; $a . "Mundo!"; // ahora $b contiene "¡Hola Mundo!"

Nota: Lbooleanos. Decrementar valores NULL tampoco tiene efecto, aunque incrementarlos resulta en 1.

O

Ejemp$a and $b $a && $b

Y

$a or $b $a || $b

O

$a

La razón para tener las dos variaciones diferentes de los operadore"or" es que ellos operan con precedencias diferentes. Para el caso de "and": "&&" tiene mayor precedencia que "and", analógicamente ocurre con "or".

peradores de Cadena OExisten dos operadores para cargumeasignación soderecho al argumento en el la Ejemplo 41: Operadores d <?php $a$b = $a = "¡Hola "; $a .= "Mundo!"; // ahora $a contiene "¡Hola Mundo!" ?>



Operadores de Matrices

ión de $a y $b. si $a y $b tienen las mismas

smas

TRUE si $a no es igual a $b. a no es idéntico a $b.

iempo que cualquier llave duplicada NO es sobrescrita.

de matrices

m.php

hp y("a" => "manzana", "b" => "banano"); y("a" => "pera", "b" => "fresa", "c" => "cereza");

cho "<br>Unión de \$a y \$b: <br>"; );

// Unión de $b y $a ho "<br>Unión de \$b y \$a: <br>";

ar_dump($c);

Tabla 19. Operadores de matrices

Ejemplo Operador Resultado $a + $b Unión Un$a == $b Igualdad TRUE

parejas llave/valor. $a === $b Identidad TRUE si $a y $b tienen las mi

parejas llave/valor en el mismo orden y de los mismos tipos.

$a != $b No-igualdad TRUE si $a no es igual a $b. $a <> $b No-igualdad $a !== $b No-identidad TRUE si $

l operador + adiciona la matriz del lado derecho a aquél al lado izquierdo, al E

mismo t Ejemplo 42: Operadores

eradores_op <?p$a = arra$b = arra $c = $a + $b; // Unión de $a y $b evar_dump($c $c = $b + $a;ecv?> Resultado Web:

Figura 50. Resultado de operadores_m.php



Los element de las matrices son considerados equivaleos ntes en la omparación si éstos tienen la misma clave y valor.

43: Comparación de matrices

ces.php

p a = array("manzana", "plátano");

ar_dump($a === $b); // bool(false) ?> Resultado Web:

c Ejemplo comp_matri <?ph$$b = array(1 => "plátano", "0" => "manzana"); var_dump($a == $b); // bool(true) v

Figura 51. Resultado de comp_matrices.php

Operadores de Tipo instanceof es usado para determinar si una variable PHP es una instancia de objeto de cierta clase: Ejemplo 44: Uso de instanceof con clases instanciade.php <?php class MiClase { } class NoMiClase { } $a = new MiClase; var_dump($a instanceof MiClase); var_dump($a instanceof NoMiClase); ?> Resultado Web:



Figura 52. Resultado de instanciade.php

instanceof puede ser usado también para determinar si una variable es una

clase que hereda de una clase padre:

instanceof con clases heredadas

_dump($a instanceof ClasePadre);

Web:

instancia de objeto de una Ejemplo 45: Uso de instanciadehe.php <?php class ClasePadre { } class MiClase extends ClasePadre { } $a = new MiClase; var_dump($a instanceof MiClase); var?> Resultado

Figura 53. Resultado de instanciadehe.php

Por último, instanceof puede ser usado también para determinar si una variable es una instancia de objeto de una clase que implementa una nterfaz: i

jemplo 46: E Uso de instanceof para una clase <?php interface MiInterfaz { } class MiClase implements MiInterfaz { }



$a = new MiClase; $a instanceof MiClase);

ar_dump($a instanceof MiInterfaz);

l resultado del ejemplo seria: bool(true) bool(true) Aunque instanceof es usado por lo general con un nombre de clase literal, también puede usarse con otro objeto o una variable tipo cadena: Ejemplo 47: Uso de instanceof con otras variables <?php interface MiInterfaz { } lass MiClase implem

MiClase;

c es una cadena 'MiClase'

el ejemplo sería:

var_dump(v?> E

c ents MiInterfaz { }

a = new $$b = new MiClase; $c = 'MiClase'; $d = 'NoMiClase'; ar_dump($a instanceof $b); // $b es un objeto de la clase MiClase v

var_dump($a instanceof $c); // $var_dump($a instanceof $d); // $d es una cadena 'NoMiClase' ?>

l resultado dE bool(true)

ool(true) bbool(false) El operador instanceof fue introducido en PHP 5. Anteriormente is_a() era usado, pero desde entonces is_a() ha sido marcada como función obsoleta, prefiriéndose el uso de instanceof.


Estructuras de Control

IV. Estructuras de Control Una sentencia puede ser una asignación, una llamada a función, un bucle,

na sentencia condicional e incluso una sentencia que no haga nada (una

de sent ci s es también una sent i

n este c os de sentencias.

as condicionales:

(condicional): if condicional de ordenes o comandos, tomando como

ado de una o varias condiciones. La sentencia if en PHP tiene sica utilizada en el lenguaje C.

hp xpresión condicional)

s) ión es verdadera

8: If ejecuta una sentencia si la condición es verdadera

ría “a es mayor que b” si la variable $a fuera mayor que $b.

) { es mayor que b"; = $a;

ncias if se pueden anidar indefinidamente dentro de otras.

usentencia vacía). Las sentencias normalmente acaban con punto y coma. Además, las sentencias pueden estar compuestas por un grupo

en as delimitadas con llaves. Un grupo de sentenciaenc a.

apítulo veremos diferentes tipE

iciaremos viendo las sentenciIn

SiPermite la ejecución base el resultla misma sintaxis bá <?pf (ei{ } Sentencia( cuando la expres

?

>

Ejemplo 4 <?php if ($a > $b) print "a es mayor que b"; ?> El ejemplo mostraEl uso de las llaves es para la ejecución de un conjunto de sentencias. Ejemplo 49: If con varias sentencias si la condición es verdadera <?php if ($a > $b echo "a $mayor $menor = $b; } ?> Las sente



Ejemplo 50: If anidado

)

{ echo “a es múltiplo y mayor que b”;

mayor = $a; }

ejecución de sentencias en caso la expresión dicional del if resulte falsa.

: Uso de else en una sentencia if

ayor que b";

NO es mayor que b";

ras). a combinación de if y else. En caso la sentencia condicional

a, y existan varios casos que puedan cumplirse se puede usar uno de dichos casos.

> $b) {

r que b";

es igual que b";

imera xpresión elseif (si hay alguna) que resulte verdadera se ejecuta. La

sentencia elseif se ej o cualquier expresión elseif prec

<?php If ( $a > $b If ( $a % $c == 0 ) $ } ?>

Else La sentencia else es un complemento de if debido que muchas veces

eremos indicar laqucon

1Ejemplo 5 <?php if ($a > $b) { echo "a es m} else { echo "a } ?>

elseif También se puede escribir else if (con espacio entre las palabelseif es unresulte falselseif para cada Ejemplo 52: Uso de elseif <?php if ($a echo "a es mayor que b"; } elseif ($a < $b) { echo "a es meno } else { echo "a } ?> Puede haber varios elseifs dentro de la misma sentencia if. La pre

ecuta sól si la expresión if precedente yedente se resulta falsa.



for y

resión (expr1) se ejecuta una vez al principio del bucle.

zo de cada iteración, se evalúa expr2. Si resulta verdadera, el ejecutan. Si resulta falsa, la

cada iteración, se ejecuta expr3. del 1 al 10 utilizando la sentencia for

hile cle más simples en PHP. Se comportan

o su contrapartida en C. La forma clásica de una sentencia while es:

hile (expr)

entencias

Como con la sentencia if, se pueden agrupar multiples sentencias dentro del mismo bucle while encerrando un grupo de sentencias con llaves, o usando la sintaxis alternativa: while (expr): sentencia ... endwhile;

do..while Los bucles do..while son muy similares a los bucles while, excepto que las condiciones se comprueban al final de cada iteración en vez de al principio. La principal diferencia frente a los bucles regulares while es que se garantiza la ejecución de la primera iteración de un bucle do..while (la condición se comprueba sólo al final de la iteración), mientras que puede no ser necesariamente ejecutada con un bucle while regular (la condición se comprueba al principio de cada iteración, si esta se evalúa como FALSE desde el principio la ejecución del bucle finalizará inmediatamente). Hay una sola sintaxis para los bucles do..while:

Los bucles for son los bucles más complejos en PHP. Su comportamieintaxis es similar a la definida en el lenguaje C.

nto s or (expr1; expr2; expr3) sentenciaf

a primera expL Al comienbucle continúa y las sentencias anidadas se

del bucle finaliza. ejecución Al final deEjemplo 53: Imprimir los números <?php or ($i = 1; $i <= 10; $i++) { f

print $i; }

wLos bucles while son los tipos de bucom w{ S}



Ejemplo 54: Imprimir los números del 1 al 10 utilizando while <?php $i = 0; do { print $i; } while ($i>0); ?> El bucle de arriba se ejecutaría exactamente una sola vez, después de la primera iteración, cuando la condición se comprueba, se evalúa como FALSE ($i no es más grande que 0) y la ejecución del bucle finaliza.


Acceso a Datos con PHP

V. Acceso a Datos con PHP Lo primero que tene digo PHP en el ocumento HTML.

tra arcas, las cuales tienen la siguiente forma ETIQUETA> </ETIQUETA>. Debido a esto, hay que indicar dentro del

io y fin del ódigo PHP insertado, para ello hay que utilizar los siguientes símbolos:

ara iniciar PHP: <?php zar PHP: ?>

AD> mplo PHP </TITLE>

>

uiente código imprime “Hipertext Preprocessor”<BR>

rocessor";

>

cliente Web (navegador o browser) hace una solicitud a un eb, éste ubica el archivo solicitado y verifica si contiene código

HP o no, en caso que sólo sea HTML, el archivo es enviado directamente

o del procesamiento al cliente. Según el ejemplo anterior, el ocumento sería enviado a ser procesado, en este proceso se interpretaría

las líneas de código y después el resultado sería enviado al cliente.

p

> Primer Ejemplo PHP </TITLE> >

“Hipertext Preprocessor”<BR> Preprocessor

mos que aprender es como insertar códEn HTML se baja en base a m<conjunto de etiquetas que componen el documento Web el inicc PPara finali Ejemplo 55: Pagina01.php <HTML> <HE<TITLE> Primer Eje</HEAD<BODY> El sig<?php echo "Hipertext Prep ?</BODY> </HTML> Cuando unservidor WPal cliente, pero en caso que tenga código PHP es enviado a ser procesado el documento que ha sido solicitado para ser procesado y luego enviar el resultadd

A continuación veremos el resultado de la solicitud y procesamiento de la página programada anteriormente (pagina01.php). Pagina01.ph <HTML> <HEAD> <TITLE</HEAD<BODY> El siguiente código imprime Hipertext



</BODY> </HTML> Este código resultante es interpretado en el navegador y se visualiza de la

como aparece en la figura 28. siguiente

Figura 54. Resultado de pagina01.php

Existen otras m

: aneras de insertar código PHP en el documento HTML, por

más simple, una instrucción de o SGML \n"); ?>

ression ?> Esto es una abreviatura de "<? echo expression ?>"

t language="php">

ar las etiquetas ASP"); %> ; # Esto es una abreviatura de "<% echo . . ." %>

El método uno, no siempre está disponible. El formato corto de etiquetas está disponible con la función short_tags() (sólo PHP 3), activando el parámetro del fichero de configuración de PHP short_open_tag, o compilando PHP con la opción --enable-short-tags del comando configure. Aunque esté activa por defecto en php.ini-dist, no se aconseja el uso del formato de etiquetas corto. El método tres sólo está disponible si se han activado las etiquetas ASP en el fichero de configuración: asp_tags.

ota: No se debe usar el formato corto de etiquetas cuando se desarrollen aplicaciones o bibliotecas con intención de redistribuirlas, o cuando se desarrolle para serv , porque puede er que el formato corto de etiquetas no esté soportado en el servidor. Para

l formato orto de etiquetas.

ejemplo

<? echo ("esta es la 1.- procesad <?= exp

.- <scrip2 echo ("muchos editores (como FrontPage) no aceptan instrucciones de procesado"); </script>

pcionalmente, puedes us3.- <% echo ("O <%= $variable

N

idores que no están bajo nuestro controlsgenerar código portable y redistribuíble, asegúrate de no usar ec



La etiqueta de fin de bloque incluirá tras ella la siguiente línea si hay alguna

. Además, la etiqueta de fin de bloque lleva implícito el punto y necesitas por lo tanto añadir el punto y coma final de la última línea

sarrollo de software son muy importantes los comentarios en los te sintaxis:

n comentario de una línea se usa: // eas, se delimita el

6: Comentarios

?php emplo de una línea

ro ejemplo,

as

7: Sentencia if (1)

hp

HEAD> <TITLE> Ejemplo de la sentencia if </TITLE> </HEAD> <BODY> El siguiente código utiliza la sentencia if de php<BR> <?php $nota=12; if($nota>=10.5) echo "<em>Felicitaciones<em>, Ud. obtuvo el calificativo de <strong>$nota</strong> (APROBADO)"; else cho "Ud. obtuvo </strong>

(DESAPROBADO)"; ?>

/BODY> /HTML>

Ejemplo 58: Sentencia if (2) pagina03.php <HTML>

presentecoma; nodel bloque PHP. En el descripts, en el caso de PHP, los comentarios tienen la siguien

• Cuando es u• Cunado un comentarios es de varias lín

comentario utilizando: /* y */ Ejemplo 5 <// Este es un ej/*Este es otpero tiene varias línecomentadas */ ?> Ejemplo 5 pagina02.p <HTML> <

e el calificativo de <strong>$nota

<<



<HEAD> TITLE> Ejemplo de la sentencia if </TITLE>

digo utiliza la sentencia if de php<BR> php

nota=12;

cho "<em>Felicitaciones<em>, Ud. obtuvo el calificativo de /strong> (APROBADO)";

el calificativo de <strong>".$nota."</strong> OBADO)";

D

> >

acute;digo utiliza la sentencia if de php<BR>

licitaciones<em>, Ud. obtuvo el calificativo de <strong><?php echo ></strong> (APROBADO)

vo el calificativo de <strong><?php echo $nota ?></strong> OBADO)

>

<</HEAD> <BODY> El siguiente có<?$if($nota>=10.5) { e<strong>".$nota."<} else { echo "Ud. obtuvo (DESAPR} ?> </BODY> </HTML> Ejemplo 59: Sentencia if (3) pagina04.php <HTML> <HEA > <TITLE> Ejemplo de la sentencia if </TITLE> </HEAD<BODYEl siguiente c&o<?php $nota=12; if($nota>=10.5) { ?> <em>Fe$nota ?<?php } else { ?> Ud. obtu(DESAPR<?php } ?</BODY> </HTML> Todos los ejemplos de la sentencia if generan la siguiente salida Web.




mos el uso de la sentencia for para la generación de tablas html. filas.

ITLE> Ejemplo de la sentencia for </TITLE> D>

ODY> de la sentencia for de php<BR>

le border=\"1\">"; //iniciamos la tabla

tr>"; // escribir fila con el valor de: i

>

</HTML> Resultado Web

Ahora veaEn este primer ejemplo generamos una tabla con una columna y n Ejemplo 60: Sentencia for (1) Pagina05.php <HTML> <HEAD> <T</HEA <BUso<?php $filas=15; echo "<tab for($i=1;$i<=$filas;$i++) //creamos varias filas con el for { echo "<tr><td>$i</td><} echo "</table>"; //cerramos la tabla ?</BODY>




Ejemplo 61: Sentencia for (2)

agina06.php

encia for </TITLE></HEAD>

for($i=1;$i<=$filas;$i++) //creamos varias filas con el for {

echo "<tr>"1

td>$i $j</td>"; //escribir columnas (celdas)

echo "<tr>"; // terminar la fila

a tabla

p

<HTML> HEAD><TITLE> Ejemplo de la sent<

<BODY> Uso de la sentencia for de php<BR> <?php $filas=15; $columnas=5; cho "<table border=\"1\">"; //iniciamos la tabla e

; // crear fila for($j= ;$j<=$columnas;$j++)

{ echo "<

} } echo "</table>"; //cerramos l?>

</BODY></HTML>



Resultado Web


Sentencia for (3)

nte código obtenemos la tabla del ejemplo anterior.

>

as filas con el for

{ ?> <td><?php echo "$i $j" ?></td>

</BODY>

Ejemplo 62: Con el siguie pagina07.php <HTML> <HEAD><TITLE> Ejemplo de la sentencia for </TITLE></HEAD<BODY> Uso de la sentencia for de php<BR> <?php $filas=15; $columnas=5; ?> <table border="1"> <?php for($i=1;$i<=$filas;$i++) //creamos vari{ ?> <tr> <?php for($j=1;$j<=$columnas;$j++) <?php } ?> <tr> <?php } ?> </table>



</HTML> La mayor parte de aplicaciones Web suelen trabajar con PHP utilizando variables y objetos ingresados por los usuarios a través de formularios HTML.

Formularios HTML y PHP Veamos un ej gina PHP utilizando los m Ejemplo 63: Envío de datos de un formulario a una página PHP formulario01.html <html> <head> <title>Formulario</title> </head> <body> <form name="form1" method="post" action="pagina08.php"> Ingresa tu nombre <input name="txtnombre" type="text" id="txtnombre"> <input type="submit" name="Submit" value="Enviar"> </form> </body> </html> En la etiqueta form, en su propiedad action, especificamos el destino de los datos, es decir, la página PHP que recibirá los datos del formulario. En este caso pagina08.php, y no olvidemos que en el método estamos especificando POST. Además debemos tomar en cuenta el nombre del objeto (caja de texto – input tipo text) “txtnombre”, pues será en nombre que usaremos en la página de destino. pagina08.php <HTML> <HEAD><TITLE> Ejemplo de envio de datos</TITLE></HEAD> <BODY> Tu nombre es: <?php echo $_POST[txtnombre]; ?> </table> </BODY> </HTML> En esta página podemos ver que usamos el array $_POST de PHP para acceder a los datos enviados a través de este método. Tambien podemos

emplo sencillo en el que se envían datos a una páétodos POST y GET, respectivamente.



observar que en la barra de dirección no aparece ninguna variable, P. solamente el nombre de la página PH

Resultado Web

Figura 58. Resultado de formulario01.html


Ahora veamos como sería este ejemplo utilizando el método GET. Formulario02.html <html>

head>

<body> <form name="form1" method="get" action="pagina09.php"> Ingresa tu nombre <input name="txtnombre" type="text" id="txtnombre"> <input type="submit" name="Submit" value="Enviar"> </form> </body> </html> pagina09.php <HTML> <HEAD><TITLE> Ejemplo de envio de datos</TITLE></HEAD> <BODY> Tu nombre es: <?php

<<title>Formulario</title> </head>



echo $_GET[txtnombre]; ?> </table> </BODY> </HTML> Resultado Web:



Figura 62. URL incluyendo datos enviados

En la figura 36 podemos ver en la barra de dirección los datos enviados a través del método GET, por lo que debemos utilizar el array $_GET de PHP para acceder a ellos. Ahora utilizaremos algunos objetos adicionales en el formulario, tipo INPUT: checkbox, radio, y hidden. formulario03.html <html> <head>



<title>Formulario</title> </head> <body> <form name="form1" method="post" action="pagina10.php"> <input type="hidden" name="oculto" value="XYZ"> <table width="90%" border="0"> <tr> <td>Temas de interés: <input name="tema[]" type="checkbox" id="tema[]" value="red">Redes de computadoras <input name="tema[]" type="checkbox" id="tema[]" value="web">World Wide Web <input name="tema[]" type="checkbox" id="tema[]" value="seguridad">Seguridad Informática</td> </tr> <tr> <td>Sexo: <input name="sexo" type="radio" value="M"> Masculino <input name="sexo" type="radio" value="F"> Femenino</td> </tr> <tr>

<th><in

</body> html>

ckbox que tienen el mismo e datos al archivo pagina10.php,

ero cada uno de ellos tiene un valor distinto para poder diferenciarlos. Cuando estos objetos lleguen a su destino solo podremos leer los valores de aquellos objetos que fueron chequeados. En el caso de los botones de opción pasa algo similar pero esta técnica siempre la utilizo pues nos sirve para agrupar radio-botones (botones de opción). Resultado Web:

put type="submit" name="Submit" value="Enviar"></th> </tr>

</table> </form>

</ En esta página encontramos tres objetos chenombre y que serán enviados como array dp




Al presionar el botón “Enviar” enviamos los datos del formulario al archivo: pagina10.php que se detalla a continuación: pagina10.php <HTML> <HEAD><TITLE> Ejemplo de envio de datos</TITLE></HEAD> <BODY> El valor del objeto oculto es: <?php echo $_POST[oculto]?><br> El sexo seleccionado: <?php echo $_POST[sexo]?><br> Los temas seleccionados son:<br> <?php if(count($_POST[tema])

foreach($_POST[tema] as $k

} else {

echo "(No ha

> </BODY> </HTML> En este script podemos encontrar la función “count”, esta función permite determinar la cantidad de elementos que tiene un array de datos, en este caso, el array $_POST[tema]. También encontramos la sentencia “foreach” que sirve para recorrer un array de datos, extrayendo sus elementos: índice y valor, que en el script están repr

l resultado del procesamiento del archivo pagina10.php es:

>0) { => $v) {

echo "- ".$v."<br>"; }

y temas seleccionados)"; }

> ?</table

esentados por $k y $v respectivamente. E


Segundo caso: aquí observamos que no hay tema seleccionado.



Figura 65. Resultado de formulario03.html (segundo caso)

Figura 66. Resultado de pagina10.php (segundo caso)

Subiendo archivos al servidor En muchas aplicaciones Web es necesario enviar o subir archivos al servidor Web, es por ello que veremos a continuación el procedimiento que nos permita realizar esta tarea sin ningún problema.


Ejemplo 64: Subir un archivo al servidor Web formulario04.html <html> <head>



<title>Subir ameta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

form action="pagina11.php" method="post" enctype="multipart/form-data" name="form1"> Seleccione un <input type="file" name="archivo" size="50">

/html>

rchivos</title> <</head> <body> <

archivo <input type="submit" name="Submit" value="Enviar"> </form> </body> <

Figura 68. Selección de un archivo en un formulario

Es muy impo para el nvío de da anterior

a11.php <?php //leyendo los datos del archivo recibido $nombre_real=$_FILES[archivo][name]; $tamano=$_FILES[archivo][size]; $tipo=$_FILESeste es el nombre que tie

- Tipo:" . $tipo . " Tamaño:" . l:" . $nombre_temporal . "<br>"; al directorio destino.

mbre_real; hivo subido

exitosameelse echo "El archiv

>

_FILES[], indicando el nombre del objeto HTML que insertamos en

rtante indicar en el formulario la propiedad enctypetos, tal y como lo apreciamos en el códigoe

(formulario04.html): enctype="multipart/form-data". En este formulario seleccionamos el archivo que deseamos subir y luego presionamos el botón “Enviar”. pagin

[archivo][type]; ne el archivo cuando llega al server //

$nombre_temporal=$_FILES[archivo][tmp_name]; //imprimimos los datos

ombre_real . " echo "Archivo: " . $n$tamano . " - Tempora

o //movemos el archiv$carpeta="archivos"; destino=$carpeta."\\".$no$

if(move_uploaded_file ($nombre_temporal,$destino)) echo "arcnte";

o no logró subir al servidor"; ? En el script podemos ver que debemos recibir los datos del archivo a través el array $d



el formulario y luego en la siguiente dimensión del array especificamos el dato que queremos leer. La función move_uploaded_file, realiza un chequeo para asegurar que el archivo $nombre_temporal sea un archivo cargado válido (lo que quiere decir que fue cargado a través del mecanismo de carga HTTP POST de PHP). Si el archivo es válido, será movido al nombre de archivo dado por $destino. Si $nombre_temporal no es un archivo cargado válido, entonces no se tomaráningun iodevolverá T

a acción, y move_uploaded_file() devolverá FALSE, de lo contrar

RUE.

Figura 69. Datos de un archivo enviado al servidor



Acceso a Bases de Datos Para aprender a acceder a una base de datos tomaremos como manejador de base de datos a MySQL.

Creando una base de datos MySQL en MySQL Administrator Crearemos paso a paso la base de datos dbdemo y una tabla llamada persona. Primero abrimos MySQL Administrator e ingresamos los datos solicitados.

Figura 70. Conexión al servidor MySQL con MySQL Administrador

Figura 71. Inicio de MySQL Administrator



erecho del Mouse sobre una de las bases ccionando “Create New Schema”.

Luego hacemos clic con el botón de datos para crear una nueva seled

Figura 72. Menú de MySQL Administrator

Demos escribir el nombre de la nueva base de datos y presionar “OK”.

Figura 73. Creando una base de datos

Una vez que presionamos “OK” tenemos creada la base de datos.



Figura 74. Base de datos creada en MySQL Administrator

lick en el botón “Create Ahora creamos la tabla persona, para ello hacemos c

le”. Tab

Figura 75. Creando una tabla



Escribimos el nombre de la tabla: persona

Figura 76. Ingreso del nombre de la tabla

Luego, agregamos el primer campo: idpersona haciendo doble click en la primera celda de la sección “Columns and Indices”

Figura 77. Definición de campos de la tabla

tar q po como clave primaria,

uego de ingresar todos los datos de los campos de la tabla tenemos:

Podemos no ue por defecto se establece al camtipo entero y autoincrementable. L

Figura 78. Estructura de la tabla

Luego presionamos el botón “Apply changes”.



Figura 79. Confirmación para la creación de la tabla

mos el resultado y presionamos “Execute” para terminar. Confirma

Figura 80. Lista de elementos incluyendo la tabla recientemente creada



Creando una base de datos MySQL en phpmyadmin El primer paso es crear una base de datos utilizando PHPMyADMIN una aplicación Web que nos permite administrar nuestras bases de datos MySQL desde la plataforma Web. En nuestro navegador escribiremos la siguiente dirección: http://localhost/phpmyadmin/ La palabra “”localhost” de la dirección anterior se refiere al nombre con el que se ha configurado a nuestro servidor APACHE que hemos instalado con WAMP, es decir, hacemos referencia al servidor Web que esta instalado en nuestra máquina, por lo que no necesitamos de una conexión a Internet paradesarrollar todos los

ejemplos que veremos a continuación.

Figura 81. Interfaz de phpMyAdmin

a página de inicio de phpmyadmin con la lista de bases deVemos l datos que

do derecho de la página tenemos una caja de texto que nos permite

ha encontrado en el servidor. En caso que recién este utilizando MySQL sólo verá las bases de datos que vienen por defecto con la instalación. En el laescribir el nombre de una nueva base de datos.



Figura 82. Interfaz para cear una nueva bas

e de la base de datos y luego elegimos el cotejam

e de datos

iento o ra guardar los datos en la base.

Escribimos el nombrconjunto de caracteres que se utilizará pa

Figura 83. Creando la base de datos dbdemo.

Una vez creada la base de datos podemos crear las tablas que necesitemos, en nuestro caso crearemos la tabla “persona”, la cual estará compuesta por cinco campos.



Figura 84. Creando la tabla persona.

resionar el botón “Continuar” aparecerá la siguiente página:

l pA

Figura 85. Especificación de los campos de la tabla

En esta página debemos especificar los atributos de cada campo. Por ejemplo el campo idpersona será la clave primaria y además será autoincrementable.

Figura 86. Autoincremento en el campo idpersona.

A continuación se detalla la estructura de la tabla persona: Idpersona int(11) autoincrement PK nombres varchar(50) apellidos varchar(50) email varchar(100) telefono varchar(15) Una vez ingresados estos datos presionamos el botón “Grabar”.



Figura 87. Estructura de la tabla creada

Una vez creada la tabla aparecerá en la lista ubicada en el lado izquierdo de la página. Ahora agregaremos registros a la tabla:

Figura 88. Menú de operaciones que se pueden realizar sobre las

tablas de la base de datos.

En la parte superior de la página encontramos varios enlaces. Seleccionamos “Insertar”.



Figura 89. Formularios para la inserción de registros

Esta interfaz nos permite ingresar nuevos registros a la tabla. En nuestro caso no hay necesidad de ingresar el valor para idpersdebido a que es un cam sionamos el bo“Continuar”.

ona tón po autoincrementable. Luego pre

Fig os ura 90. Datos para los nuevos registr



Figura 91. Operación realizada con éxito y el script SQL que ha sido

ejecutado. Siempre phpmyadmin nos mostrará el script SQL que acabamos de ejecutar, en este caso la orden de inserción en la tabla persona. Luego podemos ver la lista de registros haciendo click en “Examinar”.

Figura 92. ona Listado de registros de la tabla pers



Acceso a

funciones que nos permitirán conectarnos a un servidor de base de datos y luego elegir la base. Luego desarrollaremos las acciones básicas sobre una tabla como: inserción, edición, eliminación y búsqueda. Ejemplo 65: Conexión a MySQL pagina12.php <?php $conex=mysql_connect("localhost","root","") or die(mysql_error()); mysql_select_db("dbdemo",$conex) or die(mysql_error()); ?> La función mysql_connect abre una conexión a un servidor MySQL, y necesita para ello tres parámetros: el nombre o dirección del servidor de base de datos, un nombre de usuario y su contraseña. Podemos observar luego de la función mysql_connect que aparece el operador OR el cual nos permite ejecutar la orden die() en caso que la conexión fallara. La orden die() imprime un mensaje y termina el script actual, en este caso el mensaje será el resultado de la ejecución de la función mysql_error() retorna el texto del error de la última función MySQL o '' (cadena vacía) si no ocurrió error. Una vez hecha la conexión alma namos en la variable $conex el identificador de enlace de dicha conexi n. Esta variable la utilizaremos para seleccionar la base de ediante la función

ysql_select_db() que tiene como primer parámetro el nombre de la base de

gina que incluye el script escrito en pagina12.php para

Ejemplo 66: Listado de registros pagina13.php <?php include "pagina12.php"; //incluimos la conexion $sql="select * from persona"; //consulta sql $rspersona=mysql_query($sql) or die(mysql_error());//ejecucion de la sentencia sql while($reg=mysql_fetch_array($rspersona)) { echo $reg[idpersona]." - ".$reg[nombres]." ".$reg[apellidos]."<br>"; } ?> Podemos ver en el script que con la función mysql_query podemos ejecutar una sentencia SQL la cual almacena el resultado en la variable $rspersona.

MySQL desde PHP En esta sección primero veremos las

ceó

datos a la cual accederemos mmdatos. Ahora veremos una párealizar la conexión y luego hacer una consulta de todos los registros de la tabla persona.



Una vez hecho esto leemos los registros con la función mysql_fetch_array() la cual devuelve una matriz que corresponde a la sentencia extraída, o falso si no quedan más filas. La función mysql_fetch_array() es una versión extendida de mysql_fetch_row(). Además de guardar los datos en el índice numérico de la matriz, guarda también los datos en los índices asociativos, usando el nombre de campo como clave. De esta forma leemos cada uno de los registros hasta llegar al final del conjunto de registros obtenidos en la consulta. Podemos deducir que cada vez que esta función es ejecutada, el puntero interno se desplaza al siguiente registro. Resultado Web


jemplo 67:

hora le daremos una mejor presentación al listado. pagina14.php <?php include "pagina12.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=mysql_query($sql) or die(mysql_error()); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=mysql_fetch_array($rspersona))

E Listado de registros en una tabla A



{ ?>

ref="pagina16.php?idpersona=<?php echo "$registro[idpersona]"?>">editar</a></td> <td><a href="pagina18.php?idpersona=<?php echo "$registro[idpersona]"?>">eliminar</a></td> </tr> <?php } ?> </table> <br> <a href="formulario05.html">Agregar Registro</a> Resultado Web

<tr> td><?php echo "$registro[idpersona]"?></td> <

<td><?php echo "$registro[nombres]"?></td> td><?php echo "$registro[apellidos]"?></td> <

<td><a h


Ahora pasaremos a programar el formulario y la página PHP para la inserción de registros. Ejemplo 68: Inserción de registros en una tabla Formulario05.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" n .php"> ame="form1" method="post" action="pagina15



<table width="80%" border="0" align="center">

> </tr>

<tr> <td>Nombres</td <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" /></td> </tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" /></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="password" id="telefono" maxlength="15" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Su value="Cancelar"

nclick="location='pagina14.php'" /></th>

/form> </body> </html> Como resultado del cógio HTML obtenemos este formulario, el cual enviará los datos a pagina15.php.

<tr> <th colspan="2">Nuevo Registro</th

>

bmit2" type="button" class="boton" o </tr> </table> <

Figura 95. Formulario05.html



Pagina15.php <?php include "pagina12.php"; //sentencia para insertar el usuario $sql="insert into persona values('','$_POST[nombres]','$_POST[apellidos]','$_POST[email]','$_POST[telefono]')"; //ejecutar sentencia mysql_query($sql) or die(mysql_error()); echo "La persona fue registrada exitosamente<br>"; echo "<a href='pagina14.php'>Listado de Personas</a>"; ?> Resultado Web:


Ejemplo 69: Edición de registros Pagina16.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T<html xmlns="h

head>

clude "pagina12.php"; $sql="select * from persona where idpersona='$_GET[idpersona]'"; $rs=mysql_query($sql) or die(mysql_error()); //ejecutar sentencia if(mysql_num_rows($rs)>0)

R/xhtml1/DTD/xhtml1-transitional.dtd"> ttp://www.w3.org/1999/xhtml">

<<?php in



$registro=mysql_fetch_array($rs); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pagina17.php"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Edición de Persona</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" value="<?php echo $registro[nombres]?>" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" value="<?php echo $registro[apellidos]?>" /></td> </tr> <tr> <td>E-Mail</t ail" ize="50" maxlength="100" value="<?php echo $registro[email]?>"/></td>

<td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" value="<?php echo $registro[telefono]?>"/></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pagina14.php'" /></th> </tr> </table> </form> </body> </html> Resultado Web:

d> <td><input name="email" type="text" id="ems </tr> <tr>



Figura 97. Formulario de edición de un registro

pagina17.php <?php include "psentencia para editar el registro

$sql="update persona set nombres='$_ OST[nombres]', apellidos='$_POST

lefono='$_POST[telefono]' where idpersona='$_POST[idpersona]'";

ie(mysql_error()); cho "La persona fue actualizada exitosamente<br>";

echo "<a href='pagina14.php'>Listado de Personas</a>"; ?> Resultado Web:

agina12.php"; //

P[apellidos]', email='$_POST[email]',

te//ejecutar sentencia mysql_query($sql) or de


Ejemplo 70: Eliminación de registros pagina18.php <?php include "pagina12.php"; //sentencia para elim$sql="delete from persona where idpe ='$_GET[idpersona]'";

inar el registro rsona



//ejecutar sentencia mysql_query($sql) or

cho "La persona fue eliminada exitosamente<br>";

> En la siguiente sección veremos el acceso a una base de datos PostgreSQL.

die(mysql_error()); eecho "<a href='pagina14.php'>Listado de Personas</a>"; ?



Instalación de PostgreSQL sobre Windows XP Para instalar PostgreSQL debemos descargar el instalador de la sección “Download” de http://www.postgresql.org. Una vez descargado el archivo zip, lo descomprimimos y tendremos los siguientes archivos:

Figura 99. Archivos de instalación de PostgreSQL

Ejecutamos el archivo postgresql-8.3

Figura 100. Asistente de instalación de PostgreSQL

Seleccionamos el idioma que se usará en la instalación (English) y presionamos “Start”.



Figura 101. Inicio del asistente de instalación

Se recomienda c leemos las

strucciones necesarias para empezar. errar los programas abiertos y y luego

in

Figura 102. Notas de instalación



Figura 103. Opciones de instalación

amosSeleccion

las herramientas e interfaces que deseamos instalar.

Figura 104. onfiguración del servicio

Luego ingresamos el password para la cuenta postgres.



Figura 105. Error en la cuenta

Si el usuario postgres no existe aparecerá el mensaje anterior para preguntar si deseamos crearlo – responderemos “Si”.

Figura 106. Password aleatorio

Si no ingresamos un password lo suficientemente seguro nos aparecerá este mensaje para asignarnos un password aleatorio. Si deseamos conservar

te presionaremos “No”. nuestro password ingresado anteriormen

Figura 107. Cuenta del superusuario

In mos otro password para el super-usuario del sistema de base dgresa e

tos (por razones de seguridad, se recomienda no utilizar el password rior).

daante



Figura 108. Habilitar lenguaje procedural

rocedural y presionamos “Next” para luego Seleccionamos el lenguaje pseleccionar los módulos adicionales que podemos instalar.

Figura 109. El asistente está listo para iniciar la instalación

esta todo listo para la instalación. Ahora ya



Figura 110. Instalando PostgreSQL

Figura 111. Instalación completa

Finalmente nos aparecerá esta ventana que nos indica el final de la

k y

s el

instalación. Si no queremos correr el Stack Builder quitamos el checpresionamos “Finish”. Una vez instalado vamos al menú “Inicio” – Programas y seleccionamomenú de PostgreSQL. En este menú abrimos PgAdmin III.



Figura 112. pgAdmin III

Si hacemos doble click sobre el servidor “PostgreSQL Database Server 8.3aparecerá la siguie

” nte ventana para logearnos.

Figura 113. Conexión al servidor desde pgAdmin III



Creando una base de datos PostgreSQL en pgAdmin III

atos.

trar nuestras bases de dAl ingresar a pgAdmin ya podemos adminis

Figura 114. Listado de elementos del servidor

s una base de datos. Creamo

Figura 115. Creando una base de datos

Ingresamos los datos de la nueva base de datos (dbdemo).



Figura 116.

Datos de la nueva base de datos

otón derecho del Luego creamos la tabla persona, haciendo click con el bmouse y seleccionando “New table…”

Figura 117. Creando una nueva tabl

a



Figura 118. Propiedades de la tabla

Especificamos los datos de la tabla y luego los campos. Cuando el tipo de dato es autoincrementable seleccionamos el tipo serial.

Figura 119. Propiedades de una nueva columna



Figura 120. Columna nombres de la tabla persona

Luego especificamos la clave primaria de la clave

Figura 121. Clave primaria de la tabla persona

Luego de especificar el nombre del constraint seleccionamos los campos de la clave primaria.



Figura 122. Columnas pertenecientes a la clave primaria

Finalmente registramos el constraint y luego podemos ver el script de la abla. t

Figura 123. Script SQL generado para la creación de la tabla



Figura 124. Final de la creación de la tabla

recho sobre la tabla persona seleccionamos “View Data” Haciendo click depara ver los registros.

Figura 125. Menú desplegable de la tabla



Figura 126. Vista de datos de la tabla

s doble click sobre la primera fila e ingresamos luego los datos. Hacemo

Figura 127. Editando datos en la tabla

remos la creación de la base de datos con otra herramienta. Ahora ve



Creando una base de datos PostgreSQL en phpPgAdmin El primer paso es crear una base de datos utilizando phpPgAdmin una

estras bases de datos aplicación Web que nos permite administrar nures. Postg

Escribiremos la siguiente dirección: http://localhost/phppgadmin/

Figura 128. Interfaz de phpPgAdmin

Ingresamos el usuario y password para tener acceso a las bases de datos.

Figura 129. Logeo de usuarios al servidor PostgreSQL

Una vez ingresados los datos presionamos el botón “Autenticar” para ingresar.



Figura 130. Interfaz de ingreso a phpPgAdmin

Ahora crearemos una base de datos PostgreSQL, haciendo clic en el hipervínculo: “Crear base de datos”.

Figura 131. Creando una nueva base de datos

Ahora nuestra base de datos “dbdemo” aparece en el margen izquierdo de la aplicación Web.



Figura 132. Base de datos dbdemo creada

Seleccionamos la base de datos para crear la tabla “persona”.

Figura 133. Menú de elementos de la base de datos

Figura 134. creando la tabla persona

Ingresamos el nombre de la tabla y especificamos la cantidad de campos que vamos a crear y luego presionamos “Próximo”.



Figura 135. Ingresando los campos de la tabla

Al igual que en MySQL seleccionamos “autoincrement” para la clave primaria de la tabla (el valor del campo se auto-incrementa en cada nuevo registro insertado), en este caso indicaremos lo mismo a través de “SERIAL”.

Figura 136. Autoincremento para la clave primaria

Figura 137. Estructura de la tabla

Haciendo clic en el hipervínculo “Insertar”, agregaremos registros a la tabla.



Figura 138. Formulario de ingreso de nuevos registros

Figura 139. Listado de registros

Para conectarnos a PostgreSQL desde PHP debemos aseguarrnos que las librerías de PHP para PostgreSQL estén disponibles, para ello vamos a menú de WAMP y listamos las extensiones de PHP.



Figura 140. Activando la extensión php_pgsql

Una vez verificado procedemos a programar la página de conexión:

Acceso a PostgreSQL desde PHP Ejemplo 71: Conexión a PostgreSQL pagina22.php <?php //conexion al servidor PostgreSQL $conex=pg_connect("host=localhost dbname=dbdemo port=5432 user=oscar password=123456") or die("Error en la conexión"); ?> pagina23.php <?php include "pagina22.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=pg_query($sql) or die(pg_last_error($conex)); while($reg=pg_fetch_array($rspersona)) { echo $reg[idpersona]." - ".$reg[nombres]." ".$reg[apellidos]."<br>"; } ?> La función pg_last_error() muestra el último error ocurrido en la conexión activa, la cual es el parámetro.



Resultado Web:


Ejemplo 72: Listado de registros en una tabla HTML. pagina24.php <?php include "pagina22.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=pg_query($sql) or die(pg_last_error($conex)); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=pg_fetch_array($rspersona)) { ?> <tr> <td><?php echo "$registro[idpersona]"?></td> <td><?php echo "$registro[nombres]"?></td> <td><?php echo "$registro[apellidos]"?></td> <td><a href="pagina26.php?idpersona=<?php echo "$registro[idpersona]"?>">editar</a></td> <td><a href="pagina28.php?idpersona=<?php echo "$registro[idpersona]"?>">eliminar</a></td> </tr> <?php } //Liberar conjunto de resultados pg_free_result($rspersona);



// Cerrar conexion pg_close($conex); ?> </table> <br> <a href="formulario06.html">Agregar Registro</a> </body> </html> Resultado Web:


Ejemplo 73: Inserción de registro en PostgreSQL. formulario06.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pagina25.php"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Nuevo Registro</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" /></td> </tr> <tr>



<td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" /></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pagina14.php'" /></th> </tr> </table> </form> </body> </html> El destino de los datos de este formulario es: pagina25.php. Resultado Web:


pagina25.php <?php include "pagina22.php"; //sentencia para insertar el usuario $sql="insert into persona (nombres, apellidos, email, telefono ) values ('$_POST[nombres]','$_POST[apellidos]','$_POST[email]','$_POST[telefono]')"; //ejecutar sentencia pg_query($sql) or die(pg_last_error($conex)); echo "La persona fue registrada exitosamente<br>"; echo "<a href='pagina24.php'>Listado de Personas</a>"; ?>



Resultado Web:


Ejemplo 74: Edición de registro en PostgreSQL. pagina26.php <html> <head> <?php include "pagina22.php"; $sql="select * from persona where idpersona='$_GET[idpersona]'"; $rs=pg_query($sql) or die(pg_last_error()); if(pg_num_rows($rs)>0) $registro=pg_fetch_array($rs); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Edición de registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pagina27.php"> <input type="hidden" name="idpersona" value="<?php echo $_GET[idpersona]?>"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Edición de Persona</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" value="<?php echo $registro[nombres]?>" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" value="<?php echo $registro[apellidos]?>" /></td> </tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" value="<?php echo $registro[email]?>"/></td> </tr>



<tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" value="<?php echo $registro[telefono]?>"/></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pagina24.php'" /></th> </tr> </table> </form> </body> </html> Resultado Web:


pagina27.php <?php include "pagina22.php"; //sentencia para editar el registro $sql="update persona set nombres='$_POST[nombres]', apellidos='$_POST[apellidos]', email='$_POST[email]', telefono='$_POST[telefono]' where idpersona='$_POST[idpersona]'"; pg_query($sql) or die(pg_last_error($conex)); echo "La persona fue actualizada exitosamente<br>"; echo "<a href='pagina24.php'>Listado de Personas</a>"; ?> Resultado Web:




Ejemplo 75: Eliminación de registro en PostgreSQL. pagina28.php <?php include "pagina22.php"; //sentencia para eliminar el registro $sql="delete from persona where idpersona='$_GET[idpersona]'"; //ejecutar sentencia pg_query($sql) or die(pg_last_error()); echo "La persona fue eliminada exitosamente<br>"; echo "<a href='pagina24.php'>Listado de Personas</a>"; ?>




Acceso a MS SQL-Server desde PHP Ahora es el turno de MS SQLServer, para crear una base de datos vamos a abrir el Administrador Corporativo y luego crearemos una base de datos amada dbdemo. ll

Figura 148. Creando un nueva base de datos

Figura 149. Nombre de la nueva base de datos



Luego creamos la tabla persona.

Figura 150. Creando una nueva tabla

Figura 151. Especificación de los campos de la tabla

Verificamos si la librería para MS-SQLServer está disponible.



Figura 152. Activando la extensión php_mssql

Luego ingresamos algunos registros para probar los scripts.

Figura 153. Creando un usuario para acceso a la base de datos

Creamos un usuario para el acceso a la base de datos que hemos creado y establecemos los permisos.



Figura 154. Establecimiento de los permisos del usuario

Ejemplo 76: Conexión a MS-SQLServer pagina29.php <?php //conexion al servidor MS-SQLServer $conex=mssql_connect("LAPTOP\\","oscar","123456") or die("Error en la conexión"); mssql_select_db("dbdemo",$conex) or die("Error al seleccionar la BD"); ?> Ahora probemos listando los registros. pagina30.php <?php include "pagina29.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=mssql_query($sql) or die("Error sql"); while($reg=mssql_fetch_array($rspersona)) { echo $reg[idpersona]." - ".$reg[nombres]." ".$reg[apellidos]."<br>"; } ?> Resultado Web:




Ejemplo 77: Listado de registros pagina31.php <?php include "pagina29.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=mssql_query($sql) or die("error en la consulta"); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=mssql_fetch_array($rspersona)) { ?> <tr> <td><?php echo "$registro[idpersona]"?></td> <td><?php echo "$registro[nombres]"?></td> <td><?php echo "$registro[apellidos]"?></td> <td><a href="pagina33.php?idpersona=<?php echo "$registro[idpersona]"?>">editar</a></td> <td><a href="pagina35.php?idpersona=<?php echo "$registro[idpersona]"?>">eliminar</a></td> </tr> <?php } //Liberar conjunto de resultados mssql_free_result($rspersona); // Cerrar conexion mssql_close($conex); ?>



</table> <br> <a href="formulario07.html">Agregar Registro</a> Ejemplo 78: Inserción de registro en MS-SQLServer formulario07.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pagina32.php"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Nuevo Registro</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" /></td> </tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" /></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pagina14.php'" /></th> </tr> </table> </form> </body> </html>



pagina32.php <?php include "pagina29.php"; //sentencia para insertar la persona $sql="insert into persona (nombres, apellidos, email, telefono ) values ('$_POST[nombres]','$_POST[apellidos]','$_POST[email]','$_POST[telefono]')"; mssql_query($sql) or die("error al insertar el registro"); echo "La persona fue registrada exitosamente<br>"; echo "<a href='pagina31.php'>Listado de Personas</a>"; ?> Resultado Web:




Ejemplo 79: Edición de registro en MS-SQLServer pagina33.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php include "pagina29.php"; $sql="select * from persona where idpersona='$_GET[idpersona]'"; $rs=mssql_query($sql) or die("error en la consulta"); //ejecutar sentencia if(mssql_num_rows($rs)>0) $registro=mssql_fetch_array($rs); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Edición de registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pagina34.php"> <input type="hidden" name="idpersona" value="<?php echo $_GET[idpersona]?>"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Edición de Persona</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" value="<?php echo $registro[nombres]?>" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" value="<?php echo $registro[apellidos]?>" /></td> </tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" value="<?php echo $registro[email]?>"/></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" value="<?php echo $registro[telefono]?>"/></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pagina31.php'" /></th> </tr> </table> </form>



</body> </html> Resultado Web:


pagina34.php <?php include "pagina29.php"; //sentencia para editar el registro $sql="update persona set nombres='$_POST[nombres]', apellidos='$_POST[apellidos]', email='$_POST[email]', telefono='$_POST[telefono]' where idpersona='$_POST[idpersona]'"; //ejecutar sentencia mssql_query($sql) or die("error al editar el registro"); echo "La persona fue actualizada exitosamente<br>"; echo "<a href='pagina31.php'>Listado de Personas</a>"; ?> Resultado Web:


Ejemplo 80: Eliminación de registros en MS-SQLServer pagina35.php <?php include "pagina29.php"; //sentencia para eliminar el registro $sql="delete from persona where idpersona='$_GET[idpersona]'"; //ejecutar sentencia



mssql_query($sql) or die("Error al eliminar el registro"); echo "La persona fue eliminada exitosamente<br>"; echo "<a href='pagina31.php'>Listado de Personas</a>"; ?> Resultado Web:



PHP Orientado a Objetos

VI. PHP Orientado a Objetos Clases en PHP Cada definición de clase empieza con la palabra "class", seguida por un nombre de clase, el cual puede ser cualquier nombre que no esté en la lista de palabras reservadas en PHP. [3] Ejemplo 81: Definición de una clase pagina19.php <?php class MiClase { // Declaración de un miembro de la clase public $variable = 'demo'; // demo es el valor por defecto de $variable // Declaración de un método public function ver() { echo $this->variable; //imprime el valor de $variable } } ?>

Instancia de un Objeto Para crear una instancia de un objeto, un nuevo objeto debe ser creado y asignado a una variable. Un objeto siempre será asignado cuando se crea un objeto nuevo a menos que el objeto tenga un constructor definido que arroje una excepción en caso de error. Las clases deben ser definidas antes de crear las instancias (y en algunos casos esto es un requerido). Cuando se asigna una instancia de un objeto previamente creado a una nueva variable, la nueva variable accesará a la misma instancia que la del objeto a la que fue asignada. Este comportamiento es el mismo cuando se pasan instancias a una función. Una nueva instancia de un objeto previamente creado puede ser hecha clonándolo. [3] Ejemplo 82: Creando una instancia pagina20.php <?php include "pagina19.php"; //definición de MiClase //Creando una instancia $instancia = new MiClase(); // Asignación del Objeto $asignado = $instancia; $referencia =& $instancia;



$instancia->variable = '$asignado tendrá este valor'; $instancia = null; // $instancia y $referencia serán nulos var_dump($instancia); var_dump($referencia); var_dump($asignado); ?> Resultado Web


Extendiendo objetos Una clase puede heredar métodos y miembros de otra clase usando la palabra 'extends' en la declaración. No es posible extender de múltiples clases, una clase puede heredar solo de una clase base. Los métodos heredados y sus miembros pueden ser evitados, redeclarándolos con el mismo nombre con el que los definió la clase padre, a menos que la clase padre haya definido un método como final. Es posible accesar a los métodos o miembros redeclarados haciendo referencia a ellos con parent:: Ejemplo 83: Herencia simple de una Clase pagina21.php <?php include "pagina19.php"; class ExtendClass extends MiClase { // Redefinición de método function ver() { echo "clase con nuevo método\n"; parent::ver(); } } $extended = new ExtendClass(); $extended->ver(); ?>



Resultado Web


Auto carga de Objetos Cuando se escriben aplicaciones con programación orientada a objetos crean un archivo fuente PHP por cada definición de clase. Una de las molestias más grandes es tener que escribir una larga lista de includes necesarios al principio de cada script (uno para cada clase). En PHP 5, esto ya no es necesario. Puede definir una función __autoload la cual es llamada automáticamente en caso de que intente usar una clase que no ha sido definida aún. Al llamar esta función la ejecución del script da una última oportunidad de cargar la clase antes de que PHP falle con un error. Nota: Las excepciones arrojadas en la función __autoload no pueden ser capturadas en el bloque catch y resultan en el despliegue de un error fatal. Nota: La autocarga no esta disponible en PHP si se usa el modo interactivo CLI. En el siguiente ejemplo se intenta cargar las clases clase1 y clase2 de los archivos clase1.php y clase2.php respectivamente utilizando la función __autoload para después ejecutar los métodos de cada clase. Ejemplo 84: Auto carga clase1.php <?php class clase1 { // Declaración de un miembro de la clase public $texto = 'esta es la clase1'; // Declaración de un método public function mostrar() { echo $this->texto; //imprime el valor de $variable } } ?>



clase2.php <?php class clase2 { // Declaración de un miembro de la clase public $mi_texto = 'texto de la clase2'; // Declaración de un método public function display() { echo $this->mi_texto; //imprime el valor de $variable } } ?> autocarga.php <?php function __autoload($nombre_clase) { require_once $nombre_clase . '.php'; } $obj1 = new clase1(); $obj2 = new clase2(); $obj1->mostrar(); ?> <br> <?php $obj2->display(); ?> Resultado Web:

Figura 162. Resultado de autocarga.php



Acceso a MySQL con PHP Orientado a Objetos PHP 5.x viene con una extensión mejorada para trabajar con la funcionalidad provista por MySQL 4.1 y superior. Veamos a continuación una breve referencia es clases y métodos. Clases predefinidas

mysqli Representa una conexión entres PHP y la base de datos MySQL. Constructor mysqli - constructor de un nuevo objeto mysqli Métodos autocommit - cambia en ON u OFF las modificaciones de auto-commiting en la base de datos. change_user - cambia el usuario del identificador de enlace especificado. character_set_name - regresa el conjunto de caracteres del identificador de enlace especificado. close - cierra una conexión previamente abierta. commit - completa la transacción actual. connect - abre una nueva conexión al servidor de MySQL. debug - realiza operaciones de rastreo. dump_debug_info - vacía información de rastreo. get_client_info - retorna la versión del cliente. get_host_info - retorna el tipo de conexión usada. get_server_info - retorna la versión del servidor MySQL. get_server_version - retorna la versión del servidor MySQL init - inicializa el objeto mysqli. info - obtiene información acerca de la consulta más recientemente ejecutada. kill - solicita al servidor destruir un thread de mysql.



multi_query - realiza consultas de SQL múltiples. more_results - verifica si existen mas resultados de la consulta múltiple actualmente ejecutada. next_result - lee el siguiente resultado de la consulta múltiple actualmente ejecutada. options - fija opciones extra en la conexión. ping - llama una conexión con el servidor o reconecta si no hay conexión. prepare - prepara una sentencia SQL. query - ejecuta una sentencia SQL. real_connect - intenta abrir una conexión al servidor de base de datos MySQL. escape_string - caracteres especiales de escape para ser usados en una sentencia SQL, tomando en cuenta el conjunto de caracteres actual de la conexión. rollback - deshace la transacción actual. select_db - selecciona la base de datos por defecto. ssl_set - fija los parámetros SSL. stat - obtiene el estado actual del sistema. stmt_init - inicializa una sentencia para ser usada con mysqli_stmt_prepare. store_result - transfiere un resultado de la última consulta. use_result - transfiere un resultado sin almacenamiento intermedio de la última consulta. thread_safe - retorna si se ha dado thread_safety o no. Propiedades affected_rows - obtiene el número de filas afectadas en la operación MySQL previa. client_info - retorna en una cadena la versión del cliente de MySQL. client_version - retorna en un entero la versión del cliente de MySQL. errno - retorna el código de error para la llamada a función más reciente.



error - retorna la cadena de error para la llamada a función más reciente. field_count - retorna el número de columnas para la consulta más reciente. host_info - retorna la cadena representando el tipo de conexión usado. info - retorna información acerca de la consulta ejecutada más recientemente. insert_id - retorna el identificador generado automáticamente usado en la última consulta. protocol_version - retorna la versión del protocolo usado por MySQL. sqlstate - retorna una cadena que contiene el código de error SQLSTATE para el último error. thread_id - retorna el identificador del THREAD para la conexión actual. warning_count - retorna el número de alertas generadas durante la ejecución del enunciado SQL previo.

mysqli_stmt Representa una sentencia preparada. Métodos bind_param - enlaza variables a una sentencia preparada. bind_result - enlaza variables a una sentencia preparada para el almacenamiento del resultado. close - cierra la sentencia preparada. data_seek - busca a una fila arbitrariamente en el resultado. execute - ejecuta una sentencia preparada. fetch - obtiene el resultado de la sentencia preparada en variables límite. free_result - libera la memoria del resultado almacenado para el manejador de la sentencia dada. result_metadata - obtiene un resultado de la sentencia preparada para información de metadatos. prepare - prepara una consulta SQL. send_long_data - envía datos en partes. reset - resetea una sentencia preparada.



store_result - almacena el resultado completo de la sentencia preparada. Propiedades affected_rows - retorna las filas afectadas de la última sentencia ejecutada. errno - retorna el código de error para la llamada a función más reciente. error - retorna el mensaje de error para la llamada a función más reciente. param_count - retorna el numero de parámetros para la sentencia preparada dada. sqlstate - retorna una cadena conteniendo el código de error SQLSTATE para la llamada a función más reciente.

mysqli_result Representa el resultado obtenido de la consulta hecha en la base de datos. Métodos close - cierra el resultado. data_seek - mueve el puntero interno del resultado. fetch_field - obtiene la información de la columna en el resultado. fetch_fields - obtiene la información para todas las columnas del resultado. fetch_field_direct - obtiene información de la columna para la columna dada. fetch_array - recupera una fila como una matriz asociativa, una matriz numérica, o ambos. fetch_assoc - obtiene una fuka como una matriz asociativa. fetch_object - obtiene una fila como un objeto. fetch_row - obtiene una fila como una matriz enumerada. close - libera la memoria ocupada por el resultado. field_seek - fija el apuntador del resultado a la posición especificada. Propiedades current_field - retorna la posición de puntero actual. field_count - retorna el número de campos en el resultado.



lengths - retorna una matriz con la longitud de los campos. num_rows - retorna el número de filas en el resultado. Nos conectaremos a la base de datos “dbdemo” y administraremos la tabla “persona”. Ejemplo 85: Conexión a MySQL con mysqli mysqli-connect.php <?php $mysqli = new mysqli("localhost", "root", "", "dbdemo"); /* verifica la conexión */ if (mysqli_connect_errno()) { printf("Conexión fallida:<br> %s\n", mysqli_connect_error()); exit(); } printf("Server MySQL:<br> %s\n", $mysqli->host_info); /* Cerrar la conexión */ $mysqli->close(); ?> Resultado Web:

Figura 163. Resultado de mysqli-connect.php

Modificaremos el archivo anterior para utilizarlo en las conexiones de las próximas páginas. mysqli-conexion.php <?php $mysqli = new mysqli("localhost", "root", "", "dbdemo"); /* verifica la conexión */ if (mysqli_connect_errno()) {



printf("Error en la conexión:<br> %s\n", mysqli_connect_error()); exit(); } ?> Ejemplo 86: Listado con mysqli mysqli-lista.php <?php include "mysqli-conexion.php"; //incluimos la conexión //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); //listado while($reg=$rspersona->fetch_object()) { echo $reg->idpersona." - ".$reg->nombres." ".$reg->apellidos."<br>"; } ?> Resultado Web:

Figura 164. Resultado de mysqli-lista.php

mysqli-listado.php <?php include "mysqli-conexion.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th>



<th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td> <td><?php echo "$registro->apellidos"?></td> <td><a href="mysqli-editar.php?idpersona=<?php echo "$registro->idpersona"?>">editar</a></td> <td><a href="mysqli-eliminar.php?idpersona=<?php echo "$registro->idpersona"?>">eliminar</a></td> </tr> <?php } $rspersona->close(); //cerramos resultado de la consulta $mysqli->close(); //cerramos la conexión ?> </table> <br> <a href="formulario08.html">Agregar Registro</a> </body> </html> Resultado Web:

Figura 165. Resultado de mysqli-listado.php

Ejemplo 87: Inserción de registro con mysqli formulario08.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">



<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" name="form1" method="post" action="mysqli-insertar.php"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Nuevo Registro</th></tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" /></td> </tr> <tr> <td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" /></td> </tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" /></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location=' mysqli-listado.php'" /></th> </tr> </table> </form> </body> </html> Resultado Web:

Figura 166. Resultado de formulario08.htm



mysqli-insertar.php <?php include "mysqli-conexion.php"; //sentencia para insertar el usuario $sql="insert into persona values('','$_POST[nombres]','$_POST[apellidos]','$_POST[email]','$_POST[telefono]')"; //ejecutar sentencia $mysqli->query($sql) or die($mysqli->error); echo "La persona fue registrada exitosamente<br>"; echo "<a href='mysqli-listado.php'>Listado de Personas</a>"; ?> Resultado Web:

Figura 167. Resultado de mysqli-insertar.php

Ejemplo 88: Edición de registro con mysqli mysqli-editar.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php include "mysqli-conexion.php"; $sql="select * from persona where idpersona='$_GET[idpersona]'"; $rs=$mysqli->query($sql) or die($mysqli->error); //ejecutar sentencia if($rs->num_rows>0) $registro=$rs->fetch_object(); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Edición de registro</title> </head>



<body> <form id="form1" name="form1" method="post" action="mysqli-actualizar.php"> <input type="hidden" name="idpersona" value="<?php echo $_GET[idpersona]?>"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Edición de Persona</th></tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" value="<?php echo $registro->nombres?>" /></td> </tr> <tr><td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" value="<?php echo $registro->apellidos?>" /></td></tr> <tr> <td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" value="<?php echo $registro->email?>"/></td> </tr> <tr> <td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" value="<?php echo $registro->telefono?>"/></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location=' mysqli-listado.php'" /></th> </tr> </table> </form> <?php $rs->close(); $mysqli->close(); ?> </body> </html> Resultado Web:

Figura 168. Resultado de mysqli-editar.php



mysqli-actualizar.php <?php include "mysqli-conexion.php"; //sentencia para editar el registro $sql="update persona set nombres='$_POST[nombres]', apellidos='$_POST[apellidos]', email='$_POST[email]', telefono='$_POST[telefono]' where idpersona='$_POST[idpersona]'"; //ejecutar sentencia $mysqli->query($sql) or die($mysqli->error()); echo "La persona fue actualizada exitosamente<br>"; echo "<a href='mysqli-listado.php'>Listado de Personas</a>"; ?> Resultado Web:

Figura 169. Resultado de mysqli-actualizar.php

Ejemplo 89: Eliminación de registros con mysqli mysql-eliminar.php <?php include "mysqli-conexion.php"; //sentencia para eliminar el registro $sql="delete from persona where idpersona='$_GET[idpersona]'"; //ejecutar sentencia $mysqli->query($sql) or die($mysqli->error()); echo "La persona fue eliminada exitosamente<br>"; echo "<a href='mysqli-listado.php'>Listado de Personas</a>"; ?> Resultado Web:

Figura 170. Resultado de mysqli-eliminar.php



Paginando resultados Ejemplo 90: Paginación de resultados mysqli-listado-paginacion.php <?php include "mysqli-conexion.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); $numreg=$rspersona->num_rows; $regxpag=3; if(!isset($_GET['p']))$_GET['p']=1; $inicio=$regxpag*($_GET['p']-1); $sql=$sql ." limit $inicio,$regxpag"; $numpag=ceil($numreg/$regxpag); $rspersona=$mysqli->query($sql) or die($mysqli->error); echo "Registros encontrados:" . $numreg; ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td> <td><?php echo "$registro->apellidos"?></td> <td><a href="mysqli-editar.php?idpersona=<?php echo "$registro->idpersona"?>">editar</a></td> <td><a href="mysqli-eliminar.php?idpersona=<?php echo "$registro->idpersona"?>">eliminar</a></td> </tr> <?php } $rspersona->close(); //cerramos resultado de la consulta $mysqli->close(); //cerr=amos la conexión ?> </table>



Página: <?php for($i=1;$i<=$numpag;$i++) { echo "<a href='mysqli-listado-paginacion.php?p=$i'>$i</a> "; } ?> <br> <a href="formulario08.html">Agregar Registro</a> Resultado Web:

Figura 171. Resultado de mysqli-listado-paginacion.php

Explicación: Primero incluimos el archivo para la conexión a la base de datos include "mysqli-conexion.php"; //incluimos la conexión Consultamos los registros de la tabla persona //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); Hallamos la cantidad de registros de la tabla para dividirlo en páginas. $numreg=$rspersona->num_rows; Establecemos la cantidad de registros por página. $regxpag=3; Verificamos si la variable “p” que indica la página que se va a mostrar, tiene algun valor. Si la variable no tiene valor, se le asigna 1 (pagina por defecto). if(!isset($_GET['p']))$_GET['p']=1; Hallamos el registro inicial de la página $inicio=$regxpag*($_GET['p']-1); Complementamos la sentencia SQL para mostrar solamente los registros de la página seleccionada



$sql=$sql ." limit $inicio,$regxpag"; Hallamos el número de páginas. La función ceil redondea fracciones hacia arriba. $numpag=ceil($numreg/$regxpag); Ejecutamos la consulta SQL para obtener los registros de la página seleccionada. $rspersona=$mysqli->query($sql) or die($mysqli->error); Imprimir la cantidad de registros total. echo "Registros encontrados:" . $numreg; En la parte inferior de la página web aparecen las páginas de resultados. A través de un bucle creamos los hipervínculos para visualizar las páginas. <?php for($i=1;$i<=$numpag;$i++) { echo "<a href='mysqli-listado-paginacion.php?p=$i'>$i</a> "; }



Arquitectura MVC Todos los que estamos inmersos en el mundo de la programación sabemos que en todo programa los datos que se procesan pueden ser ingresados y mostrados en formas diferentes dependiendo del tipo y diseño de la interfaz, y sobre todo en el desarrollo Web esto se ve aun más acentuado debido a que los desarrolladores Web muchas veces son muy buenos programando pero no diseñando interfaces, por lo general las empresas de este rubro optan por utilizar dos equipos de trabajo: los codificadores quienes se encargan de implementar los algoritmos y los diseñadores para darle un buena presentación a la aplicación, pero las dificultades inician cuando alguna parte del código que un equipo hace influye sobre el diseño que realiza el otro equipo. Para dar solución a este tipo de problemas han surgido arquitecturas de desarrollo que nos permiten desarrollar aplicaciones separando la lógica del diseño de la interfaz, una de ellas es la Arquitectura MVC (Modelo – Vista – Controlador).

MVC con PHP Lo que se muestra a continuación es un artículo muy interesante extraído de http://www.phpizza.com/es/ en el que se explica de una forma fácil y sencilla el uso de MVC con PHP. Esta arquitectura va más allá de esa división abstracta en dos capas e implementa 3 partes:

Figura 172. MVC

Fuente: http://www.phpizza.com

En el esquema de arriba las flechas oscuras significan una interacción directa y las claras la indirecta. Esto básicamente quiere decir que las verdes son las respuestas a las azules.



La capa de Presentación se divide en dos componentes: Controlador y la Vista. La capa de Datos tiene un componente: el Modelo. Controlador Algunos al hablar de Controlador se referirán a su acometido bajo los nombres de Lógica de Negocio o Lógica Empresarial. Lo de la lógica de negocio probablemente venga de los tiempos en los que los programas sobre todo hacían cosas relacionadas con informes contables. Como su propio nombre indica el Controlador controla lo que sucede a partir de que se haya producido una interacción por parte del usuario sobre la Vista. La Vista le comunica los eventos al Controlador. El Controlador usa el Modelo para conseguir los datos o almacenarlos y por fin, el Controlador vuelve a usar la Vista para comunicar al usuario que resultado provocó su acción. Modelo El acometido de esta parte llamada Modelo es el Acceso A Datos. Al hablar de Datos uno piensa en una Base de Datos o un Sistema de Gestión de Bases de Datos (SGBD): MySQL, PostgreSQL, Oracle etc. En realidad el Modelo encapsula la Capa de Acceso a Datos de tal forma que se supone que nos podemos olvidar de que tipo de SGBD estamos usando. El Modelo, en realidad, es el objeto en sí. Vista La tercera parte es la Vista. Es en realidad la Capa de Presentación. Sirve para que el usuario pueda interactuar a través de los eventos con el Controlador y también para que pueda ver los resultados. Estos resultados serán aportados por el Controlador a través del Modelo. Esta es la diferencia con la simple programación por capas (también llamada escalonada o multi-escalonada) y sin conocerla se suelen confundir los términos.



Figura 173. Tres capas

Fuente: http://www.phpizza.com En una arquitectura de separación por capas – que es una manera de llevar a cabo la separación abstracta de 2 capas– la Capa de Acceso a Datos nunca interfiere directamente con la Vista. Lo hace siempre a través del Controlador. El Controlador interpreta los eventos que le llegan de la Vista, usa los objetos o funciones de la Capa de Acceso A Datos y envía datos a la Vista. Pero la Vista no ejecuta los métodos de los objetos. En MVC, sin embargo, la Vista sí puede mostrar datos a través de los métodos de un objeto que el Controlador le ha pasado.[5] MVC Web Traducido al mundo de la programación Web paso por paso:

1. el Controlador recibe una petición. Esto puede ocurrir de forma directa poniendo el usuario en el navegador la URL del Controlador http://localhost/controlador.php, o mediante un evento a través de una Vista ya renderizada (envío de un formulario por ejemplo), o por una petición ajax.

2. el Controlador analiza la petición y usa un Modelo para obtener

datos de algún tipo.

3. el Modelo puede leer datos y/o escribirlos en una base de datos. Normalmente sucede esto, aunque no siempre.

4. el Controlador usa una Vista para poder presentar los resultados al

usuario.



5. la Vista usa el Modelo, de tal forma, que algún tipo de respuesta obtenido por la acción previa será presentado en la Vista.

6. la Vista está renderizada con los datos del Modelo y el Controlador

envía esta respuesta al usuario.

7. El usuario obtiene la respuesta El Modelo Vista Controlador no es una cosa reciente. Lo inventaron en los años 70 al empezar a hacer aplicaciones medianamente grandes que manejaban muchos datos. Es el llamado “Modelo* 2” en la jerga Sun. *Aquí la palabra Modelo no tiene que ver con el Modelo de Modelo Vista Controlador sino con el nombre de la arquitectura. Hablando de la interacción entre el Modelo y la Vista - en Java también es posible implementar un componente llamado Observador que después de constatar algún cambio en el Modelo, puede realizar ciertas operaciones. Por ejemplo: el usuario confirma la compra en una tienda on-line y el Observer implementado ve que hay un cambio en el Modelo (en la propia base de datos) y manda un email de confirmación o actualiza la Vista. Pero los Observadores no se implementan en PHP porque este lenguaje se ejecuta de manera distinta a como se ejecutan los procesos de Java. Normalmente al tener un tiempo limitado de ejecución los procesos PHP no hacen de observadores. Sinceramente - hacer una aplicación usando la arquitectura MVC te costará más trabajo que si haces páginas monolíticas, mezclándolo todo - el php y el html en lo que se llama popularmente el código spaghetti. El MVC supone más trabajo: Primero tendrás que definir los Modelos y convertirlos en Objetos de tal manera que sus atributos y métodos sean el conjunto de propiedades y acciones verdaderamente necesarias y representativas. Tendrás que planificar las Vistas por separado y trabajar los Controladores. Al principio de la implementación te será más rápido hacer páginas monolíticas… ¿Por qué usarlo entonces? Pues, cuando quieras cambiar tu aplicación – para añadir, quitar o cambiar alguna funcionalidad - la vida te resultará muy dura. Un proyecto medianamente grande se convertirá en un infierno en muy poco tiempo sobre todo cuando quieras cambiar algo y ello afecte al funcionamiento de más de una de tus páginas. El MVC básicamente te permitirá poder cambiar las Capas de presentación sin que afecten a la de acceso de datos y viceversa. Hay gente que te dirá que el PHP fue concebido como algo sencillo y práctico. Como un lenguaje que permite hacer páginas Web dinámicas y



procesar formularios de una manera simple. Que complicar las cosas más allá de eso es impropio de este lenguaje. Y les doy la razón. ¡Claro! El asunto es que ese primer PHP no tenía mucho que ver con el PHP5 actual. No había objetos por ejemplo. Hay pequeñas diferencias en como implementan el MVC distintos frameworks, pero los fundamentos son los mismos. También puedes usar motores de plantillas como por ejemplo Smarty para implementar el MVC, pero en realidad no necesitas nada más que el PHP puro. Ejemplo 91: MODELO – MVC con PHP _modelo.php <?php class ClaseX { protected $plantilla_propia = "_listar.php"; protected $arrayx= array(); public function show() { include ($this->plantilla_propia); }//fun public function CargarDatos() { $this->arrayx = array("Abel", "Marco","Pedro"); }//fun }//class ?> Ejemplo 92: Una plantilla usada por el modelo _listar.php <?php foreach ($this->arrayx as $elemento) { echo $elemento["nombre"]; echo ""; }//foreach ?>



Ejemplo 93: CONTROLADOR MVC con PHP _controlador.php <?php include ("./_modelo.php"); $objX = new ClaseX(); //aquí habría que implementar una clase que //determine las caracteristicas de la pagina //pero para poner un ejemplo sencillo vamos //a saltarnos esa parte en este artículo $titulo = "pagina nueva"; $objX->CargarDatos(); include ("_vista.php"); ?> Ejemplo 94: VISTA MVC con PHP _vista.php <html> <head> <title><?php echo $titulo; ?></title> </head> <body> <?php $objX->show(); ?> </body> </html> El punto clave en una Vista como la de este ejemplo es que no uses instrucciones PHP más allá de las que muestren datos. ¿Por qué? Pues si la lógica de tu aplicación se está decidiendo en la Vista entonces ¿para qué queremos el Controlador? ;) Simplificando mucho el concepto eso quiere decir que uses echo y metodos de tus objetos (Modelo) que hagan echo de alguna forma aunque tu los llames show o muestra_datos o lo que tú quieras. El inventor y gurú del PHP Rasmus Lerdorf, publicó hace algún tiempo, en febrero del año 2006 un bastante mal entendido artículo, titulado “The no framework PHP MVC framework”… Aquí, Rasmus nos habla sobre como implementar un sencillo MVC usando solo PHP puro. Bueno, estoy de acuerdo hasta un cierto punto con este artículo y es que implementar el MVC sin usar un framework que vaya más allá de nuestras necesidades nos va a beneficiar en cuanto a la memoria que usa cada script PHP. Más tarde hablaremos sobre la optimización. Algunos



han interpretado que Rasmus en este artículo defendía la programación procedural en contra de la Orientada a Objetos. El mismo dice que no es así- que podía haber hecho todo el ejemplo usando más objetos y estoy de acuerdo. Pero si observas detenidamente la parte titulada “View –add.html” que es el ejemplo de Vista que nos pone su autor, te darás cuenta que la Vista hace al principio una inclusión del Controlador: include './ui.inc'; // Common View Helper functions include './add_c.inc'; // Controller head(); Vale, pues – eso no es MVC aunque lo diga mi admirado Rasmus. Es un framework con división de capas en tres partes pero no es MVC. La Vista no debe ser la que controla la aparición de un Controlador sino todo lo contrario: el Controlador usa las Vistas.



MVC y PHP con acceso a Base de Datos Tomando como guía el artículo anterior desarrollaremos un listado de los registros de la tabla persona creada en la sección anterior. Ejemplo 95: modelo_bd.php <?php class BaseDatos { protected $servidor="localhost"; protected $usuario="root"; protected $password=""; protected $link; public $rs; public function conectar() { $this->link=mysql_connect($this->servidor,$this->usuario,$this->password) or die(mysql_error()); mysql_select_db("dbdemo",$this->link) or die(mysql_error()); } public function consultar($sql) { $this->rs=mysql_query($sql) or die(mysql_error()); } } //fin clase class ClaseDatos { protected $plantilla_listado = "lista_bd.php"; protected $data= array(); protected $recset; protected $registro; * public function show() { include ($this->plantilla_listado); } public function leer_registro() { $this->registro=mysql_fetch_array($this->recset,MYSQL_ASSOC) or die(mysql_error()); return $this->registro; }



public function CargarDatos($sentencia) { $objBase = new BaseDatos(); $objBase->conectar(); $objBase->consultar($sentencia); $this->recset=$objBase->rs; } } //fin clase ?> Ejemplo 96: lista_bd.php <table border="1"> <?php while($this->leer_registro()) { ?> <tr> <?php foreach($this->registro as $k => $v){ ?> <td><?php echo $this->registro[$k]?></td> <?php } ?> </tr> <?php } ?> </table> Ejemplo 97: vista_bd.php <html> <head> <title><?php echo $titulo; ?></title> </head> <body> <?php $objData->show(); ?> </body> </html> Ejemplo 98: controlador_bd.php <?php include ("modelo_bd.php"); $objData = new ClaseDatos(); $sql="select * from persona";



$titulo = "Lista de personas"; $objData->CargarDatos($sql); include ("vista_bd.php"); ?> Para ver el resultado abrimos en navegador el archivo controlador_bd.php.

Figura 174. Resultado de controlador_bd.php



PDO – PHP Data Object PHP Data Objects (PDO) es una extensión de PHP que utilice controladores para acceder a datos de motores de bases de datos diversos como: MySQL, PostgreSQL, Microsoft SQL Server, Oracle, mSQL, etc. PDO provee una capa de abstracción de datos, con la cual, la codificación depende menos de la base de datos que estemos utilizando, debido a que los métodos tienen el mismo nombre para todas las bases de datos que soporta, es decir, ya no tendremos que escribir mysql_query para ejecutar una sentencia SQL en MySQL y cuando migremos a PostgreSQL tengamos que cambiarla a pg_query. PDO esta disponible desde PHP 5.1, y requiere las nuevas características de programación orientada a objetos que viene desde PHP 5, por lo que no corre en versiones anteriores. Los siguientes controladores están disponibles actualmente:

Tabla 20. Controladores PDO Controlador Base de Datos PDO_DBLIB FreeTDS / Microsoft SQL Server / Sybase

PDO_FIREBIRD Firebird/Interbase 6

PDO_IBM IBM DB2

PDO_INFORMIX IBM Informix Dynamic Server

PDO_MYSQL MySQL 3.x/4.x/5.x

PDO_OCI Oracle Call Interface

PDO_ODBC ODBC v3 (IBM DB2, unixODBC and win32 ODBC)

PDO_PGSQL PostgreSQL

PDO_SQLITE SQLite 3 and SQLite 2

Clases predefinidas

PDO Representa una conexión entre PHP y un servidor de base de datos. Constructor PDO - construye un nuevo objeto PDO Métodos beginTransaction – inicia una transacción. commit - efectúa la transacción.



errorCode – retorna un código de error, si ocurre alguno en la base de datos. errorInfo – retorna un arreglo de información del error, si ocurre alguno en la base de datos. exec – ejecuta una sentencia SQL y retorna el número de registros afectados. getAttribute – retorna los atributos de una conexión. lastInsertId – retorna el valor del ID del ultimo registro que fue insertado en la tabla. prepare - prepara una sentencia SQL para su ejecución. query – ejecuta una sentencia SQL y retorna un conjunto de registros. quote – retorna una cadena de texto con comillas para su uso en sentencias SQL. Recomendada para evitar inyección SQL. rollBack - Deshace una transacción setAttribute – establece un atributo para la conexión a una base de datos.

PDOStatement Representa una sentencia preparada, luego que la sentencia es ejecutada, un conjunto de registros. Métodos bindColumn - relaciona variable a una columna de salida en un conjunto de registros. bindParam - relaciona una variable PHP a un parámetro en la sentencia preparada. bindValue - binds un valor a un parámetro en la sentencia preparada. closeCursor - cierra el cursor, permitiendo ejecutar nuevamente la sentencia. columnCount - retorna el número de columnas del conjunto de registros. errorCode - retorna un código de error, si lo hay, de la sentencia. errorInfo - retorna un arreglo de información de un error, si lo hay, de la sentencia. execute – ejecuta la sentencia preparada. fetch – lee un registro de un conjunto de registros.



fetchAll – asigna a un arreglo el contenido de todos los datos de un conjunto de registros. fetchColumn - retorna el dato de una columna en un conjunto de registros. getAttribute – retorna un atributo de un PDOStatement. getColumnMeta – retorna los metadatos de una columna en un conjunto de resultados. nextRowset – retorna el siguiente registro. rowCount - retorna el número de registros afectados por la ejecución de la sentencia SQL. setAttribute – establece un atributo PDOStatement. setFetchMode – establece el modo de lectura de registros de un PDOStatement.



Conexiones con PDO Para establecer una conexión a una base de datos debemos instanciar la clase PDO e indicar primero el nombre del motor de base de datos al cual nos conectaremos, seguido del nombre del servidor, nombre de la base de datos, usuario y finalmente la contraseña. En el siguiente podemos observar una conexión a MySQL y las siguientes líneas que están comentadas se conectan a Microsoft SQL Server y a PostgreSQL respectivamente. Ejemplo 99: Conexión a MySQL con PDO pdo-connect.php <?php $conn = new PDO('mysql:host=localhost;dbname=dbdemo',"root",""); //$conn = new PDO('mssql:host=localhost;dbname=dbmicro',"sa",""); //$conn = new PDO('pgsql:host=localhost;dbname=dbpos',"postgres","psql"); ?> Ahora veremos una lista simple obtenida de la tabla persona. Ejemplo 100: Lista de personas con PDO y manejo de errores pdo-lista.php <?php try { include "pdo-connect.php"; foreach ($conn->query('SELECT * from persona') as $registro) { print_r($registro); } $conn = null; //cierre de conexión } catch (PDOException $e) { print "Error!: " . $e->getMessage() . "<br/>"; die(); } ?>



Resultado Web

Figura 175. Resultado de pdo-lista.php

Ejemplo 101: Listado de registros con PDO, con eliminación múltiple pdo-listado.php <?php include "pdo-connect.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; $rspersona=$conn->query($sql); ?> <form name="form1" action="pdo-eliminar.php" method="post"> <table> <tr> <th>Eliminar</th> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch()) { ?> <tr> <td><input type="checkbox" name="chkelim[]" value="<?php echo $registro[idpersona]?>" /></td> <td><?php echo $registro[idpersona]?></td> <td><?php echo $registro[nombres]?></td> <td><?php echo $registro[apellidos]?></td> <td><a href="pdo-editar.php?idpersona=<?php echo $registro[idpersona]?>">editar</a></td> </tr> <?php



} $rspersona->closeCursor(); //cerramos resultado de la consulta $conn=null; //cerramos la conexión ?> <tr> <th><input type="submit" value="Eliminar" /></th> <th colspan="4"><input type="button" onclick="location='pdo-nuevo.php'" value="Nuevo" /></th> </tr> </table> </form> Resultado Web

Figura 176. Resultado de pdo-listado.php

Ejemplo 102: Inserción de registros con PDO pdo-nuevo.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Nuevo registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pdo-insertar.php"> <table width="80%" border="0" align="center"> <tr> <th colspan="2">Nuevo Registro</th> </tr> <tr> <td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" /></td>



</tr> <tr><td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" /></td> </tr> <tr><td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" /></td> </tr> <tr><td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" /></td> </tr> <tr><th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='mysqli-listado.php'" /></th> </tr> </table> </form> </body> </html> Resultado Web:

Figura 177. Resultado de pdo-nuevo.php

Ejecución de Sentencias Preparadas con PDO pdo-insertar.php <?php try { include "pdo-connect.php"; $sentencia = $conn->prepare("INSERT INTO persona (nombres, apellidos, email, telefono) VALUES (:nombres, :apellidos, :email, :telefono)");



$sentencia->bindParam(':nombres', $_POST[nombres]); $sentencia->bindParam(':apellidos', $_POST[apellidos]); $sentencia->bindParam(':email', $_POST[email]); $sentencia->bindParam(':telefono', $_POST[telefono]); $sentencia->execute(); $conn = null; header("location: pdo-listado.php"); } catch (PDOException $e) { print "Error!: " . $e->getMessage() . "<br/>"; die(); } ?> Ejemplo 103: Eliminación múltiple de registros con PDO pdo-eliminar.php <?php include "pdo-connect.php"; $sentencia=$conn->prepare("delete from persona where idpersona=:id"); $sentencia->bindParam(':id',$valor); foreach($_POST[chkelim] as $indice => $valor) { $sentencia->execute(); } header("location: pdo-listado.php"); ?> Ejemplo 104: Edición de registros con PDO. pdo-editar.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php include "pdo-connect.php"; $sql="select * from persona where idpersona=" . $_GET[idpersona]; $rspersona=$conn->query($sql); $registro=$rspersona->fetch(); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Edición de registro</title> </head> <body> <form id="form1" name="form1" method="post" action="pdo-actualizar.php">



<input type="hidden" name="idpersona" value="<?php echo $_GET[idpersona]?>"> <table width="80%" border="0" align="center"> <tr><th colspan="2">Edición de Persona</th> </tr> <tr><td>Nombres</td> <td><input name="nombres" type="text" id="nombres" size="50" maxlength="50" value="<?php echo $registro[nombres]?>" /></td></tr> <tr><td>Apellidos</td> <td><input name="apellidos" type="text" id="apellidos" size="50" maxlength="50" value="<?php echo $registro[apellidos]?>" /></td></tr> <tr><td>E-Mail</td> <td><input name="email" type="text" id="email" size="50" maxlength="100" value="<?php echo $registro[email]?>"/></td></tr> <tr><td>Teléfono</td> <td><input name="telefono" type="text" id="telefono" maxlength="15" value="<?php echo $registro[telefono]?>"/></td></tr> <tr><th colspan="2"><input name="Submit" type="submit" class="boton" value="Guardar" /> <input name="Submit2" type="button" class="boton" value="Cancelar" onclick="location='pdo-listado.php'" /></th></tr> </table> </form> <?php $rspersona->closeCursor(); $conn=null; ?> </body> </html> Resultado Web:

Figura 178. Resultado de pdo-editar.php

pdo-actualizar.php <?php include "pdo-connect.php";



$sentencia = $conn->prepare("UPDATE persona SET nombres=:nombres, apellidos=:apellidos, email=:email, telefono=:telefono where idpersona=:idpersona"); $sentencia->bindParam(':idpersona', $_POST[idpersona]); $sentencia->bindParam(':nombres', $_POST[nombres]); $sentencia->bindParam(':apellidos', $_POST[apellidos]); $sentencia->bindParam(':email', $_POST[email]); $sentencia->bindParam(':telefono', $_POST[telefono]); $sentencia->execute(); $conn = null; header("location: pdo-listado.php"); ?>


Seguridad Web

VII. Seguridad Web Las aplicaciones Web por lo general están en línea y eso las expone a la visita de usuarios que llegan con objetivos distintos, uno de ellos el hacerse de fama violando la seguridad de sitios Web, valiéndose de diferentes estrategias y herramientas. Construir una aplicación completamente segura es imposible por tal motivo es imprescindible conocer y establecer barreras contra estos ataques y por otro lado desarrollar las aplicaciones evitando cometer errores en la codificación desde el punto de vista lógico, que nos puedan causar problemas de seguridad posteriormente, todo esto minimizará en lo posible la posibilidad de violación en la seguridad del sistema, tal como se menciona en las recomendaciones generales de seguridad en PHP:

“Cuando realice pruebas, tenga en mente que no será capaz de probar todas las diferentes posibilidades, incluso para las páginas más simples. Los datos de entrada que usted puede esperar en sus aplicaciones no necesariamente tendrán relación alguna con el tipo de información que podría ingresar un empleado disgustado, un cracker con meses de tiempo entre sus manos, o un gato doméstico caminando sobre el teclado. Es por esto que es mejor observar el código desde una perspectiva lógica, para determinar en dónde podrían introducirse datos inesperados, y luego hacer un seguimiento de cómo esta información es modificada, reducida o amplificada”.1

A continuación veremos algunos temas sobre la seguridad en el desarrollo Web.

Seguridad en el Sistema de archivos El sistema de archivos en todo sistema operativo es importante debido a que a través de él se puede violar la seguridad de un computador, por ejemplo a continuación veremos un caso en el que un usuario puede borrar un archivo importante del sistema operativo UNIX o LINUX debido a que no se tomaron ciertas medidas de precaución. Ejemplo 105: Borrar un archivo de un usuario Este caso presenta el supuesto que un usuario ingresa su nombre y el nombre de su archivo que desea eliminar de su directorio personal a través de la Web. El usuario ingresará los datos en un formulario y los enviará al siguiente archivo PHP. <?php // datos enviados a través del formulario $usuario = $_POST['nombre_usuario']; 1 http://www.php.net/manual/es/security.general.php


Seguridad Web

$archivo = $_POST['archivo']; //generamos la ruta para el borrado del archivo – directorio del usuario $directorio = "/home/$usuario"; //orden de eliminación del archivo unlink("$directorio/$archivo"); echo "El archivo: $archivo ha sido eliminado!"; ?> Si alguien desea atacar el sistema de archivos podría escribir en el formulario datos para eliminar por ejemplo el archivo de passwords del sistema operativo, en el caso que PHP tuviera acceso de root. Ejemplo 106: Ataque mediante el borrado de archivos <?php // Para el caso del nombre del usuario enviamos: "../etc" // Para el caso del nombre del archivo enviamos: "passwd" $usuario = $_POST['nombre_usuario']; $archivo = $_POST['archivo']; //generando la ruta del directorio obtendríamos lo siguiente: "/home/../etc" $directorio = "/home/$nombre_usuario"; // El archivo que se va a eliminar es: "/home/../etc/passwd" unlink("$directiorio/$archivo"); echo "El archivo ha sido eliminado!"; ?> Para mejorar el control y la validación de los datos enviados por el usuario utilizaremos funciones que nos permitan verificar el tipo de datos correcto. Por ejemplo: if (!ctype_alnum($nombre_usuario) || !preg_match('/^(?:[a-z0-9_-]|\.(?!\.))+$/iD', $archivo_usuario)) { die("Nombre de usuario o archivo incorrecto"); } ctype_alnum: es una función que devuelve TRUE cuando la cadena contiene solamente caracteres alfanuméricos, es decir, letras y/o números. preg_match: es una función que realiza una comparación en base a una expresión regular.


Seguridad Web

Seguridad en Base de datos La seguridad de las aplicaciones Web también pasa por la etapa de diseño de la base de datos, al momento de establecer los tipos de usuarios y los privilegios que cada uno tendrá, es recomendable hacer esto y no dejar todo el control en la lógica de la aplicación. Respecto a la conexión con la base de datos es posible utilizar el protocolo SSL para encriptar la comunicación entre el servidor y los clientes, pero solamente cifra la información en el medio, y no cuando es almacenada en la base de datos. Para el caso del almacenamiento de contraseñas en la base de datos recomiendo el uso de uno de los resúmenes criptográficos más utilizados en la actualidad: MD5. En PHP el hash MD5 (acrónimo de Message-Digest Algorithm 5, Algoritmo de Resumen del Mensaje 5) puede ser utilizado a través de la función con el mismo nombre: md5().MD5 es uno de los algoritmos de reducción criptográficos diseñados por el profesor Ronald Rivest del MIT (Massachusetts Institute of Technology, Instituto Tecnológico de Massachusetts). Fue desarrollado en 1991 como reemplazo del algoritmo MD4 después de que Hans Dobbertin descubriese su debilidad. Veamos un ejemplo: Ejemplo 107: Md5 md5.php <?php $texto="miclavedeacceso"; $cifrado=md5($texto); echo "mi clave cifrada es:".$cifrado; // el texto cifrado con MD5 de 128bits genera una cadena de 32 caracteres de longitud. ?> Resultado Web:

Figura 179. Resultado de md5.php

Una cualidad de este algoritmo es que no tiene función para descifrar lo que lo hace mas seguro que otros debido a que un administrador de base de datos no podría, por ejemplo, ver las claves de los usuarios.


Seguridad Web

Desarrollaremos ahora un formulario para el acceso de usuarios teniendo como supuesto que la tabla de usuarios se llama: “user”, y los campos donde están registrados los nombres de usuario y clave de acceso son: “user_nombre” y “user_clave” respectivamente. El script para este caso sería: Ejemplo 108: Script para acceso de usuarios acceso-md5.php <?php include "conexion.php"; //conexion a la BD //datos provenientes del formulario $usuario=$_POST[txtusuario]; $clave=$_POST[txtclave]; $clave_cifrada=md5($clave); $sql="select * from user where user_nombre='".$usuario."' and user_clave='".$clave_cifrada."'"; $rs=mysql_query($sql) or die(mysql_error()); //si existe un usuario con dichos datos if(mysql_num_rows($rs)==1) echo "Datos correctos"; else echo "Datos incorrectos"; ?> Con este script no sería suficiente para dar la seguridad adecuada a nuestra aplicación Web. A continuación veremos otro punto importante que debemos tomar en cuenta.


Seguridad Web

Inyección SQL Una consulta SQL no es una orden confiable a la que no se le debe prestar la atención debida, sino por el contrario es en la que más cuidado debemos tener puesto que a través de ella se puede burlar los controles de acceso a cualquier sistema Web e incluso permitir el acceso a comandos del sistema operativo. La Inyección de comandos SQL es una técnica utilizada para alterar comandos SQL definidos en una aplicación con la finalidad de mostrar datos, sobrescribirlos, eliminarlos o ejecutar órdenes que no fueron establecidas por el desarrollador. La manera de realizar las alteraciones es a través de los datos enviados por un usuario y su combinación con parámetros utilizados en las sentencias SQL. A continuación veremos ejemplos que nos ayudarán a ver estos casos con mayor detalle. Ejemplo 109: Inyección SQL en una sentencia SELECT <?php $sql="SELECT nombre, apellidos, direccion FROM cliente WHERE zona=’$zona’"; $result = mysql_query($sql); ?> En este ejemplo la variable $zona es enviada por el usuario. Utilizando la variable $zona enviaremos la siguiente cadena: ‘ union select * from usuario -- En la cadena podemos ver una comilla simple ( ‘ ) al inicio y doble guión ( -- ) al final. Si reemplazamos esta cadena en lugar de la variable $zona veremos que el resultado de la consulta mostrará todos los datos registrados en la tabla usuario. Utilizando como base el ejemplo anterior haremos inyección SQL en una página con un listado que utiliza hipervínculos para la paginación de resultados. Ejemplo 110: Paginación de resultados con Inyección SQL inyeccion01.php <?php include "mysqli-conexion.php"; //incluimos la conexion $cantidad=2; //numero de registros por pagina //verificamos si existe la variable


Seguridad Web

if(!isset($_GET[p])) $_GET[p]=0; //hallamos el total de registros $sql="select * from persona"; $rspersona=$mysqli->query($sql) or die($mysqli->error); $nr=$rspersona->num_rows; //paginación de resultados $sql="select idpersona,nombres,apellidos from persona limit " . $_GET[p] . ",$cantidad"; $rspersona=$mysqli->query($sql) or die($mysqli->error); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td> <td><?php echo "$registro->apellidos"?></td> <td><a href="mysqli-editar.php?idpersona=<?php echo "$registro->idpersona"?>">editar</a></td> <td><a href="mysqli-eliminar.php?idpersona=<?php echo "$registro->idpersona"?>">eliminar</a></td> </tr> <?php } ?> <tr><td colspan="5">Página: <?php for($i=1;$i<=ceil($nr/$cantidad);$i++) { $inicio=$cantidad*($i-1); echo "<a href='?p=$inicio'>$i</a> "; } ?> </td></tr> </table> <br> <a href="formulario08.html">Agregar Registro</a> <?php $rspersona->close(); //cerramos resultado de la consulta $mysqli->close(); //cerramos la conexión ?>


Seguridad Web


Resultado Web:

Figura 180. Resultado de inyeccion01.php

Ahora hagamos clic en la página 2. (Ver la dirección URL)

Figura 181. Nuevo resultado de inyeccion01.php

Podemos ver en la imagen anterior que se envía a la página una variable p con el número de registro con el que inicia la página que se va a mostrar. Ahora aprovecharemos esta variable para inyectar algunas cadenas SQL valiéndonos de la función urlencode() para generar las cadenas. Primero tendremos que hacer algunas suposiciones como por ejemplo que la base de datos es MySQL y que se esta usando la orden LIMIT para la paginación de resultados y que el inicio es la variable p y que a continuación habrá una coma y luego la cantidad de registros en la sentencia SQL en la que será reemplazado. Parte de la cadena sería: LIMIT (la variable p),(cantidad) entonces para terminar correctamente la cadena enviaremos junto con la variable p una coma y un número que será la cantidad de registros y luego insertaremos UNION select * from usuario Cadena a insertar: 0,2 union select * from usuario -- Aplicando urlencode tenemos: 0%2C2+union+select+%2A+from+usuario+--+ Esta cadena que hemos generado será el valor de p. Veremos que sucede:

Seguridad Web

Figura 182. Tercer resultado de inyeccion01.php

Nos aparece un mensaje que nos dice que la sentencia SELECT tiene diferente número de columnas (campos). Por ahora esto sólo nos dice que hemos podido inyectar una sentencia SELECT adicional pero nos queda saber el número de campos de la consulta del listado y luego hacer coincidir nuestro SELECT adicional con dicha cantidad. Ahora supondremos que la cantidad de campos que vemos en el listado es la cantidad del SELECT de la sentencia para el listado, ahora debemos probar agregando campos al SELECT inyectado. Agregaremos un campo al select inyectado. Cadena a insertar: 0,2 union select *,1 from usuario -- Aplicando urlencode: 0%2C2+union+select+%2A%2C1+from+usuario+--+ La cadena URL sería:

Figura 183. URL con inyección SQL

Ahora tenemos:

Figura 184. Resultado de la inyección SQL

Podemos decir que el número de campos coincidió y además el nombre de la tabla. Sabiendo ahora lo que puede ocurrir, debemos prevenir este tipo de ataque utilizando una función que se encargue de anular cualquier cadena que


Seguridad Web

pretenda inyectar SQL. Para el caso anterior debemos analizar y verificar que el valor de la variable p sea un número obligatoriamente, entonces añadimos la línea: if(!is_numeric($_GET[p])) $_GET[p]=0; is_numeric es una función que devuelve TRUE si el valor de la variable es numérico. En caso que no sea numérico le asignamos CERO, según la línea de código anterior. inyeccion02.php <?php include "mysqli-conexion.php"; //incluimos la conexion $cantidad=2; //numero de registros por pagina //verificamos si existe la variable if(!isset($_GET[p])) $_GET[p]=0; //hallamos el total de registros $sql="select * from persona"; $rspersona=$mysqli->query($sql) or die($mysqli->error); $nr=$rspersona->num_rows; //verificamos si es p tiene valor numérico if(!is_numeric($_GET[p])) $_GET[p]=0; //paginación de resultados $sql="select idpersona,nombres,apellidos from persona limit " . $_GET[p] . ",$cantidad"; $rspersona=$mysqli->query($sql) or die($mysqli->error); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td>


Seguridad Web

<td><?php echo "$registro->apellidos"?></td> <td><a href="mysqli-editar.php?idpersona=<?php echo "$registro->idpersona"?>">editar</a></td> <td><a href="mysqli-eliminar.php?idpersona=<?php echo "$registro->idpersona"?>">eliminar</a></td> </tr> <?php } ?> <tr><td colspan="5">Página: <?php for($i=1;$i<=ceil($nr/$cantidad);$i++) { $inicio=$cantidad*($i-1); echo "<a href='?p=$inicio'>$i</a> "; } ?></td></tr> </table> <br> <a href="formulario08.html">Agregar Registro</a> <?php $rspersona->close(); //cerramos resultado de la consulta $mysqli->close(); //cerramos la conexión ?> Con esta modificación ejecutaremos la misma URL:

Figura 185. Evitando la inyección SQL

Resultado Web:

Figura 186. Resultado sin inyección realizada

Podemos ver ahora que la inyección SQL se evitó exitosamente. Pero los listados no solamente pueden ser utilizados para la Inyección SQL sino que los formularios de acceso o logeo de usuarios quizá sean los más propensos a estos ataques. Para ver este caso más de cerca primero debemos tener tabla usuario, para este ejemplo consideremos dos campos


Seguridad Web

para esta tabla: login (nombre del usuario) y clave (password del usuario) y luego registramos algunos registros.

Figura 187. Tabla usuario

Ahora haremos un formulario para el acceso de usuarios. formulario09.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Acceso al sistema</title> </head> <body> <form id="form1" name="form1" method="post" action="inyeccion03.php"> <table width="50%" border="0" align="center"> <tr> <th colspan="2">Acceso al sistema</th> </tr> <tr> <td>Usuario</td> <td><input name="usuario" type="text" id="usuario" maxlength="20" /></td> </tr> <tr> <td>Password</td> <td><input name="passw" type="password" id="passw" maxlength="40" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Entrar" /> </th> </tr> </table> </form> </body> </html>


Seguridad Web

Resultado Web:


El formulario anterior envía los datos a una página llamada inyeccion03.php. Veamos ahora el archivo inyeccion03.php quien se encargará de controlar el acceso de los usuarios. inyeccion03.php <?php $sql="SELECT * from usuario WHERE login='" . $_POST[usuario] . "' and clave='" . $_POST[passw] . "'"; //imprimir sentencia SQL echo $sql; ?> Con el script anterior imprimiremos la sentencia SQL que se crea cuando enviamos los datos del formulario. Escribiremos dos datos de ejemplo y los enviaremos:


La cadena resultante es la concatenación de la sentencia SQL con los datos escritos en el formulario (user, passuser). Pero ahora veamos lo que se puede hacer para evitar un control correcto de los usuarios. Analicemos la siguiente orden:


Seguridad Web

SELECT * from usuario WHERE login='loquesea' AND password=’’ OR ‘’=’’ Si logramos generar una cadena como la anterior entonces no necesitaremos tener un nombre de usuario correcto ni su respectiva clave puesto que la condición (WHERE) siempre resultará verdadera y por lo tanto nos devolverá todos los registros de la tabla usuario. Pero para llegar a generar la última cadena debemos partir de la que suponemos se ha escrito en el script, en este caso la que está en nuestro archivo inyeccion03.php. Cadena inicial: $sql="SELECT * from usuario WHERE login='" . $_POST[usuario] . "' and clave='" . $_POST[passw] . "'"; Ahora a $_POST[usuario] le podemos dar cualquier valor, en este caso: loquesea y a $_POST[passw] le daremos el valor: ' OR ''=' , con estos valores resultaría: SELECT * from usuario WHERE login='loquesea' AND password=’’ OR ‘’=’’ Probemos esto en el navegador con nuestro formulario09.html

Figura 190. Logeo con inyección SQL

Podemos tener dos resultados según la configuración de las comillas mágicas gpc (Get/Post/Cookie) de PHP: Cuando magic_quotes se encuentra activo, todos los caracteres ' (comilla-simple), " (comilla doble), \ (barra invertida) y NULs son escapados con una barra invertida automáticamente como se ve a continuación y por lo tanto la inyección SQL no tendría éxito.

Figura 191. Nuevo resultado de inyeccion03.php


Seguridad Web

Pero si magic_quotes se encuentra inactivo tendremos el siguiente resultado:

Figura 192. Tercer resultado de inyeccion03.php

En este resultado podemos ver que la inyección si se ejecutaría exitosamente y el atacante podría ingresar al sistema sin un nombre de usuario ni password válido. Podemos utilizar la función: get_magic_quotes_gpc la cual devuelve 0 si las comillas mágicas están deshabilitadas, 1 de lo contrario para hacer la verificación en tiempo de ejecución y la función addslashes. Con el formulario 10 probaremos un nuevo script que utilice estas dos últimas funciones, el formulario 10 solo varía en el valor del atributo action de la etiqueta form. formulario10.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Acceso al sistema</title> </head> <body> <form id="form1" name="form1" method="post" action="comillas-magicas.php"> <table width="50%" border="0" align="center"> <tr> <th colspan="2">Acceso al sistema</th> </tr> <tr> <td>Usuario</td> <td><input name="usuario" type="text" id="usuario" maxlength="20" /></td> </tr> <tr> <td>Password</td> <td><input name="passw" type="password" id="passw" maxlength="40" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Entrar" /> </th>


Seguridad Web

</tr> </table> </form> </body> </html> Una vez cargado el formulario, ingresamos los datos de prueba. Resultado Web:


Ejemplo 111: get_magic_quotes_gpc y addslashes comillas-magicas.php <?php if (!get_magic_quotes_gpc()) { $password = addslashes($_POST['passw']); } else { $password = $_POST['passw']; } $sql="SELECT * from usuario WHERE login='" . $_POST[usuario] . "' and clave='" . $password . "'"; //imprimir sentencia SQL echo $sql; ?> Veamos ahora el resultado:

Figura 194. Resultado de comillas-magicas.php


Seguridad Web

Podemos notar que se le agrega un \ (slash) a cada comilla, sin importar la configuración de las comillas mágicas, el script anterior no ayudaría a evitar la inyección SQL. Con este script mejoramos el control del acceso a usuarios, pero cabe resaltar una función creada para evitar este tipo de inyecciones SQL en servidores MySQL, llamada: mysqli_real_escape_string (programación orientada a objetos) o mysql_real_escape_string (programación procedimental). Veamos un ejemplo con estilo orientado a objetos: Ejemplo 112: mysqli_real_escape_string formulario11.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Acceso al sistema</title> </head> <body> <form id="form1" name="form1" method="post" action="inyeccion04.php"> <table width="50%" border="0" align="center"> <tr> <th colspan="2">Acceso al sistema</th></tr> <tr> <td>Usuario</td> <td><input name="usuario" type="text" id="usuario" maxlength="20" /></td> </tr> <tr> <td>Password</td> <td><input name="passw" type="password" id="passw" maxlength="40" /></td> </tr> <tr> <th colspan="2"><input name="Submit" type="submit" class="boton" value="Entrar" /> </th> </tr> </table> </form> </body> </html> inyeccion04.php <?php //incluimos la conexion include "mysqli-conexion.php"; $usuario =$mysqli->real_escape_string($_POST['usuario']); $password=$mysqli->real_escape_string($_POST['passw']); $sql="SELECT * from usuario WHERE login='$usuario' and clave='$password'"; //imprimir sentencia SQL


Seguridad Web

echo $sql; ?> Resultado Web:


Notamos que el control de la inyección SQL resultó exitoso con la función o método real_escape_string el cual protege de caracteres especiales en una cadena para ser usada en una sentencia SQL, tomando en cuenta el conjunto de caracteres para la conexión.


Seguridad Web

Sesiones Las sesiones en PHP son un mecanismo para preservar datos a lo largo de varios accesos lo que permite construir aplicaciones Web más personalizadas. A cada visitante que accede a su Web se le asigna un identificador único, llamado "session id" (identificador de sesión). Éste se almacena en una cookie por parte del usuario o se propaga en la URL. Las Cookies sirven para almacenar datos en el navegador del usuario. Se pueden poner cookies usando la función setcookie(). Las Cookies son parte de la cabecera HTTP, por tanto la función setcookie() debe ser llamada antes de que se produzca cualquier salida al navegador. El soporte de las sesiones le permite registrar un número arbitrario de variables que se conservarán en las siguientes peticiones. Cuando un visitante acceda a su Web, PHP comprobará automáticamente (si session.auto_start está puesto a 1) o cuando usted lo especifique (de forma explícita mediante session_start() o implícita a través de session_register()) si se le ha enviado un "session id" específico con su petición, en cuyo caso se recrean las variables que se habían guardado anteriormente. Todas las variables registradas son almacenadas tras finalizar la petición. Las variables que están indefinidas se marcan como no definidas. En los subsiguientes accesos, no estarán definidas por el módulo de sesiones a menos que el usuario las defina más tarde. Las opciones de configuración track_vars y register_globals influyen notablemente en la forma en que las variables de la sesión se almacenan y restauran. A partir de PHP 4.0.3, track_vars siempre está activado. A partir de PHP 4.1.0, $_SESSION está disponible como variable global, al igual que $_POST, $_GET, $_REQUEST y demás. Al contrario que $HTTP_SESSION_VARS, $_SESSION siempre es global. Por tanto, no se debe usar global para $_SESSION. Si track_vars está activado y register_globals está desactivado, sólo los miembros del vector asociativo global $HTTP_SESSION_VARS pueden ser registrados como variables de la sesión. Las variables restauradas de la sesión sólo estarán disponibles en el vector $HTTP_SESSION_VARS. Se recomienda usar $_SESSION (o $HTTP_SESSION_VARS con PHP 4.0.6 o inferior) por seguridad y para hacer el código más legible. Con $_SESSION o $HTTP_SESSION_VARS, no es necesario usar las funciones session_register() / session_unregister() / session_is_registered(). Los usuarios pueden acceder a una variable de la sesión como si se tratase de una variable normal. Si register_globals está activado, todas las variables globales pueden ser registradas como variables de la sesión, y las variables de la sesión serán restauradas a sus correspondientes variables globales. Como PHP debe


Seguridad Web

saber qué variables globales están registradas como variables de la sesión, los usuarios deben registrar las variables con la función session_register(), mientras que con $HTTP_SESSION_VARS/$_SESSION no es necesario usar session_register(). Si está usando $HTTP_SESSION_VARS/$_SESSION y desactiva register_globals, no use session_register(), session_is_registered() ni session_unregister(). Se recomienda desactivar register_globals por motivos de seguridad y rendimiento. Ejemplo 113: Ingreso de un usuario a la aplicación ingreso01.php <form action="verifica01.php" method="post"> <table width="70%" border="0" cellspacing="1" cellpadding="2" align="center"> <caption> Acceso al sistema </caption> <tr> <td>Usuario</td> <td><input type="text" name="txtusuario" id="txtusuario" maxlength="20"> </td> </tr> <tr> <td>Password</td> <td><input name="txtclave" type="password" id="txtclave" maxlength="50"></td> </tr> <?php if($_GET['error']==1) { ?> <tr><td colspan="2">Datos Incorrectos</td></tr> <?php } ?> <tr> <th colspan="2"><input type="submit" name="Submit" value="Entrar"></th> </tr> </table> </form> <?php echo "Su dirección IP es: ".$_SERVER['REMOTE_ADDR']; ?> <br> <?php echo "Navegador: ".$_SERVER['HTTP_USER_AGENT']; ?>


Seguridad Web

<br> <?php echo "Idioma: ".$_SERVER['HTTP_ACCEPT_LANGUAGE']; ?> Resultado Web:

Figura 196. Resultado de ingreso01.php

Ejemplo 114: Verifica datos del usuario verifica01.php <?php include "mysqli-conexion.php"; //incluimos la conexion //Proteger de caracteres especiales a la sentencia SQL $usuario =$mysqli->real_escape_string($_POST['txtusuario']); $clave =$mysqli->real_escape_string($_POST['txtclave']); //ciframos la clave escrita por el usuario para compararla en la BD $clave=md5($clave); //sentencia sql $sql="select * from usuario where login='$usuario' and clave='$clave'"; //ejecutamos la consulta $rsusuario=$mysqli->query($sql) or die($mysqli->error); if($rsusuario->num_rows==1) { //datos correctos $reg=$rsusuario->fetch_object(); session_start(); $_SESSION['idusuario']=$reg->idusuario; $_SESSION['usuario']=$reg->usuario;


Seguridad Web

$_SESSION['tipo']=$reg->tipo; } else header("location: ingreso01.php?error=1"); ?> Probamos con datos incorrectos.

Figura 197. Ingreso01.php con datos incorrectos

Figura 198. Logeo incorrecto

La aplicación nos devuelve un mensaje de “Datos Incorrectos”.


Seguridad Web

Autentificación HTTP con PHP Las características de autentificación HTTP en PHP solo están disponibles cuando se está ejecutando como un módulo en Apache y hasta ahora no lo están en la versión CGI. En un script PHP como módulo de Apache, se puede usar la función header() para enviar un mensaje de "Autentificación requerida" al navegador cliente haciendo que muestre una ventana de entrada emergente con nombre de usuario y contraseña. Una vez que el usuario ha rellenado el nombre y la contraseña, la URL que contiene el script PHP será llamada de nuevo con las variables predefinidas PHP_AUTH_USER, PHP_AUTH_PW, y AUTH_TYPE asignadas con el nombre de usuario, la contraseña y el tipo de autentificación respectivamente. Estas variables predefinidas se pueden encontrar en las matrices $_SERVER y $HTTP_SERVER_VARS. Sólo autentificación "Básica" está soportada en este momento. Ejemplo 115: Autenticación HTTP auth01.php <?php if (!isset($_SERVER['PHP_AUTH_USER'])) { header('WWW-Authenticate: Basic realm="Sistema Web"'); header('HTTP/1.0 401 Unauthorized'); echo 'Operación cancelada'; exit; } else { echo "<p>Bienvenido {$_SERVER['PHP_AUTH_USER']}.</p>"; echo "<p>Acceso al sistema con password: {$_SERVER['PHP_AUTH_PW']}.</p>"; } ?> Resultado Web:

Figura 199. Autenticación http con PHP


Seguridad Web

Si cancelamos la operación tenemos el siguiente resultado en el navegador, según lo establecido en el código.

Figura 200. Resultado de auth01.php

Si ingresamos datos y presionamos Aceptar tendremos:

Figura 201. Autenticación con datos correctos

Figura 202. Resultado de auth01.php con datos correctos


Seguridad Web

Login Ahora que ya tenemos el script de autenticación de usuarios, desarrollaremos el script para verificar el nombre de usuario y contraseña en la base de datos. Utilizaremos una tabla usuario, con campos que contengan el nombre y contraseña del usuario.

Figura 203. Tabla usuario

Script sql: CREATE TABLE ùsuario` ( ìdusuario` int(11) NOT NULL auto_increment, `login` varchar(10) collate latin1_spanish_ci NOT NULL, `clave` varchar(32) collate latin1_spanish_ci NOT NULL, PRIMARY KEY (ìdusuario`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=1; Una vez implementada la base de datos ingresaremos algunos registros para los casos de prueba necesarios para probar el script que desarrollaremos.

Figura 204. registro de un usuario


Seguridad Web

Como podemos observar en la figura anterior, para ingresar un nuevo registro debemos aplicar la función md5 a la contraseña del usuario. Ahora desarrollaremos el script de logeo de usuarios. Para ello podremos usar como mecanismo de ingreso de datos el script de autenticación desarrollado en el tema anterior o usar un formulario HTML como el siguiente: Ejemplo 116: Formulario para el logeo de usuarios entrar.php <HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY> <form name="form1" action="logeo.php" method="post"> <table align="center" width="50%"> <tr><th colspan="2">Ingreso al sistema</th></tr> <tr><td>Usuario</td> <td><input type="text" name="txtusuario"></td></tr> <tr><td>Password</td> <td><input type="password" name="txtclave"></td></tr> <tr><th colspan="2"><input type="submit" value="Entrar"></th></tr> </table> <?php if($_GET['error']==1) echo "Datos Incorrectos"; if($_GET['error']==2) echo "Debe logearse"; ?> </form> </BODY> </HTML> Resultado Web:

Figura 205. Resultado de entrar.php


Seguridad Web

Ejemplo 117: Logeo de usuarios logeo.php <?php include "mysqli-conexion.php"; $usuario=$mysqli->real_escape_string($_POST['txtusuario']); $clave=md5($_POST['txtclave']); $sql="select * from usuario where login='$usuario' and clave='$clave'"; $rsusuario=$mysqli->query($sql) or die($mysqli->error); if($rsusuario->num_rows==1) { $registro=$rsusuario->fetch_object(); session_start(); $_SESSION['sidusuario']= $registro->idusuario; $_SESSION['susuario']= $usuario; header("location: mysqli-listado-logeado.php"); } else header("location: entrar.php?error=1"); ?> En este script utilizamos el método real_escape_string. Esta función es usada para crear una cadena SQL sin inyección SQL. Los caracteres codificados son NULL (ASCII 0), \n, \r, \, ', ", y Control-Z. Además usamos la función md5 para cifrar la clave escrita en el formulario y compararla con la cadena cifrada guardada en la base de datos. Si el número de registros es 1 (uno), significa que los datos son correctos y pertenecen a uno y solo un usuario (no pueden haber varios usuarios con el mismo nombre). Por lo que debemos iniciar una sesión utilizando la función session_start. El apoyo que PHP proporciona para las sesiones consiste en una forma de conservar ciertos datos a lo largo de los subsiguientes accesos, lo cual le permite construir aplicaciones más personalizadas e incrementar el atractivo de su sitio Web. Utilizaremos también, al array $_SESSION[] para registrar las variables de sesión de nuestra aplicación, en este caso específico, para registrar el identificador del usuario (idusuario) y su nombre de usuario (usuario). A partir de PHP 4.1.0, $_SESSION está disponible como variable global, al igual que $_POST, $_GET, $_REQUEST y demás. Al contrario que $HTTP_SESSION_VARS, $_SESSION siempre es global. Por tanto, no se debe usar global para $_SESSION. Cuando los datos ingresados son incorrectos, retornará a la página inicial, de lo contrario el script redirecciona el navegador hacia el listado de personas (archivo: mysqli-listado.php), el cual, tiene dos nuevas líneas de código con respecto al ejemplo 76.


Seguridad Web

Resultado Web cuando los datos son incorrectos

Figura 206. Resultado de entrar.php con datos incorrectos

Si alguien quisiera ingresar a nuestro listado sin logearse podría escribir directamente la dirección de la página y lo podría hacer, pero ahora que hemos iniciado una sesión y hemos registrado algunas variables podremos controlar dicha acción y obligar a los usuarios a logearse antes de acceder a ciertas páginas. Veamos a continuación cuál sería la lógica del script. Ejemplo 118: Verifica si el usuario se ha logeado mysqli-listado-logeado.php <?php session_start(); if(!isset($_SESSION['sidusuario'])) header("location: entrar.php?error=2"); include "mysqli-conexion.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); echo "Usuario:" . $_SESSION['susuario']; ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>Editar</th> <th>Eliminar</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td> <td><?php echo "$registro->apellidos"?></td>


Seguridad Web

<td><a href="mysqli-editar.php?idpersona=<?php echo "$registro->idpersona"?>">editar</a></td> <td><a href="mysqli-eliminar.php?idpersona=<?php echo "$registro->idpersona"?>">eliminar</a></td> </tr> <?php } $rspersona->close(); //cerramos resultado de la consulta $mysqli->close(); //cerr=amos la conexión ?> </table> <br> <a href="formulario08.html">Agregar Registro</a> Resultado Web:

Figura 207. Resultado de mysqli-listadologeado.php

En este script al iniciar la sesión (session_start()) podremos acceder a todas las variables de sesión y eso nos permitirá verificar si el usuario se ha logeado y lo haremos comprobando si existe la variable de sesión que se registra en el archivo logeo.php cuando los datos son correctos. En adelante, a toda página en la que el usuario haya tenido que identificarse se le debe insertar las primeras líneas escritas en el script. session_start(); if(!isset($_SESSION['sidusuario'])) header("location: entrar.php?error=2");


Seguridad Web

CAPTCHA Este nombre proviene del acrónimo de: Completely Automatic Public Turing Test to Tell Computers and Humans Apart, que traducido al español significa: Prueba de Turing pública y automática para diferenciar a máquinas y humanos. Se trata de una prueba desafío-respuesta utilizada en computación para determinar cuándo el usuario es o no humano. El término se empezó a utilizar en el año 2000 por Luis von Ahn, Manuel Blum y Nicholas J. Hopper de la Carnegie Mellon University, y John Langford de IBM. La típica prueba consiste en que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta por lo que solamente el humano podría hacerlo. Como el test es controlado por una máquina en lugar de un humano como en la Prueba de Turing, también se denomina Prueba de Turing Inversa. Los CAPTCHAs son utilizados para evitar que robots, también llamados spambots, puedan utilizar ciertos servicios. Por ejemplo, para que no puedan participar en encuestas, registrarse para usar cuentas de correo electrónico (o su uso para envío de correo basura) o, más recientemente, para evitar que correo basura pueda ser enviado por un robot (el remitente debe pasar el test antes de que se entregue al destinatario). [8] El sistema CAPTCHA tiene las siguientes características por definición:

• Son completamente automatizados, es decir, no es necesario ningún tipo de mantenimiento / intervención humana para su realización. Esto supone grandes beneficios en cuanto a fiabilidad y coste.

• El algoritmo utilizado es público. De esta forma la ruptura de un captcha pasa a ser un problema de inteligencia artificial y no la ruptura de un algoritmo secreto.

A continuación construiremos con PHP un CAPTCHA. El primer paso es diseñar y programar el formulario en el que aparecerá nuestro CAPTCHA: Ejemplo 119: Formulario CAPTCHA form-catcha.php <?php session_start(); if(isset($_POST["palabra"])) { if($_POST["palabra"] == $_SESSION["oculto"]) die("¡Felicidades! Ha leído correctamente la palabra."); else


Seguridad Web

die("No has adivinado la palabra. Prueba otra vez"); } else { ?> <form method="post" action=""> <img src="capu-captcha.php"> <input type="text" name="palabra"> <input type="submit" value="Comprobar"> </form> <?php } ?> Ejemplo 120: Generador CAPTCHA capu-captcha.php <?php session_start(); // estas cabeceras evitan que se almacene la imagen en el caché header ("Expires: Sat, 12 Jul 2008 09:00:00 GMT"); header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header ("Cache-Control: no-store, no-cache, must-revalidate"); header ("Cache-Control: post-check=0, pre-check=0", false); header ("Pragma: no-cache"); // creamos la imagen con el tamaño determinado $imagen = imagecreate(250, 100); // elegimos los colores para el fondo y el texto $rojo = mt_rand(150,200); $verde = mt_rand(150,200); $azul = mt_rand(200,250); $rojo_fondo = mt_rand(80,120); $verde_fondo = mt_rand(80,120); $azul_fondo = mt_rand(80,200); $rojo_basura = $rojo+55; $verde_basura = $verde+55; $azul_basura = $azul+5; $color_texto = imagecolorallocate($imagen,$rojo,$verde,$azul); $color_fondo = imagecolorallocate($imagen,$rojo_fondo,$verde_fondo,$azul_fondo); $color_basura = imagecolorallocate($imagen,$rojo_basura,$verde_basura,$azul_basura); //aplicamos el color de fondo imagefill($imagen,0, 0, $color_fondo); // construimos la palabra $caracteres = "ABCDEFGHJKMNPRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";


Seguridad Web

//indicar la cantidad de caracteres que tendrá la palabra del CAPTCHA $cantidad=6; for($i=1;$i<=$cantidad;$i++) { $pos = mt_rand(0,strlen($caracteres)-1); $palabra.= substr($caracteres,$pos,1); } // comprobamos la existencia de la función ImageTTFText() $fontsList = array( "./fonts/VeraMoBd.ttf", "./fonts/VeraMoBI.ttf", "./fonts/VeraMono.ttf", "./fonts/VeraMoIt.ttf" ); $randFontNo = mt_rand(0, sizeof($fontsList)-1); $randFontPath = realpath($fontsList[ $randFontNo ]); // al azar las señales al fondo del respectivo texto ImageTTFText for($i=1;$i<20;$i++){ $x = mt_rand(0, 250); // pos x $y = mt_rand(0, 100); // pos y $car = chr(mt_rand(45, 250)); //caracter aleatorio $angulo = mt_rand(3,180); imagettftext($imagen, 12, $angulo, $x, $y, $color_basura, $randFontPath, $car); } // imprimir la palabra $x = mt_rand(10,120); $y = mt_rand(40,65); imagettftext($imagen, 28, mt_rand(-10,10), $x, $y, $color_texto, $randFontPath, $palabra); //ensuciamos la imagen con líneas for($i=1;$i<60;$i++){ $x = mt_rand(0, 250); $y = mt_rand(0, 100); imageline($imagen, $x, $y, $x+mt_rand(-40,40), $y+mt_rand(-40,40), $color_basura); } // enviamos mediante la sesión la palabra elegida $_SESSION["oculto"] = $palabra; // enviamos la cabecera correspondiente al navegador y luego la imagen header("Content-type: image/png"); imagepng($imagen); // eliminamos la imagen imagedestroy($imagen); ?>


Seguridad Web

Resultados Web: Podemos ver a continuación varios ejemplos de los CAPTCHAs generados.

Figura 208. Ejemplo1 de CAPTCHA




Generación de archivos con PHP

VIII. Generación de archivos con PHP Imágenes PHP tiene un conjunto de funciones destinadas a la manipulación de imágenes en varios formatos, utilizando la librería GD, debido a esto debemos verificar si el módulo está instalado y activado. Para hacer esto vamos a la “Configuración de PHP” en el menú de WAMP y luego seleccionamos “Extensiones de PHP” y luego seleccionamos la librería php_gd2 para activarla. Ejemplo 121: Ver configuración GD gdinfo.php <?php var_dump(gd_info()); ?> Resultado Web:

Figura 211. Resultado de gdinfo.php

Ejemplo 122: Mi primera imagen imagen01.php <?php $im = imagecreate(100, 50); $color_fondo = imagecolorallocate($im, 255, 55, 55); $color_texto = imagecolorallocate($im, 233, 214, 51); imagestring($im, 2, 5, 5, "Texto de prueba", $color_texto); header("Content-type: image/png"); imagepng($im); imagedestroy($im); ?>



La función imagecreate crea una nueva imagen con una paleta de colores y sus parámetros son para especificar el ancho y el alto de la imagen en pixeles. La función imagecolorallocate reserva un color para ser usado en la imagen en los últimos tres parámetros se indica los valores de Rojo, Verde y Azul, de dicha mezcla resultará un color el cual será almacenado en una variable. La función imagestring dibuja una cadena de texto horizontalmente. El primer parámetro indica la imagen sobre la que se insertará el texto; el segundo es el tipo de fuente; el tercero y cuarto indican las coordenadas en la que se ubicará el texto; el quinto parámetro es la cadena de texto y el último es el color del texto. Resultado Web:

Figura 212. Resultado de imagen01.php

Ejemplo 123: Rectángulo y texto imagen02.php <?php $image = imagecreate(180,90); $bg=imagecolorallocate($image,250,250,50); $color1=imagecolorallocate($image,250,50,50); $color2=imagecolorallocate($image,50,250,250); imagefilledrectangle($image,5,5,150,60,$color2); imagestring($image, 5, 10, 18, 'Un rectangulo',$color1); header('Content-Type: image/jpeg'); imagejpeg($image); ?> Resultado Web:




Ejemplo 124: Gráfico de barras imagen03.php <?php header("Content-type: image/jpeg"); $img=imagecreate(500,500); $color_azul=imagecolorallocate($img,50,50,255); $color_amarillo=imagecolorallocate($img,255,255,0); $verde=imagecolorallocate($img,0,255,0); imageline($img,50,50,50,450,$color_amarillo); imageline($img,50,450,450,450,$color_amarillo); imagefilledrectangle($img,100,350,150,450,$verde); imagefilledrectangle($img,200,250,250,450,$verde); imagefilledrectangle($img,300,150,350,450,$verde); imagefilledrectangle($img,400,50,450,450,$verde); imagestring($img,4,220,30,"Grafico Ejemplo",$color_amarillo); imagejpeg($img); imagedestroy($img); ?> Resultado Web:




Ejemplo 125: Pie imagen04.php <?php header("Content-type: image/jpeg"); $img=imagecreate(400,400); $fondo=imagecolorallocate($img,225,225,225); $azul=imagecolorallocate($img,50,50,255); $azul2=imagecolorallocate($img,0,0,100); $amarillo=imagecolorallocate($img,255,255,0); $amarillo2=imagecolorallocate($img,100,100,0); $verde=imagecolorallocate($img,0,255,0); $rojo=imagecolorallocate($img,255,0,0); $ancho=300; $alto=180; $altura=40; for($i=1;$i<=$altura;$i++) {

imagefilledarc($img,200,200+$i,$ancho,$alto,0,36,$azul2,2); imagefilledarc($img,200,200+$i,$ancho,$alto,36,108,$amarillo2,2); imagefilledarc($img,200,200+$i,$ancho,$alto,108,216,$azul2,2);

} imagefilledarc($img,200,200,$ancho,$alto,0,36,$azul,0); imagefilledarc($img,200,200,$ancho,$alto,36,108,$amarillo,0); imagefilledarc($img,200,200,$ancho,$alto,108,216,$azul,0); imagefilledarc($img,200,200,$ancho,$alto,216,360,$amarillo,0); imagejpeg($img); imagedestroy($img); ?> Resultado Web:




imagen05.php <?php $aleatorio = rand(1,8); for($i=0;$i<=$aleatorio;$i++){$datos[$i]=rand(2,50);};//llenamos el array de datos. $ancho='600';$alto='400';//ancho y alto de la imagen $cx = '300';$cy ='150'; //coordenadas de la figura $sx = '600';$sy='300';$sz ='100';// dimensiones X,Y,Z $datos_sum = array_sum($datos); //angulos for($i=0;$i<=$aleatorio;$i++){ $angulo[$i] = (($datos[$i] / $datos_sum) * 360); $angulo_sum[$i] = array_sum($angulo); }; $im = imagecreate ($ancho,$alto); $fondo = imagecolorallocate($im, 255, 255, 255); //colores aleatorios for($i=0;$i<=$aleatorio;$i++){ $r=rand(50,255);$g=rand(50,255);$b=rand(50,255); $colors[$i] = imagecolorallocate($im,$r,$g,$b); $colord[$i] = imagecolorallocate($im,($r/1.5),($g/1.5),($b/1.5)); } for($z=1;$z<=$sz;$z++){ imagefilledarc($im,$cx,($cy+$sz)-$z,$sx,$sy,0,$angulo_sum[0],$colord[0],IMG_ARC_EDGED); for($i=1;$i<=$aleatorio;$i++){ imagefilledarc($im,$cx,($cy+$sz)-$z,$sx,$sy,$angulo_sum[$i-1],$angulo_sum[$i],$colord[$i],IMG_ARC_NOFILL); } } imagefilledarc($im,$cx,$cy,$sx,$sy,0 ,$angulo_sum[0], $colors[0], IMG_ARC_PIE); for($i=1;$i<=$aleatorio;$i++){ imagefilledarc($im,$cx,$cy,$sx,$sy,$angulo_sum[$i-1] ,$angulo_sum[$i], $colors[$i], IMG_ARC_PIE); } header('Content-type: image/png'); imagepng($im); imagedestroy($im); ?> La función rand tiene dos parámetros opcionales que sirven para especificar el valor mínimo y máximo del número aleatorio que se quiere obtener.



Resultado Web:


Para dibujar un círculo hay que utilizar la función imagearc la cual dibuja una elipse parcial centrada en x, y (2do y 3er parámetro) en la imagen $img (ver ejemplo acontinuación), luego se especifican la anchura y altura respectivamente mientras que los puntos de inicio y final vienen indicados por los parámetros 6to y 7mo en grados. 0° se corresponde con la posición de las 3 en punto en un reloj y el arco se dibuja en el sentido de las agujas del reloj. Ejemplo 126: Círculo imagen06.php <?php // crear una imagen de 200*200 $img = imagecreate(200, 200); // definir los colores $white = imagecolorallocate($img, 255, 255, 255); $black = imagecolorallocate($img, 0, 0, 0); // dibujar un circulo negro imagearc($img, 100, 100, 150, 150, 0, 360, $black);



// mostrar la imagen en el navegador header("Content-type: image/png"); imagepng($img); // liberar la memoria imagedestroy($img); ?> Resultado Web:




Archivos PDF Las funciones PDF en PHP pueden crear archivos PDF utilizando la biblioteca PDFlib. Esta biblioteca está disponible para descargar en http://www.pdflib.com/products/pdflib-family/, pero requiere la compra de una licencia para uso comercial. Debido a que la licencia de PDFLib tiene limitaciones para su uso comercial, en este libro veremos el uso de una clase que tiene el mismo fin, su nombre es: FPDF.

FPDF FPDF es una clase escrita en PHP que permite generar documentos PDF directamente desde PHP, es decir, sin usar la biblioteca PDFlib. FPDF es freeware. No hay limitaciones de uso. Puede usarlo libre y gratuitamente en su aplicación comercial o no, con o sin modificaciones. Entre las ventajas más resaltantes de FPDF tenemos: funciones de alto nivel. Esta es una lista de sus principales características:

• Elección de la unidad de medida, formato de página y márgenes • Gestión de cabeceras y pies de página • Salto de página automático • Salto de línea y justificación del texto automáticos • Admisión de imágenes (JPEG y PNG) • Colores • Enlaces • Admisión de fuentes TrueType, Type1 y codificación • Compresión de página

FPDF no necesita de ninguna extensión para PHP (excepto la biblioteca zlib si se va a activar la opción de compresión) y funciona con PHP4 y PHP5. La clase genera documentos en muchos otros idiomas aparte de los europeos occidentales: europeo central, ciríloco, griego, báltico y tailandés, si se dispone de fuentes TrueType o Type1 con el conjunto de caracteres adecuado. El chino y el japonés también están admitidos. La velocidad de generación de un documento es menor que con PDFlib. Sin embargo, la desventaja en cuanto a rendimiento es muy razonable y se adecua a la mayoría de los casos, a no ser que sus documentos vayan a ser especialmente complejos o extensos. Para usar FPDF copiaremos el archivo fpdf.php que contiene todo lo necesario para la creación de nuestros archivos PDF. Luego crearemos un subdirectorio llamado font en donde copiaremos algunos archivos de fuentes que utilizaremos posteriormente. Veamos un ejemplo:



Ejemplo 127: FPDF pdf01.php <?php define('FPDF_FONTPATH','font/'); //directorio de las fuentes require('fpdf.php'); //llamamos a la clase FPDF $pdf=new FPDF(); //instanciamos la clase $pdf->AddPage(); //agregamos la primera página $pdf->SetFont('Courier','',16);//establecemos la fuente y sus atributos $pdf->cell(10); //celda de 10mm de ancho //celda de 0 ancho y 10mm de alto $pdf->Cell(0,10,'Esta es una prueba FPDF',0,1); $pdf->Output(); ?> Resultado Web:

Figura 218. Resultado de pdf01.php

A continuación presento una lista de las propiedades y métodos que vienen implementados en FPDF. AcceptPageBreak - acepta o no un salto de página automático AddFont - adiciona una nueva fuente AddLink - crea una referencia interna AddPage - adiciona una nueva página AliasNbPages - define un alias para el número de páginas Cell - imprime una celda Close - termina el documento Error - error fatal Footer - Pie de página FPDF - constructor GetStringWidth - calcula la longitud de la cadena GetX - obtiene la posición actual de x GetY - obtiene la posición actual de y Header - cabecera de página Image - imprime una imagen Line - dibuja una línea Link - crea una referencia Ln - salto de línea



MultiCell - imprime texto con saltos de línea Open - crea un documento Output - guarda o envía el documento PageNo - número de página Rect - dibuja un rectángulo SetAuthor - Establece el autor del documento SetAutoPageBreak - establece el modo de salto de página automático SetCompression - cambia la compresión en activo o inactivo SetCreator - establece el creador del documento SetDisplayMode - establece el modo de presentación SetDrawColor - establece el color de graficación SetFillColor - establece el color de relleno SetFont - establece la fuente SetFontSize - establece el tamaño de la fuente SetKeywords - asocia las palabras claves con el documento SetLeftMargin - establece el margen izquierdo SetLineWidth - establece el ancho de la línea SetLink - establece el enlace de destino SetMargins - establece los márgenes SetRightMargin - establece el margen derecho SetSubject - establece el tema del documento SetTextColor - establece el color del texto SetTitle - establece el título del documento SetTopMargin - Establece el margen superior SetX - Establece la posición actual de X SetXY - Establece la posición actual de X e Y SetY - Establece la posición actual de Y Text - imprime una cadena Write - imprime el siguiente texto Ya que Cell es uno de los métodos más usados de la clase veremos con más detalle los parámetros que se pueden utilizar. Sintaxis: Cell(float w [, float h [, string txt [, mixed border [, int ln [, string align [, int fill [, mixed link]]]]]]]) Descripción Imprime una celda (de área rectangular) bordes opcionales, color de fondo y secuencia de carácteres La esquina superir izquierda de la celda corresponde a la posición actual. El texto puede ser alineado o centrado. Después de invocar, la posición actual se desplaza a la derecha o la siguiente línea. Es posible poner una referencia en el texto. Si esta el salto de página automático habilitado y la celda esta por fuera del límite, es realizado un salto de página antes de producir la salida. Parámetros w : Ancho de Celda. Si es 0, la celda se extiende hasta la márgen derecha. h : Alto de celda. Valor por defecto: 0.



txt : Cadena a ser impresa. Valor por defecto: cadena vacia. border : Indica si los bordes deben se dibujados alrededor de la celda. El valor puede ser un número: 0 -> sin borde , 1 -> marco o una cadena conteniendo alguno o todos de los siguientes caracteres (en cualquier orden): * L: izquierda * T: superior * R: derecha * B: inferior Valor por defecto: 0. ln : Indica donde la posición actual debería ir antes de invocar. Los valores posibles son: * 0: a la derecha * 1: al comienzo de la siguiente línea * 2: debajo Poner 1 es equivalente a poner 0 y llamar justo después Ln(). Valor por defecto: 0. align : Permite centrar o alinear el texto. Los posibles valores son: * L o una cadena vacia: alineación izquierda (valor por defecto) * C: centro * R: alineación derecha fill : Indica si el fondo de la celda debe ser dibujada (1) o transparente (0). Valor por defecto: 0. link : URL o identificador retornado por AddLink(). Veamos un segundo ejemplo. Ejemplo 128: PDF con salto de página <?php define('FPDF_FONTPATH','font/'); //directorio de las fuentes include('fpdf.php'); $pdf=new FPDF(); $pdf->AddPage(); $pdf->SetFont('Arial','B',16); $pdf->Cell(180,10,'GENERANDO PDFs CON FPDF',0,1,'C');



$pdf->Ln(); $pdf->Ln(); $pdf->SetFont('Arial','',9); $pdf->MultiCell(180,5,'La clase FPDF esta escrita en PHP y permite generar documentos PDF directamente desde PHP, sin usar la biblioteca PDFLib, la ventaja es que, mientras que PDFLib tiene un costo para su uso comercial, FPDF es libre',0,1); $pdf->Cell(180,3,date("d/m/Y"),0,1,'R'); $pdf->Cell(180,3,date("H:i:s"),0,1,'R'); $pdf->AddPage(); $pdf->MultiCell(180,5,'Este texto aparecerá en la segunda página',0,1); $pdf->Output(); ?> Resultado Web:


Segunda página

Figura 220. Segunda página de pdf01.php



Ejemplo 129: PDF con capítulos pdf03.php <?php define('FPDF_FONTPATH','font/'); require('fpdf.php'); //extensión de la clase FPDF //extiende los métodos de encabezado (header) y pie de página (footer) class PDF extends FPDF { //Columna actual var $col=0; //Ordenada de comienzo de la columna var $y0; //personalizamos el encabezado function Header() { global $title; $this->SetFont('Arial','B',15); $this->SetX(30);//(210-$w)/2); $this->SetDrawColor(20,20,200); $this->SetFillColor(255,255,180); $this->SetTextColor(80,80,255); $this->SetLineWidth(1); $this->Cell(0,10,$title,1,1,'C',1); //imagen que aparecerá en el encabezado $this->Image('imagenes/correo.jpg',11,10,16); $this->Ln(10); //Guardar ordenada $this->y0=$this->GetY(); } //personalizamos el pie de página function Footer() { $this->SetY(-15); $this->SetFont('Arial','I',8); $this->SetTextColor(128); $this->Cell(0,10,'Página '.$this->PageNo(),0,0,'C'); }



function SetCol($col) { //Establecer la posición de una columna dada $this->col=$col; $x=10+$col*65; $this->SetLeftMargin($x); $this->SetX($x); } function AcceptPageBreak() { //Método que acepta o no el salto automático de página if($this->col<2) { //Ir a la siguiente columna $this->SetCol($this->col+1); //Establecer la ordenada al principio $this->SetY($this->y0); //Seguir en esta página return false; } else { //Volver a la primera columna $this->SetCol(0); //Saltar página return true; } } function ChapterTitle($num,$titulo) { $this->SetFont('Arial','B',13); $this->SetFillColor(215,215,255); $this->Cell(0,6,"Capítulo $num : $titulo",0,1,'L',1); $this->Ln(4); $this->y0=$this->GetY(); } function ChapterBody($fichier) { $f=fopen($fichier,'r'); $txt=fread($f,filesize($fichier)); fclose($f); $this->SetFont('Arial','',12);



//Imprimir texto en una columna de 6 cm de ancho $this->MultiCell(60,5,$txt); //Volver a la primera columna $this->SetCol(0); } function PrintChapter($num,$title,$file) { //imprimir el capítulo $this->AddPage(); $this->ChapterTitle($num,$title); $this->ChapterBody($file); } } //instanciamos la clase $pdf=new PDF(); //variable global utilizada en el método header $title='Ejemplo 3'; //título del documento $pdf->SetTitle($title); //Datos del autor del contenido $pdf->SetAuthor('Oscar Capuñay Uceda'); //Datos del creador – aplicación que creó el documento $pdf-> SetCreator(‘FPDF’); //primer capítulo $pdf->PrintChapter(1,'Phishing o Fraude Electrónico','phishing.txt'); //segundo capítulo $pdf->PrintChapter(2,'Esteganografía','esteganografia.txt'); //escribe el pdf en un archivo llamado prueba.pdf y obliga su descarga $pdf->Output('prueba.pdf','D'); ?>



Resultado:


Ejemplo 130: PDF con datos de MySQL pdf04.php <?php define('FPDF_FONTPATH','font/'); require_once "fpdf.php"; require_once "mysqli-conexion.php"; $sql="select * from persona"; $rspersona=$mysqli->query($sql) or die($mysqli->error); $pdf=new FPDF(); $pdf->AddPage(); $pdf->SetFont('Arial','B',16); $pdf->Cell(180,10,'Listado de Personas',0,1,'C'); $pdf->Ln();



$pdf->Ln(); $pdf->SetFont('Arial','B',10); $pdf->Cell(10,6,"Id",1); $pdf->Cell(40,6,"Nombres",1); $pdf->Cell(40,6,"Apellidos",1); $pdf->Cell(40,6,"E-Mail",1); $pdf->Cell(20,6,"Telefono",1); $pdf->Ln(); $pdf->SetFont('Arial','',10); while($registro=$rspersona->fetch_object()) { $pdf->Cell(10,5,$registro->idpersona,0); $pdf->Cell(40,5,$registro->nombres,0); $pdf->Cell(40,5,$registro->apellidos,0); $pdf->Cell(40,5,$registro->email,0); $pdf->Cell(20,5,$registro->telefono,0); $pdf->Ln(); } $pdf->Output(); ?> Resultado:




Archivos XLS Los archivos XLS pueden ser generados en PHP utilizando la función header() para establecer los encabezados del archivo que vamos a generar, en este caso escribiremos: header("Content-type: application/vnd.ms-excel"); Veamos un primer ejemplo. Ejemplo 131: XLS simple xls01.php <?php // Enviamos los encabezados de hoja de calculo header("Content-type: application/vnd.ms-excel"); // Creamos la tabla $letra = array ("A","B","C","D","E","F","G","H","I","J"); ?> <table> <?php $filas=10; $columnas=10; for ($i=0;$i<$filas;$i++){ ?> <tr> <?php for ($j=0;$j<$columnas;$j++){ ?> <td> <?php echo $i . $j; ?> </td> <?php } ?> </tr> <?php } ?> </table> Resultado: Note que aparece la ventana de descarga para el archivo xls01.php y es reconocido como archivo xls (Microsoft Office Excel).




Figura 223. Abriendo xls01.php

Abrimos el archivo

Figura 224. Hoja de calculo con xls01.php

Ejemplo 132: XLS con fórmulas xls02.php <?PHP header("Content-type: application/vnd.ms-excel"); //indicamos el nombre del archivo que se va a generar header("Content-Disposition: filename='resumen.xls'"); ?> <table border=1>



<tr><th> Departamento </th><th> 2006 </th><th> 2007 </th><th> 2008 </th> </tr> <tr><td> Tumbes </td><td>120 </td><td> 240 </td><td> 380 </td> </tr> <tr><td> Piura </td><td>150 </td><td> 350 </td><td> 330 </td> </tr> <tr><td> Lambayeque </td><td> 200 </td><td> 478 </td><td> 832 </td> /tr> <tr><td> Totales </td><td> =suma(b2:b4) </td><td> =c2+c3+c4 </td><td> =suma(d2:d4) </td> </tr> </table> El ejemplo anterior es una página muy simple compuesta en su mayoría por etiquetas HTML pero que se convierte en XLS por las primeras líneas escritas en PHP.


Abrimos el archivo

Figura 226. resumen.xls generado con xls02.php


Podemos comprobar que las formulas escritas en HTML han hecho su trabajo. Ahora utilizaremos dos archivos (excel.php y excel-ext.php) creados por Ignatius Teo, los cuales permiten escribir y leer archivos XLS a través de una clase llamada: xlsStream. excel-ext.php <?php function createExcel($filename, $arrydata) { $excelfile = "xlsfile://./".$filename; $fp = fopen($excelfile, "wb"); if (!is_resource($fp)) die("Error al crear $excelfile"); fwrite($fp, serialize($arrydata)); fclose($fp); header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header ("Last-Modified: " . gmdate("D,d M YH:i:s") . " GMT"); header ("Cache-Control: no-cache, must-revalidate"); header ("Pragma: no-cache"); header ("Content-type: application/x-msexcel"); header ("Content-Disposition: attachment; filename=\"" . $filename . "\"" ); readfile($excelfile); } ?> Ejemplo 133: XLS con xlsStream xls03.php <?php //incluimos los archivos require_once("excel.php"); require_once("excel-ext.php"); //llenamos el array data con datos de prueba $data = array( array("Nombre"=>"Carlos", "Nota"=>18), array("Nombre"=>"Kelly", "Nota"=>18), array("Nombre"=>"Dante", "Nota"=>17), array("Nombre"=>"Oscar", "Nota"=>14) ); //creamos el archivo XLS createExcel("ejemplo3.xls", $data); ?>



Resultado:

Figura 227. Resultado de xls03.php

Ahora pasemos a ver un ejemplo que se conecta a un servidor MySQL, selecciona la base de datos “dbdemo” y ejecuta una consulta que retorna todos los registros de la tabla “persona”. Ejemplo 134: XLS con datos de MySQL xls04.php <?php //incluimos los archivos require_once("excel.php"); require_once("excel-ext.php"); //Conexion a MySQL $con = mysql_connect("localhost","root",""); mysql_select_db("dbdemo", $con); //sentencia sql $sql = "SELECT * FROM persona"; //ejecutar la sentencia sql $res = mysql_query($sql, $con) or die(mysql_error()); // Creamos el array con los datos while($reg = mysql_fetch_assoc($res)) $data[] = $reg; // Generamos el Excel createExcel("personas.xls", $data); ?>



Resultado:


xls05.php <?php header("Content-type: application/vnd.ms-excel"); header("Content-Disposition: filename=\"listado.xls\""); include "mysqli-conexion.php"; //incluimos la conexion //consulta sql $sql="select * from persona"; //ejecucion de la sentencia sql $rspersona=$mysqli->query($sql) or die($mysqli->error); ?> <table> <tr> <th>Id</th> <th>Nombres</th> <th>Apellidos</th> <th>E-Mail</th> <th>Teléfono</th> </tr> <?php //mostrar los registros while($registro=$rspersona->fetch_object()) { ?> <tr> <td><?php echo "$registro->idpersona"?></td> <td><?php echo "$registro->nombres"?></td> <td><?php echo "$registro->apellidos"?></td> <td><?php echo "$registro->email"?></td>



<td><?php echo "$registro->telefono"?></td> </tr> <?php } $mysqli->close(); //cerramos la conexión ?> </table> Resultado Web:




PHP + AJAX

IX. PHP + AJAX En este libro veremos el uso de AJAX en PHP a través de la librería de clases XAJAX.

AJAX AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma. AJAX es una combinación de cuatro tecnologías ya existentes:

• XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.

• Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.

• El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.

• XML es el formato usado comúnmente para la transferencia de vuelta al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente. A pesar de que el término «AJAX» fuese creado en 2005, la historia de las tecnologías que permiten AJAX se remonta a una década antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las técnicas para la carga asíncrona de contenidos en una página existente sin requerir recarga completa remontan al tiempo del elemento iframe (introducido en Internet Explorer 3 en 1996) y el tipo de elemento layer (introducido en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla). Ambos tipos de elemento tenían el atributo src que podía tomar cualquier dirección URL externa, y cargando una página que contenga javascript que manipule la página paterna, pueden lograrse efectos parecidos al AJAX. El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para estas técnicas, con envío de datos a través de un applet Java el cual se puede comunicar con el cliente usando JavaScript.


PHP + AJAX

Esta técnica funcionó en ambos navegadores, Internet Explorer versión 4 y Netscape Navigator versión 4. Microsoft la utilizó en el Outlook Web Access provisto con la versión 2000 de Microsoft Exchange Server. La comunidad de desarrolladores web, primero colaborando por medio del grupo de noticias microsoft.public.scripting.remote y después usando blogs, desarrollaron una gama de técnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la librería JSRS en el año 2000, la introducción a la técnica imagen/cookie en el mismo año y la técnica JavaScript bajo demanda (JavaScript on Demand) en 2002. En ese año, se realizó una modificación por parte de la comunidad de usuarios al Microsoft's Remote Scripting para reemplazar el applet Java por XMLHttpRequest. Frameworks de Scripting Remoto como el ARSCIF aparecieron en 2003 poco antes de que Microsoft introdujera Callbacks en ASP. NET. Desde que XMLHttpRequest está implementado en la mayoría de los navegadores, raramente se usan técnicas alternativas. Sin embargo, todavía se utilizan donde se requiere una mayor compatibilidad, una reducida implementación, o acceso cruzado entre sitios Web. Una alternativa, el Terminal SVG (basado en SVG), emplea una conexión persistente para el intercambio continuo entre el navegador y el servidor.[6]

XAJAX XAJAX es una librería PHP que Ud puede incluir en su script PHP para proveer una forma fácil en sus páginas Web la llamada a funciones o métodos de objetos usando AJAX (Asynchronous JavaScript And XML). Simplemente registra una o mas funciones/métodos con el objeto xajax quien retorna XML como respuesta y agrega una sentencia en su cabecera HTML para incluir un archivo de JavaScript y ejecutar un proceso que muestre el resultado desde alguna parte del HTML, para ello agregamos una simple llamada a una función de JavaScript en su HTML, y XAJAX se encarga del resto! [7] A mi parecer es una de las mejores librerías para trabajar con PHP y AJAX, la versión que utilizaremos es la 0.2.5 (estable). Esta librería ha sido desarrollada por: Jared White ([email protected]), J. Max Wilson ([email protected]) y Eion Robb ([email protected]) y el sitio Web oficial es: http://www.xajaxproject.org. Veamos ahora algunos ejemplos. Ejemplo 135: Asignación de valores a propiedades de un objeto HTML xajax01.php <?php require ('xajax/xajax.inc.php');


PHP + AJAX

//implementamos la funcion que imprime el texto en el textbox function frase($texto) { $objResponse = new xajaxResponse(); //asignar $texto en la propiedad "value" del objeto "text1" $objResponse->addAssign("text1","value",$texto); return $objResponse; } // Instanciamos xajax. $xajax = new xajax(); // Funciones que serán llamadas desde JavaScript $xajax->registerFunction("frase"); // Procesar cualquier requerimiento // Debe ser llamado antes de cualquier cabecera o salida HTML $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax01</title> <?php //esta orden debe estar dentro de las etiquetas <head> y </head> $xajax->printJavascript('xajax'); // directorio donde se encuentra el archivo xajax.inc.php. ?> </head> <body style="text-align:center;"> <input type="text" id="text1" name="text1" value="" size="30" /> <input type="button" onclick="xajax_frase('esta es la frase de prueba')" value="Primera Frase" /> <input type="button" onclick="xajax_frase('esta es otra frase')" value="Otra Frase" /> </body> </html> Podemos notar en los botones la llamada a la función xajax_frase, la cual envía como parámetro la frase que aparecerá en la caja de texto. Resultado Web:

Figura 231. Resultado de xajax01.php


PHP + AJAX

Ejemplo 136: Asignación de HTML a innerHTML de una etiqueta DIV xajax02.php <?php require ('xajax/xajax.inc.php'); //implementamos la funcion que asugna HTML al DIV function asig_html() { $html="<h1>Título Asignado</h1>Este es el HTML asignado."; $objResponse = new xajaxResponse(); $objResponse->addAssign("div1","innerHTML",$html); return $objResponse; } // Instanciamos xajax. $xajax = new xajax(); //Registramos la función $xajax->registerFunction("asig_html"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax02</title> <?php //directorio donde se encuentra el archivo xajax.inc.php. $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <div id="div1"> texto inicial </div> <input type="button" onclick="xajax_asig_html()" value="Asignar HTML" /> </body> </html> Resultado Web:



PHP + AJAX

Al hacer click en el botón, aparecerá el siguiente resultado:

Figura 233. Cambio de contenido con xajax02.php

Ejemplo 137: Asignación de innerHTML y estilos con XAJAX xajax03.php <?php //incluimos la clase xajax require ('xajax/xajax.inc.php'); function prueba($num) { if ($num==0) $texto = "Primer mensaje de prueba"; else $texto = "Este es el segundo mensaje de prueba"; $objResponse = new xajaxResponse(); $objResponse->addAssign("division1","innerHTML",$texto); return $objResponse; } function setColor($sColor) { $objResponse = new xajaxResponse(); $objResponse->addAssign("division1","style.color", $sColor); return $objResponse; } // Instanciamos xajax. $xajax = new xajax(); // Funciones que serán llamadas desde JavaScript $xajax->registerFunction("prueba");


PHP + AJAX

$xajax->registerFunction("setColor"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax03</title> <?php //esta orden debe estar dentro de las etiquetas <head> y </head> $xajax->printJavascript('xajax'); // directorio donde se encuentra el archivo xajax.inc.php. ?> </head> <body style="text-align:center;"> <div id="division1" name="division1"> </div> <br/> <button onclick="xajax_prueba(0)">Primera Prueba</button> <button onclick="xajax_prueba(1)">Segunda prueba</button> <select id="colores" name="colores" onchange="xajax_setColor(document.getElementById('colores').value);"> <option value="black" selected="selected">Negro</option> <option value="red">Rojo</option> <option value="green">Verde</option> <option value="blue">Azul</option> </select> <script type="text/javascript"> // llama a la función de prueba al cargar la página xajax_prueba(0); // llama a la función SetColor al cargar la página xajax_setColor(document.getElementById('colores').value); </script> </body> </html> Resultado Web:



PHP + AJAX

Podemos comprobar en este ejemplo a través de nuestro navegador que la frase cambia dependiendo del botón que presionemos y del color que elijamos pero todo esto sin recargar la página, es decir, utilizando AJAX. Ejemplo 138: Ocultar y Mostrar un DIV xajax04.php <?php require ('xajax/xajax.inc.php'); function alternar($estado) { if($estado=="none") { $valor=""; $texto="Ocultar"; } else { $valor="none"; $texto="Ver"; } $objResponse = new xajaxResponse(); //asignación a la propiedad display $objResponse->addAssign("div1","style.display",$valor); //asignación del texto del botón $objResponse->addAssign("boton1","value",$texto); return $objResponse; } // Instanciamos xajax. $xajax = new xajax(); //Registramos la función $xajax->registerFunction("alternar"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax04</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <div id="div1" style="display: block"> texto del div </div> <input type="button" id="boton1" name="boton1" onclick="xajax_alternar(document.getElementById('div1').style.display)" value="Ocultar" /> </body> </html>


PHP + AJAX

En este ejemplo analizamos “display” propiedad del estilo definido en la etiqueta DIV. Si display es igual a “none” entonces el DIV es invisible sino se puede ver su contenido. Por lo tanto, debemos modificar esa propiedad para cambiar de visible a invisible o viceversa. Para obtener el valor de “display” usamos la orden de javascript: document.getElementById() que sirve para hacer referencia a un objeto mediante su ID (Identificador), y luego especificamos la propiedad del estilo que queremos obtener. Una vez obtenido el valor, éste será enviado como parámetro a la función alternar (xajax_alternar). Resultado Web:


Para ocultar el DIV hacemos click en “Ocultar”.

Figura 236. Ocultando un DIV

Ejemplo 139: Imprimir números del 1 a N xajax05.php <?php require ('xajax/xajax.inc.php'); function numeros($numero) { for($i=1;$i<=$numero;$i++) { $resultado.= $i . " "; }


PHP + AJAX

$objResponse = new xajaxResponse(); $objResponse->addAssign("div1","innerHTML",$resultado); return $objResponse; } // Instanciamos xajax. $xajax = new xajax(); $xajax->registerFunction("numeros"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax05</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <input type="text" id="text1" name="text1" onkeyup="xajax_numeros(this.value)" /> <div id="div1" style="display: block"> texto del div </div> </body> </html> Al final del ejemplo vemos la orden de javascript: this.value, la cual nos sirve para obtener el valor del objeto actual, es decir, de la caja de texto: text1. Resultado Web:


Ejemplo 140: Cargar una imagen con XAJAX xajax06.php <?php require ('xajax/xajax.inc.php'); function imagen($ruta) {


PHP + AJAX

$resultado="<img src='$ruta' alt='imagen con xajax'>"; $objResponse = new xajaxResponse(); $objResponse->addAssign("divimagen","innerHTML",$resultado); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction("imagen"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax06</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <div id="divimagen"></div> <select id="lista" name="lista" onchange="xajax_imagen(this.value)"> <option value="">[seleccione una imagen]</option> <option value="imagenes/correo.jpg">Correo</option> <option value="imagenes/grafico.jpg">Gráfico</option> <option value="imagenes/navegador.jpg">Navegador</option> <option value="imagenes/teclado.jpg">Teclado</option> </select> </body> </html> La función imagen definida en este ejemplo inserta la etiqueta IMG en el DIV para mostrar la imagen seleccionada a través de la lista desplegable, la cual, en su evento ochange envía la ruta de la imagen que se mostrará. Resultado Web:



PHP + AJAX

Al seleccionar un elemento de la lista se mostrará la imagen elegida.

Figura 239. Imagen cargada con xajax06.php

Figura 240. Segunda imagen cargada con xajax06.php

Eventos con XAJAX Ejemplo 141: Cambiar el código javascript establecido para un evento xajax07.php <?php require ('xajax/xajax.inc.php');


PHP + AJAX

function nuevo_codigo($objeto,$codigo_js) { $objResponse = new xajaxResponse(); $objResponse->addEvent("$objeto","onclick",$codigo_js); return $objResponse->getXML(); } $xajax = new xajax(); $xajax->registerFunction("nuevo_codigo"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax07</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <input type="button" name="boton1" id="boton1" value="Boton 1" onclick="" /> <input type="button" value="abrir ventana" onclick="xajax_nuevo_codigo('boton1','open(\'md5.php\',\'w1\',\'\')')" /> <input type="button" value="alert" onclick="xajax_nuevo_codigo('boton1','alert(\'ejemplo de xajax\')')" /> </body> </html> Con el método addEvent se puede establecer el código de javascript que será ejecutado en un evento de un objeto determinado. Por lo tanto, necesitamos tres parámetros: objeto, evento y código. Resultado Web:


Al hacer click sobre el botón “Abrir ventana” al botón “Boton 1” se le asigna el nuevo código de javascript que se ejecutará en el evento onclick, en este caso abrir el archivo md5.php en una nueva ventana del navegador. Después de haber hecho click en “Abrir ventana” hacemos click en “Boton 1” para hacer la prueba.


PHP + AJAX

Figura 242. Ventana nueva con xajax07.php

Ahora haremos click en el botón “alert” para cambiar el código del “Boton 1” y luego haremos click en dicho objeto (Boton 1).

Figura 243. Mensaje utilizando eventos en xajax07.php

Podemos ver que ahora al hacer click en el “botón 1”, se ejecuta un alert() de javascript.

Trabajo con formularios en XAJAX Ejemplo 142: Obtener datos de un formulario xjax08.php <?php require ('xajax/xajax.inc.php'); function datos($formulario) { //los indices son los nombres de los objetos del formulario $frase=$formulario['text1']; //contamos los elementos seleccionados $cantidad=count($formulario['chk']); $resultado="la frase es:" . $frase . "\n"; $resultado.=$cantidad . " temas seleccionados"; $objResponse = new xajaxResponse(); $objResponse->addAlert($resultado); return $objResponse; } $xajax = new xajax();


PHP + AJAX

$xajax->registerFunction("datos"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax08</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <form id="form1" name="form1"> Frase <input type="text" size="40" name="text1" id="text1" /><br /> Temas:<br /> <input type="checkbox" id="chk[]" name="chk[]" value="php" /> PHP<br /> <input type="checkbox" id="chk[]" name="chk[]" value="javascript" /> JavaScript<br /> <input type="checkbox" id="chk[]" name="chk[]" value="css" /> CSS<br /> <input type="button" name="boton1" id="boton1" value="Aceptar" onclick="xajax_datos(xajax.getFormValues('form1'))" /> </body> </html> El método addAlert ejecuta la función alert() de javascript desde el código AJAX. Para obtener los valores de los objetos del formulario utilizamos el método getFormValues de la clase xajax en javascript. Resultado Web:


Escribimos un valor en la frase y luego seleccionamos algunos temas.


PHP + AJAX

Figura 245. Ingreso de datos en xajax08.php

Ahora veamos el resultado al presionar el botón “Aceptar”.

Figura 246. Mensaje resultante en xajax08.php

Ejemplo 143: Obtener datos incluyendo objetos deshabilitados. xajax09.php <?php require ('xajax/xajax.inc.php'); function datos($formulario) { //los indices son los nombres de los objetos del formulario $frase=$formulario['text1']; //contamos los elementos seleccionados $cantidad=count($formulario['chk']); $resultado = "La frase es:" . $frase . "\n"; $resultado.= $cantidad . " temas seleccionados"; $objResponse = new xajaxResponse(); $objResponse->addAlert($resultado); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction("datos"); $xajax->processRequests(); ?>


PHP + AJAX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>xajax08</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> <form id="form1" name="form1"> Frase <input type="text" size="40" name="text1" id="text1" value="texto de prueba" disabled="disabled" /><br /> Temas:<br /> <input type="checkbox" id="chk[]" name="chk[]" value="php" /> PHP<br /> <input type="checkbox" id="chk[]" name="chk[]" value="javascript" /> JavaScript<br /> <input type="checkbox" id="chk[]" name="chk[]" value="css" /> CSS<br /> <input type="button" name="boton1" id="boton1" value="Enviar sin deshabilitados" onclick="xajax_datos(xajax.getFormValues('form1'))" /> <input type="button" name="boton1" id="boton1" value="Enviar con deshabilitados" onclick="xajax_datos(xajax.getFormValues('form1',true))" /> </body> </html> La diferencia está en el uso de la orden xajax.getFormValues, en la cual se debe incluir un segundo parámetro (true) para obtener los valores incluyendo los objetos deshabilitados. Resultado Web:

Figura 247. Formulario de xajax09.php

En este ejemplo, el objeto deshabilitado del formulario es la caja de texto: text1. Probemos con los dos botones de envío: Primer botón: sin el envío de los objetos deshabilitados.


PHP + AJAX

Figura 248. Deshabilitando una caja de texto con xajax

Obtenemos:

Figura 249. Mensaje de resultado de xajax09.php

Segundo botón: incluyendo objetos deshabilitados.

Figura 250. Incluyendo objetos inhabilitados

Obtenemos:

Figura 251. Mensaje resultante incluyendo objetos inhabilitados


PHP + AJAX

Error común Uno de los errores comunes que aparecen cuando usamos xajax, es el siguiente:

Figura 252. Error comun en xajax

Cuando aparece este mensaje, podemos ver al final del mismo la frase: You have whitespace in your response. (Ud tiene espacios en blanco en su response). Esto generalmente se debe a que hemos insertado algunas líneas en blanco o algún carácter en el código HTML antes de iniciar el código de XAJAX. Ejemplo 144: Archivo con una línea en blanco antes de iniciar PHP. xajax_errorcomun.php -- inicio del archivo --- <?php require ('xajax/xajax.inc.php'); function datos($formulario) { $frase=$formulario['text1']; $cantidad=count($formulario['chk']); $resultado = "La frase es:" . $frase . "\n"; $resultado.= $cantidad . " temas seleccionados"; $objResponse = new xajaxResponse(); $objResponse->addAlert($resultado); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction("datos"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -- continua el archivo ---


PHP + AJAX

Búsqueda en base de datos con XAJAX Ejemplo 145: Búsqueda del nombre según el código con XAJAX xajax_buscar.php <?php require "pagina12.php"; //conexion a la base de datos dbdemo require "xajax/xajax.inc.php"; function buscar($id) { if($id>0) { $rs=mysql_query("select * from persona where idpersona=$id"); if(mysql_num_rows($rs)>0) { $registro=mysql_fetch_array($rs); $nombrecompleto=$registro['nombres'] . " " . $registro['apellidos']; } else { $nombrecompleto="no se encontró el codigo ingresado"; } } $resultado=htmlentities($nombrecompleto); $objResponse = new xajaxResponse(); $objResponse->addAssign("label1","innerHTML",$resultado); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction("buscar"); $xajax->processRequests(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Buscar</title> <?php $xajax->printJavascript('xajax'); ?> </head> <body style="text-align:center;"> IdPersona <input type="text" size="3" name="text1" id="text1" onkeyup="xajax_buscar(this.value)" /> <label id="label1"></label> </body> </html>


PHP + AJAX

En el ejemplo, enviamos el ID de la persona a la función buscar (xajax_buscar) para que sea consultado y luego mostramos el nombre de la persona con dicho Id. Resultado Web:

Figura 253. Resultado de xajax-buscar.php

Escribimos un IdPersona para ver su nombre completo, si el Id no existe nos mostrará un mensaje adecuado.

Figura 254. Datos de búsqueda en xajax-buscar.php

Figura 255. Resultado de la búsqueda en xajax-buscar.php


PHP + AJAX

Administración de datos con AJAXAhora utilizaremos la librería XAJAX para administrar la tabla persona de la base de datos dbdemo. Veremos paso a paso la construcción de las páginas necesarias.

Controlador con AJAX Ejemplo 146: Controlador para mantenimiento con AJAX xajax_controlador_persona.php <?php require_once ("xajax_modelo_persona.php"); include ("xajax_logica_persona.php"); $nrxp=5; //numero de registros por pagina $titulo = "Personas"; include ("xajax_vista_persona.php"); ?> xajax_logica_persona.php <?php require_once ("xajax/xajax.inc.php"); require_once ("xajax_modelo_persona.php"); $xajax = new xajax(); function guardar($formulario){ $objpersona = new clspersona(); if($formulario[accion]=="insertar"){ $ssql="insert into persona (nombres, apellidos, email, telefono) values ('".$formulario['nombres']."', '".$formulario['apellidos']."', '".$formulario['email']."','".$formulario['telefono']."')"; if ($objpersona->comando($ssql)) $salida = "Insertado correctamente"; else $salida = "No se ha insertado."; } else{ $sql="update persona set nombres='". $formulario['nombres'] ."', apellidos='". $formulario['apellidos'] ."', email='". $formulario['email'] ."', telefono='". $formulario['telefono'] ."' where idpersona='". $formulario['idpersona']. "'"; if ($objpersona->comando($sql)) $salida = "Editado correctamente"; else $salida = "No se ha editado."; } $respuesta = new xajaxResponse(); $respuesta->addAssign("mensaje","innerHTML",$salida); return $respuesta; }


PHP + AJAX


function ver_datos($id){ $objpersona = new clspersona(); $ssql="select * from persona where idpersona='$id'"; $objpersona->consulta($ssql); $reg=$objpersona->leer_registro(); $respuesta = new xajaxResponse(); $respuesta->addAssign("nombres", "value", $reg['nombres']); $respuesta->addAssign("apellidos", "value", $reg['apellidos']); $respuesta->addAssign("email", "value", $reg['email']); $respuesta->addAssign("telefono", "value", $reg['telefono']); $respuesta->addAssign("accion", "value", "editar"); return $respuesta; } function limpiar(){ $respuesta = new xajaxResponse(); $respuesta->addAssign("nombres", "value", ""); $respuesta->addAssign("apellidos", "value", ""); $respuesta->addAssign("email", "value", ""); $respuesta->addAssign("telefono", "value", ""); $respuesta->addAssign("accion", "value", "insertar"); return $respuesta; } function eliminar($formulario){ $objpersona = new clspersona(); $lista=$formulario[chk]; if(count($lista)>0){ foreach($lista as $k => $v) { $ssql="delete from persona where idpersona='".$v."'"; $objpersona->comando($ssql); } $salida="Elementos eliminados correctamente"; } else $salida="No hay elementos seleccionados"; $respuesta = new xajaxResponse(); $respuesta->addAssign("mensaje","innerHTML",$salida); return $respuesta; } function registros($nrxp,$formulario,$frmbuscar,$pagina) { $objpersona = new clspersona(); $busqueda=" where $frmbuscar[campo] like '%$frmbuscar[texto]%'"; $sql="select * from persona $busqueda"; $objpersona->consulta($sql); $numreg=$objpersona->nr; $orden=$formulario[orden]; $sentido=$formulario[sentido];

PHP + AJAX


$campo_actual=$formulario[actual]; //sentido if($campo_actual==$orden) { if($sentido=="asc") $sentido="desc"; else $sentido="asc"; } else $sentido="asc"; //$pagina=$formulario[pagina]; $sql.=" order by ".$orden." ".$sentido; //resultados $inicio=($pagina-1)*$nrxp; $sql.=" limit $inicio,$nrxp"; $objpersona->consulta($sql); $nrt=$objpersona->nr; $salida="<table width=\"100%\" class=\"listado\" id=\"tab_registros\">"; for($i=1;$i<=$nrt;$i++){ $reg=$objpersona->leer_registro(); $salida.=" <tr onMouseDown=\"fila(this)\"> <td style=\"width:16\"><input type=\"checkbox\" name=\"chk[]\" value=\"$reg[idpersona]\" onClick=\"setPointer('#D0D090',this)\"></td> <td style=\"width:40px\"><a href=\"#\" onClick=\"xajax_ver_datos('$reg[idpersona]');ver_div('formulario');\"><img src=\"iconos/editar.gif\" border=\"0\"></a></td> <td style=\"width:23%\">$reg[nombres]</td> <td style=\"width:23%\">$reg[apellidos]</td> <td style=\"width:23%\">$reg[email]</td> <td style=\"width:23%\">$reg[telefono]</td> </tr>"; } $encontrados="$numreg registros encontrados"; $salida.="</table>"; $respuesta = new xajaxResponse(); $respuesta->addAssign("registros","innerHTML",$salida); $respuesta->addAssign("mensaje","innerHTML",$encontrados); $respuesta->addAssign("orden","value",$orden); $respuesta->addAssign("sentido","value",$sentido); return $respuesta; } function paginas($nrxp,$frmbuscar,$pagina) { $objpersona = new clspersona(); $busqueda=" where $frmbuscar[campo] like '%$frmbuscar[texto]%'"; $sql="select * from persona $busqueda"; $objpersona->consulta($sql); $mgp=10; //maximo grupo de páginas $salida="Páginas:"; $npag=ceil($objpersona->nr/$nrxp);

PHP + AJAX


for($i=1;$i<=$npag;$i++){ if($i!=$pagina) $enlace="<a href='#' onClick=\"frm1.actual.value='';xajax_registros($nrxp,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'$i');xajax_paginas($nrxp,xajax.getFormValues('frmbuscar'),'$i');\">$i</a>"; else $enlace=" $i "; $salida.=$enlace." "; } $respuesta = new xajaxResponse(); $respuesta->addAssign("paginas","innerHTML",$salida); return $respuesta; } $xajax->registerFunction("guardar"); $xajax->registerFunction("ver_datos"); $xajax->registerFunction("limpiar"); $xajax->registerFunction("eliminar"); $xajax->registerFunction("registros"); $xajax->registerFunction("paginas"); $xajax->processRequests(); ?> Resultado Web: Listado de personas

Figura 256. Listado de persona con xajax

PHP + AJAX


Inserción de registro

Figura 257. Inserción de registros con xajax

Edición de registro

Figura 258. Edición de registro con xajax

PHP + AJAX


Selección de registros

Figura 259. Selección de registros con xajax

Búsqueda de registros

Figura 260. Búsqueda de registros con xajax

Capa de Datos con AJAX Ejemplo 147: Modelo para mantenimiento con AJAX xajax_modelo_persona.php <?php require_once "xajax_conexion.php"; class clspersona { protected $rs; //resultado de una sentencia sql public $nr; //numero de registros public function leer_registro() {

PHP + AJAX


$reg=mysql_fetch_array($this->rs,MYSQL_ASSOC) or die(mysql_error()); return $reg; } public function consulta($sql) { $objBase = new BaseDatos(); $objBase->conectar(); $rs=$objBase->query($sql); $this->rs=$rs; $this->nr=$objBase->num_rows($this->rs); } public function comando($sql) { $objBase = new BaseDatos(); $objBase->conectar(); $rs=$objBase->query($sql); $this->rs=$rs; return $this->rs; } } ?> xajax_conexion.php <?php class BaseDatos { protected $servidor="localhost"; protected $usuario="root"; protected $password=""; public function conectar() { $link=mysql_connect($this->servidor,$this->usuario,$this->password) or die(mysql_error()); mysql_select_db("dbdemo",$link) or die(mysql_error()); } public function query($sql) { $rs=mysql_query($sql) or die(mysql_error()); return $rs; } public function num_rows($rs) { $nr=mysql_num_rows($rs) or die(mysql_error()); return $nr; } } ?>

PHP + AJAX


Vista con AJAX Ejemplo 148: Vista para mantenimiento con AJAX xajax_vista_persona.php <html lang="es"> <head> <title>Personas</title> <script type="text/javascript" src="js/funciones.js"></script> <?php $xajax->printJavascript('xajax/');?> <link href="css/estilo.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div id="menu"> <table width="100%"> <caption><?php echo $titulo?></caption> <tr> <td class="menu"> <a href="#" onClick="xajax_limpiar();ver_div('formulario');"><img src="iconos/nuevo.gif" height="16" alt="nuevo"></a> <a href="#" onClick="xajax_eliminar(xajax.getFormValues('frmlistado')); xajax_paginas(<?php echo $nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);xajax_registros(<?php echo $nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1');"> <img src="iconos/borrar.gif" height="16" alt="borrar"></a> <a href="#" onClick="ver_div('busqueda')"> <img src="iconos/buscar.gif" height="16" alt="buscar"></a> </td> </tr> </table> </div> <div id="busqueda" style="display: none;"> <form name="frmbuscar" id="frmbuscar" method="post" action=""> <table width="100%"> <tr><td class="etiqueta">Campo</td> <td> <select name="campo" class="campo"> <option value="nombres">Nombres</option> <option value="apellidos">Apellidos</option> <option value="email">E-Mail</option> <option value="telefono">Teléfono</option> </select> <input type="text" id="texto" name="texto" class="campo"> <input type="button" value="Buscar" onClick="xajax_registros(<?php echo $nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1');x

PHP + AJAX


ajax_paginas(<?php echo $nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);" class="boton"> <input type="button" onClick="frmbuscar.texto.value='';xajax_registros(<?php echo $nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1');xajax_paginas(<?php echo $nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);ocultar_div('busqueda'); return false;" value="Ver Todos" class="boton"></td></tr> </table> </form> </div> <div id="formulario" style="display: none;"> <form name="frm1" id="frm1" action=""> <div id="ocultos"> <input type="hidden" name="accion" id="accion" value=""> <input type="hidden" name="orden" id="orden" value="1"> <input type="hidden" name="actual" id="actual" value=""> <input type="hidden" name="sentido" id="sentido" value="asc"> <input type="hidden" name="pagina" id="pagina" value="1"> </div> <table width="100%"> <tr> <td class="etiqueta">Nombres</td> <td><input name="nombres" type="text" class="campo" id="nombres" size="50"></td> </tr> <tr> <td class="etiqueta">Apellidos</td> <td><input name="apellidos" type="text" class="campo" id="apellidos" size="50"></td> </tr> <tr> <td class="etiqueta">E-Mail</td> <td><input name="email" type="text" class="campo" id="email" size="60"></td> </tr> <tr> <td class="etiqueta">Teléfono</td> <td><input name="telefono" type="text" class="campo" id="telefono" size="15"></td> </tr> <tr> <th colspan="2"> <input type="button" value="Guardar" onClick="xajax_guardar(xajax.getFormValues('frm1'));xajax_registros(<?php echo $nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1');xajax_paginas(<?php echo $nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);ocultar_div('formulario')" class="boton">

PHP + AJAX


<input type="button" onClick="ocultar_div('formulario'); return false;" value="Cancelar" class="boton"></th> </tr> </table> </form> </div> <div id="mensaje" class="mensaje"> </div> <div id="encabezado"> <form action=""> <table width="100%" class="listado"> <tr> <th style="width:16px"><input type="checkbox" name="allcheck" value="checkbox" title="Selecciona todos" onClick="seleccionar_all('#D0D090',3);"></th> <th style="width:40px">Editar</th> <th style="width:24%"><?php enlacelis("Nombres",2,$nrxp,1) ?></th> <th style="width:24%"><?php enlacelis("Apellidos",3,$nrxp,1) ?></th> <th style="width:24%"><?php enlacelis("E-Mail",4,$nrxp,1) ?></th> <th style="width:24%"><?php enlacelis("Telefono",5,$nrxp,1) ?></th> </tr> </table> </form> </div> <form id="frmlistado" name="frmlistado" action=""> <div id="registros"> </div> </form> <div id="paginas" class="paginado"> </div> <script type="text/javascript"> xajax_registros(<?php echo $nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1'); xajax_paginas(<?php echo $nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value); </script> </html> <?php function enlacelis($titulo_columna,$campo_orden,$nrxp,$pagina) { echo "<a href=\"#\" onClick=\"frm1.orden.value='$campo_orden'; xajax_registros($nrxp,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'$pagina'); xajax_paginas($nrxp,xajax.getFormValues('frmbuscar'),frm1.pagina.value); frm1.actual.value='$campo_orden';\">$titulo_columna</a>"; } ?> Ejemplo 149: Sombreado de registros con JavaScript

PHP + AJAX


funciones.js 

Referencias Bibliográficas


X. REFERENCIAS BIBLIOGRAFICAS [1] ACHOUR Mehdi, BETZ Friedhelm, DOVGAL Antony, Manual Oficial de

PHP – Que es PHP, http://www.php.net/docs.php, Abril 2007 [2] RAYA CABRERA José Luis. HTML 4 Guía de referencia y tutorial.

http://www.bio.cam.ac.uk/cgi-lib/ [3] ACHOUR Mehdi, BETZ Friedhelm, DOVGAL Antony, Manual Oficial de

PHP – Expresiones, http://www.php.net/docs.php, Abril 2007 [4] ACHOUR Mehdi, BETZ Friedhelm, DOVGAL Antony, Manual Oficial de

PHP – Operadores, http://www.php.net/docs.php, Abril 2007 [5] OMER, MVC con PHP, http://www.phpizza.com/es/. 2007 [6] AJAX. http://es.wikipedia.org/wiki/AJAX . mayo 2007 [7] WHITE Jare, J. WILSON Max, ROBB Eion. XAJAX PHP Class Library.

http://wiki.xajaxproject.org/0.2.5_Release_Notes. [8] CAPTCHA. http://www.wikipedia.org . Web visitada el 5 de junio del 2008.

Anexos


XI. Anexos

Lista de Ejemplos TUEjemplo 1:UT TUPrimera página WebUT _______________________________ 18 TUEjemplo 2:UT TUComentariosUT _____________________________________ 22 TUEjemplo 3:UT TUUso de tildesUT _____________________________________ 24 TUEjemplo 4:UT TUEnlacesUT _________________________________________ 27 TUEjemplo 5:UT TUImágenesUT ________________________________________ 29 TUEjemplo 6:UT TUTablasUT __________________________________________ 31 TUEjemplo 7:UT TUEjemplo de Tablas en HTML UT _________________________ 37 TUEjemplo 8:UT TUFormulario solicitando los comentarios del usuario:UT _______ 40 TUEjemplo 9:UT TUConfirmación de la inclusión en una lista de correo: UT _______ 41 TUEjemplo 10:UT TUFormulario 2UT_____________________________________ 43 TUEjemplo 11:UT TUUso de framesUT ___________________________________ 46 TUEjemplo 12:UT TUAcrónimos y AbreviaturasUT __________________________ 49 TUEjemplo 13:UT TUFrase entre comillas UT_______________________________ 49 TUEjemplo 14:UT TUINS y DELUT ______________________________________ 50 TUEjemplo 15:UT TUOBJECT Y PARAM UT _______________________________ 51 TUEjemplo 16:UT TUUso de TABLA, THEAD, TFOOT y TBODYUT_____________ 52 TUEjemplo 17:UT TUButton con imagenUT ________________________________ 54 TUEjemplo 18:UT TUFormulario con OPTGROUPUT ________________________ 55 TUEjemplo 19:UT TUEjemplo de Conjunto de CamposUT ____________________ 56 TUEjemplo 20:UT TUDIV y SPAN UT _____________________________________ 58 TUEjemplo 21:UT TUfunción alertUT _____________________________________ 61 TUEjemplo 22:UT TUEventosUT ________________________________________ 76 TUEjemplo 23:UT TUDefinición mediante códigoUT _________________________ 77 TUEjemplo 24:UT TUFunción open()UT___________________________________ 79 TUEjemplo 25:UT TUEscribir HTML con javascriptUT ________________________ 83 TUEjemplo 26:UT TUSelect con javascriptUT ______________________________ 87 TUEjemplo 27:UT TUUso de archivos js UT ________________________________ 90 TUEjemplo 28:UT TUHTML y CSSUT ____________________________________ 92 TUEjemplo 29:UT TUStyle UT ___________________________________________ 93 TUEjemplo 30:UT TUColores con CSSUT _________________________________ 94 TUEjemplo 31:UT TUDefinición de constantesUT __________________________ 100 TUEjemplo 32:UT TUConsidera la siguiente funciónUT______________________ 100 TUEjemplo 33:UT TUOperador de asignaciónUT___________________________ 103 TUEjemplo 34:UT TUOperadores de asignación combinados UT ______________ 103 TUEjemplo 35:UT TUOperador ternarioUT _______________________________ 104 TUEjemplo 36:UT TUComportamiento Ternario No-Obvio UT _________________ 105 TUEjemplo 37:UT TUControl de erroresUT _______________________________ 106 TUEjemplo 38:UT TUOperador de ejecuciónUT____________________________ 106 TUEjemplo 39:UT TUOperadores de incremento y decrementoUT _____________ 107 TUEjemplo 40:UT TUIncremento y decremento con variables tipo carácter.UT ___ 107 TUEjemplo 41:UT TUOperadores de cadenaUT ___________________________ 108 TUEjemplo 42:UT TUOperadores de matricesUT __________________________ 109 TUEjemplo 43:UT TUComparación de matricesUT _________________________ 110 TUEjemplo 44:UT TUUso de instanceof con clasesUT ______________________ 110 TUEjemplo 45:UT TUUso de instanceof con clases heredadas UT _____________ 111

Anexos


TUEjemplo 46:UT TUUso de instanceof para una clase UT ___________________ 111 TUEjemplo 47:UT TUUso de instanceof con otras variablesUT ________________ 112 TUEjemplo 48:UT TUIf ejecuta una sentencia si la condición es verdadera UT ____ 113 TUEjemplo 49:UT TUIf con varias sentencias si la condición es verdaderaUT ____ 113 TUEjemplo 50:UT TUIf anidadoUT ______________________________________ 114 TUEjemplo 51:UT TUUso de else en una sentencia if UT_____________________ 114 TUEjemplo 52:UT TUUso de elseifUT ___________________________________ 114 TUEjemplo 53:UT TUImprimir los números del 1 al 10 utilizando la sentencia forUT 115 TUEjemplo 54:UT TUImprimir los números del 1 al 10 utilizando while UT _______ 116 TUEjemplo 55:UT TUPagina01.php UT___________________________________ 117 TUEjemplo 56:UT TUComentariosUT ___________________________________ 119 TUEjemplo 57:UT TUSentencia if (1) UT__________________________________ 119 TUEjemplo 58:UT TUSentencia if (2) UT__________________________________ 119 TUEjemplo 59:UT TUSentencia if (3) UT__________________________________ 120 TUEjemplo 60:UT TUSentencia for (1) UT ________________________________ 121 TUEjemplo 61:UT TUSentencia for (2) UT ________________________________ 122 TUEjemplo 62:UT TUSentencia for (3) UT ________________________________ 123 TUEjemplo 63:UT TUEnvío de datos de un formulario a una página PHPUT _____ 124 TUEjemplo 64:UT TUSubir un archivo al servidor WebUT ____________________ 129 TUEjemplo 65:UT TUConexión a MySQLUT ______________________________ 143 TUEjemplo 66:UT TUListado de registrosUT ______________________________ 143 TUEjemplo 67:UT TUListado de registros en una tablaUT____________________ 144 TUEjemplo 68:UT TUInserción de registros en una tablaUT __________________ 145 TUEjemplo 69:UT TUEdición de registrosUT ______________________________ 147 TUEjemplo 70:UT TUEliminación de registros UT___________________________ 149 TUEjemplo 71:UT TUConexión a PostgreSQLUT __________________________ 170 TUEjemplo 72:UT TUListado de registros en una tabla HTML.UT ______________ 171 TUEjemplo 73:UT TUInserción de registro en PostgreSQL.UT ________________ 172 TUEjemplo 74:UT TUEdición de registro en PostgreSQL. UT__________________ 174 TUEjemplo 75:UT TUEliminación de registro en PostgreSQL. UT ______________ 176 TUEjemplo 76:UT TUConexión a MS-SQLServerUT ________________________ 180 TUEjemplo 77:UT TUListado de registrosUT ______________________________ 181 TUEjemplo 78:UT TUInserción de registro en MS-SQLServer UT ______________ 182 TUEjemplo 79:UT TUEdición de registro en MS-SQLServer UT ________________ 184 TUEjemplo 80:UT TUEliminación de registros en MS-SQLServerUT ___________ 185 TUEjemplo 81:UT TUDefinición de una claseUT ___________________________ 187 TUEjemplo 82:UT TUCreando una instanciaUT ____________________________ 187 TUEjemplo 83:UT TUHerencia simple de una Clase UT ______________________ 188 TUEjemplo 84:UT TUAuto cargaUT _____________________________________ 189 TUEjemplo 85:UT TUConexión a MySQL con mysqliUT _____________________ 195 TUEjemplo 86:UT TUListado con mysqliUT _______________________________ 196 TUEjemplo 87:UT TUInserción de registro con mysqliUT ____________________ 197 TUEjemplo 88:UT TUEdición de registro con mysqliUT ______________________ 199 TUEjemplo 89:UT TUEliminación de registros con mysqliUT __________________ 201 TUEjemplo 90:UT TUPaginación de resultadosUT__________________________ 202 TUEjemplo 91:UT TUMODELO – MVC con PHPUT ________________________ 209 TUEjemplo 92:UT TUUna plantilla usada por el modelo UT ___________________ 209 TUEjemplo 93:UT TUCONTROLADOR MVC con PHPUT ___________________ 210 TUEjemplo 94:UT TUVISTA MVC con PHPUT ____________________________ 210 TUEjemplo 95:UT TUmodelo_bd.phpUT _________________________________ 212 TUEjemplo 96:UT TUlista_bd.phpUT ____________________________________ 213

Anexos


TUEjemplo 97:UT TUvista_bd.phpUT ___________________________________ 213 TUEjemplo 98:UT TUcontrolador_bd.phpUT ______________________________ 213 TUEjemplo 99:UT TUConexión a MySQL con PDOUT ______________________ 218 TUEjemplo 100:UT TULista de personas con PDO y manejo de erroresUT ______ 218 TUEjemplo 101:UT TUListado de registros con PDO, con eliminación múltiple UT _ 219 TUEjemplo 102:UT TUInserción de registros con PDOUT ____________________ 220 TUEjemplo 103:UT TUEliminación múltiple de registros con PDOUT ___________ 222 TUEjemplo 104:UT TUEdición de registros con PDO.UT_____________________ 222 TUEjemplo 105:UT TUBorrar un archivo de un usuarioUT____________________ 225 TUEjemplo 106:UT TUAtaque mediante el borrado de archivosUT _____________ 226 TUEjemplo 107:UT TUMd5UT _________________________________________ 227 TUEjemplo 108:UT TUScript para acceso de usuariosUT ____________________ 228 TUEjemplo 109:UT TUInyección SQL en una sentencia SELECT UT ___________ 229 TUEjemplo 110:UT TUPaginación de resultados con Inyección SQL UT _________ 229 TUEjemplo 111:UT TUget_magic_quotes_gpc y addslashesUT _______________ 239 TUEjemplo 112:UT TUmysqli_real_escape_string UT _______________________ 240 TUEjemplo 113:UT TUIngreso de un usuario a la aplicaciónUT _______________ 243 TUEjemplo 114:UT TUVerifica datos del usuario UT_________________________ 244 TUEjemplo 115:UT TUAutenticación HTTPUT _____________________________ 246 TUEjemplo 116:UT TUFormulario para el logeo de usuarios UT _______________ 249 TUEjemplo 117:UT TULogeo de usuariosUT ______________________________ 250 TUEjemplo 118:UT TUVerifica si el usuario se ha logeado UT _________________ 251 TUEjemplo 119:UT TUFormulario CAPTCHAUT ___________________________ 253 TUEjemplo 120:UT TUGenerador CAPTCHAUT ___________________________ 254 TUEjemplo 121:UT TUVer configuración GDUT____________________________ 257 TUEjemplo 122:UT TUMi primera imagen UT ______________________________ 257 TUEjemplo 123:UT TURectángulo y textoUT ______________________________ 258 TUEjemplo 124:UT TUGráfico de barrasUT _______________________________ 259 TUEjemplo 125:UT TUPie UT __________________________________________ 260 TUEjemplo 126:UT TUCírculoUT _______________________________________ 262 TUEjemplo 127:UT TUFPDFUT ________________________________________ 265 TUEjemplo 128:UT TUPDF con salto de páginaUT _________________________ 267 TUEjemplo 129:UT TUPDF con capítulosUT ______________________________ 269 TUEjemplo 130:UT TUPDF con datos de MySQLUT ________________________ 272 TUEjemplo 131:UT TUXLS simple UT____________________________________ 274 TUEjemplo 132:UT TUXLS con fórmulasUT ______________________________ 275 TUEjemplo 133:UT TUXLS con xlsStreamUT _____________________________ 277 TUEjemplo 134:UT TUXLS con datos de MySQLUT ________________________ 278 TUEjemplo 135:UT TUAsignación de valores a propiedades de un objeto HTML UT 282 TUEjemplo 136:UT TUAsignación de HTML a innerHTML de una etiqueta DIV UT _ 284 TUEjemplo 137:UT TUAsignación de innerHTML y estilos con XAJAX UT _______ 285 TUEjemplo 138:UT TUOcultar y Mostrar un DIVUT _________________________ 287 TUEjemplo 139:UT TUImprimir números del 1 a N UT _______________________ 288 TUEjemplo 140:UT TUCargar una imagen con XAJAX UT ____________________ 289 TUEjemplo 141:UT TUCambiar el código javascript establecido para un evento UT 291 TUEjemplo 142:UT TUObtener datos de un formularioUT ____________________ 293 TUEjemplo 143:UT TUObtener datos incluyendo objetos deshabilitados.UT _____ 295 TUEjemplo 144:UT TUArchivo con una línea en blanco antes de iniciar PHP. UT __ 298 TUEjemplo 145:UT TUBúsqueda del nombre según el código con XAJAX UT ____ 299 TUEjemplo 146:UT TUControlador para mantenimiento con AJAX UT___________ 301 TUEjemplo 147:UT TUModelo para mantenimiento con AJAX UT ______________ 306

Anexos


TUEjemplo 148:UT TUVista para mantenimiento con AJAXUT ________________ 308 TUEjemplo 149:UT TUSombreado de registros con JavaScriptUT _____________ 310

Anexos


Lista de Tablas TTabla 1. Códigos HTML para caracteres especiales ________________ 23 Tabla 2. Códigos HTML para caracteres especiales ________________ 24 Tabla 3. Caracteres especiales para cadenas en JavaScript__________ 63 Tabla 4. Operadores aritméticos________________________________ 65 Tabla 5. Operadores de comparación ___________________________ 66 Tabla 6. Operadores lógicos___________________________________ 66 Tabla 7. Operadores de asignación _____________________________ 67 Tabla 8. Operadores especiales ________________________________ 67 Tabla 9. Métodos matemáticos del Objeto Math____________________ 73 Tabla 10. Propiedades del objeto Number _________________________ 74 Tabla 11. Eventos de JavaScript ________________________________ 75 Tabla 12. Comando CSS ______________________________________ 95 Tabla 13. Macros CSS ________________________________________ 96 Tabla 14. Secciones CSS______________________________________ 97 Tabla 15. Operadores aritméticos de PHP ________________________ 103 Tabla 16. Operadores de comparación de PHP ____________________ 104 Tabla 17. Operadores de incremento y decremento de PHP __________ 106 Tabla 18. Operadores lógicos__________________________________ 108 Tabla 19. Operadores de matrices ______________________________ 109 Tabla 20. Controladores PDO__________________________________ 215

Anexos


Lista de Figuras UFigura 1. Inicio de la instalación de WAMP ______________________ 11 UFigura 2. Licencia de uso de WAMP____________________________ 12 UFigura 3. Destino de la instalación de WAMP_____________________ 12 UFigura 4. Seleccionar menú de inicio de WAMP___________________ 13 UFigura 5. Inicio de WAMP en el arranque del Sistema Operativo. _____ 13 UFigura 6. Resumen de la configuración de la instalación ____________ 14 UFigura 7. Instalando WAMP __________________________________ 14 UFigura 8. Instalación de WAMP completa________________________ 15 UFigura 9. Menú de WAMP____________________________________ 15 UFigura 10. Resultado de ejercicio01.html _________________________ 18 UFigura 11. Lista sin orden _____________________________________ 20 UFigura 12. Listas sin orden anidadas ____________________________ 20 UFigura 13. Lista ordenada_____________________________________ 21 UFigura 14. Lista de definiciones ________________________________ 21 UFigura 15. Resultado de ejercicio02.html _________________________ 23 UFigura 16. Resultado de ejercicio03.html _________________________ 25 UFigura 17. Resultado de ejercicio04.html _________________________ 28 UFigura 18. Resultado de ejercicio05.html _________________________ 30 UFigura 19. Tabla HTML_______________________________________ 32 UFigura 20. Tabla sin una celda _________________________________ 32 UFigura 21. Tabla con etiqueta CAPTION _________________________ 33 UFigura 22. Tabla con etiqueta TH _______________________________ 34 UFigura 23. Tabla con COLSPAN________________________________ 35 UFigura 24. Tabla con ROWSPAN _______________________________ 36 UFigura 25. Tabla con CELLSPACING y CELLPADDING _____________ 37 UFigura 26. Resultado de ejemplo06.html _________________________ 38 UFigura 27. Resultado de ejemplo08.html _________________________ 40 UFigura 28. Marcos o Frames___________________________________ 47 UFigura 29. Marcos con división horizontal_________________________ 48 UFigura 30. Acrónimos y abreviaturas ____________________________ 49 UFigura 31. Frase entre comillas ________________________________ 50 UFigura 32. Acrónimos y abreviaturas ____________________________ 50 UFigura 33. Animación flash ____________________________________ 52 UFigura 34. Tabla con THEAD, TFOOT Y TBODY___________________ 53 UFigura 35. BUTTON con imagen _______________________________ 55 UFigura 36. Lista con OPTGROUP_______________________________ 56 UFigura 37. Formulario con agrupamiento de controles _______________ 57 UFigura 38. Ejemplo de página con DIVs y SPANs __________________ 60 UFigura 39. Resultado de eventos.html ___________________________ 76 UFigura 40. Resultado del método alert ___________________________ 76 UFigura 41. Resultado de load1.html _____________________________ 77 UFigura 42. Resultado del método alert ___________________________ 78 UFigura 43. Resultado de ventanas.html __________________________ 80 UFigura 44. La nueva ventana abierta ____________________________ 81 UFigura 45. Resultado de escribir.html ____________________________ 83 UFigura 46. Resultado de formularios.html _________________________ 85 UFigura 47. Mensaje de validación _______________________________ 85 UFigura 48. Resultado de select.html _____________________________ 87

Anexos


UFigura 49. Resultado de operadores_i.php_______________________ 108 UFigura 50. Resultado de operadores_m.php _____________________ 109 UFigura 51. Resultado de comp_matrices.php _____________________ 110 UFigura 52. Resultado de instanciade.php ________________________ 111 UFigura 53. Resultado de instanciadehe.php ______________________ 111 UFigura 54. Resultado de pagina01.php__________________________ 118 UFigura 55. Resultado de pagina04.php__________________________ 121 UFigura 56. Resultado de pagina05.php__________________________ 122 UFigura 57. Resultado de pagina06.php__________________________ 123 UFigura 58. Resultado de formulario01.html_______________________ 125 UFigura 59. Resultado de pagina08.php__________________________ 125 UFigura 60. Resultado de formulario02.html_______________________ 126 UFigura 61. Resultado de pagina09.php__________________________ 126 UFigura 62. URL incluyendo datos enviados ______________________ 126 UFigura 63. Resultado de formulario03.html_______________________ 127 UFigura 64. Resultado de pagina10.php__________________________ 128 UFigura 65. Resultado de formulario03.html (segundo caso) __________ 129 UFigura 66. Resultado de pagina10.php (segundo caso) _____________ 129 UFigura 67. Resultado de formulario04.html_______________________ 129 UFigura 68. Selección de un archivo en un formulario _______________ 130 UFigura 69. Datos de un archivo enviado al servidor ________________ 131 UFigura 70. Conexión al servidor MySQL con MySQL Administrador ___ 132 UFigura 71. Inicio de MySQL Administrator _______________________ 132 UFigura 72. Menú de MySQL Administrator _______________________ 133 UFigura 73. Creando una base de datos _________________________ 133 UFigura 74. Base de datos creada en MySQL Administrator __________ 134 UFigura 75. Creando una tabla _________________________________ 134 UFigura 76. Ingreso del nombre de la tabla _______________________ 135 UFigura 77. Definición de campos de la tabla______________________ 135 UFigura 78. Estructura de la tabla_______________________________ 135 UFigura 79. Confirmación para la creación de la tabla _______________ 136 UFigura 80. Lista de elementos incluyendo la tabla recientemente creada 136 UFigura 81. Interfaz de phpMyAdmin ____________________________ 137 UFigura 82. Interfaz para cear una nueva base de datos _____________ 138 UFigura 83. Creando la base de datos dbdemo.____________________ 138 UFigura 84. Creando la tabla persona. ___________________________ 139 UFigura 85. Especificación de los campos de la tabla _______________ 139 UFigura 86. Autoincremento en el campo idpersona. ________________ 139 UFigura 87. Estructura de la tabla creada_________________________ 140 UFigura 88. Menú de operaciones que se pueden realizar sobre las tablas de la base de datos.____________________________________________ 140 UFigura 89. Formularios para la inserción de registros_______________ 141 UFigura 90. Datos para los nuevos registros ______________________ 141 UFigura 91. Operación realizada con éxito y el script SQL que ha sido ejecutado. 142 UFigura 92. Listado de registros de la tabla persona ________________ 142 UFigura 93. Resultado de pagina13.php__________________________ 144 UFigura 94. Resultado de pagina14.php__________________________ 145 UFigura 95. Formulario05.html _________________________________ 146 UFigura 96. Resultado de pagina15.php__________________________ 147 UFigura 97. Formulario de edición de un registro ___________________ 149

Anexos


UFigura 98. Resultado de pagina17.php__________________________ 149 UFigura 99. Archivos de instalación de PostgreSQL_________________ 151 UFigura 100. Asistente de instalación de PostgreSQL ________________ 151 UFigura 101. Inicio del asistente de instalación _____________________ 152 UFigura 102. Notas de instalación _______________________________ 152 UFigura 103. Opciones de instalación_____________________________ 153 UFigura 104. onfiguración del servicio ____________________________ 153 UFigura 105. Error en la cuenta _________________________________ 154 UFigura 106. Password aleatorio ________________________________ 154 UFigura 107. Cuenta del superusuario ____________________________ 154 UFigura 108. Habilitar lenguaje procedural _________________________ 155 UFigura 109. El asistente está listo para iniciar la instalación___________ 155 UFigura 110. Instalando PostgreSQL _____________________________ 156 UFigura 111. Instalación completa _______________________________ 156 UFigura 112. pgAdmin III_______________________________________ 157 UFigura 113. Conexión al servidor desde pgAdmin III ________________ 157 UFigura 114. Listado de elementos del servidor _____________________ 158 UFigura 115. Creando una base de datos _________________________ 158 UFigura 116. Datos de la nueva base de datos _____________________ 159 UFigura 117. Creando una nueva tabla ___________________________ 159 UFigura 118. Propiedades de la tabla_____________________________ 160 UFigura 119. Propiedades de una nueva columna ___________________ 160 UFigura 120. Columna nombres de la tabla persona _________________ 161 UFigura 121. Clave primaria de la tabla persona ____________________ 161 UFigura 122. Columnas pertenecientes a la clave primaria ____________ 162 UFigura 123. Script SQL generado para la creación de la tabla _________ 162 UFigura 124. Final de la creación de la tabla _______________________ 163 UFigura 125. Menú desplegable de la tabla ________________________ 163 UFigura 126. Vista de datos de la tabla ___________________________ 164 UFigura 127. Editando datos en la tabla ___________________________ 164 UFigura 128. Interfaz de phpPgAdmin ____________________________ 165 UFigura 129. Logeo de usuarios al servidor PostgreSQL ______________ 165 UFigura 130. Interfaz de ingreso a phpPgAdmin ____________________ 166 UFigura 131. Creando una nueva base de datos ____________________ 166 UFigura 132. Base de datos dbdemo creada _______________________ 167 UFigura 133. Menú de elementos de la base de datos________________ 167 UFigura 134. creando la tabla persona ____________________________ 167 UFigura 135. Ingresando los campos de la tabla ____________________ 168 UFigura 136. Autoincremento para la clave primaria _________________ 168 UFigura 137. Estructura de la tabla_______________________________ 168 UFigura 138. Formulario de ingreso de nuevos registros ______________ 169 UFigura 139. Listado de registros ________________________________ 169 UFigura 140. Activando la extensión php_pgsql _____________________ 170 UFigura 141. Resultado de pagina23.php__________________________ 171 UFigura 142. Resultado de pagina24.php__________________________ 172 UFigura 143. Resultado de formulario06.html_______________________ 173 UFigura 144. Resultado de pagina25.php__________________________ 174 UFigura 145. Resultado de pagina26.php__________________________ 175 UFigura 146. Resultado de pagina27.php__________________________ 176 UFigura 147. Resultado de pagina28.php__________________________ 176 UFigura 148. Creando un nueva base de datos _____________________ 177

Anexos


UFigura 149. Nombre de la nueva base de datos____________________ 177 UFigura 150. Creando una nueva tabla ___________________________ 178 UFigura 151. Especificación de los campos de la tabla _______________ 178 UFigura 152. Activando la extensión php_mssql ____________________ 179 UFigura 153. Creando un usuario para acceso a la base de datos ______ 179 UFigura 154. Establecimiento de los permisos del usuario_____________ 180 UFigura 155. Resultado de pagina30.php__________________________ 181 UFigura 156. Resultado de pagina32.php__________________________ 183 UFigura 157. Resultado de pagina33.php__________________________ 185 UFigura 158. Resultado de pagina34.php__________________________ 185 UFigura 159. Resultado de pagina35.php__________________________ 186 UFigura 160. Resultado de pagina20.php__________________________ 188 UFigura 161. Resultado de pagina21.php__________________________ 189 UFigura 162. Resultado de autocarga.php _________________________ 190 UFigura 163. Resultado de mysqli-connect.php _____________________ 195 UFigura 164. Resultado de mysqli-lista.php ________________________ 196 UFigura 165. Resultado de mysqli-listado.php ______________________ 197 UFigura 166. Resultado de formulario08.htm _______________________ 198 UFigura 167. Resultado de mysqli-insertar.php _____________________ 199 UFigura 168. Resultado de mysqli-editar.php _______________________ 200 UFigura 169. Resultado de mysqli-actualizar.php____________________ 201 UFigura 170. Resultado de mysqli-eliminar.php _____________________ 201 UFigura 171. Resultado de mysqli-listado-paginacion.php _____________ 203 UFigura 172. MVC____________________________________________ 205 UFigura 173. Tres capas_______________________________________ 207 UFigura 174. Resultado de controlador_bd.php _____________________ 214 UFigura 175. Resultado de pdo-lista.php __________________________ 219 UFigura 176. Resultado de pdo-listado.php ________________________ 220 UFigura 177. Resultado de pdo-nuevo.php_________________________ 221 UFigura 178. Resultado de pdo-editar.php _________________________ 223 UFigura 179. Resultado de md5.php______________________________ 227 UFigura 180. Resultado de inyeccion01.php________________________ 231 UFigura 181. Nuevo resultado de inyeccion01.php___________________ 231 UFigura 182. Tercer resultado de inyeccion01.php___________________ 232 UFigura 183. URL con inyección SQL_____________________________ 232 UFigura 184. Resultado de la inyección SQL _______________________ 232 UFigura 185. Evitando la inyección SQL___________________________ 234 UFigura 186. Resultado sin inyección realizada _____________________ 234 UFigura 187. Tabla usuario_____________________________________ 235 UFigura 188. Resultado de formulario09.html_______________________ 236 UFigura 189. Resultado de inyeccion03.php________________________ 236 UFigura 190. Logeo con inyección SQL ___________________________ 237 UFigura 191. Nuevo resultado de inyeccion03.php___________________ 237 UFigura 192. Tercer resultado de inyeccion03.php___________________ 238 UFigura 193. Resultado de formulario10.html_______________________ 239 UFigura 194. Resultado de comillas-magicas.php ___________________ 239 UFigura 195. Resultado de inyeccion04.php________________________ 241 UFigura 196. Resultado de ingreso01.php _________________________ 244 UFigura 197. Ingreso01.php con datos incorrectos___________________ 245 UFigura 198. Logeo incorrecto __________________________________ 245 UFigura 199. Autenticación http con PHP __________________________ 246

Anexos


UFigura 200. Resultado de auth01.php____________________________ 247 UFigura 201. Autenticación con datos correctos_____________________ 247 UFigura 202. Resultado de auth01.php con datos correctos ___________ 247 UFigura 203. Tabla usuario_____________________________________ 248 UFigura 204. registro de un usuario ______________________________ 248 UFigura 205. Resultado de entrar.php ____________________________ 249 UFigura 206. Resultado de entrar.php con datos incorrectos ___________ 251 UFigura 207. Resultado de mysqli-listadologeado.php ________________ 252 UFigura 208. Ejemplo1 de CAPTCHA_____________________________ 256 UFigura 209. Ejemplo2 de CAPTCHA_____________________________ 256 UFigura 210. Ejemplo3 de CAPTCHA_____________________________ 256 UFigura 211. Resultado de gdinfo.php ____________________________ 257 UFigura 212. Resultado de imagen01.php _________________________ 258 UFigura 213. Resultado de imagen02.php _________________________ 258 UFigura 214. Resultado de imagen03.php _________________________ 259 UFigura 215. Resultado de imagen04.php _________________________ 260 UFigura 216. Resultado de imagen05.php _________________________ 262 UFigura 217. Resultado de imagen06.php _________________________ 263 UFigura 218. Resultado de pdf01.php_____________________________ 265 UFigura 219. Resultado de pdf02.php_____________________________ 268 UFigura 220. Segunda página de pdf01.php________________________ 268 UFigura 221. Resultado de pdf03.php_____________________________ 272 UFigura 222. Resultado de pdf04.php_____________________________ 273 UFigura 223. Abriendo xls01.php ________________________________ 275 UFigura 224. Hoja de calculo con xls01.php ________________________ 275 UFigura 225. Abriendo xls02.php ________________________________ 276 UFigura 226. resumen.xls generado con xls02.php __________________ 276 UFigura 227. Resultado de xls03.php _____________________________ 278 UFigura 228. Resultado de xls04.php _____________________________ 279 UFigura 229. Abriendo xls05.php ________________________________ 280 UFigura 230. Resultado de xls05.php _____________________________ 280 UFigura 231. Resultado de xajax01.php ___________________________ 283 UFigura 232. Resultado de xajax02.php ___________________________ 284 UFigura 233. Cambio de contenido con xajax02.php _________________ 285 UFigura 234. Resultado de xajax03.php ___________________________ 286 UFigura 235. Resultado de xajax04.php ___________________________ 288 UFigura 236. Ocultando un DIV _________________________________ 288 UFigura 237. Resultado de xajax05.php ___________________________ 289 UFigura 238. Resultado de xajax06.php ___________________________ 290 UFigura 239. Imagen cargada con xajax06.php _____________________ 291 UFigura 240. Segunda imagen cargada con xajax06.php______________ 291 UFigura 241. Resultado de xajax07.php ___________________________ 292 UFigura 242. Ventana nueva con xajax07.php ______________________ 293 UFigura 243. Mensaje utilizando eventos en xajax07.php _____________ 293 UFigura 244. Resultado de xajax08.php ___________________________ 294 UFigura 245. Ingreso de datos en xajax08.php______________________ 295 UFigura 246. Mensaje resultante en xajax08.php ____________________ 295 UFigura 247. Formulario de xajax09.php __________________________ 296 UFigura 248. Deshabilitando una caja de texto con xajax______________ 297 UFigura 249. Mensaje de resultado de xajax09.php __________________ 297 UFigura 250. Incluyendo objetos inhabilitados ______________________ 297

Anexos


UFigura 251. Mensaje resultante incluyendo objetos inhabilitados_______ 297 UFigura 252. Error comun en xajax_______________________________ 298 UFigura 253. Resultado de xajax-buscar.php _______________________ 300 UFigura 254. Datos de búsqueda en xajax-buscar.php _______________ 300 UFigura 255. Resultado de la búsqueda en xajax-buscar.php __________ 300 UFigura 256. Listado de persona con xajax ________________________ 304 UFigura 257. Inserción de registros con xajax ______________________ 305 UFigura 258. Edición de registro con xajax_________________________ 305 UFigura 259. Selección de registros con xajax ______________________ 306 UFigura 260. Búsqueda de registros con xajax______________________ 306

Documents

LIBRO PHP