Sunteți pe pagina 1din 324

Desar r ol l o Web c on

PHP
Oscar Capuay Uceda

Contenido

DEDICATORIA 7
AGRADECIMIENTOS 7
INTRODUCCIN 9
I. PREPARANDO LA PLATAFORMA DE DESARROLLO 11
INSTALACIN DEL SERVIDOR WEB Y PHP 11
INSTALACIN 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 HIPERVNCULOS 25
IMGENES 28
TABLAS 31
FORMULARIOS 38
HTML 4 45
J AVASCRIPT 61
ELEMENTOS BSICOS 62
COMENTARIOS 62
LITERALES 63
TIPOS DE DATOS 64
VARIABLES 64
OPERADORES 65
ESTRUCTURAS DE CONTROL 68
OBJ ETOS 70
OBJ ETOS PREDEFINIDOS 71
EVENTOS 75
DEFINICIN MEDIANTE CDIGO 77
MODELO DE OBJ ETOS DEL DOCUMENTO 78
OBJ ETO WINDOW 79
OBJ ETO DOCUMENT 82
OBJ ETO FORM 83
OTROS OBJ ETOS 88
FICHEROS .J S 90
HOJ AS DE ESTILO EN CASCADA 91
SINTAXIS Y TIPOS BSICOS DE DATOS EN CSS2 95
PALABRAS CLAVE 97
III. INICIANDO LA PROGRAMACIN CON PHP 99
QUE ES PHP? 99
VARIABLES 99
CONSTANTES 99
TIPOS DE DATOS 100
EXPRESIONES 100
OPERADORES 102
OPERADORES DE ARITMTICA 103
OPERADORES DE ASIGNACIN 103
OPERADORES DE COMPARACIN 104
OPERADORES DE CONTROL DE ERRORES 105
OPERADORES DE EJ ECUCIN 106
OPERADORES DE INCREMENTO/DECREMENTO 106
OPERADORES DE LGICA 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
INSTALACIN 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 OBJ ETO 187
EXTENDIENDO OBJ ETOS 188
AUTO CARGA DE OBJ ETOS 189
ACCESO A MYSQL CON PHP ORIENTADO A OBJ ETOS 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 OBJ ECT 215
CLASES PREDEFINIDAS 215
CONEXIONES CON PDO 218
EJ ECUCIN DE SENTENCIAS PREPARADAS CON PDO 221
VII. SEGURIDAD WEB 225
SEGURIDAD EN EL SISTEMA DE ARCHIVOS 225
SEGURIDAD EN BASE DE DATOS 227
INYECCIN SQL 229
SESIONES 242
AUTENTIFICACIN HTTP CON PHP 246
LOGIN 248
CAPTCHA 253
VIII. GENERACIN DE ARCHIVOS CON PHP 257
IMGENES 257
ARCHIVOS PDF 264
FPDF 264
ARCHIVOS XLS 274
IX. PHP + AJAX 281
AJ AX 281
XAJ AX 282
EVENTOS CON XAJ AX 291
TRABAJ O CON FORMULARIOS EN XAJ AX 293
ERROR COMN 298
BSQUEDA EN BASE DE DATOS CON XAJ AX 299
ADMINISTRACIN DE DATOS CON AJ AX 301
CONTROLADOR CON AJ AX 301
CAPA DE DATOS CON AJ AX 306
VISTA CON AJ AX 308
X. REFERENCIAS BIBLIOGRAFICAS 313
XI. ANEXOS 314
LISTA DE EJ EMPLOS 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 bendicin de Dios, al apoyo y
aliento de mis padres, a la colaboracin de mis
hermanos Carlos, J aime y Benjamn y al amor de mi
esposa Kelly.

Introduccin

Introduccin

PHP desde el ao 1997 ha crecido aceleradamente, su versin 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 comparacin 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 aos desarrollando
aplicaciones Web.






Oscar E Capuay Uceda 9
Preparando la plataforma de desarrollo

I. Preparando la plataforma de desarrollo

Instalacin del servidor Web y PHP
Instalacin 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 continuacin los pasos de la instalacin:


Figura 1. Inicio de la instalacin de WAMP
Oscar E Capuay Uceda 11
Preparando la plataforma de desarrollo


Figura 2. Licencia de uso de WAMP

Si estamos de acuerdo con los trminos de la licencia, seleccionamos I
ccept the agreement y presionamos el botn Next para continuar.

a

Figura 3. Destino de la instalacin de WAMP

Luego seleccionamos la ubicacin de los paquetes que vamos a instalar.

Oscar E Capuay Uceda 12
Preparando la plataforma de desarrollo


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.

Despus elegimos si queremos que WAMP se inicie automticamente
cuando se inicie una sesin en el sistema operativo.


Oscar E Capuay Uceda 13
Preparando la plataforma de desarrollo


Figura 6. Resumen de la configuracin de la instalacin

Ahora nos muestra el resumen de la configuracin elegida antes del inicio de
la instalacin. Slo nos queda presionar el botn Install para instalar los
programas.


Figura 7. Instalando WAMP


Oscar E Capuay Uceda 14
Preparando la plataforma de desarrollo


Figura 8. Instalacin de WAMP completa

Finalmente la instalacin 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
Oscar E Capuay Uceda 15
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 informacin de forma global. Desde
ra definicin, el lenguaje HTML ha sido un lenguaje utilizado
s electrnicos pero es un lenguaje que
aciones electrnicas (aplicaciones Web
es, educativas, financieras y tambin muy utilizada en buscadores,
e HTML, cuenta con un conjunto de etiquetas o tambin llamadas
s cuales funcionan de la siguiente manera:
rla as: <br />.
conocimientos de HTML Dinmico DHTML, debido a que en los
documentos Web no slo se escribe un lenguaje sino que es necesario
utilizar diferentes lenguajes para la implementacin de las diversas rutinas
que se pueden requerir para un buen funcionamiento de la aplicacin.
Debido a esto a continuacin veremos un repaso rpido de los temas
relacionados con DHTML.

HTML

HTML es un lenguaje que permite definir los elementos que conforman una
pgina Web. Los diseadores y programadores de pginas Web utilizan el
lenguaje HTML de modo que los navegadores que utilizamos los usuarios
muestran las pginas Web despus de interpretar su contenido HTML.

l W3C E
universal
su prime
exclusivamente para crear documento
se utiliza en la mayora de aplic
comercial
etc.).

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 pgina Web, que est entre ambas
etiquetas (de inicio y cierre), estar influenciado por la accin 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 maysculas o minsculas. Pero se
recomienda escribirlas en minsculas. Para diferenciarlas del texto comn,
las escribiremos en maysculas.
Oscar E Capuay Uceda 16
DHTML


Toda pgina 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 finalizacin es con
cera se coloca la informacin sobre la pgina Web,
ero hay que tener en cuenta que esta informacin no se muestra en el
r, excepto el ttulo de la pgina que se muestra en la barra de ttulo
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 pgina Web deben estar en el siguiente
<HEAD>
<TITLE> Ttulo de la p
/HEAD>

ner varios ttulos, los cuales escribiremos
y , etc. (hasta H6), el nmero
xisten otros tags como por ejemplo, los separadores horizontales
documento.

L
</HEAD>. En la cabe
p
navegado
de la ven
<TITLE> y </TITLE>.

, El cuerpo
Dentro de ste est todo lo que queremos
(texto, imgenes, etc.) principal

Por lo mencionado anteriormente, podemos concluir que la estructura de un
documento Web (pgina Web) tiene dos partes: e
que de acuerdo a las etiquet
etiquetas H
orden:

<HTML>
gina </TITLE>
<
<BODY>
[En este lugar escribiremos el contenido de la pgina]
</BODY>
</HTML>

Antes de crear nuestra primera pgina 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 pgina Web se caracteriza por justificarse de acuerdo al ancho que
tome la ventana, adems cuando queramos pasar a un nuevo prrafo, es
ecesario utilizar la etiqueta <P>. n

El contenido de la pgina puede te
entre las etiquetas <H1> y </H1>, <H2> </H2>
en la etiqueta de ttulo indica el tamao de los caracteres de la frase o
palabra. El tamao mayor es el correspondiente al nmero 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 mayora de ellos). Esta etiqueta centra todo lo
que est dentro de ella, ya sea texto, imgenes, 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
Oscar E Capuay Uceda 17
DHTML

tan ancha como la pantalla, y con la apariencia de estar embutida sobre el
fondo, o podemos tambin especificar su ancho en pxeles o en porcentaje
respecto al ancho de la ventana.

era pgina Web
<HEAD>
</TITLE>
mi primera pgina 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
diseo pero pronto haremos pginas ms complejas.
<P> Este es el segundo prrafo.
</BODY>
</HTML>

Resultado Web

Figura 10. Resultado de ejercicio01.html

Cuando program
sea necesario, mayorme
emos, tratemos de colocar algunas lneas en blanco cuando
nte para separar la cabecera del cuerpo de la
pgina, y adems justificar a la izquierda las lneas en varios niveles, para
identificar con mucha mayor claridad el cdigo que se encuentra dentro de
ciertas etiquetas, como lo podemos notar en el ejemplo anterior. De hecho,
todo el cdigo podra estar escrito dentro de una sola lnea. 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 produciran errores.

Oscar E Capuay Uceda 18
DHTML

Formato de Texto con
texto, este
os crear un
s la etiqueta <P>, esta etiqueta inserta una lnea en
ma del prrafo anterior. Pero si deseamos realizar
nea, es decir pasar a la siguiente lnea sin incluir una en blanco,
mos el tag <BR>. Esta etiqueta por su funcionamiento no tiene una
y Cursiva
bajamos con texto formateado, las caractersticas ms utilizadas
a y cursiva. Pues en HTML, podemos darle esas caractersticas 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 Subndices
matemticas puede interesar poder escribir ndices y
nsiguen con las etiquetas <SUP> </SUP> y <SUB>
te. Por ejemplo: m
2
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 definicin.

Una lista sin orden (Unordered List) sirve para presentar cosas que, por no
tener un orden determinado, no necesitan ir precedidas por un nmero. Su
estructura es la siguiente:

<UL>
<LI> Naranja
LI> Manzana
HTML
En ejemplo anterior, podemos notar que cuando colocamos
ce sin ningn formato en especial. Slo, cuando quisim apare
nuevo prrafo, utilizamo
blanco despus de la lti
un salto de l
utilizare
etiqueta de cierre.

Negrita
Cuando tra
egrit son: n
exto u t
formato cursiva.
c rre (</B> y </I ie
E
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos
palabras observamos que el navegador slo reconoce uno de ellos. Si
queremos forzarle a que lo haga, debemos poner el cdigo "&nbsp;" (non-
breaking space).

Super
En las frmulas
subndices, que se co
</SUB> respectivamen
y 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).

Oscar E Capuay Uceda 19
DHTML

Resultado Web

Figura 11. Lista sin orden

Adems podemos anidar una lista dentro de otra. Por ejemplo:
<LI> Bacalao
<UL>
<LI> Mamferos
<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 nmero

Las Lista
rden d o
est en que en el resultado aparecer automticam
ativo para cada elemento de la lista. correl

<OL>
troduccion <LI> In
<LI> Conceptos Basicos
<LI> Aplicaciones
Oscar E Capuay Uceda 20
DHTML

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

Figura 13. Lista ordenada
listas sin orden, tambin se pueden anidar las listas
ordenadas.

El tercer tipo lo forman las listas de definicin. Como su nombre indica, son
apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir
englobada entre las etiquetas <DL>y </DL>. Y a diferencia de las dos que
hemos visto, cada rengln 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
definicin 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
Oscar E Capuay Uceda 21
DHTML

Comentarios no visibles en la pantalla
A veces es muy til escribir comentarios en el documento HTML sobre todo
cuando creamos pginas dinmicas, el cdigo que escribimos, nos pueden
ervir para recordar posteriormente sobre lo que hicimos, y s
q
que no queremos
stos dos smbolos:
!-- y --> .

Por eje

<!-- Est e rte -->
ici E>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cur
</CENTER>
<HR>
LI> Software de Aplicacin 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 Aplicacin II
</UL>
<LI> Sistema Informacin Ge
/UL> <

L
<OL>
<LI> Ingeni
<LI> Sistemas de Informacin G
<LI> Rede
</OL>
</BODY>
</HTML>
Oscar E Capuay Uceda 22
DHTML

Resultado Web:

Figura 15. Resultado de ejercicio02.html

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, provocara una
egador podra interpretarlos como el comienzo o
nal de una etiqueta, en vez de un carcter ms del texto.
Tabla 1. Cdigos HTML para caracteres especiales
&lt; obtenemos < (less than, menor que)
Caracteres especiales
Hemos podido notar en los ejemplos anteriores, que las palabras no
aparecen con tilde
especiales, esto debido a
texto. Una de ellas es d
comando escrito entre los smbolos "<" y ">". Por ta
e
ambigedad, ya que el nav
fi

Para superar estas limitaciones, existen cdigos para escribir estos
caracteres y otros relacionados junto con las etiquetas.

&gt; obtenemos > (greater than, mayor que)
&amp; obtenemos & (ampersand)
&quot; obtenemos " (double quotation)

Podemos ver, que estos cdigos empiezan siempre con el signo & y
digos para escribir letras
s vocales acentuadas se
acaban siempre con ;. De igual manera, existen c
especficas de distintos idiomas. Los cdigos de la
Oscar E Capuay Uceda 23
DHTML

forman comenzando con &, seguido de la vocal en cuestin, 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 intil ya que si
ngn caso de estas convenciones,
scribiendo las letras acentuadas y dems signos directamente, es muy
es ocurra lo mismo a todos los que
ccedan a nu avegadores distintos.
izaremos el
os siguientes:
p

Tabla 2. Cdigos HTML para caracteres especiales
- &aacute; - &Aacute;
- &eacute; - &Eacute;
- &iacute; - &Iacute;
- &oacute; - &Oacute;
- &uacute; - &Uacute;
- &ntilde; - &Ntilde;
- &#191; - &#161;
T
escribimos nuestro texto sin hacer ni
e
posible que el resultado lo veamos correctamente en nuestro navegador,
pero nunca podremos estar seguros que l
estras pginas con otros n a

Para corregir el ejercicio anterior con vocales acentuadas util
siguiente 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 l S
<UL>
<LI> Redes de computadoras
<LI> Ingenier&iacute;a de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicaci&oacute;n I
<LI> Software de Aplicaci&oacute;n II
</UL>
<LI> Sistemas de Informaci&oacute;n Gerencial
/UL> <
Los cursos que me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI> Ingenier&iacute;a de Software
Oscar E Capuay Uceda 24
DHTML

<LI> Sistemas de Informaci&oacute;n Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
/HTML> <

Resultado Web:

Figura 16. Resultado de ejercicio03.html
te en este elemento: el Hipervnculo o
tos repartidos
s, en general, tienen la siguiente estructura:
yyy </A>

xxx : es el destino del hipervnculo.
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 hipervnculos
El xito de la Web, se basa justamen
enlace, pues nos da la posibilidad de unir los distintos documen
por todo el mundo.

Estructura de los enlaces
Los enlace

<A REF ="xxx" >
Oscar E Capuay Uceda 25
DHTML


Tipos de enlaces
Los enlaces los podemos clasificar en cuatro tipos:

Enlaces dentro de la misma pgina
Enlaces con otra pgina nuestra
Enlaces con una pgina fuera de nuestro sistema
Enlaces con una direccin de correo electrnico

Enlaces dentro de la misma pgina
Cuando tenemos documentos (o pginas Web) muy extensos, es
adecuado trabajar con este tipo de enlaces, pues nos permite dar un salto
desde una posicin a otra determinada, dentro de la misma pgina. En
este caso, lo que antes hemos llamado XXX, es decir, el destino del
enlace, en este caso el sitio dentro de la pgina a donde queremos saltar
se 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
pgina nuestra
arias
mpre
pal y otras enlazadas a ella.
<A
,
#marcador (la palabra marcador puede ser cu
aparecern
es, entonces:

<A HREF=" #marcador" > YYY </A>.

En el sitio exacto a donde que
tiqueta: <A NAME=" marcador" e

or ejemplo, si quiero sa P
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 sie p
con una pgina que ser la Inicial o princi

Supongamos que queremos enlazar con la pgina creada en el ejemplo del
captulo 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 pgina nuestra en vez de ir
al principio de la pgina, adonde va por defecto, en ese sitio tenemos que
colocar una marca o marcador (ver seccin 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 pgina (supongamos que se llame
pag5.html), pero a un sitio concreto de esa pgina, donde he puesto el
arcador <A NAME="cursos"></A>. Entonces la etiqueta tiene que ser: m
HREF="pag5.html#cursos">Cursos </A>.

Oscar E Capuay Uceda 26
DHTML

Si la pgina a la que quiero saltar est, por ejemplo en el subdirectorio
a la inversa, si quiero saltar desde una pgina a otra que est en un
ue haber puesto
irectorio anterior.
os subdirectorios, y
emos evitar todas
(es
dor distinto), es necesario conocer su direccin
source Locator). El URL podra ser, adems de
recciones correctamente (respetando las
las distinguen)
rio@servidoremail">Texto del enlace</A>
CENTER><H1> Mis p&aacute;ginas favoritas </H1></CENTER>
stas son mis p&aacute;ginas favoritas:
EF="http://www.desarrolloweb.com">Desarrollo Web</A>
REF="http://www.forosdelweb.com">Foros del Web</A>
cursos, entonces en la etiqueta tendra que haber puesto "cursos/pag5.html".
Segn el prrafo anterior, la etiqueta tiene que ser: <A
HREF="cursos/pag5.html#cursos">Cursos </A>.

Y
directorio anterior o nivel superior, en la etiqueta tendra q
"../pag5.html". Esos dos puntos (..) hace que se dirija al d
Obsrvese que se debe utilizar el smbolo / para indicar l
o este otro \, que es propio nicamente de Windows. Pod n
estas complicaciones colocando todos los archivos en un solo directorio,
pero si tenemos muchas pginas lo mejor es tenerlas en directorios, pues
nos facilitar el mantenimiento de ellas.

Enlaces con una pgina fuera de nuestro sistema
i queremos enlazar con una pgina que est fuera de nuestro Sitio Web S
decir, que est en un servi
ompleta, o URL (Uniform Re c
la direccin de una pgina del Web, una direccin de ftp, gopher, etc.

Una vez conocida la direccin (o URL), la colocamos en vez de lo que
hemos llamado anteriormente xxx (el destino del enlace). Si queremos
enlazar con la pgina de la Nasa (cuyo URL es: http://www.nasa.com), la
etiqueta sera:

<A HREF="http://www.nasa.com/">Pgina inicial de la Nasa </A>

s importante escribir estas di E
maysculas y minsculas, pues los servidores UNIX s

Enlaces con una direccin de Correo Electrnico
En este caso, sustituimos lo que se ha llamado antes xxx (el destino del
enlace) por mailto: seguido de la direccin de correo electrnico. 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>
Oscar E Capuay Uceda 27
DHTML

Resultado Web:

Figura 17. Resultado de ejercicio04.html
Imgenes
a etiqueta que nos sirve para incluir imgenes en las pginas Web es muy
similar a la de enlaces a otras pginas. A esta etiqueta se le indica el nombre
zacin de un archivo que contiene una imagen.
na imagen llamada imagen.gif (el nombre que
pueden aadir otros comandos, tal como ALT
in (una palabra o una frase breve) de la
mitir, es en beneficio de los que accedan a nuestra
navegador en forma de texto slo. 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 u in
tenga el archivo).

etiqueta se Dentro de la

<IMG SRC="imagen.gif" ALT="descripcin">

on ALT se inserta una descripc C
imagen. ALT se puede o
pgina con un programa
capaces de ver la image

S
nombre. Pero si se encontrara en otro lugar es necesario indicar su
ubicacin exacta, ut

Un aspecto muy importante a tener en cuenta es el tamao de las imgenes,
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 es
intentando cargar nuestra pgina se canse de esperar, y desista de ello.

Oscar E Capuay Uceda 28
DHTML

Para elegir la posicin de la imagen con respecto al texto hay distintas
osibilidades. La ms sencilla es colocarla entre dos prrafos, con un titular
.
a posicin 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 ms
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 pgina 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 cmo efectivamente enlaza con la pgina
deseada. Obsrvese adems que la imagen est rodeada de un rectgulo
del color normal en los enlaces. Si no se desea que aparezca ese
rectngulo, hay que incluir la imagen el atributo
ORDER=0, es decir:
gen, comprobamos que acta
mbin como enlace aunque carezca del rectngulo de color. Esto puede
resultar ms esttico, pero se corre el riesgo de que el usuario no se d
cuenta de que la imagen
genes
p
a un lado

De momento nos vamos a limitar a escoger l
a imagen (si es que queremos ponerl respecto a l
puede poner arriba, e
ando AL aade 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 pgina. Para estos casos se utilizan generalmente imgenes pequea
(iconos), aunque se puede usar cualquier tipo de imagen.

Segn 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 ima
ta
sirve de enlace.

Ejemplo 5: Im

<HTML>
<HEAD>
Oscar E Capuay Uceda 29
DHTML

<TITLE> Ejercicio 5 </TITLE>
icio 5</H1></CENTER>
entos b&aacute;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 pgina Web. Tiene todos los elem
im&aacute;genes.
<P><A HREF ="ejerci
height="22" border="0">
<P><A
height=
HREF ="ejerci
<CENTER>
<H3> Desarrollo Web con PH
<IMG SRC="imagenes/tecl
</CENTE
</BODY>
</HTML>


Figura 18. Resultado de ejercicio05.html

Oscar E Capuay Uceda 30
DHTML

Tablas
ara crear tablas son:
ara especificar el inicio y final de la tabla.
etiqueta le podemos aadir 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
especificar
aracters c



Por ejemplo: si queremos una tabla con un borde de una unidad de espesor,
escribiremos el siguiente cdigo:


[resto de las etiquetas]
</TABLE>

D
contendr la tabla.
Las etiq
E
que tenga la tabla. Las etiquetas para crear columnas son: <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imgenes, 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>
<!-- Lnea horizontal con 75% de ancho de la ve
<HR width=75%>
<A HREF="ejercicio01.html"> <IMG SRC="iconos/nuevo.gif" WIDTH=20 HEIGHT=22
border="0"> </A>
<TABLE BORDER=1>
<TR><TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD></TR>
TR><TD>fila2-celda1</TD> <TD <
</TABLE>
</BODY>
<

Oscar E Capuay Uceda 31
DHTML

Resultado Web:

Figura 19. Tabla HTML
Que pasara si creamos filas con diferente numero de columnas?, el
un espacio vaco en dicha posicin. Si en la tabla del
ejercicio 6 eliminamos la tercera celda de la segunda fila, es decir si
borramos <TD>fila2-celda3</TD>, resultar:

navegador crear

Figura 20. Tabla sin una celda
ular a la tabla, es decir un texto situado en la parte
o. ste titular se consigue
etiquetas: <CAPTION> y </CAPTION> para su inicio y finalizacin,
cuenta el ejercicio anterior, vemos como podemos utilizar esta
ORDER="1">
desiguales </caption>

Titular de la tabla
Se puede aadir un tit
superior de la tabla que indica cul es su contenid
con las
respectivamente.

Tomando en
etiqueta:

<table B
<caption>Ejemplo de filas
<tr>
Oscar E Capuay Uceda 32
DHTML

<td>fila1-celda1</td>
<td>fila1-celda2</td>
<td>fila1-celda3</td>
a2-celda2</td>
/table>
R sultado Web:
</tr>
<tr>
<td>fila2-celda1</td>
<td>fil
</tr>
<

e

Figura 21. Tabla con etiqueta CAPTION

dems de las celdas que contienen datos normales, podemos poner, si no A s
umna 2</TH> <TH>Columna 3</TH>
</TR>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
</TR>
</TABLE>
conviene, celdas de cabecera, que se distinguen por estar el texto de dichas
celdas en negrita y centrado. Estas celdas se insertan escribiendo la
etiqueta: <TH> y </TH>. Vamos a aadir, en el ejemplo anterior, una fila de
estas celdas de cabecera, antes de las otras dos que ya existan:

<TABLE BORDER="1">
<CAPTION>Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>Columna 1</TH> <TH>Col
Oscar E Capuay Uceda 33
DHTML


Resultado Web

Figura 22. Tabla con etiqueta TH

Ubicacin contenido dentro de la celda
El contenido de una celda por defecto est alineado a la izquierda. Pero se
puede cambiar aadiendo dentro de la etiqueta de la celda los siguientes
atributos:

<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>

n el caso de la etiqueta <TH>, por defecto el texto esta en el centro de la
celdas tienen alineacin vertical es en el medio. Esto
mbin se puede cambiar, aadiendo dentro de la etiqueta de la celda los
s atributos:
</TD>
entro </TD>
N=BOTTOM> Abajo </TD>
ensiones de la tabla
lmente dimensiona el tamao de la tabla de acuerdo con
s, de columnas, por el contenido de las celdas, espesor de
tambin podemos
tos son: WIDTH y
T (ancho y alto), los cuales pueden estar expresados en pixeles o en
sin de la pantalla.
otras varias
arnos que una celda se extienda sobre otras varias.
e consigue aadindo dentro de la etiqueta de la celda los atributos
PAN=nmero para extenderse sobre un nmero determinado de
E
celda.

Por defecto, las
ta
siguiente

<TD VALIGN=TOP> Arriba
N=CENTER> C <TD VALIG
<TD VALIG

Cambiando las dim
r norma El navegado
el nmero de fila
los bordes, etc. Pero nosotros por medio de atributos
modificar las dimensiones de una tabla. Estos atribu
HEIGH
porcentaje de la dimen
Celdas que abarcan a
A veces puede interes
Esto s
COLS
Oscar E Capuay Uceda 34
DHTML

columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un
e filas.
lo, en la tabla anterior vamos a aadir una fila con una sola celda,
a tres columnas:
ORDER="1">
plo de filas desiguales </CAPTION>

<TH>Columna 1</T H>
</TR>
<TR>
elda sobre 3 columnas </TD>
<TD>fila1-celda1</TD>
</TR>
<TR>
< f
<T >f
</TR>
/TA E
nmero determinado d

Por ejemp
a que abarc

TABLE B <
<CAPTION>Ejem
TR> <
H> <TH>Columna 2</TH> <TH>Columna 3</T

<TD COLSPAN=3> C
<TR>
<TR>

<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>

TD>ila2-celda1</TD>
ila2-celda2</TD> D
< BL >

Resultado Web

Figura 23. Tabla con COLSPAN
pero que
barque tambin a la siguiente:
DER="1">
<TR>

O, en la misma tabla, vamos a aadir una celda en la primera fila.
a


<TABLE BOR
<CAPTION>Ejemplo de filas desiguales </CAPTION>
Oscar E Capuay Uceda 35
DHTML

<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>
-celda2</TD>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
<TR>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2
</TR>
</TABLE>

Resultado Web

Figura 24. Tabla con ROWSPAN

Separacin entre las celdas de una tabla
or defecto, la separacin entre celdas de una tabla es de dos pixels. Pero
e dentro de
els entre celdas
cin entre el borde y el contenido dentro de las celdas es de un
o hacemos con el atributo
ABLE>.
NG=20>
P
se puede variar esto con el atributo CELLSPACING, que se pon
a etiqueta <TABLE>. l

20 pix Por ejemplo, para obtener una separacin de
ponemos: <TABLE BORDER CELLSPACING=20>

Separacin entre el borde y el contenido dentro de las celdas
a separa L
pixel. Si queremos cambiar esto, l
CELLPADDING, que se pone dentro de la etiqueta <T

Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y
os bordes, dentro de cada celda: <TABLE BORDER CELLPADDI l

Oscar E Capuay Uceda 36
DHTML

Se puede combinar este atributo con CELLSPACING, visto lneas atrs. Por
as de
nido con respecto a los bordes de las celdas de 20,
ndramos con:
Web
ejemplo, una tabla con bordes de 5 de espesor, separacin entre celd
15 y separacin del conte
lo obte

R=5 CELLSPACING=15 CELLPADDING=20> <TABLE BORDE

esultado R

Figura 25. Tabla con CELLSPACING y CELLPADDING
lo06.html
CENTER>
HR width=75%>

Ejemplo 7: Ejemplo de Tablas en HTML

ejemp

<HTML>
<HEAD>
<TITLE> Tablas </TITLE>
</HEAD>
<BODY>
<
<H1> Tablas </H1>
</CENTER>
<
Oscar E Capuay Uceda 37
DHTML

<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=8>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
TD>fila2-celda2< < /TD>
/TR>
<TD>fila2-celda3</TD>
<
</TABLE>
</BODY>
</HTML>

Resultado Web

Figura 26. Resultado de ejemplo06.html

Formularios
Los formularios permiten a los usuarios enviar informacin al servidor, en el
ual hay insta c lado(s) programa(s) que procesan esta informacin.
uiente:
ara poder
tones de envo y de borrado.
Etiqueta de cierre </FORM>

Estructura de un formulario
uctura de un formulario es la sig La estr

Etiqueta de inicio:
Cuerpo del formulario, con los distintos elementos p
introducir los datos.
Bo


Oscar E Capuay Uceda 38
DHTML

Etiqueta de inicio
ctuar.
l atributo METHOD=POST indica que los datos sean inmediatamente
ail u a otro destino establecido segn el
e texto, perfectamente legible y sin
odificar.
lementos para introducir los datos
xisten tres tipos de elementos:
r medio de mens
e la etiqueta:
cin.
os nosotros a la variable de introduccin del

TYPE="text". El atributo VALUE
ETHOD="POST" ENCTYPE="TEXT/PLAIN">
botn de
nvo (que veremos ms adelante), recibiremos un email suyo con el
o:
d de esta caja de texto es por defecto de 20 caracteres. Se puede
nmero". Por otra parte,
sea la longitud, si no se indica nada, el usuario puede introducir el
cteres que quiera. Se puede limitar esto, incluyendo en la
NGTH="nmero".
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE = "TEXT/PLAIN">
El atributo ACTION indica la accin que se debe efe
E
enviados a la direccin de em
atributo ACTION.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas
las recibamos como un archivo d
c

E

E
1. Introduccin por medio de texto
2. Introduccin po
3. Introduccin por medio de botones

cin de los datos se consigue por medio d La introduc

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde:
xx es la palabra que indica el tipo de introduc x
yyy es el nombre que le asignam
ato. d
zzz es el nombre de la variable que contendr el valor del elemento.

troduccin por medio de texto (una lnea) In
En este caso es xxx=text, es decir, INPUT
o procede en este caso. n

Vamos a poner un ejemplo: solicitamos el apellido del usuario.

<FORM ACTION=mailto:email M
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>

Si el usuario introduce su apellido, por ejemplo: Ruiz, y pulsa el
e
siguiente text

Apellido=Ruiz

La longitu
variar incluyendo en la etiqueta el atributo SIZE="
sea cual
nmero de cara
etiqueta el atributo MAXLE

Oscar E Capuay Uceda 39
DHTML

En el caso que hemos visto, si hubiramos cambiado la etiqueta
nte por:
LENGTH="12">
conocible, es
r asteriscos. Basta con
PUT TYPE="password". En
orrespondiente por:
assword" NAME="Apellido" SIZE="10" MAXLENGTH="12">
teres introducidos se representan por asteriscos.
troduccin por medio de texto (mltiples lneas)
a introducir puede alcanzar una gran longitud, por ejemplo
un comentario, es conveniente utilizar un formulario de texto de mltiples

Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero
de filas, y COLS el de columnas). y la de cierre: </TEXTAREA>

Ejemplo 8: Formulario solicitando los comentarios del usuario:

<FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">
Introduce tus comentarios:
<BR>
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>

Resultado Web:
correspondie

lido" SIZE="10" MAX <INPUT TYPE="text" NAME="Apel

ede hacer que el texto introducido no sea re Tambin se pu
decir que todos los caracteres se representen po
or IN cambiar en la etiqueta INPUT TYPE="text" p
el ltimo ejemplo, si cambiamos la etiquea c

<INPUT TYPE="p

Los carac
In
Cuando el texto
lneas.

Figura 27. Resultado de ejemplo08.html



Oscar E Capuay Uceda 40
DHTML

Introduccin por medio de Listas Desplegables
os que el usuario, en vez de introducir un texto, como hemos visto
tiqueta de inicio <SELECT NAME=" yyy" > y la de cierre
/PLAIN">
<SELEC
<OPTIO
<OP
<OPTION>Azul </OPTION>
</SE C
</FORM

s de envo,
emplo anterior, slo es visible en el formulario una opcin. Si
="TEXT/PLAIN">
inicialmente como marcado (el
jemplo:
Si querem
en los casos anteriores, escoja entre varias opciones que le presentamos
nosotros, haremos uso de un formulario en forma de listas desplegables.

Se consigue con la e
</SELECT>. Las distintas opciones a escoger se consiguen con la etiqueta
<OPTION>.
Ejemplo: Pedimos al usuario que elija su color preferido:

FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT <
Cul es tu color preferido?
<BR>
T NAME="ColorPreferido">
N>Rojo </OPTION>
TION>Verde </OPTION>
LE T >
>
uario escoge, por ejemplo: Azul y ha pulsado el botn Si el u
recibiremos un email suyo con el texto: ColorPreferido=Azul.

En el ej
queremos que sean visibles mltiples opciones a la vez, aadimos en la
etiqueta los atributos MLTIPLE SIZE="nmero", donde especificamos el
nmero de opciones visibles.

Formulario de confirmacin (checkbox)
Si queremos que el usuario confirme una opcin determinada, podemos
hacer uso de un formulario de confirmacin, o checkbox, que se consigue
con la etiqueta:

<INPUT TYPE="checkbox" NAME="yyy">

Ejemplo 9: Confirmacin de la inclusin en una lista de correo:

<FORM ACTION=mailto:email METHOD="POST" ENCTYPE
<INPUT TYPE="checkbox" NAME="Lista">
S, deseo ser incluido en la lista de correo.
</FORM>

Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un
mail suyo con el texto: Lista=On. e
Si queremos que el formulario aparezca
usuario no necesitar hacerlo), basta con aadir el atributo CHECKED
dentro de la etiqueta.

<INPUT TYPE="checkbox" NAME="Lista" CHECKED> E

Oscar E Capuay Uceda 41
DHTML

Botones de radio
Cuando queremos que el usuario elija una nica opcin entre varias,
podemos hacer uso de los botones de radio, que se consiguen con la
tiqueta:
N= HOD="POST" ENCTYPE="TEXT/PLAIN">
Cul es tu sistema operativo preferido?
YPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
YPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
o" VALUE="Unix"> Unix
ECKED que se ha aadido en la primera
parece marcada por defecto.
escogido la opcin PC y pulsa el botn de envo, recibiremos
on el texto: SistemaOperativo=PC.
ba un elemento
lquier formulario, y es el botn de envo de los datos, que se
con la etiqueta:
t" VALUE="Enviar">
to que queremos que aparezca en el botn. Ejemplo:
TION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">
pellido:
UT TYPE="text" NAME="Apellido">
T TYPE="submit" VALUE="Enviar datos">
/FORM>
tn interesante es el de borrado de los datos introducidos, muy
nte en un formulario con muchos elementos. Es muy similar al de
:
PE="reset" VALUE="zzz">
s el texto que queremos que aparezca en el botn. Si
s al ejemplo anterior la etiqueta:
e

<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">

Donde yyy es el nombre que le ponemos a la variable que se trata de elegir,
y zzz es el nombre de cada una de las opciones en concreto.

Ejemplo: solicitamos al usuario que defina cul es su sistema operativo
preferido:

<FORM ACTIO mailto:email MET

<BR>
<INPUT T
<INPUT T
<INPUT TYPE="radio" NAME="SistemaOperativ
</FORM>

Obsrvese el atributo opcional CH
etiqueta. Esa ser la opcin que a

Si el usuario ha
un email suyo c

Botones de envo y de borrado
n todos los ejemplos que hemos visto, falta Hasta ahora, e
n cua esencial e
onsigue c

<INPUT T

YPE="submi
En donde zzz es el tex

<FORM AC
Escribe tu a
<BR><INP
<P><INPU
<

Otro bo
convenie
envo, pues se consigue con la etiqueta

<INPUT TY

En donde zzz e
aadimo
Oscar E Capuay Uceda 42
DHTML


<P><INPUT TYPE="reset" VALUE="Borrar datos">

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y
pulsando luego el botn de borrado.

Consideraciones finales
Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden
utilizar. Pero no hay ningn inconveniente en usar, dentro del mismo
formulario, distintos tipos de introduccin de datos. Al pulsar el usuario el
botn de envo recibiramos en email suyo con las distintas parejas
NAME=VALUE de cada elemento, encadenadas con el smbolo &.

Ejemplo 10: Formulario 2

jercicio10.html
P><CENTER>
XTAREA NAME="Comentarios" ROWS="6" COLS="40">
INPUT TYPE="reset" VALUE="Borrar datos">
/BODY>
E

<HTML>
<HEAD><TITLE>LIBRO DE VISITAS</TITLE></HEAD>
<BODY>
<
<H2>Libro de visitas</H2>
<P>
<FORM ACTION=mailto:xy@ab METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
BR><TE <
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<
</FORM>
<P><HR><P>
<
</HTML>

Resultado Web:
Oscar E Capuay Uceda 43
DHTML


Resultado de ejercicio10.html
Oscar E Capuay Uceda 44
DHTML

HTML 4
La especificacin 4.0 de HTML, nos trae algunas novedades respecto a la
tinuacin:
os elementos en HTML 4.0 son: ABBR, ACRONYM, BDO,
, COL, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET,
LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJ ECT,
RAM, SPAN, TBODY, TFOOT, THEAD y Q.

Cambios en los atributos
Casi todos los atributos que especifican el formato (tamao, color,
alineacin, etc) de un documento HTML han sido desaprobados en
favor de las hojas de estilo en cascada.
La lista de atributos del apndice indica qu atributos han sido
desaprobados.
Los atributos id y class permiten a los autores asignar informacin de
nombre y clase a los elementos para las hojas de estilo, como
identificadore eclaraciones de
objetos, para tratamientos genricos del documento, etc.
rames (en ingls, marcos o cuadros) es un procedimiento del lenguaje
ir la pantalla en diferentes zonas, o ventanas, que pueden
ctuar independientemente unas de otras, como si se trataran de pginas
es incluso cada una de ellas pueden tener sus propias barras
entan son el Netscape
xplorer 2.0 en adelante. Una de sus caractersticas ms
e, se puede
argar en otro frame una pgina determinada. Esto se utiliza frecuentemente
e estrecho en la parte lateral (o superior) con un ndice del
contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la
ventana principal las era se facilita la
avegacin entre las pginas, pues aunque se vaya pasando de unas a
la vista el ndice del conjunto.
pgina con dos frames. El de la izquierda va a servir de ndice
ocumento de definicin de los frames
ue e hacer es crear un documento HTML en el que
efiniremos cuntas zonas va a haber, qu distribucin y tamao van a
er el contenido de cada una de ellas.
versin 3.2, las cuales sern comentadas a con

os nuevos Element
v Los nue
UTTON B
IFRAME, INS,
OPTGROUP, PA

s de vnculo, para los scripts, para d

Veamos a continuacin detalles de algunas nuevas etiquetas:

Frames
F
HTML para divid
a
diferentes, pu
de desplazamiento. Los navegadores que lo implem
2.0, y el E
importantes es que pulsando un enlace situado en un fram
c
para tener un fram
distintas pginas. De esta man
n
otras, siempre estar a

Para comprender los distintos conceptos vamos a desarrollar un ejemplo,
creando una
de lo que veamos en el de la derecha, y en ste veremos inicialmente una
pgina de presentacin. Se podr acceder tambin aqu a las pginas
creadas anteriormente, si se pulsa un enlace en el frame de la izquierda.

D
Lo primero q tenemos qu
d
tener, y cul va s

Oscar E Capuay Uceda 45
DHTML

En el ejemplo que vamos a desarrollar, la pgina va a tener dos frames
distribuidos en columnas (es decir, uno al lado del otro, en vez de uno
el otro, lo que sera una distribucin en filas).
a) ocupe el
el ancho de la pantalla, y el otro, el 80% restante.
al contenido, el frame de la izquierda va a contener un
documento HTML que va a servir de ndice de lo que veamos en el otro (y
que vamos a llamar pagind.html), y el de la derecha otro documento HTML
que va a servir de pgina de presentacin (al que llamaremos pagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:

Ejemplo 11: Uso de frames

Ejercicio11.html

<HTML>
<HEAD>
aacute;gi
RC="ejercicio11b.html" NAME="principal">
/HTML>
jercicio11a.html
head>

html>
encima d

Con respecto al tamao, haremos que el primero (el de la izquierd
20% d

Y con respecto
<TITLE>Mi p& na con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
FRAME SRC="ejercicio11a.html"> <
<FRAME S
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<A HREF="ejercicio12.html"> ir a p&aacute;gina sin frames </A>.
</NOFRAMES>
<

E
<html>
<
<title>marco 1</title>
</head>
<body>
marco 1
</body>
</html>

Ejercicio11b.html
<
<head>
<title>marco 2</title>
</head>
<body>
marco 2
</body>
</html>
Oscar E Capuay Uceda 46
DHTML


Resultado Web

Figura 28. Marcos o Frames

Es un documento parecido a los que conocamos hasta ahora. La diferencia
rmalmente para
as:
C=
"ejercicio11b.html" NAME="principal">

ea
ento HTML ejercicio11b.html.
to
r
e al segundo frame, pues, podramos utilizar hipervnculos en el
arco que muestren pginas Web en el segundo, utilizando la
TARGET, por ejemplo: <a href=ejercicio12.html
=principal>ejercicio 12</a>. Segn este ejemplo la pgina
ml se abrir en el frame del lado derecho de la pgina.
que el navegador no soporte FRAMES se utiliza la etiqueta
NOFRAMES>. Se aaden al final del documento de
es, y a se pone entre ambas lo que queremos que vean
navegador que no soporta frames. Puede incluso
est en que en vez de utilizar la etiqueta BODY, que sirve no
delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta
FRAMESET (definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%, 80%">se define
que va a haber dos frames y que van a ir en columnas. Si hubiramos
querido que fueran en filas, habramos puesto ROWS (filas, en ingls).
Tambin se define el ancho que van a ocupar cada uno de ellos en la
pantalla. Se ha puesto como porcentajes del total, pero se podra tambin
haber puesto una cifra absoluta, que representara el nmero de pxeles a
ocupar.

Ya se ha definido el nmero de frames, su distribucin y su tamao, pero
falta por definir el contenido de cada frame. Esto se hace con las etiquet

<FRAME SR "ejercicio11a.html">
<FRAME SRC=

Con esto se define que el contenido del primer frame (el de la izquierda) sea
el documento HTML ejercicio11a.html y el del segundo (el de la derecha) s
el docum

Podemos ver en la etiqueta del segundo marco que se ha incluido el atribu
NAME="principal", pero no as en el primero, debido a que se necesita da
un nombr
primer m
etiqueta
TARGET
ejercicio12.ht

Para el caso
<NOFRAMES> y </
definicin de los fram
los que acceden con un
Oscar E Capuay Uceda 47
DHTML

ser el cdigo HTML de una pgina completa (lo que normalmente va entre
as <BODY>y </BODY>)
do diseo con frames podra ser dividiendo la pgina de manera horizontal.
RC="ejercicio11b.html" NAME="principal">
ET>
navegador que no soporta frames.
12.html"> ir a p&aacute;gina sin frames </A>.
</NOFRAMES>
</HTML>

Resultado Web:
las etiquet

Un segun

Ejemplo11c.html

<HTML>
<HEAD>
<TITLE>Mi p&aacute;gina con frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="ejercicio11a.html">
<FRAME S
</FRAMES

<NOFRAMES>
Estas utilizando un
<A HREF="ejercicio

Figura 29. Marcos con divisin horizontal

Oscar E Capuay Uceda 48
DHTML

Etiqueta ACRONYM
dica un acrnimo (es la suma de los significados de las palabras que lo
ML, (Hyper Text Markup Language).

t-Type" content="text/html; charset=iso-8859-1">
NYM lang="en"
age">
"es" title="Doctor">Dr</ABBR>
In
forman. Por ejemplo HT

Etiqueta ABBR
Indica una forma abreviada (etc, Dr, Ing, Corp, etc.).

Los elementos ABBR y ACRONYMpermiten a los autores indicar claramente la
aparicin de abreviaturas y acrnimos.

Ejemplo 12: Acrnimos y Abreviaturas

Ejemplo12.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Conten
</head>
<body>
<ACRONYM title="World Wide Web">WWW</ACRONYM>
<ACRO
title="Hyper Text Markup langu
HTML
</ACRONYM>
<br>
<ABBR lang=
<ABBR title="Se&ntilde;or">Sr</ABBR>
</body>
</html>

Resultado Web:

Figura 30. Acrnimos y abreviaturas
Q
sta etiqueta inserta comillas dobles en una frase. Se utiliza para citar
Ejemplo 13: Frase entre comillas

jercicio13.html

Etiqueta
E
frases.
E

Oscar E Capuay Uceda 49
DHTML

Carlos dice:
<Q lang="es">Estoy aprendiendo HTML </Q><br>
J aime dice:
<Q lang="es">Es un lenguaje f&aacute;cil de aprender </Q>

Resultado Web:

Figura 31. Frase entre comillas
INS y DEL
S y DEL se usan para marcar secciones del documento que han sido
s o borradas con respecto a una versin diferente de un
tos son especiales dentro de HTML, ya que pueden actuar
como elementos en bloque o bien como elementos en lnea (pero no
er una o ms palabras dentro de un
-09-25T08:15:30-05:00"
/index.php">Ejemplo de texto nuevo.
P>
L>una palabra borrada</DEL>algo borrado.

Etiquetas
IN
insertada
documento.
Estos dos elemen
o bien
como ambos a la vez). Pueden conten
prrafo o uno o ms elementos en bloque como prrafos, listas y tablas.

Ejemplo 14: INS y DEL

Ejercicio14.html

<INS datetime="2008
cite="http://oscar.capunay.com
Este texto fue agregado.
</INS>
<
Esta frase tiene <DE
</P>

Resultado Web:

Figura 32. Acrnimos y abreviaturas
Oscar E Capuay Uceda 50
DHTML

OBJECT
Esta etiqueta se usa cuando un elemento Web ser representado utilizando
un plug-in de algn software externo al agente o navegador utilizado.

PARAM
Las etiquetas PARAMespecifican un conjunto de valores que pueden ser
necesarios para un objeto en tiempo de ejecucin. Puede aparecer cualquier
nmero de elementos PARAMen el contenido de un elemento OBJ ECT o
APPLET, y en cualquier orden, pero deben ser colocados al principio del
contenido del elemento OBJ ECT o APPLET que los contienen.

Ejemplo 15: OBJ ECT Y PARAM

Ejemplo15.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de OBJ E
<meta http-equiv="Con et=iso-8859-1">
b#version=6,0,0,0"
PARAM NAME=loop VALUE=fals
M
PARAM NAME=quality VALUE=high>
=scale VALUE=exactfit>
PARAM NAME=bgcolor VALUE=#080638>
tfit
#080638 WIDTH="100%" HEIGHT="100%" NAME="intro2"
"
/OBJ ECT>
CT, PARAM y EMBED</title>
tent-Type" content="text/html; chars
</head>
<body>
<OBJ ECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfl
ash.ca
WIDTH="100%" HEIGHT="100%" ALIGN="" id="intro2">
<PARAM NAME=movie VALUE="intro2.swf">
e> <
<PARAM NA E=menu VALUE=false>
<
<PARAM NAME
<
<EMBED src="intro2.swf" loop=false menu=false quality=high scale=exac
bgcolor=
ALIGN="
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED
>
<
</body>
</html>

Resultado Web:
Oscar E Capuay Uceda 51
DHTML


Figura 33. Animacin flash

TABLAS
rupos de filas: los elementos THEAD, TFOOT y TBODY
abla pueden agruparse en una cabecera de tabla, un pie de
bla, y una o ms secciones de cuerpo de tabla, usando los elementos
los
de usuario ofrecer la posibilidad de desplazar la informacin de los
de la tabla independientemente de la cabecera y el pie. Cuando se
ormacin de cabecera y pie de tabla puede
tirse en todas las pginas que contengan datos de la tabla.
y el pie de tabla deberan contener informacin sobre
bera contener filas de datos
caso de estar presentes, cada elemento THEAD, TFOOT y TBODY contiene
po de filas. Cada grupo de filas debe contener al menos una fila.
de TABLA, THEAD, TFOOT y TBODY
ml
PE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ead>
T y TBODY</title>


G
Las filas de una t
ta
THEAD, TFOOT y TBODY, respectivamente. Esta divisin permite a
agentes
cuerpos
imprimen tablas largas, la inf
repe
La cabecera de tabla
las columnas de la tabla. El cuerpo de tabla de
de tabla.
En
un gru

Ejemplo 16: Uso

Ejercicio16.ht

<!DOCTY
<html>
<h
<title>Ejemplo de THEAD, TFOO
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
Oscar E Capuay Uceda 52
DHTML

<table>

<thead>
<tr>
<th>Id</th>
<th>Nombres</th>
<th>Apellidos</th>
"3">Pie de la tabla</th>
1</td><td>Kelly</td><td>Quiroz Ch</td></tr>
2</td><td>Carlos</td><td>Capuay Uceda</td></tr>
>3</td><td>Marco</td><td>Quiroz Chavil</td></tr>
<td
Web:
</tr>
</thead>

<tfoot>
<tr>
<th colspan=
</tr>
</tfoot>

<tbody>
<tr><td>
<tr><td>
<tr><td
<tr> >4</td><td>J aime</td><td>Capuay Uceda</td></tr>
</tbody>
</table>
</body>
</html>

Resultado

Figura 34. Tabla con THEAD, TFOOT Y TBODY
entro de una definicin de TABLE
e el navegador pueda representar el pie antes de recibir todas
almente numerosas) filas de datos. A continuacin se resume

TFOOT debe aparecer antes de TBODY d
de modo qu
las (potenci
qu etiquetas son obligatorias y cules pueden omitirse:

Oscar E Capuay Uceda 53
DHTML

FORMULARIOS
creados con el elemento BUTTON funcionan exactamente igual
s creados con el elemento I NPUT, pero ofrecen posibilidades
s de representacin: el elemento BUTTON puede tener contenido.
plo, un elemento BUTTON que contenga una imagen se parece y
como un elemento I NPUT cuyo atributo t ype sea igual a "image",
ero el tipo de elemento BUTTON permite un contenido.
y
s
omo imgenes "planas".
plo extiende un ejemplo previo, pero creando los botones
de envo

El elemento BUTTON
Los botones
que los botone
ms rica
Por ejem
funciona
p
Los navegadores pueden representar los botones BUTTON con un relieve
n movimiento arriba/abajo al pulsarlos, mientras que pueden representar lo u
botones I NPUT c
El siguiente ejem
y de restablecer con BUTTON en lugar de I NPUT. Los botones
contienen imgenes sacadas de elementos I MG.

Ejemplo 17: Button con imagen

Ejercicio17.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de BUTTON</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<FORM action="http://oscar.capunay.com/datos/formulario" method="post">
<P>
Nombre: <INPUT type="text" name="txtnombre"><BR>
Apellido: <INPUT type="text" name="txtapellido"><BR>
email: <INPUT type="text" name="txtemail"><BR>
sexo: <INPUT type="radio" name="optsexo" value="H">Hombre &nbsp;
&nbsp;
<INPUT type="radio" name="optsexo" value="M">Mujer<BR>
<BUTTON name="enviar" value="enviar" type="submit">
Editar<IMG src="iconos/editar.gif" alt="Enviar Datos"></BUTTON>
<BUTT
establecer<IMG src="iconos/nuevo.gif" alt="Limpiar"
idth="12"></BUTTON>
</P>
/FORM>
/body>
/html>

Resultado Web:
ON name="reiniciar" type="reset">
R
w

<
<
<
Oscar E Capuay Uceda 54
DHTML


Figura 35. BUTTON con imagen

l elemento OPTGROUP E
El elemento OPTGROUP permite a los autores agrupar opciones lgicamente.
Esto es particularmente til cuando el usuario debe elegir de entre una larga
lista de opciones; es ms fcil apreciar y recordar grupos de opciones
relacionadas que una larga lista de opciones sueltas. En HTML 4, todos los
lementos OPTGROUP deben especificarse directamente e dentro de un
ir, no pueden anidarse unos grupos dentro de
Formulario con OPTGROUP
ml
//DTD HTML 4.01 Transitional//EN">
>Ejemplo de OPTGROUP</title>
quiv="Content-Type" content="text/html; charset=iso-8859-1">
m/datos/registro.php"
name="Producto" size="1">
selected label="ninguno" value="ninguno"> Ninguno</OPTION>
ROUP label="Limpieza">
<OPTION label="escoba" value="limp001">Escoba</OPTION>
N>
e="limp003">Detergente</OPTION>
ROUP label="Dulces">
<OPTION label="chocolate" value="dulc001">Chocolate</OPTION>
elemento SELECT (es dec
tros). o

jemplo 18: E

Ejercicio18.ht

UBLIC "-//W3C <!DOCTYPE HTML P
<html>
<head>
<title
<meta http-e
</head>

<body>
<FORM action="http://oscar.capunay.co
method="post">
<P>
T <SELEC
<OPTION
<OPTG

<OPTION label="jab&oacute;n"
value="limp002">jab&oacute;n</OPTIO
<OPTION label="detergente" valu
</OPTGROUP>
<OPTG

Oscar E Capuay Uceda 55
DHTML

<OPTION label="caramelo" value="dulc002">Caramelo</OPTION>
<OPTION label="gelatina" value="dulc003">Gelatina</OPTION>
</OPTGROUP>
psi" value="bebi001">PEPSI</OPTION>
<OPTION label="cola-cola" value="bebi002">Coca Cola</OPTION>
</OPTGROUP>
/body>

<OPTGROUP label="Bebidas">
<OPTION label="pe

</OPTGROUP>

</SELECT>
</FORM>
<
</html>

Resultado Web:

Figura 36. Lista con OPTGROUP

Estructura a los formularios: los elementos FIELDSET y LEGEND
La etiqueta FI ELDSET agrupa controles, lo que permite a los usuarios
entender su propsito y al mismo tiempo facilita la navegacin. El uso
orrecto de esta etiqueta le da mayor nivel de accesibilidad al documento
n FI ELDSET. La leyenda
el FI ELDSET no se representa visualmente.
jemplo 19: Ejemplo de Conjunto de Campos


ML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
c
Web.
La etiqueta LEGEND permite asignar un ttulo a u
mejora la accesibilidad cuando

E
Ejercicio19.html
<!DOCTYPE HT
<html>
<head>
<title>Ejemplo FIELDSET y LEGEND</title>
Oscar E Capuay Uceda 56
DHTML

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<FORM action="data/proceso1.php" method="post">
FIELDSET>
GEND>
Nombres:<INPUT name="txtnombres" type="text" tabindex="1"><br>
Tel&eacute;fono: <INPUT name="txtfono" type="text" tabindex="4"><br>
T>
ext" size="50"
e="txtblog" type="text" size="40" tabindex="2"><br>
eo Electr&oacute;nico: <INPUT name="txtcorreo" type="text" size="30"
"><br>
PUT name="txtfono" type="text" size="10" tabindex="4"><br>
0" tabindex="4"><br>
<
<LEGEND>Datos Personales </LE

Apellidos:<INPUT name="txtapellidos" type="text" tabindex="2"><br>
Ciudad: <INPUT name="txtciudad" type="text" tabindex="3"><br>
</FIELDSE
<FIELDSET>
<LEGEND>Datos Internet</LEGEND>
P&aacute;gina personal:<INPUT name="txtpagina" type="t
tabindex="5"><br>
:<INPUT nam Blog
Corr
tabindex="3
Skype: <IN
ICQ: <INPUT name="txtfono" type="text" size="1
/FIELDSET> <
<button type="submit">Enviar</button>
</FORM>
/body> <
</html>

esultado Web: R

Figura 37. Formulario con agrupamiento de controles
Oscar E Capuay Uceda 57
DHTML


Etiquetas DIV y SPAN
on los atributos i d y cl ass, ofrecen un
r estructura a los documentos. Estos
si su contenido es en lnea (SPAN) o en bloque (DI V)
ar hojas de estilo en cascada a estas etiquetas.
Ejemplo 20: DIV y SPAN
script type="text/javascript">
le(obj){
body>
"toggle('tablas');return false;"
<img src="iconos/nuevo.gif" alt="despliegue" width="16" height="16"
order="0"></a></th>
</table>
las" style="display: none;">

Escuelas</a></td>
<td><a href="semestre.php" target="principal">Semestre</a></td>
</tr>
Las etiquetas DI V y SPAN, junto c
ecanismo genrico para aadi m
elementos especifican
pero no imponen ningn otro estilo de presentacin al contenido, por este
motivo, se pueden aplic


Ejercicio20.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
head> <
<
<!--
function togg
var objID =document.getElementById(obj);
objID.style.display =(objID.style.display =="none")?"":"none";
}
// -->
</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>

Oscar E Capuay Uceda 58
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
Oscar E Capuay Uceda 59
DHTML


Figura 38. Ejemplo de pgina con DIV ANs s y SP






Oscar E Capuay Uceda 60
DHTML

JavaScript
avaScript, al igual que J ava o VRML, es una de las mltiples maneras que
pacidades del lenguaje HTML. Al ser la ms
er un
rograma con J avaSc pgina Web con
algunas cosas senc aS cosas distintas,
principalmente programacin
completo. Lo e n mi xis. Existen tres
versiones de J a C ha n este documento
funciona con la versin 1.0, que na n e vigator 2.0.
Tambin existe una versi d cida en la versin 4.06. Esta versin
s una pequea revisin de la 1.2 creada para ajustarse al estndar
la el lenguaje J avaScript.
s una pgina 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
extraos que tiene la pgina anterior:

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

J
han surgido para extender las ca
sencilla, es por el momento la ms extendida. Es importante saber que:
J avaScript no es un lenguaje de programacin 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 hac m
p ript, tan slo se podr mejorar una
illas. J av cript y J ava son dos
porque J ava s que es un lenguaje de
nico qu comparte es la sma sinta
vaScript. asi todo lo que se
ci co
escrito e
l Netscape Na
n 1.3, intro u
e
internacional ECMA que regu

Vamos a realizar nuestro primer "programa" en J avaScript. Haremos surgir
una ventana que nos muestre el mensaje "hola, Web". As podremos ver los
lementos principales del lenguaje. El siguiente cdigo e e
completa con un botn que

Ejemplo 21: funcin alert

HolaWeb.html

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaWeb() {
alert("Hola
}
!");
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" N =" Puls

</FORM>
</BODY>
<
Oscar E Capuay Uceda 61
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 ms legible. Si un navegador no acepta J avaScript no leer lo que
tre estos elementos.
unque J avaScript es o a objetos no es de ningn modo tan
a de un objeto. En el cdigo de la
utton" NAME="Boton" VALUE="Pulsame"
ento que usamos para mostrar un botn vemos una cosa
vento. Cuando el usuario pulsa el
vento click se dispara y ejecuta el cdigo que tenga entre comillas
dor de evento onClick, en este caso la llamada a la funcin
con anterioridad. Existen
uchos ms eventos que iremos descubriendo segn avancemos. En
alidad, podramos 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
J avaScript.

Por otra parte el cdigo de J avaScript puede ser incluido en la pgina Web
de la siguiente manera:

script language="J avaScript" src = <

El archivo externo simplemente es un archivo del texto que contiene cdigo
J avaScript, y cuyo nombre acaba con la extensin js.

El cdigo de J ava Script puede ser escrito en cualquier lugar de la pgina
eb, en este ejem W
el cd
hay en

function HolaWeb() {
alert("Hola, Web!");
}

A t orientad
estricto como J ava, donde nada est fuer
funcin vemos una llamada al mtodo 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 elem
nueva: onClick. Es un controlador de e
botn, el e
el controla
HolaWeb(), que tendremos que haber definido
m
re

<FORM>


</FORM>

Elementos bsicos
Comentarios
Un comentario
que, por tanto, no
Oscar E Capuay Uceda 62
DHTML

en lenguaje humano lo que estamos haciendo en el lenguaje de
r que el cdigo sea ms comprensible.
tipos de comentarios. El primero nos permite que
e la lnea 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 J avaScript
do
programacin y as hace
J avaScript existen dos En
el resto d
inclinadas:

ar i =1; // Aqui esta el co v

Sin embargo, tambin permite un tipo de comentario que puede tener las
lneas 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 nmeros y valores booleanos: A

"Soy una cadena"
3434
3.43
tr

Tambin podemos especificar arra

v
a

Dentro de las cadenas podemos indicar varios caracteres especiales, con
significados especiales. Estos son los ms usados:

Carcter Significa
\n Nueva lnea
\t Tabulador
\' Comilla simple
\" Comilla doble
\\ Barra invertida
\999 El nmero ASCII (segn la codificacin Latin-1) del carcter en
hexadecimal


De este modo, el siguiente literal:

"J avascript (\xA9 2002)"

e corresponde con la cadena: s

2) J avascript (200

or ltimo, tambi P
fu
n se pueden especificar objetos como literales, aunque no
ncione en ms que en Netscape 4 y superiores:

Oscar E Capuay Uceda 63
DHTML

miNavegador ={nombre: "Netscape", version: 4.5, idioma: "Espaol",
plataforma: "PC"};
alert(miNavegador.plataforma);
s tipos de datos se asignan dinmicamente segn
namos valores a las distintas variables y son los clsicos: 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 J avascript las sentencias se separan con un punto y coma, y se agrupan
mediante llaves ({y }).

Tipos de datos
En
ig
J avascript lo
as
e t
re

Variables
Las variables son nombres que ponemos a los lugares donde almacenamos
la informacin. En J avascript, deben comenzar por una letra o un subrayado
(_), pudiendo haber adems dgitos entre los dems caracteres.
No es necesario declarar una variable, pero cuando se hace es por medio
e la palabra reservada var. Una va d
siempre mbito global, mientras que en caso contrario
lobal si est definida fuera de una funcin, y local si est defini g

var x; // Accesible fuera y dentro de pruebas
y =2; // Accesible fuera y dentro de pruebas
function pruebas() {
var z; // Accesible slo dentro de pruebas
w =1; // Acce
}

Se pueden declarar varias variables en una misma sentencia separndolos
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 o E
cada uno de los cuales es en s mism
atrices son obje los vectores y las m
los objetos, se declara

miVector =new Arra

Oscar E Capuay Uceda 64
DHTML

El vector tendr inicialmente 20 elementos (desde el 0 hasta el 19). Si
queremos ampliarlo no tenemos ms que asignar un valor a un elemento
que est fuera de los lmites del vector:
s utilizar de ndices cualquier expresin que deseemos
esitamos especificar la longitud inicial del vector si no
s favoritos"] ="Esto es J avascript";
ya que tenemos que
ctor nuevo en cada elemento del vector
iginal.
de J avaScript deben referenciarse cmo se definieron, no es

os operadores nos permiten unir identificadores y literales para formar
nes son el resultado de operaciones matemticas
variable son expresiones, pero tambin lo son esos
rar que nuestro cdigo no lo entendamos ni nosotros.
e los operadores aritmticos clsicos y algn que otro
eradores aritmticos
lo
Expresin de
ejemplo
Resultado del
ejemplo

miEstupendoVector[25] ="Algn valor"

e hecho, podemo D
utilizar. Ni siquiera nec
ueremos: q

ectorRaro =new Array(); v
vectorRaro["insertar en lo

es ms complicado, Hacer una matriz bidimensional
hacer un bucle que cree un ve
or

Nota importante: J avaScript es sensible a maysculas y minsculas, todos
los elementos
lo mismo "Salto" que "salto".

Operadores
L
expresiones. Las expresio
o lgicas. Un literal o una
mismos literales y variables unidos entre s mediante operadores.
J avaScript dispone de muchos ms operadores que la mayora de los
lenguajes, si exceptuamos a sus padres C, C++y J ava. 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 aritmticos
J avaScript dispone d
ms:
Tabla 4. Op
Descripcin Smbo
Multiplicacin * 2*4 8
Divisin / 5/2 2.5
Resto de una divisin
entera
% 5 % 2 1
Suma + 2+2 4
Resta - 7-2 5
Incremento ++ ++2 3
Decremento -- --2 1
Oscar E Capuay Uceda 65
DHTML

Menos unario - -(2+4) -6

os operadores de incremento y L decremento merecen una explicacin
b 2 tambin. Sin embargo:
u operando, pero si se colocan detrs del mismo se
jecutan despus de todas las dems operaciones.

mparacin
del ejemplo
auxiliar. Se pueden colocar tanto antes como despus de la expresin que
deseemos modificar pero slo devuelven el valor modificado si estn
delante.

a =1;
=++a; b
En este primer caso, a valdr 2 y
a =1;
=a++; b

Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores
modifican siempre a s
e
Operadores de co

ientes: Podemos usar los sigu

Tabla 5. Operadores de comparacin
Descripcin Smbolo Expresin de ejemplo Resultado
Igualdad == 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 no L rmales pero hacen
bacin estricta de tipo. Han sido incluidos en el estndar
lo soportan Netscape 4.06 y superiores y Explorer 3 y
que indicar que versiones ms antiguas de Netscape tratan
. Operadores lgicos
n Smbolo Expresin de ejemplo Resultado del ejemplo
una compro
ECMAScript y
superiores. Hay
la igualdad normal como si fuera estricta.

Operadores lgicos
Estos operadores permiten realizar expresiones lgicas complejas:

Tabla 6
Descripci
Negacin ! !(2 =2) Falso
Oscar E Capuay Uceda 66
DHTML

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

Operadores de asignacin
los lenguajes tienen un nico operador de asignacin, que en
mbolo =. Pero en este lenguaje, dicho operador se puede
n operadores aritmticos y lgicos para dar los siguientes:
Tabla 7. Operadores de asignacin
erador Significado Operador Significado
Normalmente
J avaScript es el s
combinar co

Op
x +=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 concatenacin de cadenas, por ejemplo, se realiza con el
l operador condicional tiene esta estructura:
Si la condicin se cumple devuelve el primer valor y, en caso contrario, el
ejemplo asignara a la variable a un 2:
ores:
bla
i olo Ejemplo
lo
smbolo +. E

condicin ? valor1 : valor2

segundo. El siguiente

a =2 >3 ? 1 : 2

ara tratar con objetos disponemos de tres operad P

Ta 8. Operadores especiales
Descripc n Smb 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
th
objeto

this se
a otros m
su r en el cdigo de los mtodos de un objeto para referirse
objeto.
ele utiliza
todos o a propiedades de su mismo

Oscar E Capuay Uceda 67
DHTML

Estructu
pos: 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 condicin. La primera que vamos
a estudiar es la estructura if...else. Esta estructura es la ms sencilla y
mayor
es mayor que b);
s o

Es la se
witch(color) {
rojo);
o);
dicar que no es compatible con estndar ECMA y no es soportado
or el Explorer 3.
petir una tarea un nmero de
na condicin. Para hacer bucles podemos utilizar
ncia entre ellas es que la primera
omprueba dicha condicin antes de realizar cada iteracin y la segunda lo
ras de control
Estas estr
condiciona
ucturas se pueden clasificar en do
les y bucles. Aparte de los dos
s grandes gru
tipos clsicos str
J avaScript disponemos de algunas
manejo de objetos.
aciones condiciona
facilit

Una acin condicion tura que reali ta
d
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 s
una variable especfica.
egn 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 in
p


Bucles
Un bucle es una estructura que permite re
veces, determinado por u
las estructuras while y do...while. Estos bucles iteran indefinidamente
mientras se cumpla una condicin. La difere
c
hace despus:

var numero=0;
Oscar E Capuay Uceda 68
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 ejecutara el cdigo que tiene
ente potente. No se reduce a casos
os da mucha ms
con condicin se
tes enzar la primera iter e ejecutar la
c era ms
sa dades es, claro

for (n =2, factorial =1; n

hay cucin d ncia break dentro de
r parte del salida i
hay lizarlo, e
legibilidad y elegancia del cdigo.

s
sp distintas. La ucle for...in, que
ropied
ente mplo:

=[
alert('Soy un while');
}
do {
alert('S
}while (numero==1);

n este caso solo veramos aparecer una ventana diciendo que E
do...
numero e
dentro del bucle. En cambio, el do...while primero ejecuta el cdigo y luego,
viendo que la condicin es falsa, saldra. Hay que resaltar que do...while no
pertenece al estndar y no es soportado por el Explorer 3.

n J avascript, el bucle for es singularm E
numricos como en muchos otros lenguajes sino que n
bertad. Tiene la siguiente estructura: li


r (inicio; condicin; incremento) fo
cdigo


El cdigo
cumpla. An
tenido en el bucle se ejecut
de com
ar mientras la
acin del bucle s
sentencia ini
habitual de u
io y en cada iteracin lo har
r estas posibili
incremento. La man
est, la numrica:
var numero =4;
<=numero; n++)
; factorial *=n
Por ltimo, que decir que la eje e la sente
cualquie
veces no
bucle provoca la
ms remedio que uti
nmediata del mismo. Aunque a
s mejor evitarlo para mejorar la

Estructura
J avaScript di
de manejo de objetos
one de dos bien primera es el b
nos permitir recorrer t
principalm
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;

Oscar E Capuay Uceda 69
DHTML

Este ejemplo sumara dos a todos los elementos del vector. Sin embargo,
conviene tener cuidado ya que, de los navegadores de Microsoft, slo la
ersin 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 programacin
macin orientada a objetos) que atribuye a los objetos propiedades
ncia o polimorfismo.
s, J avaScript simplifica en algo este modelo.

Creacin 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 pasndole 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 parmetro. Sera algo as:
function Array(longitu
...
bjeto. Supongamos que queremos codificar
=autor;
v

L
tengamos que
de tener qu
hacer:
with (objeto) {
propiedad1 =...
propiedad2 =...
...
}

Objetos
Un obje
propiedades) como las funciones que manip
mtodos).
rtir de esta estr A pa
(la progra
re como he

omo veremo C
nstructores
cin que inicializa un objeto. Cuan U
o
d) {
}
Vamos a crear nuestro primero o
en J avascript una aplicacin que lleve nuestra biblioteca de libros tcnicos
de Informtica. Para lograrlo, crearemos un objeto Libro que guarde toda la
informacin de cada libro. Este sera el constructor:

function Libro(titulo, autor, tema) {
this.titulo =titulo;
this.autor
this.tema =tema;
}

Oscar E Capuay Uceda 70
DHTML

Como vemos, accederemos a las propiedades y mtodos de nuestros
por medio de la referencia this. Ahora podemos crear y acceder a
Libro("J avaScript 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 aadimos la siguiente lnea a nuestra funcin
constructora:
this.escribir =escribirLibro;

Y podremos acceder al mismo de la manera normal:
miLibro.escribir();

Objetos predefinidos
J avaScript 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 ms 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 nmero 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 nmero cero.
Array tiene, entre otros, los siguientes mtodos y propiedades:
ngth: Propiedad que contiene el nmero de elementos del vector.

objetos
nuestros objetos tipo Libro:

miLibro = new
"J avaScript");

alert(miLib

Los mtodos tambin po

function
alert("E

P
e varios objetos predefinidos para acced
la
vectores o el de fechas. En
a
mismos dis
o

a) Objeto Array
Como dijimos an
las s
tes, este objeto permite crear ve
cualquiera de

vector =new Array(lo
r =new Array(el vecto

rim En el p
elemento
elem los
recordar
El objeto

le
Oscar E Capuay Uceda 71
DHTML

concat(vector2): Aade los elementos de vector2 al final de los del vector
etTime(milisegundos)
btienen y ponen, respectivamente, la fecha y la hora tomados como
plementacin de stos mtodos puede variar en las
ltimas versiones de Netscape.
que invoca el mtodo, devolviendo el resultado. No funciona en Explorer 3 y
no forma parte del estndar ECMA.

ort(funcionComparacion): Ordena los elementos del vector s
alfabticamente. Si se aade una funcin de comparacin como parmetro
los ordenar utilizando sta. Dicha funcin debe aceptar dos parmetros y
devolver 0 si son iguales, menor que cero si el primer parmetro es menor
que el segundo y mayor que cero si es al revs.

nction compararEnteros(a,b) { fu
return a<b ? -1 : (a==b ? 0 : 1);
}

Usando esta funcin ordenara numricamente (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(ao, mes, dia);
fecha =new Date(ao, mes, dia, hora, minuto, segundo);

Si no utilizamos parmetros, 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 mtodos:

getTime()
s

O
milisegundos transcurridos desde el 1 de enero de 1970.

getYear()
setYear(ao)

Obtienen y poner, respectivamente, el ao de la fecha. ste se devuelven
como nmeros de 4 dgitos excepto en el caso en que estn entre 1900 y
1999, en cuyo caso se devolvern las dos ltimas cifras. Hay que tener
cuidado, ya que la im


getFullYear()
setFullYear(ao)
Oscar E Capuay Uceda 72
DHTML


Realizan la misma funcin que los anteriores, pero sin tantos los, ya que
meros con todos sus dgitos. Funciona en Explorer 4 y
y superiores.
etMonth()
)
utos)
nds(segundos)
, el mes, da, hora, minuto y segundo de
espectivamente hablando.
a de nmero que va
o est construido para que tengamos nuestras variables Math,
contenedor donde meter diversas constantes (como Math.E y
los siguientes mtodos matemticos:
Tabla 9. Mtodos matemticos del Objeto Math
ejemplo del ejemplo
siempre devuelven n
Netscape 4.06

g
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
etMinutes( g
setMinutes(min
etSeconds() g
setSeco

Obtienen y ponen, respectivamente
ivamente, r la fecha, tambin respect

getDay()

Devuelve el da de la semana de la fecha en form del 0
(domingo) al 6 (sbado).
c) Objeto Math
Este objeto n
sino como un
Math.PI

) y
Mtodo Descripcin
Expresin de Resultado
abs Valor absoluto Math.abs(-2) 2
sin, cos,
n
Funciones trigonomtricas,
reciben el argumento en Math.cos(Math.PI) -1
ta
radianes
asin,
acos,
atan
Funciones trigonomtricas
inversas
Math.asin(1) 1.57
exp, log
Exponenciacin y logaritmo,
Math.log(M
base E
ath.E) 1
Devuelve el entero ms
pequeo mayor o igual al
argument
Math.ceil(-2.7) -2 ceil
o
floor
Devuelve el entero ms grande
menor o igual al argumento
Math.floor(-2.7) -3
Oscar E Capuay Uceda 73
DHTML

round
Devuelve el entero ms
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
Exponenciacin, siendo el
primer argumento la base y el
segundo el exponente
Math.pow(2,4) 16
sqrt Raz cuadrada Math.sqrt(4) 2

d) Objeto Number
l igual que en el objetos de tipo
r, sino que debemos referirnos al genrico. Este objeto contiene
A caso anterior, no se pueden crear
Numbe
como propiedades los siguientes valores numricos.

Tabla 10. Propiedades del objeto Number
Propiedad Descripcin
NaN Valor que significa " no es un nmero"
MAX_VALUE y MIN_VALUE Mximo y mnimo nmero representable
NEGATIVE_INFINITIVE y
Infinito negativo y positivo,
POSITIVE_INFINITIVE
se utilizan
cuando hay desbordamiento al realizar
alguna operacin matemtica

e) Objeto String
Al crear una cadena estamos
Su utilidad est en sus mtodos, entre lo
creando a la vez un objeto String asociado.
a posicin 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 estndar ECMA.
s que cabe destacar:

charAt(pos) y charCodeAt(pos)
Devuelven el caracter o el cdigo numrico del carcter que est en la
posicin indicada de la cadena.

indexOf(subcadena)
Devuelven l
no estar.

s
Devuelven un vector con subcadenas obtenidas separando la cad
carcter separador. No fun
cadena ="Navidad,Semana Santa
v
En el e
vacaciones de un escolar espaol normal.

c
Devuelve el re
Oscar E Capuay Uceda 74
DHTML


substr(indice,longitud) y substring(indice1, indice2)
Devuelven una
teres a
subcadena de la cadena, ya sea cogiendo un nmero de
arac partir de un ndice o pillando todos los caracteres entre dos
" onMouseOver="MiFuncion()">
Tabla 11. Eventos de J avaScript
Descripcin Elementos que lo admiten
c
ndices.

toLowerCase()y toUpperCase()
Transforman la cadena a minsculas y maysculas, respectivamente.

Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una
rutina nuestra se ejecute slo cuando suceda algo extrao 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 pequea gua de eventos definidos en J avaScript.

Evento
OnLoad
Terminar de cargarse una
pgina
<BODY...>
<FRAMESET...>
OnUnLoad
Salir de una pgina
(descargarla)
<BODY...><FRAMESET...>
onMouseOver Pasar el ratn por
<A HREF..>
encima
<AREA...>
onMouseOut
encima <AREA...>
Que el ratn 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 automticamente
to pasemos un cursor por encima de un elemento <A> (e en cuan
Oscar E Capuay Uceda 75
DHTML

impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del
HTML>
<SCRIPT LANGUAGE="JavaScript">
arios esconden el cdigo a navegadores sin JavaScript
function Alarma() {
e activo la funcin Alarma");
ue;

eb:
mismo).

Ejemplo 22: Eventos

eventos.html
<
<HEAD>

<!-- Los coment

alert("S
return tr
}
// -->
> </SCRIPT
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
esultado W R


Figura 39. Resultado de eventos.html


Figura 40. Resultado del mtodo alert
Oscar E Capuay Uceda 76
DHTML

Definicin mediante cdigo
isto como declarar un control Hemos v
HTML. Sin
ador de eventos desde etiquetas
s versiones 3 de Netscape y 4 de Explorer,
acerlo mediante cdigo.
rmiten atributos
acceso a dichos
tml
<HTML>
}
embargo, y desde la
tro modo de h existe o
Muchos objetos cuyas etiquetas HTML correspondientes pe
n controladores de evento, permiten el que define
controladores por medio de propiedades con el mismo nombre. Por ejemplo,
la pgina:

Ejemplo 23: Definicin mediante cdigo

load1.h

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios ocultan el cdigo a browsers sin JScript
function Saludo() {
alert("Hola");

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
. ..
</BODY>
</HTML>


Figura 41. Resultado de load1.html

Oscar E Capuay Uceda 77
DHTML


Figura 42. Resultado del mtodo alert
ibir como:
load2.html

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JS
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
/HTML>
Modelo de objetos d
uando funciona en un navegador, el lenguaje J avaScript 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 reescr S

<

el documento
C
s
documento sobre el que trabajamos, o el navegador que estamos utilizando.

Para los ms iniciados en la programacin orientada a objetos, conviene
aclarar que en esta jerarqua, contra lo
herencia alguna. Los objetos se relacionan por composicin, 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..

jerarqua es el objeto Window, qu El padre de esta
e nuestro navegad d
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.

Oscar E Capuay Uceda 78
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 sesin. En este captulo veremos los
mtodos y propiedades ms utilizadas, al menos por m, dejando el estudio
de dichos objetos para sus captulos correspondientes.
An cuando el objeto se llame Window, disponemos siempre de una
Por ltimo, indicar que en J avascript, 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 mtodo: el navegador automticamente 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 combinacin
enubar=no. Veamos un ejemplo:
<SCRIPT LANGUAGE="JavaScript">
Es el objeto principal. Define la venta
incluye los objetos referentes
referencia a l llamada window (recuerde que J avascript distingue entre
maysculas y minsculas). Ser con esa referencia con la que trabajemos.

mtodos que llamamos sin u
utilizando esa referencia window. As, por ejemplo, cuando ejecutamos el
mtodo alert en realidad lo que estamos haciendo es ejecutar el mtodo
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 vari d
simplemen
que pertenece al objeto window. El parmetro URL es una cadena que
contendr la direccin de la ventana que estamos abriendo: si est en
blanco, la ventana se abrir con una pgina en blanco. El nombre ser el
ue queramos que se utilice como parmetro de un TARGET y las q
propiedades 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 te
que algu
navegado
toolbar=no, directories=no, m

Ejemplo 24: Funcin open()

ventanas.html

<HTML>
<HEAD>
Oscar E Capuay Uceda 79
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 J avaScript. Se llama a la funcin AbrirVentana desde el
evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta
funcin crea la nueva ventana MiVentana y escribe en ella por medio del
objeto Document todo el cdigo HTML de la pgina.

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

Oscar E Capuay Uceda 80
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 sera
emasiado fcil hacer un script de esos mal intencionados que nos cerrase
del navegador, con lo que fastidia eso.
ra una ventana de dilogo con el mensaje especificado.
onfirm(mensaje)
a ventana de dilogo con el mensaje especificado y dos
OK, el mtodo 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 botn de Aceptar:
e llamas, criatura?", "");
tatus
adena de caracteres que saldr en la barra de estado en un
atus
Cierra
mostrar al usuario una ventana de confirmacin para que decida l si quiere
o no cerrarla. Esto se
d
la ventana

lert(mensaje) a
Muest

c
Muestra un
botones. Si el usuario pulsa
p

prompt(mensaje, sugerencia)
Muestra una ventana de dilogo con el mensaje especific
d
sugerencia. Si el usuario pulsa OK, el mtodo 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 condicin para ver que ha hecho
el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha
pulsado

var contestacion =prompt("Cmo t
if (contestacion)
alert("Hola, " +contestacion);

s
Define la c
momento dado.

defaultSt
Oscar E Capuay Uceda 81
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
conjuncin con write para aadir al final del documento
ector que contiene los formularios del documento. El primero ser el
ages[]
Vector que contiene las imgenes del documento. Se ordenan igual que en
o, aunque tambin permiten ser accedidas con el nombre
nks[]
cumento. Se ordenan igual que en los
os anterioers, aunque no se suele utilizar en el cdigo J avascript. Su razn
, al ser los enlaces objetos, permiten incluir cdigo J avascript
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 no
tom status.

setTimeout("funcin",tiempo)
Llama a funcin cuando hayan pasado tiemp
Imprescindible 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 re n
Link, los cuales permiten acceder a las imgene
documento, respectivamente.

astModified l
Contiene
se suele usar en
estas caractersticas.

lor bgCo
Modifica el color de fondo del documento. El color deber estar en el formato
usado en HTML. Es decir, puede ser red o FF0000.

forms[]
V
nmero 0, el segundo el 1, etc..

im
el anterior cas
como ndice. Es decir, a una imagen definida como <IMG SRC=" .."
NAME=" miImagen" > se puede acceder con
document.inages[" miImagen" ].

li
Vector que contiene los enlaces del do
d
de ser es que
e

write(cad
Escribe el cdigo HTML indica
writeln hace lo mismo, pero incluyendo al final un ret

close()
el documento, impidiend Cierra
Oscar E Capuay Uceda 82
DHTML


Cmo 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&aacute;gina fue modificada por ltima vez el da
<script language="JavaScript" type="text/javascript">
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>

Resultado Web:

A la hora
que tener
o document
cdigo 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
comunicacin entre los usuarios y los creadores de una Web. Sin embargo,
la implementacin 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
J avaScript, y realizan tareas simples de validacin. En muchas ocasiones
estn combinados con scripts CGI que modifican el mensaje generado por
un formulario para facilitar su lectura y manejo.

Oscar E Capuay Uceda 83
DHTML

El vector document.forms contiene todos los formularios de un
documento. As, se accedera al primer formulario definido como
document.forms[0]. Sin embargo, si usamos el parmetro NAME en la
etiqueta HTML:
<FORM NAME="miFormulario">

Entonces podremos acceder al formulario con document.miFormulario,
que resulta bastante ms cmodo y estable ante la posibilidad de variacin
del nmero y posicin de formularios en el documento. Estos son los
mtodos y propiedades del objeto Form:
submit()
Enva 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 comn
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, slo tienen tres propiedades
verdaderamente importantes: name, type y value.

Los mtodos que podemos utilizar en estos objetos son:
blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.
select(). Selecciona el texto dentro del objeto dado.

Como ejemplo de su uso, vamos a ver ahora el cdigo de nuestro primer
formulario con validacin, que comprueba si la direccin de correo
electrnico 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 direccin vlida');
Oscar E Capuay Uceda 84
DHTML

return false;
/HEAD>
T" ACTION="mailto:demo@capunay.com"
Env
<INPUT
</FORM

</BODY
</HTML>

Res

}
}
</SCRIPT>
<

<BODY>

<FORM NAME="form1" METHOD="POS
ENCTYPE="text/plain" onSubmit="return validar(this.email.value)">
&iacute;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 validacin


Oscar E Capuay Uceda 85
DHTML

El cdi
onSub
enviado
arroba e il del formulario.
La m
validar
depend
utiliza p
this.ema

this s
real d
que est
this se
del cam
haya tec

Obj o
En esto
propied
En amb estado del elemento es de tipo lgico: puede estar
seleccio
Por tan
un bot

Objeto
El objet
contiene
propied

selected
Empeza
hay vari cionadas, indica la opcin con el ndice ms bajo.

options[
Vector
una de
propied

selecte est seleccionada.
as. Cada etiqueta OPTION tendr como parmetro
gina Web e incluiremos un controlador del
go es sencillo: el cdigo llamado por el controlador de evento
mit debe devolver false si deseamos que el formulario no sea
. As pues, llamamos a la funcin que comprueba si hay alguna
n el campo ema
anera de llamar a esta funcin es quizs lo ms complicado. La funcin
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 funcin lo siguiente:
il.value
una referencia estndar. Cuando veamos this en algn cdig e o en
ida deberemos sustituirlo mentalmente por el nombre del objeto en el
el cdigo. 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 J avascript no corresponden a nada visible.
os casos, el
nado o no. Este valor lgico se contiene en la propiedad checked.
to, para comprobar si est pulsado o no una caja de confirmacin o
n de seleccin especfico deberemos preguntar por dicha propiedad.
s Select y Option
o Select es, con mucho, el ms 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 opcin 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 lgico que ser verdadero si la opcin

Text : Texto que acompaa a la opcin.

Como ejemplo, vamos a ver una lista desplegable que nos permita navegar
por diversas pgin
VALUE la direccin de la p
Oscar E Capuay Uceda 86
DHTML

evento onChange (que se ejecuta cuando el usuario cambia la opcin
en la lista) que llamar a una rutina que explicamos ms 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 opcin elegida para obtener por medio
r la direccin de la pgina 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
o
n
de su val
Resultado Web:


Figura 48. Resultado de select.html

Oscar E Capuay Uceda 87
DHTML

Otros objetos
lo de objetos del documento define varios objetos, por as decirlo,
cin con nada fsico de la pgina en la que
que estn en
dio de la referencia document.history y
ontiene todas las direcciones que se han visitado en la sesin actual.
erm pone de varios mtodos para sustituir
l documento actual por alguno que el usuario ya haya visitado:
a pgina anterior. Es muy sencillo de utilizar:
iente.

e se indique, siendo donde un nmero tal que go(1)=forward()
rotocolo de la pgina actual. Habitualmente http.
de se alberga la pgina actual.
la pgina actual.
dido a una pgina por medio de un ancla, contiene una
ohadilla seguida de ese ancla. Por ejemplo, #location.
E
"m
l mode
enores", que no tienen rela
estamos. Es decir, no guardan relacin con las etiquetas HTML
ellas escritas.

Objeto History
Se accede a este objeto por me
c
Aunque no p ite acceder a ellas, dis
e

back()
Volver a l
<A HREF="javascript:window.history.back()">

forward()
Ir a la pgina sigu

go(donde)
Ir a dond
y go(-1)=back().

Objeto Location
Se accede a este objeto por medio de la referencia document.location y
contiene informacin sobre la direccin de la pgina actual en varias
propiedades.

href
Permite el acceso a la direccin de la pgina actual. Si lo cambiamos, pues
cambiaremos de pgina.

protocol
P

host
Mquina don

pathname
Camino de

hash
Si hemos acce
alm

search
Oscar E Capuay Uceda 88
DHTML

Puede que hallas notado que muchas pginas (especialmente en los
con una estructura
ina.php?busq=HTML+en+espanol&tipo=Y. Esta propiedad
acceder a esa ltima parte de la direccin (a partir de la
terrogacin, inclusive). Puede ser til para pasar parmetros de una pgina
donde esta ejecutndose.
o podemos sobreescribir estos atributos, pero s leerlos.
bjeto slo 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 bsqueda) tienen unas direcciones inmensas
como: pag
permite
in
a otra.

Objeto Navigator
Se accede a l por medio de la referencia navigator y nos permite
averiguar varias caractersticas del navegador que usamos. Por ejemplo:

appName
Nombre del navegador.

appVer
Nmero principal de versin.

language
Idioma del mismo.

platform
lataforma P
N
Objeto Screen
Como caba esperarse, se puede acceder a este objeto por medio de la
referencia screen. Nos permitir conocer la configuracin de la pantalla del
usuario. Al igual que en el anterior objeto, todos sus atributos son de slo
ctura. Conviene indicar que este o le
versiones 4.

height :Altura de la resolucin de la pantalla.
width :Anchura de la resolucin de la pantalla.
pixelDepth :Nmero de bits por pixel.

jemp E
if (window.screen)
texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + "
colores.";
else
texto="quien sabe cuantos colores, necesito que teng
a
rando un de circun
Oscar E Capuay Uceda 89
DHTML

Fich
Un fi es un ar e podremos guardar funciones y variables
globa rn leerse desde cualquier pgina HTML. Gracias a ellos
podre plicar funciones que se necesiten en ms de
un do rarlos a nuestras pginas de esta manera:

Ejemplo 27: Uso de

externo.html

<HTM
<HEA
<TIT gina</TITL
<SCRIPT LANGUAGE=" ript" SRC="funciones.js">
<!--
alert('Error con el ficher
// -->
</SCRIPT>
</HEAD>
<BODY>
Lo qu ea.
</BODY>
</HTM

El cdigo q IPT>slo se
ejecu de q ra del fichero .js falle. Por otra parte, hay
que i fiche n cuestin contendr slo cdigo en J avascript,
no e e n tipo, ni siquiera las de apertura y cierre de
SCRIPT.

eros .js
chero .js chivo dond
les que pod
mos evitar el tene
cumento. Podrem
r que du
os incorpo
archivos js
L>
D>
LE>Mi P E>
Javasc
o js');

e s
L>
ue incluyam
tar en caso
os entre un <SCRIPT SRC>y un </SCR
ue la lectu
ndicar que el ro e
tiquetas HTML d ning

Oscar E Capuay Uceda 90
DHTML

HOJ

CSS Ca

Dentro del dis eb, se presenta esta como la vanguardia en
uanto a definicin de estilos dentro de las plantillas de diseo. A travs de
nforman el proyecto.
SS2, como fue antes CSS1, se basa en una serie de reglas de diseo:
atibilid Las aplicaciones del
o CSS s hojas de estilo CSS1.
aci e estilo
y de Adems, las
ones
trar los
to estil r CSS no ser procesado, pero
el conte
men os. Las hojas de
comp
aciones
marcado. D
impacto en e
Independen or, la plataforma y el dispositivo. Las hojas
un archivo necesita
ser cambiado.
d. CSS2 es ms 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 codificacin
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 mayora de las veces, disminuyen el tamao del
Adems, 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 caracterstica clave es la capacidad de formar una
cascada de estilos con la informacin especificada en la hoja de
AS DE ESTILO EN CASCADA
scade Style Sheet (Hojas de Estilo en Cascada).
eo de pginas W
c
instrucciones en cdigo HTML se definen los estndares del conjunto de
pginas que co
C
Comp
usuari
ad hac
2 sern capaces de entender la
ia atrs y hacia adelante.
Las aplic ones del usuario CSS1 podrn leer las hojas d
scartar las partes que no entienden. CSS2
aplicaci
mos
del usuario que no soporten CSS sern capaces de
documentos estilsticamente mejorados. Por supuesto, el
efec
todo
stico hecho posible po
nido ser presentado.
Comple tariedad con documentos estructurad
lementan los documentos estructurad estilo os (ej., HTML y
XML) proveyendo informacin estilstica del texto
ebe ser fcil cambiar la hoja de estilo con poco o ningn
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 tambin 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 pginas de una organizacin cambia, slo
Simplicida
un lengua
de escribir. Las propiedades CSS se mantienen independientes unas
de otras en la medida de lo posible y generalmente slo hay un
modo de conseguir un efecto d
para presentar
imge
autores p
hojas de es
contenido.
Oscar E Capuay Uceda 91
DHTML

estilo predeterminada (aplicacin 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 expresin. Los diseadores han estado ambicionando la
funcionalidad comnmente encontrada en los programas de edicin
y de presentaciones grficas. Algunos de los efectos requeridos
entran en conflicto con la independencia del dispositivo, pero CSS2
llega muy lejos satisfaciendo las demandas de los diseadores.
Combinacin con lenguajes alternativos. El juego de propiedades de
CSS descriptas en esta especificacin conforman un slido modelo
de aplicacin de formatos para presentaciones visuales y auditivas.
Este modelo puede ser accedido mediante el lenguaje CSS, pero la
combinacin con otros lenguajes tambin es posible. Por ejemplo,
un programa en J avaScript puede cambiar dinmicamente el valor
de la propiedad 'color' de un determinado elemento.
Accesibilidad. Varias caractersticas de CSS harn a la Web ms
accesible para los usuarios con discapacidades:
Las propiedades para controlar la apariencia de las fuentes permiten
a los autores eliminar las inaccesibles imgenes de texto
renderizado.
Las propiedades de posicionamiento permite a los autores eliminar
los artilugios con el sistema de marcas (ej., imgenes invisibles) para
forzar la composicin.
La semntica de las reglas !important indica que los usuarios con
particulares requerimientos de presentacin 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 ms
fcil y consistente sintona en el estilo.
El avanzado soporte de medios, incluyendo grupos de medios y los
tipos de medios braille, de relieve y tty permitirn a los usuarios y
autores confeccionar pginas para esos dispositivos.
Las propiedades auditivas ofrecen control sobre la salida de voz y
audio.
Los selectores de atributos, la funcin 'attr()' y la propiedad 'content'
brindan acceso al contenido alterno.
Los contadores y la numeracin de secciones y prrafos pueden
mejorar la navegabilidad del documento y economizar espacio de
sangrado (importante en los dispositivos braille). Las propiedades
'word-spacing' y 'text-indent' tambin eliminan la necesidad de usar
espacios en blanco extras en el documento.

Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo.
Para esta gua, necesitar saber un poco del cdigo HTML y alguna
terminologa bsica de composicin grfica. Comenzamos con un pequeo
documento HTML:

Ejemplo 28: HTML y CSS
Oscar E Capuay Uceda 92
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&aacute;gina le ayudar&aacute; a dise&ntilde;ar p&aacute;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
declaracin ('color: blue'). La declaracin tiene dos partes: una propiedad
('color') y un valor ('blue').
La especificacin 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 travs 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&aacute;gina Web te ense&ntilde;ar&aacute; mucho.
</BODY>
</HTML>
Para una mayor flexibilidad, recomiendo que los diseadores especifiquen
hojas de estilo externas; ellas pueden cambiarse sin modificar el documento
fu
una 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&aacute;gina Web te ense&ntilde;ar&aacute; mucho.
Oscar E Capuay Uceda 93
DHTML

</BODY>
ento LINK especifica:
lesheet").
uto "href".
de hoja de estilo que se vincula: "text/css".
Para mostrar la ntima relacin 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 ningn valor para el color
ento P, ste heredar el color de su elemento padre, es decir,
ento H1 tambin es un elemento hijo de BODY pero la
plaza el valor heredado. En CSS existen a menudo tales
ntre diferentes valores y esta especificacin describe cmo
erlos.
2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos
</HTML>

El elem
el tipo de vnculo: a una hoja de estilo ("sty
la ubicacin de la hoja de estilo a travs del atrib
el tipo
estructurado de marc
gua. Agreguemos ms 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&aacute;gina Web te ense&ntilde;ar&aacute; mucho.
</BODY>
</HTML>
a hoja de estilo contiene ahora dos reglas: la primera establece el colo L
elemento BO Y como 'red' , en tanto la se
lemento H1 mo no se ha especificad e
del elem
BODY. El elem
la reem segunda reg
nflictos e co
resolv
SS C
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>
Oscar E Capuay Uceda 94
DHTML

<H1>La Web de OscarCap</H1>
<P> Esta p&aacute;gina Web te ense&ntilde;ar&aacute; 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 declaracin tambin debe estar seguida por un punto y
coma.
La primera declaracin 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 genricas
ue todas las aplicaciones del usuario reconocen. Los elementos hijos de
argen alrededor del elemento BODY es tres veces mayor que el tamao de
de CSS (incluyendo CSS2). Las futuras
q
BODY heredarn el valor de la propiedad 'font-family'.
La segunda declaracin establece el tamao de la fuente del elemento
BODY en 12 puntos. La unidad de medida "punto" es normalmente usada en
la tipografa impresa para indicar el tamao de la fuente y otras dimensiones.
Es un ejemplo de unidad de medida absoluta que no vara segn el entorno.
La tercera declaracin usa una unidad de medida relativa que vara de
acuerdo a las circunstancias. La unidad "eme" est relacionada con el
tamao de la fuente del elemento. En este caso el resultado es que el
m
la fuente.

Sintaxis y tipos bsicos de datos en CSS2
Esta seccin describe una gramtica (y reglas de anlisis con compatibilidad
utura) comn a cualquier versin f
versiones de CSS adherirn a esta sintaxis central, aunque pueden agregar
restricciones sintcticas adicionales.

Comandos
Todos los niveles de CSS --nivel 1, nivel 2 y cualquier futuro nivel-- usan la
misma sintaxis central. Los diseadores pueden usar esta caracterstica para
crear hojas de estilo que funcionen con aplicaciones de usuario antiguas,
mientras ejercitan tambin las posibilidades de los niveles ms nuevos de
CSS.

A nivel de lxico, 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 cdigos octales
se refieren a ISO 10646. Como en Lex, en caso de mltiples equivalencias,
la equivalencia ms larga determina el comando.

Tabla 12. Comando CSS
Comando Definicin

IDENT {ident}
ATKEYWORD
ST
@{ident}
RING {string}
Oscar E Capuay Uceda 95
DHTML

Comando Definicin
HASH #{name}
N {num}{ident}
&*-
~] | {nonascii}| {escape}) *{w}\ )
ICODE-
U\ +[ 0- 9A- F?] {1, 6}( - [ 0- 9A- F] {1, 6}) ?
<! - -
\ }
) \ )
\ r \ n\ f ] +
~=
DASHMATCH | =
Tabla 13. Macros CSS
NUMBER {num}
PERCENTAGE {num}%
DIMENSIO
URI
ur l \ ( {w}{string}{w}\ )
| ur l \ ( {w}( [ ! #$%
UN
RANGE
CDO
CDC - - >
; ;
{ \ {
}
( \ (
[ \ [
] \ ]
S [ \ t
COMMENT \ / \ *[ ^*] *\ *+( [ ^/ ] [ ^*] *\ *+) *\ /
FUNCTION {ident}\ (
INCLUDES
DELIM
cualquier otro carcter no equivalente con las reglas
anteriores

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

Macro Definicin

- 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- zA
num [ 0- 9] +| [ 0- 9] *\ . [ 0- 9] +
string {string1} {string2}
Oscar E Capuay Uceda 96
DHTML

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

Abajo est la sintax CSS. Las en
cm .
a ATKEYWORD S* otros* [ bloque | ';' S* ];
'}' S*;
elector otros+;
declaracin propiedad ':' S* valor;
UNCTION | DASHMATCH | '(' otros* ')' | '['
otros* ']' ] S*;
T no aparecen en la gramtica (para mantenerla
gible), pero cualquier cantidad de estos comandos pueden aparecer en
r e
l comando S en la gramtica anterior est colocado para los espacios en
Solamente los caracteres "espacio" (cdigo 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 ideogrfico"
clave to s palabras clave no
s una palabra clave,
d" no lo es. (Es una cadena.)
|
~] | \ \ {nl } cii}| string2 t ! #$%&( | \ " | {nonas
nl
w
is central para secciones siguientes describ
o usarla

Tabla 14. Secciones CSS
hoja de estilo [ CDO | CDC | S | estamento ]*;
estamento regla | regla-arroba;
regla-arrob
bloque '{' S* [ otros | bloque | ATKEYWORD S* | ';' ]* '}' S*;
regla selector? '{' S* declaracin? [ ';' S* declaracin? ]*
s
propiedad IDENT S*;
valor [ otros | bloque | ATKEYWORD S* ]+;
otros [ IDENT | NUMBER | PERCENTAGE | DIMENSION |
STRING | DELIM | URI | HASH | UNICODE-RANGE |
INCLUDES | F

Los comandos COMMEN
le
cualquier luga ntre otros comandos.
E
blanco.
"tabulador" (9), "avance de lnea" (10), "retorno de carro" (13) y "av
hoja"
p
(12288) nunca forman parte de los espacios en blanco.

Palabras clave
Las palabras man la forma de identificadores. La
deben ir entre comillas ("..." o '...'). De este modo, red e
pero "re

Otros ejemplos ilcitos:
width: "auto";
border: "none";
font-family: "serif";
background: "red";


Oscar E Capuay Uceda 97
Iniciando la programacin con PHP

III. Iniciando la programacin con PHP
Para iniciar debemos conocer algunos conceptos bsicos, para ello nos
s PHP?
pertext Preprocessor") es un lenguaje de
go abierto" interpretado, de alto nivel, embebido en pginas HTML y
tado en el servidor [1]. Este lenguaje se caracteriza porque solo es
o J avaScript, 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 smbolo de dlar ($) 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 funcin define(),
stantes solo puede albergar valores escalares
haremos una pregunta:
Que e
PHP (acrnimo de "PHP: Hy
"cdi
jecu e
interpretado pero no compilado, y es embebido en el cdigo HTML, lo que le
da una alto rendimiento y potencia.
diferencia de otros lenguajes script com A
script que se ejecuta en el servidor Web, de tal manera que, solamente el
resultado de su ejecucin es enviado al cliente Web (navegador). Tomando
en cuenta lo escrito anteriormente podemos decir que, el cdigo fuente
escrito en PHP no aparecer en el cdigo fuente de la pgina Web que
muestra el navegador.
Viendo el lenguaje desde el punto de vista del programador podemos decir
ue es un lenguaje con una sintaxis q
campos: el primero - el mas tradicional - es en los scripts del lado del
servidor, el segundo es la ejecucin de scripts en la lnea de comandos del
sistema operativo (Linux o Windows); y el tercero en el desarrollo de
plicaciones de interfaz grfica con PHP a
Variables
Las variable
necesidad de ser declaradas previamente. La s
variables esta definido por el
d
variable.
Por ejemplo para hacer referencia a la variable
Constantes
te usando la funcin de Se puede definir una constan
no puede ser modificada ni eliminad
ara obtener el valor de una con P
nombre. A diferencia de las variables, no se

Estas son las diferencias entre constantes y variables:

nunca por simple asignacin


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 despus de
establecerse; y
Las con
Oscar E Capuay Uceda 99
Iniciando la programacin con PHP


Ejemplo 31: Definicin 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 expresin con el valor 5 (en este caso,
) {
zado con el concepto de funciones, asumirs
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 (nmero de punto-flotante, tambin conocido com
s esp string Dos tipos compuestos: array, object Y finalmente dos tipo
resource y NULL.
E
Las expresiones son la piedra angular de PHP. En PHP, casi cualquier cosa
que escribes es una expresin. La forma ms simple y ajustada de definir
una expresin es "cualquier cosa que tiene un valor".

Las formas ms bsicas de expresiones son las constantes y las variables.
Cuando escribes "$a =5", ests asignando '5' a $a. '5
'5' es una constante entera).

Las funciones son un ejemplo algo ms complejo de expresiones.

Ejemplo 32: Considera la siguiente funcin

?php <
function foo (
return 5;
}
?>

niendo que ests familiari Supo
q
acertado. Las funciones son expresiones que valen el valor que retornan.
Como foo() devuelve 5, el valor de la expresin 'foo()' es 5. Norma
funciones no devuelven un valor fijo, sino que suele ser calculado.

Desde luego, los valores en PHP no se limitan a enteros, y lo ms normal es
que no lo sean. PHP soporta tres tipos escalares: enteros, punto flotante y
cadenas (los tipos e
en partes menores, no como los arrays, por ejemplo). PHP tambin 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 ningn tipo de limitacin.

Oscar E Capuay Uceda 100
Iniciando la programacin con PHP

P va las cho m
es un lenguaje orientado a expresi en el sentido de que casi todo es
una expresi mpl
dos 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 asignacin. La asignacin
misma se ev o
decir que '$a =5', independienteme lo que hace, es una expresin con
l valor 5. De esta manera, escribir algo como '$b =($a = 5)' es como
5; e una instruccin).
omo las asignaciones se evalan 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 expresin
cremento. El preincremento, escrito '++$variable', se evala al valor
variable antes de leer su valor, de ah el
'preincremento'). El postincremento, escrito '$variable++', se evala
alizar el incremento (PHP incrementa
de ah el nombre 'postincremento').
s son las expresiones de comparacin.
xpresiones se evalan 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 ejecucin
taremos, es la combinacin operador-
incrementar $a en 1, basta con escribir
' o ++$a'. Pero qu pasa si quieres aadir ms de 1, por ejemplo 3?
odras escribir '$a++' mltiples veces, pero no es una forma de hacerlo ni
se evala al valor de $a ms 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 ms
lara y tambin fcil de entender. Aadir 3 al valor actual de $a se puede
re decir exactamente "toma el valor de $a,
male 3, y asgnalo otra vez a $a". Adems de ser ms corto y claro,
resulta en una ejecucin ms rpida. El valor de '$a +=3', como el
a asignacin normal y corriente, es el valor asignado. Ten en
o el valor combinado de $a ms 3 (se es el valor
alquier operacin binaria puede ser usada en forma de
erador-asignacin, por ejemplo '$a -=5' (restar 5 del valor de $a), '$b *=7'
iplicar el valor de $b por 7), etc.
n que puede parecer extraa 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
ala al valor asignad , en este caso 5. En la prctica, quiere
nte de
e
escribir '$a = $b =5;' (un punto y coma marca el final d
C
tambin

En PHP
incremento. Ambos, en esencia, incre
variable es idntico. La diferencia ra
in
incrementado (PHP incrementa la
nombre
al valor original de $variable antes de re
la variable despus de leer su valor,

Un tipo muy corriente de expresione
Estas e
VERDADERO (TRUE), respectivame
(mayor o igual que), ==(igual que), !
ig
condicional como la instruccin if.

El ltimo tipo de expresiones que tra
asignacin. Ya sabes que si quieres
'$a++
P
eficiente ni cmoda. Una prctica mucho ms corriente es escribir '$a =$a +
3'. '$a +3'
re
puedes escri esto de una forma ms concisa, que con el tiempo se
c
escribir como '$a +=3'. Esto quie
s
tambin
valor de un
cuenta que NO es 3, sin
asignado a $a). Cu
op
(mult

Hay otra expresi
le
Oscar E Capuay Uceda 101
Iniciando la programacin con PHP

$first ? $second : $third
ubexpresin es verdadero (distinto de cero),
entonces se evala la segunda subexpresin, si no, se evala 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 instruccin
a expresin seguida de un punto y coma.
na instruccin en
lida [3].
perador es algo a lo recibe uno o ms valores y produce otro valor.
Existen tres tipos de operadores:
era sobre un nico valor, por ejemplo: !
perador de negacin) ra
S los o mayora de
o que
Y or te ste d
e s, en a terce
o ecu r las e
muy 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 ge ncremento expresione neral:
?php
unction doub $i) {
=5; /* asignar el inco a las variables $a y $b */
ostincreme
preincreme
gnar el valor original de $a
signar el valor incrementa $e =$d
a $d y a $e */

/* En este punto, tanto $d como $e son iguales a 6 */

$f =double($d++); /* asigna
2*6 =12 a $f */
$g = double(++$e); /* asignar el doble del valor de $e despus del
incremento, 2*7 =14 a $g */
$h =$g +=10; /* primero, $g es incrementado en 10 y termina valiendo
24. Despus el valor de la asignacin (24) se asigna a $h, y $h tambin
acaba valiendo 24. */
?>

No tod
tiene la forma 'expr' ';', es decir, un
En '$b=$a=5;', $a=5 es una expresin vlida, pero no es u
s misma. Por otro lado '$b=$a=5:' s es una instruccin v
Operadores
Un o

l operador unario, el cual op E
(o o ++ (ope dor de incremento).
binar upo contiene la egundo,
s
peradores
PHP.
ios; este gr
peradore soporta
el operad
xpresione
rnario: ?:.
base a un
ebe ser usado para seleccionar entre dos
ra, en lugar de seleccionar dos sentencias
rutas de ej cin. Rodea
. [4]
xpresiones ternarias con parntesis es una
os de operad , a continuacin veremos algu
Oscar E Capuay Uceda 102
Iniciando la programacin con PHP

Operadores de Aritmtica
El opuesto de $a
Suma de $a y $b.
Substraccin Diferencia entre $a y $b.
Multiplicacin Producto de $a y $b.
Divisin 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 asignacin es "=". A primera vista, usted podra
en l como "es igual a". No lo haga. Lo que quiere decir en realidad
de la izquierda recibe el valor de la expresin a la
e a").
El valor de una expresin de asignacin es el valor que se asigna. Es decir,
el valor de "$a =3" es 3.

Ejemplo 33: Operador de asignacin

<?php
$a =($b =4) +5; // $a es igual a 9 ahora, y $b ha sido definido a 4.
?>

En conjunto con el operador bsico de asignacin, existen "operadores
combinados" para todos los operadores de aritmtica binaria, unin de
matrices y de cadenas, que le permiten usar un valor en una expresin y
luego definir su va
?php
a +=5; // define $a como 8, como si hubisemos dicho: $a =$a +5;
b .="a todos!"; // (Ojo con el punto . Despus de la variable $b) define $b
Hola a todos!", tal como $b =$b . "a todos!";
ote que la asignacin copia la variable original en la nueva (asignacin por
bio a una no afecta a la otra. Esto puede
copiar algo como una matriz de gran

Tabla 15. Operadores aritmticos de PHP
Ejemplo Operador Resultado
-$a Negacin
$a +$b Adicin
$a - $b
$a * $b
$a / $b
$a % $b Mdulo Re

El operador de divisin ("/") devuelve un valor flotante
incluso si los dos operandos son ente
enteros).

Nota: El resto de

Operadores de Asignacin
El o
ensar
perador bsi
p
es que el operando
erecha (es decir, "se defin d

lor como el resultado de esa expresin.

Ejemplo 34: Operadores de asignacin combinados

<
$a =3;
$
$b ="Hola ";
$
como "
?>

N
valor), de modo que cualquier cam
resultar de importancia si necesita
Oscar E Capuay Uceda 103
Iniciando la programacin con PHP

tamao al interior de un ciclo reducido. A partir de PHP4, es soportada la
signacin por referencia, usando la sintaxis $var =&$otra_var;, pero esto
HP3.
Operadores de
en 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 idnticos 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 nmero.
cadenas numricas, ellas son comparadas como enteros.
stas reglas tambin 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
a
no es posible en P

Comparacin
Estos operadores permit

Tabla 16. Operadores de comparacin de PHP
Ejemplo O
$a ===$b Idntico TR
$a !=$b
$a !=
$a >$b
que


S
Si 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: Operado Ej

<?php
Oscar E Capuay Uceda 104
Iniciando la programacin con 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 funcin 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 ms 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 lnea anterior es 't'
be a que las expresiones ternarias
son evaluadas de izquierda a derecha
presentado anteriormente
'tru
uede ver que la primera expresin
'true', la cual
en su lugar evala a (bool)true, devolviendo por lo tanto
la rama de verdad de la segunda expresin ternaria.
peradores de Control de Errores
para un operador de control de errores: el signo de
o es colocado al comienzo de una expresin en PHP,
de error que pudiera generarse a causa de esa expresin
$a

// La lnea anterior es idntica a esta
if (empty($_POST['accion'])) {
$a
}
$accion =$_PO

La expresin (expr1) ? (expr2) : (expr3) evala a expr2 si expr1 evala a
TRUE, y expr3 si expr1 evala a FALSE.

N
evala a una ariable, sino al resultado de una
s
return $
funcionar por lo qu
ve

Nota: Es recomendable que evite
co
int

Ejemplo 36: Comportamiento Te

<?ph
//
echo (true?'true':false?'t':'f');

// sin emba
// esto se de
//

// la siguiente es una versin ms obvia del cdigo
//
echo ((true ? e' : 'false') ? 't' : 'f');

// aqu p
// es evaluada como
//
//
?>
O
PHP ofrece soporte
and arroba (@). Cu
cualquier mensaje
ser ignorado.

Oscar E Capuay Uceda 105
Iniciando la programacin con PHP

Si la caracterstica 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
in, no solo con funciones:
valor =@$cache[$llave];
// no producir una anotacin si el ndice $llave no existe.
?>

Nota: El operador @ trabaja slo 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 funcin o clase, ni sobre estructuras
condicionales como if y foreach, y as sucesivamente.
Operadores de ejecucin
PHP soporta un operador de ejecucin: las comillas invertidas (``).
PHP ejecuta el contenido entre las comillas como si se tratara de un
comando del intrprete de comandos; su salida ser devuelta (puede ser
asignada a una variable).El uso del operador de comillas invertidas es
idntico al de shell_exec().

Ejemplo 38: Operador de ejecucin

<?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 expresin ser almacenado en la variable $p
La va
c

E

<?php
/* Error inten
$m
die ("La apertura de archivo ha fallado: el error fue '$php_errormsg'");

// esto funciona con cualquier expres
$
Oscar E Capuay Uceda 106
Iniciando la programacin con PHP

++$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; $a
echo "Debe ser 5: " . $a-- . "<br />\n";
ho "Debe ser 4: " . $a . "<br />\n"; ec

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

como se trabaja los Note
aract c

Ejemplo 40: Incremento y decremento con variables tipo carcter.

o

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

Resu

Oscar E Capuay Uceda 107
Iniciando la programacin con PHP


Figura 49. Resultado de operadores_i.php
os operadores de incremento/decremento no afectan a los valores
peradores de Lgica
Tabla 18. Operadores lgicos
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 Negacin TRUE si $a no es TRUE.
s "and" y
datos tipo string. El primero es el operador de
oncatenacin ('.'), el cual devuelve el resultado de concatenar sus
ntas a lado derecho e izquierdo. El segundo es el operador de
bre concatenacin ('.='), el cual adiciona el argumento del lado
do izquierdo.
e cadena
="Hola ";
$a . "Mundo!"; // ahora $b contiene "Hola Mundo!"

Nota: L
booleanos. 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 razn 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", analgicamente ocurre con "or".
peradores de Cadena O
Existen dos operadores para
c
argume
asignacin so
derecho al argumento en el la

Ejemplo 41: Operadores d

<?php
$a
$b =

$a ="Hola ";
$a .="Mundo!"; // ahora $a contiene "Hola Mundo!"
?>
Oscar E Capuay Uceda 108
Iniciando la programacin con PHP

Operadores de Matrices
in de $a y $b.
si $a y $b tienen las mismas
smas
TRUE si $a no es igual a $b.
a no es idntico 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>Unin de \$a y \$b: <br>";
);
// Unin de $b y $a
ho "<br>Unin de \$b y \$a: <br>";
ar_dump($c);

Tabla 19. Operadores de matrices
Ejemplo Operador Resultado
$a +$b Unin 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 aqul al lado izquierdo, al E
mismo t

Ejemplo 42: Operadores

eradores_ op

<?p
$a =arra
$b =arra

$c =$a +$b; // Unin de $a y $b
e
var_dump($c

$c =$b +$a;
ec
v
?>

Resultado Web:


Figura 50. Resultado de operadores_m.php

Oscar E Capuay Uceda 109
Iniciando la programacin con PHP

Los element de las matrices son considerados equivale os ntes en la
omparacin si stos tienen la misma clave y valor.
43: Comparacin de matrices
ces.php
p
a =array("manzana", "pltano");
ar_dump($a ===$b); // bool(false)
?>

Resultado Web:

c

Ejemplo

comp_matri

<?ph
$
$b =array(1 =>"pltano", "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:

Oscar E Capuay Uceda 110
Iniciando la programacin con PHP


Figura 52. Resultado de instanciade.php

instanceof puede ser usado tambin 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 tambin 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
{
}
Oscar E Capuay Uceda 111
Iniciando la programacin con PHP

$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,
tambin 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 sera:
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 d E

bool(true)
ool(true) b
bool(false)

El operador instanceof fue introducido en PHP 5. Anteriormente is_a() era
usado, pero desde entonces is_a() ha sido marcada como funcin obsoleta,
prefirindose el uso de instanceof.

Oscar E Capuay Uceda 112
Estructuras de Control

IV. Estructuras de Control

Una sentencia puede ser una asignacin, una llamada a funcin, un bucle,
na sentencia condicional e incluso una sentencia que no haga nada (una
de
sent ci s es tambin 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
xpresin condicional)
s) in es verdadera
8: If ejecuta una sentencia si la condicin es verdadera
ra 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.
u
sentencia vaca). Las sentencias normalmente acaban con punto y coma.
Adems, las sentencias pueden estar compuestas por un grupo
en as delimitadas con llaves. Un grupo de sentencia
enc a.
aptulo veremos diferentes tip E

iciaremos viendo las sentenci In

Si
Permite la ejecucin
base el result
la misma sintaxis b

<?p
f (e i
{

}
Sentencia( cuando la expres
?

>
Ejemplo 4

<?php
if ($a >$b)
print "a es mayor que b";
?>

El ejemplo mostra
El uso de las llaves es para la ejecucin de un conjunto de sentencias.


Ejemplo 49: If con varias sentencias si la condicin es verdadera

<?php
if ($a >$b
echo "a


$mayor
$menor =$b;
}
?>

Las sente

Oscar E Capuay Uceda 113
Estructuras de Control

Ejemplo 50: If anidado
)
{
echo a es mltiplo y mayor que b;
mayor =$a;
}
ejecucin de sentencias en caso la expresin
dicional del if resulte falsa.
: Uso de else en una sentencia if

ayor que b";
NO es mayor que b";
ras).
a combinacin 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
xpresin elseif (si hay alguna) que resulte verdadera se ejecuta. La
sentencia elseif se ej o cualquier
expresin 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 la qu
con

1 Ejemplo 5

<?php
if ($a >$b) {
echo "a es m
}else {
echo "a
}
?>
elseif
Tambin se puede escribir else if (con espacio entre las palab
elseif es un
resulte fals
elseif 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 pr
e
ecuta sl si la expresin if precedente y
edente se resulta falsa.
Oscar E Capuay Uceda 114
Estructuras de Control

for
y

resin (expr1) se ejecuta una vez al principio del bucle.
zo de cada iteracin, se evala expr2. Si resulta verdadera, el
ejecutan. Si resulta falsa, la
cada iteracin, se ejecuta expr3.
del 1 al 10 utilizando la sentencia for
hile
cle ms simples en PHP. Se comportan
o su contrapartida en C. La forma clsica 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 iteracin en vez de al principio.
La principal diferencia frente a los bucles regulares while es que se garantiza
la ejecucin de la primera iteracin de un bucle do..while (la condicin se
comprueba slo al final de la iteracin), mientras que puede no ser
necesariamente ejecutada con un bucle while regular (la condicin se
comprueba al principio de cada iteracin, si esta se evala como FALSE
desde el principio la ejecucin del bucle finalizar inmediatamente).

Hay una sola sintaxis para los bucles do..while:

Los bucles for son los bucles ms complejos en PHP. Su comportamie
intaxis es similar a la definida en el lenguaje C.
nto
s

or (expr1; expr2; expr3) sentencia f

a primera exp L

Al comien
bucle contina y las sentencias anidadas se
del bucle finaliza. ejecucin

Al final de
Ejemplo 53: Imprimir los nmeros

<?php

or ($i =1; $i <=10; $i++) { f
print $i;
}

w
Los bucles while son los tipos de bu
com

w
{
S
}

Oscar E Capuay Uceda 115
Estructuras de Control

Ejemplo 54: Imprimir los nmeros del 1 al 10 utilizando while

<?php
$i =0;
do {
print $i;
}while ($i>0);
?>

El bucle de arriba se ejecutara exactamente una sola vez, despus de la
primera iteracin, cuando la condicin se comprueba, se evala como
FALSE ($i no es ms grande que 0) y la ejecucin del bucle finaliza.

Oscar E Capuay Uceda 116
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 smbolos:
ara iniciar PHP: <?php
zar PHP: ?>
AD>
mplo PHP </TITLE>
>
uiente c&oacute;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 cdigo
HP o no, en caso que slo sea HTML, el archivo es enviado directamente
o del procesamiento al cliente. Segn el ejemplo anterior, el
ocumento sera enviado a ser procesado, en este proceso se interpretara
las lneas de cdigo y despus el resultado sera enviado al cliente.
p
>Primer Ejemplo PHP </TITLE>
>
Hipertext Preprocessor<BR>
Preprocessor
mos que aprender es como insertar c
d
En HTML se baja en base a m
<
conjunto de etiquetas que componen el documento Web el inic
c

P
Para finali

Ejemplo 55: Pagina01.php

<HTML>
<HE
<TITLE>Primer Eje
</HEAD
<BODY>
El sig
<?php

echo "Hipertext Prep

?
</BODY>
</HTML>

Cuando un
servidor W
P
al cliente, pero en caso que tenga cdigo PHP es enviado a ser procesado el
documento que ha sido solicitado para ser procesado y luego enviar el
resultad
d

A continuacin veremos el resultado de la solicitud y procesamiento de la
pgina programada anteriormente (pagina01.php).

Pagina01.ph

<HTML>
<HEAD>
<TITLE
</HEAD
<BODY>
El siguiente c&oacute;digo imprime
Hipertext
Oscar E Capuay Uceda 117
Acceso a Datos con PHP

</BODY>
</HTML>

Este cdigo 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 cdigo PHP en el documento HTML, por
m&aacute;s simple, una instrucci&oacute;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 mtodo uno, no siempre est disponible. El formato corto de etiquetas
est disponible con la funcin short_tags() (slo PHP 3), activando el
parmetro del fichero de configuracin de PHP short_open_tag, o
compilando PHP con la opcin --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 mtodo tres slo est disponible si se han activado las etiquetas ASP en
el fichero de configuracin: asp_tags.

ota: No se debe usar el formato corto de etiquetas cuando se desarrollen
aplicaciones o bibliotecas con intencin 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

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

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

N
idores que no estn bajo nuestro control
s
generar cdigo portable y redistribuble, asegrate de no usar e
c
Oscar E Capuay Uceda 118
Acceso a Datos con PHP


La etiqueta de fin de bloque incluir tras ella la siguiente lnea si hay alguna
. Adems, la etiqueta de fin de bloque lleva implcito el punto y
necesitas por lo tanto aadir el punto y coma final de la ltima lnea
sarrollo de software son muy importantes los comentarios en los
te sintaxis:
n comentario de una lnea se usa: //
eas, se delimita el
6: Comentarios
?php
emplo de una lnea

ro ejemplo,
as
7: Sentencia if (1)
hp
HEAD>
<TITLE>Ejemplo de la sentencia if </TITLE>
</HEAD>
<BODY>
El siguiente c&oacute;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>
presente
coma; no
del bloque PHP.

En el de
scripts, en el caso de PHP, los comentarios tienen la siguien
Cuando es u
Cunado un comentarios es de varias ln
comentario utilizando: /* y */

Ejemplo 5

<
// Este es un ej
/*
Este es ot
pero tiene
varias lne
comentadas
*/
?>

Ejemplo 5

pagina02.p

<HTML>
<
e el calificativo de <strong>$nota
<
<

Oscar E Capuay Uceda 119
Acceso a Datos con PHP

<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&oacute;
<?
$
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
<BODY
El 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.

Oscar E Capuay Uceda 120
Acceso a Datos con PHP


Figura 55. Resultado de pagina04.php
mos el uso de la sentencia for para la generacin 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 vea
En este primer ejemplo generamos una tabla con una columna y n

Ejemplo 60: Sentencia for (1)

Pagina05.php

<HTML>
<HEAD>
<T
</HEA

<B
Uso
<?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>
Oscar E Capuay Uceda 121
Acceso a Datos con PHP


Figura 56. Resultado de pagina05.php

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>
Oscar E Capuay Uceda 122
Acceso a Datos con PHP


Resultado Web


Figura 57. Resultado de pagina06.php
Sentencia for (3)
nte cdigo 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>
Oscar E Capuay Uceda 123
Acceso a Datos con PHP

</HTML>

La mayor parte de aplicaciones Web suelen trabajar con PHP utilizando
variables y objetos ingresados por los usuarios a travs de formularios
HTML.

Formularios HTML y PHP
Veamos un ej gina PHP
utilizando los m

Ejemplo 63: Envo de datos de un formulario a una pgina 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 pgina PHP que recibir los datos del formulario. En este
caso pagina08.php, y no olvidemos que en el mtodo estamos especificando
POST.
Adems debemos tomar en cuenta el nombre del objeto (caja de texto
input tipo text) txtnombre, pues ser en nombre que usaremos en la pgina
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 pgina podemos ver que usamos el array $_POST de PHP para
acceder a los datos enviados a travs de este mtodo. Tambien podemos
emplo sencillo en el que se envan datos a una p
todos POST y GET, respectivamente.
Oscar E Capuay Uceda 124
Acceso a Datos con PHP

observar que en la barra de direccin no aparece ninguna variable,
P. solamente el nombre de la pgina PH
Resultado Web


Figura 58. Resultado de formulario01.html


Figura 59. Resultado de pagina08.php

Ahora veamos como sera este ejemplo utilizando el mtodo 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>
Oscar E Capuay Uceda 125
Acceso a Datos con PHP

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

Resultado Web:


Figura 60. Resultado de formulario02.html


Figura 61. Resultado de pagina09.php



Figura 62. URL incluyendo datos enviados

En la figura 36 podemos ver en la barra de direccin los datos enviados a
travs del mtodo 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>
Oscar E Capuay Uceda 126
Acceso a Datos con PHP

<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&eacute;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&aacute;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 opcin pasa algo similar pero esta tcnica
siempre la utilizo pues nos sirve para agrupar radio-botones (botones de
opcin).
Resultado Web:



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

En esta pgina encontramos tres objetos che
nombre y que sern enviados como array d
p

Figura 63. Resultado de formulario03.html
Oscar E Capuay Uceda 127
Acceso a Datos con PHP



Al presionar el botn Enviar enviamos los datos del formulario al archivo:
pagina10.php que se detalla a continuacin:

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 funcin count, esta funcin permite
determinar la cantidad de elementos que tiene un array de datos, en este
caso, el array $_POST[tema].
Tambin encontramos la sentencia foreach que sirve para recorrer un array
de datos, extrayendo sus elementos: ndice y valor, que en el script estn
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

Figura 64. Resultado de pagina10.php

Segundo caso: aqu observamos que no hay tema seleccionado.
Oscar E Capuay Uceda 128
Acceso a Datos con PHP


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 continuacin el procedimiento que nos
permita realizar esta tarea sin ningn problema.


Figura 67. Resultado de formulario04.html

Ejemplo 64: Subir un archivo al servidor Web

formulario04.html

<html>
<head>
Oscar E Capuay Uceda 129
Acceso a Datos con PHP

<title>Subir a
meta 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. Seleccin de un archivo en un formulario

Es muy impo para el
nvo de da anterior
a11.php

<?php
//leyendo los datos del archivo recibido
$nombre_real=$_FILES[archivo][name];
$tamano=$_FILES[archivo][size];
$tipo=$_FILES
este es el nombre que tie
- Tipo:" . $tipo . " Tama&ntilde;o:" .
l:" . $nombre_temporal . "<br>";
al directorio destino.
mbre_real;
hivo subido
exitosame
else echo "El archiv
>
_FILES[], indicando el nombre del objeto HTML que insertamos en
rtante indicar en el formulario la propiedad enctype
tos, tal y como lo apreciamos en el cdigo e
(formulario04.html): enctype="multipart/form-data".
En este formulario seleccionamos el archivo que deseamos subir y luego
presionamos el botn 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 "arc
nte";
o no logr&oacute; subir al servidor";
?

En el script podemos ver que debemos recibir los datos del archivo a travs
el array $ d
Oscar E Capuay Uceda 130
Acceso a Datos con PHP

el formulario y luego en la siguiente dimensin del array especificamos el
dato que queremos leer.
La funcin move_uploaded_file, realiza un chequeo para asegurar que el
archivo $nombre_temporal sea un archivo cargado vlido (lo que quiere decir
que fue cargado a travs del mecanismo de carga HTTP POST de PHP). Si
el archivo es vlido, ser movido al nombre de archivo dado por $destino. Si
$nombre_temporal no es un archivo cargado vlido, entonces no se tomar
ningun io
devolver T

a accin, y move_uploaded_file() devolver FALSE, de lo contrar
RUE.


Figura 69. Datos de un archivo enviado al servidor
Oscar E Capuay Uceda 131
Acceso a Datos con PHP

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. Conexin al servidor MySQL con MySQL Administrador


Figura 71. Inicio de MySQL Administrator
Oscar E Capuay Uceda 132
Acceso a Datos con PHP


erecho del Mouse sobre una de las bases
ccionando Create New Schema.
Luego hacemos clic con el botn d
e datos para crear una nueva sele d

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.

Oscar E Capuay Uceda 133
Acceso a Datos con PHP


Figura 74. Base de datos creada en MySQL Administrator
lick en el botn Create Ahora creamos la tabla persona, para ello hacemos c
le. Tab

Figura 75. Creando una tabla

Oscar E Capuay Uceda 134
Acceso a Datos con PHP


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 seccin Columns and Indices


Figura 77. Definicin 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 cam
tipo entero y autoincrementable.
L


Figura 78. Estructura de la tabla

Luego presionamos el botn Apply changes.

Oscar E Capuay Uceda 135
Acceso a Datos con PHP


Figura 79. Confirmacin para la creacin de la tabla
mos el resultado y presionamos Execute para terminar. Confirma


Figura 80. Lista de elementos incluyendo la tabla recientemente creada


Oscar E Capuay Uceda 136
Acceso a Datos con PHP

Creando una base de datos MySQL en phpmyadmin
El primer paso es crear una base de datos utilizando PHPMyADMIN una
aplicacin Web que nos permite administrar nuestras bases de datos MySQL
desde la plataforma Web.
En nuestro navegador escribiremos la siguiente direccin:
http://localhost/phpmyadmin/

La palabra localhost de la direccin 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 mquina, por lo que no necesitamos de una conexin a Internet para
desarrollar todos los

ejemplos que veremos a continuacin.


Figura 81. Interfaz de phpMyAdmin

a pgina de inicio de phpmyadmin con la lista de bases de Vemos l datos que
do derecho de la pgina tenemos una caja de texto que nos permite
ha encontrado en el servidor. En caso que recin este utilizando MySQL slo
ver las bases de datos que vienen por defecto con la instalacin.

En el la
escribir el nombre de una nueva base de datos.

Oscar E Capuay Uceda 137
Acceso a Datos con PHP


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 nombr
conjunto 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.

Oscar E Capuay Uceda 138
Acceso a Datos con PHP


Figura 84. Creando la tabla persona.
resionar el botn Continuar aparecer la siguiente pgina:


l p A

Figura 85. Especificacin de los campos de la tabla

En esta pgina debemos especificar los atributos de cada campo. Por
ejemplo el campo idpersona ser la clave primaria y adems ser
autoincrementable.


Figura 86. Autoincremento en el campo idpersona.

A continuacin 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 botn Grabar.
Oscar E Capuay Uceda 139
Acceso a Datos con PHP


Figura 87. Estructura de la tabla creada

Una vez creada la tabla aparecer en la lista ubicada en el lado izquierdo de
la pgina.

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 pgina encontramos varios enlaces.
Seleccionamos Insertar.

Oscar E Capuay Uceda 140
Acceso a Datos con PHP


Figura 89. Formularios para la insercin de registros

Esta interfaz nos permite ingresar nuevos registros a la tabla.
En nuestro caso no hay necesidad de ingresar el valor para idpers
debido a que es un cam sionamos el bo
Continuar.

ona
tn po autoincrementable. Luego pre

Fig os ura 90. Datos para los nuevos registr
Oscar E Capuay Uceda 141
Acceso a Datos con PHP


Figura 91. Operacin 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 insercin 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

Oscar E Capuay Uceda 142
Acceso a Datos con PHP

Acceso a
funciones que nos permitirn
conectarnos a un servidor de base de datos y luego elegir la base. Luego
desarrollaremos las acciones bsicas sobre una tabla como: insercin,
edicin, eliminacin y bsqueda.

Ejemplo 65: Conexin a MySQL

pagina12.php

<?php
$conex=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("dbdemo",$conex) or die(mysql_error());
?>

La funcin mysql_connect abre una conexin a un servidor MySQL, y
necesita para ello tres parmetros: el nombre o direccin del servidor de
base de datos, un nombre de usuario y su contrasea. Podemos observar
luego de la funcin mysql_connect que aparece el operador OR el cual nos
permite ejecutar la orden die() en caso que la conexin fallara. La orden die()
imprime un mensaje y termina el script actual, en este caso el mensaje ser
el resultado de la ejecucin de la funcin mysql_error() retorna el texto del
error de la ltima funcin MySQL o '' (cadena vaca) si no ocurri error.

Una vez hecha la conexin 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 funcin
ysql_select_db() que tiene como primer parmetro 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 funcin mysql_query podemos ejecutar
una sentencia SQL la cual almacena el resultado en la variable $rspersona.
MySQL desde PHP

En esta seccin primero veremos las
ce

datos a la cual accederemos m


m
datos.

Ahora veremos una p
realizar la conexin y luego hacer una consulta de todos los registros de la
tabla persona.
Oscar E Capuay Uceda 143
Acceso a Datos con PHP

Una vez hecho esto leemos los registros con la funcin mysql_fetch_array()
la cual devuelve una matriz que corresponde a la sentencia extrada, o falso
si no quedan ms filas. La funcin mysql_fetch_array() es una versin
extendida de mysql_fetch_row(). Adems de guardar los datos en el ndice
numrico de la matriz, guarda tambin 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 funcin es ejecutada, el
puntero interno se desplaza al siguiente registro.

Resultado Web


Figura 93. Resultado de pagina13.php

jemplo 67:
hora le daremos una mejor presentacin 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
Oscar E Capuay Uceda 144
Acceso a Datos con PHP

{?>
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

Figura 94. Resultado de pagina14.php

Ahora pasaremos a programar el formulario y la pgina PHP para la
insercin de registros.


Ejemplo 68: Insercin 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
Oscar E Capuay Uceda 145
Acceso a Datos con PHP

<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&eacute;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 cgio 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
Oscar E Capuay Uceda 146
Acceso a Datos con PHP


Pagina15.php

<?php

include "pagina12.php";

//sentencia para insertar el usuario
$sql="insert into persona
values('','$_POST[nombres]','$_POST[apellidos]','$_POST[email]','$_POST[t
elefono]')";

//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:


Figura 96. Resultado de pagina15.php

Ejemplo 69: Edicin 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
Oscar E Capuay Uceda 147
Acceso a Datos con PHP

$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&oacute;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&eacute;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="em
s
</tr>
<tr>
Oscar E Capuay Uceda 148
Acceso a Datos con PHP


Figura 97. Formulario de edicin de un registro


pagina17.php

<?php
include "p
sentencia 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 d
e

Figura 98. Resultado de pagina17.php

Ejemplo 70: Eliminacin de registros

pagina18.php

<?php
include "pagina12.php";
//sentencia para elim
$sql="delete from persona where idpe ='$_GET[idpersona]'";
inar el registro
rsona
Oscar E Capuay Uceda 149
Acceso a Datos con PHP

//ejecutar sentencia
mysql_query($sql) or
cho "La persona fue eliminada exitosamente<br>";
>

En la siguiente seccin veremos el acceso a una base de datos PostgreSQL.
die(mysql_error());
e
echo "<a href='pagina14.php'>Listado de Personas</a>";
?
Oscar E Capuay Uceda 150
Acceso a Datos con PHP

Instalacin de PostgreSQL sobre Windows XP
Para instalar PostgreSQL debemos descargar el instalador de la seccin
Download de http://www.postgresql.org.

Una vez descargado el archivo zip, lo descomprimimos y tendremos los
siguientes archivos:


Figura 99. Archivos de instalacin de PostgreSQL

Ejecutamos el archivo postgresql-8.3


Figura 100. Asistente de instalacin de PostgreSQL

Seleccionamos el idioma que se usar en la instalacin (English) y
presionamos Start.
Oscar E Capuay Uceda 151
Acceso a Datos con PHP


Figura 101. Inicio del asistente de instalacin

Se recomienda c leemos las
strucciones necesarias para empezar.
errar los programas abiertos y y luego
in


Figura 102. Notas de instalacin

Oscar E Capuay Uceda 152
Acceso a Datos con PHP


Figura 103. Opciones de instalacin

amos Seleccion

las herramientas e interfaces que deseamos instalar.

Figura 104. onfiguracin del servicio

Luego ingresamos el password para la cuenta postgres.
Oscar E Capuay Uceda 153
Acceso a Datos con PHP


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 d gresa e
tos (por razones de seguridad, se recomienda no utilizar el password
rior).
da
ante
Oscar E Capuay Uceda 154
Acceso a Datos con PHP


Figura 108. Habilitar lenguaje procedural
rocedural y presionamos Next para luego Seleccionamos el lenguaje p
seleccionar los mdulos adicionales que podemos instalar.


Figura 109. El asistente est listo para iniciar la instalacin
esta todo listo para la instalacin. Ahora ya
Oscar E Capuay Uceda 155
Acceso a Datos con PHP


Figura 110. Instalando PostgreSQL


Figura 111. Instalacin completa

Finalmente nos aparecer esta ventana que nos indica el final de la
k y
s el
instalacin. Si no queremos correr el Stack Builder quitamos el chec
presionamos Finish.
Una vez instalado vamos al men Inicio Programas y seleccionamo
men de PostgreSQL. En este men abrimos PgAdmin III.
Oscar E Capuay Uceda 156
Acceso a Datos con PHP


Figura 112. pgAdmin III

Si hacemos doble click sobre el servidor PostgreSQL Database Server 8.3
aparecer la siguie

nte ventana para logearnos.


Figura 113. Conexin al servidor desde pgAdmin III


Oscar E Capuay Uceda 157
Acceso a Datos con PHP

Creando una base de datos PostgreSQL en pgAdmin III
atos. trar nuestras bases de d Al 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).

Oscar E Capuay Uceda 158
Acceso a Datos con PHP


Figura 116.

Datos de la nueva base de datos
otn derecho del Luego creamos la tabla persona, haciendo click con el b
mouse y seleccionando New table


Figura 117. Creando una nueva tabl

a
Oscar E Capuay Uceda 159
Acceso a Datos con PHP


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
Oscar E Capuay Uceda 160
Acceso a Datos con PHP


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.
Oscar E Capuay Uceda 161
Acceso a Datos con PHP


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 creacin de la tabla

Oscar E Capuay Uceda 162
Acceso a Datos con PHP


Figura 124. Final de la creacin de la tabla
recho sobre la tabla persona seleccionamos View Data Haciendo click de
para ver los registros.


Figura 125. Men desplegable de la tabla

Oscar E Capuay Uceda 163
Acceso a Datos con PHP


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 creacin de la base de datos con otra herramienta. Ahora ve

Oscar E Capuay Uceda 164
Acceso a Datos con PHP

Creando una base de datos PostgreSQL en phpPgAdmin
El primer paso es crear una base de datos utilizando phpPgAdmin una
estras bases de datos aplicacin Web que nos permite administrar nu
res. Postg

Escribiremos la siguiente direccin: 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 botn Autenticar para
ingresar.
Oscar E Capuay Uceda 165
Acceso a Datos con PHP


Figura 130. Interfaz de ingreso a phpPgAdmin

Ahora crearemos una base de datos PostgreSQL, haciendo clic en el
hipervnculo: 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
aplicacin Web.
Oscar E Capuay Uceda 166
Acceso a Datos con PHP


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 Prximo.

Oscar E Capuay Uceda 167
Acceso a Datos con PHP


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 travs de SERIAL.


Figura 136. Autoincremento para la clave primaria


Figura 137. Estructura de la tabla

Haciendo clic en el hipervnculo Insertar, agregaremos registros a la tabla.

Oscar E Capuay Uceda 168
Acceso a Datos con PHP


Figura 138. Formulario de ingreso de nuevos registros


Figura 139. Listado de registros

Para conectarnos a PostgreSQL desde PHP debemos aseguarrnos que las
libreras de PHP para PostgreSQL estn disponibles, para ello vamos a
men de WAMP y listamos las extensiones de PHP.

Oscar E Capuay Uceda 169
Acceso a Datos con PHP


Figura 140. Activando la extensin php_pgsql

Una vez verificado procedemos a programar la pgina de conexin:
Acceso a PostgreSQL desde PHP

Ejemplo 71: Conexin 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 conexin");
?>


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 funcin pg_last_error() muestra el ltimo error ocurrido en la conexin
activa, la cual es el parmetro.

Oscar E Capuay Uceda 170
Acceso a Datos con PHP

Resultado Web:


Figura 141. Resultado de pagina23.php

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);
Oscar E Capuay Uceda 171
Acceso a Datos con PHP

// Cerrar conexion
pg_close($conex);
?>
</table>
<br>
<a href="formulario06.html">Agregar Registro</a>
</body>
</html>

Resultado Web:


Figura 142. Resultado de pagina24.php

Ejemplo 73: Insercin 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>
Oscar E Capuay Uceda 172
Acceso a Datos con PHP

<td>E-Mail</td><td><input name="email" type="text" id="email"
size="50" maxlength="100" /></td>
</tr>
<tr>
<td>Tel&eacute;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:


Figura 143. Resultado de formulario06.html

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>";
?>
Oscar E Capuay Uceda 173
Acceso a Datos con PHP


Resultado Web:


Figura 144. Resultado de pagina25.php

Ejemplo 74: Edicin 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&oacute;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&oacute;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>
Oscar E Capuay Uceda 174
Acceso a Datos con PHP

<tr>
<td>Tel&eacute;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:


Figura 145. Resultado de pagina26.php

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:

Oscar E Capuay Uceda 175
Acceso a Datos con PHP


Figura 146. Resultado de pagina27.php

Ejemplo 75: Eliminacin 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>";
?>


Figura 147. Resultado de pagina28.php
Oscar E Capuay Uceda 176
Acceso a Datos con PHP

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

Oscar E Capuay Uceda 177
Acceso a Datos con PHP


Luego creamos la tabla persona.


Figura 150. Creando una nueva tabla


Figura 151. Especificacin de los campos de la tabla

Verificamos si la librera para MS-SQLServer est disponible.

Oscar E Capuay Uceda 178
Acceso a Datos con PHP


Figura 152. Activando la extensin 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.

Oscar E Capuay Uceda 179
Acceso a Datos con PHP


Figura 154. Establecimiento de los permisos del usuario

Ejemplo 76: Conexin a MS-SQLServer

pagina29.php

<?php
//conexion al servidor MS-SQLServer
$conex=mssql_connect("LAPTOP\\","oscar","123456") or die("Error en la
conexin");
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:

Oscar E Capuay Uceda 180
Acceso a Datos con PHP


Figura 155. Resultado de pagina30.php

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);
?>
Oscar E Capuay Uceda 181
Acceso a Datos con PHP

</table>
<br>
<a href="formulario07.html">Agregar Registro</a>



Ejemplo 78: Insercin 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&eacute;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>



Oscar E Capuay Uceda 182
Acceso a Datos con PHP

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:


Figura 156. Resultado de pagina32.php

Oscar E Capuay Uceda 183
Acceso a Datos con PHP

Ejemplo 79: Edicin 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&oacute;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&oacute;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&eacute;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>
Oscar E Capuay Uceda 184
Acceso a Datos con PHP

</body>
</html>

Resultado Web:

Figura 157. Resultado de pagina33.php

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:

Figura 158. Resultado de pagina34.php

Ejemplo 80: Eliminacin 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
Oscar E Capuay Uceda 185
Acceso a Datos con PHP

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:

Figura 159. Resultado de pagina35.php


Oscar E Capuay Uceda 186
PHP Orientado a Objetos

VI. PHP Orientado a Objetos
Clases en PHP
Cada definicin 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: Definicin de una clase

pagina19.php

<?php
class MiClase
{
// Declaracin de un miembro de la clase
public $variable ='demo'; // demo es el valor por defecto de $variable

// Declaracin de un mtodo
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 excepcin 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 funcin. Una nueva instancia de un objeto
previamente creado puede ser hecha clonndolo. [3]

Ejemplo 82: Creando una instancia

pagina20.php

<?php
include "pagina19.php"; //definicin de MiClase
//Creando una instancia
$instancia =new MiClase();
// Asignacin del Objeto
$asignado = $instancia;
$referencia =& $instancia;
Oscar E Capuay Uceda 187
PHP Orientado a Objetos

$instancia->variable ='$asignado tendr&aacute; este valor';
$instancia =null; // $instancia y $referencia sern nulos
var_dump($instancia);
var_dump($referencia);
var_dump($asignado);
?>

Resultado Web


Figura 160. Resultado de pagina20.php

Extendiendo objetos
Una clase puede heredar mtodos y miembros de otra clase usando la
palabra 'extends' en la declaracin. No es posible extender de mltiples
clases, una clase puede heredar solo de una clase base.

Los mtodos heredados y sus miembros pueden ser evitados,
redeclarndolos con el mismo nombre con el que los defini la clase padre, a
menos que la clase padre haya definido un mtodo como final. Es posible
accesar a los mtodos 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
{
// Redefinicin de mtodo
function ver()
{
echo "clase con nuevo m&eacute;todo\n";
parent::ver();
}
}
$extended =new ExtendClass();
$extended->ver();
?>

Oscar E Capuay Uceda 188
PHP Orientado a Objetos

Resultado Web


Figura 161. Resultado de pagina21.php
Auto carga de Objetos
Cuando se escriben aplicaciones con programacin orientada a objetos
crean un archivo fuente PHP por cada definicin de clase. Una de las
molestias ms 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 funcin __autoload la
cual es llamada automticamente en caso de que intente usar una clase que
no ha sido definida an. Al llamar esta funcin la ejecucin del script da una
ltima oportunidad de cargar la clase antes de que PHP falle con un error.

Nota: Las excepciones arrojadas en la funcin __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 funcin
__autoload para despus ejecutar los mtodos de cada clase.

Ejemplo 84: Auto carga

clase1.php

<?php
class clase1
{
// Declaracin de un miembro de la clase
public $texto ='esta es la clase1';
// Declaracin de un mtodo
public function mostrar() {
echo $this->texto; //imprime el valor de $variable
}
}
?>
Oscar E Capuay Uceda 189
PHP Orientado a Objetos


clase2.php

<?php
class clase2
{
// Declaracin de un miembro de la clase
public $mi_texto ='texto de la clase2';

// Declaracin de un mtodo
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

Oscar E Capuay Uceda 190
PHP Orientado a Objetos

Acceso a MySQL con PHP Orientado a Objetos

PHP 5.x viene con una extensin mejorada para trabajar con la funcionalidad
provista por MySQL 4.1 y superior.

Veamos a continuacin una breve referencia es clases y mtodos.

Clases predefinidas

mysqli
Representa una conexin entres PHP y la base de datos MySQL.

Constructor
mysqli - constructor de un nuevo objeto mysqli

Mtodos
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 conexin previamente abierta.

commit - completa la transaccin actual.

connect - abre una nueva conexin al servidor de MySQL.

debug - realiza operaciones de rastreo.

dump_debug_info - vaca informacin de rastreo.

get_client_info - retorna la versin del cliente.

get_host_info - retorna el tipo de conexin usada.

get_server_info - retorna la versin del servidor MySQL.

get_server_version - retorna la versin del servidor MySQL

init - inicializa el objeto mysqli.

info - obtiene informacin acerca de la consulta ms recientemente
ejecutada.

kill - solicita al servidor destruir un thread de mysql.
Oscar E Capuay Uceda 191
PHP Orientado a Objetos


multi_query - realiza consultas de SQL mltiples.

more_results - verifica si existen mas resultados de la consulta mltiple
actualmente ejecutada.

next_result - lee el siguiente resultado de la consulta mltiple actualmente
ejecutada.

options - fija opciones extra en la conexin.

ping - llama una conexin con el servidor o reconecta si no hay conexin.

prepare - prepara una sentencia SQL.

query - ejecuta una sentencia SQL.

real_connect - intenta abrir una conexin 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
conexin.

rollback - deshace la transaccin actual.

select_db - selecciona la base de datos por defecto.

ssl_set - fija los parmetros 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 nmero de filas afectadas en la operacin MySQL
previa.

client_info - retorna en una cadena la versin del cliente de MySQL.

client_version - retorna en un entero la versin del cliente de MySQL.

errno - retorna el cdigo de error para la llamada a funcin ms reciente.

Oscar E Capuay Uceda 192
PHP Orientado a Objetos

error - retorna la cadena de error para la llamada a funcin ms reciente.

field_count - retorna el nmero de columnas para la consulta ms reciente.

host_info - retorna la cadena representando el tipo de conexin usado.

info - retorna informacin acerca de la consulta ejecutada ms
recientemente.

insert_id - retorna el identificador generado automticamente usado en la
ltima consulta.

protocol_version - retorna la versin del protocolo usado por MySQL.

sqlstate - retorna una cadena que contiene el cdigo de error SQLSTATE
para el ltimo error.

thread_id - retorna el identificador del THREAD para la conexin actual.

warning_count - retorna el nmero de alertas generadas durante la ejecucin
del enunciado SQL previo.

mysqli_stmt
Representa una sentencia preparada.

Mtodos
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 lmite.

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
informacin de metadatos.

prepare - prepara una consulta SQL.

send_long_data - enva datos en partes.

reset - resetea una sentencia preparada.
Oscar E Capuay Uceda 193
PHP Orientado a Objetos


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 cdigo de error para la llamada a funcin ms reciente.

error - retorna el mensaje de error para la llamada a funcin ms reciente.

param_count - retorna el numero de parmetros para la sentencia preparada
dada.

sqlstate - retorna una cadena conteniendo el cdigo de error SQLSTATE
para la llamada a funcin ms reciente.


mysqli_result
Representa el resultado obtenido de la consulta hecha en la base de datos.

Mtodos
close - cierra el resultado.

data_seek - mueve el puntero interno del resultado.

fetch_field - obtiene la informacin de la columna en el resultado.

fetch_fields - obtiene la informacin para todas las columnas del resultado.

fetch_field_direct - obtiene informacin de la columna para la columna dada.

fetch_array - recupera una fila como una matriz asociativa, una matriz
numrica, 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 posicin especificada.

Propiedades
current_field - retorna la posicin de puntero actual.

field_count - retorna el nmero de campos en el resultado.

Oscar E Capuay Uceda 194
PHP Orientado a Objetos

lengths - retorna una matriz con la longitud de los campos.

num_rows - retorna el nmero de filas en el resultado.



Nos conectaremos a la base de datos dbdemo y administraremos la tabla
persona.


Ejemplo 85: Conexin a MySQL con mysqli

mysqli-connect.php

<?php
$mysqli =new mysqli("localhost", "root", "", "dbdemo");

/* verifica la conexin */
if (mysqli_connect_errno()) {

printf("Conexin fallida:<br>%s\n", mysqli_connect_error());
exit();

}

printf("Server MySQL:<br>%s\n", $mysqli->host_info);

/* Cerrar la conexin */
$mysqli->close();
?>

Resultado Web:

Figura 163. Resultado de mysqli-connect.php

Modificaremos el archivo anterior para utilizarlo en las conexiones de las
prximas pginas.

mysqli-conexion.php

<?php
$mysqli =new mysqli("localhost", "root", "", "dbdemo");

/* verifica la conexin */
if (mysqli_connect_errno()) {
Oscar E Capuay Uceda 195
PHP Orientado a Objetos

printf("Error en la conexin:<br>%s\n", mysqli_connect_error());
exit();
}
?>


Ejemplo 86: Listado con mysqli

mysqli-lista.php

<?php
include "mysqli-conexion.php"; //incluimos la conexin

//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>
Oscar E Capuay Uceda 196
PHP Orientado a Objetos

<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 conexin
?>
</table>
<br>
<a href="formulario08.html">Agregar Registro</a>
</body>
</html>

Resultado Web:


Figura 165. Resultado de mysqli-listado.php

Ejemplo 87: Insercin 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">
Oscar E Capuay Uceda 197
PHP Orientado a Objetos

<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&eacute;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
Oscar E Capuay Uceda 198
PHP Orientado a Objetos



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[t
elefono]')";

//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: Edicin 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&oacute;n de registro</title>
</head>

Oscar E Capuay Uceda 199
PHP Orientado a Objetos

<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&oacute;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&eacute;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
Oscar E Capuay Uceda 200
PHP Orientado a Objetos


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: Eliminacin 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
Oscar E Capuay Uceda 201
PHP Orientado a Objetos



Paginando resultados

Ejemplo 90: Paginacin 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 conexin
?>
</table>
Oscar E Capuay Uceda 202
PHP Orientado a Objetos

P&aacute;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

Explicacin:

Primero incluimos el archivo para la conexin a la base de datos
include "mysqli-conexion.php"; //incluimos la conexin

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 pginas.
$numreg=$rspersona->num_rows;

Establecemos la cantidad de registros por pgina.
$regxpag=3;

Verificamos si la variable p que indica la pgina 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 pgina
$inicio=$regxpag*($_GET['p']-1);

Complementamos la sentencia SQL para mostrar solamente los registros de
la pgina seleccionada
Oscar E Capuay Uceda 203
PHP Orientado a Objetos

$sql=$sql ." limit $inicio,$regxpag";

Hallamos el nmero de pginas. La funcin ceil redondea fracciones hacia
arriba.
$numpag=ceil($numreg/$regxpag);

Ejecutamos la consulta SQL para obtener los registros de la pgina
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 pgina web aparecen las pginas de resultados.
A travs de un bucle creamos los hipervnculos para visualizar las pginas.
<?php
for($i=1;$i<=$numpag;$i++) {
echo "<a href='mysqli-listado-paginacion.php?p=$i'>$i</a>";
}





Oscar E Capuay Uceda 204
PHP Orientado a Objetos

Arquitectura MVC

Todos los que estamos inmersos en el mundo de la programacin sabemos
que en todo programa los datos que se procesan pueden ser ingresados y
mostrados en formas diferentes dependiendo del tipo y diseo de la interfaz,
y sobre todo en el desarrollo Web esto se ve aun ms acentuado debido a
que los desarrolladores Web muchas veces son muy buenos programando
pero no diseando 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 diseadores para darle un
buena presentacin a la aplicacin, pero las dificultades inician cuando
alguna parte del cdigo que un equipo hace influye sobre el diseo que
realiza el otro equipo. Para dar solucin a este tipo de problemas han
surgido arquitecturas de desarrollo que nos permiten desarrollar aplicaciones
separando la lgica del diseo de la interfaz, una de ellas es la Arquitectura
MVC (Modelo Vista Controlador).

MVC con PHP
Lo que se muestra a continuacin es un artculo muy interesante extrado de
http://www.phpizza.com/es/ en el que se explica de una forma fcil y sencilla
el uso de MVC con PHP.

Esta arquitectura va ms all de esa divisin 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 interaccin
directa y las claras la indirecta. Esto bsicamente quiere decir que las verdes
son las respuestas a las azules.
Oscar E Capuay Uceda 205
PHP Orientado a Objetos


La capa de Presentacin 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 referirn a su acometido bajo los
nombres de Lgica de Negocio o Lgica Empresarial.

Lo de la lgica de negocio probablemente venga de los tiempos en los que
los programas sobre todo hacan cosas relacionadas con informes contables.

Como su propio nombre indica el Controlador controla lo que sucede a partir
de que se haya producido una interaccin 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
accin.

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 Gestin 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 Presentacin. Sirve
para que el usuario pueda interactuar a travs de los eventos con el
Controlador y tambin para que pueda ver los resultados. Estos resultados
sern aportados por el Controlador a travs del Modelo.

Esta es la diferencia con la simple programacin por capas (tambin llamada
escalonada o multi-escalonada) y sin conocerla se suelen confundir los
trminos.


Oscar E Capuay Uceda 206
PHP Orientado a Objetos


Figura 173. Tres capas
Fuente: http://www.phpizza.com

En una arquitectura de separacin por capas que es una manera de llevar
a cabo la separacin abstracta de 2 capas la Capa de Acceso a Datos
nunca interfiere directamente con la Vista. Lo hace siempre a travs 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 enva datos a la
Vista. Pero la Vista no ejecuta los mtodos de los objetos. En MVC, sin
embargo, la Vista s puede mostrar datos a travs de los mtodos de un
objeto que el Controlador le ha pasado.[5]

MVC Web

Traducido al mundo de la programacin Web paso por paso:

1. el Controlador recibe una peticin. 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 travs de
una Vista ya renderizada (envo de un formulario por ejemplo), o por
una peticin ajax.

2. el Controlador analiza la peticin y usa un Modelo para obtener
datos de algn 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.

Oscar E Capuay Uceda 207
PHP Orientado a Objetos

5. la Vista usa el Modelo, de tal forma, que algn tipo de respuesta
obtenido por la accin previa ser presentado en la Vista.

6. la Vista est renderizada con los datos del Modelo y el Controlador
enva esta respuesta al usuario.

7. El usuario obtiene la respuesta

El Modelo Vista Controlador no es una cosa reciente. Lo inventaron en los
aos 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 interaccin entre el Modelo y la Vista - en J ava tambin es
posible implementar un componente llamado Observador que despus de
constatar algn 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 confirmacin 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 J ava.
Normalmente al tener un tiempo limitado de ejecucin los procesos PHP no
hacen de observadores.

Sinceramente - hacer una aplicacin usando la arquitectura MVC te costar
ms trabajo que si haces pginas monolticas, mezclndolo todo - el php y el
html en lo que se llama popularmente el cdigo spaghetti.

El MVC supone ms trabajo:

Primero tendrs que definir los Modelos y convertirlos en Objetos de tal
manera que sus atributos y mtodos sean el conjunto de propiedades y
acciones verdaderamente necesarias y representativas. Tendrs que
planificar las Vistas por separado y trabajar los Controladores. Al principio de
la implementacin te ser ms rpido hacer pginas monolticas

Por qu usarlo entonces?
Pues, cuando quieras cambiar tu aplicacin para aadir, 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
ms de una de tus pginas.

El MVC bsicamente te permitir poder cambiar las Capas de presentacin
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
prctico. Como un lenguaje que permite hacer pginas Web dinmicas y
Oscar E Capuay Uceda 208
PHP Orientado a Objetos

procesar formularios de una manera simple. Que complicar las cosas ms
all de eso es impropio de este lenguaje.

Y les doy la razn. Claro! El asunto es que ese primer PHP no tena mucho
que ver con el PHP5 actual. No haba objetos por ejemplo.

Hay pequeas diferencias en como implementan el MVC distintos
frameworks, pero los fundamentos son los mismos.

Tambin puedes usar motores de plantillas como por ejemplo Smarty para
implementar el MVC, pero en realidad no necesitas nada ms 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

?>
Oscar E Capuay Uceda 209
PHP Orientado a Objetos


Ejemplo 93: CONTROLADOR MVC con PHP

_controlador.php

<?php
include ("./_modelo.php");

$objX =new ClaseX();

//aqu habra que implementar una clase que
//determine las caracteristicas de la pagina
//pero para poner un ejemplo sencillo vamos
//a saltarnos esa parte en este artculo
$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 ms all de las que muestren datos. Por qu? Pues si la
lgica de tu aplicacin 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 algn tiempo, en
febrero del ao 2006 un bastante mal entendido artculo, 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
artculo y es que implementar el MVC sin usar un framework que vaya ms
all de nuestras necesidades nos va a beneficiar en cuanto a la memoria que
usa cada script PHP. Ms tarde hablaremos sobre la optimizacin. Algunos
Oscar E Capuay Uceda 210
PHP Orientado a Objetos

han interpretado que Rasmus en este artculo defenda la programacin
procedural en contra de la Orientada a Objetos. El mismo dice que no es as-
que poda haber hecho todo el ejemplo usando ms 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 dars cuenta que la Vista hace al
principio una inclusin 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 divisin de capas en tres partes pero no es MVC. La Vista no
debe ser la que controla la aparicin de un Controlador sino todo lo contrario:
el Controlador usa las Vistas.


Oscar E Capuay Uceda 211
PHP Orientado a Objetos

MVC y PHP con acceso a Base de Datos

Tomando como gua el artculo anterior desarrollaremos un listado de los
registros de la tabla persona creada en la seccin 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;
}

Oscar E Capuay Uceda 212
PHP Orientado a Objetos

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";
Oscar E Capuay Uceda 213
PHP Orientado a Objetos


$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

Oscar E Capuay Uceda 214
PHP Orientado a Objetos

PDO PHP Data Object
PHP Data Objects (PDO) es una extensin 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 abstraccin de datos, con la cual, la codificacin
depende menos de la base de datos que estemos utilizando, debido a que
los mtodos 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 caractersticas de
programacin orientada a objetos que viene desde PHP 5, por lo que no
corre en versiones anteriores.

Los siguientes controladores estn 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 conexin entre PHP y un servidor de base de datos.

Constructor
PDO - construye un nuevo objeto PDO

Mtodos
beginTransaction inicia una transaccin.

commit - efecta la transaccin.

Oscar E Capuay Uceda 215
PHP Orientado a Objetos

errorCode retorna un cdigo de error, si ocurre alguno en la base de datos.

errorInfo retorna un arreglo de informacin del error, si ocurre alguno en la
base de datos.

exec ejecuta una sentencia SQL y retorna el nmero de registros
afectados.

getAttribute retorna los atributos de una conexin.

lastInsertId retorna el valor del ID del ultimo registro que fue insertado en la
tabla.

prepare - prepara una sentencia SQL para su ejecucin.

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 inyeccin SQL.

rollBack - Deshace una transaccin

setAttribute establece un atributo para la conexin a una base de datos.

PDOStatement
Representa una sentencia preparada, luego que la sentencia es ejecutada,
un conjunto de registros.

Mtodos
bindColumn - relaciona variable a una columna de salida en un conjunto de
registros.

bindParam - relaciona una variable PHP a un parmetro en la sentencia
preparada.

bindValue - binds un valor a un parmetro en la sentencia preparada.

closeCursor - cierra el cursor, permitiendo ejecutar nuevamente la sentencia.

columnCount - retorna el nmero de columnas del conjunto de registros.

errorCode - retorna un cdigo de error, si lo hay, de la sentencia.

errorInfo - retorna un arreglo de informacin de un error, si lo hay, de la
sentencia.

execute ejecuta la sentencia preparada.

fetch lee un registro de un conjunto de registros.

Oscar E Capuay Uceda 216
PHP Orientado a Objetos

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 nmero de registros afectados por la ejecucin de la
sentencia SQL.

setAttribute establece un atributo PDOStatement.

setFetchMode establece el modo de lectura de registros de un
PDOStatement.

Oscar E Capuay Uceda 217
PHP Orientado a Objetos

Conexiones con PDO

Para establecer una conexin 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 contrasea. En el siguiente podemos observar
una conexin a MySQL y las siguientes lneas que estn comentadas se
conectan a Microsoft SQL Server y a PostgreSQL respectivamente.

Ejemplo 99: Conexin 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 conexin

}catch (PDOException $e) {

print "Error!: " . $e->getMessage() . "<br/>";

die();

}

?>


Oscar E Capuay Uceda 218
PHP Orientado a Objetos

Resultado Web

Figura 175. Resultado de pdo-lista.php

Ejemplo 101: Listado de registros con PDO, con eliminacin mltiple

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
Oscar E Capuay Uceda 219
PHP Orientado a Objetos

}
$rspersona->closeCursor(); //cerramos resultado de la consulta
$conn=null; //cerramos la conexin
?>
<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: Insercin 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>
Oscar E Capuay Uceda 220
PHP Orientado a Objetos

</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&eacute;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

Ejecucin 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)");
Oscar E Capuay Uceda 221
PHP Orientado a Objetos

$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: Eliminacin mltiple 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: Edicin 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&oacute;n de registro</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="pdo-actualizar.php">
Oscar E Capuay Uceda 222
PHP Orientado a Objetos

<input type="hidden" name="idpersona" value="<?php echo
$_GET[idpersona]?>">
<table width="80%" border="0" align="center">
<tr><th colspan="2">Edici&oacute;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&eacute;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";

Oscar E Capuay Uceda 223
PHP Orientado a Objetos

$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");
?>








Oscar E Capuay Uceda 224
Seguridad Web

VII. Seguridad Web
Las aplicaciones Web por lo general estn en lnea 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, valindose de diferentes
estrategias y herramientas. Construir una aplicacin 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 codificacin desde el punto de vista lgico, que nos
puedan causar problemas de seguridad posteriormente, todo esto
minimizar en lo posible la posibilidad de violacin 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
pginas ms simples. Los datos de entrada que usted puede
esperar en sus aplicaciones no necesariamente tendrn relacin
alguna con el tipo de informacin que podra ingresar un
empleado disgustado, un cracker con meses de tiempo entre sus
manos, o un gato domstico caminando sobre el teclado. Es por
esto que es mejor observar el cdigo desde una perspectiva
lgica, para determinar en dnde podran introducirse datos
inesperados, y luego hacer un seguimiento de cmo esta
informacin es modificada, reducida o amplificada.
1

A continuacin 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 travs de l se puede violar la seguridad de un computador, por ejemplo a
continuacin 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 precaucin.

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 travs
de la Web.
El usuario ingresar los datos en un formulario y los enviar al siguiente
archivo PHP.

<?php
// datos enviados a travs del formulario
$usuario =$_POST['nombre_usuario'];



1
http://www.php.net/manual/es/security.general.php
Oscar E Capuay Uceda 225
Seguridad Web

$archivo =$_POST['archivo'];

//generamos la ruta para el borrado del archivo directorio del usuario
$directorio ="/home/$usuario";
//orden de eliminacin del archivo
unlink("$directorio/$archivo");

echo "El archivo: $archivo ha sido eliminado!";
?>

Si alguien desea atacar el sistema de archivos podra 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 obtendramos 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 validacin 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 funcin que devuelve TRUE cuando la cadena contiene
solamente caracteres alfanumricos, es decir, letras y/o nmeros.

preg_match: es una funcin que realiza una comparacin en base a una
expresin regular.

Oscar E Capuay Uceda 226
Seguridad Web

Seguridad en Base de datos
La seguridad de las aplicaciones Web tambin pasa por la etapa de diseo
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 lgica de la aplicacin.

Respecto a la conexin con la base de datos es posible utilizar el protocolo
SSL para encriptar la comunicacin entre el servidor y los clientes, pero
solamente cifra la informacin en el medio, y no cuando es almacenada en la
base de datos.
Para el caso del almacenamiento de contraseas en la base de datos
recomiendo el uso de uno de los resmenes criptogrficos ms utilizados en
la actualidad: MD5.

En PHP el hash MD5 (acrnimo de Message-Digest Algorithm 5, Algoritmo
de Resumen del Mensaje 5) puede ser utilizado a travs de la funcin con el
mismo nombre: md5().MD5 es uno de los algoritmos de reduccin
criptogrficos diseados por el profesor Ronald Rivest del MIT
(Massachusetts Institute of Technology, Instituto Tecnolgico de
Massachusetts). Fue desarrollado en 1991 como reemplazo del algoritmo
MD4 despus 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 funcin para descifrar lo que
lo hace mas seguro que otros debido a que un administrador de base de
datos no podra, por ejemplo, ver las claves de los usuarios.

Oscar E Capuay Uceda 227
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
estn registrados los nombres de usuario y clave de acceso son:
user_nombre y user_clave respectivamente.

El script para este caso sera:

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 sera suficiente para dar la seguridad adecuada a nuestra
aplicacin Web. A continuacin veremos otro punto importante que debemos
tomar en cuenta.
Oscar E Capuay Uceda 228
Seguridad Web

Inyeccin SQL
Una consulta SQL no es una orden confiable a la que no se le debe prestar
la atencin debida, sino por el contrario es en la que ms cuidado debemos
tener puesto que a travs de ella se puede burlar los controles de acceso a
cualquier sistema Web e incluso permitir el acceso a comandos del sistema
operativo.

La Inyeccin de comandos SQL es una tcnica utilizada para alterar
comandos SQL definidos en una aplicacin 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 travs de los
datos enviados por un usuario y su combinacin con parmetros utilizados
en las sentencias SQL. A continuacin veremos ejemplos que nos ayudarn
a ver estos casos con mayor detalle.

Ejemplo 109: Inyeccin 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 guin ( -- )
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 inyeccin SQL en una
pgina con un listado que utiliza hipervnculos para la paginacin de
resultados.

Ejemplo 110: Paginacin de resultados con Inyeccin SQL

inyeccion01.php

<?php
include "mysqli-conexion.php"; //incluimos la conexion
$cantidad=2; //numero de registros por pagina

//verificamos si existe la variable
Oscar E Capuay Uceda 229
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;
//paginacin 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&aacute;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 conexin
?>

Oscar E Capuay Uceda 230
Seguridad Web

Oscar E Capuay Uceda 231
Resultado Web:


Figura 180. Resultado de inyeccion01.php

Ahora hagamos clic en la pgina 2. (Ver la direccin URL)


Figura 181. Nuevo resultado de inyeccion01.php

Podemos ver en la imagen anterior que se enva a la pgina una variable p
con el nmero de registro con el que inicia la pgina que se va a mostrar.
Ahora aprovecharemos esta variable para inyectar algunas cadenas SQL
valindonos de la funcin 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
paginacin de resultados y que el inicio es la variable p y que a continuacin
habr una coma y luego la cantidad de registros en la sentencia SQL en la
que ser reemplazado.

Parte de la cadena sera: LIMIT (la variable p),(cantidad) entonces para
terminar correctamente la cadena enviaremos junto con la variable p una
coma y un nmero 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 nmero de columnas (campos). Por ahora esto slo nos dice que
hemos podido inyectar una sentencia SELECT adicional pero nos queda
saber el nmero 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 sera:


Figura 183. URL con inyeccin SQL

Ahora tenemos:


Figura 184. Resultado de la inyeccin SQL

Podemos decir que el nmero de campos coincidi y adems el nombre de
la tabla.

Sabiendo ahora lo que puede ocurrir, debemos prevenir este tipo de ataque
utilizando una funcin que se encargue de anular cualquier cadena que
Oscar E Capuay Uceda 232
Seguridad Web

pretenda inyectar SQL. Para el caso anterior debemos analizar y verificar
que el valor de la variable p sea un nmero obligatoriamente, entonces
aadimos la lnea:

if(!is_numeric($_GET[p])) $_GET[p]=0;

is_numeric es una funcin que devuelve TRUE si el valor de la variable es
numrico.

En caso que no sea numrico le asignamos CERO, segn la lnea de cdigo
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 numrico
if(!is_numeric($_GET[p])) $_GET[p]=0;

//paginacin 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>
Oscar E Capuay Uceda 233
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&aacute;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 conexin
?>

Con esta modificacin ejecutaremos la misma URL:


Figura 185. Evitando la inyeccin SQL

Resultado Web:


Figura 186. Resultado sin inyeccin realizada

Podemos ver ahora que la inyeccin SQL se evit exitosamente.

Pero los listados no solamente pueden ser utilizados para la Inyeccin SQL
sino que los formularios de acceso o logeo de usuarios quiz sean los ms
propensos a estos ataques. Para ver este caso ms de cerca primero
debemos tener tabla usuario, para este ejemplo consideremos dos campos
Oscar E Capuay Uceda 234
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>


Oscar E Capuay Uceda 235
Seguridad Web

Resultado Web:


Figura 188. Resultado de formulario09.html

El formulario anterior enva los datos a una pgina 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:


Figura 189. Resultado de inyeccion03.php

La cadena resultante es la concatenacin 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:

Oscar E Capuay Uceda 236
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 condicin (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 resultara:

SELECT * from usuario WHERE login='loquesea' AND password= OR =

Probemos esto en el navegador con nuestro formulario09.html


Figura 190. Logeo con inyeccin SQL

Podemos tener dos resultados segn la configuracin de las comillas
mgicas 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 automticamente como se ve a continuacin y por lo tanto la
inyeccin SQL no tendra xito.


Figura 191. Nuevo resultado de inyeccion03.php

Oscar E Capuay Uceda 237
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 inyeccin si se ejecutara
exitosamente y el atacante podra ingresar al sistema sin un nombre de
usuario ni password vlido.

Podemos utilizar la funcin: get_magic_quotes_gpc la cual devuelve 0 si las
comillas mgicas estn deshabilitadas, 1 de lo contrario para hacer la
verificacin en tiempo de ejecucin y la funcin addslashes.

Con el formulario 10 probaremos un nuevo script que utilice estas dos
ltimas funciones, el formulario 10 solo vara 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>
Oscar E Capuay Uceda 238
Seguridad Web

</tr>
</table>
</form>
</body>
</html>

Una vez cargado el formulario, ingresamos los datos de prueba.

Resultado Web:


Figura 193. Resultado de formulario10.html

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


Oscar E Capuay Uceda 239
Seguridad Web

Podemos notar que se le agrega un \ (slash) a cada comilla, sin importar la
configuracin de las comillas mgicas, el script anterior no ayudara a evitar
la inyeccin SQL.

Con este script mejoramos el control del acceso a usuarios, pero cabe
resaltar una funcin creada para evitar este tipo de inyecciones SQL en
servidores MySQL, llamada: mysqli_real_escape_string (programacin
orientada a objetos) o mysql_real_escape_string (programacin
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
Oscar E Capuay Uceda 240
Seguridad Web

echo $sql;
?>

Resultado Web:


Figura 195. Resultado de inyeccion04.php

Notamos que el control de la inyeccin SQL result exitoso con la funcin o
mtodo 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 conexin.

Oscar E Capuay Uceda 241
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 ms
personalizadas.

A cada visitante que accede a su Web se le asigna un identificador nico,
llamado "session id" (identificador de sesin). 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 funcin setcookie(). Las Cookies son parte
de la cabecera HTTP, por tanto la funcin setcookie() debe ser llamada
antes de que se produzca cualquier salida al navegador.

El soporte de las sesiones le permite registrar un nmero arbitrario de
variables que se conservarn en las siguientes peticiones. Cuando un
visitante acceda a su Web, PHP comprobar automticamente (si
session.auto_start est puesto a 1) o cuando usted lo especifique (de forma
explcita mediante session_start() o implcita a travs de session_register())
si se le ha enviado un "session id" especfico con su peticin, en cuyo caso
se recrean las variables que se haban guardado anteriormente.

Todas las variables registradas son almacenadas tras finalizar la peticin.
Las variables que estn indefinidas se marcan como no definidas. En los
subsiguientes accesos, no estarn definidas por el mdulo de sesiones a
menos que el usuario las defina ms tarde.

Las opciones de configuracin track_vars y register_globals influyen
notablemente en la forma en que las variables de la sesin 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 dems. 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, slo los
miembros del vector asociativo global $HTTP_SESSION_VARS pueden ser
registrados como variables de la sesin. Las variables restauradas de la
sesin slo estarn 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 cdigo ms 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 sesin como si se tratase de
una variable normal.

Si register_globals est activado, todas las variables globales pueden ser
registradas como variables de la sesin, y las variables de la sesin sern
restauradas a sus correspondientes variables globales. Como PHP debe
Oscar E Capuay Uceda 242
Seguridad Web

saber qu variables globales estn registradas como variables de la sesin,
los usuarios deben registrar las variables con la funcin 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 aplicacin

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&oacute;n IP es: ".$_SERVER['REMOTE_ADDR'];
?>
<br>
<?php
echo "Navegador: ".$_SERVER['HTTP_USER_AGENT'];
?>
Oscar E Capuay Uceda 243
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;
Oscar E Capuay Uceda 244
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 aplicacin nos devuelve un mensaje de Datos Incorrectos.

Oscar E Capuay Uceda 245
Seguridad Web

Autentificacin HTTP con PHP
Las caractersticas de autentificacin HTTP en PHP solo estn disponibles
cuando se est ejecutando como un mdulo en Apache y hasta ahora no lo
estn en la versin CGI. En un script PHP como mdulo de Apache, se
puede usar la funcin header() para enviar un mensaje de "Autentificacin
requerida" al navegador cliente haciendo que muestre una ventana de
entrada emergente con nombre de usuario y contrasea. Una vez que el
usuario ha rellenado el nombre y la contrasea, 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 contrasea y el tipo de autentificacin
respectivamente. Estas variables predefinidas se pueden encontrar en las
matrices $_SERVER y $HTTP_SERVER_VARS. Slo autentificacin
"Bsica" est soportada en este momento.

Ejemplo 115: Autenticacin 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&oacute;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. Autenticacin http con PHP

Oscar E Capuay Uceda 246
Seguridad Web

Si cancelamos la operacin tenemos el siguiente resultado en el navegador,
segn lo establecido en el cdigo.


Figura 200. Resultado de auth01.php

Si ingresamos datos y presionamos Aceptar tendremos:


Figura 201. Autenticacin con datos correctos


Figura 202. Resultado de auth01.php con datos correctos

Oscar E Capuay Uceda 247
Seguridad Web

Login
Ahora que ya tenemos el script de autenticacin de usuarios,
desarrollaremos el script para verificar el nombre de usuario y contrasea en
la base de datos. Utilizaremos una tabla usuario, con campos que contengan
el nombre y contrasea del usuario.


Figura 203. Tabla usuario

Script sql:

CREATE TABLE `usuario` (
`idusuario` 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 (`idusuario`)
) 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

Oscar E Capuay Uceda 248
Seguridad Web

Como podemos observar en la figura anterior, para ingresar un nuevo
registro debemos aplicar la funcin md5 a la contrasea del usuario.

Ahora desarrollaremos el script de logeo de usuarios. Para ello podremos
usar como mecanismo de ingreso de datos el script de autenticacin
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



Oscar E Capuay Uceda 249
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 mtodo real_escape_string. Esta funcin es
usada para crear una cadena SQL sin inyeccin SQL. Los caracteres
codificados son NULL (ASCII 0), \n, \r, \, ', ", y Control-Z. Adems usamos la
funcin md5 para cifrar la clave escrita en el formulario y compararla con la
cadena cifrada guardada en la base de datos.

Si el nmero 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 sesin utilizando la funcin
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 ms personalizadas e
incrementar el atractivo de su sitio Web.

Utilizaremos tambin, al array $_SESSION[] para registrar las variables de
sesin de nuestra aplicacin, en este caso especfico, 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 dems. 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 pgina inicial, de
lo contrario el script redirecciona el navegador hacia el listado de personas
(archivo: mysqli-listado.php), el cual, tiene dos nuevas lneas de cdigo con
respecto al ejemplo 76.

Oscar E Capuay Uceda 250
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 podra escribir
directamente la direccin de la pgina y lo podra hacer, pero ahora que
hemos iniciado una sesin y hemos registrado algunas variables podremos
controlar dicha accin y obligar a los usuarios a logearse antes de acceder a
ciertas pginas. Veamos a continuacin cul sera la lgica 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>
Oscar E Capuay Uceda 251
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 conexin
?>
</table>
<br>
<a href="formulario08.html">Agregar Registro</a>

Resultado Web:


Figura 207. Resultado de mysqli-listadologeado.php

En este script al iniciar la sesin (session_start()) podremos acceder a todas
las variables de sesin y eso nos permitir verificar si el usuario se ha
logeado y lo haremos comprobando si existe la variable de sesin que se
registra en el archivo logeo.php cuando los datos son correctos.

En adelante, a toda pgina en la que el usuario haya tenido que identificarse
se le debe insertar las primeras lneas escritas en el script.

session_start();
if(!isset($_SESSION['sidusuario'])) header("location: entrar.php?error=2");


Oscar E Capuay Uceda 252
Seguridad Web

CAPTCHA
Este nombre proviene del acrnimo de: Completely Automatic Public Turing
Test to Tell Computers and Humans Apart, que traducido al espaol
significa: Prueba de Turing pblica y automtica para diferenciar a mquinas
y humanos.

Se trata de una prueba desafo-respuesta utilizada en computacin para
determinar cundo el usuario es o no humano. El trmino se empez a
utilizar en el ao 2000 por Luis von Ahn, Manuel Blum y Nicholas J . Hopper
de la Carnegie Mellon University, y J ohn Langford de IBM.

La tpica 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 mquina no es capaz de comprender e
introducir la secuencia de forma correcta por lo que solamente el humano
podra hacerlo.

Como el test es controlado por una mquina en lugar de un humano como
en la Prueba de Turing, tambin se denomina Prueba de Turing Inversa.

Los CAPTCHAs son utilizados para evitar que robots, tambin llamados
spambots, puedan utilizar ciertos servicios. Por ejemplo, para que no puedan
participar en encuestas, registrarse para usar cuentas de correo electrnico
(o su uso para envo de correo basura) o, ms 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 caractersticas por definicin:
Son completamente automatizados, es decir, no es necesario ningn
tipo de mantenimiento / intervencin humana para su realizacin.
Esto supone grandes beneficios en cuanto a fiabilidad y coste.
El algoritmo utilizado es pblico. 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 continuacin construiremos con PHP un CAPTCHA.

El primer paso es disear 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 ledo correctamente la palabra.");
else
Oscar E Capuay Uceda 253
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 J ul 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 tamao 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 =
"ABCDEFGHJ KMNPRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
Oscar E Capuay Uceda 254
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 funcin 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 seales 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 lneas
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 sesin 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);
?>

Oscar E Capuay Uceda 255
Seguridad Web


Resultados Web:

Podemos ver a continuacin varios ejemplos de los CAPTCHAs generados.


Figura 208. Ejemplo1 de CAPTCHA


Figura 209. Ejemplo2 de CAPTCHA


Figura 210. Ejemplo3 de CAPTCHA


Oscar E Capuay Uceda 256
Generacin de archivos con PHP

VIII. Generacin de archivos con PHP
Imgenes
PHP tiene un conjunto de funciones destinadas a la manipulacin de
imgenes en varios formatos, utilizando la librera GD, debido a esto
debemos verificar si el mdulo est instalado y activado. Para hacer esto
vamos a la Configuracin de PHP en el men de WAMP y luego
seleccionamos Extensiones de PHP y luego seleccionamos la librera
php_gd2 para activarla.

Ejemplo 121: Ver configuracin 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);
?>
Oscar E Capuay Uceda 257
Generacin de archivos con PHP


La funcin imagecreate crea una nueva imagen con una paleta de colores y
sus parmetros son para especificar el ancho y el alto de la imagen en
pixeles.
La funcin imagecolorallocate reserva un color para ser usado en la imagen
en los ltimos tres parmetros se indica los valores de Rojo, Verde y Azul, de
dicha mezcla resultar un color el cual ser almacenado en una variable.
La funcin imagestring dibuja una cadena de texto horizontalmente. El primer
parmetro 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 parmetro es la cadena de texto y el ltimo es el
color del texto.

Resultado Web:

Figura 212. Resultado de imagen01.php

Ejemplo 123: Rectngulo 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:


Figura 213. Resultado de imagen02.php
Oscar E Capuay Uceda 258
Generacin de archivos con PHP


Ejemplo 124: Grfico 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:


Figura 214. Resultado de imagen03.php
Oscar E Capuay Uceda 259
Generacin de archivos con PHP


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:

Figura 215. Resultado de imagen04.php
Oscar E Capuay Uceda 260
Generacin de archivos con PHP



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 funcin rand tiene dos parmetros opcionales que sirven para especificar
el valor mnimo y mximo del nmero aleatorio que se quiere obtener.
Oscar E Capuay Uceda 261
Generacin de archivos con PHP


Resultado Web:


Figura 216. Resultado de imagen05.php

Para dibujar un crculo hay que utilizar la funcin imagearc la cual dibuja una
elipse parcial centrada en x, y (2do y 3er parmetro) en la imagen $img (ver
ejemplo acontinuacin), luego se especifican la anchura y altura
respectivamente mientras que los puntos de inicio y final vienen indicados
por los parmetros 6to y 7mo en grados. 0 se corresponde con la posicin
de las 3 en punto en un reloj y el arco se dibuja en el sentido de las agujas
del reloj.

Ejemplo 126: Crculo

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);
Oscar E Capuay Uceda 262
Generacin de archivos con PHP


// mostrar la imagen en el navegador
header("Content-type: image/png");
imagepng($img);

// liberar la memoria
imagedestroy($img);
?>

Resultado Web:


Figura 217. Resultado de imagen06.php
Oscar E Capuay Uceda 263
Generacin de archivos con PHP

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 aplicacin comercial o no, con o sin modificaciones.

Entre las ventajas ms resaltantes de FPDF tenemos: funciones de alto
nivel. Esta es una lista de sus principales caractersticas:

Eleccin de la unidad de medida, formato de pgina y mrgenes
Gestin de cabeceras y pies de pgina
Salto de pgina automtico
Salto de lnea y justificacin del texto automticos
Admisin de imgenes (J PEG y PNG)
Colores
Enlaces
Admisin de fuentes TrueType, Type1 y codificacin
Compresin de pgina

FPDF no necesita de ninguna extensin para PHP (excepto la biblioteca zlib
si se va a activar la opcin de compresin) y funciona con PHP4 y PHP5.

La clase genera documentos en muchos otros idiomas aparte de los
europeos occidentales: europeo central, cirloco, griego, bltico y tailands,
si se dispone de fuentes TrueType o Type1 con el conjunto de caracteres
adecuado. El chino y el japons tambin estn admitidos.

La velocidad de generacin de un documento es menor que con PDFlib. Sin
embargo, la desventaja en cuanto a rendimiento es muy razonable y se
adecua a la mayora 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 creacin de nuestros archivos PDF. Luego crearemos un
subdirectorio llamado font en donde copiaremos algunos archivos de fuentes
que utilizaremos posteriormente.

Veamos un ejemplo:

Oscar E Capuay Uceda 264
Generacin de archivos con PHP

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 pgina
$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 continuacin presento una lista de las propiedades y mtodos que vienen
implementados en FPDF.

AcceptPageBreak - acepta o no un salto de pgina automtico
AddFont - adiciona una nueva fuente
AddLink - crea una referencia interna
AddPage - adiciona una nueva pgina
AliasNbPages - define un alias para el nmero de pginas
Cell - imprime una celda
Close - termina el documento
Error - error fatal
Footer - Pie de pgina
FPDF - constructor
GetStringWidth - calcula la longitud de la cadena
GetX - obtiene la posicin actual de x
GetY - obtiene la posicin actual de y
Header - cabecera de pgina
Image - imprime una imagen
Line - dibuja una lnea
Link - crea una referencia
Ln - salto de lnea
Oscar E Capuay Uceda 265
Generacin de archivos con PHP

MultiCell - imprime texto con saltos de lnea
Open - crea un documento
Output - guarda o enva el documento
PageNo - nmero de pgina
Rect - dibuja un rectngulo
SetAuthor - Establece el autor del documento
SetAutoPageBreak - establece el modo de salto de pgina automtico
SetCompression - cambia la compresin en activo o inactivo
SetCreator - establece el creador del documento
SetDisplayMode - establece el modo de presentacin
SetDrawColor - establece el color de graficacin
SetFillColor - establece el color de relleno
SetFont - establece la fuente
SetFontSize - establece el tamao de la fuente
SetKeywords - asocia las palabras claves con el documento
SetLeftMargin - establece el margen izquierdo
SetLineWidth - establece el ancho de la lnea
SetLink - establece el enlace de destino
SetMargins - establece los mrgenes
SetRightMargin - establece el margen derecho
SetSubject - establece el tema del documento
SetTextColor - establece el color del texto
SetTitle - establece el ttulo del documento
SetTopMargin - Establece el margen superior
SetX - Establece la posicin actual de X
SetXY - Establece la posicin actual de X e Y
SetY - Establece la posicin actual de Y
Text - imprime una cadena
Write - imprime el siguiente texto

Ya que Cell es uno de los mtodos ms usados de la clase veremos con
ms detalle los parmetros que se pueden utilizar.

Sintaxis:

Cell(float w [, float h [, string txt [, mixed border [, int ln [, string align [, int fill [,
mixed link]]]]]]])

Descripcin
Imprime una celda (de rea rectangular) bordes opcionales, color de fondo y
secuencia de carcteres La esquina superir izquierda de la celda
corresponde a la posicin actual. El texto puede ser alineado o centrado.
Despus de invocar, la posicin actual se desplaza a la derecha o la
siguiente lnea. Es posible poner una referencia en el texto.
Si esta el salto de pgina automtico habilitado y la celda esta por fuera del
lmite, es realizado un salto de pgina antes de producir la salida.

Parmetros
w : Ancho de Celda. Si es 0, la celda se extiende hasta la mrgen derecha.

h : Alto de celda. Valor por defecto: 0.
Oscar E Capuay Uceda 266
Generacin de archivos con PHP


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 nmero: 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 posicin actual debera ir antes de invocar. Los valores
posibles son:

* 0: a la derecha
* 1: al comienzo de la siguiente lnea
* 2: debajo

Poner 1 es equivalente a poner 0 y llamar justo despus Ln(). Valor por
defecto: 0.

align : Permite centrar o alinear el texto. Los posibles valores son:

* L o una cadena vacia: alineacin izquierda (valor por defecto)
* C: centro
* R: alineacin 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 pgina

<?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');
Oscar E Capuay Uceda 267
Generacin de archivos con PHP

$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 pgina',0,1);

$pdf->Output();
?>

Resultado Web:


Figura 219. Resultado de pdf02.php

Segunda pgina

Figura 220. Segunda pgina de pdf01.php
Oscar E Capuay Uceda 268
Generacin de archivos con PHP


Ejemplo 129: PDF con captulos

pdf03.php

<?php
define('FPDF_FONTPATH','font/');
require('fpdf.php');

//extensin de la clase FPDF
//extiende los mtodos de encabezado (header) y pie de pgina (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 pgina
function Footer()
{
$this->SetY(-15);
$this->SetFont('Arial','I',8);
$this->SetTextColor(128);
$this->Cell(0,10,'Pgina '.$this->PageNo(),0,0,'C');
}


Oscar E Capuay Uceda 269
Generacin de archivos con PHP


function SetCol($col)
{
//Establecer la posicin de una columna dada
$this->col=$col;
$x=10+$col*65;
$this->SetLeftMargin($x);
$this->SetX($x);
}

function AcceptPageBreak()
{
//Mtodo que acepta o no el salto automtico de pgina
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 pgina
return false;
}
else
{
//Volver a la primera columna
$this->SetCol(0);

//Saltar pgina
return true;
}
}


function ChapterTitle($num,$titulo)
{
$this->SetFont('Arial','B',13);
$this->SetFillColor(215,215,255);
$this->Cell(0,6,"Captulo $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);
Oscar E Capuay Uceda 270
Generacin de archivos con PHP


//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 captulo
$this->AddPage();
$this->ChapterTitle($num,$title);
$this->ChapterBody($file);
}
}

//instanciamos la clase
$pdf=new PDF();

//variable global utilizada en el mtodo header
$title='Ejemplo 3';

//ttulo del documento
$pdf->SetTitle($title);

//Datos del autor del contenido
$pdf->SetAuthor('Oscar Capuay Uceda');

//Datos del creador aplicacin que cre el documento
$pdf->SetCreator(FPDF);

//primer captulo
$pdf->PrintChapter(1,'Phishing o Fraude Electrnico','phishing.txt');

//segundo captulo
$pdf->PrintChapter(2,'Esteganografa','esteganografia.txt');

//escribe el pdf en un archivo llamado prueba.pdf y obliga su descarga
$pdf->Output('prueba.pdf','D');
?>

Oscar E Capuay Uceda 271
Generacin de archivos con PHP

Resultado:


Figura 221. Resultado de pdf03.php

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();
Oscar E Capuay Uceda 272
Generacin de archivos con PHP

$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:


Figura 222. Resultado de pdf04.php




Oscar E Capuay Uceda 273
Generacin de archivos con PHP

Archivos XLS
Los archivos XLS pueden ser generados en PHP utilizando la funcin
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).

Oscar E Capuay Uceda 274
Generacin de archivos con PHP

Oscar E Capuay Uceda 275

Figura 223. Abriendo xls01.php

Abrimos el archivo

Figura 224. Hoja de calculo con xls01.php

Ejemplo 132: XLS con frmulas

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>
Generacin de archivos con PHP

Oscar E Capuay Uceda 276
<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 pgina muy simple compuesta en su mayora por
etiquetas HTML pero que se convierte en XLS por las primeras lneas
escritas en PHP.


Figura 225. Abriendo xls02.php
Abrimos el archivo

Figura 226. resumen.xls generado con xls02.php
Generacin de archivos con 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 travs 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 J ul 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);
?>


Oscar E Capuay Uceda 277
Generacin de archivos con PHP

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);
?>

Oscar E Capuay Uceda 278
Generacin de archivos con PHP


Resultado:


Figura 228. Resultado de xls04.php


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&eacute;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>
Oscar E Capuay Uceda 279
Generacin de archivos con PHP

<td><?php echo "$registro->telefono"?></td>
</tr>
<?php
}
$mysqli->close(); //cerramos la conexin
?>
</table>

Resultado Web:


Figura 229. Abriendo xls05.php


Figura 230. Resultado de xls05.php




Oscar E Capuay Uceda 280
PHP +AJ AX

IX. PHP + AJAX
En este libro veremos el uso de AJ AX en PHP a travs de la librera de
clases XAJ AX.

AJAX
AJ AX, acrnimo de Asynchronous J avaScript And XML (J avaScript
asncrono y XML), es una tcnica 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 comunicacin
asncrona con el servidor en segundo plano. De esta forma es posible
realizar cambios sobre la misma pgina sin necesidad de recargarla. Esto
significa aumentar la interactividad, velocidad y usabilidad en la misma.

AJ AX es una combinacin de cuatro tecnologas ya existentes:

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el
diseo que acompaa a la informacin.
Document Object Model (DOM) accedido con un lenguaje de
scripting por parte del usuario, especialmente implementaciones
ECMAScript como J avaScript y J Script, para mostrar e interactuar
dinmicamente con la informacin presentada.
El objeto XMLHttpRequest para intercambiar datos asincrnicamente
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 comnmente para la transferencia de
vuelta al servidor, aunque cualquier formato puede funcionar,
incluyendo HTML preformateado, texto plano, J SON y hasta EBML.

Como el DHTML, LAMP o SPA, AJ AX no constituye una tecnologa en s,
sino que es un trmino que engloba a un grupo de stas que trabajan
conjuntamente.

A pesar de que el trmino AJ AX fuese creado en 2005, la historia de las
tecnologas que permiten AJ AX se remonta a una dcada antes con la
iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las
tcnicas para la carga asncrona de contenidos en una pgina 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 tenan el atributo
src que poda tomar cualquier direccin URL externa, y cargando una pgina
que contenga javascript que manipule la pgina paterna, pueden lograrse
efectos parecidos al AJ AX.

El Microsoft's Remote Scripting (o MSRS, introducido en 1998) result un
sustituto ms elegante para estas tcnicas, con envo de datos a travs de
un applet J ava el cual se puede comunicar con el cliente usando J avaScript.
Oscar E Capuay Uceda 281
PHP +AJ AX

Esta tcnica funcion en ambos navegadores, Internet Explorer versin 4 y
Netscape Navigator versin 4. Microsoft la utiliz en el Outlook Web Access
provisto con la versin 2000 de Microsoft Exchange Server.

La comunidad de desarrolladores web, primero colaborando por medio del
grupo de noticias microsoft.public.scripting.remote y despus usando blogs,
desarrollaron una gama de tcnicas de scripting remoto para conseguir los
mismos resultados en diferentes navegadores. Los primeros ejemplos
incluyen la librera J SRS en el ao 2000, la introduccin a la tcnica
imagen/cookie en el mismo ao y la tcnica J avaScript bajo demanda
(J avaScript on Demand) en 2002. En ese ao, se realiz una modificacin
por parte de la comunidad de usuarios al Microsoft's Remote Scripting para
reemplazar el applet J ava 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 mayora de los
navegadores, raramente se usan tcnicas alternativas. Sin embargo, todava
se utilizan donde se requiere una mayor compatibilidad, una reducida
implementacin, o acceso cruzado entre sitios Web. Una alternativa, el
Terminal SVG (basado en SVG), emplea una conexin persistente para el
intercambio continuo entre el navegador y el servidor.[6]

XAJAX
XAJ AX es una librera PHP que Ud puede incluir en su script PHP para
proveer una forma fcil en sus pginas Web la llamada a funciones o
mtodos de objetos usando AJ AX (Asynchronous J avaScript And XML).
Simplemente registra una o mas funciones/mtodos con el objeto xajax
quien retorna XML como respuesta y agrega una sentencia en su cabecera
HTML para incluir un archivo de J avaScript y ejecutar un proceso que
muestre el resultado desde alguna parte del HTML, para ello agregamos una
simple llamada a una funcin de J avaScript en su HTML, y XAJ AX se
encarga del resto! [7]

A mi parecer es una de las mejores libreras para trabajar con PHP y AJ AX,
la versin que utilizaremos es la 0.2.5 (estable). Esta librera ha sido
desarrollada por: J ared White (jared@intuitivefuture.com), J . Max Wilson
(jmaxwilson@users.sourceforge.net) y Eion Robb (eion@bigfoot.com) y el
sitio Web oficial es: http://www.xajaxproject.org.

Veamos ahora algunos ejemplos.

Ejemplo 135: Asignacin de valores a propiedades de un objeto HTML

xajax01.php

<?php
require ('xajax/xajax.inc.php');

Oscar E Capuay Uceda 282
PHP +AJ AX

//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 sern llamadas desde J avaScript
$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->printJ avascript('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 funcin xajax_frase, la cual
enva como parmetro la frase que aparecer en la caja de texto.

Resultado Web:

Figura 231. Resultado de xajax01.php
Oscar E Capuay Uceda 283
PHP +AJ AX


Ejemplo 136: Asignacin 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&iacute;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 funcin
$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->printJ avascript('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:


Figura 232. Resultado de xajax02.php
Oscar E Capuay Uceda 284
PHP +AJ AX


Al hacer click en el botn, aparecer el siguiente resultado:


Figura 233. Cambio de contenido con xajax02.php

Ejemplo 137: Asignacin de innerHTML y estilos con XAJ AX

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 sern llamadas desde J avaScript
$xajax->registerFunction("prueba");
Oscar E Capuay Uceda 285
PHP +AJ AX

$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->printJ avascript('xajax'); // directorio donde se encuentra el
archivo xajax.inc.php.
?>
</head>

<body style="text-align:center;">

<div id="division1" name="division1">&nbsp;</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 funcin de prueba al cargar la pgina
xajax_prueba(0);
// llama a la funcin SetColor al cargar la pgina
xajax_setColor(document.getElementById('colores').value);
</script>
</body>
</html>

Resultado Web:


Figura 234. Resultado de xajax03.php
Oscar E Capuay Uceda 286
PHP +AJ AX


Podemos comprobar en este ejemplo a travs de nuestro navegador que la
frase cambia dependiendo del botn que presionemos y del color que
elijamos pero todo esto sin recargar la pgina, es decir, utilizando AJ AX.
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();
//asignacin a la propiedad display
$objResponse->addAssign("div1","style.display",$valor);
//asignacin del texto del botn
$objResponse->addAssign("boton1","value",$texto);
return $objResponse;
}
// Instanciamos xajax.
$xajax =new xajax();
//Registramos la funcin
$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->printJ avascript('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>
Oscar E Capuay Uceda 287
PHP +AJ AX


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
parmetro a la funcin alternar (xajax_alternar).

Resultado Web:


Figura 235. Resultado de xajax04.php

Para ocultar el DIV hacemos click en Ocultar.


Figura 236. Ocultando un DIV

Ejemplo 139: Imprimir nmeros del 1 a N

xajax05.php

<?php
require ('xajax/xajax.inc.php');

function numeros($numero)
{
for($i=1;$i<=$numero;$i++) {
$resultado.=$i . " ";
}
Oscar E Capuay Uceda 288
PHP +AJ AX

$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->printJ avascript('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:


Figura 237. Resultado de xajax05.php

Ejemplo 140: Cargar una imagen con XAJ AX

xajax06.php

<?php
require ('xajax/xajax.inc.php');

function imagen($ruta)
{
Oscar E Capuay Uceda 289
PHP +AJ AX

$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->printJ avascript('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&aacute;fico</option>
<option value="imagenes/navegador.jpg">Navegador</option>
<option value="imagenes/teclado.jpg">Teclado</option>
</select>
</body>
</html>

La funcin imagen definida en este ejemplo inserta la etiqueta IMG en el DIV
para mostrar la imagen seleccionada a travs de la lista desplegable, la cual,
en su evento ochange enva la ruta de la imagen que se mostrar.

Resultado Web:

Figura 238. Resultado de xajax06.php
Oscar E Capuay Uceda 290
PHP +AJ AX


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 cdigo javascript establecido para un evento

xajax07.php

<?php
require ('xajax/xajax.inc.php');
Oscar E Capuay Uceda 291
PHP +AJ AX


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->printJ avascript('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 mtodo addEvent se puede establecer el cdigo de javascript que
ser ejecutado en un evento de un objeto determinado. Por lo tanto,
necesitamos tres parmetros: objeto, evento y cdigo.

Resultado Web:


Figura 241. Resultado de xajax07.php

Al hacer click sobre el botn Abrir ventana al botn Boton 1 se le asigna el
nuevo cdigo de javascript que se ejecutar en el evento onclick, en este
caso abrir el archivo md5.php en una nueva ventana del navegador.
Despus de haber hecho click en Abrir ventana hacemos click en Boton 1
para hacer la prueba.
Oscar E Capuay Uceda 292
PHP +AJ AX



Figura 242. Ventana nueva con xajax07.php

Ahora haremos click en el botn alert para cambiar el cdigo 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 botn 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();
Oscar E Capuay Uceda 293
PHP +AJ AX

$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->printJ avascript('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" />
J avaScript<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 mtodo addAlert ejecuta la funcin alert() de javascript desde el cdigo
AJ AX.

Para obtener los valores de los objetos del formulario utilizamos el mtodo
getFormValues de la clase xajax en javascript.

Resultado Web:


Figura 244. Resultado de xajax08.php

Escribimos un valor en la frase y luego seleccionamos algunos temas.

Oscar E Capuay Uceda 294
PHP +AJ AX


Figura 245. Ingreso de datos en xajax08.php

Ahora veamos el resultado al presionar el botn 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();
?>
Oscar E Capuay Uceda 295
PHP +AJ AX

<!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->printJ avascript('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" />
J avaScript<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 parmetro (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 envo:

Primer botn: sin el envo de los objetos deshabilitados.
Oscar E Capuay Uceda 296
PHP +AJ AX


Figura 248. Deshabilitando una caja de texto con xajax
Obtenemos:

Figura 249. Mensaje de resultado de xajax09.php

Segundo botn: incluyendo objetos deshabilitados.

Figura 250. Incluyendo objetos inhabilitados

Obtenemos:

Figura 251. Mensaje resultante incluyendo objetos inhabilitados
Oscar E Capuay Uceda 297
PHP +AJ AX


Error comn
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
lneas en blanco o algn carcter en el cdigo HTML antes de iniciar el
cdigo de XAJ AX.

Ejemplo 144: Archivo con una lnea 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 ---
Oscar E Capuay Uceda 298
PHP +AJ AX

Bsqueda en base de datos con XAJAX

Ejemplo 145: Bsqueda del nombre segn el cdigo con XAJ AX

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->printJ avascript('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>

Oscar E Capuay Uceda 299
PHP +AJ AX

En el ejemplo, enviamos el ID de la persona a la funcin 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 bsqueda en xajax-buscar.php


Figura 255. Resultado de la bsqueda en xajax-buscar.php



Oscar E Capuay Uceda 300
PHP +AJ AX

Administracin de datos con AJAX
Ahora utilizaremos la librera XAJ AX para administrar la tabla persona de la
base de datos dbdemo. Veremos paso a paso la construccin de las
pginas necesarias.

Controlador con AJAX

Ejemplo 146: Controlador para mantenimiento con AJ AX

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;
}

Oscar E Capuay Uceda 301
PHP +AJ AX

Oscar E Capuay Uceda 302
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 +AJ AX

Oscar E Capuay Uceda 303
$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 pginas
$salida="P&aacute;ginas:";
$npag=ceil($objpersona->nr/$nrxp);
PHP +AJ AX

Oscar E Capuay Uceda 304
for($i=1;$i<=$npag;$i++){
if($i!=$pagina)
$enlace="<a href='#'
onClick=\"frm1.actual.value='';xajax_registros($nrxp,xajax.getFormValues('fr
m1'),xajax.getFormValues('frmbuscar'),'$i');xajax_paginas($nrxp,xajax.getFor
mValues('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 +AJ AX

Oscar E Capuay Uceda 305
Insercin de registro

Figura 257. Insercin de registros con xajax


Edicin de registro

Figura 258. Edicin de registro con xajax

PHP +AJ AX

Oscar E Capuay Uceda 306
Seleccin de registros

Figura 259. Seleccin de registros con xajax

Bsqueda de registros

Figura 260. Bsqueda de registros con xajax

Capa de Datos con AJAX

Ejemplo 147: Modelo para mantenimiento con AJ AX

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 +AJ AX

Oscar E Capuay Uceda 307
$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 +AJ AX

Oscar E Capuay Uceda 308
Vista con AJAX

Ejemplo 148: Vista para mantenimiento con AJ AX

xajax_vista_persona.php

<html lang="es">
<head>
<title>Personas</title>
<script type="text/javascript" src="js/funciones.js"></script>
<?php $xajax->printJ avascript('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>&nbsp;
<a href="#" onClick="xajax_eliminar(xajax.getFormValues('frmlistado'));
xajax_paginas(<?php echo
$nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);xajax_registro
s(<?php echo
$nrxp?>,xajax.getFormValues('frm1'),xajax.getFormValues('frmbuscar'),'1');">
<img src="iconos/borrar.gif" height="16" alt="borrar"></a>&nbsp;
<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">Telfono</option>
</select>&nbsp;
<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 +AJ AX

Oscar E Capuay Uceda 309
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');x
ajax_paginas(<?php echo
$nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);ocultar_div('bu
squeda'); 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">Telfono</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');x
ajax_paginas(<?php echo
$nrxp?>,xajax.getFormValues('frmbuscar'),frm1.pagina.value);ocultar_div('for
mulario')" class="boton">
PHP +AJ AX

Oscar E Capuay Uceda 310
<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('frm
buscar'),'$pagina');
xajax_paginas($nrxp,xajax.getFormValues('frmbuscar'),frm1.pagina.value);
frm1.actual.value='$campo_orden';\">$titulo_columna</a>";
}
?>


Ejemplo 149: Sombreado de registros con J avaScript

PHP +AJ AX

Oscar E Capuay Uceda 311
funciones.js

<!--
// J avaScript Document
var filasel;

function fila(filsel){
filasel =filsel;
return filasel;
}


function setPointer(Color, check)
{
var theRow=filasel;
var theCells =theRow.getElementsByTagName('td');
var theCells =theRow.cells;
var rowCellsCnt =theCells.length;
for (var c =0; c <rowCellsCnt; c++) {
if(check.checked==true){
theCells[c].style.backgroundColor =Color;
}else {
theCells[c].style.backgroundColor =''; // #d6e7ef
}
}

return true;
}

function seleccionar_all(Color,id){
var activo;
Tab =document.all.tab_registros;
id0=id-1;
for(var x=0; x<document.forms[id].length; x++){
if(document.forms[id0].allcheck.checked &&
document.forms[id].elements[x].type=="checkbox"){
document.forms[id].elements[x].checked =true;
}else{
document.forms[id].elements[x].checked =false;
}
}
for (r=0; r<Tab.rows.length; r++){
for(c=0; c<Tab.rows[r].cells.length; c++){
if(Tab.rows[r].cells[c].tagName!="TH"){
if(document.forms[id0].allcheck.checked){
Tab.rows[r].cells[c].style.backgroundColor=Color;
}else{
Tab.rows[r].cells[c].style.backgroundColor="";
}
}
}
PHP +AJ AX

Oscar E Capuay Uceda 312
}
}

function compCheck(){
var sw=0;
for(var x=0; x<document.forms[0].length; x++){
if (document.forms[0].elements[x].checked){
sw=1;
}
}
if(sw!=1){
alert ("Por favor, selecciona los registros quee deseas
elimiar.");
return(false);
}
}

function toggle(obj){
var objID =document.getElementById(obj);
objID.style.display =(objID.style.display =="none")?"":"none";
}

function ver_div(obj){
var objID =document.getElementById(obj);
objID.style.display ="block";
}

function ocultar_div(obj){
var objID =document.getElementById(obj);
objID.style.display ="none";
}
-->
Referencias Bibliogrficas

Oscar E Capuay Uceda 313
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 J os Luis. HTML 4 Gua 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] AJ AX. http://es.wikipedia.org/wiki/AJ AX . mayo 2007
[7] WHITE J are, J . WILSON Max, ROBB Eion. XAJ AX 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

Oscar E Capuay Uceda 314
XI. Anexos

Lista de Ejemplos
TUEjemplo 1:UT TUPrimera pgina WebUT _______________________________ 18
TUEjemplo 2:UT TUComentariosUT _____________________________________ 22
TUEjemplo 3:UT TUUso de tildesUT _____________________________________ 24
TUEjemplo 4:UT TUEnlacesUT _________________________________________ 27
TUEjemplo 5:UT TUImgenesUT ________________________________________ 29
TUEjemplo 6:UT TUTablasUT __________________________________________ 31
TUEjemplo 7:UT TUEjemplo de Tablas en HTMLUT _________________________ 37
TUEjemplo 8:UT TUFormulario solicitando los comentarios del usuario:UT _______ 40
TUEjemplo 9:UT TUConfirmacin de la inclusin en una lista de correo:UT _______ 41
TUEjemplo 10:UT TUFormulario 2UT _____________________________________ 43
TUEjemplo 11:UT TUUso de framesUT ___________________________________ 46
TUEjemplo 12:UT TUAcrnimos y AbreviaturasUT __________________________ 49
TUEjemplo 13:UT TUFrase entre comillasUT_______________________________ 49
TUEjemplo 14:UT TUINS y DELUT ______________________________________ 50
TUEjemplo 15:UT TUOBJECT Y PARAMUT _______________________________ 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 SPANUT _____________________________________ 58
TUEjemplo 21:UT TUfuncin alertUT _____________________________________ 61
TUEjemplo 22:UT TUEventosUT ________________________________________ 76
TUEjemplo 23:UT TUDefinicin mediante cdigoUT _________________________ 77
TUEjemplo 24:UT TUFuncin open()UT ___________________________________ 79
TUEjemplo 25:UT TUEscribir HTML con javascriptUT ________________________ 83
TUEjemplo 26:UT TUSelect con javascriptUT ______________________________ 87
TUEjemplo 27:UT TUUso de archivos jsUT ________________________________ 90
TUEjemplo 28:UT TUHTML y CSSUT ____________________________________ 92
TUEjemplo 29:UT TUStyleUT ___________________________________________ 93
TUEjemplo 30:UT TUColores con CSSUT _________________________________ 94
TUEjemplo 31:UT TUDefinicin de constantesUT __________________________ 100
TUEjemplo 32:UT TUConsidera la siguiente funcinUT ______________________ 100
TUEjemplo 33:UT TUOperador de asignacinUT___________________________ 103
TUEjemplo 34:UT TUOperadores de asignacin combinadosUT ______________ 103
TUEjemplo 35:UT TUOperador ternarioUT _______________________________ 104
TUEjemplo 36:UT TUComportamiento Ternario No-ObvioUT _________________ 105
TUEjemplo 37:UT TUControl de erroresUT _______________________________ 106
TUEjemplo 38:UT TUOperador de ejecucinUT____________________________ 106
TUEjemplo 39:UT TUOperadores de incremento y decrementoUT _____________ 107
TUEjemplo 40:UT TUIncremento y decremento con variables tipo carcter.UT ___ 107
TUEjemplo 41:UT TUOperadores de cadenaUT ___________________________ 108
TUEjemplo 42:UT TUOperadores de matricesUT __________________________ 109
TUEjemplo 43:UT TUComparacin de matricesUT _________________________ 110
TUEjemplo 44:UT TUUso de instanceof con clasesUT ______________________ 110
TUEjemplo 45:UT TUUso de instanceof con clases heredadasUT _____________ 111
Anexos

Oscar E Capuay Uceda 315
TUEjemplo 46:UT TUUso de instanceof para una claseUT ___________________ 111
TUEjemplo 47:UT TUUso de instanceof con otras variablesUT ________________ 112
TUEjemplo 48:UT TUIf ejecuta una sentencia si la condicin es verdaderaUT ____ 113
TUEjemplo 49:UT TUIf con varias sentencias si la condicin es verdaderaUT ____ 113
TUEjemplo 50:UT TUIf anidadoUT ______________________________________ 114
TUEjemplo 51:UT TUUso de else en una sentencia ifUT _____________________ 114
TUEjemplo 52:UT TUUso de elseifUT ___________________________________ 114
TUEjemplo 53:UT TUImprimir los nmeros del 1 al 10 utilizando la sentencia forUT 115
TUEjemplo 54:UT TUImprimir los nmeros del 1 al 10 utilizando whileUT _______ 116
TUEjemplo 55:UT TUPagina01.phpUT ___________________________________ 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 TUEnvo de datos de un formulario a una pgina PHPUT _____ 124
TUEjemplo 64:UT TUSubir un archivo al servidor WebUT ____________________ 129
TUEjemplo 65:UT TUConexin a MySQLUT ______________________________ 143
TUEjemplo 66:UT TUListado de registrosUT ______________________________ 143
TUEjemplo 67:UT TUListado de registros en una tablaUT ____________________ 144
TUEjemplo 68:UT TUInsercin de registros en una tablaUT __________________ 145
TUEjemplo 69:UT TUEdicin de registrosUT ______________________________ 147
TUEjemplo 70:UT TUEliminacin de registrosUT ___________________________ 149
TUEjemplo 71:UT TUConexin a PostgreSQLUT __________________________ 170
TUEjemplo 72:UT TUListado de registros en una tabla HTML.UT ______________ 171
TUEjemplo 73:UT TUInsercin de registro en PostgreSQL.UT ________________ 172
TUEjemplo 74:UT TUEdicin de registro en PostgreSQL.UT__________________ 174
TUEjemplo 75:UT TUEliminacin de registro en PostgreSQL.UT ______________ 176
TUEjemplo 76:UT TUConexin a MS-SQLServerUT ________________________ 180
TUEjemplo 77:UT TUListado de registrosUT ______________________________ 181
TUEjemplo 78:UT TUInsercin de registro en MS-SQLServerUT ______________ 182
TUEjemplo 79:UT TUEdicin de registro en MS-SQLServerUT ________________ 184
TUEjemplo 80:UT TUEliminacin de registros en MS-SQLServerUT ___________ 185
TUEjemplo 81:UT TUDefinicin de una claseUT ___________________________ 187
TUEjemplo 82:UT TUCreando una instanciaUT ____________________________ 187
TUEjemplo 83:UT TUHerencia simple de una ClaseUT ______________________ 188
TUEjemplo 84:UT TUAuto cargaUT _____________________________________ 189
TUEjemplo 85:UT TUConexin a MySQL con mysqliUT _____________________ 195
TUEjemplo 86:UT TUListado con mysqliUT _______________________________ 196
TUEjemplo 87:UT TUInsercin de registro con mysqliUT ____________________ 197
TUEjemplo 88:UT TUEdicin de registro con mysqliUT ______________________ 199
TUEjemplo 89:UT TUEliminacin de registros con mysqliUT __________________ 201
TUEjemplo 90:UT TUPaginacin de resultadosUT__________________________ 202
TUEjemplo 91:UT TUMODELO MVC con PHPUT ________________________ 209
TUEjemplo 92:UT TUUna plantilla usada por el modeloUT ___________________ 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

Oscar E Capuay Uceda 316
TUEjemplo 97:UT TUvista_bd.phpUT ___________________________________ 213
TUEjemplo 98:UT TUcontrolador_bd.phpUT ______________________________ 213
TUEjemplo 99:UT TUConexin 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 eliminacin mltipleUT _ 219
TUEjemplo 102:UT TUInsercin de registros con PDOUT ____________________ 220
TUEjemplo 103:UT TUEliminacin mltiple de registros con PDOUT ___________ 222
TUEjemplo 104:UT TUEdicin 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 TUInyeccin SQL en una sentencia SELECTUT ___________ 229
TUEjemplo 110:UT TUPaginacin de resultados con Inyeccin SQLUT _________ 229
TUEjemplo 111:UT TUget_magic_quotes_gpc y addslashesUT _______________ 239
TUEjemplo 112:UT TUmysqli_real_escape_stringUT _______________________ 240
TUEjemplo 113:UT TUIngreso de un usuario a la aplicacinUT _______________ 243
TUEjemplo 114:UT TUVerifica datos del usuarioUT_________________________ 244
TUEjemplo 115:UT TUAutenticacin HTTPUT _____________________________ 246
TUEjemplo 116:UT TUFormulario para el logeo de usuariosUT _______________ 249
TUEjemplo 117:UT TULogeo de usuariosUT ______________________________ 250
TUEjemplo 118:UT TUVerifica si el usuario se ha logeadoUT _________________ 251
TUEjemplo 119:UT TUFormulario CAPTCHAUT ___________________________ 253
TUEjemplo 120:UT TUGenerador CAPTCHAUT ___________________________ 254
TUEjemplo 121:UT TUVer configuracin GDUT____________________________ 257
TUEjemplo 122:UT TUMi primera imagenUT ______________________________ 257
TUEjemplo 123:UT TURectngulo y textoUT ______________________________ 258
TUEjemplo 124:UT TUGrfico de barrasUT _______________________________ 259
TUEjemplo 125:UT TUPieUT __________________________________________ 260
TUEjemplo 126:UT TUCrculoUT _______________________________________ 262
TUEjemplo 127:UT TUFPDFUT ________________________________________ 265
TUEjemplo 128:UT TUPDF con salto de pginaUT _________________________ 267
TUEjemplo 129:UT TUPDF con captulosUT ______________________________ 269
TUEjemplo 130:UT TUPDF con datos de MySQLUT ________________________ 272
TUEjemplo 131:UT TUXLS simpleUT ____________________________________ 274
TUEjemplo 132:UT TUXLS con frmulasUT ______________________________ 275
TUEjemplo 133:UT TUXLS con xlsStreamUT _____________________________ 277
TUEjemplo 134:UT TUXLS con datos de MySQLUT ________________________ 278
TUEjemplo 135:UT TUAsignacin de valores a propiedades de un objeto HTMLUT 282
TUEjemplo 136:UT TUAsignacin de HTML a innerHTML de una etiqueta DIVUT _ 284
TUEjemplo 137:UT TUAsignacin de innerHTML y estilos con XAJAXUT _______ 285
TUEjemplo 138:UT TUOcultar y Mostrar un DIVUT _________________________ 287
TUEjemplo 139:UT TUImprimir nmeros del 1 a NUT _______________________ 288
TUEjemplo 140:UT TUCargar una imagen con XAJAXUT ____________________ 289
TUEjemplo 141:UT TUCambiar el cdigo javascript establecido para un eventoUT 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 lnea en blanco antes de iniciar PHP.UT __ 298
TUEjemplo 145:UT TUBsqueda del nombre segn el cdigo con XAJAXUT ____ 299
TUEjemplo 146:UT TUControlador para mantenimiento con AJAXUT ___________ 301
TUEjemplo 147:UT TUModelo para mantenimiento con AJAXUT ______________ 306
Anexos

Oscar E Capuay Uceda 317
TUEjemplo 148:UT TUVista para mantenimiento con AJAXUT ________________ 308
TUEjemplo 149:UT TUSombreado de registros con JavaScriptUT _____________ 310


Anexos

Oscar E Capuay Uceda 318
Lista de Tablas

TTabla 1. Cdigos HTML para caracteres especiales ________________ 23
Tabla 2. Cdigos HTML para caracteres especiales ________________ 24
Tabla 3. Caracteres especiales para cadenas en J avaScript__________ 63
Tabla 4. Operadores aritmticos________________________________ 65
Tabla 5. Operadores de comparacin ___________________________ 66
Tabla 6. Operadores lgicos___________________________________ 66
Tabla 7. Operadores de asignacin _____________________________ 67
Tabla 8. Operadores especiales________________________________ 67
Tabla 9. Mtodos matemticos del Objeto Math____________________ 73
Tabla 10. Propiedades del objeto Number _________________________ 74
Tabla 11. Eventos de J avaScript ________________________________ 75
Tabla 12. Comando CSS ______________________________________ 95
Tabla 13. Macros CSS ________________________________________ 96
Tabla 14. Secciones CSS______________________________________ 97
Tabla 15. Operadores aritmticos de PHP ________________________ 103
Tabla 16. Operadores de comparacin de PHP ____________________ 104
Tabla 17. Operadores de incremento y decremento de PHP __________ 106
Tabla 18. Operadores lgicos__________________________________ 108
Tabla 19. Operadores de matrices ______________________________ 109
Tabla 20. Controladores PDO__________________________________ 215


Anexos

Oscar E Capuay Uceda 319
Lista de Figuras

UFigura 1. Inicio de la instalacin de WAMP ______________________ 11
UFigura 2. Licencia de uso de WAMP____________________________ 12
UFigura 3. Destino de la instalacin 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 configuracin de la instalacin ____________ 14
UFigura 7. Instalando WAMP __________________________________ 14
UFigura 8. Instalacin 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 divisin horizontal_________________________ 48
UFigura 30. Acrnimos y abreviaturas ____________________________ 49
UFigura 31. Frase entre comillas ________________________________ 50
UFigura 32. Acrnimos y abreviaturas ____________________________ 50
UFigura 33. Animacin 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 pgina con DIVs y SPANs __________________ 60
UFigura 39. Resultado de eventos.html ___________________________ 76
UFigura 40. Resultado del mtodo alert ___________________________ 76
UFigura 41. Resultado de load1.html _____________________________ 77
UFigura 42. Resultado del mtodo 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 validacin_______________________________ 85
UFigura 48. Resultado de select.html _____________________________ 87
Anexos

Oscar E Capuay Uceda 320
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. Seleccin de un archivo en un formulario _______________ 130
UFigura 69. Datos de un archivo enviado al servidor ________________ 131
UFigura 70. Conexin 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. Definicin de campos de la tabla______________________ 135
UFigura 78. Estructura de la tabla_______________________________ 135
UFigura 79. Confirmacin para la creacin 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. Especificacin 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 insercin de registros_______________ 141
UFigura 90. Datos para los nuevos registros ______________________ 141
UFigura 91. Operacin 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 edicin de un registro___________________ 149
Anexos

Oscar E Capuay Uceda 321
UFigura 98. Resultado de pagina17.php__________________________ 149
UFigura 99. Archivos de instalacin de PostgreSQL_________________ 151
UFigura 100. Asistente de instalacin de PostgreSQL ________________ 151
UFigura 101. Inicio del asistente de instalacin _____________________ 152
UFigura 102. Notas de instalacin _______________________________ 152
UFigura 103. Opciones de instalacin_____________________________ 153
UFigura 104. onfiguracin 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 instalacin___________ 155
UFigura 110. Instalando PostgreSQL _____________________________ 156
UFigura 111. Instalacin completa _______________________________ 156
UFigura 112. pgAdmin III_______________________________________ 157
UFigura 113. Conexin 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 creacin de la tabla_________ 162
UFigura 124. Final de la creacin 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 extensin 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

Oscar E Capuay Uceda 322
UFigura 149. Nombre de la nueva base de datos____________________ 177
UFigura 150. Creando una nueva tabla ___________________________ 178
UFigura 151. Especificacin de los campos de la tabla _______________ 178
UFigura 152. Activando la extensin 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 inyeccin SQL_____________________________ 232
UFigura 184. Resultado de la inyeccin SQL _______________________ 232
UFigura 185. Evitando la inyeccin SQL___________________________ 234
UFigura 186. Resultado sin inyeccin 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 inyeccin 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. Autenticacin http con PHP __________________________ 246
Anexos

Oscar E Capuay Uceda 323
UFigura 200. Resultado de auth01.php____________________________ 247
UFigura 201. Autenticacin 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 pgina 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

Oscar E Capuay Uceda 324
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 bsqueda en xajax-buscar.php _______________ 300
UFigura 255. Resultado de la bsqueda en xajax-buscar.php __________ 300
UFigura 256. Listado de persona con xajax ________________________ 304
UFigura 257. Insercin de registros con xajax ______________________ 305
UFigura 258. Edicin de registro con xajax_________________________ 305
UFigura 259. Seleccin de registros con xajax______________________ 306
UFigura 260. Bsqueda de registros con xajax______________________ 306

S-ar putea să vă placă și